// App: mounts everything + handles tweaks
const { useEffect: useEffA, useState: useStateA } = React;

const ACCENTS = {
  sky:    { hex: '#7dd3fc', rgb: '125, 211, 252', dim: '#38bdf8' },
  violet: { hex: '#c4b5fd', rgb: '196, 181, 253', dim: '#a78bfa' },
  green:  { hex: '#86efac', rgb: '134, 239, 172', dim: '#4ade80' },
  amber:  { hex: '#fcd34d', rgb: '252, 211, 77',  dim: '#f59e0b' },
};

function applyAccent(name) {
  const a = ACCENTS[name] || ACCENTS.sky;
  document.documentElement.style.setProperty('--accent', a.hex);
  document.documentElement.style.setProperty('--accent-2', a.dim);
  document.documentElement.style.setProperty('--accent-rgb', a.rgb);
}
function applyTheme(t)   { document.documentElement.setAttribute('data-theme', t); }
function applyDensity(d) { document.body.setAttribute('data-density', d); }
function applyBg(b)      { document.body.setAttribute('data-bg', b); }

// Shared event channel between FlochaiTweaks and App for heroVariant changes
const TWEAK_BUS = new EventTarget();

function FlochaiTweaks() {
  const [tweaks, setTweak] = useTweaks(window.TWEAK_DEFAULTS);

  useEffA(() => { applyAccent(tweaks.accent); }, [tweaks.accent]);
  useEffA(() => { applyTheme(tweaks.theme); },  [tweaks.theme]);
  useEffA(() => { applyDensity(tweaks.density); }, [tweaks.density]);
  useEffA(() => { applyBg(tweaks.bg); }, [tweaks.bg]);
  useEffA(() => {
    TWEAK_BUS.dispatchEvent(new CustomEvent('heroVariant', { detail: tweaks.heroVariant }));
  }, [tweaks.heroVariant]);
  useEffA(() => {
    TWEAK_BUS.dispatchEvent(new CustomEvent('engineerCount', { detail: tweaks.engineerCount }));
  }, [tweaks.engineerCount]);

  return (
    <TweaksPanel title="Tweaks">
      <TweakSection label="Look & feel">
        <TweakRadio
          label="Theme"
          value={tweaks.theme}
          options={[{value:'dark',label:'Dark'},{value:'light',label:'Light'}]}
          onChange={v => setTweak('theme', v)}
        />
        <TweakRadio
          label="Accent"
          value={tweaks.accent}
          options={[
            {value:'sky',label:'Sky'},
            {value:'violet',label:'Violet'},
            {value:'green',label:'Green'},
            {value:'amber',label:'Amber'},
          ]}
          onChange={v => setTweak('accent', v)}
        />
        <TweakSelect
          label="Background"
          value={tweaks.bg}
          options={[
            {value:'grid',label:'Grid'},
            {value:'dotted',label:'Dotted'},
            {value:'gradient',label:'Gradient'},
            {value:'solid',label:'Solid'},
          ]}
          onChange={v => setTweak('bg', v)}
        />
        <TweakRadio
          label="Density"
          value={tweaks.density}
          options={[
            {value:'compact',label:'Compact'},
            {value:'comfortable',label:'Comfy'},
            {value:'spacious',label:'Spacious'},
          ]}
          onChange={v => setTweak('density', v)}
        />
      </TweakSection>
      <TweakSection label="Hero variant">
        <TweakRadio
          label="Visual"
          value={tweaks.heroVariant}
          options={[
            {value:'wing',label:'Flow trace'},
            {value:'terminal',label:'Terminal'},
            {value:'pipeline',label:'Pipeline'},
            {value:'gitlab',label:'GitLab CI'},
            {value:'joblog',label:'Job log'},
            {value:'alternate',label:'Alternate'},
          ]}
          onChange={v => setTweak('heroVariant', v)}
        />
        <TweakSlider
          label="Engineers available"
          value={tweaks.engineerCount}
          min={1} max={12} step={1}
          onChange={v => setTweak('engineerCount', v)}
        />
      </TweakSection>
    </TweaksPanel>
  );
}

function App() {
  const [hv, setHv] = useStateA(window.TWEAK_DEFAULTS.heroVariant);
  const [ec, setEc] = useStateA(window.TWEAK_DEFAULTS.engineerCount);
  // For 'alternate', pick once at mount and keep it for the page session
  const [altPick] = useStateA(() => {
    const opts = ['gitlab', 'terminal', 'joblog'];
    return opts[Math.floor(Math.random() * opts.length)];
  });

  useEffA(() => {
    const hvHandler = (e) => setHv(e.detail);
    const ecHandler = (e) => setEc(e.detail);
    TWEAK_BUS.addEventListener('heroVariant', hvHandler);
    TWEAK_BUS.addEventListener('engineerCount', ecHandler);
    return () => {
      TWEAK_BUS.removeEventListener('heroVariant', hvHandler);
      TWEAK_BUS.removeEventListener('engineerCount', ecHandler);
    };
  }, []);

  const effective = hv === 'alternate' ? altPick : hv;
  return <Hero heroVariant={effective} engineerCount={ec} />;
}

const mount = (id, comp) => {
  const el = document.getElementById(id);
  if (el) ReactDOM.createRoot(el).render(comp);
};

mount('hero-mount',         <App />);
mount('services-mount',     <Services />);
mount('experience-mount',   <Experience />);
mount('process-mount',      <Process />);
mount('stack-mount',        <Stack />);
mount('pricing-mount',      <Pricing />);
mount('testimonials-mount', <Testimonials />);
mount('faq-mount',          <FAQ />);
mount('contact-mount',      <Contact />);
mount('tweaks-mount',       <FlochaiTweaks />);