// Root app + tweaks integration + scroll reveal
const { useEffect, useState } = React;

const TWEAK_DEFAULTS = /*EDITMODE-BEGIN*/{
  "navyColor": "#1a3a52",
  "goldColor": "#d4af37",
  "paperColor": "#fbfaf7",
  "headingSize": 68,
  "showScrollHint": true
}/*EDITMODE-END*/;

const App = () => {
  const [t, setTweak] = useTweaks(TWEAK_DEFAULTS);

  // Apply tweaks live to CSS custom props
  useEffect(() => {
    const r = document.documentElement.style;
    r.setProperty('--navy', t.navyColor);
    r.setProperty('--gold', t.goldColor);
    r.setProperty('--paper', t.paperColor);

    // Derive dependent tokens
    const navy = t.navyColor;
    // simple darker version by mixing with black (approximate)
    r.setProperty('--navy-deep', darken(navy, 0.4));
    r.setProperty('--navy-soft', lighten(navy, 0.15));
    r.setProperty('--gold-soft', darken(t.goldColor, 0.15));
    r.setProperty('--gold-light', lighten(t.goldColor, 0.2));
  }, [t.navyColor, t.goldColor, t.paperColor]);

  useEffect(() => {
    document.documentElement.style.setProperty('--hero-title-size', t.headingSize + 'px');
    // apply via style tag to override
    let el = document.getElementById('dyn-heading');
    if (!el) {
      el = document.createElement('style');
      el.id = 'dyn-heading';
      document.head.appendChild(el);
    }
    el.textContent = `.hero-title { font-size: ${t.headingSize}px; } @media (max-width: 1000px) { .hero-title { font-size: ${Math.max(28, t.headingSize * 0.65)}px; } }`;
  }, [t.headingSize]);

  useEffect(() => {
    document.body.classList.toggle('no-scroll-hint', !t.showScrollHint);
  }, [t.showScrollHint]);

  // Scroll reveal
  useEffect(() => {
    const io = new IntersectionObserver((entries) => {
      entries.forEach(e => {
        if (e.isIntersecting) {
          e.target.classList.add('is-in');
          io.unobserve(e.target);
        }
      });
    }, { threshold: 0.12, rootMargin: '0px 0px -60px 0px' });
    document.querySelectorAll('.reveal').forEach(el => io.observe(el));
    return () => io.disconnect();
  }, []);

  return (
    <>
      <Nav/>
      <Hero/>
      <CaseStudy/>
      <Trust/>
      <Why/>
      <Structure/>
      <Tax/>
      <Family/>
      <KTrust/>
      <Insurance/>
      <Report/>
      <AnnuityPlus/>
      <Finale/>

      {/* ⚠️ Tweaks 패널 · 교수님 명령으로 숨김 처리 (2026-08-17)
          색상 픽스 완료 · 강의장 실수 방지
          다시 활성화하려면 아래 주석만 해제하면 됩니다.
      <TweaksPanel title="Tweaks">
        <TweakSection label="컬러">
          <TweakColor
            label="네이비 (주 색상)"
            value={t.navyColor}
            onChange={v => setTweak('navyColor', v)}
            options={['#1a3a52', '#0f2637', '#2c3e50', '#1e2a3a', '#2b3a55']}
          />
          <TweakColor
            label="골드 (강조 색상)"
            value={t.goldColor}
            onChange={v => setTweak('goldColor', v)}
            options={['#d4af37', '#c9a227', '#b8860b', '#a89058', '#c19a4b']}
          />
          <TweakColor
            label="배경 (페이퍼)"
            value={t.paperColor}
            onChange={v => setTweak('paperColor', v)}
            options={['#fbfaf7', '#ffffff', '#f8f5ee', '#f2ede2', '#faf7f0']}
          />
        </TweakSection>
        <TweakSection label="타이포그래피">
          <TweakSlider
            label="히어로 제목 크기"
            value={t.headingSize}
            min={44}
            max={84}
            step={1}
            onChange={v => setTweak('headingSize', v)}
            unit="px"
          />
        </TweakSection>
        <TweakSection label="옵션">
          <TweakToggle
            label="스크롤 힌트 표시"
            value={t.showScrollHint}
            onChange={v => setTweak('showScrollHint', v)}
          />
        </TweakSection>
        <TweakSuggestionBar suggestions={[
          '전체 톤을 좀 더 따뜻하게 만들어줘',
          '골드를 더 은은하게 낮춰줘',
          '히어로 오른쪽 카드에 이니셜 로고 추가해줘',
          '진단 진입 플로우 페이지도 만들어줘'
        ]}/>
      </TweaksPanel>
      */}
    </>
  );
};

// Color helpers
function hexToRgb(hex) {
  const h = hex.replace('#', '');
  const bigint = parseInt(h.length === 3 ? h.split('').map(c => c+c).join('') : h, 16);
  return { r: (bigint >> 16) & 255, g: (bigint >> 8) & 255, b: bigint & 255 };
}
function rgbToHex(r, g, b) {
  return '#' + [r, g, b].map(v => Math.max(0, Math.min(255, Math.round(v))).toString(16).padStart(2, '0')).join('');
}
function darken(hex, amount) {
  const { r, g, b } = hexToRgb(hex);
  return rgbToHex(r * (1 - amount), g * (1 - amount), b * (1 - amount));
}
function lighten(hex, amount) {
  const { r, g, b } = hexToRgb(hex);
  return rgbToHex(r + (255 - r) * amount, g + (255 - g) * amount, b + (255 - b) * amount);
}

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