/* 6ix Mela — homepage app shell. Wires nav, sections, tweaks. */
const { useState, useEffect } = React;

const TWEAK_DEFAULTS = /*EDITMODE-BEGIN*/{
  "accent": "#FF2D78",
  "headline": "The 6ix<br>Meets The <span class=\"glow\">Mela</span>",
  "sub": "Toronto's biggest South Asian music festival. Urban Punjabi meets mainstream hip-hop — one mega stage, one night, the whole 6ix outside.",
  "grain": true,
  "tapes": true,
  "tapeMotion": true
}/*EDITMODE-END*/;

const ACCENTS = {
  "#FF2D78": { hi: "#FF5C97", glow: "0 0 24px rgba(255,45,120,.5), 0 0 4px rgba(255,45,120,.9)", neon: "0 12px 40px rgba(255,45,120,.3)", soft: "rgba(255,45,120,.18)" },
  "#29D6D6": { hi: "#5BE5E5", glow: "0 0 24px rgba(41,214,214,.5), 0 0 4px rgba(41,214,214,.9)", neon: "0 12px 40px rgba(41,214,214,.3)", soft: "rgba(41,214,214,.18)" },
  "#D4A03A": { hi: "#FEE6B0", glow: "0 0 24px rgba(212,160,58,.5), 0 0 4px rgba(255,252,230,.7)", neon: "0 12px 40px rgba(212,160,58,.3)", soft: "rgba(212,160,58,.2)" },
};

function App() {
  const [t, setTweak] = useTweaks(TWEAK_DEFAULTS);
  const [reason, setReason] = useState('vip');

  // apply accent tweak by overriding the magenta tokens site-wide
  useEffect(() => {
    const a = ACCENTS[t.accent] || ACCENTS["#FF2D87"];
    const r = document.documentElement;
    r.style.setProperty('--magenta', t.accent);
    r.style.setProperty('--magenta-hi', a.hi);
    r.style.setProperty('--glow-magenta', a.glow);
    r.style.setProperty('--sh-neon', a.neon);
  }, [t.accent]);

  useEffect(() => { document.body.classList.toggle('no-grain', !t.grain); }, [t.grain]);
  useEffect(() => { document.body.classList.toggle('no-tape-motion', !t.tapeMotion); }, [t.tapeMotion]);

  const scrollTo = (id) => {
    if (id === 'home') { window.scrollTo({ top: 0, behavior: 'smooth' }); return; }
    const el = document.getElementById(id);
    if (el) window.scrollTo({ top: el.offsetTop - 64, behavior: 'smooth' });
  };
  const goConnect = (r) => { setReason(r); scrollTo('connect'); };

  return (
    <React.Fragment>
      <Nav onNav={scrollTo} onTickets={() => scrollTo('tickets')} />
      <Hero headline={t.headline} sub={t.sub} onTickets={() => scrollTo('tickets')} onLineup={() => scrollTo('lineup')} />
      <Marquee words={['On Sale Now', 'NAV', 'Tegi Pannu', 'Chani Nattan', 'Inderpal Moga', 'AR Paisley', 'BK', 'Supreme Sidhu', 'Gav']} />
      <VideoBand />
      <Lineup />
      {t.tapes && <Tape words={['On Sale Now', 'One Night Only', 'One Mega Stage', 'The Whole 6ix Outside', 'Sat Sep 12']} />}
      <CountBand onTickets={() => scrollTo('tickets')} />
      <Tickets onEnquire={() => goConnect('vip')} />
      <Story />
      <Venue />
      {t.tapes && <Tape variant="cyan" words={['Doors 6 PM', 'One Mega Stage', 'NAV', 'Tegi Pannu', 'Chani Nattan', 'Inderpal Moga', 'AR Paisley', 'BK', 'Supreme Sidhu', 'Gav']} />}
      <Sponsors onBecome={() => goConnect('sponsor')} />
      <Connect reason={reason} onReason={setReason} />
      <FAQ />
      <ContactStrip />
      <Footer onNav={scrollTo} />

      <SubscribePopup />

      <TweaksPanel>
        <TweakSection label="Brand" />
        <TweakColor label="Accent" value={t.accent} options={["#FF2D78", "#29D6D6", "#D4A03A"]} onChange={(v) => setTweak('accent', v)} />
        <TweakSection label="Hero copy" />
        <TweakText label="Headline (HTML ok)" value={t.headline} onChange={(v) => setTweak('headline', v)} />
        <TweakText label="Sub-line" value={t.sub} multiline onChange={(v) => setTweak('sub', v)} />
        <TweakSection label="Texture & motion" />
        <TweakToggle label="Film grain" value={t.grain} onChange={(v) => setTweak('grain', v)} />
        <TweakToggle label="Tape dividers" value={t.tapes} onChange={(v) => setTweak('tapes', v)} />
        <TweakToggle label="Marquee motion" value={t.tapeMotion} onChange={(v) => setTweak('tapeMotion', v)} />
      </TweaksPanel>
    </React.Fragment>
  );
}

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