// NorthPoint Pergolas — brand foundation. Exports atoms + tokens to window.
// Direction: Dark Dramatic backbone + warm-cream breathing room (from A).
// (re-saved to refresh serve cache)

// ============================================================================
//  FORM DELIVERY — submissions are emailed to NorthPoint via Web3Forms.
//  TO ACTIVATE (one-time): go to https://web3forms.com, enter
//  brody@northpointpergolas.com, and it emails you an Access Key instantly
//  (no account needed). Paste that key below, replacing PASTE-KEY-HERE.
//  Until then, forms fall back to opening the visitor's email app.
// ============================================================================
const WEB3FORMS_KEY = "81d119c5-b4c4-4b34-9900-a9ad6b1b13f2";
const LEAD_EMAIL = "brody@northpointpergolas.com";

async function submitLead(fields, subject) {
  const payload = { ...fields, subject, from_name: "NorthPoint Website" };
  // Not yet configured → mailto fallback so leads are never silently lost.
  if (!WEB3FORMS_KEY || WEB3FORMS_KEY === "PASTE-KEY-HERE") {
    const body = Object.entries(fields).map(([k, v]) => `${k}: ${v}`).join("\n");
    window.location.href = `mailto:${LEAD_EMAIL}?subject=${encodeURIComponent(subject)}&body=${encodeURIComponent(body)}`;
    return { ok: true, fallback: true };
  }
  try {
    const res = await fetch("https://api.web3forms.com/submit", {
      method: "POST",
      headers: { "Content-Type": "application/json", Accept: "application/json" },
      body: JSON.stringify({ access_key: WEB3FORMS_KEY, ...payload }),
    });
    const data = await res.json();
    return { ok: !!data.success };
  } catch (e) {
    return { ok: false };
  }
}
window.submitLead = submitLead;

const NP = {
  ink: "#15110d", // page background, deep espresso-black
  panel: "#1d1712", // raised dark panel
  panel2: "#251e16", // darker card
  bone: "#f4efe7", // warm cream section
  bone2: "#ebe3d5", // cream alt
  gold: "#c8ae76", // brand gold (sampled from logo)
  goldSoft: "#d8c498",
  goldDeep: "#9a7c45", // gold for text on cream (contrast)
  textL: "#f3ede3", // light text on dark
  textL2: "rgba(243,237,227,0.60)",
  textD: "#221c15", // dark text on cream
  textD2: "#615847",
  lineL: "rgba(243,237,227,0.13)",
  lineD: "rgba(27,23,18,0.14)"
};
const FONT = {
  disp: "'Archivo', system-ui, sans-serif",
  serif: "'Cormorant Garamond', Georgia, serif",
  body: "'Hanken Grotesk', system-ui, sans-serif"
};

// ---- Logo (real PNG) ----
function NPLogoImg({ onDark = true, height = 46, style = {} }) {
  return (
    <img
      src={onDark ? "assets/logo-on-dark.png" : "assets/logo-on-light.png"}
      alt="NorthPoint Pergolas"
      style={{ height, width: "auto", display: "block", ...style }} />);


}

// ---- Kicker (gold eyebrow with rule) ----
function Kicker({ children, center, dark = true, style = {} }) {
  return (
    <div style={{ display: "inline-flex", alignItems: "center", gap: 12, justifyContent: center ? "center" : "flex-start",
      fontFamily: FONT.body, fontSize: 12.5, fontWeight: 700, letterSpacing: "0.24em", textTransform: "uppercase",
      color: dark ? NP.gold : NP.goldDeep, ...style }}>
      <span style={{ width: 30, height: 1.5, background: "currentColor", opacity: 0.7 }} />
      {children}
    </div>);

}

// ---- Button ----
function Btn({ children, variant = "solid", onClick, type, style = {}, full }) {
  const base = {
    display: "inline-flex", alignItems: "center", justifyContent: "center", gap: 9,
    fontFamily: FONT.body, fontSize: 13.5, fontWeight: 700, letterSpacing: "0.08em",
    textTransform: "uppercase", padding: "16px 30px", borderRadius: 2, cursor: "pointer",
    border: "1px solid transparent", transition: "all .18s ease", width: full ? "100%" : "auto",
    whiteSpace: "nowrap"
  };
  const variants = {
    solid: { background: NP.gold, color: "#1a130b", borderColor: NP.gold },
    outline: { background: "transparent", color: NP.textL, borderColor: NP.lineL },
    outlineDark: { background: "transparent", color: NP.textD, borderColor: NP.lineD },
    ghost: { background: "transparent", color: NP.gold, borderColor: "transparent", padding: "16px 8px" }
  };
  const hov = {
    solid: (e, on) => {e.currentTarget.style.background = on ? NP.goldSoft : NP.gold;},
    outline: (e, on) => {e.currentTarget.style.borderColor = on ? NP.gold : NP.lineL;e.currentTarget.style.color = on ? NP.gold : NP.textL;},
    outlineDark: (e, on) => {e.currentTarget.style.borderColor = on ? NP.goldDeep : NP.lineD;e.currentTarget.style.color = on ? NP.goldDeep : NP.textD;},
    ghost: (e, on) => {e.currentTarget.style.color = on ? NP.goldSoft : NP.gold;}
  };
  return (
    <button type={type || "button"} onClick={onClick}
    onMouseEnter={(e) => hov[variant](e, true)} onMouseLeave={(e) => hov[variant](e, false)}
    style={{ ...base, ...variants[variant], ...style }}>
      {children}
    </button>);

}

// ---- Image / placeholder (swap-ready: pass src once photos arrive) ----
function NPImg({ src, label, dark = true, style = {}, rounded = 0, children }) {
  const stripe = dark ?
  { bg: "#221b14", a: "rgba(255,255,255,0.05)", b: "rgba(255,255,255,0.085)", text: "rgba(243,237,227,0.5)", chip: "rgba(20,16,12,0.6)" } :
  { bg: "#e6ddcd", a: "rgba(34,28,21,0.05)", b: "rgba(34,28,21,0.09)", text: "rgba(34,28,21,0.5)", chip: "rgba(244,239,231,0.75)" };
  return (
    <div style={{ position: "relative", width: "100%", height: "100%", borderRadius: rounded, overflow: "hidden",
      backgroundColor: stripe.bg,
      backgroundImage: src ? `url(${src})` : `repeating-linear-gradient(135deg, ${stripe.a} 0px, ${stripe.a} 2px, ${stripe.b} 2px, ${stripe.b} 12px)`,
      backgroundSize: "cover", backgroundPosition: "center", ...style }}>
      {!src && label &&
      <div style={{ position: "absolute", inset: 0, display: "flex", alignItems: "center", justifyContent: "center" }}>
          <span style={{ fontFamily: FONT.body, fontSize: 11, fontWeight: 600, letterSpacing: "0.14em", textTransform: "uppercase",
          color: stripe.text, background: stripe.chip, padding: "6px 12px", borderRadius: 999 }}>{label}</span>
        </div>
      }
      {children}
    </div>);

}

// ---- Reveal on scroll ----
function Reveal({ children, delay = 0, y = 22, style = {} }) {
  const ref = React.useRef(null);
  const [shown, setShown] = React.useState(false);
  React.useEffect(() => {
    const el = ref.current;if (!el) return;
    const io = new IntersectionObserver((es) => {
      es.forEach((e) => {if (e.isIntersecting) {setShown(true);io.disconnect();}});
    }, { threshold: 0.12 });
    io.observe(el);
    return () => io.disconnect();
  }, []);
  return (
    <div ref={ref} style={{ opacity: shown ? 1 : 0, transform: shown ? "none" : `translateY(${y}px)`,
      transition: `opacity .7s ease ${delay}ms, transform .7s cubic-bezier(.2,.7,.2,1) ${delay}ms`, ...style }}>
      {children}
    </div>);

}

// ---- Shared window-width hook ----
function useW() {
  const [w, setW] = React.useState(typeof window !== "undefined" ? window.innerWidth : 1440);
  React.useEffect(() => {
    const onResize = () => setW(window.innerWidth);
    window.addEventListener("resize", onResize);
    return () => window.removeEventListener("resize", onResize);
  }, []);
  return w;
}

// ---- Section wrapper (consistent rhythm / generous padding) ----
function Section({ id, children, bg, padY = 116, style = {} }) {
  const w = useW();
  const px = w < 768 ? "20px" : "48px";
  const py = w < 768 ? Math.round(padY * 0.65) : padY;
  return (
    <section id={id} style={{ background: bg || NP.ink, padding: `${py}px 0`, position: "relative", ...style }}>
      <div style={{ maxWidth: 1240, margin: "0 auto", padding: `0 ${px}` }}>{children}</div>
    </section>);

}

function Stars({ size = 14, color }) {
  return <span style={{ color: color || NP.gold, fontSize: size, letterSpacing: "2px" }}>★★★★★</span>;
}

Object.assign(window, { NP, FONT, NPLogoImg, Kicker, Btn, NPImg, Reveal, Section, Stars, useW });