// Main app
const PALETTES = {
  sand: {
    '--bg': '#f6f4ee',
    '--bg-alt': '#efece4',
    '--ink': '#14140f',
    '--ink-2': '#3a3a32',
    '--ink-3': '#6e6e63',
    '--line': '#d9d4c4',
    '--line-2': '#e6e2d4',
    '--accent': '#1f3b2d',
    '--accent-soft': '#c5b896',
    '--paper': '#fbfaf4',
  },
  paper: {
    '--bg': '#fafaf8',
    '--bg-alt': '#f1f0ec',
    '--ink': '#0e0e0a',
    '--ink-2': '#3b3b34',
    '--ink-3': '#6e6e63',
    '--line': '#d8d6cd',
    '--line-2': '#e6e4dc',
    '--accent': '#1a1a1a',
    '--accent-soft': '#a3a39a',
    '--paper': '#ffffff',
  },
  ink: {
    '--bg': '#0e0e0a',
    '--bg-alt': '#15150f',
    '--ink': '#f6f4ee',
    '--ink-2': '#bdbab0',
    '--ink-3': '#7d7a70',
    '--line': '#2a2a22',
    '--line-2': '#1f1f18',
    '--accent': '#c5b896',
    '--accent-soft': '#d4cba8',
    '--paper': '#161611',
  },
  navy: {
    '--bg': '#f4f5f7',
    '--bg-alt': '#eaecf0',
    '--ink': '#0f1a2e',
    '--ink-2': '#37425a',
    '--ink-3': '#6c7790',
    '--line': '#cfd4dd',
    '--line-2': '#dfe2e9',
    '--accent': '#1e3a8a',
    '--accent-soft': '#bfd0f0',
    '--paper': '#ffffff',
  },
};

const DEFAULT_HEADLINES = [
  'Finance built for the next round.',
  'A CFO who has sat on both sides of the table.',
  'Numbers that tell the story you mean to tell.',
];

const TWEAK_DEFAULTS = /*EDITMODE-BEGIN*/{
  "headline_1": "Build finance systems that scale",
  "headline_2": "Keep your investors confident, not just informed",
  "headline_3": "Turn finance into a decision engine",
  "cycleSeconds": 4,
  "palette": "sand",
  "density": "comfortable",
  "background": "framed",
  "questionsStyle": "quiet"
}/*EDITMODE-END*/;

function applyPalette(name) {
  const p = PALETTES[name] || PALETTES.sand;
  const root = document.documentElement;
  for (const k in p) root.style.setProperty(k, p[k]);
}

function applyDensity(d) {
  const root = document.documentElement;
  root.style.setProperty('--section-pad', d === 'compact' ? '64px' : '96px');
}

function applyBackground(mode) {
  document.body.classList.remove('bg-dotted', 'framed-canvas');
  if (mode === 'fullpage') document.body.classList.add('bg-dotted');
  else if (mode === 'framed') document.body.classList.add('framed-canvas');
}

function App() {
  const [tweaks, setTweak] = window.useTweaks(TWEAK_DEFAULTS);

  React.useEffect(() => { applyPalette(tweaks.palette); }, [tweaks.palette]);
  React.useEffect(() => { applyDensity(tweaks.density); }, [tweaks.density]);
  React.useEffect(() => { applyBackground(tweaks.background); }, [tweaks.background]);

  const headlines = [tweaks.headline_1, tweaks.headline_2, tweaks.headline_3].filter(Boolean);

  const onBook = () => {
    window.open('https://calendly.com/christianayers/30min', '_blank', 'noopener,noreferrer');
  };

  return (
    <>
      <div className={tweaks.background === 'framed' ? 'canvas' : ''}>
        <window.Nav onBook={onBook} />
        <window.Hero
          headlines={headlines}
          cycleSeconds={tweaks.cycleSeconds}
          onBook={onBook}
        />
        <window.Logos />
        <window.Intro />
        <window.Questions style={tweaks.questionsStyle} />
        <window.Services onBook={onBook} />
        <window.Resources onBook={onBook} />
        <div id="closing-cta">
          <window.Closing onBook={onBook} />
        </div>
        <window.Footer />
      </div>

      <window.TweaksPanel title="Tweaks">
        <window.TweakSection label="Hero headlines">
          <window.TweakText label="Headline 1" value={tweaks.headline_1} onChange={v => setTweak('headline_1', v)} />
          <window.TweakText label="Headline 2" value={tweaks.headline_2} onChange={v => setTweak('headline_2', v)} />
          <window.TweakText label="Headline 3" value={tweaks.headline_3} onChange={v => setTweak('headline_3', v)} />
          <window.TweakSlider label="Cycle every" value={tweaks.cycleSeconds} min={2} max={10} step={0.5} unit="s"
            onChange={v => setTweak('cycleSeconds', v)} />
        </window.TweakSection>

        <window.TweakSection label="Look">
          <window.TweakRadio label="Background" value={tweaks.background} options={[
            { label: 'Framed',   value: 'framed' },
            { label: 'Full',     value: 'fullpage' },
            { label: 'None',     value: 'none' },
          ]} onChange={v => setTweak('background', v)} />
          <window.TweakRadio label="Palette" value={tweaks.palette} options={[
            { label: 'Sand', value: 'sand' },
            { label: 'Paper', value: 'paper' },
            { label: 'Ink', value: 'ink' },
            { label: 'Navy', value: 'navy' },
          ]} onChange={v => setTweak('palette', v)} />
          <window.TweakRadio label="Density" value={tweaks.density} options={[
            { label: 'Comfortable', value: 'comfortable' },
            { label: 'Compact',     value: 'compact' },
          ]} onChange={v => setTweak('density', v)} />
        </window.TweakSection>

        <window.TweakSection label="Questions section">
          <window.TweakRadio label="List style" value={tweaks.questionsStyle} options={[
            { label: 'Quiet', value: 'quiet' },
            { label: 'Serif arrow', value: 'serif' },
            { label: 'Dot',   value: 'dot' },
          ]} onChange={v => setTweak('questionsStyle', v)} />
        </window.TweakSection>
      </window.TweaksPanel>
    </>
  );
}

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