/* RiserUp — Tweaks panel */
const { useState, useEffect } = React;

const RISERUP_TWEAK_DEFAULTS = /*EDITMODE-BEGIN*/{
  "accent": "#2255F5",
  "navy": "#0B1740",
  "background": "#EDF1FA",
  "displayFont": "Inter Tight",
  "monoFont": "JetBrains Mono",
  "headlineStyle": "manifesto",
  "showWorkflowGraph": true,
  "showTrustStrip": true,
  "showFAQ": true,
  "heroDensity": "spacious",
  "ctaLabel": "Book a 30-min call"
}/*EDITMODE-END*/;

const HEADLINE_VARIANTS = {
  manifesto: {
    h1: ['Tools don\'t', 'transform teams.', '<em>Workflows do.</em>'],
    sub: 'Most teams have AI subscriptions. Few work in an AI-native way. RiserUp redesigns how the work flows — so your team ships at the speed agentic workflows actually allow.'
  },
  problem: {
    h1: ['You\'ve added AI.', '<span class="light">Your team is</span>', '<em>still slow.</em>'],
    sub: 'Having AI tools and working in an AI-native way are two completely different things. We help product teams close the gap — by redesigning how the work flows.'
  },
  outcome: {
    h1: ['Ship 3× faster.', '<span class="light">In 8 weeks.</span>', '<em>With agents.</em>'],
    sub: 'We audit your workflow, build the agentic pipelines that replace the slow parts, and train your team to own them. Outcome-driven from day one.'
  },
  promise: {
    h1: ['From AI-curious', 'to <em>AI-native.</em>', '<span class="light">In 6 weeks.</span>'],
    sub: 'A structured engagement that takes your team from using AI as a tool to operating as an AI-native organization — workflows, training, and ownership included.'
  }
};

const FONT_OPTIONS = {
  display: [
    { label: 'Inter Tight', value: 'Inter Tight', g: 'Inter+Tight:wght@300;400;500;600;700;800' },
    { label: 'Geist', value: 'Geist', g: 'Geist:wght@300;400;500;600;700;800' },
    { label: 'Manrope', value: 'Manrope', g: 'Manrope:wght@300;400;500;600;700;800' },
    { label: 'Plus Jakarta', value: 'Plus Jakarta Sans', g: 'Plus+Jakarta+Sans:wght@300;400;500;600;700;800' },
    { label: 'Space Grotesk', value: 'Space Grotesk', g: 'Space+Grotesk:wght@300;400;500;600;700' }
  ],
  mono: [
    { label: 'JetBrains', value: 'JetBrains Mono', g: 'JetBrains+Mono:wght@400;500;600' },
    { label: 'IBM Plex', value: 'IBM Plex Mono', g: 'IBM+Plex+Mono:wght@400;500;600' },
    { label: 'Geist Mono', value: 'Geist Mono', g: 'Geist+Mono:wght@400;500;600' },
    { label: 'Space Mono', value: 'Space Mono', g: 'Space+Mono:wght@400;700' }
  ]
};

function loadGoogleFont(family, googleSpec) {
  const id = 'tweak-font-' + family.replace(/\s+/g, '-');
  if (document.getElementById(id)) return;
  const link = document.createElement('link');
  link.id = id;
  link.rel = 'stylesheet';
  link.href = `https://fonts.googleapis.com/css2?family=${googleSpec}&display=swap`;
  document.head.appendChild(link);
}

function applyTweaks(t) {
  const r = document.documentElement.style;
  r.setProperty('--blue', t.accent);
  r.setProperty('--blue-2', shadeColor(t.accent, -0.15));
  r.setProperty('--blue-light', shadeColor(t.accent, 0.20));
  r.setProperty('--blue-pale', hexToRgba(t.accent, 0.08));
  r.setProperty('--blue-pale2', hexToRgba(t.accent, 0.14));
  r.setProperty('--navy', t.navy);
  r.setProperty('--ice', t.background);
  r.setProperty('--display', `'${t.displayFont}', system-ui, sans-serif`);
  r.setProperty('--mono', `'${t.monoFont}', ui-monospace, monospace`);

  // headlines
  const h1 = document.querySelector('.hero h1');
  const sub = document.querySelector('.hero-sub');
  if (h1 && HEADLINE_VARIANTS[t.headlineStyle]) {
    const v = HEADLINE_VARIANTS[t.headlineStyle];
    h1.innerHTML = v.h1.join('<br>');
    if (sub) sub.textContent = v.sub;
  }

  // section visibility
  const graph = document.querySelector('.graph-wrap');
  if (graph) graph.style.display = t.showWorkflowGraph ? '' : 'none';
  const heroInner = document.querySelector('.hero-inner');
  if (heroInner) heroInner.style.gridTemplateColumns = t.showWorkflowGraph ? '1.1fr 1fr' : '1fr';

  const trust = document.querySelector('.trust');
  if (trust) trust.style.display = t.showTrustStrip ? '' : 'none';

  const faq = document.getElementById('faq');
  if (faq) faq.style.display = t.showFAQ ? '' : 'none';

  // density
  const hero = document.querySelector('.hero');
  if (hero) {
    if (t.heroDensity === 'compact') hero.style.minHeight = '80vh';
    else if (t.heroDensity === 'spacious') hero.style.minHeight = '100vh';
    else hero.style.minHeight = '110vh';
  }

  // CTA label (nav + hero)
  const navCta = document.querySelector('.nav-cta');
  if (navCta) navCta.innerHTML = `${t.ctaLabel} <span class="arrow">→</span>`;
  const heroBtn = document.querySelector('.hero-actions .btn-primary');
  if (heroBtn) heroBtn.innerHTML = `${t.ctaLabel} <span class="arrow">→</span>`;
}

function hexToRgba(hex, a) {
  const n = parseInt(hex.replace('#',''), 16);
  return `rgba(${(n>>16)&255},${(n>>8)&255},${n&255},${a})`;
}
function shadeColor(hex, p) {
  const n = parseInt(hex.replace('#',''), 16);
  let r=(n>>16)&255, g=(n>>8)&255, b=n&255;
  if (p < 0) { p = 1+p; r=Math.round(r*p); g=Math.round(g*p); b=Math.round(b*p); }
  else { r=Math.round(r+(255-r)*p); g=Math.round(g+(255-g)*p); b=Math.round(b+(255-b)*p); }
  return '#' + ((1<<24) + (r<<16) + (g<<8) + b).toString(16).slice(1);
}

function App() {
  const [tweaks, _setTweaks] = useTweaks(RISERUP_TWEAK_DEFAULTS);
  const setTweak = (k, v) => {
    if (typeof k === 'object') _setTweaks(k);
    else _setTweaks({ [k]: v });
  };

  useEffect(() => {
    // load font when changed
    const display = FONT_OPTIONS.display.find(f => f.value === tweaks.displayFont);
    if (display) loadGoogleFont(display.value, display.g);
    const mono = FONT_OPTIONS.mono.find(f => f.value === tweaks.monoFont);
    if (mono) loadGoogleFont(mono.value, mono.g);
    applyTweaks(tweaks);
  }, [tweaks]);

  return (
    <TweaksPanel title="Tweaks" subtitle="RiserUp design controls">
      <TweakSection title="Brand colors">
        <TweakColor label="Accent (blue)" value={tweaks.accent} onChange={v => setTweak('accent', v)} />
        <TweakColor label="Navy" value={tweaks.navy} onChange={v => setTweak('navy', v)} />
        <TweakColor label="Background" value={tweaks.background} onChange={v => setTweak('background', v)} />
      </TweakSection>

      <TweakSection title="Typography">
        <TweakSelect
          label="Display font"
          value={tweaks.displayFont}
          onChange={v => setTweak('displayFont', v)}
          options={FONT_OPTIONS.display.map(f => ({ label: f.label, value: f.value }))}
        />
        <TweakSelect
          label="Mono font"
          value={tweaks.monoFont}
          onChange={v => setTweak('monoFont', v)}
          options={FONT_OPTIONS.mono.map(f => ({ label: f.label, value: f.value }))}
        />
      </TweakSection>

      <TweakSection title="Headline">
        <TweakRadio
          label="Style"
          value={tweaks.headlineStyle}
          onChange={v => setTweak('headlineStyle', v)}
          options={[
            { label: 'Manifesto', value: 'manifesto' },
            { label: 'Problem', value: 'problem' },
            { label: 'Outcome', value: 'outcome' },
            { label: 'Promise', value: 'promise' }
          ]}
        />
        <TweakText label="CTA label" value={tweaks.ctaLabel} onChange={v => setTweak('ctaLabel', v)} />
      </TweakSection>

      <TweakSection title="Layout">
        <TweakRadio
          label="Hero density"
          value={tweaks.heroDensity}
          onChange={v => setTweak('heroDensity', v)}
          options={[
            { label: 'Compact', value: 'compact' },
            { label: 'Spacious', value: 'spacious' },
            { label: 'Tall', value: 'tall' }
          ]}
        />
        <TweakToggle label="Workflow graph" value={tweaks.showWorkflowGraph} onChange={v => setTweak('showWorkflowGraph', v)} />
        <TweakToggle label="Trust strip" value={tweaks.showTrustStrip} onChange={v => setTweak('showTrustStrip', v)} />
        <TweakToggle label="FAQ section" value={tweaks.showFAQ} onChange={v => setTweak('showFAQ', v)} />
      </TweakSection>
    </TweaksPanel>
  );
}

ReactDOM.createRoot(document.body.appendChild(document.createElement('div'))).render(<App />);