// lab-app.jsx — composition + scroll-spy nav + tweaks
// ---------------------------------------------------------------------------

const TWEAK_DEFAULTS = /*EDITMODE-BEGIN*/{
  "primaryHue": "#CC785C",
  "heroWash": true,
  "recommendedPlan": "02"
}/*EDITMODE-END*/;

function App() {
  const [t, setTweak] = useTweaks(TWEAK_DEFAULTS);
  const [activeId, setActiveId] = React.useState('top');

  // Apply primary hue live.
  React.useEffect(() => {
    const r = document.documentElement;
    const hex = t.primaryHue || '#CC785C';
    r.style.setProperty('--cc-coral', hex);
    r.style.setProperty('--cc-coral-deep', mix(hex, '#000000', 0.18));
    r.style.setProperty('--cc-coral-soft', mix(hex, '#FFFFFF', 0.74));
  }, [t.primaryHue]);

  // Hero wash toggle.
  React.useEffect(() => {
    const id = '__lab-wash-toggle';
    let el = document.getElementById(id);
    if (!el) { el = document.createElement('style'); el.id = id; document.head.appendChild(el); }
    el.textContent = t.heroWash ? '' : '#top > div[aria-hidden]{ display:none !important; }';
  }, [t.heroWash]);

  // Scroll-spy.
  React.useEffect(() => {
    const ids = ['top', 'pain', 'why', 'plans', 'usecases', 'security', 'steps', 'faq', 'contact'];
    const els = ids.map(id => document.getElementById(id)).filter(Boolean);
    if (!els.length) return;
    const io = new IntersectionObserver((entries) => {
      entries.forEach(e => { if (e.isIntersecting) setActiveId(e.target.id); });
    }, { rootMargin: '-30% 0px -55% 0px' });
    els.forEach(el => io.observe(el));
    return () => io.disconnect();
  }, []);

  const handleNav = (id) => {
    if (id === 'top') { window.scrollTo({ top: 0, behavior: 'smooth' }); }
    else { const el = document.getElementById(id); if (el) { const y = el.getBoundingClientRect().top + window.scrollY - 64; window.scrollTo({ top: y, behavior: 'smooth' }); } }
    setActiveId(id);
  };

  return (
    <div data-screen-label="法人向け Claude 導入支援 LP">
      <Header activeId={activeId} onNav={handleNav} />
      <Hero onNav={handleNav} />
      <Pain />
      <Why />
      <Plans onNav={handleNav} recommended={t.recommendedPlan} />
      <UseCases />
      <Security />
      <Steps />
      <FAQ />
      <Contact />
      <Company />
      <Footer onNav={handleNav} />
      <TweakBoard t={t} setTweak={setTweak} />
    </div>
  );
}

function TweakBoard({ t, setTweak }) {
  const hues = ['#CC785C', '#D86A3D', '#B8604A', '#C2410C', '#1A1A1A', '#2A6FDB'];
  return (
    <TweaksPanel title="Tweaks">
      <TweakSection title="Primary hue">
        <TweakColor value={t.primaryHue} onChange={(v) => setTweak('primaryHue', v)} options={hues} />
      </TweakSection>
      <TweakSection title="おすすめプラン">
        <TweakRadio
          value={t.recommendedPlan}
          onChange={(v) => setTweak('recommendedPlan', v)}
          options={[
            { value: '01', label: '診断' },
            { value: '02', label: 'ライト' },
            { value: '03', label: '実装' },
          ]}
        />
      </TweakSection>
      <TweakSection title="Hero">
        <TweakToggle label="クリーム背景の斜めウォッシュ" value={t.heroWash} onChange={(v) => setTweak('heroWash', v)} />
      </TweakSection>
    </TweaksPanel>
  );
}

// hex mix helpers
function hexToRgb(h) { const m = h.replace('#','').match(/.{1,2}/g); if (!m || m.length < 3) return [0,0,0]; return m.slice(0,3).map(x => parseInt(x, 16)); }
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 mix(a, b, p) { const [ar,ag,ab] = hexToRgb(a); const [br,bg,bb] = hexToRgb(b); return rgbToHex(ar*(1-p)+br*p, ag*(1-p)+bg*p, ab*(1-p)+bb*p); }

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