// App.jsx — root component

const TWEAK_DEFAULTS = /*EDITMODE-BEGIN*/{
  "aesthetic": "enterprise",
  "heroStyle": "flowloop",
  "typography": "editorial",
  "colorEmphasis": "balanced",
  "stickyNav": true,
  "scrollAnims": true,
  "shiftInteractive": false,
  "logoTreatment": "color"
}/*EDITMODE-END*/;

const SCHEDULER_URL = 'https://scheduler.zoom.us/b-eric-fullerton/';

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

  // Apply aesthetic + typography + colorEmphasis as CSS vars on :root
  React.useEffect(() => {
    const root = document.documentElement;
    // Aesthetics
    const aesthetics = {
      enterprise: {
        '--bg-light': '#ffffff',
        '--bg-tint': '#f4f6fa',
        '--bg-dark': '#121a36',
        '--bg-accent': '#1b264f',
        '--fg': '#1b264f',
        '--fg-muted': '#586079',
      },
      modern: {
        '--bg-light': '#faf9f5',
        '--bg-tint': '#f2efe6',
        '--bg-dark': '#1b264f',
        '--bg-accent': '#2f4b26',
        '--fg': '#232a3f',
        '--fg-muted': '#6b6e7c',
      },
      systems: {
        '--bg-light': '#ffffff',
        '--bg-tint': '#eef4ec',
        '--bg-dark': '#0f1a32',
        '--bg-accent': '#1b264f',
        '--fg': '#1b264f',
        '--fg-muted': '#5b6377',
      },
    };
    const a = aesthetics[t.aesthetic] || aesthetics.enterprise;
    Object.entries(a).forEach(([k, v]) => root.style.setProperty(k, v));

    // Color emphasis — affects CTA, accent, link
    const emphases = {
      'orange-cta':    { '--cta': '#fb6107', '--accent': '#76b041', '--link': '#3382b0' },
      'fern-heavy':    { '--cta': '#76b041', '--accent': '#2f4b26', '--link': '#3382b0' },
      'balanced':      { '--cta': '#1b264f', '--accent': '#3382b0', '--link': '#76b041' },
      'energetic':     { '--cta': '#fb6107', '--accent': '#fb6107', '--link': '#76b041' },
    };
    const e = emphases[t.colorEmphasis] || emphases['orange-cta'];
    Object.entries(e).forEach(([k, v]) => root.style.setProperty(k, v));

    // Typography
    const typos = {
      jakarta:   { heading: "'Plus Jakarta Sans', system-ui, sans-serif", body: "'Inter', system-ui, sans-serif" },
      work:      { heading: "'Work Sans', system-ui, sans-serif",         body: "'Source Sans 3', system-ui, sans-serif" },
      editorial: { heading: "'Fraunces', Georgia, serif",                  body: "'Inter', system-ui, sans-serif" },
    };
    const ty = typos[t.typography] || typos.jakarta;
    root.style.setProperty('--font-heading', ty.heading);
    root.style.setProperty('--font-body', ty.body);

    // Brand constants (always)
    root.style.setProperty('--brand-indigo', '#1b264f');
    root.style.setProperty('--brand-fern',   '#76b041');
    root.style.setProperty('--brand-spruce', '#2f4b26');
    root.style.setProperty('--brand-ocean',  '#3382b0');
    root.style.setProperty('--brand-cta',    '#fb6107');
  }, [t.aesthetic, t.colorEmphasis, t.typography]);

  const onBook = React.useCallback(() => {
    window.open(SCHEDULER_URL, '_blank', 'noopener');
  }, []);

  return (
    <div style={{
      fontFamily: 'var(--font-body)',
      color: 'var(--fg)',
      background: 'var(--bg-light)',
      minHeight: '100vh',
    }}>
      <Nav tweaks={t} onBook={onBook}/>
      <main>
        <Hero tweaks={t} onBook={onBook}/>
        <div id="problem"><Problem tweaks={t}/></div>
        <div id="shift"><Shift tweaks={t}/></div>
        <System tweaks={t}/>
        <div id="differentiation"><Differentiation tweaks={t}/></div>
        <Credibility tweaks={t}/>
        <div id="offer"><PrimaryOffer tweaks={t} onBook={onBook}/></div>
        <div id="course"><SecondaryOffer tweaks={t}/></div>
        <FinalClose tweaks={t} onBook={onBook}/>
      </main>
      <Footer/>

      <TweaksPanel>
        <TweakSection label="Aesthetic direction"/>
        <TweakRadio
          label="Style"
          value={t.aesthetic}
          options={[
            { value: 'enterprise', label: 'Enterprise' },
            { value: 'modern',     label: 'Modern product' },
            { value: 'systems',    label: 'Systems thinking' },
          ]}
          onChange={(v) => setTweak('aesthetic', v)}
        />
        <TweakSection label="Hero graphic"/>
        <TweakRadio
          label="Variant"
          value={t.heroStyle}
          options={[
            { value: 'monitor',     label: 'Monitor (wireframe)' },
            { value: 'dotring',     label: 'Animated dot ring' },
            { value: 'flowloop',    label: 'Flow loop' },
            { value: 'placeholder', label: 'Placeholder' },
          ]}
          onChange={(v) => setTweak('heroStyle', v)}
        />
        <TweakSection label="Typography"/>
        <TweakRadio
          label="Pairing"
          value={t.typography}
          options={[
            { value: 'jakarta',   label: 'Jakarta + Inter' },
            { value: 'work',      label: 'Work + Source Sans' },
            { value: 'editorial', label: 'Fraunces + Inter' },
          ]}
          onChange={(v) => setTweak('typography', v)}
        />
        <TweakSection label="Color emphasis"/>
        <TweakRadio
          label="Accent system"
          value={t.colorEmphasis}
          options={[
            { value: 'orange-cta', label: 'Orange CTA (default)' },
            { value: 'fern-heavy', label: 'Fern-forward' },
            { value: 'balanced',   label: 'Balanced navy' },
            { value: 'energetic',  label: 'Energetic' },
          ]}
          onChange={(v) => setTweak('colorEmphasis', v)}
        />
        <TweakSection label="Client logos"/>
        <TweakRadio
          label="Treatment"
          value={t.logoTreatment}
          options={[
            { value: 'color', label: 'Color (original)' },
            { value: 'mono',  label: 'Monochrome' },
          ]}
          onChange={(v) => setTweak('logoTreatment', v)}
        />
        <TweakSection label="Behavior"/>
        <TweakToggle label="Sticky nav"           value={t.stickyNav}        onChange={(v) => setTweak('stickyNav', v)}/>
        <TweakToggle label="Scroll animations"    value={t.scrollAnims}      onChange={(v) => setTweak('scrollAnims', v)}/>
        <TweakToggle label="Interactive Old/New"  value={t.shiftInteractive} onChange={(v) => setTweak('shiftInteractive', v)}/>
      </TweaksPanel>
    </div>
  );
}

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