import { useState, useEffect, useRef, useCallback, useMemo } from 'react';

// ============================================================================
// INLINE SVG ICONS — independent of lucide-react package.
// ============================================================================

const ChevronDown = ({ size = 16, className = '' }) => (
  <svg xmlns="http://www.w3.org/2000/svg" width={size} height={size} viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2" strokeLinecap="round" strokeLinejoin="round" className={className} aria-hidden="true">
    <path d="m6 9 6 6 6-6" />
  </svg>
);

const Check = ({ size = 12, strokeWidth = 3, className = '' }) => (
  <svg xmlns="http://www.w3.org/2000/svg" width={size} height={size} viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth={strokeWidth} strokeLinecap="round" strokeLinejoin="round" className={className} aria-hidden="true">
    <polyline points="20 6 9 17 4 12" />
  </svg>
);

// ============================================================================
// CONTENT DATA — extracted from SKUs.md
// ============================================================================

const META = {
  title: 'Sublayer GTM Workbook',
  subtitle: 'A studio notebook for the Agent Operator plan',
  vol: 'Vol. 01',
  date: 'May 2026',
};

const KEY_NUMBERS = [
  { value: '$30K', unit: '/month',  label: 'Monthly burn' },
  { value: '3',    unit: 'months',  label: 'Runway' },
  { value: '$45K', unit: 'MRR',     label: 'Day-90 target' },
  { value: '2',    unit: '× $15K',  label: 'Retainers to break-even' },
];

const SKUS = [
  {
    id: 'diagnostic',
    num: 'i',
    name: 'Agent Operator Diagnostic',
    short: 'Paid front door.',
    price: '$3,000',
    priceUnit: 'one-time',
    timeline: '5 business days',
    capacity: '5–8 / month',
    buyer: 'Founder · CTO · COO · product / ops leader',
    purpose: 'Paid entry point',
    promise:
      'We map how your team is currently using AI agents, identify the highest-leverage workflows and failure patterns, and give you a practical 30-day plan.',
    deliverables: [
      '60-minute leadership intake',
      '2–4 practitioner interviews or workflow walkthroughs',
      'Review of existing prompts, workflows, agent usage, automations, docs, or internal tools',
      'Workflow opportunity map',
      'Failure-pattern map',
      'Agent Operator maturity score',
      '30-day adoption plan',
      'Recommendation: do nothing, workshop, 90-day program, or internal hire',
    ],
    fit: [
      'Teams experimenting but not organized',
      'Founders asking "what should we do with agents?"',
      'Product / ops / design teams with messy internal AI usage',
      'Engineering teams not yet ready for telemetry',
    ],
    salesLine:
      'You do not need a six-month AI transformation plan. You need to know where agents are already helping, where they are creating chaos, and what the next 30 days of practice should look like.',
  },
  {
    id: 'baseline',
    num: 'ii',
    name: 'Agentic Workflow Baseline',
    short: 'The premium diagnostic.',
    price: '$7,500–$10,000',
    priceUnit: 'one-time',
    timeline: '1–2 weeks',
    capacity: '2–4 / month',
    buyer: 'Teams already using agents heavily',
    purpose: 'Deeper diagnostic — artifacts, sessions, workflow review',
    promise:
      'We establish a baseline of how agentic work is actually happening, then identify what would make it safer, faster, more repeatable, and more valuable.',
    deliverables: [
      'Session / workflow / artifact review',
      'Baseline metrics',
      'Failure taxonomy',
      'Workflow maturity rubric',
      'Context / tool / data map',
      'Reusable-practice opportunities',
      'Team playback session',
      '30 / 60 / 90-day improvement plan',
    ],
    metricsEng: [
      'Completion rate', 'Rescue rate', 'Loop rate', 'Verification rate', 'Diff risk',
      'Task granularity', 'Context quality', 'Session abandonment', 'Reusable artifact creation',
    ],
    metricsOps: [
      'Workflow cycle time', 'Number of handoffs', 'Manual copy/paste steps', 'Context gaps',
      'Data/tool fragmentation', 'Output review burden', 'Repeatability', 'Human judgment points', 'Reusable agent workflow candidates',
    ],
    salesLine: 'Most AI adoption is vibes. This gives you a baseline.',
  },
  {
    id: 'program',
    num: 'iii',
    name: '90-Day Agent Operator Program',
    short: 'The flagship. The path to profitability.',
    price: '$15,000',
    priceUnit: '/ month · 3-mo min',
    priceDetail: '$45,000 total — or $40,000 paid upfront for the full 90 days',
    timeline: '90 days',
    capacity: '3 concurrent',
    buyer: 'Teams that already have a CTO and want the operating practice installed',
    purpose: 'Operating-practice install for teams with existing technical leadership',
    promise:
      'We install the Agent Operator function inside your team: workflows, playbooks, operating rhythms, evaluation loops, and trained internal champions.',
    deliverables: [
      'Weekly 90-minute working session',
      'Async support channel',
      'Monthly leadership readout',
      'Agent Operator playbook',
      'Workflow library',
      'Custom agent / workflow artifacts',
      'Team training',
      'Before / after measurement',
      'Internal champion development',
      '90-day roadmap for continuing without you',
    ],
    months: [
      {
        label: 'Month 1 — Baseline',
        items: [
          'Map existing agent usage',
          'Identify highest-leverage workflows',
          'Find failure patterns',
          'Create initial playbook',
          'Pick 2–3 workflows to improve',
        ],
      },
      {
        label: 'Month 2 — Intervention',
        items: [
          'Train team on context, delegation, verification, tool use, review',
          'Build reusable templates / commands / workflows',
          'Create shared rituals',
          'Turn private workflows into team practice',
        ],
      },
      {
        label: 'Month 3 — Institutionalize',
        items: [
          'Re-measure',
          'Document playbook',
          'Train internal Agent Operator champions',
          'Create ongoing operating cadence',
          'Identify whether they need a hire, a tool, or continued advisory',
        ],
      },
    ],
    salesLine:
      'The goal is not for me to be your AI person forever. The goal is for your team to develop the internal Agent Operator muscle.',
  },
  {
    id: 'office-hours',
    num: 'iv',
    name: 'Agent Operator Office Hours',
    short: 'The only $3K/mo recurring SKU. Low-touch by design.',
    price: '$3,000',
    priceUnit: '/ month',
    timeline: 'Ongoing',
    capacity: 'Cap at 5 clients',
    buyer: 'Smaller teams · founders · alumni · warm leads',
    purpose: 'Lightweight recurring support',
    promise:
      'This keeps your team current and unstuck without a full program.',
    deliverables: [
      '2 monthly office-hour sessions',
      'Async questions with response SLA',
      'Monthly tool / practice briefing',
      'Lightweight workflow review',
      'Access to shared Agent Operator examples / templates as they emerge',
    ],
    fit: [
      'Smaller teams',
      'Founders',
      'Alumni of diagnostics',
      'Companies not ready for the 90-day program',
      'Warm leads you do not want to lose',
    ],
    salesLine: 'This keeps your team current and unstuck without a full program.',
    warning: 'Do not let this become custom consulting in a fake mustache.',
  },
  {
    id: 'intensive',
    num: 'v',
    name: 'Team Intensive',
    short: 'Cash injection + conversion path.',
    price: '$12K remote · $25K onsite',
    priceUnit: 'half- or full-day',
    timeline: 'Half-day or full-day',
    capacity: 'On demand',
    buyer: 'Teams wanting a workshop or offsite',
    purpose: 'Cash injection + conversion path',
    promise:
      'We train your team on agentic workflows using their real work, then leave behind a shared playbook and next-step plan.',
    deliverables: [
      'Pre-call intake',
      'Custom workshop',
      'Hands-on workflow exercises',
      'Team playbook starter',
      '30-day adoption map',
      'Optional conversion to 90-day program',
    ],
    salesLine: 'This is not an AI inspiration talk. Your team leaves with shared practices and reusable workflows.',
  },
  {
    id: 'exec',
    num: 'vi',
    name: 'Executive Agent Strategy Advisory',
    short: 'Optional, low-capacity advisory.',
    price: '$3,000–$5,000',
    priceUnit: '/ month',
    timeline: 'Ongoing',
    capacity: '1–2 clients',
    buyer: 'Founder / exec',
    purpose: 'Optional, low-capacity advisory',
    promise:
      'A monthly cadence with the founder/exec to shape strategy, prioritize bets, and translate AI experimentation into operating decisions.',
    deliverables: [
      'Monthly strategic working session',
      'Async exec-level dialogue',
      'Operating decision framing',
      'Light pattern-recognition across the team',
    ],
    salesLine: 'You do not need a Chief AI Officer. You need a thinking partner with operating reps.',
  },
  {
    id: 'embedded',
    num: 'vii',
    name: 'Embedded Agent Operator',
    short: 'Done-for-you. I become the function for 90 days.',
    price: '$25,000',
    priceUnit: '/ month · 3-mo min',
    priceDetail: 'Premium tier at ~$40K/month for ~3 days/week. Month-to-month after the initial 90.',
    timeline: '90 days, then month-to-month',
    capacity: '1 concurrent (max 2)',
    buyer: 'Founder · CTO · COO at a funded company',
    purpose: 'Fractional Agent Operator — done-for-you',
    promise:
      'For 90 days I become your Agent Operator. I map your workflows, build the agentic systems your team needs, and leave you with a working playbook when I’m done — or stay embedded if it’s working.',
    deliverables: [
      '~2 days / week embedded with the team',
      'Direct workflow construction — I do the build, not just the planning',
      'Live evaluation and iteration loops',
      'Custom agent / workflow artifacts shipped weekly',
      'Async availability between in-person days',
      'Team enablement on the systems I build (so you don’t need me forever)',
      'Monthly leadership readout',
      '90-day roadmap + handoff at end of term',
    ],
    fit: [
      'Teams that want the work done, not the training',
      'Companies on a hiring freeze who still need the function',
      'Founders who plan to hire an Agent Operator and want a "what does this role look like" demonstration first',
      'Buyers with budget for fractional executives ($20–40K/mo range)',
    ],
    salesLine:
      'You do not need a six-month training program. You need this built. I will build it. When the systems are running and your team can keep them running, I leave.',
  },
  {
    id: 'channel',
    num: 'viii',
    name: 'FDE Channel Partner',
    short: 'Forward-deployed engineer for your agentic product.',
    price: '$20,000',
    priceUnit: '/ month retainer',
    priceDetail: 'Or $30–50K per scoped customer deployment, 2–4 weeks each. Retainer preferred for ongoing partners.',
    timeline: 'Ongoing retainer, or per-engagement',
    capacity: '1–2 partner relationships',
    buyer: 'AI tooling company · agent framework · agentic SaaS founder',
    purpose: 'Channel partner for tooling companies — you sell, I deploy',
    promise:
      'You build the agentic tool. I become the FDE who actually deploys it inside your customers — ramping up on your product, shaping the workflow inside the customer team, and reporting back what works and what breaks.',
    deliverables: [
      'Onboarding to your product (paid ramp time)',
      '1–2 days / week dedicated to your customer deployments',
      'Forward-deployed implementation inside customer teams',
      'Joint sales support for prospects who need an FDE in the loop',
      'Implementation feedback loop — what your product needs to win',
      'Customer-facing playbook reflecting your product, with your branding',
    ],
    fit: [
      'Tooling companies losing deals because customers want hands-on implementation help',
      'Tooling companies whose engineers are stretched thin doing customer rollouts',
      'Agentic SaaS where the product is great but adoption requires workflow design',
      'Companies that want a partner before they staff their own FDE function',
    ],
    salesLine:
      'You built the tool. I’ll deploy it. You sell more, your customers actually adopt, and I bring back the implementation patterns that tell you what to build next.',
  },
  {
    id: 'fcto',
    num: 'ix',
    name: 'Modern Fractional CTO',
    short: 'Fractional CTO for the new world — build with agents, leave the team operating that way.',
    price: '$15,000',
    priceUnit: '/ month · 3-mo min',
    priceDetail: 'Premium tier at $20–25K/month for higher-touch engagements. Equity component (0.25–1%) sometimes added for early-stage clients with cash constraints. Daily rate $1,500–2,000 for spot work.',
    timeline: '3-month minimum, typically 3–6 months',
    capacity: '2 concurrent (target — two retainers covers burn)',
    buyer: 'Pre-Series-A founder · non-technical CEO · early team without a CTO',
    purpose: 'The outbound wedge. Lead product. Agent Operator work bundled inside.',
    flagship: true,
    promise:
      'I’m a fractional CTO for the new world — I help startups build fast with agents, set up the technical foundation, and train the team so they can keep operating that way after I’m gone.',
    deliverables: [
      'Weekly working session with the founder / CEO',
      'Technical strategy and architecture decisions — designed for an agentic build',
      'Hands-on implementation: building the foundation with agents, not just advising',
      'Hiring help — sourcing, interviewing, leveling',
      'Code review and engineering-practice guidance',
      'Vendor / tool selection (especially the AI tooling stack)',
      'Team training on the agentic workflow as part of the engagement',
      'Documentation, playbook, and process so the team keeps operating after I step back',
      'Due-diligence support for fundraising',
    ],
    fit: [
      'Pre-Series-A startups with budget but no full-time CTO yet',
      'Non-technical founders who need CTO-level oversight on technical decisions',
      'Teams that need to build the foundation right, fast, with agents from day one',
      'Founders heading into a fundraise who need CTO due-diligence support',
      'Accelerator companies (ERA, etc.) needing senior technical guidance',
    ],
    salesLine:
      'I’m a fractional CTO for the new world. I help startups build fast with agents, set up the technical foundation, and train the team so they can keep operating that way after I’m gone.',
  },
];

const PRICING_SCENARIOS = [
  { mix: '2 × Modern Fractional CTO retainers',              mrr: 30, label: 'default alive — the wedge path',   tone: 'good' },
  { mix: '1 × Fractional CTO + 1 × 90-Day Program',          mrr: 30, label: 'wedge + program — mixed retainers', tone: 'good' },
  { mix: '1 × Fractional CTO + 1 × Embedded Operator',       mrr: 40, label: 'oxygen — full bandwidth',           tone: 'good' },
  { mix: '2 × 90-Day Programs at $15K/month',                mrr: 30, label: 'break-even — existing CTO buyers', tone: 'good' },
  { mix: '2 × FDE Channel Partners',                         mrr: 40, label: 'channel-driven — predictable',     tone: 'good' },
  { mix: '3 × Fractional CTO retainers',                     mrr: 45, label: 'oxygen — fundraising leverage',    tone: 'good' },
  { mix: '1 × $15K retainer + 1 onsite workshop / month',    mrr: 27, label: 'positive, not stable',             tone: 'warn' },
];

const TARGETS = [
  { day: 'Day 30', revenue: '$30–45K cash collected', why: 'Prove willingness to pay' },
  { day: 'Day 60', revenue: '$30K MRR',                why: 'Cover burn' },
  { day: 'Day 90', revenue: '$45K+ MRR',               why: 'Profitability / fundraising leverage' },
];

const PHASES = [
  {
    id: 'p1',
    range: 'Days 0–30',
    title: 'Sharpen the spear · sell diagnostics',
    goal: 'Convert trust into paid discovery.',
    kpis: [
      ['Prospects identified', '200'],
      ['Personalized outbound sent', '100'],
      ['Replies / conversations', '25–35'],
      ['Discovery calls', '15–20'],
      ['Diagnostics sold', '5–8'],
      ['Baselines sold', '1–2'],
      ['90-day programs closed', '1'],
      ['Cash collected', '$30K–$45K'],
    ],
    revenuePath: [
      ['5 diagnostics × $3K', '$15K'],
      ['2 baselines × $7.5K',  '$15K'],
      ['1 retainer (M1)',       '$15K'],
      ['Total potential',       '$45K'],
    ],
    learning: [
      'Which buyers understand Agent Operator immediately?',
      'Which domains have budget?',
      'Which workflows repeat?',
      'Which pitch gets calls?',
      'Which objections kill deals?',
      'Which diagnostics convert to retainers?',
    ],
    content: [
      'The Agent Operator Is the New Interface Layer',
      'Your Team’s AI Experiments Are Not Compounding',
      'AI Adoption Should Start With Film Study',
      'It Wasn’t an AI Failure. It Was a Workflow Failure Wearing a Hat',
      'The Next Excel Macro Is a Tiny Agent',
      'I’m Opening 5 Agent Operator Diagnostic Slots',
    ],
    cta:
      'I’m running paid diagnostics for teams already experimenting with AI agents. Reply with team size, tools used, and what feels most chaotic.',
  },
  {
    id: 'p2',
    range: 'Days 31–60',
    title: 'Convert diagnostics into retainers — any mix',
    goal: 'Default alive. $30K+ MRR by any honest combination.',
    kpis: [
      ['MRR (any mix)',                   '$30K+'],
      ['Active retainers (any SKU)',       '2 — primary: 2× Modern Fractional CTO at $15K each. Or any mix that hits $30K.'],
      ['Completed diagnostics',            '8–10'],
      ['Case studies / writeups',          '2'],
      ['Office Hours clients',             '2–3'],
      ['Cash collected this month',        '$45K–$75K'],
    ],
    motion: [
      'Every diagnostic ends with one of three recommendations:',
      '1. Not ready — internal next steps',
      '2. Workshop — if they need alignment / training',
      '3. 90-day program — if they have urgency and budget',
    ],
    proof: '“What we found reviewing 20 agentic workflows.” — anonymized, structural, becomes sales collateral, investor evidence, and curriculum seed.',
  },
  {
    id: 'p3',
    range: 'Days 61–90',
    title: 'Stabilize revenue · make the fundraise story credible',
    goal: 'Profitability or a clear path to it. Default alive with margin.',
    kpis: [
      ['MRR (any mix)',                    '$45K+'],
      ['Active retainers (any SKU)',        '3 — primary: 3× Modern Fractional CTO. Mix flexes as Agent Operator pipeline matures.'],
      ['Completed diagnostics',             '12–15'],
      ['Published case studies',            '3'],
      ['Agent Operator curriculum outline', 'v0'],
      ['Bootcamp / community waitlist',     '100+'],
      ['Investor update sent',              'yes'],
      ['Fundraise story',                   'traction-backed'],
    ],
    closer:
      '“I found the teams already feeling the pain, they paid us to diagnose it, they paid us to build the practice, and the repeated work is becoming the curriculum for the Agent Operator ecosystem.”',
  },
];

const PERSONAS = [
  {
    id: 'cto',
    title: 'CTO · Engineering Leader',
    short: 'CTO',
    pain: 'Engineers are using coding agents in private rituals. No shared practice, no measurement.',
    pitch:
      'Your engineers are already using coding agents. The question is whether that usage is getting better as a team, or just producing isolated pockets of skill. We establish a baseline, identify failure patterns, train shared workflows, and build the playbook for agentic engineering practice.',
    why: 'Engineering leaders feel the pain first because coding agents have moved from curiosity to daily use. The challenge is that pockets of skill don’t compound into team capability without measurement and shared practice.',
    skuPath: ['baseline', 'program'],
    template: 'engineering',
  },
  {
    id: 'coo',
    title: 'COO · Operations Leader',
    short: 'COO',
    pain: 'Spreadsheet macros, manual handoffs, copy/paste rituals, undocumented judgment.',
    pitch:
      'Your workflows are full of spreadsheet macros, manual handoffs, copy/paste rituals, and undocumented judgment. Agents can help, but only if someone redesigns the workflow around context, tools, review, and maintenance.',
    why: 'Ops leaders own efficiency and process. They feel the cost of manual work most acutely, but they often lack a vocabulary for thinking about agentic redesign.',
    skuPath: ['diagnostic', 'program'],
    template: 'product',
  },
  {
    id: 'product',
    title: 'Product Leader',
    short: 'Product',
    pain: 'Drowning in research, feedback, specs, synthesis, prioritization, prototype loops.',
    pitch:
      'Product teams are drowning in research, feedback, specs, synthesis, prioritization, and prototype loops. We help turn one-off AI usage into repeatable product workflows with clear inputs, review loops, and reusable artifacts.',
    why: 'Product is the function with the most varied AI experimentation — every PM has their own GPT or research workflow. Almost none of it is shared. Agentic workflows turn this into compounding team capability.',
    skuPath: ['diagnostic', 'program'],
    template: 'product',
  },
  {
    id: 'design',
    title: 'Design Leader',
    short: 'Design',
    pain: 'Wants to use AI for exploration, critique, and handoff — without flattening taste.',
    pitch:
      'AI can accelerate exploration, critique, design-system maintenance, and implementation handoff, but only if the workflow preserves taste and review. We help design teams build agentic workflows that augment judgment rather than flatten it.',
    why: 'Design leaders are right to be cautious. The risk of generic output is real. The opportunity is to design workflows that use agents for the labor while preserving the team’s eye and review.',
    skuPath: ['diagnostic', 'intensive'],
    template: 'product',
  },
  {
    id: 'founder',
    title: 'Founder · Small Team',
    short: 'Founder',
    pain: '"What should we even do with agents?"',
    pitch:
      'Teams are already experimenting with agents, but the learning is trapped in private rituals. We turn that scattered usage into measurable work practices — and train the people who keep those practices improving.',
    why: 'Founders are pulled in five directions and need a clear, low-overhead way to make agents an institutional capability rather than a personal hack of the most curious engineer.',
    skuPath: ['diagnostic', 'office-hours'],
    template: 'warm',
  },
  {
    id: 'gtm',
    title: 'GTM · RevOps Leader',
    short: 'GTM',
    pain: 'Account research, customer workflows, CRM hygiene — done by hand.',
    pitch:
      'Sales and RevOps teams are doing high-volume, judgment-heavy work — account research, outreach, CRM hygiene, customer-success workflows. We help turn that into agentic workflows with clear inputs, reviews, and reusable artifacts.',
    why: 'GTM is high-volume, repetitive, and full of context handoffs. It rewards agentic workflows more than almost any other function once the patterns are mapped.',
    skuPath: ['diagnostic', 'program'],
    template: 'product',
  },
  {
    id: 'ai-tooling',
    title: 'AI Tooling Founder · Head of Solutions',
    short: 'Tooling co.',
    pain: 'Customers ask for implementation help. We don’t have FDEs to send. Engineers are stretched thin or we lose deals.',
    pitch:
      'You built the agentic tool. The hard part now is getting it adopted inside customer teams. We become your forward-deployed implementation arm — ramping up on your product, doing the deployment work inside customers, and feeding back what wins. You sell more, your customers actually adopt, your engineers stay focused on the product.',
    why: 'Tooling companies hit a wall at the customer-adoption layer. The product works, but it needs someone in the room with the customer to design the workflow around it. FDEs are expensive to hire and train. A channel partnership unlocks deployments without staffing a services arm.',
    skuPath: ['channel'],
    template: 'channel',
  },
  {
    id: 'fcto-buyer',
    title: 'Pre-Series-A Founder · Non-technical CEO',
    short: 'Fractional CTO',
    pain: 'Technical decisions piling up, no full-time CTO yet, can’t afford to make the wrong architectural call.',
    pitch:
      'You don’t need a full-time CTO yet — but you do need CTO-quality decisions. I\'ve been the CTO at an acquired startup and a senior engineering leader at Adobe. For ~10 hours a week, you get strategy, hiring help, code review, and vendor / tool selection — plus someone to talk through the hard calls before they harden into expensive mistakes.',
    why:
      'Pre-Series-A founders frequently delay hiring a full-time CTO until product-market fit. During that delay, technical decisions compound. A fractional CTO is the bridge that lets the early team make decisions they’ll be proud of in two years. Most buyers find this role through accelerator and advisor networks, not cold outreach.',
    skuPath: ['fcto'],
    template: 'fcto',
  },
];

const CALL_QUESTIONS = [
  'Where are people already using AI agents?',
  'Which tools?',
  'Which functions: engineering, product, ops, design, GTM?',
  'Where does it feel magical?',
  'Where does it create rework or risk?',
  'Is usage individual or shared?',
  'Do you have playbooks?',
  'Do you have any way to tell whether the team is improving?',
  'Who is the internal person everyone goes to for this?',
  'What would "better" look like in 30 days?',
];

const QUAL_GOOD = [
  'They already use agents',
  'They can name real workflows',
  'They can name pain',
  'They worry about repeatability',
  'They ask about measurement',
  'They ask about privacy / security',
  'They have budget authority',
  'They want this in the next 30 days',
];

const QUAL_BAD = [
  '"We’re just curious"',
  '"Can you do a lunch-and-learn?"',
  '"Can you send materials?"',
  '"We need to educate the committee"',
  '"We do not use any tools yet"',
  '"We want a full AI strategy roadmap before doing anything"',
  '"This is interesting, but no budget"',
];

const TEMPLATES = [
  {
    id: 'fcto',
    name: 'Modern Fractional CTO (lead)',
    subject: 'Fractional CTO availability',
    body: `Hey [Name],

I’m taking on 1–2 new fractional CTO engagements this quarter. I know you’re [context — heading into Series A / between technical leads / building the team rapidly / haven’t hired a CTO yet — etc.] — wanted to flag in case it’s useful.

I’m a fractional CTO for the new world: I help startups build fast with agents, set up the technical foundation, and train the team so they can keep operating that way after I’m gone.

Quick background: ex-CTO at Sayspring (acquired by Adobe in 2018), Senior Engineering Manager at Adobe for 3+ years, now founder of Sublayer where I work on agentic dev tooling. ERA Lead Mentor for 7 years.

Typical engagement: ~10 hours/week, $15K/month, 3-month minimum. You get someone who builds the thing AND leaves your team with the skills, systems, and docs to keep going in an agentic way.

Worth a quick call to see if there’s a fit?`,
  },
  {
    id: 'warm',
    name: 'Warm buyer (Agent Operator diagnostic)',
    subject: 'Agent Operator diagnostic',
    body: `Hey [Name],

I’m starting to work with teams on something I’m calling the Agent Operator function.

The pattern I’m seeing: companies already have people using Claude Code, Cursor, ChatGPT, custom GPTs, Zapier, internal agents, etc. Some of it is useful. Some of it is chaos. Almost none of it is turning into shared practice.

I’m offering a small number of paid diagnostics where I map how a team is using agents today, identify the repeated workflow / failure patterns, and produce a practical 30-day plan.

I think this might be relevant for [Company] because [specific reason].

Worth comparing notes?`,
  },
  {
    id: 'engineering',
    name: 'Engineering-specific',
    subject: 'AI agent usage on your engineering team',
    body: `Hey [Name],

Quick question: is your team already using Claude Code, Cursor, Codex, or similar tools in real engineering work?

I’m running Agentic Workflow Baselines for teams that have moved past casual experimentation but do not yet have a shared practice.

The diagnostic looks at how engineers are actually using agents, where sessions succeed / fail, what workflows should become team-wide, and what should be measured or improved over 30–90 days.

It is less “AI training” and more film study + operating system design.

Is this something you are actively thinking about?`,
  },
  {
    id: 'product',
    name: 'Product / ops / design',
    subject: 'AI workflows beyond engineering',
    body: `Hey [Name],

I’m working with teams that are trying to turn AI-agent experiments into actual operating practices.

Engineering is the obvious starting point, but I’m increasingly interested in product, design, ops, and internal GTM workflows: research synthesis, customer feedback loops, internal tools, spreadsheet / macro replacement, account research, design handoff, support workflows, etc.

The diagnostic maps where agents are already showing up, what workflows are good candidates, what context / tools / data are missing, and who internally should operate and maintain the system.

I’m trying to talk to teams where this is already becoming real.

Is there someone on your team who is quietly doing this work already?`,
  },
  {
    id: 'referral',
    name: 'Referral ask',
    subject: 'A quick ask',
    body: `Hey [Name],

I’m looking for teams where AI-agent usage has moved beyond curiosity and into “we need an operating model for this.”

Best fit: a founder, CTO, COO, product / ops leader, or head of engineering whose team is already using agents but does not yet have shared practices, playbooks, or measurement.

Do you know 1–2 people wrestling with that?`,
  },
  {
    id: 'channel',
    name: 'Channel partner (AI tooling co.)',
    subject: 'FDE for [Product] customers',
    body: `Hey [Name],

The pattern I see at agentic-tool companies: customers buy the product, but the actual rollout needs someone in the room with them to redesign the workflow around it. Engineers get pulled into deployments and lose product time. Sales loses deals when it can’t credibly say “and we’ll help you deploy.”

I’m working with a small number of agentic-tool teams as their forward-deployed engineer — ramping up on the product, doing the deployment work inside customer teams, and feeding implementation patterns back to product.

For [Product] specifically, this might be useful because [specific observation — their integration story, customer profile, current rollout pattern].

Structured as a monthly retainer for ongoing customer flow, or scoped per-engagement if you want to test. Not an agency — one person, closer to your sales motion, bringing implementation patterns back to inform the roadmap.

Worth a 20-minute call?`,
  },
];

const DAILY_RHYTHM = [
  ['New personalized outreach', '10'],
  ['Follow-ups',                '5'],
  ['Discovery calls',           '1–3'],
  ['Public post / commenting',  '1'],
  ['CRM updates',               'daily'],
  ['Referral asks',             '3'],
];

const ASSET_GROUPS = {
  linkedin: {
    label: 'LinkedIn',
    lane: 'brand',
    laneNote: 'Stays Agent Operator. Headline, About, Featured links, post cadence — all point at the category, the role, the ecosystem.',
    items: [
      {
        id: 'li-headline',
        title: 'Update headline',
        payload:
          'Building the Agent Operator ecosystem — helping teams turn AI agents into measurable work practices | Founder, Sublayer',
        note: 'Names the category, says what you do, doesn’t narrow you to engineering.',
      },
      {
        id: 'li-about',
        title: 'Replace About section',
        payload: `I’m the founder of Sublayer.

We’re building the professional ecosystem for Agent Operators: the emerging role responsible for designing, running, evaluating, and improving workflows that use AI agents.

Agent Operators sit between human intent and machine execution. They map how work actually happens, shape the context agents need, connect tools and data, supervise execution, verify outputs, document repeatable practices, and keep workflows improving as models and tools change.

They may come from engineering, product, design, operations, GTM, support, data, or IT. The background provides domain judgment. The Agent Operator discipline provides the method.

Right now, Sublayer is starting with services for teams already experimenting with AI agents. We help them turn scattered individual usage into measurable work practices through diagnostics, workflow design, team training, baselines, playbooks, and ongoing enablement.

Longer term, we’re building the media, community, bootcamp, hiring network, and tools for this new professional category.

I also write Works on My Machine, run Artificial Ruby in NYC, and build open source tools around prompt objects, agentic software, and the future of work.`,
      },
      {
        id: 'li-featured',
        title: 'Set Featured links',
        payload: [
          'Book an Agent Operator Diagnostic',
          'The Agent Operator thesis post',
          'Works on My Machine',
          'Artificial Ruby',
          'Relevant open source — go-minitrace, prompt_objects, skills',
        ],
      },
      {
        id: 'li-cadence',
        title: 'Run the post cadence',
        payload: [
          '3 posts/week on Agent Operator category',
          '2 posts/week on concrete workflow failures',
          '1 post/week on services / diagnostic availability',
          'Daily comments on CTOs, AI-tooling founders, devtools people, ops leaders',
        ],
      },
    ],
  },
  'sublayer-com': {
    label: 'sublayer.com',
    lane: 'brand',
    laneNote: 'Stays Agent Operator. Homepage, sections, narrative — the long compounding category-creation work happens here.',
    items: [
      {
        id: 'site-hero',
        title: 'Rewrite homepage hero',
        payload: `Headline:  Building the professional ecosystem for Agent Operators.

Subhead:  AI agents are entering every function. The bottleneck is no longer access to models — it is the people and practices that turn messy workflows into reliable agentic systems.

Body:  Sublayer helps teams turn scattered AI-agent experiments into measurable work practices through diagnostics, workflow design, training, playbooks, and ongoing enablement. Services today. Community, bootcamps, tools, and hiring infrastructure next.

CTAs:
  Primary    →  Book an Agent Operator Diagnostic
  Secondary  →  Read the Agent Operator Thesis
  Tertiary   →  Join the community / follow Works on My Machine`,
      },
      {
        id: 'site-sections',
        title: 'Structure homepage sections',
        payload: [
          'What is an Agent Operator?',
          'Why now — teams already using agents, learning not compounding',
          'Services — Diagnostic · Baseline · 90-Day Program',
          'The ecosystem — media · community · services · training · tools · hiring',
          'Starting points — one role, many backgrounds (eng, product, design, ops, GTM, support)',
          'Proof / assets — WoMM, Artificial Ruby, open source, case studies',
        ],
      },
    ],
  },
  'services-page': {
    label: 'Services page',
    lane: 'outreach',
    laneNote: 'Leads with Modern Fractional CTO. The conversion surface — where buyers go from "interested" to "let\'s talk."',
    items: [
      {
        id: 'svc-rewrite',
        title: 'Rewrite services page — one offer, one soft entry',
        note: 'List only what you currently sell. Other SKUs stay in the workbook until delivered once and learned from.',
        payload: `Title:  Modern Fractional CTO

Hero:  A fractional CTO for the new world.

Subhead:  I help startups build fast with agents, set up the technical foundation, and train the team so they can keep operating that way after I'm gone. The Agent Operator work — workflows, playbooks, evaluation loops, training — happens inside the engagement, not as a separate add-on.

Primary offer:
  Modern Fractional CTO
  $15K/month · 3-month minimum
  Build the foundation right, fast, with agents from day one. Train your team to keep operating that way after I step back.
  CTA → Book a fractional CTO conversation.

Soft entry / de-risk:
  Not ready for a three-month commitment?
  Start with an Agent Operator Diagnostic — $3K, five business days.
  I'll map your team's current state and we'll figure out the right next step together.
  CTA → Book a diagnostic.

"Not for you" section:
  · Not for teams looking for a one-hour AI inspiration talk.
  · Not for teams that want a proprietary framework installed and forgotten.
  · Not for teams hoping agents will replace judgment.
  · For teams that need someone to build the foundation right, fast, with agents from day one.

Note (internal): Other SKUs from the workbook ladder — Baseline, 90-Day Program, Office Hours, Intensive, Advisory, Embedded, Channel — stay off the public page until they've been delivered and proven once. Add them to the page when you have a real story to tell about each, not before.`,
      },
    ],
  },
};

const WEEK = [
  { id: 'mon', day: 'Monday',    items: [
    'Change LinkedIn headline',
    'Publish Agent Operator announcement post',
    'Create prospect spreadsheet',
    'List 150 names',
    'Rewrite homepage hero',
    'Rewrite services hero',
    'Send 20 warm emails',
  ]},
  { id: 'tue', day: 'Tuesday',   items: [
    'Send 20 more outreaches',
    'Ask 10 people for referrals',
    'Book calls',
    'Write one-page services PDF',
    'Create Stripe / invoice flow',
  ]},
  { id: 'wed', day: 'Wednesday', items: [
    'Run calls',
    'Sell diagnostics',
    'Send proposals same day',
    'Publish "AI experiments are not compounding" post',
  ]},
  { id: 'thu', day: 'Thursday',  items: [
    'Send 20 more outreaches',
    'Follow up with everyone',
    'Schedule Artificial Ruby / online "Agent Operator Film Study" event',
    'Draft diagnostic report template',
  ]},
  { id: 'fri', day: 'Friday',    items: [
    'Review pipeline',
    'Identify top 10 likely buyers',
    'Send direct asks',
    'Close first diagnostic',
    'Publish "I’m opening 5 diagnostic slots" post',
  ]},
];

const KILL = [
  {
    id: 'd14',
    day: 'Day 14',
    expected: [
      '50+ outreaches sent',
      '10+ calls booked',
      '2+ diagnostics verbally interested',
      '1 paid diagnostic closed',
    ],
    fallback:
      'Simplify the pitch. Move from category language to pain language: "I help teams using Claude Code / Cursor / ChatGPT figure out what is working, what is risky, and what to standardize."',
  },
  {
    id: 'd30',
    day: 'Day 30',
    expected: [
      '5 diagnostics sold',
      '1 baseline or workshop sold',
      '1 retainer in serious conversation',
    ],
    fallback: 'Narrow ICP to engineering teams already using coding agents.',
  },
  {
    id: 'd45',
    day: 'Day 45',
    expected: ['First 90-day program closed or in contracting'],
    fallback: 'Sell workshops aggressively for cash.',
  },
  {
    id: 'd60',
    day: 'Day 60',
    expected: [
      '2 active retainers, OR 1 active retainer plus enough workshops / diagnostics to cover burn',
    ],
    fallback: 'Cut burn, raise bridge, or take a larger bespoke consulting engagement.',
  },
];

const TIERS = [
  {
    id: 'informal',
    num: 'i',
    name: 'Informal advisor',
    short: 'Where you start. Coffee, not contracts.',
    cost: 'Coffee',
    commitment: 'Ad hoc',
    promise:
      'Learn from people who’ve done this. Find out which friends actually have a usable network for your ICP.',
    pitch:
      '"I’m starting sales for the first time. Before I formalize anything, I just want to learn from people who’ve done this well. Can I buy you a beer once a month and pick your brain?"',
    terms: [
      'No agreement',
      'Friend-to-friend',
      'Periodic ad hoc help',
      'No expectation either way',
    ],
    whenRight: 'Always at the start. Use this tier to figure out which friends actually fit the higher tiers.',
    keyMove:
      'Revealed preference > stated preference. The friend who says "I’d love to help" but never makes an intro is not your future partner. The friend who, after one coffee, sends three warm intros unprompted is.',
  },
  {
    id: 'advisor',
    num: 'ii',
    name: 'Formal advisor',
    short: 'FAST agreement. Advisor equity.',
    cost: '0.25–0.5% equity',
    commitment: '~5–10 hrs / month',
    promise:
      'A friend who keeps showing up gets a clear structure. They commit to time and intros; you commit to visibility and using their advice seriously.',
    pitch:
      '"You’re already giving me real advice. I’d like to make this formal — standard advisor agreement, 0.25% over two years. I want you in the loop on actual deals, and I want a structure where it’s clear you’re owed something for the value you’re adding."',
    terms: [
      '0.25% equity for ~5 hrs/month — advice + occasional intros',
      '0.5% for ~10 hrs/month — active involvement, discovery-call cameos, pitch review',
      '2-year vesting, monthly cliff',
      'No board seat, no operational role',
      'Standard FAST template — Founder/Advisor Standard Template, free online',
    ],
    whenRight:
      'When one or two informal advisors keep showing up. Formalize with those. Don’t formalize with everyone — five formal advisors is two too many.',
  },
  {
    id: 'referral',
    num: 'iii',
    name: 'Referral partner',
    short: 'Commission only. No equity.',
    cost: '10–20% of year-1 revenue',
    commitment: 'Their choice',
    promise:
      'A friend with a great network refers prospects. You pay commission only on closed-won deals. Real money for warm intros that close.',
    pitch:
      '"You know everyone in [their world]. If you make warm intros that close, I’ll pay you 15% of the first year of revenue. No equity, no obligation, no monthly check-in. You hand-pick which deals to bring me. I close them."',
    terms: [
      '10–20% of first-year revenue (industry-standard range)',
      'Sometimes 5% of year 2 if they stay involved',
      'Capped or uncapped — your call',
      'Paid only on closed-won',
      'Light written agreement — 1–2 page MSA',
    ],
    math: [
      ['90-Day Program ($45K)',                  '$6,750'],
      ['Embedded Operator (3-mo, $75K)',         '$11,250'],
      ['FDE Channel retainer ($240K / yr)',      '$36,000 / yr'],
      ['Diagnostic ($3K)',                        '$450 (probably waive)'],
    ],
    whenRight:
      'When a friend has an unusually rich network in your ICP but doesn’t want advisor-shaped involvement. Transactional, clean, less awkward than equity.',
  },
  {
    id: 'fractional',
    num: 'iv',
    name: 'Fractional sales partner',
    short: 'Probably premature. Real eventually.',
    cost: '$7–12K / mo + 0.5–1.5% equity',
    commitment: '~10–15 hrs / week',
    promise:
      'Someone semi-embedded who coaches you AND closes deals AND builds the pipeline. Real fractional executive role.',
    pitch:
      '"Here’s where the business is, here’s where I’m stuck on the sales motion, and here’s the role I think you’d be perfect for. I can offer $X cash plus equity. Want to figure out a shape that works?"',
    terms: [
      '$7–12K / month cash retainer',
      '0.5–1.5% equity over 2–4 years',
      '~10–15 hrs / week typical',
      'Light operational role — pipeline review, deal coaching, occasional close',
    ],
    whenRight:
      'After ~$30–50K MRR, when the pipeline pays for the role. Revisit at day 90 if a friend really wants in and traction supports it.',
    warning: 'Cash you don’t have to spare. Premature without traction.',
  },
];

const CASTING_STEPS = [
  ['Coffees with 5–8 sales-savvy friends', 'Next 4 weeks. Tier i only. No agreements.'],
  ['Notice who shows up',                   'Who sends intros without being asked? Whose thoughts change how you sell? Who actually understands your category vs. pattern-matches it to their own?'],
  ['Formalize with the 1–2 best fits',      'By day 60. Tier ii (advisor equity). 0.25% is a real number to a friend; treat it as one.'],
  ['Set up tier-iii referral fees',         'For rich-network friends who don’t want advisor-shaped involvement. Transactional, clean, lower stakes for both sides.'],
  ['Don’t formalize with everyone',         'Five formal advisors is two too many. Cap-table noise > cap-table signal.'],
];

const TAXONOMY = [
  ['Enterprise SaaS to F500',                          'Different beast. Long cycles, big committees, RFPs. Partially transferable; watch for over-formalizing instincts.'],
  ['Mid-market SaaS — especially CTO / eng buyers',    'Close to your shape. Highly transferable.'],
  ['Consulting / advisory / professional services',    'Highly relevant. Same value-anchored, trust-driven motion. These friends are gold.'],
  ['Ad-tech, fin-services, high-volume SDR-driven',    'Mostly different motion. Useful for grit and discipline; less for category creation.'],
];

// ============================================================================
// SECTIONS — IA + tab metadata
// ============================================================================

const SECTIONS = [
  {
    id: 'thesis',
    num: '01',
    title: 'The thesis',
    hook: 'The sharp thing, in one sentence — and the numbers behind it.',
    tabs: [{ id: 'main', label: 'Thesis' }],
  },
  {
    id: 'skus',
    num: '02',
    title: 'The SKU ladder',
    hook: 'Nine SKUs. Lead with Fractional CTO; bundle the Agent Operator work inside.',
    tabs: [
      { id: 'compare',      label: 'Compare all' },
      ...SKUS.map((s) => ({ id: s.id, label: `${s.num}. ${s.short.includes('flagship') || s.flagship ? s.name : s.name.replace(/Agent Operator |Agentic Workflow |Executive Agent Strategy /,'')}` })),
    ],
  },
  {
    id: 'math',
    num: '03',
    title: 'Pricing & math',
    hook: 'Default alive first. Any honest mix that gets to $30K MRR counts.',
    tabs: [
      { id: 'targets', label: 'Targets' },
      { id: 'paths',   label: 'Paths to break-even' },
    ],
  },
  {
    id: 'plan',
    num: '04',
    title: 'Thirty / sixty / ninety',
    hook: 'What has to be true at each checkpoint, and how the work compounds.',
    tabs: PHASES.map((p) => ({ id: p.id, label: p.range })),
  },
  {
    id: 'personas',
    num: '05',
    title: 'Buyer personas',
    hook: 'One role, many backgrounds. Who buys, why, and which SKU fits.',
    tabs: [
      { id: 'all', label: 'All buyers' },
      ...PERSONAS.map((p) => ({ id: p.id, label: p.short })),
    ],
  },
  {
    id: 'playbook',
    num: '06',
    title: 'Sales playbook',
    hook: 'Call structure, qualification, the four templates, and the daily rhythm.',
    tabs: [
      { id: 'call',     label: 'Call structure' },
      { id: 'qual',     label: 'Qualification' },
      { id: 'outreach', label: 'Outreach' },
      { id: 'rhythm',   label: 'Daily rhythm' },
    ],
  },
  {
    id: 'assets',
    num: '07',
    title: 'Asset updates',
    hook: 'LinkedIn and sublayer.com stay Agent Operator brand. Services page leads with Modern Fractional CTO. Two lanes.',
    tabs: [
      { id: 'linkedin',     label: 'LinkedIn' },
      { id: 'sublayer-com', label: 'sublayer.com' },
      { id: 'services-page',label: 'Services page' },
    ],
  },
  {
    id: 'week',
    num: '08',
    title: 'This week',
    hook: 'Five days. Five very specific days.',
    tabs: [
      { id: 'overview', label: 'Overview' },
      ...WEEK.map((d) => ({ id: d.id, label: d.day.slice(0, 3) })),
    ],
  },
  {
    id: 'kill',
    num: '09',
    title: 'Kill criteria',
    hook: 'Hard checkpoints. Steering, not pessimism.',
    tabs: KILL.map((k) => ({ id: k.id, label: k.day })),
  },
  {
    id: 'partnerships',
    num: '10',
    title: 'Sales partnerships',
    hook: 'Working with the salespeople you know — without over-formalizing too soon.',
    tabs: [
      { id: 'compare',    label: 'Compare all' },
      { id: 'informal',   label: 'i. Informal' },
      { id: 'advisor',    label: 'ii. Advisor' },
      { id: 'referral',   label: 'iii. Referral' },
      { id: 'fractional', label: 'iv. Fractional' },
      { id: 'casting',    label: 'Casting' },
    ],
  },
];

// Override SKU labels with cleaner short names for the tab strip
SECTIONS[1].tabs = [
  { id: 'compare',     label: 'Compare all' },
  { id: 'diagnostic',  label: 'i. Diagnostic' },
  { id: 'baseline',    label: 'ii. Baseline' },
  { id: 'program',     label: 'iii. 90-Day Program' },
  { id: 'office-hours',label: 'iv. Office Hours' },
  { id: 'intensive',   label: 'v. Intensive' },
  { id: 'exec',        label: 'vi. Advisory' },
  { id: 'embedded',    label: 'vii. Embedded' },
  { id: 'channel',     label: 'viii. Channel' },
  { id: 'fcto',        label: 'ix. Fractional CTO' },
];

const FLAT_PAGES = SECTIONS.flatMap((s) =>
  s.tabs.map((t) => ({
    sectionId: s.id,
    sectionNum: s.num,
    sectionTitle: s.title,
    tabId: t.id,
    tabLabel: t.label,
    hasTabs: s.tabs.length > 1,
  }))
);

const findPageIdx = (sectionId, tabId) =>
  FLAT_PAGES.findIndex((p) => p.sectionId === sectionId && p.tabId === tabId);

// ============================================================================
// PRIMITIVES
// ============================================================================

function Hairline({ className = '' }) {
  return <div className={`h-px w-full bg-[var(--paper-edge)] ${className}`} />;
}

function SectionHeader({ section }) {
  return (
    <header>
      <div className="flex items-end gap-5 mb-4">
        <span className="font-display text-[clamp(3.5rem,6vw,5.25rem)] leading-[0.82] text-[var(--accent)] tabular-nums">
          {section.num}
        </span>
        <div className="flex-1 h-[2px] bg-[var(--ink)] mb-3" />
      </div>
      <h2 className="font-serif text-[clamp(1.75rem,3vw,2.4rem)] leading-[1.1] tracking-[-0.012em] text-[var(--ink)] mb-3 font-medium">
        {section.title}
      </h2>
      <p className="font-serif italic text-[1.0625rem] leading-snug text-[var(--ink-soft)] max-w-[58ch]">
        {section.hook}
      </p>
    </header>
  );
}

function TabStrip({ section, activeTab, onChange }) {
  if (section.tabs.length <= 1) return null;
  return (
    <div className="mt-10 mb-12 border-b border-[var(--paper-edge)]">
      <div role="tablist" className="flex flex-wrap gap-x-7 gap-y-1 -mb-px overflow-x-auto">
        {section.tabs.map((t) => {
          const active = t.id === activeTab;
          return (
            <button
              key={t.id}
              role="tab"
              aria-selected={active}
              onClick={() => onChange(t.id)}
              className={`pb-3 font-mono text-[0.72rem] uppercase tracking-[0.16em] transition-colors whitespace-nowrap border-b-2 ${
                active
                  ? 'text-[var(--ink)] border-[var(--accent)]'
                  : 'text-[var(--ink-faint)] border-transparent hover:text-[var(--ink-soft)]'
              }`}
            >
              {t.label}
            </button>
          );
        })}
      </div>
    </div>
  );
}

function Subhead({ children }) {
  return (
    <h3 className="font-sans text-[0.78rem] uppercase tracking-[0.18em] text-[var(--ink-faint)] mt-12 mb-4">
      {children}
    </h3>
  );
}

function Prose({ children, className = '' }) {
  return (
    <div className={`font-serif text-[1.0625rem] leading-[1.6] text-[var(--ink)] max-w-[64ch] ${className}`}>
      {children}
    </div>
  );
}

function PullQuote({ children }) {
  return (
    <blockquote className="my-6 max-w-[60ch]">
      <div className="font-serif text-[1.5rem] leading-[1.25] text-[var(--ink)] tracking-[-0.005em]">
        {children}
      </div>
    </blockquote>
  );
}

function Tag({ children, tone = 'neutral' }) {
  const toneCls = {
    neutral: 'text-[var(--ink-soft)] bg-[var(--paper-deep)]',
    accent:  'text-[var(--accent)] bg-[var(--accent-faint)]',
  }[tone] || 'text-[var(--ink-soft)] bg-[var(--paper-deep)]';
  return (
    <span className={`inline-flex items-center font-mono text-[0.68rem] tracking-[0.12em] uppercase px-2 py-0.5 rounded-sm ${toneCls}`}>
      {children}
    </span>
  );
}

function FlagshipMark() {
  return (
    <span
      className="inline-flex items-center font-display tracking-[0.06em] uppercase px-2.5 py-[3px] bg-[var(--turmeric)] text-[var(--ink)] text-[0.78rem] leading-none"
    >
      Flagship
    </span>
  );
}

function Margin({ children, rotate = -2, dir = 'arrow' }) {
  return (
    <div className="my-5 ml-3 lg:ml-10 max-w-[40ch]">
      <span
        className="font-hand text-[1.2rem] text-[var(--accent)] inline-block leading-snug"
        style={{ transform: `rotate(${rotate}deg)` }}
      >
        {dir === 'arrow' && <span className="mr-1">↳</span>}
        {children}
      </span>
    </div>
  );
}

function Highlight({ children }) {
  return <span className="highlight-turmeric">{children}</span>;
}

function PaperGrain() {
  return (
    <svg
      className="fixed inset-0 w-full h-full pointer-events-none opacity-[0.05] mix-blend-multiply"
      aria-hidden="true"
    >
      <filter id="paper-noise">
        <feTurbulence type="fractalNoise" baseFrequency="0.85" numOctaves="2" stitchTiles="stitch" />
        <feColorMatrix values="0 0 0 0 0.18  0 0 0 0 0.16  0 0 0 0 0.12  0 0 0 1 0" />
      </filter>
      <rect width="100%" height="100%" filter="url(#paper-noise)" />
    </svg>
  );
}

const PERSONA_COLORS = {
  cto:          'var(--ink)',
  coo:          'var(--accent)',
  product:      'var(--turmeric)',
  design:       'var(--pine)',
  founder:      'var(--teal)',
  gtm:          'var(--persimmon)',
  'ai-tooling': 'oklch(40% 0.10 30)',   // rust / sienna — distinct earth tone for the tooling-co. buyer
  'fcto-buyer': 'oklch(35% 0.10 155)',  // deeper forest green — bridge buyer, outside the core thesis
};

function CrossRef({ to, tab, children, onJump }) {
  return (
    <button
      onClick={() => onJump(to, tab)}
      className="font-serif italic text-[var(--accent)] underline decoration-[var(--accent)]/30 underline-offset-[3px] hover:decoration-[var(--accent)] transition-colors"
    >
      {children}
    </button>
  );
}

function CheckItem({ id, label, checked, onToggle }) {
  return (
    <label className="group flex items-start gap-3 py-2 cursor-pointer select-none">
      <span
        className={`mt-1 flex-none w-[18px] h-[18px] rounded-[3px] border transition-colors flex items-center justify-center
          ${checked
            ? 'bg-[var(--ink)] border-[var(--ink)]'
            : 'bg-transparent border-[var(--paper-edge)] group-hover:border-[var(--ink-soft)]'}`}
        aria-hidden="true"
      >
        {checked && <Check size={12} strokeWidth={3} className="text-[var(--paper)]" />}
      </span>
      <input
        type="checkbox"
        checked={checked}
        onChange={() => onToggle(id)}
        className="sr-only"
      />
      <span
        className={`font-serif text-[1rem] leading-snug transition-colors
          ${checked ? 'text-[var(--ink-faint)] line-through decoration-[var(--ink-faint)]/50' : 'text-[var(--ink)]'}`}
      >
        {label}
      </span>
    </label>
  );
}

function MrrChart() {
  const W = 320;
  const H = 180;
  const padL = 30, padR = 10, padT = 10, padB = 24;
  const max = 50;
  const yTicks = [0, 15, 30, 45];
  const plotW = W - padL - padR;
  const plotH = H - padT - padB;
  const yFor = (v) => padT + plotH - (v / max) * plotH;
  const slot = plotW / PRICING_SCENARIOS.length;
  const barW = 30;

  return (
    <svg
      viewBox={`0 0 ${W} ${H}`}
      className="w-full h-auto"
      preserveAspectRatio="xMidYMid meet"
      role="img"
      aria-label="Bar chart of MRR per scenario, with a dashed break-even line at $30K"
    >
      {yTicks.map((t) => (
        <g key={t}>
          <line x1={padL} y1={yFor(t)} x2={W - padR} y2={yFor(t)} stroke="var(--paper-edge)" strokeWidth="1" />
          <text x={padL - 6} y={yFor(t) + 3} textAnchor="end" fontFamily="ui-monospace, SFMono-Regular, monospace" fontSize="9" fill="var(--ink-faint)">
            ${t}K
          </text>
        </g>
      ))}
      <line x1={padL} y1={yFor(30)} x2={W - padR} y2={yFor(30)} stroke="var(--accent)" strokeDasharray="3 3" strokeWidth="1.25" />
      <text x={W - padR} y={yFor(30) - 4} textAnchor="end" fontFamily="'Big Shoulders Display', Impact, sans-serif" fontWeight="700" fontSize="9" letterSpacing="0.06em" fill="var(--accent)">
        BREAK-EVEN
      </text>
      {PRICING_SCENARIOS.map((s, i) => {
        const cx = padL + slot * i + slot / 2;
        const bx = cx - barW / 2;
        const by = yFor(s.mrr);
        const bh = yFor(0) - by;
        return (
          <g key={i}>
            <rect x={bx} y={by} width={barW} height={bh} rx="2" fill={s.tone === 'good' ? 'var(--ink)' : 'var(--ink-faint)'} />
            <text x={cx} y={H - padB + 14} textAnchor="middle" fontFamily="ui-monospace, SFMono-Regular, monospace" fontSize="9" fill="var(--ink-faint)">
              {i + 1}
            </text>
          </g>
        );
      })}
    </svg>
  );
}

// ============================================================================
// PAGE: §01 THESIS
// ============================================================================

function ThesisPage({ onJump }) {
  return (
    <>
      <Prose>
        <p className="mb-5">
          You are not selling <em>AI training</em>. You are not selling{' '}
          <em>engineering consulting</em>. You are not yet selling a bootcamp.
        </p>
        <p className="mb-5">
          You are selling the first operational layer of the Agent Operator ecosystem.
        </p>
      </Prose>

      <PullQuote>
        Sublayer helps teams turn scattered AI-agent experiments into measurable work practices —
        and trains the people who will operate those practices.
      </PullQuote>

      <Prose className="mt-2">
        <p className="mb-5">
          The bigger company is the professional ecosystem around the <strong>Agent Operator</strong> role.
          The near-term cash product is <strong>services that install the Agent Operator function inside real teams</strong>.
        </p>
        <p className="mb-5">The sharp thing:</p>
      </Prose>

      <PullQuote>
        AI agents create a new professional role. Sublayer defines, trains, and equips that role.
        Services are how we prove it.
      </PullQuote>

      <Prose className="mt-2">
        <p className="mb-5">
          Most teams already have experiments — one person’s Claude Code workflow, someone’s giant
          context doc, a few Cursor rituals, a custom GPT nobody else uses, a Zapier/Sheets/Notion
          monster, a half-working internal tool, a "never do that again" story that has not become a
          playbook. The problem is not that people are not experimenting. The problem is that{' '}
          <Highlight><strong>the learning is not compounding</strong></Highlight>. That is the wedge.
        </p>
        <p className="mb-5 text-[var(--ink-soft)]">
          Customers first, category always, investors in the background. The goblin accountant is in
          the room. But he is holding a category design memo.
        </p>
      </Prose>

      <Subhead>Operationally — two surfaces, one company</Subhead>
      <Prose>
        <p className="mb-4">
          The <strong>public surface stays Agent Operator</strong>. Sublayer.com, LinkedIn,
          Works on My Machine, Artificial Ruby, the newsletter, the open-source work — all
          of it points at the category and the role. Slow, compounding, category-creation work.
        </p>
        <p className="mb-6">
          The <strong>direct outreach is Modern Fractional CTO</strong>. Cold and warm emails,
          discovery calls, services-page conversion, day-to-day sales — all of it leads with
          the concrete fractional CTO offer. The Agent Operator work — building with agents,
          training the team to keep operating that way — happens inside the engagement.
        </p>
      </Prose>

      <div className="border-t-2 border-[var(--ink)] max-w-[68ch]">
        <div className="grid grid-cols-[1fr_auto_2fr] gap-x-5 px-1 py-2 font-mono text-[0.68rem] uppercase tracking-[0.14em] text-[var(--ink-faint)] border-b border-[var(--paper-edge)]">
          <span>Surface</span>
          <span>Lane</span>
          <span>Lead with</span>
        </div>
        {[
          ['Sublayer.com homepage',           'brand',    'Agent Operator ecosystem'],
          ['LinkedIn profile + posts',         'brand',    'Agent Operator'],
          ['Works on My Machine',              'brand',    'Agent Operator + thesis'],
          ['Artificial Ruby · newsletter',     'brand',    'Agent Operator community'],
          ['Services page',                    'outreach', 'Modern Fractional CTO'],
          ['Cold + warm outreach',             'outreach', 'Modern Fractional CTO'],
          ['Discovery → close',                'outreach', 'Modern Fractional CTO'],
        ].map(([surface, lane, lead]) => (
          <div key={surface} className="grid grid-cols-[1fr_auto_2fr] gap-x-5 px-1 py-2 border-b border-[var(--paper-edge)] items-baseline">
            <span className="font-serif text-[0.95rem] text-[var(--ink)]">{surface}</span>
            <span className={`font-mono text-[0.68rem] uppercase tracking-[0.14em] ${lane === 'brand' ? 'text-[var(--pine)]' : 'text-[var(--accent)]'}`}>
              {lane}
            </span>
            <span className="font-serif italic text-[0.95rem] text-[var(--ink-soft)]">{lead}</span>
          </div>
        ))}
      </div>

      <p className="mt-6 font-serif italic text-[1rem] text-[var(--ink-soft)] max-w-[60ch] leading-snug">
        Brand stays Agent Operator. Wedge is Fractional CTO. The public side does the long
        compounding work; the outreach side does the urgent revenue work. Both belong to
        the same company.
      </p>

      <Subhead>The numbers that frame this</Subhead>
      <div className="grid grid-cols-2 md:grid-cols-4 gap-x-8 gap-y-6 mt-2">
        {KEY_NUMBERS.map((n) => (
          <div key={n.label} className="flex flex-col gap-1 border-t border-[var(--paper-edge)] pt-3">
            <div className="flex items-baseline gap-1.5">
              <span className="font-serif text-[clamp(1.75rem,3vw,2.25rem)] leading-none text-[var(--ink)] tabular-nums">
                {n.value}
              </span>
              <span className="font-mono text-[0.7rem] tracking-[0.1em] uppercase text-[var(--ink-faint)]">
                {n.unit}
              </span>
            </div>
            <span className="font-sans text-[0.8125rem] text-[var(--ink-soft)]">{n.label}</span>
          </div>
        ))}
      </div>

      <div className="mt-10 max-w-[62ch] font-serif italic text-[1rem] text-[var(--ink-soft)] leading-snug">
        The single goal of the next 90 days: <strong className="text-[var(--ink)] not-italic">default alive</strong>.
        Lead outbound with{' '}
        <CrossRef to="skus" tab="fcto" onJump={onJump}>Modern Fractional CTO</CrossRef> — two retainers at $15K/mo covers burn cleanly.{' '}
        <CrossRef to="skus" tab="embedded" onJump={onJump}>Embedded</CrossRef>,{' '}
        <CrossRef to="skus" tab="program" onJump={onJump}>90-Day Programs</CrossRef>, and{' '}
        <CrossRef to="skus" tab="channel" onJump={onJump}>Channel partnerships</CrossRef> all count toward the same goal. Diagnostics fund the runway while retainers compound.{' '}
        <CrossRef to="math" tab="paths" onJump={onJump}>See the math</CrossRef>.
      </div>
    </>
  );
}

// ============================================================================
// PAGE: §02 SKUs
// ============================================================================

function SkuComparePage({ onJump }) {
  return (
    <>
      <Prose>
        <p className="mb-5">
          Nine SKUs. Operationally split into two layers:
        </p>
        <ul className="mb-5 space-y-1.5">
          <li><strong>Brand / category</strong> — Agent Operator. The thesis, the writing, the homepage, the long-term ecosystem.</li>
          <li><strong>Outbound / wedge</strong> — Modern Fractional CTO. The concrete sale. Agent Operator work bundled inside an engagement label buyers already understand.</li>
        </ul>
        <p className="mb-5">
          The flagship sits at <strong>ix. Modern Fractional CTO</strong>. The Diagnostic is the
          paid front door. Everything else is supporting motion.
        </p>
      </Prose>

      <PullQuote>
        I’m a fractional CTO for the new world — I help startups build fast with agents,
        set up the technical foundation, and train the team so they can keep operating
        that way after I’m gone.
      </PullQuote>

      <Subhead>Workbook menu vs. public products</Subhead>
      <Prose>
        <p className="mb-3">
          The workbook is the <strong>internal menu of possibilities</strong> — every SKU you’ve thought
          through, the math, the buyer-mapping. It’s how you reason about the business.
        </p>
        <p className="mb-3">
          The <CrossRef to="assets" tab="services-page" onJump={onJump}>public services page</CrossRef> is
          the <strong>conversion surface</strong>. It lists only what’s actually proven: <em>Modern Fractional CTO</em>{' '}
          (primary) and <em>Agent Operator Diagnostic</em> (soft entry). Two offers, decisive.
        </p>
        <p className="text-[var(--ink-soft)]">
          Other SKUs — Baseline, 90-Day Program, Office Hours, Intensive, Advisory, Embedded, Channel —
          stay off the public page until they’ve been delivered once and you have a real story
          to tell about them. The first FCTO engagement will surface what those SKUs actually
          want to be in practice. Add them to the page when you’ve earned the story, not before.
        </p>
      </Prose>

      <Margin rotate={-1.5}>workbook = menu of possibilities. services page = what you’ve actually delivered.</Margin>

      <div className="mt-8 border border-[var(--paper-edge)] rounded-sm overflow-hidden">
        <div className="grid grid-cols-[auto_1fr_auto_auto] gap-x-5 px-4 py-2.5 bg-[var(--paper-deep)] border-b-2 border-[var(--ink)] font-mono text-[0.68rem] uppercase tracking-[0.14em] text-[var(--ink-faint)]">
          <span>#</span>
          <span>SKU</span>
          <span className="text-right">Price</span>
          <span className="text-right hidden sm:block">Capacity</span>
        </div>
        {SKUS.map((sku) => (
          <button
            key={sku.id}
            onClick={() => onJump('skus', sku.id)}
            className={`w-full text-left grid grid-cols-[auto_1fr_auto_auto] gap-x-5 px-4 py-3 items-baseline border-t border-[var(--paper-edge)] hover:bg-[var(--paper-deep)]/40 transition-colors ${
              sku.flagship ? 'bg-[var(--accent-faint)]/20' : ''
            }`}
          >
            <span className="font-mono text-[0.78rem] text-[var(--ink-faint)] tabular-nums lowercase">
              {sku.num}
            </span>
            <span className="font-serif text-[1rem] text-[var(--ink)]">
              {sku.name}
              {sku.flagship && <span className="ml-2 align-middle"><FlagshipMark /></span>}
            </span>
            <span className="font-mono text-[0.85rem] text-[var(--ink)] tabular-nums text-right whitespace-nowrap">
              {sku.price}
              <span className="text-[var(--ink-faint)] ml-1">{sku.priceUnit}</span>
            </span>
            <span className="font-sans text-[0.8125rem] text-[var(--ink-soft)] text-right hidden sm:block whitespace-nowrap">
              {sku.capacity}
            </span>
          </button>
        ))}
      </div>

      <p className="mt-4 font-serif italic text-[0.95rem] text-[var(--ink-soft)] max-w-[60ch] leading-snug">
        Click any row to drill into the SKU detail. Or use the tabs above.
      </p>
    </>
  );
}

function SkuDetailPage({ skuId, onJump }) {
  const sku = SKUS.find((s) => s.id === skuId);
  if (!sku) return null;
  return (
    <div className="grid lg:grid-cols-[1fr_240px] gap-x-12 gap-y-8 mt-2">
      <div>
        <div className="flex items-baseline gap-3 mb-3 flex-wrap">
          <span className="font-mono text-[0.78rem] text-[var(--ink-faint)] tabular-nums lowercase">
            {sku.num}
          </span>
          <h3 className="font-serif text-[1.75rem] tracking-[-0.005em] text-[var(--ink)] leading-tight">
            {sku.name}
          </h3>
          {sku.flagship && <Tag tone="accent">flagship</Tag>}
        </div>
        <p className="font-serif italic text-[1.05rem] text-[var(--ink-soft)] mb-7">{sku.short}</p>

        <div className="font-serif italic text-[1.0625rem] text-[var(--ink)] leading-snug max-w-[58ch] mb-8">
          "{sku.promise}"
        </div>

        <div className="font-sans text-[0.78rem] uppercase tracking-[0.16em] text-[var(--ink-faint)] mb-2">
          What you ship
        </div>
        <ul className="font-serif text-[0.95rem] text-[var(--ink)] space-y-1.5 mb-7 max-w-[60ch]">
          {sku.deliverables.map((d) => (
            <li key={d} className="flex gap-3">
              <span className="text-[var(--ink-faint)] mt-1.5 flex-none">·</span>
              <span>{d}</span>
            </li>
          ))}
        </ul>

        {sku.fit && (
          <>
            <div className="font-sans text-[0.78rem] uppercase tracking-[0.16em] text-[var(--ink-faint)] mb-2">
              Good fit
            </div>
            <ul className="font-serif text-[0.95rem] text-[var(--ink-soft)] space-y-1 mb-7 max-w-[60ch]">
              {sku.fit.map((f) => (
                <li key={f}>— {f}</li>
              ))}
            </ul>
          </>
        )}

        {sku.months && (
          <>
            <div className="font-sans text-[0.78rem] uppercase tracking-[0.16em] text-[var(--ink-faint)] mb-3">
              90-day arc
            </div>
            <div className="grid md:grid-cols-3 gap-5 mb-7">
              {sku.months.map((m) => (
                <div key={m.label}>
                  <div className="font-serif text-[1rem] text-[var(--ink)] mb-2 italic">{m.label}</div>
                  <ul className="font-serif text-[0.9rem] text-[var(--ink-soft)] space-y-1">
                    {m.items.map((it) => <li key={it}>— {it}</li>)}
                  </ul>
                </div>
              ))}
            </div>
          </>
        )}

        {sku.metricsEng && (
          <div className="grid md:grid-cols-2 gap-x-8 gap-y-3 mb-7">
            <div>
              <div className="font-sans text-[0.78rem] uppercase tracking-[0.16em] text-[var(--ink-faint)] mb-2">
                For engineering teams
              </div>
              <div className="font-mono text-[0.8rem] text-[var(--ink-soft)] leading-relaxed">
                {sku.metricsEng.join(' · ')}
              </div>
            </div>
            <div>
              <div className="font-sans text-[0.78rem] uppercase tracking-[0.16em] text-[var(--ink-faint)] mb-2">
                For non-engineering teams
              </div>
              <div className="font-mono text-[0.8rem] text-[var(--ink-soft)] leading-relaxed">
                {sku.metricsOps.join(' · ')}
              </div>
            </div>
          </div>
        )}

        <div className="font-sans text-[0.78rem] uppercase tracking-[0.16em] text-[var(--ink-faint)] mb-2">
          Sales line
        </div>
        <div className="font-serif italic text-[1rem] text-[var(--ink)] leading-snug max-w-[60ch]">
          "{sku.salesLine}"
        </div>

        {sku.warning && (
          <div className="mt-7 font-sans text-[0.85rem] text-[var(--accent)] italic">
            Watch out: {sku.warning}
          </div>
        )}

        {sku.id === 'embedded' && (
          <Margin rotate={-1.5}>the bridge while the 90-day pipeline fills — trade scaling math for cash flow, wean off as retainers stack</Margin>
        )}

        {sku.id === 'fcto' && (
          <>
            <div className="font-mono text-[0.78rem] uppercase tracking-[0.16em] text-[var(--ink-faint)] mb-2 mt-10">
              Positioning — wedge vs. category
            </div>
            <p className="font-serif text-[0.95rem] text-[var(--ink)] leading-snug max-w-[62ch] mb-2">
              <strong>Brand stays Agent Operator.</strong> Sublayer.com, the thesis essay, the
              media presence — all of that points at the broader category and ecosystem play.
            </p>
            <p className="font-serif text-[0.95rem] text-[var(--ink)] leading-snug max-w-[62ch] mb-6">
              <strong>Outbound leads with Fractional CTO.</strong> Buyers know what that is.
              The Agent Operator work — building with agents, training the team to keep operating
              that way — happens inside the Fractional CTO engagement.
            </p>

            <div className="font-mono text-[0.78rem] uppercase tracking-[0.16em] text-[var(--ink-faint)] mb-2">
              Sales motion
            </div>
            <p className="font-serif text-[0.95rem] text-[var(--ink)] leading-snug max-w-[62ch] mb-3">
              Fractional CTO is a known category. Almost no educational sale required. The motion is mostly trust calibration: <em>can this person be my CTO-equivalent for ten hours a week?</em>
            </p>
            <ul className="font-serif text-[0.95rem] text-[var(--ink-soft)] space-y-1.5 mb-4 max-w-[62ch]">
              <li>— Buyers come mostly via referrals: accelerators (ERA), VC portfolio companies, advisor networks. Cold outreach works less well here than in the Agent Operator motion.</li>
              <li>— Sales cycle is short: 1–3 conversations, 2–4 weeks to close.</li>
              <li>— First call is mostly listening: what does their team look like, what are they stuck on, what would a CTO be doing for them.</li>
              <li>— The close is direct: "I'd be useful here. ~10 hours a week, $15K/month, 3-month minimum. Want to start?"</li>
              <li>— Your résumé does most of the selling. Lead with Sayspring → Adobe + 7 years of ERA mentorship.</li>
              <li>— Differentiate with outcomes, not buzzwords: "you get someone who builds the thing AND leaves your team with the skills, systems, and docs to keep going in an agentic way."</li>
            </ul>
            <Margin rotate={-1.5}>two retainers at $15K = default alive. that&apos;s the math.</Margin>
          </>
        )}

        <div className="mt-10 font-serif italic text-[0.95rem] text-[var(--ink-soft)]">
          See <CrossRef to="personas" onJump={onJump}>buyer personas</CrossRef> for who specifically buys this and why.
        </div>
      </div>

      <aside className="border-t lg:border-t-0 lg:border-l border-[var(--paper-edge)] lg:pl-8 pt-6 lg:pt-0 self-start lg:sticky lg:top-12">
        <div className="space-y-4 font-sans text-[0.85rem]">
          <div>
            <div className="font-mono text-[0.68rem] uppercase tracking-[0.16em] text-[var(--ink-faint)] mb-1">Price</div>
            <div className="font-mono text-[1.05rem] text-[var(--ink)] tabular-nums">{sku.price}</div>
            <div className="text-[var(--ink-soft)]">{sku.priceUnit}</div>
            {sku.priceDetail && (
              <div className="text-[var(--ink-soft)] italic mt-1 text-[0.8125rem] leading-snug">
                {sku.priceDetail}
              </div>
            )}
          </div>
          <div>
            <div className="font-mono text-[0.68rem] uppercase tracking-[0.16em] text-[var(--ink-faint)] mb-1">Timeline</div>
            <div className="text-[var(--ink)]">{sku.timeline}</div>
          </div>
          <div>
            <div className="font-mono text-[0.68rem] uppercase tracking-[0.16em] text-[var(--ink-faint)] mb-1">Capacity</div>
            <div className="text-[var(--ink)]">{sku.capacity}</div>
          </div>
          <div>
            <div className="font-mono text-[0.68rem] uppercase tracking-[0.16em] text-[var(--ink-faint)] mb-1">Buyer</div>
            <div className="text-[var(--ink)] leading-snug">{sku.buyer}</div>
          </div>
          <div>
            <div className="font-mono text-[0.68rem] uppercase tracking-[0.16em] text-[var(--ink-faint)] mb-1">Purpose</div>
            <div className="text-[var(--ink)] leading-snug">{sku.purpose}</div>
          </div>
        </div>
      </aside>
    </div>
  );
}

// ============================================================================
// PAGE: §03 PRICING & MATH
// ============================================================================

function PricingTargetsPage() {
  return (
    <>
      <Prose>
        <p className="mb-5">
          The single goal of the next 90 days is <Highlight><strong>default alive</strong></Highlight> —
          covering the $30K/month burn with revenue. The mix doesn't matter.
          Programs, Embedded, Channel, mixed retainers, repeat diagnostics — all of it counts.
        </p>
        <p className="mb-8">
          The targets below are checkpoints toward that goal, not specific quotas about which SKU to sell.
        </p>
      </Prose>

      <div className="border border-[var(--paper-edge)] rounded-sm">
        <div className="grid grid-cols-[120px_1fr_2fr] gap-x-6 px-4 py-2.5 bg-[var(--paper-deep)] border-b-2 border-[var(--ink)] font-mono text-[0.68rem] uppercase tracking-[0.14em] text-[var(--ink-faint)]">
          <span>When</span>
          <span>Revenue</span>
          <span>Why</span>
        </div>
        {TARGETS.map((t) => (
          <div key={t.day} className="grid grid-cols-[120px_1fr_2fr] gap-x-6 px-4 py-3 items-baseline border-t border-[var(--paper-edge)]">
            <span className="font-mono text-[0.85rem] text-[var(--ink)] tabular-nums">{t.day}</span>
            <span className="font-mono text-[0.95rem] text-[var(--ink)] tabular-nums">{t.revenue}</span>
            <span className="font-serif italic text-[0.95rem] text-[var(--ink-soft)]">{t.why}</span>
          </div>
        ))}
      </div>

      <div className="mt-10 max-w-[60ch] font-serif italic text-[1rem] text-[var(--ink-soft)] leading-snug">
        Burn is roughly $30K/month with three months of runway. Ten $3K customers is
        how you accidentally invent a support zoo and become its tired zookeeper.
      </div>

      <Margin rotate={1.5}>default alive — by whatever honest mix works</Margin>
    </>
  );
}

function PricingPathsPage({ onJump }) {
  return (
    <>
      <Prose>
        <p className="mb-8">
          Five mixes that hit (or approach) break-even. The clean target is two flagship
          retainers at $15K/month — the rest is cash, proof, and pipeline.
        </p>
      </Prose>

      <div className="grid lg:grid-cols-[1fr_320px] gap-10 items-start">
        <div className="border-t border-[var(--paper-edge)]">
          {PRICING_SCENARIOS.map((s) => (
            <div key={s.mix} className="grid grid-cols-[1fr_auto] gap-x-6 py-3 border-b border-[var(--paper-edge)] items-baseline">
              <div>
                <div className="font-serif text-[1rem] text-[var(--ink)] leading-snug">{s.mix}</div>
                <div className="font-sans text-[0.8125rem] italic text-[var(--ink-soft)] mt-0.5">{s.label}</div>
              </div>
              <div className="font-mono text-[1.0625rem] text-[var(--ink)] tabular-nums whitespace-nowrap">
                ${s.mrr}K<span className="text-[var(--ink-faint)] text-[0.8rem]">/mo</span>
              </div>
            </div>
          ))}
        </div>

        <div className="bg-[var(--paper-deep)] rounded-sm p-5">
          <div className="font-mono text-[0.68rem] uppercase tracking-[0.16em] text-[var(--ink-faint)] mb-3">
            Visualized
          </div>
          <MrrChart />
          <div className="font-sans text-[0.78rem] text-[var(--ink-soft)] mt-2 leading-snug">
            Bars are MRR per scenario. The dashed line is break-even ($30K/mo).
          </div>
        </div>
      </div>

      <div className="mt-10 max-w-[62ch] font-serif italic text-[1rem] text-[var(--ink-soft)] leading-snug">
        <Highlight><strong className="text-[var(--ink)] not-italic">Default alive by day 60</strong></Highlight>:
        $30K MRR via any mix above.{' '}
        <CrossRef to="skus" tab="diagnostic" onJump={onJump}>Diagnostics</CrossRef> fund the runway while retainers compound.
        The <CrossRef to="skus" tab="embedded" onJump={onJump}>Embedded SKU</CrossRef> is the fastest first retainer to close;
        the <CrossRef to="skus" tab="program" onJump={onJump}>90-Day Program</CrossRef> is the most scalable once case studies exist.
      </div>
    </>
  );
}

// ============================================================================
// PAGE: §04 30/60/90 (per phase)
// ============================================================================

function PhasePage({ phaseId }) {
  const p = PHASES.find((x) => x.id === phaseId);
  if (!p) return null;
  return (
    <article>
      <div className="flex items-baseline gap-4 mb-1">
        <span className="font-mono text-[0.78rem] tracking-[0.18em] uppercase text-[var(--accent)] tabular-nums">
          {p.range}
        </span>
        <Hairline className="flex-1" />
      </div>
      <h3 className="font-serif text-[1.7rem] leading-tight tracking-[-0.005em] text-[var(--ink)] mb-1">
        {p.title}
      </h3>
      <p className="font-serif italic text-[1.05rem] text-[var(--ink-soft)] mb-8">
        Goal — {p.goal}
      </p>

      <div className="grid lg:grid-cols-2 gap-x-12 gap-y-10">
        <div>
          <div className="font-sans text-[0.78rem] uppercase tracking-[0.16em] text-[var(--ink-faint)] mb-3">KPIs</div>
          <div className="border-t border-[var(--paper-edge)]">
            {p.kpis.map(([k, v]) => (
              <div key={k} className="grid grid-cols-[1fr_auto] gap-x-6 py-2 border-b border-[var(--paper-edge)] items-baseline">
                <span className="font-serif text-[0.95rem] text-[var(--ink)]">{k}</span>
                <span className="font-mono text-[0.95rem] text-[var(--ink)] tabular-nums whitespace-nowrap">{v}</span>
              </div>
            ))}
          </div>
        </div>

        <div className="space-y-8">
          {p.revenuePath && (
            <div>
              <div className="font-sans text-[0.78rem] uppercase tracking-[0.16em] text-[var(--ink-faint)] mb-3">
                Revenue path
              </div>
              <div className="border-t border-[var(--paper-edge)]">
                {p.revenuePath.map(([k, v], idx, arr) => (
                  <div key={k} className={`grid grid-cols-[1fr_auto] gap-x-6 py-2 border-b border-[var(--paper-edge)] items-baseline ${idx === arr.length - 1 ? 'font-medium' : ''}`}>
                    <span className="font-serif text-[0.95rem] text-[var(--ink)]">{k}</span>
                    <span className="font-mono text-[0.95rem] text-[var(--ink)] tabular-nums">{v}</span>
                  </div>
                ))}
              </div>
            </div>
          )}

          {p.learning && (
            <div>
              <div className="font-sans text-[0.78rem] uppercase tracking-[0.16em] text-[var(--ink-faint)] mb-3">
                What you’re learning
              </div>
              <ul className="font-serif text-[0.95rem] text-[var(--ink-soft)] space-y-1.5 max-w-[58ch]">
                {p.learning.map((l) => <li key={l}>— {l}</li>)}
              </ul>
            </div>
          )}

          {p.motion && (
            <div>
              <div className="font-sans text-[0.78rem] uppercase tracking-[0.16em] text-[var(--ink-faint)] mb-3">
                Main motion
              </div>
              <ul className="font-serif text-[0.95rem] text-[var(--ink)] space-y-1.5 max-w-[60ch]">
                {p.motion.map((m, idx) => (
                  <li key={idx} className={idx === 0 ? 'italic text-[var(--ink-soft)]' : 'pl-4'}>{m}</li>
                ))}
              </ul>
            </div>
          )}

          {p.proof && (
            <div>
              <div className="font-sans text-[0.78rem] uppercase tracking-[0.16em] text-[var(--ink-faint)] mb-3">
                Hard proof to publish
              </div>
              <p className="font-serif italic text-[0.95rem] text-[var(--ink-soft)] max-w-[60ch] leading-snug">{p.proof}</p>
            </div>
          )}

          {p.closer && <PullQuote>{p.closer}</PullQuote>}
        </div>
      </div>

      {p.content && (
        <div className="mt-12">
          <div className="font-sans text-[0.78rem] uppercase tracking-[0.16em] text-[var(--ink-faint)] mb-3">
            Posts to publish in the first 30 days
          </div>
          <ol className="font-serif text-[0.95rem] text-[var(--ink)] space-y-1.5 max-w-[60ch]">
            {p.content.map((c, idx) => (
              <li key={c} className="grid grid-cols-[28px_1fr]">
                <span className="font-mono text-[0.78rem] text-[var(--ink-faint)] tabular-nums">{String(idx + 1).padStart(2, '0')}</span>
                <span>"{c}"</span>
              </li>
            ))}
          </ol>
          {p.cta && (
            <div className="mt-4 max-w-[60ch] font-serif italic text-[0.95rem] text-[var(--ink-soft)] leading-snug">
              Every post ends with: "{p.cta}"
            </div>
          )}
        </div>
      )}
    </article>
  );
}

// ============================================================================
// PAGE: §05 PERSONAS
// ============================================================================

function PersonasComparePage({ onJump }) {
  return (
    <>
      <Prose>
        <p className="mb-8">
          One role, many backgrounds. Each persona has a different starting pain — but
          the same underlying story: usage exists, learning is not compounding, the team
          needs an operating layer.
        </p>
      </Prose>

      <div className="grid md:grid-cols-2 gap-x-10 gap-y-10">
        {PERSONAS.map((p) => (
          <article key={p.id}>
            <div className="flex items-center gap-3 mb-2">
              <span
                className="block w-3 h-3"
                style={{ backgroundColor: PERSONA_COLORS[p.id] }}
                aria-hidden="true"
              />
              <h3 className="font-serif text-[1.3rem] text-[var(--ink)] tracking-[-0.005em]">
                {p.title}
              </h3>
            </div>
            <p className="font-serif italic text-[0.95rem] text-[var(--ink-soft)] mb-3 leading-snug max-w-[42ch]">
              {p.pain}
            </p>
            <button
              onClick={() => onJump('personas', p.id)}
              className="font-mono text-[0.72rem] uppercase tracking-[0.16em] text-[var(--accent)] hover:underline"
            >
              read full persona →
            </button>
          </article>
        ))}
      </div>
    </>
  );
}

function PersonaDetailPage({ personaId, onJump }) {
  const p = PERSONAS.find((x) => x.id === personaId);
  const skuById = useMemo(() => Object.fromEntries(SKUS.map((s) => [s.id, s])), []);
  const tpl = TEMPLATES.find((t) => t.id === p?.template);
  if (!p) return null;
  return (
    <article className="grid lg:grid-cols-[1fr_240px] gap-x-12 gap-y-8">
      <div>
        <div className="flex items-center gap-4 mb-3">
          <span
            className="block w-4 h-4"
            style={{ backgroundColor: PERSONA_COLORS[p.id] }}
            aria-hidden="true"
          />
          <h3 className="font-serif text-[1.75rem] tracking-[-0.005em] text-[var(--ink)] leading-tight">
            {p.title}
          </h3>
        </div>
        <p className="font-serif italic text-[1.0625rem] text-[var(--ink-soft)] max-w-[44ch] leading-snug mb-7">
          {p.pain}
        </p>

        <div className="font-sans text-[0.78rem] uppercase tracking-[0.16em] text-[var(--ink-faint)] mb-2">
          The pitch
        </div>
        <p className="font-serif text-[1.0625rem] text-[var(--ink)] leading-[1.55] max-w-[58ch] mb-8">
          "{p.pitch}"
        </p>

        <div className="font-sans text-[0.78rem] uppercase tracking-[0.16em] text-[var(--ink-faint)] mb-2">
          Why this persona buys
        </div>
        <p className="font-serif text-[1rem] text-[var(--ink-soft)] max-w-[60ch] leading-snug mb-8">
          {p.why}
        </p>

        <div className="font-sans text-[0.78rem] uppercase tracking-[0.16em] text-[var(--ink-faint)] mb-3">
          Suggested SKU path
        </div>
        <div className="flex items-center gap-3 mb-10 flex-wrap">
          {p.skuPath.map((id, i) => (
            <span key={id} className="flex items-center gap-3">
              {i > 0 && <span className="text-[var(--ink-faint)] font-serif">→</span>}
              <button
                onClick={() => onJump('skus', id)}
                className="font-serif text-[1rem] text-[var(--accent)] hover:underline border border-[var(--paper-edge)] hover:border-[var(--accent)]/40 rounded-sm px-3 py-1.5 transition-colors"
              >
                {skuById[id].name}
                <span className="font-mono text-[0.75rem] text-[var(--ink-faint)] ml-2">{skuById[id].price}</span>
              </button>
            </span>
          ))}
        </div>

        {tpl && (
          <>
            <div className="font-sans text-[0.78rem] uppercase tracking-[0.16em] text-[var(--ink-faint)] mb-3">
              Outreach template — {tpl.name}
            </div>
            <div className="font-serif italic text-[0.9rem] text-[var(--ink-soft)] mb-2">
              Subject: {tpl.subject}
            </div>
            <pre className="font-serif text-[0.95rem] text-[var(--ink)] leading-[1.55] whitespace-pre-wrap max-w-[64ch] bg-[var(--paper-deep)]/60 rounded-sm p-5 border border-[var(--paper-edge)]">{tpl.body}</pre>
          </>
        )}
      </div>

      <aside className="border-t lg:border-t-0 lg:border-l border-[var(--paper-edge)] lg:pl-8 pt-6 lg:pt-0 self-start lg:sticky lg:top-12">
        <div className="space-y-4 font-sans text-[0.85rem]">
          <div>
            <div className="font-mono text-[0.68rem] uppercase tracking-[0.16em] text-[var(--ink-faint)] mb-1">Persona</div>
            <div className="text-[var(--ink)]">{p.title}</div>
          </div>
          <div>
            <div className="font-mono text-[0.68rem] uppercase tracking-[0.16em] text-[var(--ink-faint)] mb-1">SKU path</div>
            <div className="text-[var(--ink)] leading-snug">
              {p.skuPath.map((id) => skuById[id].name).join(' → ')}
            </div>
          </div>
          <div>
            <div className="font-mono text-[0.68rem] uppercase tracking-[0.16em] text-[var(--ink-faint)] mb-1">Outreach</div>
            <button
              onClick={() => onJump('playbook', 'outreach')}
              className="text-[var(--accent)] hover:underline"
            >
              {tpl.name} →
            </button>
          </div>
        </div>
      </aside>
    </article>
  );
}

// ============================================================================
// PAGE: §06 PLAYBOOK
// ============================================================================

function CallStructurePage() {
  return (
    <>
      <Prose>
        <p className="mb-3 italic text-[var(--ink-soft)]">
          Do not pitch for 25 minutes. Run the call like a diagnostic.
        </p>
      </Prose>

      <div className="grid md:grid-cols-[100px_1fr] gap-x-6 gap-y-3 mt-8">
        <div className="font-mono text-[0.85rem] tabular-nums text-[var(--accent)] uppercase tracking-[0.1em] pt-1">
          0–3 min
        </div>
        <div className="font-serif text-[1rem] text-[var(--ink)] leading-snug max-w-[60ch] mb-4">
          <div className="font-sans text-[0.78rem] uppercase tracking-[0.16em] text-[var(--ink-faint)] mb-1">Frame</div>
          "I’ll give you the short version, then I mostly want to understand how agents are already
          showing up in your team. If it seems useful, I can explain the diagnostic."
        </div>

        <div className="font-mono text-[0.85rem] tabular-nums text-[var(--accent)] uppercase tracking-[0.1em] pt-1">
          3–23 min
        </div>
        <div className="mb-4">
          <div className="font-sans text-[0.78rem] uppercase tracking-[0.16em] text-[var(--ink-faint)] mb-2">Ten questions</div>
          <ol className="font-serif text-[0.95rem] text-[var(--ink)] space-y-1.5 max-w-[60ch]">
            {CALL_QUESTIONS.map((q, i) => (
              <li key={q} className="grid grid-cols-[28px_1fr]">
                <span className="font-mono text-[0.78rem] text-[var(--ink-faint)] tabular-nums">{String(i + 1).padStart(2, '0')}</span>
                <span>{q}</span>
              </li>
            ))}
          </ol>
        </div>

        <div className="font-mono text-[0.85rem] tabular-nums text-[var(--accent)] uppercase tracking-[0.1em] pt-1">
          23–30 min
        </div>
        <div className="font-serif text-[1rem] text-[var(--ink)] leading-snug max-w-[60ch]">
          <div className="font-sans text-[0.78rem] uppercase tracking-[0.16em] text-[var(--ink-faint)] mb-1">Prescribe</div>
          "Based on what you described, I think the right first step is{' '}
          <em>[Diagnostic / Baseline / 90-Day Program]</em>." Do not give them five options. Give them the right next step.
        </div>
      </div>
    </>
  );
}

function QualificationPage() {
  return (
    <>
      <Prose>
        <p className="mb-8">
          Run every call against this list. The bad-signs side is not "bad people" — it is
          "people who are not ready to buy what you’re selling."
        </p>
      </Prose>

      <div className="grid md:grid-cols-2 gap-x-12 gap-y-6">
        <div>
          <div className="font-sans text-[0.78rem] uppercase tracking-[0.16em] text-[var(--ink-faint)] mb-3">
            Good signs
          </div>
          <ul className="font-serif text-[0.95rem] text-[var(--ink)] space-y-1.5">
            {QUAL_GOOD.map((s) => (
              <li key={s} className="grid grid-cols-[18px_1fr]">
                <span className="font-mono text-[var(--ink)] tabular-nums">+</span>
                <span>{s}</span>
              </li>
            ))}
          </ul>
        </div>
        <div>
          <div className="font-sans text-[0.78rem] uppercase tracking-[0.16em] text-[var(--ink-faint)] mb-3">
            Bad signs
          </div>
          <ul className="font-serif text-[0.95rem] text-[var(--ink-soft)] space-y-1.5">
            {QUAL_BAD.map((s) => (
              <li key={s} className="grid grid-cols-[18px_1fr]">
                <span className="font-mono text-[var(--accent)] tabular-nums">−</span>
                <span>{s}</span>
              </li>
            ))}
          </ul>
        </div>
      </div>
      <p className="mt-8 font-serif italic text-[0.95rem] text-[var(--ink-soft)] max-w-[60ch] leading-snug">
        You can still nurture the bad-signs list. Just don’t build your survival plan around them.
      </p>
    </>
  );
}

function OutreachPage() {
  const [openId, setOpenId] = useState(TEMPLATES[0].id);
  const [copiedId, setCopiedId] = useState(null);

  const copy = useCallback((id, text) => {
    if (typeof navigator !== 'undefined' && navigator.clipboard) {
      navigator.clipboard.writeText(text)
        .then(() => {
          setCopiedId(id);
          setTimeout(() => setCopiedId(null), 1400);
        })
        .catch(() => {});
    }
  }, []);

  const t = TEMPLATES.find((x) => x.id === openId) || TEMPLATES[0];

  return (
    <>
      <Prose>
        <p className="mb-8">
          Four templates. The referral ask is probably the highest-leverage email of all of them — use it.
        </p>
      </Prose>

      <Margin rotate={-1.8}>start here. ask three people for referrals before lunch.</Margin>

      <div className="border-b border-[var(--paper-edge)] mb-8">
        <div className="flex flex-wrap gap-x-6 gap-y-1 -mb-px">
          {TEMPLATES.map((tpl) => {
            const active = tpl.id === openId;
            return (
              <button
                key={tpl.id}
                onClick={() => setOpenId(tpl.id)}
                className={`pb-3 font-mono text-[0.7rem] uppercase tracking-[0.16em] transition-colors whitespace-nowrap border-b-2 ${
                  active
                    ? 'text-[var(--ink)] border-[var(--accent)]'
                    : 'text-[var(--ink-faint)] border-transparent hover:text-[var(--ink-soft)]'
                }`}
              >
                {tpl.name}
              </button>
            );
          })}
        </div>
      </div>

      <div className="font-serif italic text-[0.95rem] text-[var(--ink-soft)] mb-3">
        Subject: <span className="text-[var(--ink)] not-italic">{t.subject}</span>
      </div>
      <pre className="font-serif text-[0.95rem] text-[var(--ink)] leading-[1.55] whitespace-pre-wrap max-w-[64ch] bg-[var(--paper-deep)]/60 rounded-sm p-5 border border-[var(--paper-edge)]">{t.body}</pre>
      <div className="mt-3 flex items-center gap-3">
        <button
          onClick={() => copy(t.id, `Subject: ${t.subject}\n\n${t.body}`)}
          className="font-mono text-[0.72rem] uppercase tracking-[0.14em] text-[var(--accent)] hover:text-[var(--ink)] transition-colors"
        >
          {copiedId === t.id ? '✓ copied' : 'copy'}
        </button>
      </div>
    </>
  );
}

function DailyRhythmPage() {
  const totalTouches = '200+';
  return (
    <>
      <Prose>
        <p className="mb-8">
          Daily targets, for the next 30 days. Stop thinking of this as marketing. Start
          thinking of it as <em>structured search through your trust graph</em>.
        </p>
      </Prose>

      <div className="grid lg:grid-cols-[1fr_280px] gap-10 items-start">
        <div className="border border-[var(--paper-edge)] rounded-sm">
          <div className="grid grid-cols-[1fr_auto] gap-x-6 px-4 py-2.5 bg-[var(--paper-deep)] border-b-2 border-[var(--ink)] font-mono text-[0.68rem] uppercase tracking-[0.14em] text-[var(--ink-faint)]">
            <span>Activity</span>
            <span className="text-right">Daily target</span>
          </div>
          {DAILY_RHYTHM.map(([k, v]) => (
            <div key={k} className="grid grid-cols-[1fr_auto] gap-x-6 px-4 py-3 items-baseline border-t border-[var(--paper-edge)]">
              <span className="font-serif text-[0.95rem] text-[var(--ink)]">{k}</span>
              <span className="font-mono text-[0.95rem] text-[var(--ink)] tabular-nums whitespace-nowrap">{v}</span>
            </div>
          ))}
        </div>

        <aside className="bg-[var(--paper-deep)] rounded-sm p-5">
          <div className="font-mono text-[0.68rem] uppercase tracking-[0.16em] text-[var(--ink-faint)] mb-2">
            One month
          </div>
          <div className="font-serif text-[2.4rem] leading-none text-[var(--ink)] tabular-nums mb-3">
            {totalTouches}
          </div>
          <p className="font-serif italic text-[0.95rem] text-[var(--ink-soft)] leading-snug">
            touches. You don’t need a giant audience. You need 15 serious conversations.
          </p>
        </aside>
      </div>
    </>
  );
}

// ============================================================================
// PAGE: §07 ASSETS
// ============================================================================

function AssetsGroupPage({ groupId, checks, toggle }) {
  const group = ASSET_GROUPS[groupId];
  if (!group) return null;
  const total = group.items.length;
  const done = group.items.filter((it) => checks[it.id]).length;
  const laneColor = group.lane === 'brand' ? 'var(--pine)' : 'var(--accent)';
  const laneLabel = group.lane === 'brand'
    ? 'Brand · Agent Operator'
    : 'Outreach · Modern Fractional CTO';

  return (
    <>
      <div className="flex items-baseline gap-4 mb-3">
        <h3 className="font-serif text-[1.6rem] tracking-[-0.005em] text-[var(--ink)]">
          {group.label}
        </h3>
        <Hairline className="flex-1" />
        <span className="font-mono text-[0.72rem] uppercase tracking-[0.14em] text-[var(--ink-faint)] tabular-nums">
          {done} / {total} done
        </span>
      </div>

      {group.lane && (
        <div className="flex items-baseline gap-3 mb-2">
          <span
            className="block w-3 h-3 flex-none"
            style={{ backgroundColor: laneColor }}
            aria-hidden="true"
          />
          <span className="font-mono text-[0.72rem] uppercase tracking-[0.18em]" style={{ color: laneColor }}>
            {laneLabel}
          </span>
        </div>
      )}
      {group.laneNote && (
        <p className="font-serif italic text-[0.95rem] text-[var(--ink-soft)] max-w-[60ch] leading-snug mb-8">
          {group.laneNote}
        </p>
      )}

      <div className="space-y-8">
        {group.items.map((a) => (
          <div key={a.id} className="grid grid-cols-[28px_1fr] gap-x-3">
            <button
              onClick={() => toggle(a.id)}
              aria-label={`Mark "${a.title}" ${checks[a.id] ? 'incomplete' : 'complete'}`}
              className={`mt-1 w-[18px] h-[18px] rounded-[3px] border transition-colors flex items-center justify-center self-start
                ${checks[a.id]
                  ? 'bg-[var(--ink)] border-[var(--ink)]'
                  : 'bg-transparent border-[var(--paper-edge)] hover:border-[var(--ink-soft)]'}`}
            >
              {checks[a.id] && <Check size={12} strokeWidth={3} className="text-[var(--paper)]" />}
            </button>
            <div className="min-w-0">
              <div className={`font-serif text-[1.15rem] mb-1 ${checks[a.id] ? 'text-[var(--ink-faint)] line-through decoration-[var(--ink-faint)]/50' : 'text-[var(--ink)]'}`}>
                {a.title}
              </div>
              {a.note && (
                <div className="font-serif italic text-[0.875rem] text-[var(--ink-soft)] mb-2 max-w-[60ch] leading-snug">
                  {a.note}
                </div>
              )}
              {Array.isArray(a.payload) ? (
                <ul className="font-serif text-[0.95rem] text-[var(--ink)] space-y-1 max-w-[64ch]">
                  {a.payload.map((p) => <li key={p}>— {p}</li>)}
                </ul>
              ) : (
                <pre className="font-serif text-[0.95rem] text-[var(--ink)] leading-[1.55] whitespace-pre-wrap max-w-[68ch] bg-[var(--paper-deep)]/60 rounded-sm p-4 border border-[var(--paper-edge)]">{a.payload}</pre>
              )}
            </div>
          </div>
        ))}
      </div>
    </>
  );
}

// ============================================================================
// PAGE: §08 THIS WEEK
// ============================================================================

function WeekOverviewPage({ checks, toggle, onJump }) {
  const totalAll = WEEK.reduce((acc, d) => acc + d.items.length, 0);
  const doneAll = WEEK.reduce(
    (acc, d) => acc + d.items.filter((_, i) => checks[`week-${d.id}-${i}`]).length,
    0
  );
  return (
    <>
      <Prose>
        <p className="mb-3">
          By Friday, you want at least one person to have said:{' '}
          <em>"Yes, send the invoice."</em> Not "interesting." Not "let’s stay close." Invoice.
        </p>
        <p className="mb-8 text-[var(--ink-soft)]">
          The invoice is the first honest user interview.
        </p>
      </Prose>

      <div className="flex items-baseline gap-3 mb-6">
        <span className="font-mono text-[0.72rem] uppercase tracking-[0.14em] text-[var(--ink-faint)]">
          Week progress
        </span>
        <Hairline className="flex-1" />
        <span className="font-mono text-[1.05rem] text-[var(--ink)] tabular-nums">
          {doneAll} / {totalAll}
        </span>
      </div>

      <div className="grid sm:grid-cols-2 lg:grid-cols-5 gap-4">
        {WEEK.map((d) => {
          const total = d.items.length;
          const done = d.items.filter((_, i) => checks[`week-${d.id}-${i}`]).length;
          const pct = total ? done / total : 0;
          return (
            <button
              key={d.id}
              onClick={() => onJump('week', d.id)}
              className="text-left p-4 border border-[var(--paper-edge)] rounded-sm hover:bg-[var(--paper-deep)]/50 transition-colors"
            >
              <div className="font-serif text-[1.1rem] text-[var(--ink)]">{d.day}</div>
              <div className="font-mono text-[0.72rem] uppercase tracking-[0.14em] text-[var(--ink-faint)] mt-1 mb-3">
                {done} / {total} done
              </div>
              <div className="h-[3px] bg-[var(--paper-edge)] rounded-full overflow-hidden">
                <div className="h-full bg-[var(--ink)]" style={{ width: `${pct * 100}%` }} />
              </div>
            </button>
          );
        })}
      </div>
    </>
  );
}

function DayPage({ dayId, checks, toggle }) {
  const d = WEEK.find((x) => x.id === dayId);
  if (!d) return null;
  const total = d.items.length;
  const done = d.items.filter((_, i) => checks[`week-${d.id}-${i}`]).length;
  return (
    <>
      <div className="flex items-baseline gap-4 mb-6">
        <h3 className="font-serif text-[2rem] text-[var(--ink)] tracking-[-0.005em]">{d.day}</h3>
        <Hairline className="flex-1" />
        <span className="font-mono text-[0.85rem] text-[var(--ink)] tabular-nums">
          {done} / {total}
        </span>
      </div>
      <div className="max-w-[58ch]">
        {d.items.map((it, i) => (
          <CheckItem
            key={it}
            id={`week-${d.id}-${i}`}
            label={it}
            checked={!!checks[`week-${d.id}-${i}`]}
            onToggle={toggle}
          />
        ))}
      </div>
    </>
  );
}

// ============================================================================
// PAGE: §09 KILL CRITERIA
// ============================================================================

function KillCheckpointPage({ killId }) {
  const k = KILL.find((x) => x.id === killId);
  if (!k) return null;
  return (
    <>
      <article className="grid md:grid-cols-[140px_1fr] gap-x-10 gap-y-4">
        <div className="font-display text-[2.5rem] uppercase text-[var(--accent)] tabular-nums leading-none pt-1">
          {k.day}
        </div>
        <div>
          <div className="font-mono text-[0.78rem] uppercase tracking-[0.16em] text-[var(--ink-faint)] mb-3">
            Expected
          </div>
          <ul className="font-serif text-[1.05rem] text-[var(--ink)] space-y-2 mb-10 max-w-[60ch]">
            {k.expected.map((e) => <li key={e}>— {e}</li>)}
          </ul>
          <div className="font-mono text-[0.78rem] uppercase tracking-[0.16em] text-[var(--ink-faint)] mb-3">
            If not
          </div>
          <p className="font-serif italic text-[1rem] text-[var(--ink-soft)] leading-snug max-w-[64ch]">
            {k.fallback}
          </p>
        </div>
      </article>
      {killId === 'd14' && (
        <Margin rotate={-1.5}>this is steering, not pessimism. the road has corners.</Margin>
      )}
    </>
  );
}

// ============================================================================
// PAGE: §10 PARTNERSHIPS
// ============================================================================

function PartnershipsComparePage({ onJump }) {
  return (
    <>
      <Prose>
        <p className="mb-5">
          Four shapes of partnership, very different commitment levels. Most early-stage
          founders accidentally collapse them into one — formalizing too early or letting
          valuable advice drift away.
        </p>
      </Prose>

      <Margin rotate={-1.5}>start at tier i. let revealed preference pick the rest.</Margin>

      <div className="mt-8 border border-[var(--paper-edge)] rounded-sm overflow-hidden">
        <div className="grid grid-cols-[auto_1fr_auto_auto] gap-x-5 px-4 py-2.5 bg-[var(--paper-deep)] border-b-2 border-[var(--ink)] font-mono text-[0.68rem] uppercase tracking-[0.14em] text-[var(--ink-faint)]">
          <span>#</span>
          <span>Tier</span>
          <span className="text-right">Cost</span>
          <span className="text-right hidden sm:block">Commitment</span>
        </div>
        {TIERS.map((t) => (
          <button
            key={t.id}
            onClick={() => onJump('partnerships', t.id)}
            className="w-full text-left grid grid-cols-[auto_1fr_auto_auto] gap-x-5 px-4 py-3 items-baseline border-t border-[var(--paper-edge)] hover:bg-[var(--paper-deep)]/40 transition-colors"
          >
            <span className="font-mono text-[0.78rem] text-[var(--ink-faint)] tabular-nums lowercase">
              {t.num}
            </span>
            <span className="font-serif text-[1rem] text-[var(--ink)]">
              {t.name}
              <span className="block font-serif italic text-[0.875rem] text-[var(--ink-soft)] mt-0.5">
                {t.short}
              </span>
            </span>
            <span className="font-mono text-[0.85rem] text-[var(--ink)] tabular-nums text-right whitespace-nowrap">
              {t.cost}
            </span>
            <span className="font-sans text-[0.8125rem] text-[var(--ink-soft)] text-right hidden sm:block whitespace-nowrap">
              {t.commitment}
            </span>
          </button>
        ))}
      </div>

      <p className="mt-4 font-serif italic text-[0.95rem] text-[var(--ink-soft)] max-w-[60ch] leading-snug">
        Click any row for the detail. Or jump to the{' '}
        <CrossRef to="partnerships" tab="casting" onJump={onJump}>casting</CrossRef> tab
        for how to choose who fits where.
      </p>
    </>
  );
}

function TierDetailPage({ tierId }) {
  const t = TIERS.find((x) => x.id === tierId);
  if (!t) return null;
  return (
    <div className="grid lg:grid-cols-[1fr_240px] gap-x-12 gap-y-8 mt-2">
      <div>
        <div className="flex items-baseline gap-3 mb-3 flex-wrap">
          <span className="font-mono text-[0.78rem] text-[var(--ink-faint)] tabular-nums lowercase">
            {t.num}
          </span>
          <h3 className="font-serif text-[1.75rem] tracking-[-0.005em] text-[var(--ink)] leading-tight">
            {t.name}
          </h3>
        </div>
        <p className="font-serif italic text-[1.05rem] text-[var(--ink-soft)] mb-7">{t.short}</p>

        <div className="font-serif italic text-[1.0625rem] text-[var(--ink)] leading-snug max-w-[58ch] mb-8">
          {t.promise}
        </div>

        <div className="font-sans text-[0.78rem] uppercase tracking-[0.16em] text-[var(--ink-faint)] mb-2">
          The pitch
        </div>
        <p className="font-serif text-[1.0625rem] text-[var(--ink)] leading-[1.55] max-w-[58ch] mb-8">
          {t.pitch}
        </p>

        <div className="font-sans text-[0.78rem] uppercase tracking-[0.16em] text-[var(--ink-faint)] mb-2">
          Terms
        </div>
        <ul className="font-serif text-[0.95rem] text-[var(--ink)] space-y-1.5 mb-8 max-w-[60ch]">
          {t.terms.map((term) => (
            <li key={term} className="flex gap-3">
              <span className="text-[var(--ink-faint)] mt-1.5 flex-none">·</span>
              <span>{term}</span>
            </li>
          ))}
        </ul>

        {t.math && (
          <>
            <div className="font-sans text-[0.78rem] uppercase tracking-[0.16em] text-[var(--ink-faint)] mb-2">
              Math at 15%
            </div>
            <div className="border-t-2 border-[var(--ink)] mb-8 max-w-[60ch]">
              {t.math.map(([k, v]) => (
                <div key={k} className="grid grid-cols-[1fr_auto] gap-x-6 py-2 border-b border-[var(--paper-edge)] items-baseline">
                  <span className="font-serif text-[0.95rem] text-[var(--ink)]">{k}</span>
                  <span className="font-mono text-[0.95rem] text-[var(--ink)] tabular-nums whitespace-nowrap">{v}</span>
                </div>
              ))}
            </div>
          </>
        )}

        <div className="font-sans text-[0.78rem] uppercase tracking-[0.16em] text-[var(--ink-faint)] mb-2">
          When it’s right
        </div>
        <p className="font-serif italic text-[1rem] text-[var(--ink)] leading-snug max-w-[60ch]">
          {t.whenRight}
        </p>

        {t.keyMove && (
          <p className="mt-5 font-serif text-[0.95rem] text-[var(--ink-soft)] leading-snug max-w-[62ch] italic">
            {t.keyMove}
          </p>
        )}

        {t.warning && (
          <div className="mt-7 font-sans text-[0.85rem] text-[var(--accent)] italic">
            Watch out: {t.warning}
          </div>
        )}
      </div>

      <aside className="border-t lg:border-t-0 lg:border-l border-[var(--paper-edge)] lg:pl-8 pt-6 lg:pt-0 self-start lg:sticky lg:top-12">
        <div className="space-y-4 font-sans text-[0.85rem]">
          <div>
            <div className="font-mono text-[0.68rem] uppercase tracking-[0.16em] text-[var(--ink-faint)] mb-1">
              Cost
            </div>
            <div className="font-mono text-[1rem] text-[var(--ink)] leading-snug">{t.cost}</div>
          </div>
          <div>
            <div className="font-mono text-[0.68rem] uppercase tracking-[0.16em] text-[var(--ink-faint)] mb-1">
              Commitment
            </div>
            <div className="text-[var(--ink)] leading-snug">{t.commitment}</div>
          </div>
        </div>
      </aside>
    </div>
  );
}

function CastingPage() {
  return (
    <>
      <Prose>
        <p className="mb-3">
          Most founders mess this up by jumping to tier ii or iii too early — formalizing
          with whoever’s nearest, before they know which friends actually have a usable
          network in their ICP and which are good for advice but won’t move deals.
        </p>
        <p className="mb-8">The pattern that works:</p>
      </Prose>

      <ol className="font-serif text-[1rem] text-[var(--ink)] space-y-5 max-w-[64ch] mb-12">
        {CASTING_STEPS.map(([step, detail], i) => (
          <li key={step} className="grid grid-cols-[44px_1fr] gap-x-3">
            <span className="font-display text-[1.75rem] leading-none text-[var(--accent)] tabular-nums">
              {i + 1}
            </span>
            <div>
              <div className="text-[var(--ink)] font-medium leading-snug">{step}</div>
              <div className="font-serif italic text-[0.9375rem] text-[var(--ink-soft)] leading-snug mt-1 max-w-[52ch]">
                {detail}
              </div>
            </div>
          </li>
        ))}
      </ol>

      <Subhead>One sharpening question to take into each coffee</Subhead>
      <Prose>
        <p className="mb-8">
          Listen for whether their sales experience actually matches your motion. Two or
          three of your sales friends will be in the right bucket. Those are the ones
          worth investing the relationship in.
        </p>
      </Prose>

      <div className="border-t-2 border-[var(--ink)] max-w-[68ch]">
        {TAXONOMY.map(([category, note]) => (
          <div key={category} className="grid md:grid-cols-[1fr_1.5fr] gap-x-6 py-4 border-b border-[var(--paper-edge)] items-baseline">
            <span className="font-serif text-[1rem] text-[var(--ink)] mb-1 md:mb-0">{category}</span>
            <span className="font-serif italic text-[0.95rem] text-[var(--ink-soft)] leading-snug">{note}</span>
          </div>
        ))}
      </div>

      <Margin rotate={1.5}>2–3 friends. quality of fit beats quantity of network.</Margin>
    </>
  );
}

// ============================================================================
// SECTION DISPATCHER
// ============================================================================

function SectionPage({ section, activeTab, onJump, checks, toggle }) {
  switch (section.id) {
    case 'thesis':
      return <ThesisPage onJump={onJump} />;
    case 'skus':
      if (activeTab === 'compare') return <SkuComparePage onJump={onJump} />;
      return <SkuDetailPage skuId={activeTab} onJump={onJump} />;
    case 'math':
      if (activeTab === 'paths') return <PricingPathsPage onJump={onJump} />;
      return <PricingTargetsPage />;
    case 'plan':
      return <PhasePage phaseId={activeTab} />;
    case 'personas':
      if (activeTab === 'all') return <PersonasComparePage onJump={onJump} />;
      return <PersonaDetailPage personaId={activeTab} onJump={onJump} />;
    case 'playbook':
      if (activeTab === 'qual') return <QualificationPage />;
      if (activeTab === 'outreach') return <OutreachPage />;
      if (activeTab === 'rhythm') return <DailyRhythmPage />;
      return <CallStructurePage />;
    case 'assets':
      return <AssetsGroupPage groupId={activeTab} checks={checks} toggle={toggle} />;
    case 'week':
      if (activeTab === 'overview') return <WeekOverviewPage checks={checks} toggle={toggle} onJump={onJump} />;
      return <DayPage dayId={activeTab} checks={checks} toggle={toggle} />;
    case 'kill':
      return <KillCheckpointPage killId={activeTab} />;
    case 'partnerships':
      if (activeTab === 'compare') return <PartnershipsComparePage onJump={onJump} />;
      if (activeTab === 'casting') return <CastingPage />;
      return <TierDetailPage tierId={activeTab} />;
    default:
      return null;
  }
}

// ============================================================================
// PREV / NEXT PAGER
// ============================================================================

function PrevNext({ currentIdx, onJump }) {
  const prev = currentIdx > 0 ? FLAT_PAGES[currentIdx - 1] : null;
  const next = currentIdx < FLAT_PAGES.length - 1 ? FLAT_PAGES[currentIdx + 1] : null;

  const Cell = ({ page, dir }) => {
    if (!page) return <div />;
    const align = dir === 'next' ? 'text-right ml-auto' : 'text-left';
    const isAlone = !page.hasTabs;
    const main = isAlone ? page.sectionTitle : page.tabLabel;
    const sub  = isAlone ? page.sectionNum : `${page.sectionNum} · ${page.sectionTitle}`;
    return (
      <button
        onClick={() => onJump(page.sectionId, page.tabId)}
        className={`group block ${align} max-w-[28ch]`}
      >
        <span className="font-mono text-[0.68rem] uppercase tracking-[0.18em] text-[var(--ink-faint)] block mb-1">
          {dir === 'next' ? 'Next →' : '← Previous'}
        </span>
        <span className="font-serif text-[1rem] text-[var(--ink-soft)] group-hover:text-[var(--ink)] transition-colors leading-snug block">
          {main}
        </span>
        <span className="font-mono text-[0.7rem] uppercase tracking-[0.14em] text-[var(--ink-faint)] block mt-0.5">
          {sub}
        </span>
      </button>
    );
  };

  return (
    <nav className="mt-24 pt-8 border-t border-[var(--paper-edge)] grid grid-cols-2 gap-6">
      <Cell page={prev} dir="prev" />
      <Cell page={next} dir="next" />
    </nav>
  );
}

// ============================================================================
// SIDEBAR
// ============================================================================

function Sidebar({ activeSection, activeTab, onJump }) {
  return (
    <aside className="hidden lg:flex flex-col w-[280px] flex-none border-r border-[var(--paper-edge)] bg-[var(--paper-deep)]/40 sticky top-0 h-screen overflow-y-auto">
      <div className="px-7 pt-9 pb-6">
        <div className="font-mono text-[0.68rem] uppercase tracking-[0.18em] text-[var(--ink-faint)] mb-3">
          {META.vol} · {META.date}
        </div>
        <h1 className="font-serif text-[1.4rem] leading-[1.1] tracking-[-0.005em] text-[var(--ink)]">
          {META.title}
        </h1>
        <p className="font-serif italic text-[0.9rem] text-[var(--ink-soft)] mt-2 leading-snug">
          {META.subtitle}
        </p>
      </div>

      <Hairline />

      <nav className="px-3 py-4 flex-1">
        {SECTIONS.map((s) => {
          const isActive = activeSection === s.id;
          const showTabs = isActive && s.tabs.length > 1;
          return (
            <div key={s.id} className="mb-1">
              <button
                onClick={() => onJump(s.id)}
                className={`block w-full text-left px-4 py-2 rounded-sm transition-colors group ${
                  isActive ? 'bg-[var(--paper)]' : 'hover:bg-[var(--paper)]/60'
                }`}
              >
                <div className="flex items-baseline gap-3">
                  <span className={`font-display text-[1.15rem] leading-none tabular-nums ${isActive ? 'text-[var(--accent)]' : 'text-[var(--ink-faint)]'}`}>
                    {s.num}
                  </span>
                  <span className={`font-serif text-[0.95rem] leading-tight ${isActive ? 'text-[var(--ink)]' : 'text-[var(--ink-soft)] group-hover:text-[var(--ink)]'}`}>
                    {s.title}
                  </span>
                </div>
              </button>
              {showTabs && (
                <div className="ml-9 mt-1 mb-2 border-l border-[var(--paper-edge)]">
                  {s.tabs.map((t) => {
                    const tabActive = t.id === activeTab;
                    return (
                      <button
                        key={t.id}
                        onClick={() => onJump(s.id, t.id)}
                        className={`block w-full text-left pl-3 pr-2 py-1 transition-colors ${
                          tabActive ? '' : 'hover:bg-[var(--paper)]/50'
                        }`}
                      >
                        <span
                          className={`font-serif text-[0.875rem] leading-tight transition-colors ${
                            tabActive
                              ? 'text-[var(--accent)]'
                              : 'text-[var(--ink-soft)] hover:text-[var(--ink)]'
                          }`}
                        >
                          {t.label}
                        </span>
                      </button>
                    );
                  })}
                </div>
              )}
            </div>
          );
        })}
      </nav>

      <Hairline />
      <div className="px-7 py-5">
        <div className="font-serif italic text-[0.825rem] text-[var(--ink-soft)] leading-snug">
          A working notebook, not a pitch deck. Pull it up on a call and point at things.
        </div>
      </div>
    </aside>
  );
}

function MobileNav({ activeSection, activeTab, onJump, open, setOpen }) {
  return (
    <div className="lg:hidden sticky top-0 z-20 bg-[var(--paper)]/95 backdrop-blur-sm border-b border-[var(--paper-edge)]">
      <div className="flex items-center justify-between px-5 py-3">
        <div>
          <div className="font-mono text-[0.62rem] uppercase tracking-[0.18em] text-[var(--ink-faint)]">
            {META.vol} · {META.date}
          </div>
          <div className="font-serif text-[1.05rem] text-[var(--ink)] leading-tight">{META.title}</div>
        </div>
        <button
          onClick={() => setOpen(!open)}
          className="font-mono text-[0.72rem] uppercase tracking-[0.14em] text-[var(--ink)] px-3 py-1.5 border border-[var(--paper-edge)] rounded-sm"
        >
          {open ? 'close' : 'index'}
        </button>
      </div>
      {open && (
        <nav className="border-t border-[var(--paper-edge)] px-3 py-3 max-h-[70vh] overflow-y-auto">
          {SECTIONS.map((s) => {
            const isActive = activeSection === s.id;
            const showTabs = isActive && s.tabs.length > 1;
            return (
              <div key={s.id} className="mb-1">
                <button
                  onClick={() => { onJump(s.id); if (s.tabs.length <= 1) setOpen(false); }}
                  className={`block w-full text-left px-3 py-2 rounded-sm ${isActive ? 'bg-[var(--paper-deep)]' : ''}`}
                >
                  <div className="flex items-baseline gap-3">
                    <span className={`font-display text-[1.15rem] leading-none tabular-nums ${isActive ? 'text-[var(--accent)]' : 'text-[var(--ink-faint)]'}`}>
                      {s.num}
                    </span>
                    <span className="font-serif text-[0.95rem] text-[var(--ink)]">{s.title}</span>
                  </div>
                </button>
                {showTabs && (
                  <div className="ml-9 mt-1 border-l border-[var(--paper-edge)]">
                    {s.tabs.map((t) => (
                      <button
                        key={t.id}
                        onClick={() => { onJump(s.id, t.id); setOpen(false); }}
                        className="block w-full text-left pl-3 pr-2 py-1.5"
                      >
                        <span className={`font-serif text-[0.875rem] ${t.id === activeTab ? 'text-[var(--accent)]' : 'text-[var(--ink-soft)]'}`}>
                          {t.label}
                        </span>
                      </button>
                    ))}
                  </div>
                )}
              </div>
            );
          })}
        </nav>
      )}
    </div>
  );
}

// ============================================================================
// APP
// ============================================================================

const STYLES = `
  @import url('https://fonts.googleapis.com/css2?family=Big+Shoulders+Display:wght@700;800&family=Vollkorn:ital,wght@0,400;0,500;0,600;1,400;1,500&family=Caveat:wght@500;700&family=B612+Mono:wght@400;700&display=swap');

  :root {
    --paper:           oklch(97% 0.012 75);
    --paper-deep:      oklch(94% 0.020 70);
    --paper-edge:      oklch(88% 0.025 65);
    --ink:             oklch(25% 0.08 265);
    --ink-soft:        oklch(48% 0.06 265);
    --ink-faint:       oklch(65% 0.03 260);
    --accent:          oklch(54% 0.15 38);
    --accent-faint:    oklch(92% 0.05 35);
    --turmeric:        oklch(76% 0.16 85);
    --turmeric-faint:  oklch(94% 0.07 85);
    --pine:            oklch(45% 0.11 155);
    --pine-faint:      oklch(94% 0.04 155);
    --teal:            oklch(58% 0.09 215);
    --persimmon:       oklch(60% 0.16 28);
  }
  html { scroll-behavior: smooth; }
  body {
    background: var(--paper);
    color: var(--ink);
    font-family: 'Vollkorn', "Iowan Old Style", "Palatino Linotype", Georgia, serif;
  }
  .font-serif   { font-family: 'Vollkorn', "Iowan Old Style", "Palatino Linotype", Georgia, serif; }
  .font-sans    { font-family: 'B612 Mono', ui-monospace, "SF Mono", "Cascadia Mono", Menlo, monospace; }
  .font-mono    { font-family: 'B612 Mono', ui-monospace, "SF Mono", "Cascadia Mono", Menlo, monospace; }
  .font-display { font-family: 'Big Shoulders Display', 'Big Shoulders', Impact, sans-serif; font-weight: 700; letter-spacing: -0.005em; }
  .font-hand    { font-family: 'Caveat', 'Segoe Script', cursive; font-weight: 500; }
  .tabular-nums { font-variant-numeric: tabular-nums; }
  ::selection   { background: var(--turmeric-faint); color: var(--ink); }
  .highlight-turmeric {
    background-image: linear-gradient(transparent 55%, var(--turmeric-faint) 57%, var(--turmeric-faint) 92%, transparent 94%);
    padding: 0 0.1em;
  }
`;

function App() {
  const [activeSection, setActiveSection] = useState('thesis');
  const [tabBySection, setTabBySection] = useState({});
  const [mobileOpen, setMobileOpen] = useState(false);
  const [checks, setChecks] = useState({});

  const section = SECTIONS.find((s) => s.id === activeSection) || SECTIONS[0];
  const activeTab = tabBySection[activeSection] || section.tabs[0].id;
  const currentIdx = findPageIdx(activeSection, activeTab);

  const toggle = useCallback((id) => {
    setChecks((c) => ({ ...c, [id]: !c[id] }));
  }, []);

  const onJump = useCallback((sectionId, tabId) => {
    const target = SECTIONS.find((s) => s.id === sectionId);
    if (!target) return;
    const finalTab = tabId || tabBySection[sectionId] || target.tabs[0].id;
    setActiveSection(sectionId);
    setTabBySection((t) => ({ ...t, [sectionId]: finalTab }));
    if (typeof window !== 'undefined') window.scrollTo({ top: 0, behavior: 'smooth' });
  }, [tabBySection]);

  const setTab = useCallback((tabId) => {
    setTabBySection((t) => ({ ...t, [activeSection]: tabId }));
    if (typeof window !== 'undefined') window.scrollTo({ top: 0, behavior: 'smooth' });
  }, [activeSection]);

  return (
    <>
      <style>{STYLES}</style>
      <PaperGrain />
      <div className="relative min-h-screen bg-[var(--paper)] text-[var(--ink)] antialiased">
        <div className="flex">
          <Sidebar activeSection={activeSection} activeTab={activeTab} onJump={onJump} />

          <div className="flex-1 min-w-0">
            <MobileNav
              activeSection={activeSection}
              activeTab={activeTab}
              onJump={onJump}
              open={mobileOpen}
              setOpen={setMobileOpen}
            />

            <main className="max-w-[880px] mx-auto px-6 lg:px-14 py-12 lg:py-16">
              {/* Hero strip — only on the first page */}
              {activeSection === 'thesis' && (
                <div className="mb-16">
                  <div className="font-mono text-[0.7rem] uppercase tracking-[0.2em] text-[var(--ink-faint)] mb-5">
                    Sublayer · Working notebook · {META.date}
                  </div>
                  <h1 className="font-serif text-[clamp(2.25rem,4.6vw,3.5rem)] leading-[0.98] tracking-[-0.018em] text-[var(--ink)] mb-5">
                    Turning scattered AI-agent experiments into measurable work practices.
                  </h1>
                  <p className="font-serif italic text-[1.1rem] text-[var(--ink-soft)] max-w-[58ch] leading-snug">
                    A field guide to the next ninety days — the SKU ladder, the math, the buyers,
                    the playbook, and the calendar — laid out so it can be navigated, pointed at,
                    and argued over.
                  </p>
                </div>
              )}

              <SectionHeader section={section} />
              <TabStrip section={section} activeTab={activeTab} onChange={setTab} />

              <SectionPage
                section={section}
                activeTab={activeTab}
                onJump={onJump}
                checks={checks}
                toggle={toggle}
              />

              <PrevNext currentIdx={currentIdx} onJump={onJump} />

              <footer className="mt-20 pt-8 border-t border-[var(--paper-edge)]">
                <div className="flex items-baseline justify-between flex-wrap gap-3">
                  <span className="font-mono text-[0.68rem] uppercase tracking-[0.18em] text-[var(--ink-faint)]">
                    Page {currentIdx + 1} of {FLAT_PAGES.length}
                  </span>
                  <span className="font-serif italic text-[0.9rem] text-[var(--ink-soft)]">
                    The invoice is the first honest user interview.
                  </span>
                </div>
              </footer>
            </main>
          </div>
        </div>
      </div>
    </>
  );
}

export default App;