// Mirise LP (PC) — root composer

const { useState: useStatePC, useEffect: useEffectPC } = React;

const LP_THEMES_PC = {
  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 applyThemePC = (key) => {
  const t = LP_THEMES_PC[key] || LP_THEMES_PC.dreamy;
  const r = document.documentElement.style;
  Object.entries({
    '--ink': t.ink, '--ink-soft': t.inkSoft, '--ink-mute': t.inkMute,
    '--accent': t.accent, '--accent-deep': t.accentDeep,
    '--gold': t.gold, '--gold-soft': t.goldSoft,
    '--card': t.card, '--card-alt': t.cardAlt, '--chip': t.chip,
    '--bg-1': t.bg1, '--bg-2': t.bg2, '--bg-3': t.bg3,
    '--bg-4': t.bg4, '--bg-5': t.bg5,
  }).forEach(([k, v]) => r.setProperty(k, v));
};

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

// ── Sticky page header (PC only)
const HeaderPC = ({ onSignupClick }) => {
  const [scrolled, setScrolled] = useStatePC(false);
  useEffectPC(() => {
    const onScroll = () => setScrolled(window.scrollY > 40);
    window.addEventListener('scroll', onScroll);
    return () => window.removeEventListener('scroll', onScroll);
  }, []);

  return (
    <header style={{
      position: 'sticky', top: 0, zIndex: 50,
      background: scrolled ? 'rgba(255, 245, 238, 0.85)' : 'transparent',
      borderBottom: scrolled ? '1px solid rgba(203, 168, 104, 0.18)' : '1px solid transparent',
      backdropFilter: scrolled ? 'blur(14px)' : 'none',
      WebkitBackdropFilter: scrolled ? 'blur(14px)' : 'none',
      transition: 'all 0.3s ease',
    }}>
      <div className="container" style={{
        display: 'flex', alignItems: 'center', justifyContent: 'space-between',
        padding: '14px 64px',
      }}>
        <div style={{ display: 'flex', alignItems: 'center', gap: 12 }}>
          <img src="assets/mirise-logo.png" alt="Mirise" style={{
            width: 38, height: 38, borderRadius: '50%',
          }}/>
          <div>
            <div style={{
              fontFamily: 'var(--latin)', fontStyle: 'italic',
              fontSize: 20, color: 'var(--ink)',
              letterSpacing: '0.18em', lineHeight: 1,
            }}>Mirise</div>
            <div style={{
              fontFamily: 'var(--title-font)', fontSize: 9,
              color: 'var(--ink-mute)', letterSpacing: '0.4em',
              marginTop: 2, paddingLeft: '0.4em',
            }}>ミライズ</div>
          </div>
        </div>

        <nav style={{
          display: 'flex', gap: 32, alignItems: 'center',
          fontFamily: 'var(--title-font)', fontSize: 13,
          letterSpacing: '0.14em',
        }}>
          <a href="#capabilities" style={navLink}>できること</a>
          <a href="#steps" style={navLink}>使い方</a>
          <a href="#gallery" style={navLink}>画面紹介</a>
          <a href="#consult" style={navLink}>占い師相談</a>
          <a href="#faq" style={navLink}>FAQ</a>
        </nav>

        <button onClick={onSignupClick} style={{
          padding: '10px 20px',
          background: 'linear-gradient(180deg, var(--accent), var(--accent-deep))',
          color: '#fff', border: 'none', borderRadius: 999,
          fontFamily: 'var(--title-font)', fontSize: 12,
          letterSpacing: '0.16em', cursor: 'pointer',
          boxShadow: '0 8px 18px -8px rgba(194, 90, 130, 0.5)',
        }}>
          先行登録 →
        </button>
      </div>
    </header>
  );
};

const navLink = {
  color: 'var(--ink)',
  textDecoration: 'none',
  fontFamily: 'var(--title-font)',
  letterSpacing: '0.14em',
};

function AppPC() {
  const [tweaks, setTweak] = useTweaks(PC_TWEAK_DEFAULTS);
  const [signupState, setSignupState] = useStatePC('idle');

  useEffectPC(() => { applyThemePC(tweaks.theme); }, [tweaks.theme]);

  const handleSignup = () => {
    setSignupState('done');
    window.scrollTo({ top: 0, behavior: 'smooth' });
  };

  const scrollToCTA = () => {
    document.getElementById('final-cta')?.scrollIntoView({ behavior: 'smooth' });
  };

  return (
    <div>
      <div className="page">
        <HeaderPC onSignupClick={scrollToCTA}/>

        <HeroPC
          theme={tweaks.theme}
          generation={tweaks.generation}
          onSignup={handleSignup}
          signupState={signupState}
        />

        <SoftDividerPC/>

        <div id="capabilities"><CapabilitiesPC/></div>

        <SoftDividerPC/>

        <div id="steps"><StepsPC theme={tweaks.theme}/></div>

        <SoftDividerPC/>

        <div id="gallery"><ScreenGalleryPC theme={tweaks.theme}/></div>

        <SoftDividerPC/>

        <div id="consult"><ConsultPC theme={tweaks.theme}/></div>

        <SoftDividerPC/>

        <div id="faq"><FAQPC/></div>

        <div id="final-cta">
          <FinalCTAPC theme={tweaks.theme} onSignup={handleSignup} signupState={signupState}/>
        </div>

        <FooterPC/>
      </div>

      <TweaksPanel title="Tweaks">
        <TweakSection title="配色テーマ" subtitle="広告クリエイティブに合わせて切替">
          <div style={{ display: 'grid', gridTemplateColumns: '1fr 1fr', gap: 8 }}>
            {Object.entries(LP_THEMES_PC).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>
  );
}

const SoftDividerPC = () => (
  <div className="container" style={{
    display: 'flex', alignItems: 'center', justifyContent: 'center',
    gap: 18, padding: '8px 64px',
    color: 'var(--gold)',
  }}>
    <div style={{
      flex: 1, height: 1,
      background: 'linear-gradient(90deg, transparent, var(--gold), transparent)',
      opacity: 0.45,
    }}/>
    <Star4 size={10} color="var(--gold)"/>
    <div style={{
      flex: 1, height: 1,
      background: 'linear-gradient(90deg, transparent, var(--gold), transparent)',
      opacity: 0.45,
    }}/>
  </div>
);

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