/* Resultado / Cases — grid de cards no mesmo layout dos serviços, cada card abre o produto técnico de origem */

const PI_CASES = [
  {
    n: 1, name: "Apto 2Q · Botafogo",
    phrase: "8 meses parado, vendido em 3 semanas.",
    delta: "+R$ 180k",
    deltaLabel: "Valorização pós-reforma",
    source: "Planta humanizada",
    sourceN: "02",
    template: "../../docs/prancha-projeto-pi001-002.html",
    mock: "PlantaMock",
    feature: true,
  },
  {
    n: 2, name: "Cobertura · Copacabana",
    phrase: "Vendida R$ 720k acima do anúncio inicial.",
    delta: "+38%",
    deltaLabel: "Preço final vs. pedido",
    source: "Imagens 3D",
    sourceN: "03",
    template: "../../docs/prancha-projeto-pi001-002.html",
    mock: "Render3DMock",
  },
  {
    n: 3, name: "Apto 3Q · Tijuca",
    phrase: "Desconto reduzido de R$ 120k para R$ 18k.",
    delta: "−85%",
    deltaLabel: "Margem de desconto",
    source: "Laudo de instalações",
    sourceN: "06",
    template: "../../docs/servicos-pi-06-print.html",
    mock: "ChecksMock",
  },
  {
    n: 4, name: "Studio · Leblon",
    phrase: "Investidor fechou em 11 dias após estudo Airbnb.",
    delta: "11 dias",
    deltaLabel: "Da apresentação à proposta",
    source: "Rentabilidade temporada",
    sourceN: "07",
    template: "../../docs/servicos-pi-07-print.html",
    mock: "AirbnbMock",
    feature: true,
  },
  {
    n: 5, name: "Apto 2Q · Flamengo",
    phrase: "Preço-alvo defendido com 3 propostas em 2 semanas.",
    delta: "R$ 1,18M",
    deltaLabel: "Preço fechado",
    source: "Análise valor de mercado",
    sourceN: "08",
    template: "../../docs/tabela-servicos.html",
    mock: "MarketMock",
  },
  {
    n: 6, name: "Casa · Recreio",
    phrase: "Reforma orçada em planilha tirou objeção do crédito.",
    delta: "R$ 340k",
    deltaLabel: "Orçamento total da obra",
    source: "Preço da obra",
    sourceN: "04",
    template: "../../docs/servicos-pi-04-print.html",
    mock: "TableMock",
  },
  {
    n: 7, name: "Apto 1Q · Centro",
    phrase: "Listagem refeita com as-built, vendeu em 26 dias.",
    delta: "26 dias",
    deltaLabel: "Tempo de mercado",
    source: "Planta do imóvel",
    sourceN: "01",
    template: "../../docs/prancha-planta.html",
    mock: "PhotoGridMock",
  },
  {
    n: 8, name: "Cobertura · Barra",
    phrase: "Projeto executivo destravou financiamento bancário.",
    delta: "R$ 2,4M",
    deltaLabel: "Financiamento aprovado",
    source: "Projeto arq. completo",
    sourceN: "05",
    template: "../../docs/prancha-projeto-pi001-002.html",
    mock: "Render3DMock",
    feature: true,
  },
];

const CaseCard = ({ c, highlight }) => {
  const Mock = window.PI_MOCKS && window.PI_MOCKS[c.mock];
  const [hover, setHover] = React.useState(false);
  return (
    <a href={c.template} target="_blank" rel="noopener"
      onMouseEnter={() => setHover(true)} onMouseLeave={() => setHover(false)}
      style={{
        background: highlight ? "#0F6E56" : "#fff",
        border: highlight ? "2px solid #0F6E56" : "1px solid #E4ECE8",
        borderRadius: 16, color: highlight ? "#fff" : "#0B3D33",
        textDecoration: "none", overflow: "hidden",
        display: "grid", gridTemplateRows: "180px 1fr",
        boxShadow: hover
          ? "0 24px 56px rgba(8,80,65,.18)"
          : highlight ? "0 16px 36px rgba(8,80,65,.14)" : "0 8px 22px rgba(8,80,65,.05)",
        transform: hover ? "translateY(-3px)" : "none",
        transition: "transform 200ms cubic-bezier(.2,.7,.2,1), box-shadow 200ms",
        cursor: "pointer",
      }}>
      <div style={{
        background: highlight ? "rgba(252,251,247,.07)" : "#FCFBF7",
        borderBottom: highlight ? "1px solid rgba(93,202,165,.18)" : "1px solid #E4ECE8",
        padding: 14, position: "relative",
      }}>
        {Mock ? <Mock /> : <div style={{ background: "#E1F5EE", borderRadius: 6, height: "100%" }} />}
        <div style={{
          position: "absolute", top: 10, right: 10,
          background: hover ? "#5DCAA5" : "rgba(255,255,255,.94)",
          color: hover ? "#0B3D33" : "#0F6E56",
          border: hover ? "1px solid #5DCAA5" : "1px solid rgba(15,110,86,.18)",
          borderRadius: 999, padding: "6px 10px",
          font: "700 9.5px/1 'Plus Jakarta Sans'", letterSpacing: ".14em", textTransform: "uppercase",
          display: "inline-flex", alignItems: "center", gap: 6,
          transition: "background 200ms, color 200ms",
        }}>
          {c.sourceN} · {c.source} <span style={{ fontSize: 11 }}>↗</span>
        </div>
      </div>
      <div style={{ padding: 24, display: "grid", gridTemplateRows: "auto 1fr auto", gap: 14 }}>
        <div style={{
          font: "700 10px/1 'Plus Jakarta Sans'", letterSpacing: ".22em", textTransform: "uppercase",
          color: highlight ? "#5DCAA5" : "#137a5f",
        }}>{c.name}</div>
        <div style={{
          font: "700 22px/1.2 'Plus Jakarta Sans'", letterSpacing: "-.012em",
          color: highlight ? "#fff" : "#0B3D33",
          textWrap: "balance",
        }}>{c.phrase}</div>
        <div style={{
          display: "flex", justifyContent: "space-between", alignItems: "baseline",
          borderTop: highlight ? "1px dashed rgba(93,202,165,.25)" : "1px dashed #D5E1DC",
          paddingTop: 12,
        }}>
          <div style={{ fontSize: 11, color: highlight ? "rgba(255,255,255,.6)" : "#7E9990", letterSpacing: ".08em", textTransform: "uppercase", fontWeight: 600 }}>{c.deltaLabel}</div>
          <div style={{ fontSize: 18, fontWeight: 800, color: highlight ? "#5DCAA5" : "#1D9E75", letterSpacing: "-.012em" }}>{c.delta}</div>
        </div>
      </div>
    </a>
  );
};

const ResultadoSection = () => (
  <section style={{ background: "#F6F8F7", padding: "72px 80px" }}>
    <div style={{ display: "flex", justifyContent: "space-between", alignItems: "flex-end", gap: 32, marginBottom: 40, flexWrap: "wrap" }}>
      <div>
        <PIEyebrow>Resultado</PIEyebrow>
        <h2 style={{ fontSize: 44, fontWeight: 700, letterSpacing: "-0.02em", color: "#0B3D33", margin: "12px 0 12px" }}>
          Casos reais — clique para ver o serviço que destravou.
        </h2>
        <p style={{ fontSize: 17, color: "#4A6B5E", maxWidth: 720, margin: 0 }}>
          Cada caso real mostra o serviço técnico que mudou a percepção do comprador. <strong>Clique em qualquer card para abrir o exemplo do entregável</strong> que foi usado para destravar a venda.
        </p>
      </div>
      <div style={{
        display: "inline-flex", alignItems: "center", gap: 10,
        padding: "12px 18px", border: "1px solid #B7E2D2", borderRadius: 999,
        background: "#E1F5EE", color: "#085041",
        font: "700 12px/1 'Plus Jakarta Sans'", letterSpacing: ".14em", textTransform: "uppercase",
      }}>
        <span style={{ width: 8, height: 8, borderRadius: "50%", background: "#1D9E75" }}></span>
        8 casos · Rio de Janeiro · 2025–2026
      </div>
    </div>

    <div style={{ display: "grid", gridTemplateColumns: "repeat(4, 1fr)", gap: 18 }}>
      {PI_CASES.map((c) => <CaseCard key={c.n} c={c} highlight={c.feature} />)}
    </div>
  </section>
);

Object.assign(window, { ResultadoSection, PI_CASES, CaseCard });