// sections2.jsx — features, research, doctor report, privacy, beta, FAQ, footer

/* ─── 3. Three Core Features ─── */
function Features() {
  return (
    <section id="features">
      <div className="wrap">
        <Reveal>
          <div className="section-head" style={{ textAlign: 'center', marginBottom: 80 }}>
            <span className="eyebrow">3つのコア機能</span>
            <h2 style={{ marginTop: 16 }}>あなたの周期を、<br/>あなたのリズムとして読み解く。</h2>
          </div>
        </Reveal>

        <FeatureRow
          eyebrow="01 / 黄体期警報"
          pro
          title="嵐が来る前に、灯りを点ける。"
          body="排卵後の「黄体期後半」に入る3日前、focyl はそっと通知します。重要なタスクは今のうちに。新しい挑戦は、今は避ける。判断のための、ささやかな羅針盤です。"
          mock={<LutealAlertMock />}
          phase="lut2"
          reverse={false}
        />

        <FeatureRow
          eyebrow="02 / 集中ピーク予測"
          pro
          title="次に冴える日を、知っている。"
          body="エストロゲンが上昇する卵胞期は、集中力と記憶力が冴える時期。focyl は次のピークがいつ来るかを予測し、重要なプレゼンや新規プロジェクトをその週に寄せる手助けをします。"
          mock={<PeakForecastMock />}
          phase="foll"
          reverse={true}
        />

        <FeatureRow
          eyebrow="03 / フェーズ × ドメイン ヒートマップ"
          pro
          title="3周期で、自分のパターンが見える。"
          body="5周期フェーズ × 5症状ドメインの17症状を可視化。月経・卵胞・排卵・黄体前・黄体後 — それぞれの時期に、あなたの実行機能・注意・感情・感覚・身体がどう動くか。3周期分のデータで、ホルモン感受性ADHDのパターンが浮かび上がります。"
          mock={<HeatmapMock />}
          phase="lut1"
          reverse={false}
        />
      </div>
    </section>
  );
}

function FeatureRow({ eyebrow, title, body, mock, phase, reverse, pro }) {
  return (
    <Reveal>
      <div data-feat-row style={{
        display: 'grid', gridTemplateColumns: '1fr 1fr', gap: 80,
        alignItems: 'center', padding: '60px 0',
        direction: reverse ? 'rtl' : 'ltr',
      }}>
        <div style={{ direction: 'ltr' }}>
          <div style={{ display: 'flex', alignItems: 'center', gap: 10, marginBottom: 14 }}>
            <span className="eyebrow">{eyebrow}</span>
            {pro && <ProBadge size="sm" />}
          </div>
          <h3 className="serif" style={{
            fontSize: 'clamp(26px, 3.2vw, 36px)', fontWeight: 400,
            lineHeight: 1.35, margin: 0, color: 'var(--ink)', letterSpacing: '0.005em',
          }}>{title}</h3>
          <p style={{
            marginTop: 22, fontSize: 15, lineHeight: 1.95, color: 'var(--ink-soft)',
            maxWidth: '46ch',
          }}>{body}</p>
        </div>
        <div style={{ direction: 'ltr', display: 'flex', justifyContent: 'center' }}>{mock}</div>
      </div>
      <style>{`
        @media (max-width: 880px) {
          [data-feat-row] { grid-template-columns: 1fr !important; gap: 40px !important; direction: ltr !important; }
        }
      `}</style>
    </Reveal>
  );
}

/* mock: notification card */
function LutealAlertMock() {
  return (
    <div style={{ position: 'relative', width: 320 }}>
      <div style={{
        position: 'absolute', inset: '-30px',
        background: 'radial-gradient(closest-side, color-mix(in oklab, var(--p-lut2) 18%, transparent), transparent 70%)',
        zIndex: 0,
      }}/>
      <div style={{
        position: 'relative', zIndex: 1,
        background: 'var(--bg-card)', borderRadius: 18,
        border: '1px solid var(--rule)', padding: 18,
        boxShadow: '0 24px 60px -20px rgba(42,45,58,.22)',
      }}>
        <div style={{ display: 'flex', alignItems: 'center', gap: 10, marginBottom: 12 }}>
          <div style={{
            width: 36, height: 36, borderRadius: 9,
            background: 'var(--ink)', display: 'flex', alignItems: 'center', justifyContent: 'center',
          }}>
            <MoonGlyph size={20} phase={5} color="var(--bg-card)" />
          </div>
          <div style={{ flex: 1 }}>
            <div style={{ fontSize: 11, color: 'var(--ink-mute)', fontFamily: 'var(--mono)' }}>FOCYL · NOW</div>
            <div style={{ fontSize: 13, fontWeight: 500, color: 'var(--ink)' }}>黄体期警報</div>
          </div>
        </div>
        <div className="serif" style={{ fontSize: 17, color: 'var(--ink)', lineHeight: 1.55, marginBottom: 8 }}>
          あと3日で、黄体期後半に入ります。
        </div>
        <div style={{ fontSize: 13, color: 'var(--ink-soft)', lineHeight: 1.7 }}>
          重要なタスクは今のうちに。新しい挑戦は避けて、自分を労わる時間を。
        </div>
        <div style={{ marginTop: 14, display: 'flex', gap: 8 }}>
          <PhaseChip phase="lut1" label="今 · 黄体前" active />
          <span style={{ color: 'var(--ink-mute)', alignSelf: 'center' }}>→</span>
          <PhaseChip phase="lut2" label="3日後 · 黄体後" active />
        </div>
      </div>
    </div>
  );
}

/* mock: peak forecast */
function PeakForecastMock() {
  return (
    <div style={{ position: 'relative', width: 340 }}>
      <div style={{
        position: 'absolute', inset: '-30px',
        background: 'radial-gradient(closest-side, color-mix(in oklab, var(--p-foll) 16%, transparent), transparent 70%)',
        zIndex: 0,
      }}/>
      <div style={{
        position: 'relative', zIndex: 1,
        background: 'var(--bg-card)', borderRadius: 18,
        border: '1px solid var(--rule)', padding: 22,
        boxShadow: '0 24px 60px -20px rgba(42,45,58,.22)',
      }}>
        <div style={{ display: 'flex', justifyContent: 'space-between', alignItems: 'baseline', marginBottom: 4 }}>
          <span className="eyebrow" style={{ fontSize: 10 }}>集中ピーク予測</span>
          <span style={{ fontSize: 11, color: 'var(--ink-mute)', fontFamily: 'var(--mono)' }}>+5 days</span>
        </div>
        <div className="serif" style={{ fontSize: 28, fontWeight: 400, color: 'var(--ink)', letterSpacing: '0.005em', marginTop: 6 }}>
          5月14日 前後
        </div>
        <div style={{ fontSize: 13, color: 'var(--ink-soft)', marginTop: 4, marginBottom: 18 }}>
          あなたの集中力ピークがやってきます
        </div>

        {/* sine wave */}
        <svg viewBox="0 0 320 90" width="100%" height="90" style={{ display: 'block' }}>
          <defs>
            <linearGradient id="peakG" x1="0" x2="0" y1="0" y2="1">
              <stop offset="0" stopColor="var(--p-foll)" stopOpacity="0.30" />
              <stop offset="1" stopColor="var(--p-foll)" stopOpacity="0" />
            </linearGradient>
          </defs>
          <path d="M0,70 Q40,68 60,55 T120,30 T180,18 T240,40 T320,75 L320,90 L0,90 Z" fill="url(#peakG)" />
          <path d="M0,70 Q40,68 60,55 T120,30 T180,18 T240,40 T320,75" stroke="var(--p-foll)" strokeWidth="2" fill="none" strokeLinecap="round" />
          <circle cx="180" cy="18" r="6" fill="var(--bg-card)" stroke="var(--p-foll)" strokeWidth="2" />
          <text x="180" y="10" textAnchor="middle" fontSize="9" fontFamily="var(--mono)" fill="var(--ink-soft)">PEAK</text>
        </svg>
        <div style={{ display: 'flex', justifyContent: 'space-between', fontSize: 10, color: 'var(--ink-mute)', fontFamily: 'var(--mono)', marginTop: 4 }}>
          <span>今日</span><span>+7</span><span>+14</span><span>+21</span><span>+28</span>
        </div>
      </div>
    </div>
  );
}

/* mock: heatmap */
function HeatmapMock() {
  return (
    <div style={{ position: 'relative', width: 360 }}>
      <div style={{
        position: 'absolute', inset: '-30px',
        background: 'radial-gradient(closest-side, color-mix(in oklab, var(--accent) 12%, transparent), transparent 70%)',
        zIndex: 0,
      }}/>
      <div style={{
        position: 'relative', zIndex: 1,
        background: 'var(--bg-card)', borderRadius: 18,
        border: '1px solid var(--rule)', padding: 22,
        boxShadow: '0 24px 60px -20px rgba(42,45,58,.22)',
      }}>
        <div className="eyebrow" style={{ fontSize: 10, marginBottom: 14 }}>あなたのパターン · 過去3周期</div>
        <Heatmap />
        <div style={{ marginTop: 14, fontSize: 12, color: 'var(--ink-soft)', lineHeight: 1.7 }}>
          黄体期後半に「実行機能」と「注意」が落ち込む傾向 — あなたに見えてきた、静かなパターン。
        </div>
      </div>
    </div>
  );
}

/* ─── 4. Research ─── */
function Research() {
  const papers = [
    { authors: 'Wynchank D, Kooij JJS et al.', title: 'Menstrual Cycle-Related Hormonal Fluctuations in ADHD: Effect on Cognitive Functioning—A Narrative Review', journal: 'J Clin Med', year: '2026' },
    { authors: 'Dorani F et al.', title: 'Increased risk of provisional PMDD among females with ADHD: cross-sectional survey', journal: '', year: '2024' },
    { authors: 'de Jong M, Wynchank D et al.', title: 'A Female-Specific Treatment Group for ADHD', journal: 'J Atten Disord', year: '2024' },
    { authors: 'ADHD360 (UK)', title: '月経周期に合わせた投薬調整プログラムを開始', journal: '臨床プログラム報告', year: '2026' },
  ];
  return (
    <section id="research" style={{ background: 'var(--bg-alt)' }}>
      <div className="wrap">
        <Reveal>
          <div className="section-head" style={{ maxWidth: 720 }}>
            <span className="eyebrow">学術的根拠</span>
            <h2>精神医学の研究が、<br/>いま向き合いはじめた領域です。</h2>
            <p className="lead">2024〜2026年、女性ADHDとホルモン周期の関係についての研究が国内外で進みつつあります。focyl はこの研究の動きを、当事者の手元へ届けます。</p>
          </div>
        </Reveal>

        <div style={{ display: 'grid', gridTemplateColumns: 'repeat(auto-fit, minmax(280px, 1fr))', gap: 16, marginTop: 8 }}>
          {papers.map((p, i) => (
            <Reveal key={i} delay={i * 80}>
              <article style={{
                background: 'var(--bg-card)', border: '1px solid var(--rule)',
                borderRadius: 14, padding: '22px 22px 24px', height: '100%',
                display: 'flex', flexDirection: 'column', gap: 10,
              }}>
                <div style={{ display: 'flex', justifyContent: 'space-between', alignItems: 'center' }}>
                  <span className="eyebrow" style={{ fontSize: 10 }}>{p.year}</span>
                  <MoonGlyph size={10} phase={i % 8} color="var(--accent)" />
                </div>
                <h4 className="serif" style={{
                  fontSize: 16, lineHeight: 1.55, margin: 0, fontWeight: 500, color: 'var(--ink)',
                }}>{p.title}</h4>
                <div style={{ marginTop: 'auto', fontSize: 12, color: 'var(--ink-mute)', lineHeight: 1.6 }}>
                  {p.authors}{p.journal && <span> · {p.journal}</span>}
                </div>
              </article>
            </Reveal>
          ))}
        </div>
      </div>
    </section>
  );
}

/* ─── 5. Doctor Report ─── */
function DoctorReport() {
  return (
    <section id="report">
      <div className="wrap">
        <div data-doc-grid style={{ display: 'grid', gridTemplateColumns: '1fr 1fr', gap: 80, alignItems: 'center' }}>
          <Reveal>
            <div style={{ display: 'flex', alignItems: 'center', gap: 10, marginBottom: 16 }}>
              <span className="eyebrow">医師レポート</span>
              <ProBadge size="sm" />
            </div>
            <h2 className="serif" style={{
              fontSize: 'clamp(28px, 4vw, 44px)', fontWeight: 400,
              margin: '4px 0 22px', lineHeight: 1.35, color: 'var(--ink)',
            }}>診察を、もっと意味のあるものに。</h2>
            <p style={{ color: 'var(--ink-soft)', fontSize: 15, lineHeight: 1.95, maxWidth: '46ch' }}>
              診察時間は5〜15分。短い時間を最大限に活用するために、focyl はあなたの記録を1ページの PDF レポートにまとめます。
              フェーズごとの症状の変化、特に強く出ている時期、3周期分のパターン — 言葉にしづらいことを、図と数字で一緒に持っていけます。
            </p>
            <ul style={{ listStyle: 'none', padding: 0, margin: '24px 0 0', color: 'var(--ink-soft)', fontSize: 14 }}>
              {['周期グラフ + 症状ヒートマップ', '黄体期後半の傾向サマリー', 'A4 1枚 · 印刷向け', 'メールや AirDrop で共有'].map((t,i) => (
                <li key={i} style={{ display: 'flex', alignItems: 'flex-start', gap: 12, padding: '8px 0', borderTop: i ? '1px solid var(--rule)' : 'none' }}>
                  <span style={{ color: 'var(--accent)', fontFamily: 'var(--mono)', fontSize: 11, marginTop: 4 }}>0{i+1}</span>
                  <span>{t}</span>
                </li>
              ))}
            </ul>
            <p style={{ marginTop: 20, fontSize: 12, color: 'var(--ink-mute)', lineHeight: 1.7 }}>
              focyl は医療機器ではありません。診断・治療を行うものではなく、あくまで自己観察と、医師との対話を補助するためのツールです。
            </p>
          </Reveal>
          <Reveal delay={120}>
            <div style={{ display: 'flex', justifyContent: 'center' }}>
              <ReportMock />
            </div>
          </Reveal>
        </div>
        <style>{`
          @media (max-width: 880px) {
            [data-doc-grid] { grid-template-columns: 1fr !important; gap: 56px !important; }
          }
        `}</style>
      </div>
    </section>
  );
}

function ReportMock() {
  return (
    <Phone width={300} height={620}>
      {/* doc page */}
      <div style={{
        background: 'var(--bg-card)', border: '1px solid var(--rule)', borderRadius: 8,
        padding: 16, marginTop: 6, height: 'calc(100% - 16px)', overflow: 'hidden',
        boxShadow: '0 4px 14px -8px rgba(0,0,0,.15)',
      }}>
        <div style={{ display: 'flex', justifyContent: 'space-between', alignItems: 'baseline', marginBottom: 10 }}>
          <span className="brand-mark" style={{ fontSize: 18 }}>focyl</span>
          <span style={{ fontSize: 9, color: 'var(--ink-mute)', fontFamily: 'var(--mono)' }}>2026.05.15</span>
        </div>
        <div className="serif" style={{ fontSize: 13, color: 'var(--ink)', marginBottom: 4 }}>診察用レポート</div>
        <div style={{ fontSize: 9, color: 'var(--ink-mute)', marginBottom: 12, fontFamily: 'var(--mono)' }}>3 CYCLES · 84 DAYS</div>

        {/* mini ring */}
        <div style={{ display: 'flex', justifyContent: 'center', marginBottom: 8 }}>
          <PhaseRing size={108} day={22} currentPhase="lut1" />
        </div>

        <div style={{ fontSize: 9, color: 'var(--ink-mute)', fontFamily: 'var(--mono)', marginTop: 6, marginBottom: 6 }}>SYMPTOM PATTERN</div>
        <div style={{ transform: 'scale(0.78)', transformOrigin: 'top left', width: '128%' }}>
          <Heatmap />
        </div>
        <div style={{ fontSize: 9, color: 'var(--ink-mute)', fontFamily: 'var(--mono)', marginTop: 0 }}>NOTES</div>
        <div style={{ height: 4, background: 'var(--rule)', borderRadius: 2, marginTop: 4 }} />
        <div style={{ height: 4, background: 'var(--rule)', borderRadius: 2, marginTop: 4, width: '70%' }} />
      </div>
    </Phone>
  );
}

Object.assign(window, { Features, Research, DoctorReport });