const CTA = () => {
  const [ref, inView] = useReveal({ threshold: 0.2 });

  return (
    <section id="cta" className="relative py-32 md:py-48 border-t overflow-hidden" style={{ borderColor: 'var(--rule)', background: 'var(--ink)', color: 'var(--bg)' }} data-screen-label="09 CTA">
      <div className="absolute inset-0 opacity-[0.06]" style={{
        backgroundImage: 'linear-gradient(to right, var(--bg) 1px, transparent 1px), linear-gradient(to bottom, var(--bg) 1px, transparent 1px)',
        backgroundSize: '80px 80px',
      }}></div>

      <div className="relative max-w-[1400px] mx-auto px-6 md:px-10">
        <div ref={ref} className="grid grid-cols-12 gap-x-6 items-end">
          <div className="col-span-12 md:col-span-9">
            <div className="flex items-center gap-3 mb-10">
              <span className="h-px w-12" style={{ background: 'var(--bg)' }}></span>
              <DimLabel style={{ color: 'var(--bg)' }}>§ 09 — CTA · SHEET 09</DimLabel>
            </div>
            <h2 className="font-serif font-light tracking-tightest leading-[0.92] text-[clamp(3rem,8vw,8.5rem)]"
              style={{ opacity: inView ? 1 : 0, transform: inView ? 'translateY(0)' : 'translateY(40px)', transition: 'opacity 1.2s, transform 1.2s' }}>
              <span className="block">Trace a próxima</span>
              <span className="block italic" style={{ color: 'var(--sepia)', transitionDelay: '180ms' }}>linha</span>
              <span className="block" style={{ transitionDelay: '360ms' }}>com mais clareza.</span>
            </h2>
          </div>
        </div>

        <div className="grid grid-cols-12 gap-x-6 mt-16">
          <div className="col-span-12 md:col-span-6">
            <p className="text-xl leading-relaxed" style={{ color: 'var(--mist)' }}>
              Comece em 7 dias grátis ou fale com um consultor que já trabalhou em escritório. Mostramos seu cenário com seus números, sem slide deck.
            </p>
          </div>

          <div className="col-span-12 md:col-span-6 md:flex md:justify-end mt-10 md:mt-0">
            <div className="space-y-4 w-full md:w-auto">
              <a href="/cadastro" className="btn-primary w-full md:w-auto justify-center"
                style={{ background: 'var(--bg)', color: 'var(--ink)' }}>
                <span>Cadastrar</span>
                <span>→</span>
              </a>
              <a href="mailto:comercial@archplan.local?subject=Demo%20ArchPlan" className="btn-ghost w-full md:w-auto justify-center"
                style={{ color: 'var(--bg)', borderColor: 'var(--bg)' }}>
                <span>Falar com vendas</span>
                <span>↗</span>
              </a>
              <DimLabel style={{ color: 'var(--mist)' }}>· 7 dias grátis · sem cartão · cancele quando quiser</DimLabel>
            </div>
          </div>
        </div>
      </div>
    </section>
  );
};

window.CTA = CTA;