/* ============================================================
   CHAINUS — Trust, FAQ, Final CTA, Footer
   ============================================================ */

function Trust({ t }) {
  return (
    <section className="section trust" id="trust">
      <div className="wrap trust-grid">
        <div className="trust-copy">
          <Reveal className="eyebrow" as="span">{t.trust.eyebrow}</Reveal>
          <Reveal as="h2" className="h2" delay={70} style={{ marginTop: 16 }}>
            {t.trust.title[0]} <span className="brand-text">{t.trust.title[1]}</span>
          </Reveal>
          <Reveal className="lead" delay={130} style={{ marginTop: 16 }}>{t.trust.body}</Reveal>
          <Reveal delay={190} style={{ marginTop: 26 }}>
            <span className="chip">{t.dir === 'zh' ? '自托管, 合约公开' : 'Non-custodial, open contracts'}</span>
          </Reveal>
        </div>
        <div className="trust-points">
          {t.trust.points.map((p, i) => (
            <Reveal key={i} className="trust-point trust-point-quiet" delay={i * 80} scale>
              <span className="trust-index tnum">{String(i + 1).padStart(2, '0')}</span>
              <div>
                <h4 className="trust-pt">{p.title}</h4>
                <p className="muted lead-sm" style={{ marginTop: 5 }}>{p.body}</p>
              </div>
            </Reveal>
          ))}
        </div>
      </div>
    </section>
  );
}

function FaqItem({ item, open, onToggle }) {
  const bodyRef = useRef(null);
  return (
    <div className={`faq-item ${open ? 'open' : ''}`}>
      <button className="faq-q" onClick={onToggle} aria-expanded={open}>
        <span className="faq-qt">{item.q}</span>
        <span className="faq-chev"><ChevronIcon /></span>
      </button>
      <div className="faq-a" style={{ maxHeight: open ? (bodyRef.current ? bodyRef.current.scrollHeight + 8 : 400) : 0 }}>
        <p ref={bodyRef}>{item.a}</p>
      </div>
    </div>
  );
}

function FAQ({ t }) {
  const [open, setOpen] = useState(0);
  return (
    <section className="section faq" id="faq">
      <div className="wrap faq-grid">
        <div className="faq-head">
          <SectionHead eyebrow={t.faq.eyebrow} title={t.faq.title} />
          <Reveal delay={140} style={{ marginTop: 22 }}>
            <p className="muted lead-sm">{t.dir === 'zh' ? '没找到答案?' : 'Didn\u2019t find your answer?'}</p>
            <MagneticButton className="btn btn-line btn-sm" style={{ marginTop: 14 }}>
              {t.dir === 'zh' ? '联系支持' : 'Contact support'}<ArrowIcon />
            </MagneticButton>
          </Reveal>
        </div>
        <div className="faq-list">
          {t.faq.items.map((it, i) => (
            <Reveal key={i} delay={i * 40}>
              <FaqItem item={it} open={open === i} onToggle={() => setOpen(open === i ? -1 : i)} />
            </Reveal>
          ))}
        </div>
      </div>
    </section>
  );
}

function FinalCTA({ t }) {
  return null;
}

function Footer({ t }) {
  const marquee = ['ChainUs', 'On-chain social', 'Market pulse', 'Tokenize', 'Learn Web3'];
  const openWebApp = () => { window.location.href = 'https://app.chainus.org'; };
  const requestBeta = (e) => { e.preventDefault(); requestBetaAccess(t); };
  const submitContact = (e) => {
    e.preventDefault();
    const email = e.currentTarget.elements.email.value;
    const body = encodeURIComponent(`Email: ${email}\n\nI would like to request ChainUs beta access.`);
    window.location.href = `mailto:danielni0418@outlook.com?subject=ChainUs%20beta%20access&body=${body}`;
  };
  const zh = t.dir === 'zh';
  return (
    <footer className="footer motion-footer" id="download">
      <div className="footer-grid-bg" aria-hidden="true"></div>
      <div className="footer-aura" aria-hidden="true"></div>
      <div className="footer-diagonal" aria-hidden="true">
        <div className="marquee" style={{ '--dur': '34s' }}>
          {marquee.concat(marquee).map((word, i) => <span key={i}>{word}</span>)}
        </div>
      </div>
      <div className="wrap">
        <div className="footer-motion-head">
          <Logo height={26} />
          <a href="mailto:danielni0418@outlook.com?subject=ChainUs%20beta%20access" className="footer-pill" onClick={requestBeta}>{t.finalCta.ctaPrimary}<ArrowIcon /></a>
        </div>
        <div className="footer-kicker"><i></i>{t.finalCta.eyebrow}</div>
        <div className="footer-word" aria-hidden="true">CHAINUS</div>
        <div className="footer-cta-row">
          <p>{t.finalCta.sub}</p>
          <MagneticButton className="footer-pill footer-pill-strong" onClick={openWebApp}>{t.finalCta.ctaSecondary}<ArrowIcon /></MagneticButton>
        </div>
        <form className="footer-contact" id="contact" onSubmit={submitContact}>
          <div>
            <span className="tag">{zh ? 'Contact Us' : 'Contact Us'}</span>
            <h3>{zh ? '申请测试名额' : 'Request beta access'}</h3>
            <p>{zh ? '留下邮箱,我们会联系你。' : 'Leave your email and we’ll contact you with access details.'}</p>
          </div>
          <div className="footer-contact-field">
            <input id="contact-email" name="email" type="email" required placeholder={zh ? '你的邮箱' : 'you@example.com'} />
            <button className="footer-pill footer-pill-strong" type="submit">{zh ? '提交' : 'Submit'}<ArrowIcon /></button>
          </div>
        </form>
        <div className="footer-top">
          <div className="footer-brand">
            <p className="muted lead-sm" style={{ marginTop: 18, maxWidth: '30ch' }}>{t.footer.tagline}</p>
            <div className="footer-social">
              <a href="#" className="fsoc" aria-label="X">𝕏</a>
              <a href="#" className="fsoc" aria-label="Discord">◇</a>
              <a href="#" className="fsoc" aria-label="Telegram">✈</a>
            </div>
          </div>
          <div className="footer-cols">
            {t.footer.cols.map((c, i) => (
              <div key={i} className="footer-col">
                <h5 className="footer-ct tag">{c.title}</h5>
                <ul>{c.links.map((l, j) => <li key={j}><a href="#" className="footer-link">{l}</a></li>)}</ul>
              </div>
            ))}
          </div>
        </div>
        <div className="footer-bottom">
          <span className="faint" style={{ fontSize: 13 }}>{t.footer.copyright}</span>
          <div className="footer-legal">
            {t.footer.legal.map((l, i) => <a key={i} href="#" className="footer-link">{l}</a>)}
          </div>
        </div>
      </div>
    </footer>
  );
}

Object.assign(window, { Trust, FAQ, FinalCTA, Footer });