/* ── reeve — main app ─────────────────────────────────────────────────── */

const TWEAK_DEFAULTS = /*EDITMODE-BEGIN*/{
  "accent": "amber",
  "headline": "control",
  "motion": true
}/*EDITMODE-END*/;

// Match the main kitt.services home page palette religiously.
// 'amber' / 'teal' keys preserved so the tweaks panel still flips between
// the live (green) palette and an alt for preview — but the default is the
// home-page forest green and that's what the page ships with.
const ACCENTS = {
  amber: {
    name: 'Forge green',
    accent:    'oklch(44% 0.09 160)',
    accentInk: 'oklch(32% 0.07 160)',
    accentSoft:'oklch(93% 0.03 160)',
    swatch: '#3a6b51',
  },
  teal: {
    name: 'Deep teal',
    accent:    'oklch(0.58 0.10 195)',
    accentInk: 'oklch(0.36 0.09 200)',
    accentSoft:'oklch(0.93 0.03 195)',
    swatch: '#2d7d85',
  },
};

const HEADLINES = {
  control: 'Every job, supplier and service,<br/><em>under control.</em>',
  speed:   'From logged to resolved <em>\u2014 fast.</em>',
  routes:  'Every issue, resolved at speed.<br/><em>Every route, under control.</em>',
};

const HEADLINE_LABELS = {
  control: 'Control',
  speed:   'Speed',
  routes:  'Routes',
};

function App() {
  const [t, setTweak] = useTweaks(TWEAK_DEFAULTS);
  const sub = "Use your suppliers, our specialists or our team. reeve gives every route to resolution one workflow, one evidence trail and one service standard — behind your brand.";

  // Apply accent + motion as CSS variables on :root
  React.useEffect(() => {
    const a = ACCENTS[t.accent] || ACCENTS.amber;
    const r = document.documentElement;
    r.style.setProperty('--accent', a.accent);
    r.style.setProperty('--accent-ink', a.accentInk);
    r.style.setProperty('--accent-soft', a.accentSoft);
    r.style.setProperty('--accent-wash', a.accentSoft);
    r.dataset.motion = t.motion ? 'on' : 'off';
  }, [t.accent, t.motion]);

  return (
    <>
      <Nav />
      <Hero headline={HEADLINES[t.headline] || HEADLINES.control} sub={sub} />
      <Certifications />
      <Services />
      <Trust />
      <Routes />
      <Modules />
      <Compare />
      <Brand />
      <Proof />
      <ClosingCTA />
      <Footer />

      <TweaksPanel title="Tweaks">
        <TweakSection label="Brand accent" />
        <TweakColor
          label="Accent"
          value={t.accent === 'amber' ? ACCENTS.amber.swatch : ACCENTS.teal.swatch}
          options={[ACCENTS.amber.swatch, ACCENTS.teal.swatch]}
          onChange={(v) => setTweak('accent', v === ACCENTS.amber.swatch ? 'amber' : 'teal')}
        />

        <TweakSection label="Hero headline" />
        <TweakRadio
          label="Variant"
          value={t.headline}
          options={[
            { value: 'control', label: 'Control' },
            { value: 'speed',   label: 'Speed' },
            { value: 'routes',  label: 'Routes' },
          ]}
          onChange={(v) => setTweak('headline', v)}
        />
        <div style={{
          fontFamily: 'var(--serif)',
          fontSize: 13,
          lineHeight: 1.25,
          letterSpacing: '-0.015em',
          color: 'rgba(41,38,27,0.7)',
          paddingTop: 4,
        }} dangerouslySetInnerHTML={{ __html: '"' + HEADLINES[t.headline].replace(/<[^>]+>/g, ' ').trim() + '"' }} />

        <TweakSection label="Motion" />
        <TweakToggle
          label="Animated flow"
          value={t.motion}
          onChange={(v) => setTweak('motion', v)}
        />
      </TweaksPanel>
    </>
  );
}

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