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

export const magazinePoster: DesignSkill = {
    name: "magazine-poster",
    scenario: "creative",
    description:
      "Editorial magazine poster or spread — bold typography, large-scale display font, dramatic image/color blocking. Magazine-cover aesthetic with strong visual hierarchy.",
    outputKind: "html",
    workflow: `# Magazine Poster Skill

Produce an editorial magazine poster or spread. Bold typography, large-scale display font, dramatic layout — the kind of image that could be a magazine cover or poster.

## Phase 1 — Determine Format

- **Poster** (A3-ish: 960×1358px or similar portrait ratio) — single bold composition
- **Magazine spread** (landscape: 1440×960px or similar) — two-page feel with gutter
- **Social cover** (square: 1080×1080px) — optimized for social sharing

## Phase 2 — Composition Modes

### Mode A: Typography-first
Big display text dominates. Color block background, minimal elements. Font scale carries the energy.
\`\`\`css
.poster { width: 960px; height: 1358px; background: var(--bg); display: flex; flex-direction: column; justify-content: center; padding: 80px; position: relative; overflow: hidden; }
.poster-eyebrow { font-size: 14px; text-transform: uppercase; letter-spacing: 0.15em; color: var(--muted); margin-bottom: 24px; }
.poster-headline { font-family: var(--font-display, var(--font-body)); font-size: 96px; font-weight: 800; line-height: 1.05; letter-spacing: -0.03em; }
.poster-subhead { font-size: 24px; color: var(--muted); margin-top: 32px; max-width: 600px; line-height: 1.5; }
.poster-issue { position: absolute; bottom: 60px; left: 80px; font-size: 14px; color: var(--muted); }
\`\`\`

### Mode B: Image-first
Large image dominates 70% of the canvas, typography overlays or sits below.
\`\`\`css
.poster-image-first { width: 960px; height: 1358px; display: grid; grid-template-rows: 1fr auto; background: var(--bg); }
.poster-image { width: 100%; height: 100%; object-fit: cover; background: linear-gradient(135deg, var(--accent), var(--surface)); }
.poster-text-block { padding: 48px 64px; }
\`\`\`

### Mode C: Split-screen
Two-panel composition — color block left, image right (or vice versa).
\`\`\`css
.poster-split { width: 1440px; height: 960px; display: grid; grid-template-columns: 1fr 1fr; }
.poster-split-panel { display: flex; flex-direction: column; justify-content: center; padding: 80px; }
.poster-split-panel.left { background: var(--accent); color: var(--accent-on, white); }
.poster-split-panel.right { background: var(--bg); }
\`\`\`

## Phase 3 — Typography Scale

\`\`\`css
/* Magazine typography is dramatic — go big */
.display-xxl { font-size: 120px; font-weight: 800; line-height: 0.95; letter-spacing: -0.04em; }
.display-xl { font-size: 80px; font-weight: 800; line-height: 1.0; letter-spacing: -0.03em; }
.display-lg { font-size: 56px; font-weight: 700; line-height: 1.1; }
.poster-body { font-size: 18px; line-height: 1.6; }
.poster-meta { font-size: 12px; text-transform: uppercase; letter-spacing: 0.12em; }
\`\`\`

## Phase 4 — Design Elements

- **Accent shapes**: Use ::before/::after pseudo-elements for geometric accents (circles, lines, color blocks)
- **Photo treatment**: Use mix-blend-mode on images over color backgrounds
- **Grid lines**: Thin horizontal/vertical rules as structural elements
- **Page numbers**: ALWAYS include an issue/volume/page-number block
- **Date line**: MONTH YYYY format in the masthead area

## Phase 5 — Anti-Kitsch Rules
- No emoji in editorial design
- Use the design system's display font at scale — not a safe web font
- Headline should create tension: unexpected word break, dramatic line split, or bold claim
- One focal point per poster — don't make everything compete
- white-space is intentional, not leftover`,
  };