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

export const saasLanding: DesignSkill = {
    name: "saas-landing",
    scenario: "marketing",
    description:
      "Single-page SaaS landing with hero, features, social proof, pricing, and CTA. Production-ready marketing page structure.",
    outputKind: "html",
    workflow: `# SaaS Landing Skill

Produce a single-page SaaS landing page. This is your workflow — follow it exactly.

## Phase 0 — Pre-flight

1. Read the design system. Map all color tokens.
2. Determine: product name, tagline, audience, has pricing? how many social proof items?
3. Vocalize: "I'll build a SaaS landing for [product] using the [system] design system. Sections: hero, features (6), social proof (3 logos + quote), pricing (3 tiers), CTA."

## Phase 1 — Shell

Create \`index.html\` with the same skeleton as web-prototype, but use this section order:

1. **Navigation** — Sticky top, 64px height. Logo left, nav links right (Features, Pricing, Docs), "Sign In" + "Get Started" CTA.
2. **Hero** — Two-column: left = headline + subtext + CTA + "no credit card" badge, right = product screenshot or illustration.
3. **Trust Strip** — 5-6 company logos, grayscale, 80px height each.
4. **Features** — 3×2 grid. Each card: icon, title, description. Focus on benefits, not specs.
5. **How It Works** — 3-step horizontal flow. Number + title + short description.
6. **Social Proof** — Quote block + person attribution.
7. **Pricing** — 3-tier cards. Highlight the middle tier with a "Popular" badge.
8. **FAQ** — Accordion or simple Q&A list, 4-6 items.
9. **CTA Footer** — Full-width, centered, strong headline.
10. **Footer** — Logo, copyright, link columns.

## Phase 2 — Key Component Styles

### Navigation
\`\`\`css
.nav { position: sticky; top: 0; z-index: 100; height: 64px; background: var(--color-bg-primary); border-bottom: 1px solid var(--color-border); display: flex; align-items: center; backdrop-filter: blur(12px); }
.nav-inner { display: flex; justify-content: space-between; align-items: center; width: 100%; }
.nav-links { display: flex; gap: 32px; align-items: center; }
\`\`\`

### Hero
\`\`\`css
.hero { padding: 120px 0 80px; }
.hero-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 64px; align-items: center; }
.hero h1 { font-size: 56px; font-weight: 800; line-height: 1.1; letter-spacing: -0.03em; }
.hero p { font-size: 20px; color: var(--color-text-secondary); margin: 24px 0 32px; max-width: 480px; }
\`\`\`

### Pricing Cards
\`\`\`css
.pricing-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 24px; }
.pricing-card { padding: 40px 32px; border-radius: var(--radius); border: 1px solid var(--color-border); background: var(--color-bg-surface); }
.pricing-card.featured { border-color: var(--color-accent); box-shadow: 0 0 0 1px var(--color-accent); transform: scale(1.03); }
.price { font-size: 48px; font-weight: 800; margin: 16px 0; }
.price span { font-size: 16px; font-weight: 400; color: var(--color-text-secondary); }
\`\`\`

## Phase 3 — Content Rules

- Every headline sells a benefit, not describes a feature
- Pricing: use specific numbers ($29, $79, $199) not "Free / Pro / Enterprise" placeholders
- Social proof: realistic company names, real-sounding quote
- CTA button text: action-oriented — "Start Building", "Get Early Access", "See Plans"
- No lorem ipsum, no placeholder images that look like placeholders — use gradient shapes

## Phase 4 — Anti-Slop Check

Same checklist as web-prototype, plus:
- [ ] Pricing cards don't all look identical — featured tier is visually distinct
- [ ] Hero doesn't use a gradient background (use solid, pattern, or image)
- [ ] Trust logos are monochrome, same height, evenly spaced`,
  };