function Entregaveis() {
  const items = [
    {
      t: 'Análise de Mercado',
      d: 'Documento estratégico com dimensionamento de mercado, análise competitiva, perfil do cliente ideal, voz do consumidor, SWOT e proposta de valor única. A base de toda decisão visual que vem depois.',
      tag: 'Documento estratégico',
    },
    {
      t: 'Mapa Visual + Síntese de Mercado',
      d: 'Output do benchmarking. Onde os concorrentes comunicam, como comunicam, e o espaço visual não ocupado. A fundação para qualquer decisão de identidade.',
      tag: 'Benchmarking',
    },
    {
      t: 'Rótulo Vetorizado',
      d: 'O rótulo é a consequência da análise — não o produto principal. Entregue em vetor editável, pronto para produção gráfica. Cada decisão de cor, tipografia e hierarquia tem raciocínio documentado.',
      tag: 'Arquivo de produção',
    },
    {
      t: 'Mockups em Alta Definição',
      d: 'Dois ângulos: frente e tabela nutricional. Visualização realista do produto final antes de qualquer investimento em impressão.',
      tag: 'Alta definição',
    },
    {
      t: 'Imagem Comercial',
      d: 'Foto de produto tratada para uso em e-commerce, redes sociais e PDV. Pronta para veiculação imediata, sem custo adicional de produção fotográfica.',
      tag: 'Foto tratada',
    },
  ];

  return (
    <Section id="entregaveis" style={{ borderTop: '1px solid var(--line-soft)' }}>
      <div className="container">
        <div style={{ display: 'grid', gridTemplateColumns: '1fr 2fr', gap: 60, marginBottom: 80 }} className="ent-head">
          <Label n="04">O que você recebe</Label>
          <MaskLines
            tag="h2"
            className="serif"
            style={{ fontSize: 'clamp(38px, 5.5vw, 80px)', lineHeight: 0.98, letterSpacing: '-0.03em' }}
            lines={[
              <>O rótulo vem</>,
              <>por <em className="italic">último.</em></>,
            ]}
          />
        </div>

        <div style={{ display: 'grid', gridTemplateColumns: 'repeat(3, 1fr)', gap: 0, borderTop: '1px solid var(--line-soft)', borderLeft: '1px solid var(--line-soft)' }} className="ent-grid">
          {items.map((it, i) => <DeliverableCard key={i} item={it} n={i + 1} delay={i * 80} />)}
        </div>

        <Reveal delay={200}>
          <p style={{ marginTop: 40, fontSize: 14, color: 'var(--fg-mute)', maxWidth: 640 }} className="mono">
            O rótulo é a consequência da análise — não o entregável principal. O principal é a decisão de onde e para quem jogar.
          </p>
        </Reveal>
      </div>
      <style>{`
        @media (max-width: 920px) { .ent-grid { grid-template-columns: repeat(2, 1fr) !important; } }
        @media (max-width: 600px) {
          .ent-grid { grid-template-columns: 1fr !important; }
          .ent-head { grid-template-columns: 1fr !important; gap: 20px !important; }
          .ent-card { padding: 24px 20px !important; min-height: auto !important; }
        }
      `}</style>
    </Section>
  );
}

function DeliverableCard({ item, n, delay }) {
  const [ref, inView] = useInView();
  const [hover, setHover] = useState(false);
  return (
    <div
      ref={ref}
      onMouseEnter={() => setHover(true)}
      onMouseLeave={() => setHover(false)}
      className="ent-card"
      style={{
        padding: '36px 32px',
        borderRight: '1px solid var(--line-soft)',
        borderBottom: '1px solid var(--line-soft)',
        display: 'flex', flexDirection: 'column', gap: 22,
        minHeight: 280,
        opacity: inView ? 1 : 0,
        transform: inView ? 'none' : 'translateY(20px)',
        transition: `opacity .9s ${delay}ms, transform .9s ${delay}ms, background .4s`,
        background: hover ? 'var(--bg-2)' : 'transparent',
        position: 'relative',
      }}
    >
      <div style={{ display: 'flex', justifyContent: 'space-between', alignItems: 'baseline' }}>
        <span className="mono" style={{ color: 'var(--accent)' }}>0{n}</span>
        <span className="mono">{item.tag}</span>
      </div>
      <h3 className="serif" style={{ fontSize: 30, letterSpacing: '-0.02em', lineHeight: 1.05, marginTop: 'auto' }}>
        {item.t}
      </h3>
      <p style={{ fontSize: 14.5, color: 'var(--fg-dim)', lineHeight: 1.55 }}>
        {item.d}
      </p>
    </div>
  );
}

window.Entregaveis = Entregaveis;