// sections4.jsx — Pricing section + Pro badge

function ProBadge({ size = 'sm', style = {} }) {
  const sizes = {
    sm: { fs: 9,  px: 7,  py: 2 },
    md: { fs: 10, px: 9,  py: 3 },
    lg: { fs: 11, px: 11, py: 4 },
  };
  const s = sizes[size] || sizes.sm;
  return (
    <span style={{
      display: 'inline-flex', alignItems: 'center', gap: 4,
      padding: `${s.py}px ${s.px}px`, borderRadius: 4,
      background: 'var(--accent)', color: 'white',
      fontSize: s.fs, fontFamily: 'var(--mono)', letterSpacing: '0.1em',
      fontWeight: 600, textTransform: 'uppercase',
      ...style,
    }}>
      <MoonGlyph size={s.fs - 1} phase={5} color="white" />
      Pro
    </span>
  );
}

function Pricing() {
  return (
    <section id="pricing" style={{ background: 'var(--bg-alt)' }}>
      <div className="wrap" style={{ maxWidth: 1000 }}>
        <Reveal>
          <div className="section-head" style={{ textAlign: 'center', maxWidth: 640, margin: '0 auto 56px' }}>
            <span className="eyebrow">料金プラン</span>
            <h2 style={{ marginTop: 16 }}>自分のリズムを、<br/>もっと深く知る。</h2>
            <p className="lead" style={{ margin: '18px auto 0' }}>
              コア機能はずっと無料。focyl らしさを最大化する3つの差別化機能と医師レポートは Pro で解放されます。
            </p>
          </div>
        </Reveal>

        <div data-price-grid style={{
          display: 'grid', gridTemplateColumns: '1fr 1fr', gap: 20, alignItems: 'stretch',
        }}>
          {/* FREE */}
          <Reveal>
            <PriceCard
              tag="ずっと無料"
              tagColor="var(--ink-mute)"
              name="Free"
              price="¥0"
              priceSub="ずっと無料"
              features={[
                '症状の毎日チェックイン（17症状）',
                'フェーズ表示（今日が周期のどこか）',
                '生理記録',
                '夜のチェックイン通知（21時）',
                'ADHDロード概要',
              ]}
              cta="今すぐ始める"
              ctaHref="#beta"
              ctaStyle="ghost"
              accent={false}
            />
          </Reveal>

          {/* PRO */}
          <Reveal delay={120}>
            <PriceCard
              tag="おすすめ"
              tagColor="var(--accent)"
              name={<>focyl <ProBadge size="md" style={{ marginLeft: 6, verticalAlign: 'middle' }} /></>}
              price="¥4,800"
              priceSub="/年"
              priceNote="月あたり ¥400 · 31% OFF"
              monthly="月額プラン: ¥580 / 月"
              trial="7日間 無料トライアル"
              features={[
                <span><strong style={{ color: 'var(--ink)' }}>Free のすべて</strong> に加えて：</span>,
                '🌘 黄体期警報 — 症状悪化の3日前に通知',
                '✨ 集中ピーク予測 — 次の卵胞期を予測',
                '📊 フェーズ × 症状ヒートマップ',
                '📄 医師用 PDF レポート',
                '💡 自動インサイト',
              ]}
              cta="7日間 無料で試す"
              ctaHref="#beta"
              ctaStyle="primary"
              accent={true}
            />
          </Reveal>
        </div>

        <Reveal delay={200}>
          <div style={{
            marginTop: 40, textAlign: 'center',
            color: 'var(--ink-mute)', fontSize: 12, lineHeight: 2,
          }}>
            <div>クレジットカード登録は不要 · Apple ID で完結 · いつでもキャンセル可能</div>
            <div style={{ marginTop: 4, fontSize: 11 }}>
              サブスクリプションは Apple ID に課金され、自動更新されます。トライアル期間中は課金されません。
            </div>
          </div>
        </Reveal>

        <style>{`
          @media (max-width: 760px) {
            [data-price-grid] { grid-template-columns: 1fr !important; }
          }
        `}</style>
      </div>
    </section>
  );
}

function PriceCard({ tag, tagColor, name, price, priceSub, priceNote, monthly, trial, features, cta, ctaHref, ctaStyle, accent }) {
  return (
    <div style={{
      background: 'var(--bg-card)',
      border: accent ? '1.5px solid var(--accent)' : '1px solid var(--rule)',
      borderRadius: 18,
      padding: '32px 30px 30px',
      height: '100%',
      display: 'flex', flexDirection: 'column',
      position: 'relative',
      transition: 'transform 200ms ease, box-shadow 200ms ease',
      boxShadow: accent ? '0 30px 60px -30px color-mix(in oklab, var(--accent) 40%, transparent)' : 'none',
    }}
    onMouseEnter={(e) => { e.currentTarget.style.transform = 'translateY(-3px)'; }}
    onMouseLeave={(e) => { e.currentTarget.style.transform = 'translateY(0)'; }}
    >
      {tag && (
        <div style={{
          position: 'absolute', top: -12, left: 24,
          background: tagColor, color: 'white',
          padding: '4px 10px', borderRadius: 6,
          fontSize: 10, fontFamily: 'var(--mono)', letterSpacing: '0.08em',
          fontWeight: 600, textTransform: 'uppercase',
        }}>{tag}</div>
      )}

      {/* header */}
      <div style={{ marginBottom: 18 }}>
        <div className="serif" style={{
          fontSize: 24, fontWeight: 500, color: 'var(--ink)', letterSpacing: '0.005em',
          display: 'flex', alignItems: 'center',
        }}>{name}</div>
      </div>

      {/* price */}
      <div style={{ marginBottom: 4, display: 'flex', alignItems: 'baseline', gap: 6 }}>
        <span className="serif" style={{ fontSize: 44, fontWeight: 400, color: 'var(--ink)', letterSpacing: '-0.01em' }}>{price}</span>
        {priceSub && <span style={{ fontSize: 14, color: 'var(--ink-soft)' }}>{priceSub}</span>}
      </div>
      {priceNote && (
        <div style={{
          fontSize: 12, color: 'var(--accent)', fontFamily: 'var(--mono)', letterSpacing: '0.04em',
          fontWeight: 500, marginBottom: 6,
        }}>{priceNote}</div>
      )}
      {monthly && (
        <div style={{ fontSize: 12, color: 'var(--ink-mute)', marginBottom: 6 }}>{monthly}</div>
      )}
      {trial && (
        <div style={{
          display: 'inline-flex', alignSelf: 'flex-start', alignItems: 'center', gap: 6,
          background: 'color-mix(in oklab, var(--accent) 16%, transparent)',
          color: 'var(--accent)', padding: '6px 10px', borderRadius: 999,
          fontSize: 11, fontFamily: 'var(--mono)', letterSpacing: '0.06em',
          fontWeight: 500, marginTop: 8,
        }}>
          <MoonGlyph size={9} phase={1} color="var(--accent)" />
          {trial}
        </div>
      )}

      {/* divider */}
      <div style={{ height: 1, background: 'var(--rule)', margin: '24px 0 20px' }} />

      {/* features */}
      <ul style={{ listStyle: 'none', padding: 0, margin: 0, display: 'flex', flexDirection: 'column', gap: 12, flex: 1 }}>
        {features.map((f, i) => (
          <li key={i} style={{ display: 'flex', gap: 10, fontSize: 13.5, color: 'var(--ink-soft)', lineHeight: 1.6 }}>
            <span style={{
              flexShrink: 0, width: 18, height: 18, borderRadius: '50%',
              background: accent ? 'var(--accent)' : 'var(--p-foll)', color: 'white',
              display: 'inline-flex', alignItems: 'center', justifyContent: 'center',
              fontSize: 10, fontWeight: 700, marginTop: 2,
            }}>✓</span>
            <span>{f}</span>
          </li>
        ))}
      </ul>

      {/* CTA */}
      <a href={ctaHref}
         className={`btn btn-${ctaStyle === 'primary' ? 'primary' : 'ghost'}`}
         style={{
           marginTop: 26, justifyContent: 'center', padding: '16px 22px',
           ...(ctaStyle === 'primary' && accent ? { background: 'var(--accent)' } : {}),
         }}>
        {cta}
      </a>
    </div>
  );
}

Object.assign(window, { Pricing, ProBadge });