// CCSE 2026 website — Languages, FAQ, Final CTA, Footer

function Languages({ t }) {
  const { SectionHeading: SHead } = dsLib();
  const l = t.languages;
  return (
    <section className="section" id="idiomas">
      <div className="container">
        <Reveal><SHead eyebrow={l.eyebrow} title={l.title} lede={l.lede} /></Reveal>
        <Reveal delay={140}>
          <div className="langgrid">
            {l.list.map((name, i) => (
              <span className="langpill" key={name} style={{ transitionDelay: `${i * 30}ms` }}>{name}</span>
            ))}
          </div>
        </Reveal>
      </div>
    </section>
  );
}

function Faq({ t }) {
  const { SectionHeading: SHead, Accordion } = dsLib();
  const f = t.faq;
  return (
    <section className="section alt" id="faq">
      <div className="container">
        <Reveal><SHead eyebrow={f.eyebrow} title={f.title} /></Reveal>
        <Reveal delay={120}>
          <div className="faqwrap">
            <Accordion items={f.items} defaultOpen={0} />
          </div>
        </Reveal>
      </div>
    </section>
  );
}

function FinalCta({ t, lang }) {
  const { StoreBadge: Store } = dsLib();
  const c = t.cta;
  return (
    <section className="section" id="descargar">
      <div className="container">
        <Reveal>
          <div className="ctapanel">
            <div className="ctaglow" aria-hidden="true"></div>
            <img src={LOGO} alt="" width="64" height="64" style={{ borderRadius: 16, background: "#fff", padding: 4 }} />
            <h2>{c.title}</h2>
            <p>{c.lede}</p>
            <div className="storebar center">
              <Store store="app-store" lang={lang} size="lg" />
              <Store store="google-play" lang={lang} size="lg" />
            </div>
            <div className="ctanote">
              <Icon name="heart" size={15} style={{ color: "var(--accent-2)" }} />
              <span>{c.note}</span>
            </div>
          </div>
        </Reveal>
      </div>
    </section>
  );
}

function Footer({ t }) {
  const f = t.footer;
  return (
    <footer className="footer">
      <div className="container footgrid">
        <div className="footbrand">
          <a href="#top" className="brand">
            <img src={LOGO} alt="" width="30" height="30" style={{ borderRadius: 8 }} />
            <span>CCSE <em>2026</em></span>
          </a>
          <p>{f.tagline}</p>
          <p className="disclaimer">{f.disclaimer}</p>
        </div>
        <div className="footlinks">
          <a href="mailto:patukhome@gmail.com">{f.contact} · patukhome@gmail.com</a>
        </div>
      </div>
      <div className="container footbottom">
        <span>{f.rights}</span>
        <span className="footstripe" aria-hidden="true"></span>
      </div>
    </footer>
  );
}

Object.assign(window, { Languages, Faq, FinalCta, Footer });