// urlapi.me Landing Page — Pricing comparison matrix
// Full feature × plan table to drop inside the Pricing section.

const { useState: pmUS } = React;

function PricingMatrix() {
  const plans = ["Free", "Starter", "Pro", "Business", "Enterprise"];

  // Cell value vocabulary:
  //   true     → ✓ (included)
  //   false    → ✗ (not included)
  //   "string" → literal text (e.g. "5,000", "+¥1,280")
  const groups = [
    {
      title: "上限・容量",
      rows: [
        { label: "クリック無料枠 / 月", vals: ["5万",  "150万", "500万", "2,000万", "要相談"] },
        { label: "events / 月（CV＋API）", vals: [false, "5万",  "50万",  "500万",  "無制限"] },
        { label: "AIトークン / 月",    vals: [false,  "30万",  "100万", "500万",  "個別"] },
        { label: "独自ドメイン",       vals: [false,   "1個",  "3個",   "無制限", "無制限"] },
        { label: "含むアカウント",     vals: ["1",     "1",    "1",     "8",      "個別"] },
        { label: "追加アカウント",     vals: [false,   false,  "+¥2,980", "+¥2,980", "個別"] },
        { label: "API キー",           vals: [false,   "1",    "5",     "無制限", "無制限"] },
        { label: "同時ログイン",       vals: ["1",     "1",    "アカウント数分", "アカウント数分", "複数"] },
      ],
    },
    {
      title: "コア機能",
      rows: [
        { label: "短縮URL作成",        vals: ["試用", true, true, true, true] },
        { label: "UTM 管理",           vals: [false, true, true, true, true] },
        { label: "キャンペーン分類",   vals: [false, true, true, true, true] },
        { label: "A/B テスト",         vals: [false, false, true, true, true] },
        { label: "ブラックリスト管理", vals: [false, false, true, true, true] },
      ],
    },
    {
      title: "トラッキング",
      rows: [
        { label: "クリック計測",       vals: ["試用", true, true, true, true] },
        { label: "リファラー解析",     vals: ["試用", true, true, true, true] },
        { label: "CV計測（events）",   vals: [false, true, true, true, true] },
        { label: "CV属性記録",         vals: [false, true, true, true, true] },
        { label: "ユーザー識別",       vals: [false, false, true, true, true] },
        { label: "EP計測",             vals: [false, false, false, true, true] },
      ],
    },
    {
      title: "広告連携",
      rows: [
        { label: "Meta CAPI",          vals: [false, false, true, true, true] },
        { label: "Google ECV",         vals: [false, false, true, true, true] },
        { label: "LINE Tag",           vals: [false, false, true, true, true] },
        { label: "X CAPI",             vals: [false, false, true, true, true] },
        { label: "TikTok Events",      vals: [false, false, true, true, true] },
        { label: "Webhook 配信",       vals: [false, false, "アドオン", true, true] },
        { label: "オーディエンス自動生成", vals: [false, false, false, true, true] },
        { label: "顧客横断 LTV 分析",  vals: [false, false, false, true, true] },
        { label: "Connect（外部連携 / OEM）", vals: [false, false, false, true, true] },
      ],
    },
    {
      title: "AI / MCP",
      rows: [
        { label: "AI チャット UI",     vals: [false, true, true, true, true] },
        { label: "AI 処理量 / 月",     vals: [false, "30万 tok", "100万 tok", "500万 tok", "個別"] },
        { label: "MCP 連携",           vals: [false, "読取1本", "書込 1/アカウント", "1/アカウント", "∞"] },
        { label: "AI 分析・要約",      vals: [false, true, true, true, true] },
        { label: "改善提案",           vals: [false, true, true, true, true] },
        { label: "AI キャンペーン作成", vals: [false, false, true, true, true] },
        { label: "API / MCP キー発行", vals: [false, true, true, true, true] },
      ],
    },
    {
      title: "サポート・統制",
      rows: [
        { label: "コミュニティ",       vals: [true, true, true, true, true] },
        { label: "メール",             vals: [false, true, true, true, true] },
        { label: "専任オンボーディング", vals: [false, false, false, true, true] },
        { label: "四半期レビュー",     vals: [false, false, false, true, true] },
        { label: "99.9% SLA",          vals: [false, false, false, true, true] },
        { label: "カスタム SLA",       vals: [false, false, false, false, true] },
        { label: "監査ログ",           vals: [false, false, false, true, true] },
        { label: "ホワイトラベル",     vals: [false, false, false, false, true] },
        { label: "プライベートデプロイ", vals: [false, false, false, false, true] },
      ],
    },
  ];

  const [_, __] = pmUS(true); // (unused now — kept for hook hygiene)
  const FEATURED = 2; // Pro column highlighted (matches POPULAR card)

  const Cell = ({ v, featured }) => {
    if (v === true)  return <span style={{ color: "var(--success)", fontSize: 14, fontWeight: 600 }}>✓</span>;
    if (v === false) return <span style={{ color: "var(--text-dim)", fontSize: 14 }}>—</span>;
    return (
      <span className="mono" style={{
        fontSize: 11.5,
        color: featured ? "var(--accent-2)" : "var(--text)",
        letterSpacing: 0.02,
      }}>{v}</span>
    );
  };

  return (
    <div className="pricing-matrix" style={{
      marginTop: 64,
      maxWidth: 1180,
      marginInline: "auto",
      position: "relative",
    }}>
      {/* Strong section header — always-on display */}
      <div style={{ textAlign: "center", marginBottom: 28, maxWidth: 880, marginInline: "auto" }}>
        <div className="mono" style={{
          fontSize: 11,
          color: "var(--accent-2)",
          letterSpacing: 0.24,
          textTransform: "uppercase",
          marginBottom: 14,
        }}>
          ◇ Full feature comparison
        </div>
        <h3 className="display" style={{
          fontSize: "clamp(24px, 3.4vw, 34px)",
          fontWeight: 700,
          margin: 0,
          letterSpacing: -0.025,
          lineHeight: 1.2,
          color: "var(--text)",
        }}>
          プランごとに、<br />何ができるか全部見る。
        </h3>
        <p style={{
          fontSize: 15,
          color: "var(--text-mid)",
          marginTop: 14,
          lineHeight: 1.7,
          maxWidth: 560,
          marginInline: "auto",
        }}>
          6カテゴリ・全機能を、5プランで横並び比較。<br />
          迷ったら <strong style={{ color: "var(--accent-2)", fontWeight: 700 }}>Pro</strong> から。
        </p>
      </div>

      {/* Matrix body — always open */}
      {true && (
        <div style={{
          background: "var(--bg-1)",
          border: "1px solid var(--border)",
          borderRadius: 14,
          overflow: "hidden",
          boxShadow: "0 24px 60px -30px rgba(0,0,0,0.5)",
        }}>
          <div style={{ overflowX: "auto" }}>
            <table className="pm-table" style={{
              width: "100%",
              minWidth: 880,
              borderCollapse: "collapse",
              tableLayout: "fixed",
              fontVariantNumeric: "tabular-nums",
            }}>
              <colgroup>
                <col style={{ width: "26%" }} />
                {plans.map((_, i) => (
                  <col key={i} style={{ width: `${74 / plans.length}%` }} />
                ))}
              </colgroup>
              <thead>
                <tr>
                  <th style={{ textAlign: "left", padding: "16px 20px", position: "sticky", top: 0, background: "var(--bg-2)", borderBottom: "1px solid var(--border)" }}>
                    <span className="mono" style={{ fontSize: 10, color: "var(--text-mute)", letterSpacing: 0.16, textTransform: "uppercase" }}>機能</span>
                  </th>
                  {plans.map((p, i) => {
                    const isFeat = i === FEATURED;
                    return (
                      <th key={p} style={{
                        textAlign: "center",
                        padding: "16px 12px",
                        position: "sticky",
                        top: 0,
                        background: isFeat ? "linear-gradient(180deg, var(--accent-soft), var(--bg-2))" : "var(--bg-2)",
                        borderBottom: `1px solid ${isFeat ? "var(--accent)" : "var(--border)"}`,
                        borderLeft: isFeat ? "1px solid var(--accent)" : "1px solid var(--border-soft)",
                        borderRight: isFeat ? "1px solid var(--accent)" : "none",
                      }}>
                        <div className="display" style={{ fontSize: 13.5, fontWeight: 700, color: isFeat ? "var(--accent-2)" : "var(--text)" }}>{p}</div>
                        {isFeat && (
                          <div className="mono" style={{ marginTop: 4, fontSize: 9, color: "var(--accent-2)", letterSpacing: 0.12, textTransform: "uppercase" }}>Popular</div>
                        )}
                      </th>
                    );
                  })}
                </tr>
              </thead>
              <tbody>
                {groups.map((g, gi) => (
                  <React.Fragment key={g.title}>
                    <tr>
                      <td colSpan={plans.length + 1} style={{
                        padding: "20px 20px 8px",
                        background: "var(--bg-0)",
                        borderTop: gi === 0 ? "none" : "1px solid var(--border)",
                      }}>
                        <span className="mono" style={{ fontSize: 10.5, color: "var(--accent-2)", letterSpacing: 0.18, textTransform: "uppercase" }}>
                          {String(gi + 1).padStart(2, "0")} · {g.title}
                        </span>
                      </td>
                    </tr>
                    {g.rows.map((r, ri) => (
                      <tr key={r.label} style={{
                        background: ri % 2 === 0 ? "transparent" : "rgba(255,255,255,0.012)",
                      }}>
                        <td style={{
                          padding: "12px 20px",
                          fontSize: 13,
                          color: "var(--text)",
                          borderTop: "1px solid var(--border-soft)",
                        }}>
                          {r.label}
                        </td>
                        {r.vals.map((v, vi) => {
                          const isFeat = vi === FEATURED;
                          return (
                            <td key={vi} style={{
                              padding: "12px 8px",
                              textAlign: "center",
                              borderTop: "1px solid var(--border-soft)",
                              borderLeft: isFeat ? "1px solid var(--accent)" : "1px solid var(--border-soft)",
                              borderRight: isFeat ? "1px solid var(--accent)" : "none",
                              background: isFeat ? "rgba(124,92,255,0.04)" : "transparent",
                            }}>
                              <Cell v={v} featured={isFeat} />
                            </td>
                          );
                        })}
                      </tr>
                    ))}
                  </React.Fragment>
                ))}
              </tbody>
            </table>
          </div>

          {/* Footer disclaimer */}
          <div style={{
            padding: "16px 22px",
            background: "var(--bg-2)",
            borderTop: "1px solid var(--border)",
          }}>
            <div className="mono" style={{ fontSize: 10.5, color: "var(--text-mute)", letterSpacing: 0.04, lineHeight: 1.65 }}>
              ※ 「+¥◯◯」表記はオプション追加可能項目。Enterprise は要件に合わせて要相談。
            </div>
          </div>
        </div>
      )}

      <style>{`
        .pm-table tbody tr:hover { background: rgba(255,255,255,0.025) !important; }
        @media (max-width: 720px) {
          .pricing-matrix .display { font-size: 15px !important; }
        }
      `}</style>
    </div>
  );
}

window.PricingMatrix = PricingMatrix;