/* Components shared by the website UI kit */
const PIMark = ({ size = 40, stroke = "#fff" }) => (
  <svg width={size} height={size} viewBox="0 0 64 64" fill="none" stroke={stroke} strokeWidth="3.4" strokeLinejoin="round" strokeLinecap="round" aria-hidden="true">
    <path d="M32 6 L56 26 V56 a2 2 0 0 1 -2 2 H10 a2 2 0 0 1 -2 -2 V26 Z"/>
    <path d="M32 48 V22"/>
    <path d="M24 30 L32 22 L40 30"/>
  </svg>
);

const PILockup = ({ stroke = "#fff", topColor = "#fff", botColor = "#5DCAA5", size = 40 }) => (
  <div style={{ display: "flex", alignItems: "center", gap: 12 }}>
    <PIMark size={size} stroke={stroke} />
    <div style={{ lineHeight: 1 }}>
      <div style={{ fontSize: 22, fontWeight: 700, color: topColor, letterSpacing: "-0.01em" }}>Potencial</div>
      <div style={{ fontSize: 22, fontWeight: 500, color: botColor, letterSpacing: "-0.01em", marginTop: 2 }}>Imóvel</div>
    </div>
  </div>
);

const PINav = ({ active = "Início", onChange }) => {
  const items = ["Início", "Serviços", "Pacotes", "Resultado", "Como funciona", "Contato"];
  return (
    <nav style={{ display: "flex", gap: 8, flexWrap: "wrap" }}>
      {items.map((it) => (
        <button
          key={it}
          onClick={() => onChange && onChange(it)}
          aria-current={it === active ? "page" : undefined}
          style={{
            padding: "8px 16px",
            borderRadius: 999,
            font: "600 13.5px/1 'Plus Jakarta Sans', sans-serif",
            color: "#fff",
            border: "1px solid " + (it === active ? "#1D9E75" : "rgba(255,255,255,0.18)"),
            background: it === active ? "#1D9E75" : "transparent",
            cursor: "pointer",
            transition: "background 200ms cubic-bezier(.2,.7,.2,1)",
          }}
        >
          {it}
        </button>
      ))}
    </nav>
  );
};

const PIHeader = ({ active, onChange }) => (
  <header style={{
    background: "#0F6E56", padding: "14px 28px", display: "flex",
    alignItems: "center", justifyContent: "space-between", gap: 24,
    position: "sticky", top: 0, zIndex: 10,
  }}>
    <PILockup />
    <PINav active={active} onChange={onChange} />
  </header>
);

const PIFooter = () => (
  <footer style={{ background: "#085041", color: "rgba(255,255,255,.75)", padding: "32px 28px", borderTop: "1px solid rgba(255,255,255,.06)" }}>
    <div style={{ display: "flex", alignItems: "center", justifyContent: "space-between", gap: 24, flexWrap: "wrap" }}>
      <div style={{ display: "flex", alignItems: "center", gap: 14 }}>
        <PIMark size={28} stroke="#fff" />
        <div style={{ lineHeight: 1.2 }}>
          <div style={{ color: "#fff", fontWeight: 700 }}>Potencial Imóvel</div>
          <div style={{ fontSize: 12, letterSpacing: ".14em", marginTop: 4 }}>ASSESSORIA QUE FACILITA VENDA</div>
        </div>
      </div>
      <div style={{ fontSize: 13 }}>contato@potencialimovel.com.br · (11) 99999-0000 · @potencial_imovel</div>
    </div>
  </footer>
);

const PIButton = ({ variant = "primary", children, ...rest }) => {
  const base = {
    padding: "12px 22px",
    borderRadius: 999,
    font: "600 14px 'Plus Jakarta Sans', sans-serif",
    border: "1px solid transparent",
    cursor: "pointer",
    display: "inline-flex",
    alignItems: "center",
    gap: 8,
    transition: "background 200ms cubic-bezier(.2,.7,.2,1), transform 120ms",
  };
  const variants = {
    primary: { background: "#1D9E75", color: "#fff" },
    secondary: { background: "transparent", color: "#fff", borderColor: "rgba(255,255,255,0.35)" },
    ghost: { background: "#fff", color: "#085041", borderColor: "#E4ECE8" },
  };
  return <button style={{ ...base, ...variants[variant] }} {...rest}>{children}</button>;
};

const PIChip = ({ active, children, onClick }) => (
  <button onClick={onClick} style={{
    padding: "8px 16px",
    borderRadius: 999,
    border: "1px solid " + (active ? "#1D9E75" : "rgba(255,255,255,0.22)"),
    background: active ? "#1D9E75" : "transparent",
    color: "#fff",
    font: "600 13px 'Plus Jakarta Sans'",
    cursor: "pointer",
  }}>{children}</button>
);

const PIEyebrow = ({ children, dark }) => (
  <div style={{
    fontSize: 12,
    letterSpacing: ".14em",
    fontWeight: 600,
    textTransform: "uppercase",
    color: dark ? "#5DCAA5" : "#0F6E56",
  }}>{children}</div>
);

const PICheck = ({ size = 18 }) => (
  <span style={{
    width: size, height: size, borderRadius: "50%", background: "#1D9E75",
    display: "inline-grid", placeItems: "center", flex: "none",
  }}>
    <svg width={size * 0.65} height={size * 0.65} viewBox="0 0 24 24" fill="none" stroke="#fff" strokeWidth="3" strokeLinecap="round" strokeLinejoin="round"><polyline points="4 12 9 17 20 6"/></svg>
  </span>
);

Object.assign(window, { PIMark, PILockup, PINav, PIHeader, PIFooter, PIButton, PIChip, PIEyebrow, PICheck });