// ciclo. — CTA strip + Footer

const CTAStrip = () => (
  <section className="cta-strip">
    <div className="container">
      <div className="cta-strip-grid">
        <div>
          <span className="eyebrow"><span className="dot"/>pronto pra parar de pensar nisso?</span>
          <h2>
            seu primeiro<br/>domingo te <em>espera<span className="p">.</span></em>
          </h2>
        </div>
        <div className="cta-strip-actions">
          <a href="#quiz" className="btn btn-on-em">começar o quiz · 2 min</a>
          <a href="#planos" className="btn btn-ghost" style={{color: 'var(--paper)'}}>ver planos</a>
        </div>
      </div>
    </div>
    <img src="assets/pattern-week.svg" className="cta-strip-pattern" alt=""/>
  </section>
);

const Footer = () => (
  <footer className="site-foot">
    <div className="container">
      <div className="foot-top">
        <div className="foot-brand">
          <span className="word">ciclo<span className="p">.</span></span>
          <p className="tag">sua casa em modo automático. entregas todo domingo, são paulo.</p>
          <img src="assets/mark-editorial.svg" alt="" className="foot-mark"/>
        </div>
        <div className="foot-col">
          <span className="eyebrow">produto</span>
          <a href="#como">como funciona</a>
          <a href="#kit">o kit</a>
          <a href="#planos">planos</a>
          <a href="#quiz">começar</a>
        </div>
        <div className="foot-col">
          <span className="eyebrow">empresa</span>
          <a href="#about">sobre</a>
          <a href="#imprensa">imprensa</a>
          <a href="#carreiras">carreiras</a>
          <a href="#contato">contato</a>
        </div>
        <div className="foot-col">
          <span className="eyebrow">suporte</span>
          <a href="#whatsapp">whatsapp</a>
          <a href="#faq">dúvidas</a>
          <a href="#status">status da entrega</a>
          <a href="#cobertura">cobertura sp</a>
        </div>
      </div>
      <div className="foot-bottom">
        <span className="mono-small">© 2026 ciclo. cnpj 00.000.000/0001-00 · são paulo, br</span>
        <div className="legal">
          <a href="#termos">termos</a>
          <a href="#privacidade">privacidade</a>
          <a href="#lgpd">lgpd</a>
        </div>
      </div>
    </div>
  </footer>
);

window.CTAStrip = CTAStrip;
window.Footer = Footer;