// Mirise LP — root composer

const { useState, useEffect } = React;

// LP background palettes — one per app theme. We use the LP theme for the page
// chrome, and the matching app THEMES.* for embedded phone screens.
const LP_THEMES = {
  dreamy: {
    name: 'Dreamy Clouds',
    desc: 'ピンク × ラベンダー雲',
    ink: '#5d3a64', inkSoft: '#8a6c8e', inkMute: '#a791a8',
    accent: '#d97a99', accentDeep: '#c25a82',
    gold: '#cba868', goldSoft: '#e7d3a0',
    card: '#fff6f3', cardAlt: '#fbeef3', chip: '#fce5ec',
    bg1: '#fff3ec', bg2: '#fde6e6', bg3: '#f7d9ea', bg4: '#e8d6f5', bg5: '#f1e1f3',
  },
  moonstone: {
    name: 'Moonstone Pearl',
    desc: '月光 × ペリウィンクル',
    ink: '#3a3a6e', inkSoft: '#6a6a96', inkMute: '#9a9ab5',
    accent: '#9a7ac5', accentDeep: '#7a5cb0',
    gold: '#c6a36b', goldSoft: '#ead9b2',
    card: '#fafaff', cardAlt: '#eef0fb', chip: '#ebe6f8',
    bg1: '#f9f4ff', bg2: '#eee6fb', bg3: '#dfe3fa', bg4: '#e8e3fa', bg5: '#f4eeff',
  },
  sakura: {
    name: 'Sakura Garden',
    desc: 'クリーム × セージ × ローズ',
    ink: '#5a4434', inkSoft: '#8b7563', inkMute: '#b5a290',
    accent: '#d18099', accentDeep: '#b56079',
    gold: '#b89868', goldSoft: '#e3d2a8',
    card: '#fffaf2', cardAlt: '#faf3e6', chip: '#f6e8de',
    bg1: '#fffaf0', bg2: '#fdf0e3', bg3: '#f6dcd0', bg4: '#f0c9d4', bg5: '#f4d8e0',
  },
  crystal: {
    name: 'Crystal Editorial',
    desc: 'アイボリー × モーヴ',
    ink: '#3d2e3a', inkSoft: '#6f5867', inkMute: '#a797a3',
    accent: '#b97a9a', accentDeep: '#9a5a7c',
    gold: '#a78962', goldSoft: '#d8c39a',
    card: '#fbf5f1', cardAlt: '#f4ebe7', chip: '#efe3e8',
    bg1: '#fbf3ef', bg2: '#f5e7e1', bg3: '#ecd8dc', bg4: '#e8d2d8', bg5: '#f0dde2',
  },
};

const applyTheme = (key) => {
  const t = LP_THEMES[key] || LP_THEMES.dreamy;
  const r = document.documentElement.style;
  r.setProperty('--ink', t.ink);
  r.setProperty('--ink-soft', t.inkSoft);
  r.setProperty('--ink-mute', t.inkMute);
  r.setProperty('--accent', t.accent);
  r.setProperty('--accent-deep', t.accentDeep);
  r.setProperty('--gold', t.gold);
  r.setProperty('--gold-soft', t.goldSoft);
  r.setProperty('--card', t.card);
  r.setProperty('--card-alt', t.cardAlt);
  r.setProperty('--chip', t.chip);
  r.setProperty('--bg-1', t.bg1);
  r.setProperty('--bg-2', t.bg2);
  r.setProperty('--bg-3', t.bg3);
  r.setProperty('--bg-4', t.bg4);
  r.setProperty('--bg-5', t.bg5);
};

const TWEAK_DEFAULTS = /*EDITMODE-BEGIN*/{
  "theme": "dreamy",
  "generation": "30s"
}/*EDITMODE-END*/;

function App() {
  const [tweaks, setTweak] = useTweaks(TWEAK_DEFAULTS);
  const [signupState, setSignupState] = useState('idle'); // idle | done

  useEffect(() => { applyTheme(tweaks.theme); }, [tweaks.theme]);

  const handleSignup = (email) => {
    // Demo: just flip to done state. In production this hits the waitlist API.
    setSignupState('done');
    window.scrollTo({ top: 0, behavior: 'smooth' });
  };

  return (
    <div>
      <div className="page">
        <Hero
          theme={tweaks.theme}
          generation={tweaks.generation}
          onSignup={handleSignup}
          signupState={signupState}
        />

        <SoftDivider/>

        <Features theme={tweaks.theme}/>

        <SoftDivider/>

        <ScreenGallery theme={tweaks.theme}/>

        <SoftDivider/>

        <Consult theme={tweaks.theme}/>

        <SoftDivider/>

        <FAQ/>

        <FinalCTA onSignup={handleSignup} signupState={signupState}/>

        <Footer/>
      </div>

      <TweaksPanel title="Tweaks">
        <TweakSection title="配色テーマ" subtitle="広告クリエイティブに合わせて切替">
          <div style={{ display: 'grid', gridTemplateColumns: '1fr 1fr', gap: 8 }}>
            {Object.entries(LP_THEMES).map(([key, t]) => (
              <button
                key={key}
                onClick={() => setTweak('theme', key)}
                style={{
                  textAlign: 'left',
                  padding: '12px 12px',
                  background: tweaks.theme === key ? '#fff' : 'rgba(255,255,255,0.5)',
                  border: tweaks.theme === key ? '1.5px solid #5d3a64' : '1px solid rgba(0,0,0,0.1)',
                  borderRadius: 12,
                  cursor: 'pointer',
                  fontFamily: 'inherit',
                }}
              >
                <div style={{
                  display: 'flex', gap: 4, marginBottom: 6,
                }}>
                  {[t.bg2, t.bg4, t.accent, t.gold].map((c, i) => (
                    <div key={i} style={{
                      width: 14, height: 14, borderRadius: '50%',
                      background: c, border: '1px solid rgba(0,0,0,0.05)',
                    }}/>
                  ))}
                </div>
                <div style={{ fontSize: 11, fontWeight: 600, color: '#3d2e3a' }}>{t.name}</div>
                <div style={{ fontSize: 9.5, color: '#6f5867', marginTop: 1 }}>{t.desc}</div>
              </button>
            ))}
          </div>
        </TweakSection>

        <TweakSection title="ターゲット世代の見せ方" subtitle="ヒーローのコピーが変わります">
          <TweakRadio
            value={tweaks.generation}
            onChange={(v) => setTweak('generation', v)}
            options={[
              { value: '20s', label: '20代' },
              { value: '30s', label: '30代' },
              { value: '40s', label: '40代' },
            ]}
          />
        </TweakSection>
      </TweaksPanel>
    </div>
  );
}

// Decorative section divider — gold star between hairlines
const SoftDivider = () => (
  <div style={{
    display: 'flex', alignItems: 'center', justifyContent: 'center',
    gap: 16, padding: '8px 28px',
    color: 'var(--gold)',
  }}>
    <div style={{
      flex: 1, height: 1,
      background: 'linear-gradient(90deg, transparent, var(--gold), transparent)',
      opacity: 0.55,
    }}/>
    <Star4 size={9} color="var(--gold)"/>
    <div style={{
      flex: 1, height: 1,
      background: 'linear-gradient(90deg, transparent, var(--gold), transparent)',
      opacity: 0.55,
    }}/>
  </div>
);

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