// app.jsx — root composition + Tweaks
// White-base palette. Tweak swaps the live "pink + gold" pair against the
// hard-coded brand defaults via an !important stylesheet that targets the
// exact hex values used inline.

const DEFAULTS = /*EDITMODE-BEGIN*/{
  "palette": ["#EF859A", "#E5B34F"],
  "headingFont": "Cormorant Garamond"
}/*EDITMODE-END*/;

// Authoritative defaults — these MUST match the BRAND constants in site.jsx.
// The override sheet targets these specific hex codes; if BRAND changes, so
// must this map.
const DEFAULT_PINK = '#EF859A';
const DEFAULT_GOLD = '#E5B34F';

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

  React.useEffect(() => {
    let el = document.getElementById('__tweak-overrides');
    if (!el) {
      el = document.createElement('style');
      el.id = '__tweak-overrides';
      document.head.appendChild(el);
    }
    const [pink, gold] = t.palette;

    // Helper: build property override blocks for every inline-style form a
    // hex code can take. CSS attribute selectors require exact matches, and
    // React serializes inline styles as `color: rgb(...)` for named props,
    // but `background: #HEX` for string literals — so we cover both.
    const hexAlts = (hex) => {
      const h = hex.replace('#', '');
      const r = parseInt(h.slice(0, 2), 16);
      const g = parseInt(h.slice(2, 4), 16);
      const b = parseInt(h.slice(4, 6), 16);
      return [hex.toUpperCase(), hex.toLowerCase(), `rgb(${r}, ${g}, ${b})`];
    };
    const swap = (orig, repl) => {
      const alts = hexAlts(orig);
      const sels = (prop) => alts.flatMap((a) => [
        `[style*="${prop}: ${a}"]`,
        `[style*="${prop}:${a}"]`,
      ]).join(',');
      return `
        ${sels('color')}                    { color: ${repl} !important; }
        ${sels('background')}               { background: ${repl} !important; }
        ${sels('background-color')}         { background-color: ${repl} !important; }
        ${sels('border-color')}             { border-color: ${repl} !important; }
        ${sels('border: 1px solid')}        { border-color: ${repl} !important; }
        ${sels('fill')}                     { fill: ${repl} !important; }
      `;
    };
    el.textContent = `
      h1, h2, h3, h4 {
        font-family: "${t.headingFont}", "Cormorant Garamond", serif !important;
      }
      ${swap(DEFAULT_PINK, pink)}
      ${swap(DEFAULT_GOLD, gold)}
    `;
  }, [t.headingFont, t.palette]);

  return (
    <>
      <Nav />
      <Hero />
      <Concept />
      <Message />
      <Lecturers />
      <Courses />
      <Extensions />
      <BlackHair />
      <FAQ />
      <Access />
      <CTA />
      <Footer />

      <TweaksPanel title="Tweaks">
        <TweakSection label="Brand" />
        <TweakColor label="Pink × Gold" value={t.palette}
                    options={[
                      ['#EF859A', '#E5B34F'],   // signature
                      ['#E76B82', '#D9A33A'],   // deeper
                      ['#F5A6B5', '#EFC270'],   // pale
                      ['#D45D8C', '#C09148'],   // berry × bronze
                      ['#EF859A', '#1A1A1A'],   // pink + ink
                    ]}
                    onChange={(v) => setTweak('palette', v)} />
        <TweakSection label="Typography" />
        <TweakRadio label="Heading" value={t.headingFont}
                    options={[
                      { value: 'Cormorant Garamond', label: 'Cormorant' },
                      { value: 'Playfair Display',   label: 'Playfair' },
                      { value: 'Italiana',           label: 'Italiana' },
                    ]}
                    onChange={(v) => setTweak('headingFont', v)} />
      </TweaksPanel>
    </>
  );
}

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