/* global React, ReactDOM, SiteNav, ScrollProgress, Hero, Strengths, ValuePillars,
   HighlightsSticky, MotionFX,
   Features, ReservationDemo, CaseStudies, Pricing, AboutRamps, FAQ, FinalCTA, SiteFooter,
   TaxBanner, CostComparison, Testimonial, IntegrationMarquee, ScreensGallery */

const TWEAK_DEFAULTS = /*EDITMODE-BEGIN*/{
  "accent": "green",
  "density": "airy",
  "motion": "on",
  "serif_hero": false
}/*EDITMODE-END*/;

function TweaksPanel({ visible, values, onChange }) {
  if (!visible) return null;
  return (
    <div className="tweaks-panel">
      <h4>TWEAKS <span className="dot" /></h4>
      <div className="tweak-row">
        <div className="tweak-label">Accent emphasis</div>
        <div className="tweak-swatches">
          {[
            { k: 'green', c: '#6FAF2A' },
            { k: 'yellow', c: '#F5D938' },
            { k: 'blue', c: '#9ED4E2' },
          ].map(s => (
            <div key={s.k}
              className={`tweak-swatch ${values.accent === s.k ? 'active' : ''}`}
              style={{ background: s.c }}
              onClick={() => onChange({ accent: s.k })} />
          ))}
        </div>
      </div>
      <div className="tweak-row">
        <div className="tweak-label">Density</div>
        <div className="tweak-options">
          {['airy', 'compact'].map(o => (
            <button key={o} className={values.density === o ? 'active' : ''} onClick={() => onChange({ density: o })}>{o}</button>
          ))}
        </div>
      </div>
      <div className="tweak-row">
        <div className="tweak-label">Motion</div>
        <div className="tweak-options">
          {['on', 'off'].map(o => (
            <button key={o} className={values.motion === o ? 'active' : ''} onClick={() => onChange({ motion: o })}>{o}</button>
          ))}
        </div>
      </div>
      <div className="tweak-row">
        <div className="tweak-label">Hero tagline</div>
        <div className="tweak-options">
          <button className={!values.serif_hero ? 'active' : ''} onClick={() => onChange({ serif_hero: false })}>Sans</button>
          <button className={values.serif_hero ? 'active' : ''} onClick={() => onChange({ serif_hero: true })}>Serif</button>
        </div>
      </div>
    </div>
  );
}

function App() {
  const [tweaks, setTweaks] = React.useState(TWEAK_DEFAULTS);
  const [editMode, setEditMode] = React.useState(false);

  React.useEffect(() => {
    const onMsg = (e) => {
      const d = e.data || {};
      if (d.type === '__activate_edit_mode') setEditMode(true);
      if (d.type === '__deactivate_edit_mode') setEditMode(false);
    };
    window.addEventListener('message', onMsg);
    window.parent.postMessage({ type: '__edit_mode_available' }, '*');
    return () => window.removeEventListener('message', onMsg);
  }, []);

  const update = (edits) => {
    setTweaks(t => ({ ...t, ...edits }));
    window.parent.postMessage({ type: '__edit_mode_set_keys', edits }, '*');
  };

  // Apply tweaks as DOM attributes
  React.useEffect(() => {
    document.documentElement.setAttribute('data-accent', tweaks.accent);
    document.documentElement.setAttribute('data-density', tweaks.density);
    document.documentElement.setAttribute('data-motion', tweaks.motion);
    document.documentElement.setAttribute('data-hero-style', tweaks.serif_hero ? 'serif' : 'sans');
  }, [tweaks]);

  return (
    <>
      <ScrollProgress />
      <TaxBanner />
      <SiteNav />
      <Hero />
      <Strengths />
      <ValuePillars />
      <HighlightsSticky />
      <ScreensGallery />
      <IntegrationMarquee />
      <CaseStudies />
      {/* <Testimonial /> — お客様の声は準備でき次第公開 */}
      <Pricing />
      <AboutRamps />
      <FAQ />
      <FinalCTA />
      <SiteFooter />
      <MotionFX />
      <TweaksPanel visible={editMode} values={tweaks} onChange={update} />
    </>
  );
}

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