// app.jsx — root App with Tweaks integration

const { useEffect: useEffectApp } = React;

const ACCENT_OPTIONS = [
  '#2a3df0', // bright indigo (default - reference style)
  '#16166b', // deep navy
  '#0e7eb0', // teal blue
  '#c8a96a', // warm gold (original logo tone)
];

const HEADLINE_FONTS = {
  serif: '"Noto Serif KR", "Cormorant Garamond", serif',
  sans:  '"Noto Sans KR", "Pretendard", sans-serif',
  display: '"Cormorant Garamond", "Noto Serif KR", serif',
};

// derive helper colors from accent
function deriveAccent(hex) {
  // lighten / darken by working in HSL
  const r = parseInt(hex.slice(1,3),16)/255;
  const g = parseInt(hex.slice(3,5),16)/255;
  const b = parseInt(hex.slice(5,7),16)/255;
  const max = Math.max(r,g,b), min = Math.min(r,g,b);
  let h=0, s=0, l=(max+min)/2;
  if (max !== min) {
    const d = max-min;
    s = l > 0.5 ? d/(2-max-min) : d/(max+min);
    switch (max) {
      case r: h = (g-b)/d + (g<b ? 6 : 0); break;
      case g: h = (b-r)/d + 2; break;
      case b: h = (r-g)/d + 4; break;
    }
    h /= 6;
  }
  const toHex = (r,g,b)=>'#'+[r,g,b].map(x=>{
    const v = Math.round(Math.max(0,Math.min(255,x*255)));
    return v.toString(16).padStart(2,'0');
  }).join('');
  const hslToRgb = (h,s,l) => {
    if (s===0) return [l,l,l];
    const q = l<0.5 ? l*(1+s) : l+s-l*s;
    const p = 2*l - q;
    const hue2rgb = (p,q,t)=>{
      if (t<0) t+=1;
      if (t>1) t-=1;
      if (t<1/6) return p+(q-p)*6*t;
      if (t<1/2) return q;
      if (t<2/3) return p+(q-p)*(2/3-t)*6;
      return p;
    };
    return [hue2rgb(p,q,h+1/3), hue2rgb(p,q,h), hue2rgb(p,q,h-1/3)];
  };
  const deepL = Math.max(0, l - 0.10);
  const softL = Math.min(0.95, l + 0.18);
  const [dr,dg,db] = hslToRgb(h, s*0.95, deepL);
  const [sr,sg,sb] = hslToRgb(h, Math.min(1, s*0.7), softL);
  return { deep: toHex(dr,dg,db), soft: toHex(sr,sg,sb) };
}

function App() {
  const [t, setTweak] = useTweaks(window.TWEAK_DEFAULTS);

  // apply tweaks to CSS vars
  useEffectApp(() => {
    const root = document.documentElement;
    const { deep, soft } = deriveAccent(t.accent);
    root.style.setProperty('--gold', t.accent);
    root.style.setProperty('--gold-deep', deep);
    root.style.setProperty('--gold-soft', soft);

    root.style.setProperty('--f-serif', HEADLINE_FONTS[t.headlineFont] || HEADLINE_FONTS.serif);
  }, [t.accent, t.headlineFont]);

  return (
    <React.Fragment>
      <Nav />
      <main>
        <Hero layout={t.heroLayout} />
        <About />
        <Services />
        <Funds />
        <Process />
        <Stats />
        <Testimonials />
        <FAQ />
        <Contact />
      </main>
      <Footer />
      <FloatActions />

      <TweaksPanel title="Tweaks">
        <TweakSection label="Brand" />
        <TweakColor
          label="Accent color"
          value={t.accent}
          options={ACCENT_OPTIONS}
          onChange={(v) => setTweak('accent', v)}
        />

        <TweakSection label="Typography" />
        <TweakRadio
          label="Headline font"
          value={t.headlineFont}
          options={[
            { value: 'serif',   label: 'Serif' },
            { value: 'display', label: 'Display' },
            { value: 'sans',    label: 'Sans' },
          ]}
          onChange={(v) => setTweak('headlineFont', v)}
        />

        <TweakSection label="Hero layout" />
        <TweakRadio
          label="Layout"
          value={t.heroLayout}
          options={[
            { value: 'split',    label: 'Split' },
            { value: 'centered', label: 'Centered' },
            { value: 'stacked',  label: 'Stacked' },
          ]}
          onChange={(v) => setTweak('heroLayout', v)}
        />
      </TweaksPanel>
    </React.Fragment>
  );
}

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