// Bottom sections: About, Process, Testimonials, FAQ, Contact, Footer
function About({ content }) {
  return (
    <section className="section" id="ueber">
      <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="about-grid">
          <Reveal className="about-photo">
            <ResponsiveImage
              src="/assets/images/eric-portrait-wide.webp"
              alt="Eric Langner am Mikrofon — Portrait"
              sizes="(max-width: 768px) 100vw, 50vw"
            />
          </Reveal>
          <Reveal className="about-text">
            <p><Rich>{content.p1}</Rich></p>
            <p>{content.p2}</p>
            <p><Rich>{content.p3}</Rich></p>

            <div className="spec-grid">
              {content.specs.map((s, i) => (
                <div key={i} className="spec">
                  <span className="label">{s.label}</span>
                  <span className="value">{s.value} <small>· {s.small}</small></span>
                </div>
              ))}
            </div>
          </Reveal>
        </div>
      </div>
    </section>
  );
}

function Process({ content }) {
  return (
    <section className="section" id="prozess">
      <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="process-list">
          {content.steps.map((s, i) => (
            <Reveal as="div" key={i} className="process-item">
              <span className="num">{s.num}</span>
              <h3>{s.title}</h3>
              <p>{s.desc}</p>
            </Reveal>
          ))}
        </div>
      </div>
    </section>
  );
}

function Testimonials({ content }) {
  return (
    <section className="section" id="testimonials">
      <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>

        <Reveal>
          <div className="testi-grid">
            {content.items.map((t, i) => (
              <div key={i} className="testi">
                <span className="mark">"</span>
                <p>{t.quote}</p>
                <div className="who">
                  <b>{t.who}</b>
                  <span>{t.role}</span>
                </div>
              </div>
            ))}
          </div>
        </Reveal>
      </div>
    </section>
  );
}

function FAQ({ content }) {
  const [open, setOpen] = useState(0);
  return (
    <section className="section" id="faq">
      <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>

        <Reveal>
          <div className="faq-list">
            {content.items.map((item, i) => (
              <div key={i} className={`faq-item ${open === i ? "open" : ""}`}>
                <button className="faq-q" onClick={() => setOpen(open === i ? -1 : i)} aria-expanded={open === i}>
                  <h3>{item.q}</h3>
                  <span className="plus"><Icon.Plus /></span>
                </button>
                <div className="faq-a">
                  <div><p>{item.a}</p></div>
                </div>
              </div>
            ))}
          </div>
        </Reveal>
      </div>
    </section>
  );
}

function Contact({ content, lang }) {
  const [sent, setSent] = useState(false);
  const onSubmit = (e) => {
    e.preventDefault();
    setSent(true);
    setTimeout(() => setSent(false), 4000);
  };

  return (
    <section className="section" id="kontakt">
      <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>
          <div>
            <RevealWords as="h2" parts={content.title} />
          </div>
        </div>

        <div className="contact-grid">
          <Reveal className="contact-text">
            <p style={{ color: "var(--muted)", fontSize: 18, maxWidth: "40ch", lineHeight: 1.55 }}>
              {content.intro}
            </p>
            <div className="contact-info">
              <a href="tel:+494077187384">
                <span className="icon"><Icon.Phone /></span>
                <span className="txt">
                  <span>{lang === "de" ? "Telefon" : "Phone"}</span>
                  <b>+49 40 77 187 384</b>
                </span>
              </a>
              <a href="mailto:welcome@ericspricht.de">
                <span className="icon"><Icon.Mail /></span>
                <span className="txt">
                  <span>E-Mail</span>
                  <b>welcome@ericspricht.de</b>
                </span>
              </a>
              <a href="https://www.sprecherdatei.de/sprecher/eric_langner.php" target="_blank" rel="noopener">
                <span className="icon"><Icon.Arrow /></span>
                <span className="txt">
                  <span>VDS</span>
                  <b>{lang === "de" ? "Profil in der Sprecherdatei" : "Profile on Sprecherdatei"}</b>
                </span>
              </a>
            </div>
          </Reveal>

          <Reveal as="form" className="form" onSubmit={onSubmit}>
            <div className="form-row">
              <div className="field">
                <label>{content.form.name}*</label>
                <input required type="text" name="name" />
              </div>
              <div className="field">
                <label>{content.form.email}*</label>
                <input required type="email" name="email" />
              </div>
            </div>
            <div className="form-row">
              <div className="field">
                <label>{content.form.company}</label>
                <input type="text" name="company" />
              </div>
              <div className="field">
                <label>{content.form.type}*</label>
                <select required name="type" defaultValue="">
                  <option value="" disabled>—</option>
                  {content.form.typeOptions.map((o) => <option key={o}>{o}</option>)}
                </select>
              </div>
            </div>
            <div className="field">
              <label>{content.form.msg}*</label>
              <textarea required name="message" rows="5" />
            </div>
            <div style={{ display: "flex", alignItems: "center", justifyContent: "space-between", gap: 16, flexWrap: "wrap" }}>
              <button type="submit" className="cta cta--accent">
                <span className="dot" />
                {sent ? (lang === "de" ? "Danke! Ich melde mich." : "Thanks! I'll be in touch.") : content.form.send}
                <Icon.Arrow />
              </button>
              <span className="form-note">{content.form.req}</span>
            </div>
          </Reveal>
        </div>
      </div>
    </section>
  );
}

function Footer({ content, navLinks }) {
  return (
    <footer className="footer">
      <div className="container">
        <div className="footer-top">
          <div>
            <div className="footer-statement">
              <RichTitle parts={content.statement} />
            </div>
            <div style={{ marginTop: 24, display: "flex", alignItems: "center", gap: 12 }}>
              <LogoMark size={28} />
              <span className="mono" style={{ fontSize: 11, color: "var(--muted)", textTransform: "uppercase", letterSpacing: "0.14em" }}>
                Hamburg · DACH · Remote
              </span>
            </div>
          </div>
          <div>
            <h4>{content.col1Title}</h4>
            <ul>
              {navLinks.map((n) => <li key={n.href}><a href={n.href}>{n.label}</a></li>)}
            </ul>
          </div>
          <div>
            <h4>{content.col2Title}</h4>
            <ul>
              {content.col2.map((n) => <li key={n.label}><a href={n.href}>{n.label}</a></li>)}
            </ul>
          </div>
          <div>
            <h4>{content.col3Title}</h4>
            <ul>
              {content.col3.map((n) => <li key={n.label}><a href={n.href} target="_blank" rel="noopener">{n.label}</a></li>)}
            </ul>
          </div>
        </div>
        <div className="footer-bottom">
          <span>{content.copyright}</span>
          <span>All rights reserved · v2.0</span>
        </div>
      </div>
    </footer>
  );
}

Object.assign(window, { About, Process, Testimonials, FAQ, Contact, Footer });