// sections3.jsx — Privacy, Beta, FAQ, Footer

/* ─── 6. Privacy ─── */
function Privacy() {
  const items = [
    { t: 'すべての記録は端末ローカルのみ', d: 'あなたが書いたものは、あなたのiPhoneから出ません。' },
    { t: 'サーバー送信ゼロ',                d: 'クラウド同期も、バックアップサーバーも、ありません。' },
    { t: '広告 SDK ゼロ',                  d: 'トラッキングも、広告のための行動分析も、行いません。' },
    { t: '第三者データ販売ゼロ',            d: 'あなたの記録は商品ではありません。永遠に。' },
    { t: '必要な権限は通知のみ',            d: '位置情報も、連絡先も、写真も、求めません。' },
  ];
  return (
    <section id="privacy" style={{ background: '#1F222D', color: '#EAE7E1' }}>
      <style>{`
        #privacy { --ink: #EAE7E1; --ink-soft: rgba(234,231,225,0.72); --ink-mute: rgba(234,231,225,0.5); --bg: #1F222D; --bg-card: rgba(255,255,255,0.04); --rule: rgba(234,231,225,0.12); --rule-strong: rgba(234,231,225,0.22); }
        html.dark #privacy { background: #0F1117 !important; --bg: #0F1117; }
      `}</style>
      <div className="wrap">
        <div data-priv style={{ display: 'grid', gridTemplateColumns: 'minmax(0, 0.9fr) minmax(0, 1.1fr)', gap: 80, alignItems: 'flex-start' }}>
          <Reveal>
            <span className="eyebrow" style={{ color: 'rgba(234,231,225,0.5)' }}>プライバシー</span>
            <h2 className="serif" style={{
              fontSize: 'clamp(32px, 5vw, 56px)', fontWeight: 400, lineHeight: 1.25,
              margin: '16px 0 22px', color: 'var(--ink)', letterSpacing: '0.005em',
            }}>あなたの記録は、<br/>この端末の中だけ。</h2>
            <p style={{ color: 'var(--ink-soft)', fontSize: 15, lineHeight: 1.95, maxWidth: '46ch' }}>
              メンタルヘルスと月経の記録は、極めてセンシティブな情報です。focyl はそれを徹底的に守ります。クラウドにも、私たちのサーバーにも、第三者にも、あなたのデータは渡りません。
            </p>
            <div style={{ marginTop: 32, display: 'flex', alignItems: 'center', gap: 14 }}>
              <div style={{
                width: 56, height: 56, borderRadius: 14, background: 'rgba(255,255,255,0.06)',
                display: 'flex', alignItems: 'center', justifyContent: 'center',
                border: '1px solid rgba(234,231,225,0.18)',
              }}>
                <svg width="24" height="28" viewBox="0 0 24 28" fill="none">
                  <path d="M12 2L3 6v8c0 6 4 10 9 12 5-2 9-6 9-12V6l-9-4z" stroke="currentColor" strokeWidth="1.5" fill="none"/>
                  <path d="M9 14l2 2 4-4" stroke="currentColor" strokeWidth="1.5" strokeLinecap="round" strokeLinejoin="round"/>
                </svg>
              </div>
              <div>
                <div style={{ fontSize: 13, color: 'var(--ink)', fontWeight: 500 }}>End-to-device</div>
                <div style={{ fontSize: 12, color: 'var(--ink-mute)' }}>あなたの端末の中だけで完結</div>
              </div>
            </div>
          </Reveal>

          <Reveal delay={120}>
            <ul style={{ listStyle: 'none', padding: 0, margin: 0 }}>
              {items.map((it, i) => (
                <li key={i} style={{
                  display: 'grid', gridTemplateColumns: '36px 1fr', gap: 16,
                  padding: '22px 0', borderTop: i ? '1px solid var(--rule)' : 'none',
                }}>
                  <span style={{
                    width: 28, height: 28, borderRadius: '50%',
                    background: 'var(--p-foll)', display: 'inline-flex',
                    alignItems: 'center', justifyContent: 'center', color: '#0F1117', fontSize: 14, fontWeight: 700,
                  }}>✓</span>
                  <div>
                    <div className="serif" style={{ fontSize: 18, color: 'var(--ink)', fontWeight: 500, letterSpacing: '0.005em' }}>{it.t}</div>
                    <div style={{ fontSize: 13, color: 'var(--ink-soft)', marginTop: 4, lineHeight: 1.7 }}>{it.d}</div>
                  </div>
                </li>
              ))}
            </ul>
          </Reveal>
        </div>
        <style>{`
          @media (max-width: 880px) {
            [data-priv] { grid-template-columns: 1fr !important; gap: 48px !important; }
          }
        `}</style>
      </div>
    </section>
  );
}

/* ─── 7. Beta signup ─── */
function Beta({ ctaMode }) {
  const [email, setEmail] = React.useState('');
  const [submitted, setSubmitted] = React.useState(false);
  return (
    <section id="beta" style={{ background: 'var(--bg-alt)' }}>
      <div className="wrap" style={{ maxWidth: 760 }}>
        <Reveal>
          <div style={{ textAlign: 'center', marginBottom: 40 }}>
            <div className="moon-row" style={{ justifyContent: 'center', marginBottom: 22, gap: 10 }}>
              {[0,2,4,6].map(p => <MoonGlyph key={p} phase={p} size={12} />)}
            </div>
            <span className="eyebrow">{ctaMode === 'beta' ? 'β テスター募集 · 30名限定' : 'App Store で公開中'}</span>
            <h2 className="serif" style={{
              fontSize: 'clamp(30px, 5vw, 50px)', fontWeight: 400,
              margin: '16px 0 18px', lineHeight: 1.3, color: 'var(--ink)', letterSpacing: '0.005em',
            }}>{ctaMode === 'beta' ? 'リリース前に、\nあなたの声を聞かせてください。' : '今すぐ、\n自分のリズムを知る。'}</h2>
            <p style={{ color: 'var(--ink-soft)', fontSize: 15, lineHeight: 1.9, maxWidth: '54ch', margin: '0 auto', whiteSpace: 'pre-line' }}>
              {ctaMode === 'beta'
                ? '2026年5月のリリースに向けて、TestFlight β を準備しています。\nADHDと月経周期の関係に向き合う、最初の30人を募集します。'
                : '2026年5月、App Store にて公開。\n端末ローカルのみ、広告なし、データ販売なし。'}
            </p>
          </div>
        </Reveal>

        <Reveal delay={100}>
          <div style={{
            background: 'var(--bg-card)', border: '1px solid var(--rule)',
            borderRadius: 18, padding: 28,
          }}>
            {ctaMode === 'beta' ? (
              !submitted ? (
                <form onSubmit={(e) => { e.preventDefault(); if (email) setSubmitted(true); }}>
                  <label style={{ fontSize: 12, color: 'var(--ink-soft)', display: 'block', marginBottom: 8, fontFamily: 'var(--mono)', letterSpacing: '0.06em' }}>EMAIL</label>
                  <div data-form-row style={{ display: 'grid', gridTemplateColumns: '1fr auto', gap: 10 }}>
                    <input
                      type="email" required value={email} onChange={(e) => setEmail(e.target.value)}
                      placeholder="you@example.com"
                      style={{
                        padding: '14px 18px', borderRadius: 12,
                        border: '1px solid var(--rule-strong)', background: 'var(--bg)',
                        color: 'var(--ink)', fontFamily: 'var(--sans)', fontSize: 14, outline: 'none',
                      }}
                      onFocus={(e) => e.target.style.borderColor = 'var(--ink)'}
                      onBlur={(e) => e.target.style.borderColor = 'var(--rule-strong)'}
                    />
                    <button type="submit" className="btn btn-primary">参加する →</button>
                  </div>
                  <div style={{ marginTop: 16, fontSize: 12, color: 'var(--ink-mute)', display: 'flex', gap: 16, flexWrap: 'wrap' }}>
                    <span>· iOS 17.0 以降</span>
                    <span>· 参加特典：リリース後1年間 Pro 機能無料</span>
                  </div>
                  <style>{`
                    @media (max-width: 520px) { [data-form-row] { grid-template-columns: 1fr !important; } }
                  `}</style>
                </form>
              ) : (
                <div style={{ textAlign: 'center', padding: '20px 0' }}>
                  <div style={{
                    width: 56, height: 56, margin: '0 auto 16px', borderRadius: '50%',
                    background: 'var(--p-foll)', display: 'flex', alignItems: 'center', justifyContent: 'center',
                    color: 'white', fontSize: 24,
                  }}>✓</div>
                  <div className="serif" style={{ fontSize: 22, color: 'var(--ink)', marginBottom: 8 }}>ありがとうございます。</div>
                  <p style={{ color: 'var(--ink-soft)', fontSize: 14 }}>
                    TestFlight への招待を、近日中にお送りします。
                  </p>
                </div>
              )
            ) : (
              <div data-store-row style={{ display: 'grid', gridTemplateColumns: '1fr 1fr', gap: 14 }}>
                <a href="#" className="btn btn-primary" style={{ justifyContent: 'center', padding: '18px 22px' }}>App Store</a>
                <a href="#" className="btn btn-ghost" style={{ justifyContent: 'center', padding: '18px 22px' }}>製品紹介を見る</a>
                <style>{`
                  @media (max-width: 520px) { [data-store-row] { grid-template-columns: 1fr !important; } }
                `}</style>
              </div>
            )}
          </div>
        </Reveal>
      </div>
    </section>
  );
}

/* ─── 8. FAQ ─── */
function FAQ() {
  const items = [
    { q: 'focyl は医療機器ですか？', a: 'いいえ。focyl は医療機器ではなく、診断や治療を行うものではありません。あくまで自己観察と、医師との対話を補助するためのツールです。診断や治療については必ず医療機関にご相談ください。' },
    { q: 'データは安全ですか？', a: 'すべての記録は、あなたの iPhone の中だけに保存されます。サーバーへの送信、クラウド同期、第三者へのデータ提供は一切ありません。広告 SDK も組み込まれていません。' },
    { q: '無料で使えますか？', a: 'はい。症状の記録、フェーズ表示、生理記録、夜の通知などのコア機能は完全無料でずっと使えます。ヒートマップやPDFレポート、黄体期警報などの高度な機能は Pro プラン（月額 ¥580 / 年額 ¥4,800）でご利用いただけます。Pro は7日間の無料トライアルでお試しいただけます。' },
    { q: '解約はできますか？', a: 'いつでも可能です。iOS の設定 → Apple ID → サブスクリプション から1タップで解約できます。トライアル期間中に解約すれば課金は発生しません。' },
    { q: '退会したらデータはどうなりますか？', a: '解約後も、Free ティアでアプリは引き続き使えます。記録データはすべて端末内に保存されているため、そのまま継続して見ることができます。' },
    { q: 'Android 版はありますか？', a: '現在のところ、iOS 専用です。需要を見ながら、Android 版についても検討していきます。' },
    { q: 'ADHD と診断されていなくても使えますか？', a: 'はい。月経周期によって集中力や気分が変わることに気づいている方であれば、診断の有無にかかわらずお使いいただけます。focyl はあくまで自己観察のツールです。' },
    { q: '17症状とは？', a: '実行機能（先延ばし、計画立案など）、注意（集中、忘れ物など）、感情（イライラ、落ち込みなど）、感覚（音や光への過敏さなど）、身体（疲労、頭痛など）の5ドメインに分かれた17の症状を、毎日のチェックインで記録します。' },
  ];
  const [open, setOpen] = React.useState(0);
  return (
    <section id="faq">
      <div className="wrap" style={{ maxWidth: 820 }}>
        <Reveal>
          <div className="section-head" style={{ textAlign: 'center' }}>
            <span className="eyebrow">よくある質問</span>
            <h2 style={{ marginTop: 16 }}>FAQ.</h2>
          </div>
        </Reveal>
        <div style={{ borderTop: '1px solid var(--rule)' }}>
          {items.map((it, i) => (
            <Reveal key={i} delay={i * 40}>
              <div style={{ borderBottom: '1px solid var(--rule)' }}>
                <button
                  onClick={() => setOpen(open === i ? -1 : i)}
                  style={{
                    width: '100%', padding: '24px 0',
                    background: 'transparent', border: 0, cursor: 'pointer',
                    display: 'flex', justifyContent: 'space-between', alignItems: 'center', gap: 20,
                    textAlign: 'left', color: 'var(--ink)', fontFamily: 'var(--serif)', fontSize: 18, fontWeight: 500,
                  }}>
                  <span>{it.q}</span>
                  <span style={{
                    width: 28, height: 28, borderRadius: '50%', border: '1px solid var(--rule-strong)',
                    display: 'inline-flex', alignItems: 'center', justifyContent: 'center',
                    transition: 'transform 240ms ease', transform: open === i ? 'rotate(45deg)' : 'rotate(0)',
                    color: 'var(--ink-soft)', flexShrink: 0,
                  }}>+</span>
                </button>
                <div style={{
                  maxHeight: open === i ? 400 : 0, overflow: 'hidden',
                  transition: 'max-height 360ms ease',
                }}>
                  <p style={{
                    margin: 0, padding: '0 0 26px 0',
                    color: 'var(--ink-soft)', fontSize: 14, lineHeight: 1.95, maxWidth: '64ch',
                  }}>{it.a}</p>
                </div>
              </div>
            </Reveal>
          ))}
        </div>
      </div>
    </section>
  );
}

/* ─── 9. Footer ─── */
function Footer() {
  return (
    <footer>
      <div className="wrap" data-foot style={{
        display: 'grid', gridTemplateColumns: 'minmax(0, 1.4fr) repeat(3, minmax(0, 1fr))',
        gap: 40, alignItems: 'flex-start',
      }}>
        <div>
          <div className="brand-mark" style={{ fontSize: 34, color: 'var(--ink)', display: 'inline-flex', alignItems: 'center', gap: 10 }}>
            <LogoMark size={28} color="var(--accent)" strokeWidth={1.8} />
            focyl
          </div>
          <p style={{ color: 'var(--ink-soft)', fontSize: 13, marginTop: 6, maxWidth: '36ch', lineHeight: 1.8 }}>
            集中の波を、月と一緒に。<br/>
            女性ADHD × 月経周期トラッカー。
          </p>
          <div className="moon-row" style={{ marginTop: 18, gap: 8 }}>
            {[0,1,2,3,4,5,6,7].map(p => <MoonGlyph key={p} phase={p} size={9} color="var(--ink-soft)" />)}
          </div>
        </div>

        <FootCol title="プロダクト" links={[['機能', '#features'], ['料金', '#pricing'], ['研究', '#research'], ['プライバシー', '#privacy'], ['FAQ', '#faq']]} />
        <FootCol title="リソース" links={[['プライバシーポリシー', '/privacy'], ['利用規約', '/terms'], ['お問い合わせ', '/contact']]} />
      </div>

      <div className="wrap" style={{
        display: 'flex', justifyContent: 'space-between', alignItems: 'center',
        marginTop: 56, paddingTop: 24, borderTop: '1px solid var(--rule)',
        color: 'var(--ink-mute)', fontSize: 12, flexWrap: 'wrap', gap: 12,
      }}>
        <span>© 2026 k3lab. すべての記録は、あなたの端末の中だけ。</span>
        <span style={{ fontFamily: 'var(--mono)' }}>v0.2 · 2026.05</span>
      </div>
      <style>{`
        @media (max-width: 720px) {
          [data-foot] { grid-template-columns: 1fr 1fr !important; }
        }
        @media (max-width: 480px) {
          [data-foot] { grid-template-columns: 1fr !important; }
        }
      `}</style>
    </footer>
  );
}
function FootCol({ title, links }) {
  return (
    <div>
      <div className="eyebrow" style={{ marginBottom: 14 }}>{title}</div>
      <ul style={{ listStyle: 'none', padding: 0, margin: 0, display: 'flex', flexDirection: 'column', gap: 10 }}>
        {links.map(([l, h], i) => (
          <li key={i}>
            <a href={h} style={{ color: 'var(--ink-soft)', textDecoration: 'none', fontSize: 13 }}>{l}</a>
          </li>
        ))}
      </ul>
    </div>
  );
}

Object.assign(window, { Privacy, Beta, FAQ, Footer });