// kaya-lp-consolidated.jsx — KAYA Landing Page (Japanese) — v0.3

// ── Logo palette + mark ────────────────────────────────────────────
const KF = {
  cream: '#F8F5F0',
  goldHi: '#F2D589',
  gold: '#C9A96E',
  goldDk: '#A98A52',
  goldDp: '#8B6A28',
  rose: '#C4858A',
  navy: '#0D0B1E',
  navyHi: '#1A1438',
  ink: '#3D3548',
};

const KAYA_PETAL = 'M 50,5 Q 62,10 60,28 Q 58,47 50,50 Q 42,47 40,28 Q 38,10 50,5 Z';

let _kayaMarkUid = 0;
function MarkKaya({
  size = 100,
  variant = 'gold',
  withGlow = false,
  detail = 'auto',
}) {
  const uid = React.useMemo(() => `kf${++_kayaMarkUid}`, []);
  const showDetail = detail === 'auto' ? size >= 60 : detail;

  let petalFill, centerFill, centerHi;
  if (variant === 'gold') {
    petalFill = `url(#${uid}-pet)`;
    centerFill = `url(#${uid}-ctr)`;
    centerHi = '#FFF6E0';
  } else if (variant === 'flat-gold') {
    petalFill = KF.gold; centerFill = KF.gold; centerHi = null;
  } else if (variant === 'cream') {
    petalFill = KF.cream; centerFill = KF.cream; centerHi = null;
  } else if (variant === 'navy') {
    petalFill = KF.navy; centerFill = KF.navy; centerHi = null;
  } else {
    petalFill = KF.ink; centerFill = KF.ink; centerHi = null;
  }

  return (
    <svg viewBox="0 0 100 100" width={size} height={size}
      aria-hidden="true" focusable="false"
      style={{ display: 'block', overflow: 'visible' }}>
      <defs>
        <linearGradient id={`${uid}-pet`} x1="0.5" y1="0" x2="0.5" y2="1">
          <stop offset="0%"   stopColor={KF.goldHi}/>
          <stop offset="50%"  stopColor={KF.gold}/>
          <stop offset="100%" stopColor={KF.goldDk}/>
        </linearGradient>
        <radialGradient id={`${uid}-ctr`}>
          <stop offset="0%"   stopColor="#FFF6E0"/>
          <stop offset="55%"  stopColor={KF.goldHi}/>
          <stop offset="100%" stopColor={KF.goldDk}/>
        </radialGradient>
        <radialGradient id={`${uid}-glow`}>
          <stop offset="0%"   stopColor={KF.gold} stopOpacity="0.32"/>
          <stop offset="55%"  stopColor={KF.gold} stopOpacity="0.08"/>
          <stop offset="100%" stopColor={KF.gold} stopOpacity="0"/>
        </radialGradient>
      </defs>
      {withGlow && <circle cx="50" cy="50" r="48" fill={`url(#${uid}-glow)`}/>}
      {[0, 60, 120, 180, 240, 300].map(a => (
        <g key={a} transform={`rotate(${a} 50 50)`}>
          <path d={KAYA_PETAL} fill={petalFill}/>
          {showDetail && variant === 'gold' && (
            <path d="M 50,11 Q 53,15 53,24"
              stroke="#FFF6E0" strokeOpacity="0.55"
              strokeWidth="1.3" fill="none" strokeLinecap="round"/>
          )}
        </g>
      ))}
      <circle cx="50" cy="50" r="9.5" fill={centerFill}/>
      {centerHi && showDetail && (
        <circle cx="50" cy="50" r="2.8" fill={centerHi} opacity="0.92"/>
      )}
    </svg>
  );
}

function PhoneFrame({ children, width = 280, accent = false }) {
  const height = width * 2.165;
  const bezel = width * 0.025;
  return (
    <div style={{
      width, height, borderRadius: width * 0.13,
      background: '#0D0B1E',
      boxShadow: `
        0 30px 80px rgba(13,11,30,0.22),
        0 8px 24px rgba(13,11,30,0.10),
        0 0 0 0.5px rgba(13,11,30,0.25)`,
      overflow: 'hidden', position: 'relative',
      padding: bezel, boxSizing: 'border-box',
    }}>
      <div style={{
        width: '100%', height: '100%',
        borderRadius: width * 0.10,
        background: '#F8F5F0',
        position: 'relative', overflow: 'hidden',
        fontFamily: '"Noto Sans JP", "Noto Sans TC", sans-serif',
      }}>
        <div style={{
          position: 'absolute', top: width * 0.035, left: '50%', transform: 'translateX(-50%)',
          width: width * 0.27, height: width * 0.065,
          borderRadius: width * 0.04, background: '#0D0B1E', zIndex: 5,
        }}/>
        <div style={{
          width: '100%', height: '100%',
          paddingTop: width * 0.13, boxSizing: 'border-box',
        }}>
          {children}
        </div>
        {accent && (
          <div style={{
            position: 'absolute', top: -40, right: -30, width: 160, height: 160,
            borderRadius: '50%',
            background: 'radial-gradient(circle, rgba(201,169,110,0.22), transparent 65%)',
            pointerEvents: 'none',
          }}/>
        )}
      </div>
    </div>
  );
}

function PeachBlossomMini({ size = 36 }) {
  const gid = React.useId();
  return (
    <svg width={size} height={size} viewBox="0 0 100 100" aria-hidden="true" focusable="false">
      <defs>
        <radialGradient id={`${gid}-pet`}>
          <stop offset="0%" stopColor="#FFE6E1"/>
          <stop offset="60%" stopColor="#E5A8AC"/>
          <stop offset="100%" stopColor="#C4858A"/>
        </radialGradient>
      </defs>
      {[0, 72, 144, 216, 288].map(a => (
        <g key={a} transform={`rotate(${a} 50 50)`}>
          <ellipse cx="50" cy="28" rx="11" ry="16" fill={`url(#${gid}-pet)`}/>
        </g>
      ))}
      <circle cx="50" cy="50" r="8" fill="#C9A96E"/>
      <circle cx="50" cy="50" r="2.5" fill="#FFF6E0"/>
    </svg>
  );
}

function MockHome({ width = 280, accent = false }) {
  return (
    <PhoneFrame width={width} accent={accent}>
      <div style={{ padding: '10px 14px' }}>
        <div style={{
          display: 'flex', justifyContent: 'space-between', alignItems: 'center', marginTop: 4,
        }}>
          <div>
            <div style={{
              fontFamily: '"Noto Serif JP", serif',
              fontSize: 14, fontWeight: 600, color: '#3D3548', letterSpacing: 0.5,
            }}>5月23日</div>
            <div style={{ fontSize: 7.5, color: '#7A6F85', letterSpacing: 1, marginTop: 2 }}>
              土曜 · 上弦の月
            </div>
          </div>
          <div style={{
            display: 'inline-flex', alignItems: 'center', gap: 4,
            padding: '4px 8px 4px 6px', borderRadius: 999,
            background: 'linear-gradient(135deg, rgba(201,169,110,0.16), rgba(123,111,160,0.10))',
            boxShadow: '0 0 0 0.5px rgba(201,169,110,0.45)',
          }}>
            <span style={{ fontSize: 9, color: '#A98A52', fontWeight: 600, letterSpacing: 0.8 }}>
              23日連続
            </span>
          </div>
        </div>

        <div style={{
          marginTop: 10, padding: '12px 12px 10px', borderRadius: 14,
          background: 'linear-gradient(180deg, #FEFCF8 0%, #FBF6EE 100%)',
          boxShadow: '0 0 0 0.5px rgba(201,169,110,0.30), 0 6px 14px rgba(123,111,160,0.06)',
          position: 'relative', overflow: 'hidden',
        }}>
          <div style={{
            position: 'absolute', top: -20, right: -16, width: 70, height: 70, borderRadius: '50%',
            background: 'radial-gradient(circle, rgba(201,169,110,0.22), transparent 65%)',
          }}/>
          <div style={{
            display: 'flex', alignItems: 'flex-start', justifyContent: 'space-between', position: 'relative',
          }}>
            <div>
              <div style={{ fontSize: 7, color: '#A98A52', letterSpacing: 1.5, fontWeight: 700 }}>
                今日の桃花コンディション
              </div>
              <div style={{
                fontFamily: '"Noto Serif JP", serif',
                fontSize: 15, fontWeight: 600, color: '#3D3548', marginTop: 2, letterSpacing: 0.5,
              }}>桃花が満開</div>
            </div>
            <PeachBlossomMini size={38}/>
          </div>
          <div style={{
            marginTop: 8, fontFamily: '"Noto Serif JP", serif',
            fontSize: 10.5, color: '#3D3548', lineHeight: 1.5, letterSpacing: 0.3,
          }}>
            <span style={{ fontSize: 7, color: '#C4858A', letterSpacing: 1, fontWeight: 700, marginRight: 4 }}>今日の所作</span>
            鏡の前で3回ほほえむ
          </div>
          <div style={{ marginTop: 8, display: 'flex', alignItems: 'center', gap: 6 }}>
            <div style={{
              flex: 1, height: 4, borderRadius: 2,
              background: 'rgba(123,111,160,0.10)', overflow: 'hidden',
            }}>
              <div style={{
                height: '100%', width: '78%', borderRadius: 2,
                background: 'linear-gradient(90deg, #C9A96E 0%, #E8C988 50%, #C4858A 100%)',
                boxShadow: '0 0 6px rgba(201,169,110,0.5)',
              }}/>
            </div>
            <div style={{
              fontFamily: '"Noto Serif JP", serif',
              fontSize: 12, fontWeight: 700, color: '#C9A96E', letterSpacing: 0.5,
            }}>78</div>
          </div>
        </div>

        <div style={{
          marginTop: 10, padding: '10px 12px', borderRadius: 12,
          background: 'linear-gradient(180deg, rgba(255,253,246,0.7), rgba(251,246,236,0.55))',
          boxShadow: '0 0 0 0.5px rgba(201,169,110,0.45), 0 6px 16px rgba(201,169,110,0.10)',
          display: 'flex', alignItems: 'center', gap: 10,
        }}>
          <MarkKaya size={50} variant="gold" withGlow={true}/>
          <div style={{ flex: 1 }}>
            <div style={{ fontSize: 7, color: '#A98A52', letterSpacing: 1.5, fontWeight: 700 }}>
              私の命盤
            </div>
            <div style={{
              fontFamily: '"Noto Serif JP", serif',
              fontSize: 10.5, color: '#3D3548', marginTop: 3,
              display: 'flex', alignItems: 'baseline', gap: 1,
            }}>
              <span style={{ fontSize: 8 }}>点灯した星</span>
              <span style={{ fontSize: 17, color: '#C9A96E', fontWeight: 700, marginLeft: 3 }}>23</span>
              <span style={{ fontSize: 9, color: '#A98A52', fontWeight: 600 }}> / 100</span>
            </div>
            <div style={{
              marginTop: 5, height: 3, borderRadius: 2,
              background: 'rgba(123,111,160,0.10)', overflow: 'hidden',
            }}>
              <div style={{
                height: '100%', width: '23%', borderRadius: 2,
                background: 'linear-gradient(90deg, #C9A96E, #E8C988, #C4858A)',
                boxShadow: '0 0 6px rgba(201,169,110,0.5)',
              }}/>
            </div>
          </div>
        </div>

        <div style={{ marginTop: 10 }}>
          <div style={{
            fontSize: 7, color: '#7B6FA0', letterSpacing: 1.5, fontWeight: 700,
            marginBottom: 6, paddingLeft: 2,
          }}>今日の気持ち</div>
          <div style={{ display: 'flex', flexWrap: 'wrap', gap: 4 }}>
            {[
              { e: '💗', l: 'ときめき' },
              { e: '😊', l: 'ほほえみ' },
              { e: '✨', l: '期待' },
              { e: '🌿', l: 'おだやか' },
            ].map((t, i) => (
              <div key={i} style={{
                display: 'inline-flex', alignItems: 'center', gap: 3,
                padding: '4px 8px 4px 6px', borderRadius: 999,
                background: i === 1
                  ? 'linear-gradient(135deg, rgba(201,169,110,0.18), rgba(196,133,138,0.18))'
                  : 'rgba(255,255,255,0.7)',
                boxShadow: i === 1
                  ? '0 0 0 0.5px rgba(201,169,110,0.7)'
                  : '0 0 0 0.5px rgba(123,111,160,0.15)',
                fontSize: 8, color: i === 1 ? '#A98A52' : '#3D3548',
                fontWeight: i === 1 ? 700 : 500,
              }}>
                <span style={{ fontSize: 9 }}>{t.e}</span>{t.l}
              </div>
            ))}
          </div>
        </div>
      </div>
    </PhoneFrame>
  );
}

function MockSelf({ width = 280 }) {
  return (
    <PhoneFrame width={width}>
      <div style={{ padding: '14px 16px' }}>
        <div style={{ display: 'flex', justifyContent: 'space-between', alignItems: 'flex-end', marginBottom: 14 }}>
          <div>
            <div style={{ fontSize: 7, color: '#A98A52', letterSpacing: 2, fontWeight: 700 }}>SELF · 自</div>
            <div style={{ fontFamily: '"Noto Serif JP", serif', fontSize: 16, color: '#3D3548', fontWeight: 600, letterSpacing: 1, marginTop: 2 }}>自分を知る</div>
          </div>
        </div>

        <div style={{ display: 'flex', justifyContent: 'center', margin: '8px 0 14px' }}>
          <div style={{
            width: width * 0.66, height: width * 0.66, borderRadius: '50%',
            background: 'radial-gradient(circle at 50% 35%, #221A3A 0%, #14102A 55%, #0D0B1E 100%)',
            boxShadow: `
              0 0 0 1px #C9A96E,
              0 0 0 3px rgba(201,169,110,0.22),
              0 0 20px rgba(201,169,110,0.30),
              0 12px 30px rgba(13,11,30,0.40)`,
            position: 'relative',
          }}>
            <MarkKaya size={width * 0.5} variant="gold" withGlow={true} detail={false}/>
            <div style={{ position: 'absolute', inset: 0, display: 'flex', alignItems: 'center', justifyContent: 'center' }}>
              <MarkKaya size={width * 0.48} variant="gold" withGlow={true}/>
            </div>
          </div>
        </div>

        <div style={{ textAlign: 'center', fontSize: 8, color: '#7A6F85', letterSpacing: 2, marginBottom: 12 }}>
          点灯した星 <span style={{ fontFamily: '"Noto Serif JP", serif', fontSize: 12, color: '#C9A96E', fontWeight: 700 }}>23</span>
          <span style={{ color: '#A98A52', fontSize: 9 }}> / 100</span>
        </div>

        <div style={{ display: 'flex', justifyContent: 'center', gap: 4, marginBottom: 12 }}>
          {[
            { e: '🌙', l: '直感力', bg: 'rgba(123,111,160,0.13)', c: '#5F558A' },
            { e: '🔥', l: '情熱',   bg: 'rgba(196,133,138,0.15)', c: '#A14F58' },
            { e: '🌿', l: '安定感', bg: 'rgba(201,169,110,0.15)', c: '#A98A52' },
          ].map((t, i) => (
            <div key={i} style={{
              display: 'inline-flex', alignItems: 'center', gap: 3,
              padding: '4px 8px 4px 6px', borderRadius: 999,
              background: t.bg, color: t.c, fontSize: 8, fontWeight: 600, letterSpacing: 0.5,
            }}>
              <span style={{ fontSize: 9 }}>{t.e}</span>{t.l}
            </div>
          ))}
        </div>

        <div style={{
          textAlign: 'center', padding: '0 8px',
          fontFamily: '"Noto Serif JP", serif',
          fontSize: 10, lineHeight: 1.7, letterSpacing: 1, color: '#3D3548',
        }}>
          あなたは<span style={{ color: '#A98A52', fontWeight: 700 }}>深く感じとる</span>力を持っている。<br/>
          深まる縁ほど、あなたを<span style={{ color: '#A98A52', fontWeight: 700 }}>輝かせる</span>。
        </div>
      </div>
    </PhoneFrame>
  );
}

function MockConnect({ width = 280 }) {
  return (
    <PhoneFrame width={width}>
      <div style={{ padding: '14px 14px' }}>
        <div style={{ marginBottom: 12 }}>
          <div style={{ fontSize: 7, color: '#A98A52', letterSpacing: 2, fontWeight: 700 }}>CONNECT · 縁</div>
          <div style={{ fontFamily: '"Noto Serif JP", serif', fontSize: 16, color: '#3D3548', fontWeight: 600, letterSpacing: 1, marginTop: 2 }}>縁を知る</div>
        </div>

        <div style={{
          display: 'flex', alignItems: 'center', gap: 10,
          background: '#fff', borderRadius: 14, padding: '10px 12px',
          boxShadow: '0 0 0 0.5px rgba(201,169,110,0.28), 0 6px 14px rgba(123,111,160,0.06)',
          marginBottom: 12,
        }}>
          <div style={{
            width: 44, height: 44, borderRadius: '50%',
            background: 'radial-gradient(circle at 35% 35%, #FFE6E1 0%, #FCD5DB 50%, #E8B5BC 85%)',
            display: 'flex', alignItems: 'center', justifyContent: 'center',
            fontSize: 24, flexShrink: 0,
          }}>🌸</div>
          <div style={{ flex: 1 }}>
            <div style={{ fontSize: 7, color: '#A98A52', letterSpacing: 1.5, fontWeight: 700 }}>今日の縁</div>
            <div style={{ fontFamily: '"Noto Serif JP", serif', fontSize: 12, color: '#3D3548', fontWeight: 600, marginTop: 1 }}>🌸 新しい出会い</div>
            <div style={{ fontSize: 8.5, color: '#5F5570', marginTop: 3, lineHeight: 1.45 }}>
              今日は自分から話しかけると、縁がそっとつながる。
            </div>
          </div>
        </div>

        <div style={{
          position: 'relative', overflow: 'hidden',
          background: 'linear-gradient(155deg, #FBE4E7 0%, #F2C8CE 45%, #E5A8B0 100%)',
          borderRadius: 16, padding: '14px 12px',
          boxShadow: '0 0 0 0.5px rgba(196,133,138,0.4), 0 8px 20px rgba(196,133,138,0.18)',
        }}>
          <div style={{ position: 'absolute', top: -20, right: -10, width: 80, height: 80, borderRadius: '50%',
            background: 'radial-gradient(circle, rgba(255,228,180,0.5), transparent 65%)' }}/>
          <div style={{ fontSize: 7, color: '#8E3D49', letterSpacing: 2, fontWeight: 700, marginBottom: 4 }}>
            ◆ QR · 縁の相性
          </div>
          <div style={{ fontFamily: '"Noto Serif JP", serif', fontSize: 14, color: '#3D1F2A', fontWeight: 600, letterSpacing: 1, lineHeight: 1.2, marginBottom: 10 }}>
            友達と<br/>縁の相性を確かめる
          </div>
          <div style={{
            padding: '7px 8px', borderRadius: 10,
            background: 'linear-gradient(135deg, #D9BC83, #C9A96E, #B8945A)',
            color: '#fff', fontSize: 9, fontWeight: 600, letterSpacing: 1.5,
            fontFamily: '"Noto Serif JP", serif',
            textAlign: 'center',
            boxShadow: '0 4px 10px rgba(184,148,90,0.4)',
            marginBottom: 5,
          }}>私のQRを表示</div>
          <div style={{
            padding: '6px 8px', borderRadius: 10,
            background: 'rgba(255,255,255,0.7)',
            color: '#A14F58', fontSize: 9, fontWeight: 600, letterSpacing: 1,
            fontFamily: '"Noto Serif JP", serif',
            textAlign: 'center',
            boxShadow: '0 0 0 1.2px rgba(196,133,138,0.7)',
          }}>相手のQRを読み取る</div>
        </div>
      </div>
    </PhoneFrame>
  );
}

function MockFlow({ width = 280 }) {
  const gid = React.useId();
  return (
    <PhoneFrame width={width}>
      <div style={{ padding: '14px 14px' }}>
        <div style={{ marginBottom: 12 }}>
          <div style={{ fontSize: 7, color: '#A98A52', letterSpacing: 2, fontWeight: 700 }}>FLOW · 流</div>
          <div style={{ fontFamily: '"Noto Serif JP", serif', fontSize: 16, color: '#3D3548', fontWeight: 600, letterSpacing: 1, marginTop: 2 }}>今月 · 今年</div>
        </div>

        <div style={{
          padding: '12px 12px', borderRadius: 14,
          background: 'linear-gradient(180deg, #FEFCF8, #FBF5E8)',
          boxShadow: '0 0 0 0.5px rgba(201,169,110,0.40), 0 8px 18px rgba(201,169,110,0.14)',
          marginBottom: 10,
        }}>
          <div style={{ display: 'flex', justifyContent: 'space-between', alignItems: 'baseline', marginBottom: 8 }}>
            <div>
              <div style={{ fontSize: 7, color: '#A98A52', letterSpacing: 1.5, fontWeight: 700 }}>2026 · 5月</div>
              <div style={{ fontFamily: '"Noto Serif JP", serif', fontSize: 13, color: '#3D3548', fontWeight: 600, marginTop: 2 }}>今月の縁の流れ</div>
            </div>
            <div style={{
              padding: '3px 7px 3px 6px', borderRadius: 999,
              background: 'linear-gradient(135deg, #FBE8B8, #C9A96E)',
              color: '#fff', fontSize: 8, fontWeight: 700, letterSpacing: 0.5,
            }}>↑ 上昇中</div>
          </div>
          <div style={{ display: 'flex', justifyContent: 'space-between', marginBottom: 4 }}>
            <span style={{ fontSize: 7, color: '#7A6F85', letterSpacing: 1.5, fontWeight: 600 }}>縁の強さ</span>
            <span style={{ fontFamily: '"Noto Serif JP", serif', fontSize: 14, color: '#C9A96E', fontWeight: 700 }}>83<span style={{ fontSize: 8 }}>%</span></span>
          </div>
          <div style={{ height: 5, borderRadius: 3, background: 'rgba(123,111,160,0.10)', overflow: 'hidden' }}>
            <div style={{ height: '100%', width: '83%', borderRadius: 3,
              background: 'linear-gradient(90deg, #C9A96E, #E8C988, #FFD89B)',
              boxShadow: '0 0 6px rgba(201,169,110,0.5)' }}/>
          </div>
        </div>

        <div style={{
          padding: '12px 10px 8px', borderRadius: 12, background: '#fff',
          boxShadow: '0 0 0 0.5px rgba(201,169,110,0.25), 0 6px 14px rgba(123,111,160,0.05)',
        }}>
          <div style={{ fontFamily: '"Noto Serif JP", serif', fontSize: 11, color: '#3D3548', fontWeight: 600, marginBottom: 6 }}>2026 縁の波</div>
          <svg viewBox="0 0 200 60" width="100%" height="60" preserveAspectRatio="none" aria-hidden="true" focusable="false">
            <defs>
              <linearGradient id={`${gid}-fill`} x1="0" x2="0" y1="0" y2="1">
                <stop offset="0%" stopColor="#C9A96E" stopOpacity="0.25"/>
                <stop offset="100%" stopColor="#C9A96E" stopOpacity="0"/>
              </linearGradient>
            </defs>
            <path d="M 5 38 Q 30 30 60 22 T 100 18 L 100 55 L 5 55 Z" fill={`url(#${gid}-fill)`}/>
            <path d="M 5 38 Q 30 30 60 22 T 100 18"
              stroke="#C9A96E" strokeWidth="2" fill="none" strokeLinecap="round"/>
            <path d="M 100 18 Q 130 14 160 22 T 195 28"
              stroke="#C9A96E" strokeWidth="1.8" fill="none"
              strokeDasharray="3 3" strokeLinecap="round" opacity="0.5"
              style={{ filter: 'blur(0.8px)' }}/>
            <circle cx="100" cy="18" r="4" fill="#C9A96E" stroke="#fff" strokeWidth="1.5"/>
            <circle cx="100" cy="18" r="7" fill="rgba(201,169,110,0.25)"/>
            <rect x="120" y="36" width="60" height="13" rx="6.5" fill="#C9A96E" opacity="0.92"/>
          </svg>
          <div style={{
            position: 'relative', marginTop: -19, textAlign: 'center', fontSize: 7,
            color: '#fff', fontWeight: 700, letterSpacing: 0.8, paddingRight: 7,
          }}>🔒 この先を見る</div>
        </div>
      </div>
    </PhoneFrame>
  );
}

function Kicker({ children, color = '#A98A52' }) {
  return (
    <div style={{
      fontFamily: '"Manrope", sans-serif',
      fontSize: 11, color, letterSpacing: 3.5, fontWeight: 700, textTransform: 'uppercase',
    }}>{children}</div>
  );
}

function H1({ children, color = '#0D0B1E', size }) {
  return (
    <h1 style={{
      fontFamily: '"Noto Serif JP", "Noto Serif TC", serif',
      fontSize: size || 'clamp(34px, 5vw, 56px)',
      fontWeight: 500, color, letterSpacing: '0.04em', lineHeight: 1.3,
      margin: 0, textWrap: 'balance',
    }}>{children}</h1>
  );
}

function H2({ children, color = '#0D0B1E', center = false }) {
  return (
    <h2 style={{
      fontFamily: '"Noto Serif JP", "Noto Serif TC", serif',
      fontSize: 'clamp(26px, 3.4vw, 40px)',
      fontWeight: 500, color, letterSpacing: '0.04em', lineHeight: 1.4,
      margin: 0, textAlign: center ? 'center' : 'left', textWrap: 'balance',
    }}>{children}</h2>
  );
}

function Lead({ children, color = '#5F5570', center = false, maxWidth = 560 }) {
  return (
    <p style={{
      fontFamily: '"Noto Sans JP", "Noto Sans TC", sans-serif',
      fontSize: 'clamp(14px, 1.4vw, 16px)',
      color, lineHeight: 1.85, letterSpacing: 0.05, fontWeight: 400,
      margin: 0, maxWidth, textAlign: center ? 'center' : 'left',
      marginLeft: center ? 'auto' : 0, marginRight: center ? 'auto' : 0,
    }}>{children}</p>
  );
}

function GoldDivider() {
  return (
    <div style={{ display: 'flex', alignItems: 'center', gap: 10, width: 80 }}>
      <div style={{ flex: 1, height: 0.5, background: 'rgba(201,169,110,0.5)' }}/>
      <div style={{ width: 5, height: 5, background: '#C9A96E', transform: 'rotate(45deg)' }}/>
      <div style={{ flex: 1, height: 0.5, background: 'rgba(201,169,110,0.5)' }}/>
    </div>
  );
}

function TopNav() {
  return (
    <nav style={{
      position: 'absolute', top: 0, left: 0, right: 0, zIndex: 30,
      padding: 'clamp(18px, 2.5vw, 28px) clamp(20px, 5vw, 56px)',
      display: 'flex', justifyContent: 'space-between', alignItems: 'center',
    }}>
      <div style={{ display: 'inline-flex', alignItems: 'center', gap: 10 }}>
        <MarkKaya size={28} variant="gold"/>
        <span style={{
          fontFamily: '"Cormorant Garamond", serif',
          fontSize: 22, color: '#0D0B1E', letterSpacing: '0.18em', fontWeight: 500,
        }}>KAYA</span>
      </div>
      <a href="#register" className="lp-cta-pill" style={{
        padding: '8px 18px', borderRadius: 999,
        background: 'rgba(255,255,255,0.7)',
        boxShadow: '0 0 0 0.5px rgba(201,169,110,0.5), 0 2px 8px rgba(201,169,110,0.12)',
        color: '#A98A52', fontFamily: '"Noto Sans JP", sans-serif',
        fontSize: 13, fontWeight: 600, letterSpacing: 1.5,
        textDecoration: 'none', whiteSpace: 'nowrap',
      }}>事前登録 →</a>
    </nav>
  );
}

// Mailchimp JSONP 送信
const MC_U  = 'a00368e3109d8ed5b3f027a7e';
const MC_ID = 'ee8a9d1a8c';

function submitToMailchimp(email, onSuccess, onError) {
  const cbName = 'mc_cb_' + Date.now();
  const url = 'https://dev.us9.list-manage.com/subscribe/post-json'
    + '?u=' + MC_U + '&id=' + MC_ID
    + '&EMAIL=' + encodeURIComponent(email)
    + '&c=' + cbName;

  window[cbName] = function(data) {
    delete window[cbName];
    document.body.removeChild(script);
    console.log('[Mailchimp]', JSON.stringify(data));
    if (data.result === 'success') {
      // Mailchimp が success でも "already subscribed" を msg に含む場合がある
      const msg = (data.msg || '').toLowerCase();
      if (msg.includes('already') || msg.includes('subscribed')) {
        onError('このメールアドレスはすでに登録されています。');
      } else {
        onSuccess();
      }
    } else {
      onError(data.msg || 'エラーが発生しました。');
    }
  };

  const script = document.createElement('script');
  script.src = url;
  script.onerror = function() {
    delete window[cbName];
    document.body.removeChild(script);
    onError('送信に失敗しました。時間をおいて再試行してください。');
  };
  document.body.appendChild(script);
}

function EmailForm({ size = 'lg', centered = false }) {
  const [email, setEmail]     = React.useState('');
  const [status, setStatus]   = React.useState('idle'); // idle | loading | success | error
  const [errMsg, setErrMsg]   = React.useState('');
  const isLg = size === 'lg';

  const onSubmit = (e) => {
    e.preventDefault();
    if (!email || status === 'loading') return;
    setStatus('loading');
    submitToMailchimp(
      email,
      () => setStatus('success'),
      (msg) => { setStatus('error'); setErrMsg(msg); }
    );
  };

  if (status === 'success') {
    return (
      <div style={{
        padding: isLg ? '18px 22px' : '14px 18px', borderRadius: 16,
        background: 'linear-gradient(135deg, rgba(201,169,110,0.16), rgba(232,201,136,0.12))',
        boxShadow: '0 0 0 0.5px rgba(201,169,110,0.5)',
        display: 'inline-flex', alignItems: 'center', gap: 10,
        color: '#A98A52', fontFamily: '"Noto Sans JP", sans-serif',
        fontSize: isLg ? 15 : 14, fontWeight: 600, letterSpacing: 0.5, maxWidth: '100%',
      }}>
        <span style={{ fontSize: 18 }}>✦</span>
        ありがとうございます。リリース時に最初にお知らせします。
      </div>
    );
  }

  return (
    <div style={{ maxWidth: isLg ? 480 : 420, margin: centered ? '0 auto' : undefined }}>
      <form onSubmit={onSubmit} style={{ display: 'flex', gap: 8, flexWrap: 'wrap' }}>
        <input
          type="email" required value={email} onChange={e => setEmail(e.target.value)}
          autoComplete="email" aria-label="メールアドレス"
          placeholder="you@example.com"
          disabled={status === 'loading'}
          style={{
            flex: '1 1 220px', padding: isLg ? '16px 18px' : '13px 16px',
            fontSize: isLg ? 15 : 14, fontFamily: '"Noto Sans JP", sans-serif',
            border: 'none', borderRadius: 14, background: '#fff',
            boxShadow: '0 0 0 0.5px rgba(13,11,30,0.10), 0 2px 8px rgba(13,11,30,0.04), 0 1px 0 rgba(255,255,255,0.9) inset',
            color: '#3D3548', letterSpacing: 0.3, opacity: status === 'loading' ? 0.7 : 1,
          }}/>
        <button type="submit" disabled={status === 'loading'} style={{
          padding: isLg ? '16px 24px' : '13px 20px', borderRadius: 14,
          border: 'none', cursor: status === 'loading' ? 'wait' : 'pointer',
          background: 'linear-gradient(135deg, #C9A96E 0%, #A98A52 55%, #8B6A28 100%)',
          color: '#fff', fontFamily: '"Noto Sans JP", sans-serif',
          fontSize: isLg ? 15 : 14, fontWeight: 700, letterSpacing: 2,
          textShadow: '0 1px 2px rgba(60,40,5,0.55)',
          boxShadow: '0 6px 16px rgba(139,106,40,0.45), 0 0 0 0.5px rgba(139,106,40,0.7), 0 1px 0 rgba(255,255,255,0.30) inset',
          whiteSpace: 'nowrap', opacity: status === 'loading' ? 0.7 : 1,
        }}>{status === 'loading' ? '送信中…' : '事前登録する'}</button>
      </form>
      {status === 'error' && (
        <div style={{ marginTop: 8, fontSize: 12, color: '#C45858', fontFamily: '"Noto Sans JP", sans-serif' }}>
          {errMsg.includes('already') || errMsg.includes('subscribed') || errMsg.includes('登録済')
            ? 'このメールアドレスはすでに登録されています。'
            : errMsg || 'エラーが発生しました。'}
        </div>
      )}
    </div>
  );
}

function Hero() {
  return (
    <section style={{
      position: 'relative', overflow: 'hidden',
      paddingTop: 'clamp(120px, 14vw, 180px)',
      paddingBottom: 'clamp(60px, 8vw, 120px)',
      background:
        'radial-gradient(ellipse at 12% 5%, rgba(123,111,160,0.10) 0%, transparent 45%),' +
        'radial-gradient(ellipse at 92% 25%, rgba(201,169,110,0.16) 0%, transparent 40%),' +
        'radial-gradient(ellipse at 75% 95%, rgba(196,133,138,0.08) 0%, transparent 50%),' +
        '#F8F5F0',
    }}>
      <div className="lp-container">
        <div className="lp-hero-grid">
          <div style={{ display: 'flex', flexDirection: 'column', gap: 'clamp(20px, 2.5vw, 30px)' }}>
            <Kicker>Coming Soon · 事前登録受付中</Kicker>
            <H1>答えは、<br/>あなたの中にある。</H1>
            {/* フォームを H1 直下に移動（モバイルでもファーストビューに収める） */}
            <div>
              <EmailForm/>
              <div style={{
                marginTop: 10, fontFamily: '"Noto Sans JP", sans-serif',
                fontSize: 12, color: '#7A6F85', letterSpacing: 0.5,
              }}>登録は1分。βテスター特典あり。</div>
            </div>
            <div style={{
              fontFamily: '"Noto Sans JP", sans-serif',
              fontSize: 'clamp(13px, 1.5vw, 15px)', fontWeight: 500,
              color: '#7A6F85', letterSpacing: 0.5,
            }}>
              四柱推命・紫微斗数・手相を統合した、毎日の東洋命理アプリ。
            </div>
          </div>
          <div style={{ display: 'flex', justifyContent: 'center', position: 'relative', minHeight: 200 }}>
            <div style={{
              position: 'absolute', top: '5%', right: '0%',
              width: 'min(80%, 480px)', aspectRatio: '1', borderRadius: '50%',
              background: 'radial-gradient(circle, rgba(201,169,110,0.30), transparent 65%)',
              pointerEvents: 'none', zIndex: 0,
            }}/>
            <div style={{ position: 'relative', zIndex: 1 }}>
              <MockHome width={300} accent={true}/>
            </div>
          </div>
        </div>
      </div>
    </section>
  );
}

function PillarIcon({ kind, size = 56 }) {
  const gid = React.useId();
  if (kind === 'chart') {
    return (
      <svg width={size} height={size} viewBox="0 0 60 60" aria-hidden="true" focusable="false">
        <defs>
          <radialGradient id={`${gid}-dark`}>
            <stop offset="0%" stopColor="#221A3A"/>
            <stop offset="100%" stopColor="#0D0B1E"/>
          </radialGradient>
        </defs>
        <circle cx="30" cy="30" r="24" fill={`url(#${gid}-dark)`} stroke="#C9A96E" strokeWidth="1" opacity="0.95"/>
        {[14, 22].map(r => (
          <circle key={r} cx="30" cy="30" r={r} fill="none" stroke="#C9A96E" strokeOpacity="0.20"
            strokeDasharray="1 3" strokeWidth="0.4"/>
        ))}
        {[
          [30, 12], [42, 18], [44, 30], [38, 42], [22, 42], [16, 30], [22, 18],
          [30, 20], [36, 30], [24, 30],
        ].map(([x, y], i) => (
          <circle key={i} cx={x} cy={y} r={i < 6 ? 1.6 : 1.2} fill="#C9A96E" opacity={i < 6 ? 1 : 0.55}/>
        ))}
        <circle cx="30" cy="30" r="2.2" fill="#FFF6E0"/>
      </svg>
    );
  }
  if (kind === 'blossom') return <PeachBlossomMini size={size}/>;
  if (kind === 'connect') {
    return (
      <svg width={size} height={size} viewBox="0 0 60 60" aria-hidden="true" focusable="false">
        <defs>
          <radialGradient id={`${gid}-glow`}>
            <stop offset="0%" stopColor="#FFF1C8"/>
            <stop offset="100%" stopColor="#C9A96E" stopOpacity="0"/>
          </radialGradient>
        </defs>
        <circle cx="22" cy="32" r="14" fill={`url(#${gid}-glow)`} opacity="0.7"/>
        <circle cx="40" cy="28" r="11" fill={`url(#${gid}-glow)`} opacity="0.7"/>
        <path d="M22 22 L23 30 L31 32 L23 34 L22 42 L21 34 L13 32 L21 30 Z" fill="#C9A96E"/>
        <path d="M40 22 L41 28 L46 29 L41 30 L40 36 L39 30 L34 29 L39 28 Z" fill="#C4858A"/>
      </svg>
    );
  }
  return null;
}

function Pillars() {
  const items = [
    {
      icon: 'chart', tag: '四柱推命 × 紫微斗数', title: 'あなたの基本図',
      body: '生年月日から導く、あなただけの命盤。四柱推命と紫微斗数が重なって、「軸」を浮かび上がらせます。',
    },
    {
      icon: 'blossom', tag: '桃花天気予報', title: '今日の縁の流れ',
      body: '気象予報のように、今日の桃花コンディションを一目で。ラッキーアクションは1日ひとつ、無理せず試せる。',
    },
    {
      icon: 'connect', tag: '相性診断', title: '友達・気になる人と',
      body: '生年月日を交換するだけで、二人の相性が見える。重い分析ではなく、軽やかな会話のきっかけに。',
    },
  ];
  return (
    <section style={{ padding: 'clamp(80px, 12vw, 140px) clamp(20px, 5vw, 56px)', background: '#fff' }}>
      <div className="lp-container" style={{ display: 'flex', flexDirection: 'column', alignItems: 'center', gap: 'clamp(30px, 5vw, 60px)' }}>
        <div style={{ display: 'flex', flexDirection: 'column', alignItems: 'center', gap: 16 }}>
          <Kicker>WHAT KAYA OFFERS</Kicker>
          <H2 center>四柱推命・紫微斗数・手相が、ひとつになる。</H2>
          <GoldDivider/>
          <Lead center>
            台湾と日本で受け継がれてきた東洋命理を、<br/>
            重くなく、軽すぎず。日々の所作の一部に。
          </Lead>
        </div>
        <div className="lp-pillars-grid">
          {items.map((it, i) => (
            <div key={i} style={{
              background: '#FAFAFA', borderRadius: 22,
              padding: 'clamp(28px, 3vw, 38px) clamp(24px, 2.5vw, 32px)',
              display: 'flex', flexDirection: 'column', gap: 16,
              boxShadow: '0 0 0 0.5px rgba(13,11,30,0.05)',
              position: 'relative', overflow: 'hidden',
            }}>
              <div style={{
                position: 'absolute', top: -30, right: -30, width: 120, height: 120, borderRadius: '50%',
                background: 'radial-gradient(circle, rgba(201,169,110,0.10), transparent 65%)',
                pointerEvents: 'none',
              }}/>
              <div style={{ position: 'relative' }}>
                <PillarIcon kind={it.icon}/>
              </div>
              <div style={{ position: 'relative' }}>
                <Kicker color="#A98A52">{it.tag}</Kicker>
                <div style={{
                  fontFamily: '"Noto Serif JP", serif', fontSize: 'clamp(18px, 1.9vw, 22px)',
                  fontWeight: 500, color: '#0D0B1E', letterSpacing: '0.04em', lineHeight: 1.4, marginTop: 6,
                }}>{it.title}</div>
                <p style={{
                  fontFamily: '"Noto Sans JP", sans-serif',
                  fontSize: 13.5, color: '#5F5570', lineHeight: 1.85,
                  letterSpacing: 0.3, marginTop: 12, marginBottom: 0,
                }}>{it.body}</p>
              </div>
            </div>
          ))}
        </div>
      </div>
    </section>
  );
}

function Daily() {
  const steps = [
    { n: '01', t: '開く', d: '通知を待つだけ。朝、今日の桃花コンディションが手元に届きます。' },
    { n: '02', t: '読む', d: '今日のラッキーアクションは一文だけ。試したら「やってみた」をタップ。' },
    { n: '03', t: '残す', d: '気づきは絵文字で記録。タップだけ、文字入力はゼロ。' },
  ];
  return (
    <section style={{
      padding: 'clamp(80px, 12vw, 140px) clamp(20px, 5vw, 56px)',
      background:
        'radial-gradient(ellipse at 90% 0%, rgba(201,169,110,0.10) 0%, transparent 40%),' +
        'radial-gradient(ellipse at 10% 100%, rgba(196,133,138,0.06) 0%, transparent 50%),' +
        '#F8F5F0',
    }}>
      <div className="lp-container">
        <div className="lp-daily-grid">
          <div style={{ display: 'flex', justifyContent: 'center', position: 'relative' }}>
            <div style={{
              position: 'absolute', inset: '5% -5% 5% 5%', borderRadius: '50%',
              background: 'radial-gradient(circle, rgba(201,169,110,0.20), transparent 65%)',
              pointerEvents: 'none', zIndex: 0,
            }}/>
            <div style={{ position: 'relative', zIndex: 1 }}>
              <MockHome width={280}/>
            </div>
          </div>
          <div style={{ display: 'flex', flexDirection: 'column', gap: 'clamp(18px, 2.5vw, 30px)' }}>
            <div style={{ display: 'flex', flexDirection: 'column', gap: 16 }}>
              <Kicker>DAILY RITUAL</Kicker>
              <H2>毎日30秒、<br/>自分が開花していく。</H2>
              <Lead>
                100日後、あなたの命盤は満開に。<br/>
                急がない、競わない。「育てる命理」という新しい使い方。
              </Lead>
            </div>
            <div style={{ display: 'flex', flexDirection: 'column', gap: 18, marginTop: 4 }}>
              {steps.map((s, i) => (
                <div key={i} style={{
                  display: 'flex', gap: 18,
                  paddingBottom: i < steps.length - 1 ? 18 : 0,
                  borderBottom: i < steps.length - 1 ? '0.5px solid rgba(13,11,30,0.08)' : 'none',
                }}>
                  <div style={{
                    fontFamily: '"Cormorant Garamond", serif',
                    fontSize: 24, color: '#C9A96E', fontWeight: 500, minWidth: 36, lineHeight: 1.2,
                  }}>{s.n}</div>
                  <div style={{ flex: 1 }}>
                    <div style={{
                      fontFamily: '"Noto Serif JP", serif', fontSize: 18,
                      fontWeight: 500, color: '#0D0B1E', letterSpacing: '0.04em', marginBottom: 4,
                    }}>{s.t}</div>
                    <div style={{
                      fontFamily: '"Noto Sans JP", sans-serif',
                      fontSize: 13.5, color: '#5F5570', lineHeight: 1.75, letterSpacing: 0.3,
                    }}>{s.d}</div>
                  </div>
                </div>
              ))}
            </div>
          </div>
        </div>
      </div>
    </section>
  );
}

function Privacy() {
  return (
    <section style={{
      position: 'relative', overflow: 'hidden',
      padding: 'clamp(80px, 12vw, 140px) clamp(20px, 5vw, 56px)',
      background:
        'radial-gradient(ellipse at 80% 20%, rgba(201,169,110,0.14) 0%, transparent 40%),' +
        'radial-gradient(ellipse at 15% 80%, rgba(123,111,160,0.15) 0%, transparent 45%),' +
        '#0D0B1E',
      color: '#F8F5F0',
    }}>
      {[
        [8, 14, 0.6], [78, 12, 0.5], [22, 32, 0.4], [88, 38, 0.7],
        [12, 58, 0.5], [70, 70, 0.4], [42, 88, 0.55], [60, 22, 0.5],
        [35, 12, 0.45], [55, 90, 0.4],
      ].map(([x, y, o], i) => (
        <div key={i} style={{
          position: 'absolute', top: `${y}%`, left: `${x}%`,
          width: 3, height: 3, borderRadius: '50%',
          background: '#C9A96E', opacity: o, boxShadow: '0 0 6px rgba(201,169,110,0.6)',
        }}/>
      ))}
      <div className="lp-container" style={{
        display: 'flex', flexDirection: 'column', alignItems: 'center',
        gap: 'clamp(20px, 3vw, 30px)', textAlign: 'center', position: 'relative',
      }}>
        <Kicker color="#C9A96E">PRIVACY</Kicker>
        <H2 center color="#F8F5F0">手相の写真は、<br/>送られません。</H2>
        <GoldDivider/>
        <Lead center color="rgba(248,245,240,0.78)" maxWidth={640}>
          手相解析は、あなたの端末の中で処理する設計です。<br/>
          写真をサーバーに送ることはありません。<br/>
          KAYAが主に受け取るのは、生年月日と、あなたが書く小さな気づきです。
        </Lead>
        <div style={{ marginTop: 8, display: 'flex', flexWrap: 'wrap', gap: 14, justifyContent: 'center' }}>
          {[
            { l: 'オンデバイス処理',  s: '写真は端末から出ません' },
            { l: '匿名で事前登録',     s: '初期はメールアドレスのみ' },
            { l: 'いつでもデータ削除', s: 'ワンタップで全削除可能' },
          ].map((it, i) => (
            <div key={i} style={{
              padding: '14px 18px', borderRadius: 14,
              background: 'rgba(248,245,240,0.05)',
              boxShadow: '0 0 0 0.5px rgba(201,169,110,0.30)',
              backdropFilter: 'blur(8px)',
              display: 'flex', flexDirection: 'column', alignItems: 'center', gap: 4, minWidth: 180,
            }}>
              <div style={{
                fontFamily: '"Noto Serif JP", serif',
                fontSize: 14, color: '#F8F5F0', fontWeight: 500, letterSpacing: 0.5,
              }}>{it.l}</div>
              <div style={{
                fontFamily: '"Noto Sans JP", sans-serif',
                fontSize: 11.5, color: 'rgba(248,245,240,0.6)', letterSpacing: 0.3,
              }}>{it.s}</div>
            </div>
          ))}
        </div>
      </div>
    </section>
  );
}

function Master() {
  return (
    <section style={{
      padding: 'clamp(80px, 12vw, 140px) clamp(20px, 5vw, 56px)', background: '#F8F5F0',
    }}>
      <div className="lp-container" style={{
        display: 'flex', flexDirection: 'column', alignItems: 'center',
        gap: 'clamp(24px, 3vw, 40px)', textAlign: 'center',
      }}>
        <Kicker>CLASSICAL FOUNDATION</Kicker>
        <H2 center>古典占術が判定し、<br/>AIが分かりやすく解説します。</H2>
        <GoldDivider/>

        <div style={{
          maxWidth: 720, padding: 'clamp(28px, 4vw, 44px)',
          background: '#fff', borderRadius: 22,
          boxShadow: '0 0 0 0.5px rgba(201,169,110,0.30), 0 16px 36px rgba(123,111,160,0.07), 0 4px 10px rgba(196,133,138,0.04)',
          position: 'relative',
        }}>
          <div style={{
            fontFamily: '”Noto Serif JP”, “Noto Serif TC”, serif',
            fontSize: 'clamp(18px, 2vw, 22px)',
            color: '#3D3548', lineHeight: 1.9, letterSpacing: 1.5, textAlign: 'center',
          }}>
            <span style={{ color: '#C9A96E', fontSize: '1.6em', fontFamily: 'serif', verticalAlign: '-0.15em', marginRight: 4 }}>”</span>
            命理は当てるものではなく、
            <span style={{ color: '#A98A52', fontWeight: 600 }}>育てる</span>もの。
            <br/>
            あなたが毎日点す灯りが、
            <span style={{ color: '#A98A52', fontWeight: 600 }}>あなたの星盤</span>になります。
            <span style={{ color: '#C9A96E', fontSize: '1.6em', fontFamily: 'serif', verticalAlign: '-0.15em', marginLeft: 4 }}>”</span>
          </div>
          <div style={{ marginTop: 24, display: 'flex', alignItems: 'center', justifyContent: 'center', gap: 12 }}>
            <div style={{ width: 28, height: 0.5, background: 'rgba(201,169,110,0.5)' }}/>
            <div style={{
              fontFamily: '”Noto Serif JP”, “Noto Serif TC”, serif',
              fontSize: 14, color: '#A98A52', letterSpacing: 2, fontWeight: 600,
            }}>KAYA が大切にしている考え方</div>
            <div style={{ width: 28, height: 0.5, background: 'rgba(201,169,110,0.5)' }}/>
          </div>
          <div style={{
            marginTop: 8, fontSize: 11.5, color: '#7A6F85',
            letterSpacing: 0.5, fontFamily: '”Noto Sans JP”, sans-serif',
          }}>紫微斗數全書・滴天髄など、明代の古典文献を根拠として</div>
        </div>

        <Lead center maxWidth={560}>
          KAYA の判定は、数百年の歴史を持つ古典占術のルールに基づいて確定的に行われます。<br/>
          AIは判定を下しません。占術が出した結果を、あなたに分かりやすく届けるだけです。<br/>
          <span style={{ fontSize: '0.9em', color: '#7A6F85' }}>根拠のある言葉だけを、あなたに。</span>
        </Lead>
      </div>
    </section>
  );
}

function Gallery() {
  const items = [
    { mock: <MockHome width={240}/>,    label: 'Home',     caption: '今日の桃花コンディション' },
    { mock: <MockSelf width={240}/>,    label: 'Self',     caption: '私を知る' },
    { mock: <MockConnect width={240}/>, label: 'Connect',  caption: '縁を知る' },
    { mock: <MockFlow width={240}/>,    label: 'Flow',     caption: '今月・今年' },
  ];
  return (
    <section style={{
      padding: 'clamp(80px, 12vw, 140px) 0 clamp(80px, 12vw, 120px)',
      background: '#fff', overflow: 'hidden',
    }}>
      <div style={{
        maxWidth: 1200, margin: '0 auto',
        padding: '0 clamp(20px, 5vw, 56px)', marginBottom: 'clamp(36px, 5vw, 56px)',
        display: 'flex', flexDirection: 'column', alignItems: 'center', gap: 16, textAlign: 'center',
      }}>
        <Kicker>INSIDE THE APP</Kicker>
        <H2 center>四つの場所を行き来する、<br/>あなただけの命理。</H2>
        <GoldDivider/>
      </div>
      <div className="lp-gallery">
        {items.map((it, i) => (
          <div key={i} className="lp-gallery-item" style={{
            display: 'flex', flexDirection: 'column', alignItems: 'center', gap: 14,
          }}>
            <div style={{ position: 'relative' }}>
              <div style={{
                position: 'absolute', inset: '5% -5%', borderRadius: '50%',
                background: 'radial-gradient(circle, rgba(201,169,110,0.18), transparent 65%)',
                pointerEvents: 'none', zIndex: 0,
              }}/>
              <div style={{ position: 'relative', zIndex: 1 }}>{it.mock}</div>
            </div>
            <div style={{ textAlign: 'center' }}>
              <div style={{
                fontFamily: '"Cormorant Garamond", serif',
                fontSize: 16, color: '#A98A52', letterSpacing: 3, fontWeight: 500,
              }}>{it.label}</div>
              <div style={{
                fontFamily: '"Noto Serif JP", serif',
                fontSize: 14, color: '#3D3548', letterSpacing: 1, marginTop: 4,
              }}>{it.caption}</div>
            </div>
          </div>
        ))}
      </div>
    </section>
  );
}

// ── FAQ ─────────────────────────────────────────────────────────────
const FAQ_ITEMS = [
  {
    category: 'アプリの基本',
    items: [
      { q: 'どんなアプリですか？', a: '四柱推命・紫微斗数などの東洋命理に基づき、あなたの命式と毎日の縁の流れを読むアプリです。日々使うことで命式が育っていく「育てる命理」を体験できます。' },
      { q: 'iOS・Android 両対応ですか？', a: 'はい。両プラットフォームに対応予定です。' },
      { q: 'リリースはいつですか？', a: '現在開発中です。事前登録いただいた方に最初にお知らせします。' },
    ],
  },
  {
    category: '占いの仕組み',
    items: [
      { q: 'AIが占うのですか？', a: 'いいえ。判定は古典占術のルールに基づいて確定的に行われます。AIは結果を分かりやすく言葉にするだけです。「AIが占う」ではなく「占術理論に基づいて判定し、AIが解説する」設計です。' },
      { q: '手相は必須ですか？', a: 'いいえ、オプションです。生年月日だけでも四柱推命・紫微斗数の全機能を利用できます。' },
      { q: '占い師の監修はありますか？', a: '現在は、明代の古典文献（滴天髄・三命通会・紫微斗數全書）を根拠としたルールエンジンで判定しています。将来的に専門家レビューを加える設計になっています。' },
    ],
  },
  {
    category: 'プライバシー',
    items: [
      { q: '生年月日を入力して大丈夫ですか？', a: 'はい。生年月日はお使いの端末内にのみ保存され、サーバーには送信されません。名前・メールアドレス等の個人情報は不要です。' },
      { q: 'データを削除できますか？', a: 'アプリ設定の「すべてのデータを消去」から即時削除できます。' },
    ],
  },
  {
    category: '料金・事前登録',
    items: [
      { q: '無料で使えますか？', a: '基本機能は無料でご利用いただけます。より深い読みが可能なPremiumプランも準備中です。' },
      { q: '事前登録すると何がありますか？', a: 'βテスターとしてリリース前にアプリを最初に体験できます。また、Premiumを1ヶ月無料でお試しいただける特典を予定しています。' },
    ],
  },
];

function FAQ() {
  const [open, setOpen] = React.useState({});
  const toggle = (id) => setOpen(prev => ({ ...prev, [id]: !prev[id] }));

  return (
    <section style={{
      padding: 'clamp(80px, 12vw, 140px) clamp(20px, 5vw, 56px)',
      background: '#fff',
    }}>
      <div className="lp-container" style={{
        display: 'flex', flexDirection: 'column', alignItems: 'center',
        gap: 'clamp(20px, 3vw, 32px)',
      }}>
        <Kicker>FAQ · よくある質問</Kicker>
        <H2 center>気になることを<br/>まとめました。</H2>
        <GoldDivider/>

        <div style={{ width: '100%', maxWidth: 680 }}>
          {FAQ_ITEMS.map((cat, ci) => (
            <div key={ci} style={{ marginBottom: 28 }}>
              <div style={{
                fontSize: 10.5, color: '#A98A52', letterSpacing: 3, fontWeight: 700,
                fontFamily: '"Noto Sans JP", sans-serif',
                marginBottom: 12, paddingLeft: 4,
              }}>{cat.category}</div>
              {cat.items.map((item, ii) => {
                const id = `${ci}-${ii}`;
                const isOpen = open[id];
                return (
                  <div key={ii} style={{
                    borderRadius: 14, overflow: 'hidden',
                    marginBottom: 8,
                    boxShadow: isOpen
                      ? '0 0 0 1px rgba(201,169,110,0.4), 0 4px 16px rgba(123,111,160,0.08)'
                      : '0 0 0 0.5px rgba(201,169,110,0.2)',
                    transition: 'box-shadow 200ms ease',
                  }}>
                    <button
                      onClick={() => toggle(id)}
                      style={{
                        width: '100%', padding: '14px 18px',
                        background: isOpen
                          ? 'linear-gradient(135deg, rgba(201,169,110,0.08), rgba(196,133,138,0.05))'
                          : 'rgba(255,253,246,0.9)',
                        border: 'none', cursor: 'pointer',
                        display: 'flex', justifyContent: 'space-between', alignItems: 'center',
                        gap: 12, textAlign: 'left',
                        transition: 'background 200ms ease',
                      }}
                    >
                      <span style={{
                        fontFamily: '"Noto Serif JP", serif',
                        fontSize: 14, color: '#3D3548', fontWeight: 600, lineHeight: 1.5,
                      }}>{item.q}</span>
                      <span style={{
                        fontSize: 10, color: '#A98A52', flexShrink: 0,
                        transform: isOpen ? 'rotate(180deg)' : 'rotate(0)',
                        transition: 'transform 200ms ease',
                      }}>▼</span>
                    </button>
                    {isOpen && (
                      <div style={{
                        padding: '12px 18px 16px',
                        background: 'rgba(248,245,240,0.7)',
                        fontSize: 13.5, color: '#5F5570', lineHeight: 1.85,
                        fontFamily: '"Noto Sans JP", sans-serif',
                        animation: 'kaya-fade-down 200ms ease both',
                      }}>
                        {item.a}
                      </div>
                    )}
                  </div>
                );
              })}
            </div>
          ))}
        </div>
      </div>
    </section>
  );
}

function Register() {
  return (
    <section id="register" style={{
      position: 'relative', overflow: 'hidden',
      padding: 'clamp(90px, 13vw, 160px) clamp(20px, 5vw, 56px)',
      background:
        'radial-gradient(ellipse at 50% 0%, rgba(201,169,110,0.30) 0%, transparent 50%),' +
        'radial-gradient(ellipse at 20% 80%, rgba(196,133,138,0.16) 0%, transparent 50%),' +
        'radial-gradient(ellipse at 85% 90%, rgba(123,111,160,0.12) 0%, transparent 50%),' +
        '#F8F5F0',
    }}>
      <div className="lp-container" style={{
        display: 'flex', flexDirection: 'column', alignItems: 'center',
        gap: 'clamp(22px, 3vw, 32px)', textAlign: 'center',
      }}>
        <MarkKaya size={56} variant="gold" withGlow={true}/>
        <Kicker>BE THE FIRST · 事前登録</Kicker>
        <H2 center>あなたの命盤を、<br/>最初に育てる。</H2>
        <GoldDivider/>
        <Lead center maxWidth={520}>
          事前登録の方には、以下の特典をご用意しています。
        </Lead>

        {/* 事前登録特典 */}
        <div style={{
          display: 'flex', gap: 12, flexWrap: 'wrap', justifyContent: 'center',
          maxWidth: 480, margin: '0 auto 8px',
        }}>
          {[
            { icon: '🌸', title: 'βテスター先行招待', desc: 'リリース前にアプリを最初に体験できます' },
            { icon: '✨', title: 'Premium 1ヶ月無料', desc: 'リリース時にPremiumを無料でお試しいただけます' },
          ].map((item, i) => (
            <div key={i} style={{
              flex: '1 1 200px', padding: '16px 18px', borderRadius: 16,
              background: 'linear-gradient(135deg, rgba(255,253,246,0.95), rgba(248,245,240,0.9))',
              boxShadow: '0 0 0 0.5px rgba(201,169,110,0.35), 0 4px 16px rgba(123,111,160,0.07)',
              textAlign: 'center',
            }}>
              <div style={{ fontSize: 24, marginBottom: 6 }}>{item.icon}</div>
              <div style={{
                fontFamily: '"Noto Serif JP", serif', fontSize: 13,
                color: '#A98A52', fontWeight: 600, letterSpacing: 0.5, marginBottom: 4,
              }}>{item.title}</div>
              <div style={{ fontSize: 11.5, color: '#7A6F85', lineHeight: 1.6 }}>{item.desc}</div>
            </div>
          ))}
        </div>

        <EmailForm centered/>

        <div style={{
          marginTop: 4, fontFamily: '"Noto Sans JP", sans-serif',
          fontSize: 12, color: '#7A6F85', letterSpacing: 0.5,
        }}>いつでも配信停止できます。いただいた情報はプライバシーポリシーに沿って取り扱います。</div>

        <div style={{
          marginTop: 12, display: 'flex', gap: 24, flexWrap: 'wrap', justifyContent: 'center',
          fontSize: 11.5, color: '#7A6F85',
          fontFamily: '"Noto Sans JP", sans-serif', letterSpacing: 1.2, fontWeight: 500,
        }}>
          <span>✦ 古典占術に基づく確定的判定</span>
          <span>✦ オンデバイス処理</span>
          <span>✦ 文字入力ゼロ</span>
        </div>
      </div>
    </section>
  );
}

function Footer() {
  return (
    <footer style={{
      padding: 'clamp(40px, 6vw, 60px) clamp(20px, 5vw, 56px)',
      background: '#0D0B1E', color: 'rgba(248,245,240,0.7)',
    }}>
      <div className="lp-container" style={{
        display: 'flex', justifyContent: 'space-between', alignItems: 'center', gap: 24, flexWrap: 'wrap',
      }}>
        <div style={{ display: 'inline-flex', alignItems: 'center', gap: 10 }}>
          <MarkKaya size={28} variant="gold"/>
          <div>
            <div style={{
              fontFamily: '"Cormorant Garamond", serif', fontSize: 20,
              color: '#F8F5F0', letterSpacing: '0.18em', fontWeight: 500,
            }}>KAYA</div>
            <div style={{
              fontFamily: '"Noto Serif TC", serif',
              fontSize: 10, color: 'rgba(248,245,240,0.55)', letterSpacing: 3, marginTop: 2,
            }}>花開呀</div>
          </div>
        </div>
        <div style={{
          display: 'flex', gap: 24, fontSize: 11.5, letterSpacing: 1.2,
          fontFamily: '"Noto Sans JP", sans-serif',
        }}>
          <a href="/privacy.html" style={{ color: 'inherit', textDecoration: 'none' }}>プライバシーポリシー</a>
          <a href="/terms.html" style={{ color: 'inherit', textDecoration: 'none' }}>利用規約</a>
          <a href="mailto:support@kayablossom.app" style={{ color: 'inherit', textDecoration: 'none' }}>お問い合わせ</a>
        </div>
        <div style={{
          fontSize: 10.5, color: 'rgba(248,245,240,0.4)',
          letterSpacing: 1.2, fontFamily: '"Manrope", sans-serif',
        }}>© 2026 KAYA · kayablossom.app</div>
      </div>
    </footer>
  );
}

function GlobalStyles() {
  const css = `
@import url('https://fonts.googleapis.com/css2?family=Cormorant+Garamond:wght@300;400;500;600;700&family=Noto+Serif+JP:wght@300;400;500;600;700&family=Noto+Sans+JP:wght@300;400;500;600;700&family=Noto+Serif+TC:wght@400;500;600;700&family=Noto+Sans+TC:wght@400;500;600&family=Manrope:wght@400;500;600;700&display=swap');
html, body { margin: 0; padding: 0; }
body {
  font-family: 'Noto Sans JP', 'Noto Sans TC', -apple-system, system-ui, sans-serif;
  -webkit-font-smoothing: antialiased;
  color: #0D0B1E; background: #F8F5F0; overflow-x: hidden;
}
* { box-sizing: border-box; }
a { color: inherit; }
::selection { background: rgba(201,169,110,0.30); color: #0D0B1E; }

.lp-container { max-width: 1200px; margin: 0 auto; }

.lp-hero-grid {
  display: grid; grid-template-columns: 1.15fr 1fr;
  gap: clamp(40px, 6vw, 80px); align-items: center;
}
@media (max-width: 900px) {
  .lp-hero-grid { grid-template-columns: 1fr; gap: 40px; }
}

.lp-pillars-grid {
  display: grid; grid-template-columns: repeat(3, 1fr);
  gap: clamp(16px, 2vw, 24px); width: 100%;
}
@media (max-width: 900px) {
  .lp-pillars-grid { grid-template-columns: 1fr; }
}

.lp-daily-grid {
  display: grid; grid-template-columns: 1fr 1.2fr;
  gap: clamp(40px, 6vw, 80px); align-items: center;
}
@media (max-width: 900px) {
  .lp-daily-grid { grid-template-columns: 1fr; gap: 40px; }
}

.lp-gallery {
  display: flex; gap: 24px;
  padding: 8px clamp(20px, 5vw, 56px) 24px;
  overflow-x: auto; scroll-snap-type: x mandatory;
  -webkit-overflow-scrolling: touch; scrollbar-width: none; justify-content: center;
}
.lp-gallery::-webkit-scrollbar { display: none; }
.lp-gallery-item { flex: 0 0 auto; scroll-snap-align: center; }
@media (max-width: 900px) {
  .lp-gallery { justify-content: flex-start; }
}

.lp-cta-pill { transition: transform 200ms ease, box-shadow 200ms ease; }
.lp-cta-pill:hover {
  transform: translateY(-1px);
  box-shadow: 0 0 0 0.5px rgba(201,169,110,0.6), 0 6px 14px rgba(201,169,110,0.18) !important;
}

button { font-family: inherit; }
button:hover { filter: brightness(1.04); }

a:focus-visible, button:focus-visible, input:focus-visible {
  outline: 2px solid #A98A52;
  outline-offset: 2px;
  border-radius: 4px;
}
`;
  return <style dangerouslySetInnerHTML={{ __html: css }}/>;
}

function LPApp() {
  return (
    <div style={{
      position: 'relative',
      fontFamily: '"Noto Sans JP", "Noto Sans TC", -apple-system, system-ui, sans-serif',
      color: '#0D0B1E',
    }}>
      <GlobalStyles/>
      <TopNav/>
      <Hero/>
      <Pillars/>
      <Daily/>
      <Privacy/>
      <Master/>
      <Gallery/>
      <FAQ/>
      <Register/>
      <Footer/>
    </div>
  );
}

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