// Opus Branding Co. landing page — main app.
// Composes the header, hero, services, fan studio, process, contact hub,
// footer and Tweaks panel into a single page.

const { useState, useEffect, useMemo } = React;

const TWEAK_DEFAULTS = /*EDITMODE-BEGIN*/{
  "paper":     "#F1EEE4",
  "ink":       "#0A0A0A",
  "showMarquee": true,
  "marqueeSpeed": "normal"
}/*EDITMODE-END*/;

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

  // Sync CSS variables to tweaks.
  useEffect(() => {
    const r = document.documentElement.style;
    r.setProperty("--paper", t.paper);
    r.setProperty("--ink", t.ink);
  }, [t.paper, t.ink]);

  function jump(id) {
    if (id === "top") return window.scrollTo({ top: 0, behavior: "smooth" });
    const el = document.getElementById(id);
    if (el) {
      const y = el.getBoundingClientRect().top + window.scrollY - 8;
      window.scrollTo({ top: y, behavior: "smooth" });
    }
  }

  const marqueeItems = [
    "Branded the Right Way",
    "Built for Artists",
    "Est. in the UK",
    "Cut · Sew · Ship",
    "Fan-Monetization Studio",
    "Booking Spring '26",
  ];

  return (
    <div id="top" data-screen-label="opus-landing" style={{ background: "var(--paper)", color: "var(--ink)", minHeight: "100vh" }}>
      <Header onJump={jump} />
      <Hero />
      {t.showMarquee && <Marquee items={marqueeItems} speed={t.marqueeSpeed} />}
      <CapStrip />
      <ServicesGrid />
      <FanStudio />
      <Process />
      <ContactHub />
      <Footer />

      <TweaksPanel title="Tweaks">
        <TweakSection label="Palette">
          <TweakColor
            label="Paper"
            value={t.paper}
            onChange={v => setTweak("paper", v)}
            options={["#F1EEE4", "#EDE9DC", "#F4F4F0", "#E8E1CB", "#FFFFFF"]}
          />
          <TweakColor
            label="Ink"
            value={t.ink}
            onChange={v => setTweak("ink", v)}
            options={["#0A0A0A", "#161512", "#1A1A2E", "#2E1A1A"]}
          />
        </TweakSection>

        <TweakSection label="Strip">
          <TweakToggle
            label="Marquee strip"
            value={t.showMarquee}
            onChange={v => setTweak("showMarquee", v)}
          />
          <TweakRadio
            label="Speed"
            value={t.marqueeSpeed}
            onChange={v => setTweak("marqueeSpeed", v)}
            options={[
              { value: "slow", label: "Slow" },
              { value: "normal", label: "Normal" },
              { value: "fast", label: "Fast" },
            ]}
          />
        </TweakSection>
      </TweaksPanel>
    </div>
  );
}

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