/* Serviços ("O que entregamos") — visual mockup grid showing each PDF deliverable */

const PI_SERVICES = [
  {
    n: 1, name: "Planta do imóvel",
    deliverable: "Levantamento as-built",
    pages: "A4 · 3 pranchas",
    bullets: ["Medição completa e fotos técnicas", "Planta as-built do estado atual", "Base para reforma, financiamento e anúncio"],
    days: "4 dias úteis", tipo: "Avulso",
    priceFrom: "R$ 1.500", install: "10x R$ 150",
    mock: "PhotoGridMock",
    template: "../../docs/prancha-planta.html",
  },
  {
    n: 2, name: "Planta do imóvel + planta reformada humanizada",
    deliverable: "Planta humanizada",
    pages: "A4 · 2 pranchas",
    bullets: ["Levantamento + 1 planta humanizada", "Layout, mobiliário e cores", "Comprador visualiza o potencial"],
    days: "5 dias úteis", tipo: "Avulso",
    priceFrom: "R$ 2.500", install: "10x R$ 250",
    mock: "PlantaMock",
    feature: true,
    template: "../../docs/prancha-projeto-pi001-002.html",
  },
  {
    n: 3, name: "Imagens dos ambientes decorados",
    deliverable: "Renders fotorrealistas",
    pages: "5 imagens",
    bullets: ["5 renders fotorrealistas", "Materializa o \"depois\" da reforma", "Maximiza conversão no anúncio"],
    days: "5 dias úteis", tipo: "Avulso",
    priceFrom: "R$ 3.600", install: "10x R$ 360",
    mock: "Render3DMock",
    feature: true,
    template: "../../docs/prancha-projeto-pi001-002.html",
  },
  {
    n: 4, name: "Preço da obra",
    deliverable: "Estudo de custo",
    pages: "8 páginas · 7 etapas",
    bullets: ["Levantamento + planta de reforma", "Planilha detalhada dos custos", "Argumento concreto na negociação"],
    days: "6 dias úteis", tipo: "Avulso",
    priceFrom: "R$ 3.200", install: "10x R$ 320",
    mock: "TableMock",
    template: "../../docs/servicos-pi-04-print.html",
  },
  {
    n: 5, name: "Projeto arquitetura com 3D",
    deliverable: "Projeto executivo + 3D",
    pages: "12 páginas",
    bullets: ["Projeto personalizado para o imóvel", "Planta + imagens renderizadas", "Para imóveis premium e reformas extensas"],
    days: "7 a 10 dias úteis", tipo: "Avulso",
    priceFrom: "R$ 9.000", install: "10x R$ 900",
    mock: "ExecutivoMock",
    feature: true,
    template: "../../docs/prancha-projeto-pi001-002.html",
  },
  {
    n: 6, name: "Laudo de instalações e infra",
    deliverable: "Laudo técnico",
    pages: "7 páginas",
    bullets: ["Diagnóstico de elétrica e hidráulica", "Verificação estrutural visual", "Reduz risco percebido pelo comprador"],
    days: "4 dias úteis", tipo: "Avulso",
    priceFrom: "R$ 2.000", install: "10x R$ 200",
    mock: "ChecksMock",
    template: "../../docs/servicos-pi-06-print.html",
  },
  {
    n: 7, name: "Rentabilidade aluguel temporada",
    deliverable: "Estudo Airbnb",
    pages: "9 páginas",
    bullets: ["Receita estimada via PriceLabs", "Análise por bairro e tipologia", "Argumento para o perfil investidor"],
    days: "2 dias úteis", tipo: "Avulso",
    priceFrom: "R$ 1.200", install: "10x R$ 120",
    mock: "AirbnbMock",
    template: "../../docs/servicos-pi-07-print.html",
  },
  {
    n: 8, name: "Análise valor de mercado",
    deliverable: "Avaliação + comparativo",
    pages: "6 páginas",
    bullets: ["Avaliação técnica do imóvel", "Comparativo de transações na quadra", "Embasamento para o preço pedido"],
    days: "2 dias úteis", tipo: "Avulso",
    priceFrom: "R$ 2.200", install: "10x R$ 220",
    mock: "MarketMock",
    template: "../../docs/tabela-servicos.html",
  },
];

/* ── Document chrome — green header bar that reads as "PDF" ── */
const DocFrame = ({ title, children, dark }) => (
  <div style={{
    background: dark ? "#0F1F1B" : "#fff",
    border: `1px solid ${dark ? "rgba(93,202,165,.18)" : "rgba(8,80,65,.16)"}`,
    borderRadius: 6, height: "100%", overflow: "hidden",
    display: "grid", gridTemplateRows: "30px 1fr",
    boxShadow: dark ? "none" : "0 4px 12px rgba(8,80,65,.08)",
  }}>
    <div style={{
      background: "#085041", color: "#fff",
      padding: "0 12px", display: "flex", alignItems: "center", gap: 8,
    }}>
      <span style={{ width: 9, height: 9, borderRadius: "50%", background: "#5DCAA5" }}></span>
      <span style={{ font: "700 9px/1 'Plus Jakarta Sans'", letterSpacing: ".18em", textTransform: "uppercase", color: "rgba(255,255,255,.85)" }}>{title}</span>
    </div>
    <div style={{ padding: "12px 14px", display: "grid", gap: 6, alignContent: "start", overflow: "hidden" }}>
      {children}
    </div>
  </div>
);

/* ── Mocks ── */
const PlantaMock = () => (
  <DocFrame title="Projeto · humanizado">
    <img src="assets/produtos/p2-humanizada.jpeg"
      alt="" style={{ width: "100%", height: "100%", objectFit: "cover", borderRadius: 3 }}
    />
  </DocFrame>
);

const Render3DMock = () => (
  <DocFrame title="Imagens 3D · antes/depois" dark>
    <div style={{ display: "grid", gridTemplateRows: "1fr 1fr", gap: 4, height: "100%" }}>
      <div style={{ position: "relative", borderRadius: 3, overflow: "hidden" }}>
        <img src="assets/produtos/p3-antes.jpeg" alt="" style={{ width: "100%", height: "100%", objectFit: "cover", display: "block" }} />
        <span style={{ position: "absolute", top: 4, left: 4, background: "rgba(11,31,27,.78)", color: "rgba(255,255,255,.92)", font: "700 7px/1 'Plus Jakarta Sans'", letterSpacing: ".22em", textTransform: "uppercase", padding: "3px 5px", borderRadius: 2 }}>Antes</span>
      </div>
      <div style={{ position: "relative", borderRadius: 3, overflow: "hidden" }}>
        <img src="assets/produtos/p3-depois-1.jpeg" alt="" style={{ width: "100%", height: "100%", objectFit: "cover", display: "block" }} />
        <span style={{ position: "absolute", top: 4, left: 4, background: "#1D9E75", color: "#fff", font: "700 7px/1 'Plus Jakarta Sans'", letterSpacing: ".22em", textTransform: "uppercase", padding: "3px 5px", borderRadius: 2 }}>Depois</span>
      </div>
    </div>
  </DocFrame>
);

const ExecutivoMock = () => (
  <DocFrame title="Projeto · executivo + 3D">
    <div style={{ display: "grid", gridTemplateRows: "1.4fr 1fr", gap: 4, height: "100%" }}>
      <img src="assets/produtos/p5-imagem.jpeg" alt="" style={{ width: "100%", height: "100%", objectFit: "cover", borderRadius: 3, display: "block" }} />
      <img src="assets/produtos/p5-levantamento-telhado.png" alt="" style={{ width: "100%", height: "100%", objectFit: "contain", background: "#FCFBF7", borderRadius: 3, display: "block" }} />
    </div>
  </DocFrame>
);

const PhotoGridMock = () => (
  <DocFrame title="Dossiê · captação">
    <div style={{ display: "grid", gridTemplateColumns: "1fr 1fr 1fr", gridTemplateRows: "1fr 1fr", gap: 4, height: "100%" }}>
      <div style={{ background: "#0F6E56", borderRadius: 3, gridRow: "1 / 3" }}></div>
      <div style={{ background: "#1D9E75", borderRadius: 3 }}></div>
      <div style={{ background: "#5DCAA5", borderRadius: 3 }}></div>
      <div style={{ background: "#137a5f", borderRadius: 3 }}></div>
      <div style={{ background: "#E1F5EE", borderRadius: 3, border: "1px solid #B7E2D2" }}></div>
    </div>
  </DocFrame>
);

const TableMock = () => (
  <DocFrame title="Preço de obra · 7 etapas">
    <div style={{ display: "grid", gap: 3, fontFamily: "'Plus Jakarta Sans', sans-serif" }}>
      {[
        { l: "Demolição", v: "R$ 4.200" },
        { l: "Hidráulica", v: "R$ 8.900", alt: true },
        { l: "Elétrica", v: "R$ 6.500" },
        { l: "Acabamento", v: "R$ 18.300", alt: true },
      ].map((r, i) => (
        <div key={i} style={{
          display: "grid", gridTemplateColumns: "1fr auto", gap: 6,
          padding: "5px 7px", borderRadius: 2,
          background: r.alt ? "#FCFBF7" : "#E1F5EE",
          border: r.alt ? "1px solid #E4ECE8" : "none",
        }}>
          <span style={{ font: "600 9px/1 'Plus Jakarta Sans'", color: "#085041" }}>{r.l}</span>
          <span style={{ font: "700 9px/1 ui-monospace, monospace", color: "#085041" }}>{r.v}</span>
        </div>
      ))}
      <div style={{
        display: "grid", gridTemplateColumns: "1fr auto", gap: 6,
        padding: "6px 8px", borderRadius: 2, background: "#085041", color: "#fff",
      }}>
        <span style={{ font: "700 10px/1 'Plus Jakarta Sans'" }}>Total estimado</span>
        <span style={{ font: "800 10px/1 ui-monospace, monospace", color: "#5DCAA5" }}>R$ 64.800</span>
      </div>
    </div>
  </DocFrame>
);

const ChecksMock = () => {
  const rows = [
    { l: "Hidráulica · pressão", t: "OK", v: "ok" },
    { l: "Esgoto · ramal", t: "Atenção", v: "warn" },
    { l: "Elétrica · quadro", t: "Crítico", v: "bad" },
    { l: "Estrutura · viga", t: "OK", v: "ok" },
    { l: "Esquadrias", t: "OK", v: "ok" },
  ];
  const palette = {
    ok:   { bg: "#E1F5EE", dot: "#1D9E75", tagBg: "rgba(8,80,65,.10)", tagFg: "#137a5f" },
    warn: { bg: "#FBF1D9", dot: "#E0B636", tagBg: "rgba(122,89,23,.18)", tagFg: "#7A5917" },
    bad:  { bg: "#FBE3E1", dot: "#C95852", tagBg: "rgba(140,47,42,.18)", tagFg: "#8C2F2A" },
  };
  return (
    <DocFrame title="Laudo · instalações">
      <div style={{ display: "grid", gap: 4 }}>
        {rows.map((r, i) => {
          const p = palette[r.v];
          return (
            <div key={i} style={{
              display: "grid", gridTemplateColumns: "10px 1fr auto", gap: 8, alignItems: "center",
              padding: "4px 6px", borderRadius: 2, background: p.bg,
            }}>
              <span style={{ width: 8, height: 8, borderRadius: "50%", background: p.dot }}></span>
              <span style={{ font: "600 9px/1 'Plus Jakarta Sans'", color: "#085041" }}>{r.l}</span>
              <span style={{
                font: "700 7.5px/1 'Plus Jakarta Sans'", letterSpacing: ".1em", textTransform: "uppercase",
                padding: "3px 5px", borderRadius: 2, background: p.tagBg, color: p.tagFg,
              }}>{r.t}</span>
            </div>
          );
        })}
      </div>
    </DocFrame>
  );
};

const AirbnbMock = () => (
  <DocFrame title="Rentabilidade · Airbnb">
    <div style={{ display: "grid", gap: 6 }}>
      <div style={{ display: "grid", gridTemplateColumns: "1fr 1fr", gap: 4 }}>
        <div style={{ background: "#E1F5EE", padding: "5px 7px", borderRadius: 2 }}>
          <div style={{ font: "700 6.5px/1 'Plus Jakarta Sans'", letterSpacing: ".14em", textTransform: "uppercase", color: "#7E9990" }}>Receita/mês</div>
          <div style={{ font: "800 13px/1 'Plus Jakarta Sans'", color: "#085041", marginTop: 2, letterSpacing: "-.01em" }}>R$ 11.4k</div>
        </div>
        <div style={{ background: "#1D9E75", padding: "5px 7px", borderRadius: 2 }}>
          <div style={{ font: "700 6.5px/1 'Plus Jakarta Sans'", letterSpacing: ".14em", textTransform: "uppercase", color: "rgba(255,255,255,.78)" }}>Payback</div>
          <div style={{ font: "800 13px/1 'Plus Jakarta Sans'", color: "#fff", marginTop: 2, letterSpacing: "-.01em" }}>3,8 anos</div>
        </div>
      </div>
      <div style={{
        display: "grid", gridTemplateColumns: "repeat(12,1fr)", gap: 2, alignItems: "end", height: 56, paddingTop: 4,
      }}>
        {[40,50,60,70,80,75,95,100,70,55,65,85].map((h, i) => (
          <div key={i} style={{
            background: i === 6 || i === 7 ? "#1D9E75" : i === 11 ? "#137a5f" : "#B7E2D2",
            height: `${h}%`, borderRadius: "1px 1px 0 0",
          }}></div>
        ))}
      </div>
    </div>
  </DocFrame>
);

const MarketMock = () => (
  <DocFrame title="Mercado · comparativo">
    <div style={{ display: "grid", gap: 6 }}>
      <div style={{
        display: "grid", gridTemplateColumns: "repeat(12,1fr)", gap: 2, alignItems: "end", height: 70,
      }}>
        {[28,42,38,56,50,72,88,95,70,55,48,32].map((h, i) => (
          <div key={i} style={{
            background: i === 6 || i === 7 ? "#1D9E75" : "#B7E2D2",
            height: `${h}%`, borderRadius: "1px 1px 0 0",
          }}></div>
        ))}
      </div>
      <div style={{ display: "flex", justifyContent: "space-between", font: "600 7px/1 'Plus Jakarta Sans'", color: "#7E9990", paddingTop: 2 }}>
        <span>R$ 9k/m²</span><span style={{ color: "#137a5f", fontWeight: 700 }}>R$ 14k · mediana</span><span>R$ 22k</span>
      </div>
      <div style={{ display: "grid", gridTemplateColumns: "1fr 1fr", gap: 4, paddingTop: 4 }}>
        <div style={{ background: "#E1F5EE", padding: "5px 7px", borderRadius: 2 }}>
          <div style={{ font: "700 6.5px/1 'Plus Jakarta Sans'", letterSpacing: ".14em", textTransform: "uppercase", color: "#7E9990" }}>Tempo médio</div>
          <div style={{ font: "800 12px/1 'Plus Jakarta Sans'", color: "#085041", marginTop: 2 }}>94 dias</div>
        </div>
        <div style={{ background: "#1D9E75", padding: "5px 7px", borderRadius: 2 }}>
          <div style={{ font: "700 6.5px/1 'Plus Jakarta Sans'", letterSpacing: ".14em", textTransform: "uppercase", color: "rgba(255,255,255,.78)" }}>Ticket sugerido</div>
          <div style={{ font: "800 12px/1 'Plus Jakarta Sans'", color: "#fff", marginTop: 2 }}>R$ 1,18M</div>
        </div>
      </div>
    </div>
  </DocFrame>
);

const PI_MOCKS = { PlantaMock, Render3DMock, ExecutivoMock, PhotoGridMock, TableMock, ChecksMock, AirbnbMock, MarketMock };

const ServiceCard = ({ s, highlight }) => {
  const Mock = PI_MOCKS[s.mock];
  const [hover, setHover] = React.useState(false);
  const Wrapper = s.template ? "a" : "div";
  const wrapperProps = s.template
    ? { href: s.template, target: "_blank", rel: "noopener", style: { textDecoration: "none" } }
    : {};
  return (
    <Wrapper {...wrapperProps}
      onMouseEnter={() => setHover(true)}
      onMouseLeave={() => setHover(false)}
      style={{
        ...(wrapperProps.style || {}),
        background: "#fff",
        border: highlight ? "2px solid #1D9E75" : "1px solid #E4ECE8",
        borderRadius: 16, color: "#0B3D33", overflow: "hidden",
        display: "grid", gridTemplateRows: "200px 1fr",
        boxShadow: hover
          ? "0 24px 56px rgba(8,80,65,.16)"
          : highlight ? "0 16px 36px rgba(8,80,65,.10)" : "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 cubic-bezier(.2,.7,.2,1)",
        cursor: s.template ? "pointer" : "default",
      }}>
      <div style={{
        background: "#FCFBF7", borderBottom: "1px solid #E4ECE8",
        padding: 14, position: "relative",
      }}>
        <Mock />
        {s.template && (
          <div style={{
            position: "absolute", top: 10, right: 10,
            background: hover ? "#0F6E56" : "rgba(255,255,255,.94)",
            color: hover ? "#fff" : "#0F6E56",
            border: hover ? "1px solid #0F6E56" : "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, border-color 200ms",
          }}>
            Ver exemplo
            <span style={{ fontSize: 11 }}>↗</span>
          </div>
        )}
      </div>
      <div style={{ padding: highlight ? 23 : 24 }}>
        <div style={{ display: "flex", alignItems: "center", gap: 10, marginBottom: 12 }}>
          <span style={{
            width: 26, height: 26, borderRadius: "50%",
            background: highlight ? "#0F6E56" : "#E1F5EE",
            color: highlight ? "#fff" : "#0F6E56",
            display: "grid", placeItems: "center", font: "700 12px/1 'Plus Jakarta Sans'",
          }}>{s.n}</span>
          <div style={{ fontWeight: 700, fontSize: 17 }}>{s.name}</div>
        </div>
        <div style={{
          display: "inline-flex", gap: 8, alignItems: "center",
          font: "700 10px/1 'Plus Jakarta Sans'", letterSpacing: ".14em", textTransform: "uppercase",
          color: "#137a5f", padding: "6px 10px", borderRadius: 999,
          background: "#E1F5EE", marginBottom: 14,
        }}>
          <span>Em PDF · {s.deliverable}</span>
          <span style={{ width: 4, height: 4, borderRadius: "50%", background: "#137a5f" }}></span>
          <span style={{ color: "#7E9990" }}>{s.pages}</span>
        </div>
        <ul style={{ listStyle: "none", padding: 0, margin: "0 0 14px", display: "grid", gap: 7 }}>
          {s.bullets.map((b, i) => (
            <li key={i} style={{ display: "flex", gap: 10, alignItems: "flex-start", fontSize: 13.5, color: "#37524A" }}>
              <PICheck size={16} /><span style={{ marginTop: 1 }}>{b}</span>
            </li>
          ))}
        </ul>
        <div style={{ display: "flex", justifyContent: "space-between", alignItems: "flex-end", borderTop: "1px dashed #D5E1DC", paddingTop: 12, gap: 12 }}>
          <div style={{ fontSize: 12, color: "#7E9990" }}>Entrega: {s.days}</div>
          <div style={{ textAlign: "right" }}>
            <div style={{ fontSize: 9.5, color: "#7E9990", fontWeight: 700, letterSpacing: ".08em", textTransform: "uppercase", marginBottom: 3 }}>A partir de</div>
            <div style={{ display: "inline-flex", alignItems: "baseline", gap: 5, justifyContent: "flex-end" }}>
              <span style={{ font: "700 10.5px/1 'Plus Jakarta Sans'", color: "#1D9E75", letterSpacing: ".02em" }}>
                {s.install.split(" ")[0]}
              </span>
              <span style={{ fontSize: 21, fontWeight: 700, color: "#0F6E56", letterSpacing: "-0.01em", lineHeight: 1 }}>
                {s.install.split(" ").slice(1).join(" ")}
              </span>
            </div>
            <div style={{ fontSize: 10.5, color: "#7E9990", marginTop: 4, fontWeight: 500 }}>
              ou {s.priceFrom} no total
            </div>
          </div>
        </div>
      </div>
    </Wrapper>
  );
};

const ServicesSection = () => (
  <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>Nossos serviços</PIEyebrow>
        <h2 style={{ fontSize: 44, fontWeight: 700, letterSpacing: "-0.02em", color: "#0B3D33", margin: "12px 0 12px" }}>
          O que fazemos
        </h2>
        <p style={{ fontSize: 17, color: "#4A6B5E", maxWidth: 620, margin: 0 }}>
          Cada serviço entrega um <strong>PDF padronizado</strong> na identidade Potencial Imóvel — pronto para o corretor anexar no e-mail e responder à objeção do lead com técnica. Clique em qualquer serviço para ver um exemplo real do entregável.
        </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 serviços · entrega a partir de 2 dias úteis
      </div>
    </div>
    <div style={{ display: "grid", gridTemplateColumns: "repeat(4, 1fr)", gap: 18 }}>
      {PI_SERVICES.map((s) => <ServiceCard key={s.n} s={s} highlight={s.feature} />)}
    </div>
  </section>
);

Object.assign(window, { ServicesSection, ServiceCard, PI_SERVICES, PI_MOCKS });