﻿// kaya-lp-consolidated.jsx — KAYA Landing Page (ja / zh-TW) — v0.5

// ── 言語管理 ──────────────────────────────────────────────────────────
const LangContext = React.createContext('ja');
function useLang() { return React.useContext(LangContext); }

const LP_COPY = {
  ja: {
    nav_cta: '事前登録 →',
    coming_soon: '近日公開',
    page_title: 'KAYA — 答えは、あなたの中にある。',
    page_desc: '四柱推命・紫微斗数・手相を統合した、毎日の東洋命理アプリ。古典占術が判定し、AIが解説する。事前登録受付中。',
    h1: '答えは、\nあなたの中にある。',
    h1_sub: '四柱推命・紫微斗数（中国・台湾の星読み）・手相を統合した、毎日の東洋命理アプリ。',
    reg_note: '登録は1分。βテスター特典あり。',
    pillars_title: '四柱推命・紫微斗数・手相が、ひとつになる。',
    register_title: 'あなたの命盤を、\n最初に育てる。',
    register_lead: '事前登録の方には、以下の特典をご用意しています。',
    gift_beta: 'βテスター先行招待',
    gift_beta_desc: 'リリース前にアプリを最初に体験できます',
    gift_premium: 'Premium 1ヶ月無料',
    gift_premium_desc: 'リリース時にPremiumを無料でお試しいただけます',
    subscribe_btn: '事前登録する',
    subscribe_sending: '送信中…',
    subscribe_success: 'ありがとうございます。リリース時に最初にお知らせします。',
    subscribe_already: 'このメールアドレスはすでに登録されています。',
    subscribe_error: '送信に失敗しました。時間をおいてもう一度お試しください。',
    footer_privacy: 'プライバシーポリシー',
    footer_terms: '利用規約',
    footer_contact: 'お問い合わせ',
    footer_news: 'お知らせ',
    footer_tokushoho: '特定商取引法',
    footer_tagline: '花ひらく',
  },
  'zh-TW': {
    nav_cta: '預先登錄 →',
    coming_soon: '即將推出',
    page_title: 'KAYA — 答案，就在你心中。',
    page_desc: '整合八字、紫微斗數與手相的每日東方命理 App。古典占術判定，AI 解說。預先登錄受理中。',
    h1: '答案，\n就在你心中。',
    h1_sub: '整合八字、紫微斗數與手相的每日東方命理 App。',
    reg_note: '1分鐘完成登錄。享有測試版專屬優惠。',
    pillars_title: '八字・紫微斗數・手相，合而為一。',
    register_title: '第一個\n養育你的命盤。',
    register_lead: '預先登錄的用戶，將享有以下專屬優惠：',
    gift_beta: 'Beta 測試者優先邀請',
    gift_beta_desc: '在正式上線前，搶先體驗 App',
    gift_premium: 'Premium 免費使用 1 個月',
    gift_premium_desc: '上線時可免費試用 Premium 功能',
    subscribe_btn: '立即預先登錄',
    subscribe_sending: '送出中…',
    subscribe_success: '感謝您的登錄！上線時我們將第一時間通知您。',
    subscribe_already: '此電子郵件已完成登錄。',
    subscribe_error: '送出失敗，請稍後再試一次。',
    footer_privacy: '隱私權政策',
    footer_terms: '使用條款',
    footer_contact: '聯絡我們',
    footer_news: '最新消息',
    footer_tokushoho: '特定商業交易法',
    footer_tagline: '花開呀',
  },
  en: {
    nav_cta: 'Pre-register →',
    coming_soon: 'COMING SOON',
    page_title: 'KAYA — The answer is within you.',
    page_desc: 'A daily Eastern-astrology app uniting Four Pillars, Zi Wei Dou Shu and palmistry. Classical astrology judges; AI explains. Pre-registration open.',
    h1: 'The answer is\nwithin you.',
    h1_sub: 'A daily Eastern astrology app uniting Four Pillars (BaZi), Zi Wei Dou Shu (Chinese/Taiwanese star reading) and palmistry.',
    reg_note: 'Registration takes a minute. Beta-tester perks included.',
    pillars_title: 'Four Pillars, Zi Wei Dou Shu, and palmistry — as one.',
    register_title: 'Be the first to\ngrow your chart.',
    register_lead: 'Pre-registrants receive the following perks:',
    gift_beta: 'Early beta invitation',
    gift_beta_desc: 'Try the app before launch',
    gift_premium: '1 month of Premium, free',
    gift_premium_desc: 'Try Premium free at launch',
    subscribe_btn: 'Pre-register',
    subscribe_sending: 'Sending…',
    subscribe_success: 'Thank you. We’ll notify you first at launch.',
    subscribe_already: 'This email is already registered.',
    subscribe_error: 'Submission failed. Please try again later.',
    footer_privacy: 'Privacy Policy',
    footer_terms: 'Terms of Service',
    footer_contact: 'Contact',
    footer_news: 'News',
    footer_tokushoho: 'Commercial Transactions Act',
    footer_tagline: 'In bloom',
  },
  ko: {
    nav_cta: '사전 등록 →',
    coming_soon: '출시 예정',
    page_title: 'KAYA — 답은, 당신 안에 있다.',
    page_desc: '사주명리・자미두수・손금을 통합한 매일의 동양 명리 앱. 고전 점술이 판정하고 AI가 해설합니다. 사전 등록 접수 중.',
    h1: '답은,\n당신 안에 있다.',
    h1_sub: '사주명리・자미두수(중국·대만의 별점)・손금을 통합한 매일의 동양 명리 앱.',
    reg_note: '등록은 1분. 베타 테스터 혜택 제공.',
    pillars_title: '사주명리・자미두수・손금이 하나로.',
    register_title: '가장 먼저\n당신의 명반을 키우다.',
    register_lead: '사전 등록하신 분께 다음 혜택을 드립니다:',
    gift_beta: '베타 테스터 우선 초대',
    gift_beta_desc: '출시 전에 앱을 가장 먼저 체험',
    gift_premium: 'Premium 1개월 무료',
    gift_premium_desc: '출시 시 Premium을 무료로 체험',
    subscribe_btn: '사전 등록하기',
    subscribe_sending: '전송 중…',
    subscribe_success: '감사합니다. 출시 시 가장 먼저 알려드리겠습니다.',
    subscribe_already: '이미 등록된 이메일입니다.',
    subscribe_error: '전송에 실패했습니다. 잠시 후 다시 시도해 주세요.',
    footer_privacy: '개인정보 처리방침',
    footer_terms: '이용약관',
    footer_contact: '문의',
    footer_news: '소식',
    footer_tokushoho: '특정상거래법 표기',
    footer_tagline: '꽃피다',
  },
};

// 多言語の出し分けヘルパ（インライン JSX 断片用・#242）。lang に無ければ en→ja の順でフォールバック。
function byLang(lang, m) { return m[lang] ?? m.en ?? m.ja; }

function T({ k }) {
  const lang = useLang();
  return LP_COPY[lang]?.[k] ?? LP_COPY['ja'][k] ?? k;
}

// ── 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 }) {
  const lang = useLang();
  const c = byLang(lang, {
    ja: {
      date: '5月23日', dow: '土曜 · 上弦の月', streak: '23日連続', condLabel: '今日の桃花コンディション', condVal: '桃花が満開',
      actLabel: '今日の所作', act: '鏡の前で3回ほほえむ', myChart: '私の命盤', litStars: '点灯した星',
      mood: '今日の気持ち', moods: ['ときめき', 'ほほえみ', '期待', 'おだやか'],
    },
    'zh-TW': {
      date: '5月23日', dow: '週六 · 上弦月', streak: '連續 23 天', condLabel: '今日桃花狀態', condVal: '桃花盛開',
      actLabel: '今日所作', act: '在鏡子前微笑三次', myChart: '我的命盤', litStars: '點亮的星',
      mood: '今日心情', moods: ['心動', '微笑', '期待', '平靜'],
    },
    en: {
      date: 'May 23', dow: 'Sat · First quarter', streak: '23-day streak', condLabel: 'Today’s peach-blossom', condVal: 'In full bloom',
      actLabel: 'Today’s ritual', act: 'Smile in the mirror 3 times', myChart: 'My chart', litStars: 'Lit stars',
      mood: 'Today’s mood', moods: ['Flutter', 'Smile', 'Hope', 'Calm'],
    },
    ko: {
      date: '5월 23일', dow: '토 · 상현달', streak: '23일 연속', condLabel: '오늘의 도화', condVal: '도화 만개',
      actLabel: '오늘의 행동', act: '거울 앞에서 3번 미소', myChart: '내 명반', litStars: '점등한 별',
      mood: '오늘의 기분', moods: ['설렘', '미소', '기대', '평온'],
    },
  });
  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,
            }}>{c.date}</div>
            <div style={{ fontSize: 7.5, color: '#7A6F85', letterSpacing: 1, marginTop: 2 }}>
              {c.dow}
            </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 }}>
              {c.streak}
            </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 }}>
                {c.condLabel}
              </div>
              <div style={{
                fontFamily: '"Noto Serif JP", serif',
                fontSize: 15, fontWeight: 600, color: '#3D3548', marginTop: 2, letterSpacing: 0.5,
              }}>{c.condVal}</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 }}>{c.actLabel}</span>
            {c.act}
          </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 }}>
              {c.myChart}
            </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 }}>{c.litStars}</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,
          }}>{c.mood}</div>
          <div style={{ display: 'flex', flexWrap: 'wrap', gap: 4 }}>
            {[
              { e: '💗', l: c.moods[0] },
              { e: '😊', l: c.moods[1] },
              { e: '✨', l: c.moods[2] },
              { e: '🌿', l: c.moods[3] },
            ].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 }) {
  const lang = useLang();
  const c = byLang(lang, {
    ja: { know: '自分を知る', litStars: '点灯した星', traits: ['直感力', '情熱', '安定感'] },
    'zh-TW': { know: '認識自己', litStars: '點亮的星', traits: ['直覺力', '熱情', '穩定感'] },
    en: { know: 'Know yourself', litStars: 'Lit stars', traits: ['Intuition', 'Passion', 'Stability'] },
    ko: { know: '나를 알다', litStars: '점등한 별', traits: ['직관력', '열정', '안정감'] },
  });
  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 }}>{byLang(lang, { ja: 'SELF · 自', 'zh-TW': 'SELF · 自', en: 'SELF', ko: 'SELF' })}</div>
            <div style={{ fontFamily: '"Noto Serif JP", serif', fontSize: 16, color: '#3D3548', fontWeight: 600, letterSpacing: 1, marginTop: 2 }}>{c.know}</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 }}>
          {c.litStars} <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: c.traits[0], bg: 'rgba(123,111,160,0.13)', c: '#5F558A' },
            { e: '🔥', l: c.traits[1],   bg: 'rgba(196,133,138,0.15)', c: '#A14F58' },
            { e: '🌿', l: c.traits[2], 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',
        }}>
          {byLang(lang, {
            ja: (<>あなたは<span style={{ color: '#A98A52', fontWeight: 700 }}>深く感じとる</span>力を持っている。<br/>深まる縁ほど、あなたを<span style={{ color: '#A98A52', fontWeight: 700 }}>輝かせる</span>。</>),
            'zh-TW': (<>你擁有<span style={{ color: '#A98A52', fontWeight: 700 }}>深刻感受</span>的力量。<br/>緣分越深，越能讓你<span style={{ color: '#A98A52', fontWeight: 700 }}>綻放光芒</span>。</>),
            en: (<>You have the power to <span style={{ color: '#A98A52', fontWeight: 700 }}>feel deeply</span>.<br/>The deeper the bond, the more it <span style={{ color: '#A98A52', fontWeight: 700 }}>makes you shine</span>.</>),
            ko: (<>당신은 <span style={{ color: '#A98A52', fontWeight: 700 }}>깊이 느끼는</span> 힘을 지녔습니다.<br/>인연이 깊어질수록 당신을 <span style={{ color: '#A98A52', fontWeight: 700 }}>빛나게</span> 합니다.</>),
          })}
        </div>
      </div>
    </PhoneFrame>
  );
}

function MockConnect({ width = 280 }) {
  const lang = useLang();
  const c = byLang(lang, {
    ja: {
      head: 'CONNECT · 縁', know: '縁を知る', todayEn: '今日の縁', meet: '🌸 新しい出会い',
      meetDesc: '今日は自分から話しかけると、縁がそっとつながる。', qrLabel: '◆ QR · 縁の相性',
      showMy: '私のQRを表示', scan: '相手のQRを読み取る',
    },
    'zh-TW': {
      head: 'CONNECT · 緣', know: '認識緣分', todayEn: '今日的緣分', meet: '🌸 新的相遇',
      meetDesc: '今天主動開口攀談，緣分會悄悄相連。', qrLabel: '◆ QR · 緣分相性',
      showMy: '顯示我的 QR', scan: '掃描對方的 QR',
    },
    en: {
      head: 'CONNECT', know: 'Know your connections', todayEn: 'Today’s connection', meet: '🌸 A new encounter',
      meetDesc: 'Speak up first today, and a connection quietly forms.', qrLabel: '◆ QR · Compatibility',
      showMy: 'Show my QR', scan: 'Scan their QR',
    },
    ko: {
      head: 'CONNECT', know: '인연을 알다', todayEn: '오늘의 인연', meet: '🌸 새로운 만남',
      meetDesc: '오늘은 먼저 말을 걸면 인연이 살며시 이어집니다.', qrLabel: '◆ QR · 궁합',
      showMy: '내 QR 표시', scan: '상대방 QR 스캔',
    },
  });
  return (
    <PhoneFrame width={width}>
      <div style={{ padding: '14px 14px' }}>
        <div style={{ marginBottom: 12 }}>
          <div style={{ fontSize: 7, color: '#A98A52', letterSpacing: 2, fontWeight: 700 }}>{c.head}</div>
          <div style={{ fontFamily: '"Noto Serif JP", serif', fontSize: 16, color: '#3D3548', fontWeight: 600, letterSpacing: 1, marginTop: 2 }}>{c.know}</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 }}>{c.todayEn}</div>
            <div style={{ fontFamily: '"Noto Serif JP", serif', fontSize: 12, color: '#3D3548', fontWeight: 600, marginTop: 1 }}>{c.meet}</div>
            <div style={{ fontSize: 8.5, color: '#5F5570', marginTop: 3, lineHeight: 1.45 }}>
              {c.meetDesc}
            </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 }}>
            {c.qrLabel}
          </div>
          <div style={{ fontFamily: '"Noto Serif JP", serif', fontSize: 14, color: '#3D1F2A', fontWeight: 600, letterSpacing: 1, lineHeight: 1.2, marginBottom: 10 }}>
            {byLang(lang, { ja: (<>友達と<br/>縁の相性を確かめる</>), 'zh-TW': (<>與朋友<br/>確認緣分相性</>), en: (<>Check compatibility<br/>with friends</>), ko: (<>친구와<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,
          }}>{c.showMy}</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)',
          }}>{c.scan}</div>
        </div>
      </div>
    </PhoneFrame>
  );
}

function MockFlow({ width = 280 }) {
  const gid = React.useId();
  const lang = useLang();
  const c = byLang(lang, {
    ja: { period: '今月 · 今年', flowTitle: '今月の縁の流れ', rising: '↑ 上昇中', strength: '縁の強さ', wave: '2026 縁の波', more: '🔒 この先を見る' },
    'zh-TW': { period: '本月 · 今年', flowTitle: '本月緣分流向', rising: '↑ 上升中', strength: '緣分強度', wave: '2026 緣分之波', more: '🔒 查看更多' },
    en: { period: 'This month · This year', flowTitle: 'This month’s flow', rising: '↑ Rising', strength: 'Bond strength', wave: '2026 wave of connection', more: '🔒 See ahead' },
    ko: { period: '이번 달 · 올해', flowTitle: '이번 달 인연 흐름', rising: '↑ 상승 중', strength: '인연 강도', wave: '2026 인연의 물결', more: '🔒 더 보기' },
  });
  return (
    <PhoneFrame width={width}>
      <div style={{ padding: '14px 14px' }}>
        <div style={{ marginBottom: 12 }}>
          <div style={{ fontSize: 7, color: '#A98A52', letterSpacing: 2, fontWeight: 700 }}>{byLang(lang, { ja: 'FLOW · 流', 'zh-TW': 'FLOW · 流', en: 'FLOW', ko: 'FLOW' })}</div>
          <div style={{ fontFamily: '"Noto Serif JP", serif', fontSize: 16, color: '#3D3548', fontWeight: 600, letterSpacing: 1, marginTop: 2 }}>{c.period}</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 }}>{byLang(lang, { ja: '2026 · 5月', 'zh-TW': '2026 · 5月', en: '2026 · May', ko: '2026 · 5월' })}</div>
              <div style={{ fontFamily: '"Noto Serif JP", serif', fontSize: 13, color: '#3D3548', fontWeight: 600, marginTop: 2 }}>{c.flowTitle}</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,
            }}>{c.rising}</div>
          </div>
          <div style={{ display: 'flex', justifyContent: 'space-between', marginBottom: 4 }}>
            <span style={{ fontSize: 7, color: '#7A6F85', letterSpacing: 1.5, fontWeight: 600 }}>{c.strength}</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 }}>{c.wave}</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,
          }}>{c.more}</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,
      // コピーの '\n' を意図どおりの改行として描画し（pre-line）、
      // CJK が文節の途中（例「あな｜たの中にある」）で折り返すのを防ぐ（keep-all）。
      // textWrap:balance は明示改行と競合し不自然な位置で折るため使わない。
      whiteSpace: 'pre-line', wordBreak: 'keep-all',
    }}>{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({ lang, setLang }) {
  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>
      <div style={{ display: 'flex', alignItems: 'center', gap: 10 }}>
        {/* 言語切替 */}
        <div style={{ display: 'flex', borderRadius: 999, overflow: 'hidden', boxShadow: '0 0 0 0.5px rgba(201,169,110,0.4)' }}>
          {[['ja','JP'],['zh-TW','中'],['en','EN'],['ko','한']].map(([code, label]) => (
            <button key={code} onClick={() => setLang(code)} style={{
              padding: '5px 12px', border: 'none', cursor: 'pointer',
              fontSize: 12, fontWeight: 600, letterSpacing: 1,
              background: lang === code ? 'rgba(201,169,110,0.85)' : 'rgba(255,255,255,0.7)',
              color: lang === code ? '#fff' : '#A98A52',
              transition: 'all 150ms ease',
            }}>{label}</button>
          ))}
        </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',
        }}><T k="nav_cta"/></a>
      </div>
    </nav>
  );
}

// 事前登録：Supabase Edge Function `kaya-preregister`（#62 / #160）。
// Mailchimp（beta_tester タグ付き登録）と Resend の確認メール送信をサーバー側で行う。
// verify_jwt:false の公開 Function のため Authorization 不要。重複登録は冪等 upsert で成功扱い。
const PREREGISTER_ENDPOINT = 'https://jumvpyscodxsdyfrvovl.supabase.co/functions/v1/kaya-preregister';

async function submitPreregistration(email) {
  const language = (typeof navigator !== 'undefined' && navigator.language) || 'ja';
  const res = await fetch(PREREGISTER_ENDPOINT, {
    method: 'POST',
    headers: { 'content-type': 'application/json' },
    body: JSON.stringify({ email, language }),
  });
  if (!res.ok) {
    const data = await res.json().catch(() => ({}));
    throw new Error(data.error || 'registration_failed');
  }
  return res.json();
}

function EmailForm({ size = 'lg', centered = false }) {
  const lang = useLang();
  const copy = LP_COPY[lang] || LP_COPY['ja'];
  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 = async (e) => {
    e.preventDefault();
    if (!email || status === 'loading') return;
    setStatus('loading');
    setErrMsg('');
    try {
      await submitPreregistration(email);
      setStatus('success');
    } catch {
      setStatus('error');
      setErrMsg(copy.subscribe_error || 'エラーが発生しました。時間をおいて再試行してください。');
    }
  };

  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>
        {copy.subscribe_success}
      </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={byLang(lang, { ja: 'メールアドレス', 'zh-TW': '電子郵件', en: 'Email address', ko: '이메일 주소' })}
          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' ? copy.subscribe_sending : copy.subscribe_btn}</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('登録済')
            ? copy.subscribe_already
            : errMsg || 'エラーが発生しました。'}
        </div>
      )}
    </div>
  );
}

function Hero() {
  const lang = useLang();
  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>{byLang(lang, { ja: 'Coming Soon · 事前登録受付中', 'zh-TW': 'Coming Soon · 預先登錄受理中', en: 'Coming Soon · Pre-registration open', ko: 'Coming Soon · 사전 등록 접수 중' })}</Kicker>
            <H1><T k="h1"/></H1>
            {/* フォームを H1 直下に移動（モバイルでもファーストビューに収める） */}
            <div>
              <EmailForm/>
              <div style={{
                marginTop: 10, fontFamily: '"Noto Sans JP", sans-serif',
                fontSize: 12, color: '#7A6F85', letterSpacing: 0.5,
              }}><T k="reg_note"/></div>
            </div>
            <div style={{
              fontFamily: '"Noto Sans JP", sans-serif',
              fontSize: 'clamp(13px, 1.5vw, 15px)', fontWeight: 500,
              color: '#7A6F85', letterSpacing: 0.5,
            }}>
              <T k="h1_sub"/>
            </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 lang = useLang();
  const items = byLang(lang, {
    ja: [
      { icon: 'chart', tag: '四柱推命 × 紫微斗数', title: 'あなたの基本図',
        body: '生年月日から導く、あなただけの命盤。四柱推命と紫微斗数が重なって、「軸」を浮かび上がらせます。' },
      { icon: 'blossom', tag: '桃花天気予報', title: '今日の縁の流れ',
        body: '気象予報のように、今日の桃花コンディションを一目で。ラッキーアクションは1日ひとつ、無理せず試せる。' },
      { icon: 'connect', tag: '相性診断', title: '友達・気になる人と',
        body: '生年月日を交換するだけで、二人の相性が見える。重い分析ではなく、軽やかな会話のきっかけに。' },
    ],
    'zh-TW': [
      { icon: 'chart', tag: '八字 × 紫微斗數', title: '你的基本命盤',
        body: '從生日推導出專屬於你的命盤。八字與紫微斗數交疊，浮現出你的「軸心」。' },
      { icon: 'blossom', tag: '桃花天氣預報', title: '今日的緣分流向',
        body: '像天氣預報一樣，一眼掌握今日的桃花狀態。幸運行動每天一個，輕鬆無負擔地嘗試。' },
      { icon: 'connect', tag: '相性診斷', title: '與朋友、心儀的人',
        body: '只要交換生日，就能看見兩人的相性。不是沉重的分析，而是輕鬆對話的開端。' },
    ],
    en: [
      { icon: 'chart', tag: 'BaZi × Zi Wei Dou Shu', title: 'Your core chart',
        body: 'Your own chart, derived from your birth date. Four Pillars and Zi Wei Dou Shu overlap to reveal your “axis.”' },
      { icon: 'blossom', tag: 'Peach-blossom forecast', title: 'Today’s flow of connection',
        body: 'Like a weather forecast, see today’s peach-blossom condition at a glance. One lucky action a day — easy to try, no pressure.' },
      { icon: 'connect', tag: 'Compatibility', title: 'With friends and someone you like',
        body: 'Just exchange birth dates to see your compatibility. Not a heavy analysis — a light spark for conversation.' },
    ],
    ko: [
      { icon: 'chart', tag: '사주 × 자미두수', title: '당신의 기본 명반',
        body: '생년월일에서 도출하는 당신만의 명반. 사주와 자미두수가 겹쳐 당신의 「축」을 떠오르게 합니다.' },
      { icon: 'blossom', tag: '도화 일기예보', title: '오늘의 인연 흐름',
        body: '일기예보처럼 오늘의 도화 상태를 한눈에. 행운의 행동은 하루 하나, 부담 없이 시도할 수 있습니다.' },
      { 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>{byLang(lang, { ja: '四柱推命・紫微斗数・手相が、ひとつになる。', 'zh-TW': '八字・紫微斗數・手相，合而為一。', en: 'Four Pillars, Zi Wei Dou Shu, and palmistry — as one.', ko: '사주명리・자미두수・손금이 하나로.' })}</H2>
          <GoldDivider/>
          <Lead center>
            {byLang(lang, { ja: (<>台湾と日本で受け継がれてきた東洋命理を、<br/>重くなく、軽すぎず。日々の所作の一部に。</>), 'zh-TW': (<>將台灣與日本傳承的東方命理，<br/>不沉重、也不輕浮，融入每日的生活所作。</>), en: (<>Eastern astrology passed down in Taiwan and Japan —<br/>neither heavy nor frivolous. Part of your daily ritual.</>), ko: (<>대만과 일본에서 이어져 온 동양 명리를,<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 lang = useLang();
  const steps = byLang(lang, {
    ja: [
      { n: '01', t: '開く', d: '通知を待つだけ。朝、今日の桃花コンディションが手元に届きます。' },
      { n: '02', t: '読む', d: '今日のラッキーアクションは一文だけ。試したら「やってみた」をタップ。' },
      { n: '03', t: '残す', d: '気づきは絵文字で記録。タップだけ、文字入力はゼロ。' },
    ],
    'zh-TW': [
      { n: '01', t: '開啟', d: '只需等待通知。早晨，今日的桃花狀態就會送達手中。' },
      { n: '02', t: '閱讀', d: '今日的幸運行動只有一句話。試過後點一下「我做了」。' },
      { n: '03', t: '記錄', d: '用表情符號記錄感受。只需點選，零文字輸入。' },
    ],
    en: [
      { n: '01', t: 'Open', d: 'Just wait for the notification. In the morning, today’s peach-blossom condition arrives in your hand.' },
      { n: '02', t: 'Read', d: 'Today’s lucky action is just one line. Tap “Did it” once you’ve tried it.' },
      { n: '03', t: 'Keep', d: 'Record how you felt with an emoji. Just a tap — zero typing.' },
    ],
    ko: [
      { n: '01', t: '열기', d: '알림을 기다리기만 하면 됩니다. 아침에 오늘의 도화 상태가 손안에 도착합니다.' },
      { n: '02', t: '읽기', d: '오늘의 행운 행동은 한 문장. 해봤다면 「해봤어요」를 탭.' },
      { n: '03', t: '남기기', d: '느낀 점은 이모지로 기록. 탭만, 문자 입력은 0.' },
    ],
  });
  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>{byLang(lang, { ja: (<>毎日30秒、<br/>自分が開花していく。</>), 'zh-TW': (<>每天30秒，<br/>讓自己綻放。</>), en: (<>30 seconds a day,<br/>and you bloom.</>), ko: (<>하루 30초,<br/>당신이 피어납니다.</>) })}</H2>
              <Lead>
                {byLang(lang, { ja: (<>100日後、あなたの命盤は満開に。<br/>急がない、競わない。「育てる命理」という新しい使い方。</>), 'zh-TW': (<>100天後，你的命盤將會盛開。<br/>不急躁、不競爭。「養育的命理」是全新的使用方式。</>), en: (<>In 100 days, your chart comes into full bloom.<br/>No rushing, no competing. “Astrology you grow” — a new way to use it.</>), ko: (<>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() {
  const lang = useLang();
  const chips = byLang(lang, {
    ja: [
      { l: 'オンデバイス処理',  s: '写真は端末から出ません' },
      { l: '匿名で事前登録',     s: '初期はメールアドレスのみ' },
      { l: 'いつでもデータ削除', s: 'ワンタップで全削除可能' },
    ],
    'zh-TW': [
      { l: '裝置內處理', s: '照片不離開裝置' },
      { l: '匿名預先登錄', s: '初期僅需電子郵件' },
      { l: '隨時刪除資料', s: '一鍵即可全部刪除' },
    ],
    en: [
      { l: 'On-device processing', s: 'Photos never leave your device' },
      { l: 'Anonymous pre-registration', s: 'Just an email at first' },
      { l: 'Delete data anytime', s: 'Wipe everything in one tap' },
    ],
    ko: [
      { l: '기기 내 처리', s: '사진은 기기 밖으로 나가지 않습니다' },
      { l: '익명 사전 등록', s: '초기에는 이메일만' },
      { l: '언제든 데이터 삭제', s: '원탭으로 전체 삭제 가능' },
    ],
  });
  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">{byLang(lang, { ja: (<>手相の写真は、<br/>送られません。</>), 'zh-TW': (<>手相的照片，<br/>不會被傳送。</>), en: (<>Palm photos<br/>are never sent.</>), ko: (<>손금 사진은,<br/>전송되지 않습니다.</>) })}</H2>
        <GoldDivider/>
        <Lead center color="rgba(248,245,240,0.78)" maxWidth={640}>
          {byLang(lang, {
            ja: (<>手相解析は、あなたの端末の中で処理する設計です。<br/>写真をサーバーに送ることはありません。<br/>KAYAが主に受け取るのは、生年月日と、あなたが書く小さな気づきです。</>),
            'zh-TW': (<>手相解析在你的裝置內處理。<br/>照片不會傳送到伺服器。<br/>KAYA 主要接收的，是生日與你寫下的小小感受。</>),
            en: (<>Palm analysis is processed inside your device.<br/>Photos are never sent to a server.<br/>What KAYA mainly receives is your birth date and the small notes you write.</>),
            ko: (<>손금 분석은 당신의 기기 안에서 처리됩니다.<br/>사진을 서버로 전송하지 않습니다.<br/>KAYA가 주로 받는 것은 생년월일과 당신이 적는 작은 기록입니다.</>),
          })}
        </Lead>
        <div style={{ marginTop: 8, display: 'flex', flexWrap: 'wrap', gap: 14, justifyContent: 'center' }}>
          {chips.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() {
  const lang = useLang();
  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>{byLang(lang, { ja: (<>古典占術が判定し、<br/>AIが分かりやすく解説します。</>), 'zh-TW': (<>由古典占術判定，<br/>AI 清楚易懂地解說。</>), en: (<>Classical astrology judges,<br/>and AI explains it clearly.</>), ko: (<>고전 점술이 판정하고,<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>
            {byLang(lang, {
              ja: (<>命理は当てるものではなく、<span style={{ color: '#A98A52', fontWeight: 600 }}>育てる</span>もの。<br/>あなたが毎日点す灯りが、<span style={{ color: '#A98A52', fontWeight: 600 }}>あなたの星盤</span>になります。</>),
              'zh-TW': (<>命理不是用來「說中」的，而是用來<span style={{ color: '#A98A52', fontWeight: 600 }}>養育</span>的。<br/>你每天點亮的燈火，將成為<span style={{ color: '#A98A52', fontWeight: 600 }}>你的星盤</span>。</>),
              en: (<>Astrology isn’t for “getting it right” — it’s for <span style={{ color: '#A98A52', fontWeight: 600 }}>nurturing</span>.<br/>The light you kindle each day becomes <span style={{ color: '#A98A52', fontWeight: 600 }}>your star chart</span>.</>),
              ko: (<>명리는 「맞히는」 것이 아니라 <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,
            }}>{byLang(lang, { ja: 'KAYA が大切にしている考え方', 'zh-TW': 'KAYA 珍視的理念', en: 'What KAYA values', ko: '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',
          }}>{byLang(lang, { ja: '紫微斗數全書・滴天髄など、明代の古典文献を根拠として', 'zh-TW': '以《紫微斗數全書》《滴天髓》等明代古典文獻為依據', en: 'Grounded in Ming-dynasty classics such as the Zi Wei Dou Shu Quanshu and Di Tian Sui', ko: '《자미두수전서》《적천수》 등 명대 고전 문헌을 근거로' })}</div>
        </div>

        <Lead center maxWidth={560}>
          {byLang(lang, {
            ja: (<>KAYA の判定は、数百年の歴史を持つ古典占術のルールに基づいて確定的に行われます。<br/>AIは判定を下しません。占術が出した結果を、あなたに分かりやすく届けるだけです。<br/><span style={{ fontSize: '0.9em', color: '#7A6F85' }}>根拠のある言葉だけを、あなたに。</span></>),
            'zh-TW': (<>KAYA 的判定，依據擁有數百年歷史的古典占術規則確定地進行。<br/>AI 不做判定，只把占術得出的結果清楚易懂地傳達給你。<br/><span style={{ fontSize: '0.9em', color: '#7A6F85' }}>只將有依據的話語，傳達給你。</span></>),
            en: (<>KAYA’s readings are made deterministically, based on the rules of classical astrology with centuries of history.<br/>The AI makes no judgments — it simply delivers the results to you in clear language.<br/><span style={{ fontSize: '0.9em', color: '#7A6F85' }}>Only grounded words, for you.</span></>),
            ko: (<>KAYA의 판정은 수백 년 역사를 지닌 고전 점술의 규칙에 따라 확정적으로 이루어집니다.<br/>AI는 판정하지 않습니다. 점술이 낸 결과를 알기 쉽게 전달할 뿐입니다.<br/><span style={{ fontSize: '0.9em', color: '#7A6F85' }}>근거 있는 말만, 당신에게.</span></>),
          })}
        </Lead>
      </div>
    </section>
  );
}

function Gallery() {
  const lang = useLang();
  const caps = byLang(lang, {
    ja: ['今日の桃花コンディション', '私を知る', '縁を知る', '今月・今年'],
    'zh-TW': ['今日桃花狀態', '認識自己', '認識緣分', '本月・今年'],
    en: ['Today’s peach-blossom condition', 'Know yourself', 'Know your connections', 'This month · This year'],
    ko: ['오늘의 도화 상태', '나를 알다', '인연을 알다', '이번 달・올해'],
  });
  const items = [
    { mock: <MockHome width={240}/>,    label: 'Home',    caption: caps[0] },
    { mock: <MockSelf width={240}/>,    label: 'Self',    caption: caps[1] },
    { mock: <MockConnect width={240}/>, label: 'Connect', caption: caps[2] },
    { mock: <MockFlow width={240}/>,    label: 'Flow',    caption: caps[3] },
  ];
  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>{byLang(lang, { ja: (<>四つの場所を行き来する、<br/>あなただけの命理。</>), 'zh-TW': (<>在四個場所之間往來，<br/>專屬於你的命理。</>), en: (<>Move between four places —<br/>astrology that’s yours alone.</>), ko: (<>네 곳을 오가는,<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 ─────────────────────────────────────────────────────────────
// FAQ_ITEMS_BY_LANG: ja / zh-TW 対応（§8-A 想定問答集より）
const FAQ_ITEMS_BY_LANG = {
  ja: [
    {
      category: 'アプリの基本',
      items: [
        { q: 'どんなアプリですか？', a: '四柱推命・紫微斗数などの東洋命理に基づき、あなたの命式と毎日の縁の流れを読むアプリです。日々使うことで命式が育っていく「育てる命理」を体験できます。' },
        { q: 'iOS・Android 両対応ですか？', a: 'はい。両プラットフォームに対応予定です。' },
        { q: 'リリースはいつですか？', a: '現在開発中です。事前登録いただいた方に最初にお知らせします。' },
      ],
    },
    {
      category: '占いの仕組み',
      items: [
        { q: 'AIが占うのですか？', a: 'いいえ。判定は古典占術のルールに基づいて確定的に行われます。AIは結果を分かりやすく言葉にするだけです。「AIが占う」ではなく「占術理論に基づいて判定し、AIが解説する」設計です。' },
        { q: '手相は必須ですか？', a: 'いいえ、オプションです。生年月日だけでも四柱推命・紫微斗数の全機能を利用できます。' },
        { q: '出生時間がわからなくても使えますか？', a: '使えます。出生時間がわかると紫微斗数の命盤が追加で開きますが、四柱推命（八字）の主要機能は出生時間なしでも正確に動作します。' },
        { q: '占い師の監修はありますか？', a: '現在は、明代の古典文献（滴天髄・三命通会・紫微斗數全書）を根拠としたルールエンジンで判定しています。詳しくは「専門家向け FAQ」をご覧ください。' },
      ],
    },
    {
      category: 'プライバシー',
      items: [
        { q: '生年月日はどこに保存されますか？', a: '生年月日はお使いの端末にのみ保存され、サーバーには送信されません。手相写真も端末内で処理しており、外部に送信しません。' },
        { q: 'データを削除できますか？', a: 'アプリ設定の「すべてのデータを消去」から即時削除できます。' },
      ],
    },
    {
      category: '料金・解約',
      items: [
        { q: '無料で使えますか？', a: '基本機能（今日の桃花コンディション・命式表示・縁の相性確認）は無料でご利用いただけます。Premiumでは年間チャート・合婚詳細レポートなどが解放されます。' },
        { q: '事前登録すると何がありますか？', a: 'βテスターとしてリリース前にアプリを最初に体験できます。また、Premiumを1ヶ月無料でお試しいただける特典を予定しています。' },
        { q: '解約方法は？', a: 'App Store（iPhone）またはGoogle Play（Android）のサブスクリプション管理画面から解約できます。KAYAアプリ内から直接解約する機能は現在準備中です。' },
      ],
    },
  ],
  'zh-TW': [
    {
      category: 'App 基本',
      items: [
        { q: '這是什麼 App？', a: '這是一款每日東方命理 App，結合八字、紫微斗數等命理學，讓您了解自己的命盤與每日緣分流動。透過每天使用，體驗「培育命盤」的樂趣。' },
        { q: '支援 iOS 和 Android 嗎？', a: '是的，預計兩個平台都會上線。' },
        { q: '什麼時候上線？', a: '目前正在開發中，預先登錄的用戶將第一時間收到通知。' },
      ],
    },
    {
      category: '命理推算機制',
      items: [
        { q: '是 AI 在算命嗎？', a: '不是。判斷結果是由基於古典命理規則的推算引擎確定性地計算出來的。AI 的角色只是將結果以淺顯易懂的文字呈現。設計是「命理理論判斷，AI 解說」，而非「AI 占卜」。' },
        { q: '不知道出生時間也可以使用嗎？', a: '可以。若知道出生時間，紫微斗數命盤將額外開放，但八字的主要功能在沒有出生時間的情況下也能正確運作。' },
        { q: '手相是必填的嗎？', a: '不是，手相為選填項目。只需生日即可使用八字・紫微斗數的全部功能。' },
        { q: '有命理師監修嗎？', a: '目前以明代古典文獻（滴天髓・三命通會・紫微斗數全書）為根據的規則引擎進行判斷。' },
      ],
    },
    {
      category: '隱私與資料',
      items: [
        { q: '生日會儲存在哪裡？', a: '生日只儲存在您的裝置中，不會傳送至伺服器。手相照片也在裝置內處理，不會傳送至外部。' },
        { q: '可以刪除資料嗎？', a: '可以。在 App 設定的「清除所有資料」中可立即刪除。' },
      ],
    },
    {
      category: '費用・解約',
      items: [
        { q: '可以免費使用嗎？', a: '基本功能（每日桃花指數・命盤顯示・緣分相性確認）免費提供。Premium 版可解鎖年度命盤・合婚詳細報告等進階功能。' },
        { q: '預先登錄有什麼好處？', a: '可作為 Beta 測試者在正式上線前搶先體驗 App，並可享有 Premium 1 個月免費試用的優惠。' },
        { q: '如何取消訂閱？', a: '請從 App Store（iPhone）或 Google Play（Android）的訂閱管理畫面取消。KAYA App 內直接取消的功能目前正在開發中。' },
      ],
    },
  ],
  en: [
    {
      category: 'App basics',
      items: [
        { q: 'What kind of app is this?', a: 'A daily Eastern-astrology app that reads your chart and the daily flow of your connections, based on Four Pillars (BaZi), Zi Wei Dou Shu and more. Using it daily, your chart grows — the experience of “astrology you nurture.”' },
        { q: 'Is it on both iOS and Android?', a: 'Yes. Both platforms are planned.' },
        { q: 'When does it launch?', a: 'It’s in development now. Pre-registrants will be the first to know.' },
      ],
    },
    {
      category: 'How it works',
      items: [
        { q: 'Does an AI do the divination?', a: 'No. Readings are made deterministically by the rules of classical astrology. The AI only puts the results into clear language — “classical theory judges, AI explains,” not “AI divines.”' },
        { q: 'Is a palm scan required?', a: 'No, it’s optional. You can use all Four Pillars and Zi Wei Dou Shu features with just your birth date.' },
        { q: 'Can I use it without my birth time?', a: 'Yes. With a birth time the Zi Wei Dou Shu chart additionally opens, but the core Four Pillars (BaZi) features work accurately without it.' },
        { q: 'Is it supervised by a fortune-teller?', a: 'Currently, readings run on a rule engine grounded in Ming-dynasty classics (Di Tian Sui, San Ming Tong Hui, Zi Wei Dou Shu Quanshu). See the expert FAQ for details.' },
      ],
    },
    {
      category: 'Privacy',
      items: [
        { q: 'Where is my birth date stored?', a: 'Your birth date is stored only on your device and is never sent to a server. Palm photos are also processed on-device and never sent externally.' },
        { q: 'Can I delete my data?', a: 'Yes — instantly, via “Erase all data” in the app settings.' },
      ],
    },
    {
      category: 'Pricing & cancellation',
      items: [
        { q: 'Is it free to use?', a: 'The core features (today’s peach-blossom condition, chart display, compatibility check) are free. Premium unlocks the yearly chart, the detailed compatibility report, and more.' },
        { q: 'What do I get by pre-registering?', a: 'You can try the app first as a beta tester before launch, plus a planned perk of one month of Premium free.' },
        { q: 'How do I cancel?', a: 'Cancel from the subscription management screen of the App Store (iPhone) or Google Play (Android). In-app cancellation within KAYA is in preparation.' },
      ],
    },
  ],
  ko: [
    {
      category: '앱 기본',
      items: [
        { q: '어떤 앱인가요?', a: '사주명리・자미두수 등 동양 명리에 기반해 당신의 명식과 매일의 인연 흐름을 읽는 앱입니다. 매일 사용하면 명식이 자라나는 「키우는 명리」를 경험할 수 있습니다.' },
        { q: 'iOS・Android 모두 지원하나요?', a: '네. 두 플랫폼 모두 지원 예정입니다.' },
        { q: '언제 출시되나요?', a: '현재 개발 중입니다. 사전 등록하신 분께 가장 먼저 알려드립니다.' },
      ],
    },
    {
      category: '점술 구조',
      items: [
        { q: 'AI가 점을 치나요?', a: '아니요. 판정은 고전 점술 규칙에 따라 확정적으로 이루어집니다. AI는 결과를 알기 쉽게 표현할 뿐입니다. 「AI가 점친다」가 아니라 「점술 이론으로 판정하고 AI가 해설한다」는 설계입니다.' },
        { q: '손금은 필수인가요?', a: '아니요, 선택입니다. 생년월일만으로 사주・자미두수의 모든 기능을 이용할 수 있습니다.' },
        { q: '출생 시간을 몰라도 사용할 수 있나요?', a: '사용할 수 있습니다. 출생 시간을 알면 자미두수 명반이 추가로 열리지만, 사주(팔자)의 주요 기능은 출생 시간 없이도 정확히 작동합니다.' },
        { q: '점술가의 감수가 있나요?', a: '현재는 명대 고전 문헌(적천수・삼명통회・자미두수전서)을 근거로 한 규칙 엔진으로 판정합니다. 자세한 내용은 「전문가용 FAQ」를 참고하세요.' },
      ],
    },
    {
      category: '프라이버시',
      items: [
        { q: '생년월일은 어디에 저장되나요?', a: '생년월일은 사용 기기에만 저장되며 서버로 전송되지 않습니다. 손금 사진도 기기 내에서 처리되어 외부로 전송하지 않습니다.' },
        { q: '데이터를 삭제할 수 있나요?', a: '네. 앱 설정의 「모든 데이터 삭제」에서 즉시 삭제할 수 있습니다.' },
      ],
    },
    {
      category: '요금・해지',
      items: [
        { q: '무료로 사용할 수 있나요?', a: '기본 기능(오늘의 도화 상태・명식 표시・인연 궁합 확인)은 무료로 이용할 수 있습니다. Premium에서는 연간 차트・합혼 상세 리포트 등이 열립니다.' },
        { q: '사전 등록하면 무엇이 있나요?', a: '베타 테스터로서 출시 전에 앱을 가장 먼저 체험할 수 있습니다. 또한 Premium을 1개월 무료로 체험할 수 있는 혜택을 예정하고 있습니다.' },
        { q: '해지 방법은?', a: 'App Store(iPhone) 또는 Google Play(Android)의 구독 관리 화면에서 해지할 수 있습니다. KAYA 앱 내에서 직접 해지하는 기능은 현재 준비 중입니다.' },
      ],
    },
  ],
};

// 後方互換: FAQ_ITEMS は ja を参照（既存参照があれば）
const FAQ_ITEMS = FAQ_ITEMS_BY_LANG['ja'];

function FAQ() {
  const lang = useLang();
  const items = FAQ_ITEMS_BY_LANG[lang] ?? FAQ_ITEMS_BY_LANG['ja'];
  const [open, setOpen] = React.useState({});
  const toggle = (id) => setOpen(prev => ({ ...prev, [id]: !prev[id] }));

  const faqTitle = byLang(lang, { ja: 'FAQ · よくある質問', 'zh-TW': '常見問題', en: 'FAQ', ko: 'FAQ · 자주 묻는 질문' });
  const faqH2 = byLang(lang, {
    ja: <span>気になることを<br/>まとめました。</span>,
    'zh-TW': <span>為您整理<br/>常見的疑問。</span>,
    en: <span>Common questions,<br/>answered.</span>,
    ko: <span>궁금한 점을<br/>정리했습니다.</span>,
  });

  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>{faqTitle}</Kicker>
        <H2 center>{faqH2}</H2>
        <GoldDivider/>

        <div style={{ width: '100%', maxWidth: 680 }}>
          {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() {
  const lang = useLang();
  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>{byLang(lang, { ja: 'BE THE FIRST · 事前登録', 'zh-TW': 'BE THE FIRST · 預先登錄', en: 'BE THE FIRST · Pre-register', ko: 'BE THE FIRST · 사전 등록' })}</Kicker>
        <H2 center>{byLang(lang, { ja: (<>あなたの命盤を、<br/>最初に育てる。</>), 'zh-TW': (<>第一個<br/>養育你的命盤。</>), en: (<>Be the first to<br/>grow your chart.</>), ko: (<>가장 먼저<br/>당신의 명반을 키우다.</>) })}</H2>
        <GoldDivider/>
        <Lead center maxWidth={520}>
          <T k="register_lead"/>
        </Lead>

        {/* 事前登録特典 */}
        <div style={{
          display: 'flex', gap: 12, flexWrap: 'wrap', justifyContent: 'center',
          maxWidth: 480, margin: '0 auto 8px',
        }}>
          {[
            { icon: '🌸', titleKey: 'gift_beta', descKey: 'gift_beta_desc' },
            { icon: '✨', titleKey: 'gift_premium', descKey: 'gift_premium_desc' },
          ].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,
              }}><T k={item.titleKey}/></div>
              <div style={{ fontSize: 11.5, color: '#7A6F85', lineHeight: 1.6 }}><T k={item.descKey}/></div>
            </div>
          ))}
        </div>

        <EmailForm centered/>

        <div style={{
          marginTop: 4, fontFamily: '"Noto Sans JP", sans-serif',
          fontSize: 12, color: '#7A6F85', letterSpacing: 0.5,
        }}>{byLang(lang, { ja: 'いつでも配信停止できます。いただいた情報はプライバシーポリシーに沿って取り扱います。', 'zh-TW': '您可以隨時取消訂閱。我們將依照隱私權政策處理您提供的資訊。', en: 'You can unsubscribe anytime. We handle your information in line with our Privacy Policy.', ko: '언제든 수신을 해지할 수 있습니다. 제공해 주신 정보는 개인정보 처리방침에 따라 취급합니다.' })}</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>{byLang(lang, { ja: '✦ 古典占術に基づく確定的判定', 'zh-TW': '✦ 基於古典占術的確定判定', en: '✦ Deterministic readings from classical astrology', ko: '✦ 고전 점술 기반의 확정적 판정' })}</span>
          <span>{byLang(lang, { ja: '✦ オンデバイス処理', 'zh-TW': '✦ 裝置內處理', en: '✦ On-device processing', ko: '✦ 기기 내 처리' })}</span>
          <span>{byLang(lang, { ja: '✦ 文字入力ゼロ', 'zh-TW': '✦ 零文字輸入', en: '✦ Zero typing', ko: '✦ 문자 입력 제로' })}</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,
            }}><T k="footer_tagline"/></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' }}><T k="footer_privacy"/></a>
          <a href="/terms.html" style={{ color: 'inherit', textDecoration: 'none' }}><T k="footer_terms"/></a>
          <a href="/tokushoho.html" style={{ color: 'inherit', textDecoration: 'none' }}><T k="footer_tokushoho"/></a>
          <a href="/support.html" style={{ color: 'inherit', textDecoration: 'none' }}><T k="footer_contact"/></a>
          <a href="/news.html" style={{ color: 'inherit', textDecoration: 'none' }}><T k="footer_news"/></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;
}
/* スマホ：言語スイッチャ4言語化で nav が詰まるため、ナビ右上の CTA は隠す（hero に登録フォームがあり冗長・#242） */
@media (max-width: 560px) {
  .lp-cta-pill { display: none; }
}

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 }}/>;
}

// 言語別の静的ページ（SNS/OGP・SEO 用・#242）。SNS クローラは JS 実行前の静的 HTML を
// 読むため、/en/ /ko/ /zh-tw/ の各ページに localized な <title>/og を静的に持たせ、
// 共通の kaya-lp.jsx を読み込んで表示言語を固定する。ルート(/)=ja。
const LANG_PATHS = { ja: '/', 'zh-TW': '/zh-tw/', en: '/en/', ko: '/ko/' };
function langFromPath(p) {
  if (!p) return null;
  if (p.startsWith('/en')) return 'en';
  if (p.startsWith('/ko')) return 'ko';
  if (p.startsWith('/zh')) return 'zh-TW';
  return null; // ルートは ja（または自動判定）
}

function LPApp() {
  const [lang, setLangState] = React.useState(() => {
    // ① ページが言語を明示（言語別静的ページ）→ 最優先
    if (typeof window !== 'undefined') {
      if (['ja', 'zh-TW', 'en', 'ko'].includes(window.__KAYA_LANG__)) return window.__KAYA_LANG__;
      const fromPath = langFromPath(window.location.pathname);
      if (fromPath) return fromPath;
    }
    // ② 手動切替の記憶（localStorage）
    try {
      const saved = localStorage.getItem('kaya_lang');
      if (saved && ['ja', 'zh-TW', 'en', 'ko'].includes(saved)) return saved;
    } catch { /* localStorage 不可環境は無視 */ }
    // ③ ブラウザ言語で自動判定（zh→繁体字 / ko→韓国語 / ja→日本語 / その他→英語）
    const nav = (navigator.language || 'en').toLowerCase();
    if (nav.startsWith('zh')) return 'zh-TW';
    if (nav.startsWith('ko')) return 'ko';
    if (nav.startsWith('ja')) return 'ja';
    return 'en';
  });
  // 手動切替：localStorage に記憶し、URL も言語パスへ更新（共有リンク・OGP を言語と一致させる）
  const setLang = (l) => {
    try { localStorage.setItem('kaya_lang', l); } catch { /* no-op */ }
    setLangState(l);
    try {
      const target = LANG_PATHS[l] || '/';
      const cur = window.location.pathname.replace(/index\.html$/, '');
      if (cur !== target) window.history.pushState({}, '', target);
    } catch { /* no-op */ }
  };
  // 戻る/進むで URL の言語に追従
  React.useEffect(() => {
    const onPop = () => { const l = langFromPath(window.location.pathname) || 'ja'; setLangState(l); };
    window.addEventListener('popstate', onPop);
    return () => window.removeEventListener('popstate', onPop);
  }, []);

  // タブのタイトル・<html lang>・meta description を言語連動で更新する（#242）。
  // ※ SNS シェアの OGP プレビューは crawler が JS 実行前の静的 HTML を読むため、
  //    そちらの多言語化は別対応（per-language ページ or SSR が必要）。
  React.useEffect(() => {
    const c = LP_COPY[lang] || LP_COPY.ja;
    const htmlLang = { ja: 'ja', 'zh-TW': 'zh-Hant', ko: 'ko', en: 'en' }[lang] || 'ja';
    if (c.page_title) document.title = c.page_title;
    document.documentElement.lang = htmlLang;
    const setMeta = (sel, val) => { const el = document.querySelector(sel); if (el && val) el.setAttribute('content', val); };
    setMeta('meta[name="description"]', c.page_desc);
    setMeta('meta[property="og:title"]', c.page_title);
    setMeta('meta[name="twitter:title"]', c.page_title);
    setMeta('meta[property="og:description"]', c.page_desc);
    setMeta('meta[name="twitter:description"]', c.page_desc);
  }, [lang]);

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

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