// hero.jsx — Hero + Nav + 비교 카드 (한국어 우선, 일반인 친화)
const { useState, useEffect, useRef } = React;

function Nav({ lang, setLang }) {
  const t = (ko, en) => (lang === 'ko' ? ko : en);
  return (
    <nav className="nav">
      <div className="container nav-inner">
        <a className="brand" href="#top">
          <span className="brand-mark">命</span>
          <span className="brand-name">묘운 사주 <em>· mildo</em></span>
        </a>
        <div className="nav-links">
          <a className="nav-link hide-sm" href="#problem">{t('왜 필요한가', 'Why')}</a>
          <a className="nav-link hide-sm" href="#features">{t('무엇을 해주나', 'Features')}</a>
          <a className="nav-link hide-sm has-pill" href="#demo">{t('직접 보기', 'Demo')}</a>
          <a className="nav-link hide-sm" href="#personas">{t('사용 방법', 'Use cases')}</a>
          <a className="nav-link hide-sm" href="#faq">{t('자주 묻는 질문', 'FAQ')}</a>
          <a className="nav-cta" href="#cta">
            {t('묘운 앱 받기', 'Get the app')}
            <span className="btn-arrow">→</span>
          </a>
        </div>
      </div>
    </nav>
  );
}

function Pillar({ char, rom, pos, mismatch }) {
  return (
    <div className="pillar" data-mismatch={mismatch ? 'y' : 'n'}>
      <span className="pillar-char">{char}</span>
      <div className="pillar-rom">{rom}</div>
      <div className="pillar-pos">{pos}</div>
    </div>
  );
}

function Hero({ lang }) {
  const t = (ko, en) => (lang === 'ko' ? ko : en);

  const aiPillars = [
    { char: '壬', rom: 'im', pos: '연주' },
    { char: '午', rom: 'o',  pos: '월주', mismatch: true },
    { char: '午', rom: 'o',  pos: '일주', mismatch: true },
    { char: '未', rom: 'mi', pos: '시주' },
  ];
  const myounPillars = [
    { char: '壬', rom: 'im',  pos: '연주' },
    { char: '乙', rom: 'eul', pos: '월주' },
    { char: '庚', rom: 'gyeong', pos: '일주' },
    { char: '癸', rom: 'gye', pos: '시주' },
  ];
  const posEn = ['YEAR', 'MONTH', 'DAY', 'HOUR'];
  const ap = aiPillars.map((p, i) => ({ ...p, pos: lang === 'ko' ? p.pos : posEn[i] }));
  const mp = myounPillars.map((p, i) => ({ ...p, pos: lang === 'ko' ? p.pos : posEn[i] }));

  return (
    <header className="hero" id="top">
      <div className="container">
        <div className="hero-grid">
          <div>
            <div className="eyebrow">
              <span className="dot"></span>
              <span>
                <strong>{t('국내 최초', 'Korea-first')}</strong>
                {t(' · 한국천문연구원(KASI) 만세력 검증 ', ' · KASI-verified almanac ')}
                <b>145</b>/<b>145</b>
              </span>
            </div>

            <h1>
              {lang === 'ko' ? (
                <React.Fragment>
                  <span className="ink-hanja">命</span>
                  당신의 사주, <span className="underline">분(分) 단위</span>까지 정확하게.
                </React.Fragment>
              ) : (
                <React.Fragment>
                  <span className="ink-hanja">四柱</span>
                  Your <span className="underline">minute-precise</span> Korean Saju.
                </React.Fragment>
              )}
            </h1>

            <p className="sub">
              {t(
                '시중 AI 챗봇은 절기 시각을 모릅니다. 묘운은 한국천문연구원의 정밀 만세력을 그대로 쓰고, 8명의 명리학자 화법으로 따뜻하게 풀이합니다.',
                'Off-the-shelf AI chatbots don’t know solar-term timing. Myoun uses the Korean Astronomy Institute almanac and reads it back in the voice of eight Korean myeongri scholars.'
              )}
            </p>

            <div className="hero-ctas">
              <a className="btn btn-lg btn-amethyst" href="#cta">
                <svg width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2.2" strokeLinecap="round" strokeLinejoin="round"><path d="M21 11.5a8.38 8.38 0 0 1-.9 3.8 8.5 8.5 0 0 1-7.6 4.7 8.38 8.38 0 0 1-3.8-.9L3 21l1.9-5.7a8.38 8.38 0 0 1-.9-3.8 8.5 8.5 0 0 1 4.7-7.6 8.38 8.38 0 0 1 3.8-.9h.5a8.48 8.48 0 0 1 8 8v.5z"/></svg>
                {t('묘운 앱 무료로 받기', 'Get the free Myoun app')}
              </a>
              <a className="btn btn-lg btn-ghost" href="#dev">
                {t('개발자 — 5초 연동', 'Developers — 5-sec install')}
              </a>
            </div>

            <div className="hero-meta">
              <span><b>무료</b> · {t('광고 없음', 'no ads')}</span>
              <span className="sep">|</span>
              <span><b>121건</b> {t('정밀 검증', 'cases benchmarked')}</span>
              <span className="sep">|</span>
              <span><b>5단</b> {t('안전 장치', 'safety gates')}</span>
            </div>
          </div>

          <div className="compare">
            <div className="compare-title">
              {t('같은 사람', 'Same person')}
              <span className="input-chip">1992-05-25 · 14:30 · 서울</span>
              {t('· 다른 결과', '· different chart')}
            </div>

            <div className="compare-pair">
              <div className="cmp-card bad">
                <div className="cmp-head">
                  <span className="label">{t('일반 AI 챗봇', 'Generic AI chatbot')}</span>
                  <span className="cmp-tag bad">{t('오답', 'wrong')}</span>
                </div>
                <div className="pillars">
                  {ap.map((p, i) => <Pillar key={i} {...p} />)}
                </div>
                <div className="cmp-note">
                  {t(
                    <React.Fragment>월주·일주 두 자가 <b>잘못된 글자</b>. 절기 시각을 모릅니다.</React.Fragment>,
                    <React.Fragment><b>Wrong month/day stems</b> — no solar-term timing.</React.Fragment>
                  )}
                </div>
              </div>

              <div className="cmp-card good">
                <div className="cmp-head">
                  <span className="label">{t('묘운 사주', 'Myoun Saju')}</span>
                  <span className="cmp-tag good">{t('정확', 'verified')}</span>
                </div>
                <div className="pillars">
                  {mp.map((p, i) => <Pillar key={i} {...p} />)}
                </div>
                <div className="cmp-note">
                  {t(
                    <React.Fragment><b>분 단위 정확.</b> 1900–2050 입춘 시각을 그대로 사용합니다.</React.Fragment>,
                    <React.Fragment><b>Minute-precise.</b> Uses the KASI 立春 timestamp directly.</React.Fragment>
                  )}
                </div>
              </div>
            </div>

            <div className="diff-bar">
              <span className="diff-pulse"></span>
              {t('두 글자가 다릅니다 — 사주 전체 흐름이 바뀝니다.',
                 'Two characters differ — the whole chart shifts.')}
            </div>
          </div>
        </div>

        <div className="trust-row">
          <span className="trust-label">{t('검증 · 호환', 'Verified & compatible')}</span>
          <span className="trust-item"><Icon name="check" /> {t('한국천문연구원 만세력', 'KASI almanac')}</span>
          <span className="trust-item"><Icon name="shield" /> {t('자살예방법 §19-3 매핑', 'Suicide-Prevention Act §19-3')}</span>
          <span className="trust-item"><Icon name="book" /> {t('명리학자 8인 화법', '8-scholar voice')}</span>
          <span className="trust-item"><Icon name="lock" /> {t('14일 자동 삭제', '14-day auto-purge')}</span>
        </div>
      </div>
    </header>
  );
}

function Icon({ name }) {
  const props = { width: 14, height: 14, viewBox: "0 0 24 24", fill: "none", stroke: "currentColor", strokeWidth: 2, strokeLinecap: "round", strokeLinejoin: "round" };
  switch (name) {
    case 'check':    return <svg {...props}><path d="M20 6L9 17l-5-5"/></svg>;
    case 'shield':   return <svg {...props}><path d="M12 22s8-4 8-10V5l-8-3-8 3v7c0 6 8 10 8 10z"/></svg>;
    case 'book':     return <svg {...props}><path d="M4 19.5A2.5 2.5 0 0 1 6.5 17H20V3H6.5A2.5 2.5 0 0 0 4 5.5v14z"/><path d="M4 19.5V22h16"/></svg>;
    case 'lock':     return <svg {...props}><rect x="3" y="11" width="18" height="11" rx="2"/><path d="M7 11V7a5 5 0 0 1 10 0v4"/></svg>;
    case 'copy':     return <svg {...props}><rect x="9" y="9" width="13" height="13" rx="2"/><path d="M5 15V5a2 2 0 0 1 2-2h10"/></svg>;
    case 'star':     return <svg {...props}><polygon points="12 2 15 9 22 9.3 17 14 18.5 21 12 17.5 5.5 21 7 14 2 9.3 9 9 12 2"/></svg>;
    default: return null;
  }
}

window.Nav = Nav;
window.Hero = Hero;
window.Icon = Icon;