/* global React, ReactDOM, useTweaks, TweaksPanel, TweakSection, TweakRadio, TweakSelect, TweakColor, TweakText, TweakToggle,
   Nav, Hero, FocusStrip, Thesis, Founder, Research, Media, Signup, Footer */
const { useEffect } = React;

/* ---------------- themes ---------------- */
const THEMES = {
  Institutional: {
    label: 'Institutional',
    accent: '#9a6a2f',
    vars: {
      '--font-display': "'Spectral', Georgia, serif",
      '--font-body': "'Spectral', Georgia, serif",
      '--font-mono': "'IBM Plex Mono', ui-monospace, monospace",
      '--display-weight': '500',
      '--bg': '#f4f4f1', '--surface': '#f9f9f5', '--text': '#1c1815', '--muted': '#76716a',
      '--line': '#e1dfd7', '--inverse-bg': '#1c1815', '--inverse-text': '#f3efe6',
    },
  },
  Macro: {
    label: 'Macro Modern',
    accent: '#5b8cff',
    vars: {
      '--font-display': "'Helvetica Neue', Helvetica, Arial, sans-serif",
      '--font-body': "'Helvetica Neue', Helvetica, Arial, sans-serif",
      '--font-mono': "'IBM Plex Mono', ui-monospace, monospace",
      '--display-weight': '700',
      '--bg': '#0b1220', '--surface': '#111a2b', '--text': '#eaf0f8', '--muted': '#8694aa',
      '--line': '#1e2a3e', '--inverse-bg': '#eaf0f8', '--inverse-text': '#0b1220',
    },
  },
  Journal: {
    label: 'Research Journal',
    accent: '#b23a1e',
    vars: {
      '--font-display': "'Newsreader', Georgia, serif",
      '--font-body': "'Helvetica Neue', Helvetica, Arial, sans-serif",
      '--font-mono': "'IBM Plex Mono', ui-monospace, monospace",
      '--display-weight': '500',
      '--bg': '#faf7f1', '--surface': '#ffffff', '--text': '#17140f', '--muted': '#6f6657',
      '--line': '#e7e0d2', '--inverse-bg': '#17140f', '--inverse-text': '#faf7f1',
    },
  },
};

const HEADLINES = {
  Institutional: 'We invest for the next *decade*, not the next quarter.',
  Macro: 'Conviction across *thematic macro* and global markets.',
  Journal: 'A discretionary firm built on *research* and patience.',
};

const ACCENTS = ['#9a6a2f', '#b8891a', '#c79a1e', '#b23a1e', '#1f8a5b', '#23425f'];

/* Curated backgrounds — each option carries its own surface + hairline colors.
   '#f3efe6' (Tan) is the original; '#16140f' (Ink) is a full dark direction. */
const BG_OPTIONS = ['#f4f4f1', '#f3efe6', '#faf7ef', '#ece7da', '#16140f'];
const BACKGROUNDS = {
  '#f4f4f1': {}, /* Porcelain — locked-in default */
  '#f3efe6': { '--bg': '#f3efe6', '--surface': '#fbf9f3', '--line': '#e2d9c8', '--muted': '#7a6f60' },  /* Tan — original */
  '#faf7ef': { '--bg': '#faf7ef', '--surface': '#ffffff', '--line': '#e9e1cf', '--muted': '#7a6f60' },  /* Ivory — lighter, airier */
  '#ece7da': { '--bg': '#ece7da', '--surface': '#f7f3e9', '--line': '#d9d1bd', '--muted': '#7a6f60' },  /* Parchment — deeper, warmer */
  '#16140f': { '--bg': '#16140f', '--surface': '#1f1b14', '--line': '#302a1f', '--text': '#f1ecdd', '--muted': '#a69b86', '--inverse-bg': '#f3efe6', '--inverse-text': '#1c1815' }, /* Ink — dark */
};

const TWEAK_DEFAULTS = /*EDITMODE-BEGIN*/{
  "direction": "Institutional",
  "accent": "#9a6a2f",
  "bg": "#f4f4f1",
  "grain": false,
  "heroMotion": "Off",
  "backdrop": "Aurum",
  "thesisMotion": false,
  "headline": "",
  "sub": "1971 Capital is a discretionary investment firm focused on thematic cross-asset macro opportunities. We think in multi-decade time horizons, targeting high-conviction opportunities in liquid public markets."
}/*EDITMODE-END*/;

function App() {
  const [t, setTweak] = useTweaks(TWEAK_DEFAULTS);
  const theme = THEMES[t.direction] || THEMES.Institutional;

  // When the direction changes, sync accent + headline to that theme's defaults
  // (only if the user hasn't typed a custom headline).
  const onDirection = (dir) => {
    setTweak({ direction: dir, accent: THEMES[dir].accent, headline: '', bg: THEMES[dir].vars['--bg'] });
  };

  const headline = (t.headline && t.headline.trim()) ? t.headline : HEADLINES[t.direction] || HEADLINES.Institutional;
  const bgVars = BACKGROUNDS[t.bg] || {};
  const styleVars = { ...theme.vars, ...bgVars, '--accent': t.accent || theme.accent };

  useEffect(() => {
    document.body.style.background = styleVars['--bg'];
  }, [t.direction, t.bg]);

  return (
    <div className={`site ${t.grain ? 'grain' : ''}`} data-theme={t.direction} style={styleVars}>
      <Nav />
      <Hero headline={headline} sub={t.sub} motion={t.heroMotion} accent={t.accent || theme.accent} backdrop={t.backdrop} />
      <FocusStrip />
      <Thesis motion={!!t.thesisMotion} />
      <Founder />
      <Research limit={3} showMore />
      <Media limit={3} showMore />
      <Signup />
      <Footer />

      <TweaksPanel>
        <TweakSection label="Direction" />
        <TweakRadio
          label="Style"
          value={t.direction}
          options={['Institutional', 'Macro', 'Journal']}
          onChange={onDirection} />
        <TweakSection label="Accent" />
        <TweakColor
          label="Color"
          value={t.accent}
          options={ACCENTS}
          onChange={(v) => setTweak('accent', v)} />
        <TweakSection label="Background" />
        <TweakColor
          label="Color"
          value={t.bg}
          options={BG_OPTIONS}
          onChange={(v) => setTweak('bg', v)} />
        <TweakToggle
          label="Paper grain"
          value={!!t.grain}
          onChange={(v) => setTweak('grain', v)} />
        <TweakSection label="Hero backdrop" />
        <TweakSelect
          label="Style"
          value={t.backdrop}
          options={['None', 'Orb', 'Dawn', 'Halo', 'Veil', 'Vignette', 'Aurum', 'Silk', 'Horizon', 'Meridian']}
          onChange={(v) => setTweak('backdrop', v)} />
        <TweakSection label="Copy" />
        <TweakText
          label="Headline"
          value={t.headline}
          placeholder={HEADLINES[t.direction]}
          onChange={(v) => setTweak('headline', v)} />
        <TweakText
          label="Sub-headline"
          value={t.sub}
          onChange={(v) => setTweak('sub', v)} />
      </TweaksPanel>
    </div>
  );
}

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