// sections.jsx — page sections for focyl LP

const { useState: useStateS, useEffect: useEffectS } = React;

/* ─── Top Nav ─── */
function Nav({ ctaMode, onToggleDark, dark }) {
  return (
    <header style={{
      position: 'sticky', top: 0, zIndex: 50,
      background: 'color-mix(in oklab, var(--bg) 85%, transparent)',
      backdropFilter: 'blur(20px) saturate(160%)',
      WebkitBackdropFilter: 'blur(20px) saturate(160%)',
      borderBottom: '1px solid var(--rule)',
    }}>
      <div className="wrap" style={{ display: 'flex', alignItems: 'center', justifyContent: 'space-between', height: 64 }}>
        <a href="#top" className="brand-mark" style={{ fontSize: 26, color: 'var(--ink)', textDecoration: 'none', display: 'inline-flex', alignItems: 'center', gap: 8 }}>
          <LogoMark size={22} color="var(--accent)" strokeWidth={1.8} />
          focyl
        </a>
        <nav style={{ display: 'flex', gap: 28, alignItems: 'center' }}>
          <a href="#features" className="hide-mobile" style={navLink}>機能</a>
          <a href="#pricing"  className="hide-mobile" style={navLink}>料金</a>
          <a href="#research" className="hide-mobile" style={navLink}>研究</a>
          <a href="#privacy"  className="hide-mobile" style={navLink}>プライバシー</a>
          <a href="#faq"      className="hide-mobile" style={navLink}>FAQ</a>
          <button onClick={onToggleDark} aria-label="theme" style={{
            width: 32, height: 32, border: '1px solid var(--rule)', borderRadius: '50%',
            background: 'transparent', cursor: 'pointer', color: 'var(--ink)',
            display: 'inline-flex', alignItems: 'center', justifyContent: 'center', padding: 0,
          }}>
            <MoonGlyph size={12} phase={dark ? 4 : 1} />
          </button>
          <a href="#pricing" className="btn btn-primary" style={{ padding: '10px 18px', fontSize: 13 }}>
            無料で始める
          </a>
        </nav>
      </div>
      <style>{`
        @media (max-width: 720px) { .hide-mobile { display: none !important; } }
      `}</style>
    </header>
  );
}
const navLink = { color: 'var(--ink-soft)', textDecoration: 'none', fontSize: 13, fontWeight: 500 };

/* ─── 1. HERO ─── */
function Hero({ ctaMode }) {
  return (
    <section id="top" style={{ paddingTop: 80, paddingBottom: 60 }}>
      <div className="wrap" style={{
        display: 'grid', gridTemplateColumns: 'minmax(0, 1.1fr) minmax(0, 0.9fr)',
        gap: 64, alignItems: 'center',
      }} data-hero>
        <Reveal>
          <div className="moon-row" style={{ marginBottom: 28, gap: 12 }}>
            {[0,1,2,3,4,5,6,7].map(p => <MoonGlyph key={p} phase={p} size={14} />)}
          </div>
          <div className="eyebrow" style={{ marginBottom: 18 }}>女性ADHD × 月経周期</div>
          <h1 className="serif" style={{
            fontSize: 'clamp(40px, 6.5vw, 76px)',
            lineHeight: 1.18,
            margin: 0,
            fontWeight: 400,
            letterSpacing: '0.005em',
            color: 'var(--ink)',
          }}>
            集中の波を、<br/>月と一緒に。
          </h1>
          <p style={{
            marginTop: 28, marginBottom: 40,
            fontSize: 16, lineHeight: 1.95,
            color: 'var(--ink-soft)',
            maxWidth: '46ch',
          }}>
            女性のADHD症状は、月経周期で大きく変わる。<br/>
            それを<em style={{ fontStyle: 'normal', color: 'var(--ink)', fontWeight: 500 }}>記録し、可視化し</em>、医師との対話につなげる。<br/>
            ADHDと月経周期、両方に向き合うためのトラッカー。
          </p>
          <div style={{ display: 'flex', gap: 12, flexWrap: 'wrap' }}>
            <a href="#pricing" className="btn btn-primary">7日間 無料で始める →</a>
            <a href="#features" className="btn btn-ghost">機能を見る</a>
          </div>
          <div style={{ marginTop: 36, display: 'flex', gap: 18, alignItems: 'center', flexWrap: 'wrap' }}>
            <span className="pill"><span className="dot" style={{ background: 'var(--p-foll)' }} /> v0.2 · 2026.05 リリース</span>
            <span className="pill">iOS</span>
            <span className="pill" style={{ color: 'var(--ink-soft)' }}>端末ローカルのみ</span>
          </div>
        </Reveal>

        <Reveal delay={150}>
          <HeroPhone />
        </Reveal>
      </div>
      <style>{`
        @media (max-width: 880px) {
          [data-hero] { grid-template-columns: 1fr !important; gap: 56px !important; }
        }
      `}</style>
    </section>
  );
}

function HeroPhone() {
  return (
    <div style={{ display: 'flex', justifyContent: 'center', position: 'relative' }}>
      <div style={{
        position: 'absolute', inset: '-40px',
        background: 'radial-gradient(closest-side, color-mix(in oklab, var(--accent) 14%, transparent), transparent 70%)',
        pointerEvents: 'none', zIndex: 0,
      }}/>
      <div style={{ position: 'relative', zIndex: 1 }}>
        <Phone width={300} height={620}>
          <div style={{ marginTop: 8 }}>
            <div className="eyebrow" style={{ fontSize: 9, marginBottom: 2 }}>FRI · 5月15日</div>
            <div className="serif" style={{ fontSize: 22, fontWeight: 400, color: 'var(--ink)', letterSpacing: '0.01em' }}>こんにちは、Mio</div>
          </div>

          {/* phase ring */}
          <div style={{ display: 'flex', justifyContent: 'center', margin: '14px 0 6px' }}>
            <PhaseRing size={186} currentPhase="lut1" day={22} />
          </div>

          {/* phase indicator */}
          <div style={{ textAlign: 'center', marginBottom: 14 }}>
            <PhaseChip phase="lut1" label="黄体期前半" active />
          </div>

          {/* card: forecast */}
          <div style={{
            background: 'var(--bg-card)', border: '1px solid var(--rule)', borderRadius: 14,
            padding: '12px 14px', marginBottom: 10,
          }}>
            <div className="eyebrow" style={{ fontSize: 9, marginBottom: 4 }}>あと 3 日</div>
            <div className="serif" style={{ fontSize: 14, color: 'var(--ink)', lineHeight: 1.45 }}>
              黄体期後半に入ります。<br/>新しい挑戦は今のうちに。
            </div>
          </div>

          {/* check-in CTA */}
          <button style={{
            width: '100%', padding: '12px 14px',
            background: 'var(--ink)', color: 'var(--bg)',
            border: 0, borderRadius: 12, fontFamily: 'var(--sans)', fontWeight: 500, fontSize: 13,
            display: 'flex', alignItems: 'center', justifyContent: 'space-between',
          }}>
            <span>今日のチェックイン</span>
            <span style={{ opacity: 0.7 }}>→</span>
          </button>
        </Phone>
      </div>
    </div>
  );
}

/* ─── 2. Why focyl — comparison ─── */
function Comparison() {
  const rows = [
    { name: 'Tiimo · Inflow など', sub: 'ADHD向けアプリ',  cycle: false, adhd: true,  brand: false },
    { name: 'ルナルナ · Clue など', sub: '月経周期アプリ', cycle: true,  adhd: false, brand: false },
    { name: 'せるふも · ベル',      sub: 'PMDDアプリ',      cycle: true,  adhd: false, brand: false },
    { name: 'focyl',               sub: '',                 cycle: true,  adhd: true,  brand: true  },
  ];
  return (
    <section id="why" style={{ background: 'var(--bg-alt)' }}>
      <div className="wrap">
        <Reveal>
          <div className="section-head">
            <span className="eyebrow">なぜ focyl が必要か</span>
            <h2>静かに見過ごされてきた、<br/>ふたつの領域の重なりへ。</h2>
            <p className="lead">日本の App Store を調べた限り、「女性ADHD」と「月経周期」の両方を扱うアプリは見当たりませんでした。focyl はその重なりに正面から向き合うために作られています。</p>
          </div>
        </Reveal>

        <Reveal delay={100}>
          <div style={{
            background: 'var(--bg-card)', border: '1px solid var(--rule)',
            borderRadius: 18, overflow: 'hidden',
          }}>
            <div style={{
              display: 'grid', gridTemplateColumns: 'minmax(0, 1.6fr) minmax(0, 1fr) minmax(0, 1fr)',
              padding: '20px 28px', borderBottom: '1px solid var(--rule)',
              fontSize: 11, color: 'var(--ink-mute)', fontFamily: 'var(--mono)', letterSpacing: '0.08em', textTransform: 'uppercase',
            }} data-cmp-row>
              <div></div>
              <div style={{ textAlign: 'center' }}>ホルモン周期</div>
              <div style={{ textAlign: 'center' }}>ADHD症状</div>
            </div>
            {rows.map((r, i) => (
              <div key={r.name} style={{
                display: 'grid', gridTemplateColumns: 'minmax(0, 1.6fr) minmax(0, 1fr) minmax(0, 1fr)',
                alignItems: 'center', padding: '22px 28px',
                borderBottom: i < rows.length - 1 ? '1px solid var(--rule)' : 'none',
                background: r.brand ? 'color-mix(in oklab, var(--accent-soft) 50%, transparent)' : 'transparent',
              }} data-cmp-row>
                <div>
                  <div className={r.brand ? 'brand-mark' : 'serif'} style={{
                    fontSize: r.brand ? 28 : 16,
                    color: 'var(--ink)',
                    fontWeight: r.brand ? 300 : 500,
                    lineHeight: 1.2,
                  }}>{r.name}</div>
                  {r.sub && <div style={{ fontSize: 12, color: 'var(--ink-mute)', marginTop: 2 }}>{r.sub}</div>}
                </div>
                <div style={{ textAlign: 'center' }}><Mark on={r.cycle} /></div>
                <div style={{ textAlign: 'center' }}><Mark on={r.adhd} /></div>
              </div>
            ))}
          </div>
          <p style={{ marginTop: 24, color: 'var(--ink-soft)', fontSize: 14, textAlign: 'center', lineHeight: 1.8 }}>
            これまで分かれていた2つの領域を、focyl が静かにつなぎます。
          </p>
        </Reveal>
        <style>{`
          @media (max-width: 640px) {
            [data-cmp-row] { grid-template-columns: minmax(0, 1.4fr) 56px 56px !important; padding-left: 18px !important; padding-right: 18px !important; }
          }
        `}</style>
      </div>
    </section>
  );
}

function Mark({ on }) {
  if (on) return (
    <span style={{
      display: 'inline-flex', width: 28, height: 28, borderRadius: '50%',
      background: 'var(--p-foll)', color: 'white',
      alignItems: 'center', justifyContent: 'center', fontSize: 14, fontWeight: 600,
    }}>✓</span>
  );
  return (
    <span style={{
      display: 'inline-flex', width: 28, height: 28, borderRadius: '50%',
      border: '1px dashed var(--rule-strong)', color: 'var(--ink-mute)',
      alignItems: 'center', justifyContent: 'center', fontSize: 13,
    }}>—</span>
  );
}

Object.assign(window, { Nav, Hero, Comparison });