import type { DesignSkill } from "./design-skill.js";

export const pricingPage: DesignSkill = {
    name: "pricing-page",
    scenario: "marketing",
    description:
      "Standalone pricing page — header, plan tier cards, feature comparison table, and FAQ. Uses CSS Grid for plan rows and comparison table. 2-4 tiers with recommended tier accent.",
    outputKind: "html",
    workflow: `# Pricing Page Skill

Produce a single-screen pricing page that respects the active design system.

## Phase 1 — Classify the product

Pick a tier shape based on the brief:
- **3-tier** (most common): Free / Pro / Team or Starter / Growth / Enterprise
- **4-tier** when the brief says "scale" or "enterprise plus"
- **2-tier** when it says "individual / business" or "personal / pro"

## Phase 2 — Sections (in order)

1. **Hero** — page title (e.g. "Pricing"), one-line subhead, optional monthly/annual toggle.
   \`\`\`css
   .pricing-hero { text-align: center; padding: 80px 0 48px; }
   .toggle { display: inline-flex; border-radius: 999px; background: var(--surface); padding: 4px; margin-top: 24px; }
   .toggle button { padding: 8px 20px; border-radius: 999px; border: none; cursor: pointer; font-size: 14px; font-weight: 500; }
   .toggle button.active { background: var(--fg); color: var(--bg); }
   \`\`\`

2. **Plan cards** — one card per tier. Each card: tier name, price (display font + larger scale for the number), 1-line positioning, 4-6 bullet features, primary CTA.
   \`\`\`css
   .plan-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(300px, 1fr)); gap: 24px; max-width: 1100px; margin: 0 auto; padding: 0 24px; }
   .plan-card { background: var(--surface, var(--bg)); border: 1px solid var(--border); border-radius: 12px; padding: 40px 32px; display: flex; flex-direction: column; }
   .plan-card.recommended { border-color: var(--accent); box-shadow: 0 0 0 1px var(--accent); position: relative; }
   .plan-card.recommended::before { content: "Popular"; position: absolute; top: -12px; left: 50%; transform: translateX(-50%); background: var(--accent); color: var(--accent-on, white); padding: 4px 16px; border-radius: 999px; font-size: 12px; font-weight: 600; }
   .plan-name { font-size: 20px; font-weight: 600; }
   .plan-price { font-size: 48px; font-weight: 800; line-height: 1; margin: 16px 0 4px; font-family: var(--font-display, var(--font-body)); }
   .plan-price span { font-size: 16px; font-weight: 400; color: var(--muted); }
   .plan-features { list-style: none; padding: 0; margin: 24px 0; flex: 1; }
   .plan-features li { padding: 8px 0; font-size: 14px; border-bottom: 1px solid var(--border-soft, var(--border)); }
   \`\`\`

3. **Comparison table** — feature rows × tier columns, ✓ / — / value cells. Group features into 2-3 logical sections (Core, Collaboration, Support, Security). Sticky header.
   \`\`\`css
   .comparison { max-width: 1100px; margin: 64px auto; padding: 0 24px; }
   .comparison h2 { text-align: center; margin-bottom: 32px; }
   .comparison-table { width: 100%; border-collapse: collapse; font-size: 14px; }
   .comparison-table th { text-align: left; padding: 12px 16px; font-weight: 600; border-bottom: 2px solid var(--border); }
   .comparison-table th:not(:first-child) { text-align: center; }
   .comparison-table td { padding: 12px 16px; border-bottom: 1px solid var(--border-soft, var(--border)); }
   .comparison-table td:not(:first-child) { text-align: center; }
   .section-header td { font-weight: 600; background: var(--surface); font-size: 13px; text-transform: uppercase; letter-spacing: 0.05em; }
   \`\`\`

4. **FAQ** — 4-6 collapsible Q&A items using \`<details><summary>\` (no JS needed).
   \`\`\`css
   .faq { max-width: 720px; margin: 64px auto; padding: 0 24px; }
   .faq h2 { text-align: center; margin-bottom: 32px; }
   .faq details { border-bottom: 1px solid var(--border-soft, var(--border)); padding: 20px 0; }
   .faq summary { font-weight: 600; cursor: pointer; font-size: 16px; list-style: none; display: flex; justify-content: space-between; align-items: center; }
   .faq summary::after { content: "+"; font-size: 20px; }
   .faq details[open] summary::after { content: "−"; }
   .faq p { margin-top: 12px; font-size: 15px; color: var(--muted); line-height: 1.6; }
   \`\`\`

5. **Footer CTA** — single line + button.

## Phase 3 — Content Rules
- Prices are plausible for the product (not "$X / month")
- Accent appears on the recommended tier and one CTA only
- No fake feature names — every row reads as something a real product would offer
- Comparison table renders cleanly at 1024px and stacks readably below 768px (scroll-x or stacked)

## Phase 4 — Anti-Slop Check
- [ ] Prices use specific numbers ($29, $79, $199)
- [ ] Recommended tier is visually distinct
- [ ] FAQ answers are concrete, not generic
- [ ] No price-related emoji (💸, 💰, 🤑)`,
  };