// ===== src/logo.jsx =====
const PrimeLogo = ({ size = 28, accent = "var(--accent)", ink = "var(--ink)", showWordmark = true, wordmarkSize }) => {
  const s = size;
  const ws = wordmarkSize || Math.round(size * 0.78);
  return (
    <div style={{ display: "inline-flex", alignItems: "center", gap: size * 0.36 }}>
      <svg width={s} height={s} viewBox="0 0 32 32" fill="none" aria-label="Prime Solar">
        {/* core */}
        <circle cx="16" cy="16" r="5.5" fill={accent} />
        {/* 8 rays as short capsule strokes */}
        {Array.from({ length: 8 }).map((_, i) => {
          const angle = i * 45 * (Math.PI / 180);
          const x1 = 16 + Math.cos(angle) * 9;
          const y1 = 16 + Math.sin(angle) * 9;
          const x2 = 16 + Math.cos(angle) * 13.5;
          const y2 = 16 + Math.sin(angle) * 13.5;
          return (
            <line key={i} x1={x1} y1={y1} x2={x2} y2={y2}
              stroke={accent} strokeWidth="2.25" strokeLinecap="round" />
          );
        })}
      </svg>
      {showWordmark &&
        <span style={{
          fontFamily: "var(--serif)",
          fontSize: ws,
          fontWeight: 600,
          color: ink,
          letterSpacing: "-0.025em",
          lineHeight: 1,
          paddingTop: 0
        }}>
          Prime Solar
        </span>
      }
    </div>
  );
};

window.PrimeLogo = PrimeLogo;


// ===== src/nav.jsx =====
const Nav = () => {
  const [scrolled, setScrolled] = React.useState(false);
  React.useEffect(() => {
    const onScroll = () => setScrolled(window.scrollY > 24);
    window.addEventListener("scroll", onScroll, { passive: true });
    return () => window.removeEventListener("scroll", onScroll);
  }, []);

  const links = [
    { label: "How it works", href: "#why" },
    { label: "Reviews", href: "#reviews" },
    { label: "Contact", href: "#contact" }
  ];

  return (
    <header style={{
      position: "sticky", top: 0, zIndex: 50,
      backdropFilter: scrolled ? "blur(14px) saturate(1.1)" : "none",
      WebkitBackdropFilter: scrolled ? "blur(14px) saturate(1.1)" : "none",
      background: scrolled ? "rgba(253, 251, 246, 0.82)" : "transparent",
      borderBottom: scrolled ? "1px solid var(--rule)" : "1px solid transparent",
      transition: "background 200ms ease, border-color 200ms ease"
    }}>
      <div className="nav-inner-wrap" style={{
        maxWidth: 1280, margin: "0 auto",
        padding: "18px 40px",
        display: "flex", alignItems: "center", justifyContent: "space-between"
      }}>
        <a href="#top" aria-label="Prime Solar home">
          <PrimeLogo size={26} />
        </a>
        <nav className="nav-links" style={{ display: "flex", gap: 36 }}>
          {links.map((l) =>
            <a key={l.href} href={l.href} style={{
              fontSize: 14, color: "var(--ink-2)",
              fontWeight: 500, letterSpacing: "-0.005em",
              whiteSpace: "nowrap",
              transition: "color 150ms"
            }}
            onMouseEnter={(e) => e.currentTarget.style.color = "var(--ink)"}
            onMouseLeave={(e) => e.currentTarget.style.color = "var(--ink-2)"}>
              {l.label}
            </a>
          )}
        </nav>
        <a href="#contact" style={{
          fontSize: 14, fontWeight: 500,
          padding: "10px 18px",
          background: "var(--ink)", color: "var(--paper)",
          borderRadius: 999,
          transition: "transform 150ms, background 150ms"
        }}
        onMouseEnter={(e) => { e.currentTarget.style.background = "var(--accent)"; }}
        onMouseLeave={(e) => { e.currentTarget.style.background = "var(--ink)"; }}>
          Get a quote →
        </a>
      </div>
    </header>
  );
};

window.Nav = Nav;


// ===== src/hero.jsx =====
const HERO_VARIANTS = {
  pays: { a: "Solar that pays for itself,", b: "and then some." },
  simple: { a: "Solar, made", b: "refreshingly simple." },
  straight: { a: "Straightforward solar", b: "for Northeast homes." }
};

const Hero = () => {
  const [, force] = React.useReducer((x) => x + 1, 0);
  React.useEffect(() => {
    const handler = () => force();
    window.addEventListener("tweaks-changed", handler);
    return () => window.removeEventListener("tweaks-changed", handler);
  }, []);
  const variantKey = window.__heroVariant || "pays";
  const variant = HERO_VARIANTS[variantKey] || HERO_VARIANTS.pays;

  return (
    <section id="top" style={{
      position: "relative",
      padding: "32px 40px 80px",
      maxWidth: 1280, margin: "0 auto"
    }}>
      {/* sun glow backdrop */}
      <div aria-hidden style={{
        position: "absolute", top: -60, right: -120, width: 600, height: 600,
        background: "radial-gradient(circle, rgba(232, 161, 58, 0.16) 0%, rgba(232, 161, 58, 0) 60%)",
        pointerEvents: "none", zIndex: -1
      }} />

      {/* Unified hero: headline overlays image, copy in sidebar */}
      <div className="hero-grid" style={{
        display: "grid",
        gridTemplateColumns: "minmax(0, 1.75fr) minmax(0, 1fr)",
        gap: 40,
        alignItems: "stretch",
        paddingTop: 24
      }}>
        {/* Image + overlaid headline */}
        <div style={{
          position: "relative",
          borderRadius: 24,
          overflow: "hidden",
          aspectRatio: "4 / 3",
          boxShadow: "0 40px 100px -50px rgba(26, 22, 20, 0.45), 0 2px 0 rgba(255,255,255,0.4) inset"
        }}>
          <img src="assets/hero-home.webp" alt="Colonial home in the Northeast with rooftop solar panels"
            style={{
              width: "100%", height: "100%",
              objectFit: "cover", objectPosition: "center 55%",
              display: "block"
            }} />
          {/* warm wash for legibility at bottom where headline sits */}
          <div aria-hidden style={{
            position: "absolute", inset: 0,
            background: "linear-gradient(180deg, rgba(26, 22, 20, 0) 35%, rgba(26, 22, 20, 0.15) 65%, rgba(26, 22, 20, 0.75) 100%)",
            pointerEvents: "none"
          }} />
          {/* subtle warm accent tint at top */}
          <div aria-hidden style={{
            position: "absolute", inset: 0,
            background: "linear-gradient(180deg, rgba(232, 161, 58, 0.08) 0%, rgba(232, 161, 58, 0) 25%)",
            pointerEvents: "none"
          }} />
          {/* overlaid headline */}
          <div style={{
            position: "absolute", left: 40, right: 40, bottom: 36
          }}>
            <h1 style={{
              fontFamily: "var(--serif)",
              fontWeight: 500,
              fontSize: "clamp(44px, 5.2vw, 76px)",
              lineHeight: 1.02,
              letterSpacing: "-0.035em",
              color: "var(--paper)",
              textWrap: "balance",
              textShadow: "0 2px 24px rgba(0,0,0,0.25)"
            }}>
              {variant.a} <span style={{ color: "#F4C07A", fontStyle: "italic", fontWeight: 500 }}>{variant.b}</span>
            </h1>
          </div>
        </div>

        {/* Side column: copy + CTA */}
        <aside className="hero-aside" style={{
          display: "flex", flexDirection: "column",
          justifyContent: "space-between",
          paddingTop: 8, paddingBottom: 4,
          minHeight: 320
        }}>
          <div>
            <div style={{
              fontFamily: "var(--mono)", fontSize: 11,
              color: "var(--accent)", letterSpacing: "0.12em",
              textTransform: "uppercase", marginBottom: 20
            }}>— Residential solar, Northeast US</div>
            <p style={{
              fontSize: 17, lineHeight: 1.5,
              color: "var(--ink-2)",
              textWrap: "pretty"
            }}>
              Prime Solar designs, installs, and services rooftop systems
              for homeowners across Maryland and Virginia.
            </p>
            <p style={{
              marginTop: 16,
              fontSize: 17, lineHeight: 1.5,
              color: "var(--ink-2)",
              textWrap: "pretty"
            }}>
              Straightforward pricing, federal-backed savings, and a 25-year
              performance guarantee — no gimmicks.
            </p>
          </div>

          <div style={{ marginTop: 32, display: "flex", gap: 10, flexWrap: "wrap" }}>
            <a href="#contact" style={{
              padding: "14px 22px", borderRadius: 999,
              background: "var(--ink)", color: "var(--paper)",
              fontSize: 14, fontWeight: 500,
              transition: "background 150ms",
              display: "inline-flex", alignItems: "center", gap: 8
            }}
            onMouseEnter={(e) => e.currentTarget.style.background = "var(--accent)"}
            onMouseLeave={(e) => e.currentTarget.style.background = "var(--ink)"}>
              Request my quote →
            </a>
            <a href="#why" style={{
              padding: "14px 22px", borderRadius: 999,
              border: "1px solid var(--rule)",
              color: "var(--ink)",
              fontSize: 14, fontWeight: 500,
              transition: "border-color 150ms, color 150ms"
            }}
            onMouseEnter={(e) => { e.currentTarget.style.borderColor = "var(--ink)"; }}
            onMouseLeave={(e) => { e.currentTarget.style.borderColor = "var(--rule)"; }}>
              How it works
            </a>
          </div>
        </aside>
      </div>

      {/* Trust bar below */}
      <div className="trust-bar" style={{
        marginTop: 48,
        paddingTop: 32,
        borderTop: "1px solid var(--rule)",
        display: "flex", gap: 48, flexWrap: "wrap",
        fontSize: 12, color: "var(--ink-3)",
        fontFamily: "var(--mono)",
        letterSpacing: "0.08em",
        textTransform: "uppercase",
        justifyContent: "space-between"
      }}>
        <div>No upfront cost options</div>
        <div>25-year performance warranty</div>
        <div>LOCALLY OWNED AND OPERATED</div>
      </div>
    </section>
  );
};

window.Hero = Hero;


// ===== src/why.jsx =====
const PILLARS = [
  {
    k: "01",
    title: "Engineer-led design, every roof",
    blurb: "Every system is designed by a certified engineer for your exact roof pitch, orientation, and shading — not a sales template.",
    detail: "We use drone scans and irradiance modeling to predict year-one production within ±3%. Get the full design before any work is completed."
  },
  {
    k: "02",
    title: "Straight pricing, in writing",
    blurb: "One fixed quote. One line item. No teaser rates, no mystery fees, no pressure to close in 24 hours.",
    detail: "Your proposal shows total system cost, federal tax credit (up to 30%), state incentives you qualify for, and net monthly cost compared to your current utility bill. Apples to apples."
  },
  {
    k: "03",
    title: "25-year performance guarantee",
    blurb: "Panels, inverter, and production — all covered for 25 years. If your system underproduces, we write you a check.",
    detail: "Get the best warranties on the highest quality equipment. If real-world production falls below our modeled estimate in any year, we reimburse the shortfall at your utility's rate."
  },
  {
    k: "04",
    title: "Local crews in every state",
    blurb: "Crews that live in the area, understand local codes, and make sure your system is installed the right way the first time.",
    detail: "Permitting, installation, interconnection, and warranty service all run through the same team. Get updates quickly on the status of your project at any time."
  }
];

const Pillar = ({ p, open, onToggle }) => {
  return (
    <div style={{
      borderTop: "1px solid var(--rule)",
      padding: "32px 0",
      cursor: "pointer",
      transition: "background 200ms"
    }}
    onClick={onToggle}>
      <div className="pillar-row" style={{ display: "grid", gridTemplateColumns: "80px 1fr 40px", gap: 32, alignItems: "start" }}>
        <div style={{
          fontFamily: "var(--mono)",
          fontSize: 12, color: "var(--ink-3)",
          letterSpacing: "0.08em",
          paddingTop: 10
        }}>{p.k}</div>
        <div>
          <h3 style={{
            fontFamily: "var(--serif)",
            fontWeight: 500,
            fontSize: 32,
            lineHeight: 1.1,
            letterSpacing: "-0.025em",
            color: "var(--ink)",
            textWrap: "balance"
          }}>{p.title}</h3>
          <p style={{
            marginTop: 14,
            fontSize: 17, lineHeight: 1.55,
            color: "var(--ink-2)", maxWidth: 720,
            textWrap: "pretty"
          }}>{p.blurb}</p>
          <div style={{
            display: "grid",
            gridTemplateRows: open ? "1fr" : "0fr",
            transition: "grid-template-rows 300ms ease, margin 300ms ease, opacity 300ms ease",
            opacity: open ? 1 : 0,
            marginTop: open ? 18 : 0
          }}>
            <div style={{ overflow: "hidden" }}>
              <div style={{
                paddingLeft: 18,
                borderLeft: "2px solid var(--accent)",
                fontSize: 15, lineHeight: 1.6,
                color: "var(--ink-2)",
                maxWidth: 680,
                textWrap: "pretty"
              }}>
                {p.detail}
              </div>
            </div>
          </div>
        </div>
        <div style={{
          width: 36, height: 36,
          border: "1px solid var(--rule)",
          borderRadius: "50%",
          display: "flex", alignItems: "center", justifyContent: "center",
          transform: open ? "rotate(45deg)" : "none",
          transition: "transform 250ms ease, background 200ms",
          background: open ? "var(--accent)" : "transparent",
          color: open ? "var(--paper)" : "var(--ink-2)"
        }}>
          <svg width="14" height="14" viewBox="0 0 14 14" fill="none" stroke="currentColor" strokeWidth="1.5">
            <path d="M7 1v12M1 7h12" />
          </svg>
        </div>
      </div>
    </div>
  );
};

const Why = () => {
  const [openIdx, setOpenIdx] = React.useState(0);
  return (
    <section id="why" style={{
      padding: "120px 40px",
      maxWidth: 1280, margin: "0 auto"
    }}>
      <div className="why-header" style={{
        display: "grid", gridTemplateColumns: "minmax(0, 1fr) minmax(0, 2fr)",
        gap: 80, marginBottom: 40
      }}>
        <div>
          <div style={{
            fontFamily: "var(--mono)", fontSize: 12,
            color: "var(--accent)", letterSpacing: "0.1em",
            textTransform: "uppercase", marginBottom: 20
          }}>— Why Prime Solar</div>
          <h2 className="section-h2" style={{
            fontFamily: "var(--serif)", fontWeight: 500,
            fontSize: 52, lineHeight: 1, letterSpacing: "-0.035em",
            color: "var(--ink)",
            textWrap: "balance"
          }}>
            Four commitments that separate us from the rest of the industry.
          </h2>
        </div>
      </div>

      <div style={{ borderBottom: "1px solid var(--rule)" }}>
        {PILLARS.map((p, i) =>
          <Pillar
            key={p.k}
            p={p}
            open={openIdx === i}
            onToggle={() => setOpenIdx(openIdx === i ? -1 : i)}
          />
        )}
      </div>
    </section>
  );
};

window.Why = Why;



// ===== src/testimonials.jsx =====
const REVIEWS = [
  {
    quote: "Six quotes in, Prime provided the simplest quote, with the lowest pressure to sign. They gave me a simple, clear payment I could easily compare with my utility bill.",
    name: "Dana R.",
    meta: "Silver Spring, MD · 9.2 kW install",
    tag: "Installed Mar 2024"
  },
  {
    quote: "I'd been burned by a leased system at my last house. The Prime team walked me through ownership vs. PPA math on a single page. No pressure. We own our system outright and the break-even is year seven.",
    name: "Marcus & Jen L.",
    meta: "Richmond, VA · 11.6 kW install",
    tag: "Installed Aug 2023"
  },
  {
    quote: "They flagged that half my roof was too shaded to pay off, and proposed a smaller system than anyone else. Honest math. That's why they got the job.",
    name: "Tom H.",
    meta: "Charlottesville, VA · 6.4 kW install",
    tag: "Installed Jun 2024"
  }
];

const Testimonials = () => {
  const [idx, setIdx] = React.useState(0);
  const count = REVIEWS.length;

  const go = (d) => setIdx((prev) => (prev + d + count) % count);

  React.useEffect(() => {
    const t = setInterval(() => setIdx((i) => (i + 1) % count), 9000);
    return () => clearInterval(t);
  }, [count]);

  const r = REVIEWS[idx];

  return (
    <section id="reviews" style={{
      padding: "140px 40px",
      maxWidth: 1280, margin: "0 auto"
    }}>
      <div className="reviews-grid" style={{
        display: "grid",
        gridTemplateColumns: "minmax(0, 1fr) minmax(0, 1.8fr)",
        gap: 80, alignItems: "start"
      }}>
        <div className="reviews-left" style={{ position: "sticky", top: 120 }}>
          <div style={{
            fontFamily: "var(--mono)", fontSize: 12,
            color: "var(--accent)", letterSpacing: "0.1em",
            textTransform: "uppercase", marginBottom: 20
          }}>— Homeowner reviews</div>
          <h2 className="section-h2" style={{
            fontFamily: "var(--serif)", fontWeight: 500,
            fontSize: 52, lineHeight: 1, letterSpacing: "-0.035em",
            color: "var(--ink)",
            textWrap: "balance"
          }}>
            The best sales pitch is a
            <span style={{ color: "var(--accent)", fontStyle: "italic", fontWeight: 500 }}> working system.</span>
          </h2>
          <div style={{
            marginTop: 40,
            display: "flex", alignItems: "center", gap: 16
          }}>
            <button onClick={() => go(-1)} aria-label="Previous review"
              style={{
                width: 44, height: 44, borderRadius: "50%",
                border: "1px solid var(--rule)",
                display: "flex", alignItems: "center", justifyContent: "center",
                color: "var(--ink)",
                transition: "background 150ms, color 150ms"
              }}
              onMouseEnter={(e) => { e.currentTarget.style.background = "var(--ink)"; e.currentTarget.style.color = "var(--paper)"; }}
              onMouseLeave={(e) => { e.currentTarget.style.background = "transparent"; e.currentTarget.style.color = "var(--ink)"; }}>
              <svg width="16" height="16" viewBox="0 0 16 16" fill="none" stroke="currentColor" strokeWidth="1.5"><path d="M10 3L5 8l5 5" /></svg>
            </button>
            <button onClick={() => go(1)} aria-label="Next review"
              style={{
                width: 44, height: 44, borderRadius: "50%",
                border: "1px solid var(--rule)",
                display: "flex", alignItems: "center", justifyContent: "center",
                color: "var(--ink)",
                transition: "background 150ms, color 150ms"
              }}
              onMouseEnter={(e) => { e.currentTarget.style.background = "var(--ink)"; e.currentTarget.style.color = "var(--paper)"; }}
              onMouseLeave={(e) => { e.currentTarget.style.background = "transparent"; e.currentTarget.style.color = "var(--ink)"; }}>
              <svg width="16" height="16" viewBox="0 0 16 16" fill="none" stroke="currentColor" strokeWidth="1.5"><path d="M6 3l5 5-5 5" /></svg>
            </button>
            <div style={{
              fontFamily: "var(--mono)", fontSize: 12,
              color: "var(--ink-3)", letterSpacing: "0.05em",
              marginLeft: 8
            }}>
              {String(idx + 1).padStart(2, "0")} / {String(count).padStart(2, "0")}
            </div>
          </div>
        </div>

        <div>
          <div key={idx} style={{
            animation: "fadeUp 420ms cubic-bezier(.2,.7,.2,1) both"
          }}>
            {/* 5 stars */}
            <div style={{ display: "flex", gap: 4, marginBottom: 28 }}>
              {Array.from({ length: 5 }).map((_, i) =>
                <svg key={i} width="18" height="18" viewBox="0 0 20 20" fill="var(--accent)">
                  <path d="M10 1.5l2.6 5.3 5.9.9-4.3 4.1 1 5.8L10 14.9 4.8 17.6l1-5.8L1.5 7.7l5.9-.9z" />
                </svg>
              )}
            </div>
            <blockquote className="review-quote" style={{
              fontFamily: "var(--serif)",
              fontSize: 34, lineHeight: 1.2, fontWeight: 500,
              letterSpacing: "-0.025em",
              color: "var(--ink)",
              textWrap: "pretty"
            }}>
              "{r.quote}"
            </blockquote>
            <div style={{
              marginTop: 40,
              display: "flex", alignItems: "center", gap: 20,
              paddingTop: 24,
              borderTop: "1px solid var(--rule)"
            }}>
              <div style={{
                width: 56, height: 56, borderRadius: "50%",
                background: "linear-gradient(135deg, var(--accent-soft), var(--accent))",
                display: "flex", alignItems: "center", justifyContent: "center",
                color: "var(--paper)", fontWeight: 600, fontSize: 18,
                fontFamily: "var(--serif)"
              }}>
                {r.name.split(" ").map((s) => s[0]).slice(0, 2).join("")}
              </div>
              <div style={{ flex: 1 }}>
                <div style={{ fontWeight: 600, fontSize: 15, color: "var(--ink)" }}>{r.name}</div>
                <div style={{ fontSize: 13, color: "var(--ink-3)", marginTop: 2 }}>{r.meta}</div>
              </div>
              <div style={{
                fontFamily: "var(--mono)", fontSize: 11,
                color: "var(--ink-3)", letterSpacing: "0.05em",
                textTransform: "uppercase",
                padding: "6px 12px",
                border: "1px solid var(--rule)",
                borderRadius: 999
              }}>
                {r.tag}
              </div>
            </div>
          </div>

          {/* progress dots */}
          <div style={{ display: "flex", gap: 6, marginTop: 40 }}>
            {REVIEWS.map((_, i) =>
              <button key={i} onClick={() => setIdx(i)} aria-label={`Review ${i + 1}`}
                style={{
                  height: 3, flex: 1, maxWidth: 80,
                  background: i === idx ? "var(--accent)" : "var(--rule)",
                  transition: "background 300ms",
                  border: "none", padding: 0
                }} />
            )}
          </div>
        </div>
      </div>
      <style>{`
        @keyframes fadeUp {
          from { opacity: 0; transform: translateY(12px); }
          to { opacity: 1; transform: translateY(0); }
        }
      `}</style>
    </section>
  );
};

window.Testimonials = Testimonials;


// ===== src/footer.jsx =====
const Footer = () => {
  const [email, setEmail] = React.useState("");
  const [sent, setSent] = React.useState(false);

  const linkGroups = [
    {
      title: "Company",
      links: [
        { label: "About", href: "about.html" },
        { label: "Contact", href: "contact.html" }
      ]
    }
  ];

  return (
    <>
      {/* Final CTA band */}
      <section id="contact" style={{
        padding: "40px 40px 0",
        maxWidth: 1280, margin: "0 auto"
      }}>
        <div className="cta-inner" style={{
          background: "linear-gradient(135deg, #FBEED7 0%, #F6DDB8 60%, #E8B094 100%)",
          borderRadius: 24,
          padding: "80px 64px",
          display: "grid",
          gridTemplateColumns: "minmax(0, 1.3fr) minmax(0, 1fr)",
          gap: 48,
          alignItems: "center",
          position: "relative",
          overflow: "hidden"
        }}>
          {/* faint sun */}
          <div aria-hidden style={{
            position: "absolute", top: -120, right: -120,
            width: 420, height: 420, borderRadius: "50%",
            background: "radial-gradient(circle, rgba(246, 192, 78, 0.9) 0%, rgba(246, 192, 78, 0) 65%)"
          }} />
          <div style={{ position: "relative" }}>
            <h2 className="cta-h2" style={{
              fontFamily: "var(--serif)", fontWeight: 500,
              fontSize: 56, lineHeight: 1, letterSpacing: "-0.035em",
              color: "var(--ink)", textWrap: "balance"
            }}>
              See your roof's numbers in about <span style={{ fontStyle: "italic", fontWeight: 500 }}>ten minutes.</span>
            </h2>
            <p style={{
              marginTop: 20, fontSize: 17, lineHeight: 1.55,
              color: "var(--ink-2)", maxWidth: 480, textWrap: "pretty"
            }}>
              Send us your address and last month's utility bill. We'll come back with a
              production model, a fixed quote, and a break-even year — no sales call required.
            </p>
          </div>
          <div style={{ position: "relative" }}>
            <form onSubmit={(e) => { e.preventDefault(); setSent(true); }}
              style={{
                background: "var(--paper)",
                borderRadius: 16,
                padding: 24,
                boxShadow: "0 30px 80px -40px rgba(120, 60, 20, 0.4)"
              }}>
              <label style={{ fontSize: 13, color: "var(--ink-3)", fontWeight: 500, display: "block", marginBottom: 8 }}>
                Your email
              </label>
              <input
                type="email"
                required
                placeholder="you@example.com"
                value={email}
                onChange={(e) => setEmail(e.target.value)}
                disabled={sent}
                style={{
                  width: "100%", padding: "14px 16px",
                  border: "1px solid var(--rule)",
                  borderRadius: 10, fontSize: 15,
                  fontFamily: "inherit",
                  color: "var(--ink)",
                  background: sent ? "var(--paper-2)" : "var(--paper)",
                  outline: "none",
                  transition: "border-color 150ms"
                }}
                onFocus={(e) => e.target.style.borderColor = "var(--accent)"}
                onBlur={(e) => e.target.style.borderColor = "var(--rule)"} />
              <button type="submit" disabled={sent}
                style={{
                  marginTop: 12, width: "100%",
                  padding: "14px 20px",
                  background: sent ? "#2E4A31" : "var(--ink)",
                  color: "var(--paper)",
                  borderRadius: 10,
                  fontSize: 15, fontWeight: 500,
                  transition: "background 200ms"
                }}
                onMouseEnter={(e) => { if (!sent) e.currentTarget.style.background = "var(--accent)"; }}
                onMouseLeave={(e) => { if (!sent) e.currentTarget.style.background = "var(--ink)"; }}>
                {sent ? "✓ We'll be in touch within one business day" : "Request my quote →"}
              </button>
              <p style={{ fontSize: 12, color: "var(--ink-3)", marginTop: 12, textAlign: "center" }}>
                No sales calls. No spam. Unsubscribe anytime.
              </p>
            </form>
          </div>
        </div>
      </section>

      <footer style={{
        padding: "100px 40px 40px",
        maxWidth: 1280, margin: "0 auto"
      }}>
        <div className="footer-cols" style={{
          display: "grid",
          gridTemplateColumns: "1.6fr repeat(3, 1fr)",
          gap: 48,
          paddingBottom: 64,
          borderBottom: "1px solid var(--rule)"
        }}>
          <div>
            <PrimeLogo size={32} />
            <p style={{
              marginTop: 24, fontSize: 14, lineHeight: 1.6,
              color: "var(--ink-2)", maxWidth: 320, textWrap: "pretty"
            }}>
              Prime Solar designs and installs rooftop solar systems throughout Virginia and Maryland.
            </p>
          </div>
          {linkGroups.map((g) =>
            <div key={g.title}>
              <div style={{
                fontFamily: "var(--mono)", fontSize: 11,
                color: "var(--ink-3)", letterSpacing: "0.1em",
                textTransform: "uppercase", marginBottom: 20
              }}>{g.title}</div>
              <ul style={{ listStyle: "none", display: "grid", gap: 12 }}>
                {g.links.map((l) =>
                  <li key={l.label}>
                    <a href={l.href} style={{
                      fontSize: 14, color: "var(--ink-2)",
                      transition: "color 150ms"
                    }}
                    onMouseEnter={(e) => e.currentTarget.style.color = "var(--accent)"}
                    onMouseLeave={(e) => e.currentTarget.style.color = "var(--ink-2)"}>
                      {l.label}
                    </a>
                  </li>
                )}
              </ul>
            </div>
          )}
        </div>
        <div style={{
          paddingTop: 32,
          display: "flex", justifyContent: "space-between",
          flexWrap: "wrap", gap: 16,
          fontSize: 12, color: "var(--ink-3)",
          fontFamily: "var(--mono)",
          letterSpacing: "0.03em"
        }}>
          <div>© 2026 Prime Solar, Inc.</div>
        </div>
      </footer>
    </>
  );
};

window.Footer = Footer;


// ===== src/tweaks.jsx =====
const TWEAK_DEFAULTS = {
  "accent": "clay",
  "heroVariant": "pays",
  "heading_font": "instrument"
};

const ACCENTS = {
  clay: { accent: "#C8502B", soft: "#E8B094", label: "Clay (default)" },
  amber: { accent: "#D97706", soft: "#F3C98B", label: "Amber" },
  ember: { accent: "#A94826", soft: "#D9A285", label: "Ember (deep)" },
  honey: { accent: "#B87333", soft: "#E3B98A", label: "Honey" },
  forest: { accent: "#3A6B46", soft: "#A8C9B0", label: "Forest (cool)" }
};

const FONTS = {
  instrument: { label: "Instrument Sans", value: "\"Instrument Sans\", sans-serif" },
  bricolage: { label: "Bricolage Grotesque", value: "\"Bricolage Grotesque\", sans-serif" },
  familjen: { label: "Familjen Grotesk", value: "\"Familjen Grotesk\", sans-serif" },
  intertight: { label: "Inter Tight", value: "\"Inter Tight\", sans-serif" }
};

const applyTweaks = (vals) => {
  const accent = ACCENTS[vals.accent] || ACCENTS.clay;
  document.documentElement.style.setProperty("--accent", accent.accent);
  document.documentElement.style.setProperty("--accent-soft", accent.soft);
  const font = FONTS[vals.heading_font] || FONTS.instrument;
  document.documentElement.style.setProperty("--serif", font.value);
  window.__heroVariant = vals.heroVariant;
  window.dispatchEvent(new Event("tweaks-changed"));
};

const Tweaks = () => {
  const [vals, setVals] = React.useState(TWEAK_DEFAULTS);
  const [open, setOpen] = React.useState(true);
  const [active, setActive] = React.useState(false);

  React.useEffect(() => {
    if (document.getElementById("tweak-fonts")) return;
    const l = document.createElement("link");
    l.id = "tweak-fonts";
    l.rel = "stylesheet";
    l.href = "https://fonts.googleapis.com/css2?family=Bricolage+Grotesque:opsz,wght@12..96,400;12..96,500;12..96,600&family=Familjen+Grotesk:wght@400;500;600&display=swap";
    document.head.appendChild(l);
  }, []);

  React.useEffect(() => {
    applyTweaks(vals);
  }, [vals]);

  React.useEffect(() => {
    const onMsg = (e) => {
      if (e.data?.type === "__activate_edit_mode") setActive(true);
      if (e.data?.type === "__deactivate_edit_mode") setActive(false);
    };
    window.addEventListener("message", onMsg);
    window.parent.postMessage({ type: "__edit_mode_available" }, "*");
    return () => window.removeEventListener("message", onMsg);
  }, []);

  const update = (key, value) => {
    const next = { ...vals, [key]: value };
    setVals(next);
    window.parent.postMessage({ type: "__edit_mode_set_keys", edits: { [key]: value } }, "*");
  };

  if (!active) return null;

  return (
    <div style={{
      position: "fixed", bottom: 20, right: 20, zIndex: 1000,
      background: "var(--paper)",
      border: "1px solid var(--rule)",
      borderRadius: 14,
      boxShadow: "0 20px 60px -20px rgba(0,0,0,0.25)",
      width: open ? 280 : "auto",
      fontFamily: "var(--sans)"
    }}>
      <button onClick={() => setOpen(!open)} style={{
        width: "100%",
        padding: "12px 16px",
        display: "flex", alignItems: "center", justifyContent: "space-between",
        borderBottom: open ? "1px solid var(--rule)" : "none",
        fontSize: 13, fontWeight: 600, color: "var(--ink)"
      }}>
        <span style={{ display: "flex", alignItems: "center", gap: 8 }}>
          <span style={{ width: 8, height: 8, borderRadius: "50%", background: "var(--accent)" }} />
          Tweaks
        </span>
        <span style={{ fontSize: 11, color: "var(--ink-3)" }}>{open ? "−" : "+"}</span>
      </button>
      {open &&
        <div style={{ padding: 16, display: "grid", gap: 18 }}>
          {/* Accent */}
          <div>
            <div style={{ fontSize: 11, color: "var(--ink-3)", fontFamily: "var(--mono)", textTransform: "uppercase", letterSpacing: "0.1em", marginBottom: 8 }}>Accent color</div>
            <div style={{ display: "grid", gridTemplateColumns: "repeat(5, 1fr)", gap: 8 }}>
              {Object.entries(ACCENTS).map(([k, a]) =>
                <button key={k} onClick={() => update("accent", k)}
                  title={a.label}
                  style={{
                    aspectRatio: "1",
                    borderRadius: 8,
                    background: a.accent,
                    border: vals.accent === k ? "2px solid var(--ink)" : "2px solid transparent",
                    outline: vals.accent === k ? "2px solid var(--paper)" : "none",
                    outlineOffset: -4,
                    cursor: "pointer"
                  }} />
              )}
            </div>
          </div>

          {/* Hero headline */}
          <div>
            <div style={{ fontSize: 11, color: "var(--ink-3)", fontFamily: "var(--mono)", textTransform: "uppercase", letterSpacing: "0.1em", marginBottom: 8 }}>Hero headline</div>
            <div style={{ display: "grid", gap: 6 }}>
              {Object.entries(HERO_VARIANTS).map(([k, h]) =>
                <button key={k} onClick={() => update("heroVariant", k)}
                  style={{
                    textAlign: "left",
                    padding: "10px 12px",
                    border: vals.heroVariant === k ? "1px solid var(--accent)" : "1px solid var(--rule)",
                    borderRadius: 8,
                    fontSize: 12, color: "var(--ink)",
                    fontFamily: "var(--serif)",
                    background: vals.heroVariant === k ? "rgba(200, 80, 43, 0.05)" : "var(--paper)"
                  }}>
                  {h.a} <em style={{ color: "var(--accent)" }}>{h.b}</em>
                </button>
              )}
            </div>
          </div>

          {/* Heading font */}
          <div>
            <div style={{ fontSize: 11, color: "var(--ink-3)", fontFamily: "var(--mono)", textTransform: "uppercase", letterSpacing: "0.1em", marginBottom: 8 }}>Heading font</div>
            <div style={{ display: "grid", gap: 6 }}>
              {Object.entries(FONTS).map(([k, f]) =>
                <button key={k} onClick={() => update("heading_font", k)}
                  style={{
                    textAlign: "left",
                    padding: "8px 12px",
                    border: vals.heading_font === k ? "1px solid var(--accent)" : "1px solid var(--rule)",
                    borderRadius: 8,
                    fontSize: 15, color: "var(--ink)",
                    fontFamily: f.value,
                    background: vals.heading_font === k ? "rgba(200, 80, 43, 0.05)" : "var(--paper)"
                  }}>
                  {f.label}
                </button>
              )}
            </div>
          </div>
        </div>
      }
    </div>
  );
};

window.Tweaks = Tweaks;
window.HERO_VARIANTS = HERO_VARIANTS;


// ===== src/app.jsx =====
const App = () => {
  return (
    <>
      <Nav />
      <Hero />
      <Why />
      <Testimonials />
      <Footer />
      <Tweaks />
    </>
  );
};

const root = ReactDOM.createRoot(document.getElementById("root"));
root.render(<App />);