/* About + Industries + FAQ + CTA */

function About() {
  const { t } = useT();
  return (
    <section className="about" id="about">
      <div className="shell">
        <Reveal>
          <div className="section-head">
            <div className="eyebrow">{t.about.eyebrow}</div>
            <h2>{t.about.h2a}<em>{t.about.h2b}</em>{t.about.h2c}</h2>
            <p>{t.about.sub}</p>
          </div>
        </Reveal>

        <div className="about-grid">
          <Reveal>
            <div className="about-card dark">
              <div className="label">{t.about.visionLabel}</div>
              <h3>{t.about.visionH}</h3>
              <p>{t.about.visionP}</p>
            </div>
          </Reveal>
          <Reveal delay={120}>
            <div className="about-card">
              <div className="label">{t.about.missionLabel}</div>
              <h3>{t.about.missionH}</h3>
              <p>{t.about.missionP}</p>
            </div>
          </Reveal>
        </div>

        <Reveal>
          <div className="values">
            {t.about.values.map((v, i) => (
              <div className="value" key={i}>
                <div className="num">0{i + 1}</div>
                <h4>{v.t}</h4>
                <p>{v.d}</p>
              </div>
            ))}
          </div>
        </Reveal>
      </div>
    </section>
  );
}

function Industries() {
  const { t } = useT();
  return (
    <section className="industries">
      <div className="shell">
        <Reveal>
          <div className="section-head">
            <div className="eyebrow">{t.industries.eyebrow}</div>
            <h2>{t.industries.h2}</h2>
            <p>{t.industries.sub}</p>
          </div>
        </Reveal>
        <Reveal delay={120}>
          <div className="industry-grid">
            {t.industries.list.map((n, i) => (
              <div className="industry" key={i}>{n}</div>
            ))}
          </div>
        </Reveal>
      </div>
    </section>
  );
}

function FAQ() {
  const { t } = useT();
  const [open, setOpen] = useState(0);
  return (
    <section className="faq" id="faq">
      <div className="shell">
        <Reveal>
          <div className="section-head">
            <div className="eyebrow">{t.faq.eyebrow}</div>
            <h2>{t.faq.h2a}<em>{t.faq.h2b}</em>{t.faq.h2c}</h2>
          </div>
        </Reveal>
        <Reveal delay={100}>
          <div className="faq-list">
            {t.faq.list.map((f, i) => (
              <div key={i} className="faq-item" data-open={open === i} data-magnet
                onClick={() => setOpen(open === i ? -1 : i)}>
                <div className="q">
                  <h4>{f.q}</h4>
                  <span className="plus"><PlusIcon /></span>
                </div>
                <div className="a">
                  <div className="a-inner">{f.a}</div>
                </div>
              </div>
            ))}
          </div>
        </Reveal>
      </div>
    </section>
  );
}

function CTA({ navigate }) {
  const { t } = useT();
  return (
    <section className="cta-section" id="cta">
      <div className="cta-bg" />
      <div className="shell">
        <div className="cta-shell">
          <Reveal><div className="eyebrow" style={{ color: "rgba(255,255,255,0.7)" }}>{t.cta.eyebrow}</div></Reveal>
          <Reveal delay={80}><h2>{t.cta.h2a}<em>{t.cta.h2b}</em>{t.cta.h2c}</h2></Reveal>
          <Reveal delay={160}><p>{t.cta.sub}</p></Reveal>
          <Reveal delay={220}>
            <a href="#start" className="btn" onClick={(e) => { e.preventDefault(); navigate && navigate("start"); window.scrollTo({ top: 0 }); }}>
              {t.cta.btn} <ArrowIcon />
            </a>
          </Reveal>
        </div>
      </div>
    </section>
  );
}

Object.assign(window, { About, Industries, FAQ, CTA });