// Manifesto — editorial pull-quote moment between sections, sets the tone

function Manifesto() {
  const lines = [
    { text: "We don't sell decks.", emphasis: false },
    { text: "We don't staff benches.", emphasis: false },
    { text: "We don't write specs for someone else to ship.", emphasis: false },
  ];

  return (
    <section className="relative py-28 lg:py-40 overflow-hidden"
             style={{background: 'var(--surface-warm)', borderTop: '1px solid var(--border)', borderBottom: '1px solid var(--border)'}}>
      {/* Subtle ambient warmth */}
      <div className="absolute inset-0 pointer-events-none" aria-hidden="true">
        <div className="absolute top-1/2 left-1/2 -translate-x-1/2 -translate-y-1/2 w-[1100px] h-[600px] rounded-full"
             style={{background: 'radial-gradient(ellipse at center, rgba(233,184,114,0.08), transparent 60%)', filter: 'blur(80px)'}}></div>
      </div>

      <div className="relative max-w-[1100px] mx-auto px-6 lg:px-10">
        <div className="reveal eyebrow mb-10 lg:mb-14">Manifesto</div>

        <div className="space-y-3 lg:space-y-5 mb-14 lg:mb-20">
          {lines.map((l, i) => (
            <div key={i} className="reveal flex items-baseline gap-5" data-delay={i * 140}>
              <span className="font-mono text-[11px] uppercase tracking-[0.22em] flex-shrink-0 pt-3 hidden sm:inline-block"
                    style={{color: 'var(--dim)', minWidth: '36px'}}>
                /0{i + 1}
              </span>
              <p className="font-display text-[32px] sm:text-[44px] lg:text-[60px] leading-[1.05] tracking-[-0.035em] font-medium"
                 style={{color: 'var(--ink)'}}>
                {l.text}
              </p>
            </div>
          ))}
        </div>

        <div className="grid grid-cols-1 lg:grid-cols-12 gap-8 lg:gap-12 items-start">
          <div className="lg:col-span-6 reveal" data-delay="120">
            <p className="font-serif italic text-[26px] sm:text-[32px] lg:text-[38px] leading-[1.25] tracking-[-0.015em]"
               style={{color: 'var(--ink-warm)'}}>
              We are a small group of senior engineers who got tired of watching consulting bills go up
              and code quality go down. So we built the firm we&apos;d have wanted to hire.
            </p>
          </div>
          <div className="lg:col-span-5 lg:col-start-8 reveal space-y-7" data-delay="220">
            <p className="text-[15px] leading-[1.65]" style={{color: 'var(--muted)'}}>
              Every engagement is staffed entirely by senior engineers — no partner-on-pitch, junior-on-delivery
              bait-and-switch. The people who scope your work are the people who write the code.
            </p>
            <p className="text-[15px] leading-[1.65]" style={{color: 'var(--muted)'}}>
              We commit to outcomes, not hours. We charge for shipped software and moved KPIs. And we leave
              your team stronger than we found it — that&apos;s the deal.
            </p>
            <div className="flex items-center gap-3 pt-3">
              <div className="font-mono text-[10.5px] uppercase tracking-[0.2em]" style={{color: 'var(--ink)'}}>
                — The Cardefi team
              </div>
              <div className="h-px flex-1" style={{background: 'var(--border)'}}></div>
            </div>
          </div>
        </div>
      </div>
    </section>
  );
}

window.Manifesto = Manifesto;