// Top sections: Nav, Hero, Services
function Nav({ lang, setLang, theme, setTheme, content }) {
  return (
    <nav className="nav">
      <div className="container nav-inner">
        <a href="#top" className="brand" aria-label="Eric spricht. — Home">
          <BrandLockup />
        </a>
        <div className="nav-links">
          {content.nav.map((n) => (
            <a key={n.href} href={n.href}>{n.label}</a>
          ))}
        </div>
        <div className="nav-right">
          <button
            className="lang-toggle"
            onClick={() => {
              const isEn = window.location.pathname.startsWith('/en/');
              window.location.href = isEn ? '/' : '/en/';
            }}
            aria-label="Sprache wechseln / Switch language"
          >
            <b>{lang === "de" ? "DE" : "EN"}</b>
            <span>/</span>
            <span>{lang === "de" ? "EN" : "DE"}</span>
          </button>
          <button
            className="nav-btn"
            onClick={() => setTheme(theme === "dark" ? "light" : "dark")}
            aria-label="Theme wechseln"
            title="Theme"
          >
            {theme === "dark" ? <Icon.Sun /> : <Icon.Moon />}
          </button>
          <a href="#kontakt" className="cta" style={{ display: "none" }}>
            <span className="dot" />
            {lang === "de" ? "Anfragen" : "Inquire"}
          </a>
        </div>
      </div>
    </nav>
  );
}

function Hero({ content, lang }) {
  return (
    <section className="hero" id="top">
      <div className="container">
        <Reveal className="hero-meta">
          {content.hero.meta.map((m, i) => (
            <span key={i}><i />{m}</span>
          ))}
        </Reveal>
        <div className="hero-grid">
          <div>
            <RevealWords as="h1" parts={content.hero.title} />
            <Reveal as="p" className="hero-sub">
              <Rich>{content.hero.sub}</Rich>
            </Reveal>
            <Reveal className="hero-actions">
              <a href="#kontakt" className="cta cta--lg cta--accent">
                <span className="dot" />
                {content.hero.cta1}
                <Icon.Arrow />
              </a>
              <a href="#showreel" className="cta cta--lg" style={{ background: "transparent", color: "var(--ink)", border: "1px solid var(--line-strong)" }}>
                <Icon.Play />
                {content.hero.cta2}
              </a>
            </Reveal>
          </div>
          <Reveal className="hero-portrait">
            <ResponsiveImage
              src="/assets/images/eric-portrait-hero.webp"
              alt="Eric Langner im Tonstudio mit Mikrofon — Werbesprecher und Synchronsprecher aus Hamburg"
              loading="eager"
              fetchpriority="high"
              sizes="(max-width: 768px) 100vw, 50vw"
            />
            <div className="hero-portrait-meta">
              <span className="chip">{content.hero.portraitChipL}</span>
              <span className="chip">{content.hero.portraitChipR}</span>
            </div>
          </Reveal>
        </div>

        {content.hero.signature_text && (
          <div className="hero-signature" aria-hidden="true">
            <img src="/assets/images/eric-logo-mark.png" alt="" width="32" height="32" />
            <span>{content.hero.signature_text}</span>
          </div>
        )}

        <div className="hero-wave">
          <span className="label">REEL_MAIN.wav</span>
          <AnimatedWave height={48} bars={220} />
          <span className="label">03:12 / 03:12</span>
        </div>
      </div>
    </section>
  );
}

function Services({ content }) {
  return (
    <section className="section" id="leistungen">
      <div className="container">
        <div className="section-head">
          <div className="side">
            {content.side.map((s, i) => (
              <span key={i} className={i === 0 ? "num" : ""}>{s}</span>
            ))}
          </div>
          <RevealWords as="h2" parts={content.title} />
        </div>

        <div className="services">
          {content.items.map((s, i) => (
            <Reveal as="article" key={s.num} className="service">
              <div className="service-num">
                <span>{s.num}</span>
                <span className="arrow"><Icon.Arrow /></span>
              </div>
              <h3>{s.title}</h3>
              <p>{s.desc}</p>
              <div className="service-tags">
                {s.tags.map((t) => <span key={t}>{t}</span>)}
              </div>
            </Reveal>
          ))}
        </div>
      </div>
    </section>
  );
}

Object.assign(window, { Nav, Hero, Services });