/* Hero ("Início") section — dark, with mint highlight phrase + service chips + stats */

const HeroSection = ({ activeChip, onChip }) => {
  const chips = ["Arquitetura", "Engenharia", "Análise financeira", "Projeto 3D"];
  return (
    <section style={{ background: "#085041", color: "#fff", padding: "72px 80px 96px" }}>
      <PIEyebrow dark>PORTFÓLIO DE SERVIÇOS · POTENCIAL IMÓVEL</PIEyebrow>
      <h1 style={{
        fontSize: 64, lineHeight: 1.05, fontWeight: 700, letterSpacing: "-0.02em",
        margin: "20px 0 28px", maxWidth: 1100, textWrap: "balance",
      }}>
        Transformamos imóveis parados em <span style={{ color: "#5DCAA5" }}>imóveis prontos para vender</span>.
      </h1>
      <p style={{ fontSize: 18, color: "rgba(255,255,255,.78)", maxWidth: 720, margin: "0 0 32px", lineHeight: 1.55 }}>
        Assessoria técnica, arquitetônica e financeira para que corretores e imobiliárias comercializem mais rápido e por melhor preço.
      </p>

      <div style={{ display: "flex", gap: 10, flexWrap: "wrap", marginBottom: 48 }}>
        {chips.map((c) => (
          <PIChip key={c} active={c === activeChip} onClick={() => onChip && onChip(c)}>{c}</PIChip>
        ))}
      </div>

      <div style={{ display: "grid", gridTemplateColumns: "repeat(3, max-content)", gap: 80, marginTop: 40 }}>
        <Stat num="7" label="serviços especializados" />
        <Stat num="5 dias" label="prazo médio de entrega" />
        <Stat num="3 em 1" label="arq. + eng. + financeiro" />
      </div>

      <div style={{ marginTop: 48, display: "flex", gap: 12 }}>
        <PIButton variant="primary">Solicitar estudo →</PIButton>
        <PIButton variant="secondary">Ver pacotes</PIButton>
      </div>
    </section>
  );
};

const Stat = ({ num, label }) => (
  <div>
    <div style={{ fontSize: 44, fontWeight: 700, color: "#5DCAA5", lineHeight: 1, letterSpacing: "-0.01em" }}>{num}</div>
    <div style={{ fontSize: 13, color: "rgba(255,255,255,.65)", marginTop: 8 }}>{label}</div>
  </div>
);

Object.assign(window, { HeroSection });