/* ── 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: 'Sherwood green',
    accent:    '#14532D',
    accentInk: 'oklch(26% 0.08 154)',
    accentSoft:'oklch(94% 0.025 154)',
    swatch: '#14532D',
  },
  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: 'Your portfolio, <em>under control.</em>',
  speed:   'Property teams, <em>without the chase.</em>',
  routes:  'One FM partner.<br/><em>Flexible delivery model.</em>',
};

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

function App() {
  const [t, setTweak] = useTweaks(TWEAK_DEFAULTS);
  const sub = "Reeve is the FM partner for property teams. Our AI platform and FM team keep facilities moving across your portfolio, from reactive jobs and compliance checks to supplier coordination, operative dispatch and resolution path reporting. Start with one job, or review your current FM workflow.";

  // 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} />
      <Trust />
      <PlatformShowcase />
      <ThreeWaysToStart />
      <Proof />
      <Modules />
      <Brand />
      <Certifications />
      <Routes />
      <Services />
      <ComplianceShowcase />
      <Compare />
      <ClosingCTA />
      <Footer />
      <WhatsAppBubble />
      <JobWidget />

      <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 />);