// Top sections: Hero, CredentialStrip, Craft/Why.
const HERO_VARIANTS = {
  sun: {
    label: "Built for the Arizona sun",
    kicker: "Custom Alumawood Shade · Phoenix Metro and the East Valley",
    head: [["Custom shade,", false], ["built for the", false], ["Arizona sun.", true]],
    sub: "Beautiful, durable pergolas and patio covers — engineered for the heat and finished to the detail. Real craftsmanship at honest pricing."
  },
  comfortable: {
    label: "Your backyard, comfortable",
    kicker: "Custom Alumawood Shade · Phoenix Metro and the East Valley",
    head: [["Your backyard,", false], ["finally", false], ["comfortable.", true]],
    sub: "Custom pergolas and patio covers that turn unusable summer space into your favorite room — designed around your home and built to last."
  },
  belongs: {
    label: "Shade that belongs here",
    kicker: "Custom Alumawood Shade · Phoenix Metro and the East Valley",
    head: [["Shade, built", false], ["like it", false], ["belongs here.", true]],
    sub: "Thoughtfully designed pergolas and patio covers, crafted for the desert and finished to the detail — at a price that stays honest."
  },
  premium: {
    label: "Premium, custom-built",
    kicker: "Custom Alumawood Shade · Phoenix Metro and the East Valley",
    head: [["Premium shade,", false], ["custom-built", false], ["for your home.", true]],
    sub: "From louvered systems to insulated covers — engineered, permitted, and installed by a crew that sweats the details."
  },
  cooler: {
    label: "Make summer enjoyable",
    kicker: "Custom Alumawood Shade · Phoenix Metro and the East Valley",
    head: [["Step outside.", false], ["Stay", false], ["cool.", true]],
    sub: "Custom Alumawood pergolas and patio covers, designed for Arizona heat and built beautifully — so your backyard works all year."
  },
  bold: {
    label: "The desert is brutal (bold)",
    kicker: "Custom Alumawood Shade · Phoenix Metro and the East Valley",
    head: [["The desert is brutal.", false], ["Your patio", false], ["shouldn't be.", true]],
    sub: "Custom pergolas and patio covers, engineered for Arizona heat and finished to the detail. A decade of craft — at an honest number."
  }
};

function Hero({ onQuote, copy, img }) {
  const c = copy || HERO_VARIANTS.sun;
  const w = useW();
  const mobile = w < 768;
  const [in_, setIn] = React.useState(false);
  React.useEffect(() => {const t = setTimeout(() => setIn(true), 80);return () => clearTimeout(t);}, []);
  const anim = (d) => ({ opacity: in_ ? 1 : 0, transform: in_ ? "none" : "translateY(26px)",
    transition: `opacity .9s ease ${d}ms, transform .9s cubic-bezier(.2,.7,.2,1) ${d}ms` });
  return (
    <div id="top" style={{ position: "relative", minHeight: "100vh", display: "flex", flexDirection: "column", justifyContent: "flex-end", overflow: "hidden", background: NP.ink }}>
      <div style={{ position: "absolute", inset: 0 }}><NPImg src={img || "assets/img/IMG_2706.png"} label="full-bleed hero" dark /></div>
      <div style={{ position: "absolute", inset: 0, background: "linear-gradient(180deg, rgba(21,17,13,0.82) 0%, rgba(21,17,13,0.30) 30%, rgba(21,17,13,0.45) 62%, rgba(21,17,13,0.96) 100%)" }} />
      {/* sun arc motif echoing the logo */}
      <div style={{ position: "absolute", top: "14%", right: "10%", width: 220, height: 110, borderRadius: "220px 220px 0 0",
        background: "radial-gradient(120px 120px at 50% 100%, rgba(200,174,118,0.28), rgba(200,174,118,0) 70%)", filter: "blur(2px)" }} />
      <div style={{ position: "relative", maxWidth: 1320, width: "100%", margin: "0 auto", padding: mobile ? "110px 20px 72px" : "140px 40px 104px" }}>
        <div style={anim(120)}><Kicker>{c.kicker}</Kicker></div>
        <h1 style={{ ...anim(220), fontFamily: FONT.disp, fontWeight: 800, fontSize: "clamp(48px, 6.6vw, 92px)", lineHeight: 0.98,
          letterSpacing: "-0.02em", textTransform: "uppercase", color: NP.textL, margin: "26px 0 0", maxWidth: 980 }}>
          {c.head.map((ln, i) =>
          <React.Fragment key={i}>{i ? <br /> : null}<span style={{ color: ln[1] ? NP.gold : "inherit" }}>{ln[0]}</span></React.Fragment>
          )}
        </h1>
        <p style={{ ...anim(340), fontFamily: FONT.body, fontSize: 19, lineHeight: 1.6, color: "rgba(243,237,227,0.82)", maxWidth: 540, margin: "30px 0 0" }}>
          {c.sub}
        </p>
        <div style={{ ...anim(460), display: "flex", gap: 14, marginTop: 40, alignItems: "center", flexWrap: "wrap" }}>
          <Btn variant="solid" onClick={onQuote}>Request a Free Quote</Btn>
          <Btn variant="outline" onClick={() => scrollToId("gallery")}>See the Work</Btn>
          {window.SHOW_REVIEWS ?
          <div style={{ display: "flex", alignItems: "center", gap: 10, marginLeft: 8 }}>
                <Stars size={15} /><span style={{ fontFamily: FONT.body, fontSize: 14, fontWeight: 600, color: NP.textL2 }}>Trusted across the Valley</span>
              </div> :
          null}
        </div>
      </div>
    </div>);

}

function CredItem({ icon }) {
  const common = { width: 30, height: 30, viewBox: "0 0 24 24", fill: "none", stroke: NP.gold, strokeWidth: 1.5, strokeLinecap: "round", strokeLinejoin: "round" };
  const paths = {
    shield: <React.Fragment><path d="M12 3 L20 6 V11 C20 16 16 19 12 21 C8 19 4 16 4 11 V6 Z" /><path d="M9 11.5 l2 2 l4-4" /></React.Fragment>,
    seal: <React.Fragment><circle cx="12" cy="9.5" r="5.5" /><path d="M12 7.2 l0.8 1.6 1.8 0.2 -1.3 1.3 0.3 1.8 -1.6 -0.9 -1.6 0.9 0.3 -1.8 -1.3 -1.3 1.8 -0.2 Z" fill={NP.gold} stroke="none" /><path d="M9 14.5 L8 21 L12 18.5 L16 21 L15 14.5" /></React.Fragment>,
    card: <React.Fragment><rect x="3" y="6" width="18" height="12" rx="2" /><path d="M3 10 H21" /><path d="M7 14.5 H11" /></React.Fragment>,
    house: <React.Fragment><path d="M4 11 L12 4 L20 11" /><path d="M6 10 V20 H18 V10" /><path d="M10.5 20 V14.5 H13.5 V20" /></React.Fragment>
  };
  return <svg {...common}>{paths[icon]}</svg>;
}

function CredentialStrip() {
  const w = useW();
  const mobile = w < 640;
  const items = [
  ["shield", "Licensed", "ROC #366340"],
  ["seal", "5-Year", "Workmanship warranty"],
  ["card", "Financing", "Flexible monthly plans"],
  ["house", "Custom-Built", "Engineered for your home"]];

  return (
    <div style={{ background: NP.panel, borderTop: `1px solid ${NP.lineL}`, borderBottom: `1px solid ${NP.lineL}` }}>
      <div style={{ maxWidth: 1240, margin: "0 auto", display: "grid", gridTemplateColumns: mobile ? "repeat(2,1fr)" : "repeat(4,1fr)" }}>
        {items.map(([ic, a, b], i) => {
          const leftBorder = mobile ? (i % 2 !== 0 ? `1px solid ${NP.lineL}` : "none") : (i ? `1px solid ${NP.lineL}` : "none");
          const topBorder = mobile && i >= 2 ? `1px solid ${NP.lineL}` : "none";
          return (
            <div key={i} style={{ padding: mobile ? "22px 18px" : "34px 40px", borderLeft: leftBorder, borderTop: topBorder, display: "flex", alignItems: "flex-start", gap: 14 }}>
              <div style={{ flex: "0 0 auto", paddingTop: 2 }}><CredItem icon={ic} /></div>
              <div>
                <div style={{ fontFamily: FONT.disp, fontWeight: 700, fontSize: mobile ? 22 : 30, color: NP.gold, lineHeight: 1, letterSpacing: "-0.01em", whiteSpace: "nowrap" }}>{a}</div>
                <div style={{ fontFamily: FONT.body, fontSize: mobile ? 12.5 : 14, color: NP.textL2, marginTop: 7, fontWeight: 500 }}>{b}</div>
              </div>
            </div>
          );
        })}
      </div>
    </div>);

}

function Craft() {
  const w = useW();
  const mobile = w < 768;
  const points = [
  ["Built to your home", "Designed around your roofline, your sun, and your style — never pulled off a shelf."],
  ["Honest pricing", "Premium, custom results without the premium-brand markup. We quote straight."],
  ["Finished to the detail", "Clean lines, tight joinery, color-matched fasteners — we sweat the edges most installers skip."]];

  return (
    <Section id="about" padY={0} style={{ padding: 0 }}>
      <div style={{ display: "grid", gridTemplateColumns: mobile ? "1fr" : "1fr 1fr", minHeight: mobile ? "auto" : 640 }}>
        <div style={{ position: "relative", minHeight: mobile ? 260 : 560 }}>
          <NPImg src="assets/img/craft-pergola.png" label="detail — beam joinery & color-matched finish" dark style={{ backgroundPosition: "center top" }} />
        </div>
        <div style={{ background: NP.panel, padding: mobile ? "52px 20px" : "104px 84px", display: "flex", flexDirection: "column", justifyContent: "center" }}>
          <Reveal>
            <Kicker>Why NorthPoint</Kicker>
            <h2 style={{ fontFamily: FONT.disp, fontWeight: 700, fontSize: 46, lineHeight: 1.04, textTransform: "uppercase",
              letterSpacing: "-0.01em", color: NP.textL, margin: "22px 0 22px" }}>
              Custom is the only<br />way we build.
            </h2>
            <p style={{ fontFamily: FONT.body, fontSize: 17, lineHeight: 1.7, color: NP.textL2, maxWidth: 480 }}>Every NorthPoint structure is engineered for your space and finished like our name's on it — because it is.

            </p>
          </Reveal>
          <div style={{ marginTop: 36 }}>
            {points.map(([t, d], i) =>
            <Reveal key={i} delay={i * 90}>
                <div style={{ display: "flex", gap: 22, padding: "22px 0", borderTop: `1px solid ${NP.lineL}` }}>
                  <span style={{ fontFamily: FONT.disp, fontWeight: 700, fontSize: 16, color: NP.gold, paddingTop: 3, minWidth: 28 }}>0{i + 1}</span>
                  <div>
                    <div style={{ fontFamily: FONT.body, fontSize: 18, fontWeight: 700, color: NP.textL }}>{t}</div>
                    <div style={{ fontFamily: FONT.body, fontSize: 15, lineHeight: 1.6, color: NP.textL2, marginTop: 6 }}>{d}</div>
                  </div>
                </div>
              </Reveal>
            )}
          </div>
        </div>
      </div>
    </Section>);

}

Object.assign(window, { Hero, CredentialStrip, Craft, HERO_VARIANTS });