// Main App — all content driven by window.C (set by content.js)

const { useState: useS, useEffect: useE } = React;

function Nav() {
  const c = window.C;
  const [scrolled, setScrolled] = useS(false);
  useE(() => {
    const h = () => setScrolled(window.scrollY > 40);
    window.addEventListener('scroll', h);
    return () => window.removeEventListener('scroll', h);
  }, []);
  return (
    <nav className={`nav ${scrolled ? 'scrolled' : ''}`}>
      <div className="container nav-inner">
        <a href="/" className="logo" style={{ textDecoration: 'none' }}>
          <img src="/assets/logo.png" alt="" style={{ height: 36, width: 'auto', display: 'block' }}/>
          Heroers
        </a>
        <div className="nav-links">
          <a href="#how">{c.nav.howItWorks}</a>
          <a href="#themes">{c.nav.themes}</a>
          <a href="#safety">{c.nav.safety}</a>
          <a href={c.langSwitch.href} style={{ fontSize: 13, color: 'var(--text-muted)', letterSpacing: '0.06em', fontWeight: 600 }}>{c.langSwitch.label}</a>
          <a href="#download" className="btn btn-primary nav-cta" style={{ padding: '10px 18px', fontSize: 14 }}>{c.nav.download}</a>
        </div>
      </div>
    </nav>
  );
}

function Hero({ tweaks }) {
  const c = window.C.hero;
  return (
    <section className="hero">
      <div className="container hero-grid">
        <div>
          <div className="eyebrow" style={{ marginBottom: 20 }}><span className="eyebrow-dot"/>{c.eyebrow}</div>
          <h1>
            {c.h1[0]}<span className="serif serif-i">{c.h1[1]}</span>{c.h1[2]}<span className="serif serif-i">{c.h1[3]}</span>
          </h1>
          <p className="lead" style={{ marginTop: 24 }}>{c.lead}</p>
          <div className="hero-ctas">
            <a href="#download" className="btn btn-primary btn-lg">{c.ctaPrimary}</a>
            <a href="#how" className="btn btn-ghost">{c.ctaGhost}</a>
          </div>
          <div className="trust-line">
            {c.trust.map((t, i) => <span key={i}><span className="trust-check">✓</span> {t}</span>)}
          </div>
        </div>
        <HeroPhone cycleSpeed={tweaks.cycleSpeed} emojiDensity={tweaks.emoji}/>
      </div>
    </section>
  );
}

function HowItWorks() {
  const c = window.C.how;
  return (
    <section id="how" className="section how">
      <div className="container">
        <div className="section-head reveal">
          <div className="eyebrow"><span className="eyebrow-dot"/>{c.eyebrow}</div>
          <h2>{c.h2[0]}<span className="serif serif-i">{c.h2[1]}</span>{c.h2[2] || ''}</h2>
          <p className="lead">{c.lead}</p>
        </div>
        <div className="steps">
          {c.steps.map((s, i) => (
            <div key={i} className="step-card reveal" style={{ transitionDelay: `${i * 0.1}s` }}>
              <div className="step-num">{s.num}</div>
              <div className="step-emoji">{s.emoji}</div>
              <h3>{s.title}</h3>
              <p>{s.body}</p>
            </div>
          ))}
        </div>
        <div className="how-note reveal">{c.note}</div>
      </div>
    </section>
  );
}

function Experience() {
  const c = window.C.experience;
  return (
    <section className="section experience">
      <div className="experience-stars"/>
      <div className="container" style={{ position: 'relative', zIndex: 2 }}>
        <div className="section-head reveal">
          <div className="eyebrow eyebrow-dark"><span className="eyebrow-dot"/>{c.eyebrow}</div>
          <h2 style={{ color: 'white' }}>
            {c.h2[0]}<br/>
            <span className="serif serif-i" style={{ color: '#c9b8ff' }}>{c.h2[1]}</span>
          </h2>
          <p className="lead">{c.lead}</p>
        </div>
        <Walkthrough/>
      </div>
    </section>
  );
}

function ThemeShowcase() {
  const c = window.C.themes;
  return (
    <section id="themes" className="section themes">
      <div className="container" style={{ position: 'relative' }}>
        <div className="section-head reveal">
          <div className="eyebrow"><span className="eyebrow-dot"/>{c.eyebrow}</div>
          <h2>{c.h2[0]}<span className="serif serif-i">{c.h2[1]}</span></h2>
          <p className="lead">{c.lead}</p>
        </div>
        <div className="theme-grid">
          {c.list.map((t, i) => (
            <div key={i} className="theme-card reveal" style={{ transitionDelay: `${i * 0.05}s` }}>
              <img src={t.img} alt={t.name}/>
              <div className="theme-emoji">{t.emoji}</div>
              <div className="theme-meta">
                <div className="theme-name">{t.name}</div>
                <div className="theme-hook">{t.hook}</div>
              </div>
            </div>
          ))}
        </div>
      </div>
    </section>
  );
}

function WhyParents() {
  const c = window.C.why;
  return (
    <section className="section why">
      <div className="container">
        <div className="section-head reveal">
          <div className="eyebrow"><span className="eyebrow-dot"/>{c.eyebrow}</div>
          <h2>{c.h2[0]}<span className="serif serif-i">{c.h2[1]}</span>{c.h2[2] || ''}</h2>
        </div>
        <div className="why-grid">
          {c.list.map((w, i) => (
            <div key={i} className="why-card reveal" style={{ transitionDelay: `${i * 0.05}s` }}>
              <div className="why-emoji">{w.emoji}</div>
              <h3>{w.title}</h3>
              <p>{w.body}</p>
            </div>
          ))}
        </div>
      </div>
    </section>
  );
}

function Safety() {
  const c = window.C.safety;
  return (
    <section id="safety" className="section safety">
      <div className="container">
        <div className="safety-grid">
          <div className="reveal">
            <div className="eyebrow" style={{ marginBottom: 20 }}><span className="eyebrow-dot"/>{c.eyebrow}</div>
            <h2>{c.h2[0]}<span className="serif serif-i">{c.h2[1]}</span></h2>
            <p className="lead" style={{ marginTop: 16 }}>{c.lead}</p>
            <div className="safety-list">
              {c.list.map((s, i) => (
                <div key={i} className="safety-item">
                  <div className="safety-icon">{s.emoji}</div>
                  <div><h4>{s.title}</h4><p>{s.body}</p></div>
                </div>
              ))}
            </div>
          </div>
          <div className="reveal">
            <div className="safety-shield">
              <div className="safety-shield-bg">
                <span style={{ filter: 'drop-shadow(0 10px 20px rgba(124,77,255,0.3))' }}>🛡️</span>
              </div>
              {['✨','🌙','⭐','💜'].map((e, i) => (
                <div key={i} style={{ position: 'absolute', top: `${20 + i * 22}%`, left: i % 2 === 0 ? '-10%' : '100%', fontSize: 28, animation: `floaty ${6 + i}s ease-in-out infinite`, animationDelay: `${i * 0.7}s`, filter: 'drop-shadow(0 4px 10px rgba(124,77,255,0.25))' }}>{e}</div>
              ))}
            </div>
          </div>
        </div>
      </div>
    </section>
  );
}

function Testimonials() {
  const c = window.C.testimonials;
  return (
    <section className="section testimonials">
      <div className="container">
        <div className="section-head reveal">
          <div className="eyebrow"><span className="eyebrow-dot"/>{c.eyebrow}</div>
          <h2>{c.h2[0]}<span className="serif serif-i">{c.h2[1]}</span>{c.h2[2] || ''}</h2>
        </div>
        <div className="testimonial-row">
          {c.list.map((t, i) => (
            <div key={i} className="testimonial reveal" style={{ transitionDelay: `${i * 0.08}s` }}>
              <div className="testimonial-stars">★★★★★</div>
              <div className="testimonial-quote">{t.quote}</div>
              <div className="testimonial-meta">
                <div className="testimonial-avatar" style={{ background: t.color }}>{t.emoji}</div>
                <div className="testimonial-meta-text">
                  <strong>{t.name}</strong>
                  <div>{t.kid}</div>
                </div>
              </div>
            </div>
          ))}
        </div>
      </div>
    </section>
  );
}

function FinalCTA({ tweaks }) {
  const c = window.C.finalCta;
  const themeEmojis = ['🦕', '🚀', '🧜', '🧚', '🏴‍☠️', '🏰'];
  const positions = [
    { top: '15%', left: '10%' }, { top: '25%', right: '12%' },
    { top: '60%', left: '8%' },  { top: '55%', right: '9%' },
    { top: '80%', left: '18%' }, { top: '75%', right: '20%' },
  ];
  return (
    <section id="download" className="section final">
      <div className="final-stars"/>
      {themeEmojis.map((e, i) => (
        <div key={i} className="final-emoji" style={{ ...positions[i], animationDelay: `${i * 0.7}s`, fontSize: 40 + (i % 3) * 10 }}>{e}</div>
      ))}
      <div className="container final-inner">
        <div className="eyebrow eyebrow-dark" style={{ marginBottom: 24 }}><span className="eyebrow-dot"/>{c.eyebrow}</div>
        <h2>{c.h2[0]}<br/><em>{c.h2[1]}</em></h2>
        <p className="lead">{c.lead}</p>
        <div className="final-ctas">
          <a href="#" className="btn btn-white btn-lg">{c.cta}</a>
        </div>
        <div className="store-badges">
          <a href="#" className="store-badge">
            <span style={{ fontSize: 24 }}>🍎</span>
            <span>
              <span className="store-badge-sub">{c.appStore.sub}</span>
              <span className="store-badge-name">{c.appStore.name}</span>
            </span>
          </a>
          <a href="#" className="store-badge">
            <span style={{ fontSize: 22 }}>▶</span>
            <span>
              <span className="store-badge-sub">{c.playStore.sub}</span>
              <span className="store-badge-name">{c.playStore.name}</span>
            </span>
          </a>
        </div>
      </div>
    </section>
  );
}

function Footer() {
  const c = window.C.footer;
  return (
    <footer className="footer">
      <div className="container">
        <div className="logo" style={{ color: 'white', justifyContent: 'center' }}>
          <img src="/assets/logo.png" alt="" style={{ height: 32, width: 'auto' }}/>
          Heroers
        </div>
        <div className="footer-links">
          {c.links.map((l, i) => <a key={i} href={l.href}>{l.label}</a>)}
        </div>
        <div className="footer-tag">{c.tag}</div>
      </div>
    </footer>
  );
}

function App() {
  const [tweaks] = useS(window.TWEAK_DEFAULTS);

  useE(() => {
    document.documentElement.style.setProperty('--violet', tweaks.accent);
    document.documentElement.style.setProperty('--violet-deep', tweaks.accent);
  }, [tweaks.accent]);

  useE(() => {
    const observer = new IntersectionObserver((entries) => {
      entries.forEach(e => { if (e.isIntersecting) e.target.classList.add('in'); });
    }, { threshold: 0.12 });
    document.querySelectorAll('.reveal').forEach(el => observer.observe(el));
    return () => observer.disconnect();
  });

  return (
    <>
      <Nav/>
      <Hero tweaks={tweaks}/>
      <HowItWorks/>
      <Experience/>
      <ThemeShowcase/>
      <WhyParents/>
      <Safety/>
      <Testimonials/>
      <FinalCTA tweaks={tweaks}/>
      <Footer/>
    </>
  );
}

ReactDOM.createRoot(document.getElementById('root')).render(<App/>);