// app.jsx — composes everything
const { useState, useEffect } = React;

const PALETTES = {
  skyideaDefault: { name: 'Sky / 提案準拠', sky: '#87CEEB', deep: '#4A9BC4', mid: '#5B7FE0', sec: '#1F4E96', bcp: '#5DADE2', night: '#191970' },
  cooler:         { name: 'Cool Navy',     sky: '#A8DADC', deep: '#457B9D', mid: '#5B7FE0', sec: '#1D3557', bcp: '#6FB1FC', night: '#0F1B3D' },
  monoNavy:       { name: 'Mono Navy',     sky: '#B8C5DB', deep: '#3D5A8A', mid: '#4F6FA8', sec: '#1E2F5A', bcp: '#7B96C2', night: '#0E1849' }
};

function App() {
  const [modalOpen, setModalOpen] = useState(false);
  const [initialTheme, setInitialTheme] = useState('');

  const openModal = (theme) => {
    setInitialTheme(typeof theme === 'string' ? theme : '');
    setModalOpen(true);
  };

  // Tweaks
  const tweakDefaults = /*EDITMODE-BEGIN*/{
    "palette": "skyideaDefault",
    "showPhilosophy": true
  }/*EDITMODE-END*/;
  const [t, setTweak] = window.useTweaks(tweakDefaults);

  // Apply palette
  useEffect(() => {
    const p = PALETTES[t.palette] || PALETTES.skyideaDefault;
    const root = document.documentElement;
    root.style.setProperty('--sky-blue', p.sky);
    root.style.setProperty('--sky-deep', p.deep);
    root.style.setProperty('--mid-blue', p.mid);
    root.style.setProperty('--deep-blue', p.sec);
    root.style.setProperty('--light-sky', p.bcp);
    root.style.setProperty('--midnight', p.night);
  }, [t.palette]);

  // Reveal on scroll
  useEffect(() => {
    const els = document.querySelectorAll('.reveal');
    const io = new IntersectionObserver((entries) => {
      entries.forEach(e => {
        if (e.isIntersecting) {
          e.target.classList.add('is-shown');
          io.unobserve(e.target);
        }
      });
    }, { threshold: 0.08 });
    els.forEach(el => io.observe(el));
    return () => io.disconnect();
  }, []);

  // Palette options for TweakColor — array of palette arrays
  const paletteOptions = Object.values(PALETTES).map(p => [p.sky, p.deep, p.night]);
  const paletteKeys = Object.keys(PALETTES);
  const currentPaletteArr = (() => {
    const p = PALETTES[t.palette] || PALETTES.skyideaDefault;
    return [p.sky, p.deep, p.night];
  })();

  return (
    <React.Fragment>
      <window.Header onContactClick={() => openModal()} />
      <main>
        <window.Hero onContactClick={() => openModal()} />
        {t.showPhilosophy && (
          <div className="reveal"><window.PhilosophySection /></div>
        )}
        <div className="reveal"><window.Themes onContactClick={openModal} /></div>
        <div className="reveal"><window.StructureSection /></div>
        <div className="reveal"><window.BrandBand /></div>
        <div className="reveal"><window.NoteFeed /></div>
        <div className="reveal"><window.XFollowStrip /></div>
        <div className="reveal"><window.CompanySection /></div>
        <div className="reveal"><window.SecurityPolicySection /></div>
        {window.CONTACT_ENABLED && (
          <div className="reveal"><window.ContactCTA onContactClick={() => openModal()} /></div>
        )}
      </main>
      <window.Footer />
      {window.CONTACT_ENABLED && (
        <window.ConsultModal
          isOpen={modalOpen}
          onClose={() => setModalOpen(false)}
          initialTheme={initialTheme}
        />
      )}

      <window.TweaksPanel title="Tweaks">
        <window.TweakSection label="Palette">
          <window.TweakColor
            label="Color system"
            value={currentPaletteArr}
            options={paletteOptions}
            onChange={(arr) => {
              const idx = paletteOptions.findIndex(p => JSON.stringify(p) === JSON.stringify(arr));
              if (idx >= 0) setTweak('palette', paletteKeys[idx]);
            }}
          />
        </window.TweakSection>
        <window.TweakSection label="Hero">
          <window.TweakToggle
            label="PHILOSOPHYセクション表示"
            value={t.showPhilosophy}
            onChange={(v) => setTweak('showPhilosophy', v)}
          />
        </window.TweakSection>
      </window.TweaksPanel>
    </React.Fragment>
  );
}

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