// App entry — composes all sections + tweaks panel

const TWEAK_DEFAULTS = /*EDITMODE-BEGIN*/{
  "headline": "The central operating system for the borderless enterprise.",
  "sub": "24 Hubs is the unified digital infrastructure company powering modern enterprise and government. We integrate with the legacy systems you already trust — no rip-and-replace required.",
  "accent": "blue",
  "density": "comfortable",
  "darkSurface": false
}/*EDITMODE-END*/;

const ACCENTS = {
  blue:    { 500: 'oklch(55% 0.18 255)', 600: 'oklch(48% 0.18 258)', 700: 'oklch(38% 0.16 260)', 300: 'oklch(72% 0.13 252)' },
  forest:  { 500: 'oklch(50% 0.12 155)', 600: 'oklch(42% 0.12 155)', 700: 'oklch(34% 0.10 155)', 300: 'oklch(70% 0.09 155)' },
  ember:   { 500: 'oklch(58% 0.15 35)',  600: 'oklch(50% 0.15 35)',  700: 'oklch(40% 0.13 35)',  300: 'oklch(74% 0.10 35)'  },
  graphite:{ 500: 'oklch(40% 0.02 260)', 600: 'oklch(32% 0.02 260)', 700: 'oklch(24% 0.02 260)', 300: 'oklch(60% 0.02 260)' },
};

function applyAccent(name) {
  const a = ACCENTS[name] || ACCENTS.blue;
  const r = document.documentElement.style;
  r.setProperty('--blue-500', a[500]);
  r.setProperty('--blue-600', a[600]);
  r.setProperty('--blue-700', a[700]);
  r.setProperty('--blue-300', a[300]);
}

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

  React.useEffect(() => { applyAccent(tweaks.accent); }, [tweaks.accent]);
  React.useEffect(() => {
    document.documentElement.style.setProperty(
      '--pad',
      tweaks.density === 'compact' ? 'clamp(16px, 3vw, 40px)' : 'clamp(20px, 4vw, 56px)'
    );
  }, [tweaks.density]);
  React.useEffect(() => {
    if (tweaks.darkSurface) {
      document.documentElement.style.setProperty('--paper', 'oklch(16% 0.015 255)');
      document.documentElement.style.setProperty('--paper-warm', 'oklch(20% 0.02 255)');
      document.documentElement.style.setProperty('--ink', 'oklch(96% 0.005 85)');
      document.documentElement.style.setProperty('--ink-soft', 'oklch(78% 0.02 250)');
      document.documentElement.style.setProperty('--ink-mute', 'oklch(60% 0.02 250)');
      document.documentElement.style.setProperty('--rule', 'oklch(30% 0.02 250)');
    } else {
      document.documentElement.style.setProperty('--paper', 'oklch(98.5% 0.005 85)');
      document.documentElement.style.setProperty('--paper-warm', 'oklch(96% 0.012 85)');
      document.documentElement.style.setProperty('--ink', 'oklch(18% 0.02 255)');
      document.documentElement.style.setProperty('--ink-soft', 'oklch(38% 0.02 255)');
      document.documentElement.style.setProperty('--ink-mute', 'oklch(58% 0.015 255)');
      document.documentElement.style.setProperty('--rule', 'oklch(88% 0.01 250)');
    }
  }, [tweaks.darkSurface]);

  return (
    <React.Fragment>
      <Nav />
      <main>
        <Hero headline={tweaks.headline} sub={tweaks.sub} />
        <LogoCloud />
        <Problem />
        <HowItWorks />
        <IntegrationPromise />
        <HubsGrid />
        <Sectors />
        <Authority />
        <CaseStudy />
        <Numbers />
        <Leadership />
        <Insights />
        <FinalCta />
      </main>
      <Footer />

      <TweaksPanel title="Tweaks">
        <TweakSection title="Hero copy">
          <TweakText label="Headline" value={tweaks.headline}
            onChange={v => setTweak('headline', v)} multiline />
          <TweakText label="Subheadline" value={tweaks.sub}
            onChange={v => setTweak('sub', v)} multiline />
        </TweakSection>
        <TweakSection title="Visual">
          <TweakRadio label="Accent color"
            value={tweaks.accent}
            options={[
              { value: 'blue', label: 'Blue' },
              { value: 'forest', label: 'Forest' },
              { value: 'ember', label: 'Ember' },
              { value: 'graphite', label: 'Graphite' },
            ]}
            onChange={v => setTweak('accent', v)} />
          <TweakRadio label="Density"
            value={tweaks.density}
            options={[
              { value: 'compact', label: 'Compact' },
              { value: 'comfortable', label: 'Comfortable' },
            ]}
            onChange={v => setTweak('density', v)} />
          <TweakToggle label="Dark surface"
            value={tweaks.darkSurface}
            onChange={v => setTweak('darkSurface', v)} />
        </TweakSection>
      </TweaksPanel>
    </React.Fragment>
  );
}

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