// Default tweakable values — host edits this JSON block on disk
const TWEAKS_DEFAULTS = /*EDITMODE-BEGIN*/{
  "blue": "#c9a96e",
  "headline": "Building Your Backyard Into An Outdoor Masterpiece",
  "underlined": "Masterpiece",
  "subhead": "Custom-built decks, patios, pergolas, and outdoor kitchens designed for beauty, durability, and the way you actually live outside.",
  "phone": "954-806-4364",
  "email": "ariel@victoryprodeckbuilders.com",
  "heroBg": "yard"
}/*EDITMODE-END*/;

const HERO_BG_OPTIONS = {
  yard: "linear-gradient(135deg, #2a3340 0%, #1a2028 60%, #0F2030 100%)",
  deck: "linear-gradient(135deg, #4a3a2a 0%, #2a2018 60%, #1a1410 100%)",
  patio: "linear-gradient(135deg, #3a4250 0%, #1f2630 60%, #14181F 100%)",
};

function App() {
  const [t, setTweak] = useTweaks(TWEAKS_DEFAULTS);

  // Inject the tweakable blue into CSS vars
  React.useEffect(() => {
    document.documentElement.style.setProperty("--vp-blue", t.blue);
    // derive a deeper version
    document.documentElement.style.setProperty("--vp-blue-glow", hexToGlow(t.blue));
  }, [t.blue]);

  return (
    <>
      <TopBar phone={t.phone} email={t.email} />
      <Nav phone={t.phone} email={t.email} activePage="home" />
      <Hero
        headline={t.headline}
        underlined={t.underlined}
        subhead={t.subhead}
        heroBg={HERO_BG_OPTIONS[t.heroBg] || HERO_BG_OPTIONS.yard}
      />
      <TrustMarquee />
      <Services />
      <Portfolio />
      <Process />
      <Reviews />
      <ServiceAreas />
      <CTA phone={t.phone} />
      <Footer phone={t.phone} email={t.email} />

      <TweaksPanel title="Tweaks">
        <TweakSection label="Brand">
          <TweakColor
            label="Accent gold"
            value={t.blue}
            onChange={(v) => setTweak("blue", v)}
            options={["#c9a96e", "#b8964f", "#d4b87a", "#a8884f"]}
          />
        </TweakSection>
        <TweakSection label="Hero copy">
          <TweakText label="Headline" value={t.headline} onChange={(v) => setTweak("headline", v)} />
          <TweakText label="Underlined word" value={t.underlined} onChange={(v) => setTweak("underlined", v)} />
          <TweakText label="Subhead" value={t.subhead} onChange={(v) => setTweak("subhead", v)} />
        </TweakSection>
        <TweakSection label="Hero background">
          <TweakRadio
            label="Photo style"
            value={t.heroBg}
            onChange={(v) => setTweak("heroBg", v)}
            options={["yard", "deck", "patio"]}
          />
        </TweakSection>
        <TweakSection label="Contact">
          <TweakText label="Phone" value={t.phone} onChange={(v) => setTweak("phone", v)} />
          <TweakText label="Email" value={t.email} onChange={(v) => setTweak("email", v)} />
        </TweakSection>
      </TweaksPanel>
    </>
  );
}

function hexToGlow(hex) {
  // Convert hex to rgba with 35% alpha
  const h = hex.replace("#", "");
  const r = parseInt(h.substring(0,2), 16);
  const g = parseInt(h.substring(2,4), 16);
  const b = parseInt(h.substring(4,6), 16);
  return `rgba(${r}, ${g}, ${b}, 0.35)`;
}

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