// Per-team Solutions pages + Company sub-pages (Careers, Press, Contact)

const teamData = {
  legal: {
    eyebrow: "For Legal teams", icon: "legal",
    title: <>Stop being the <span style={{ color: "var(--ink-1)" }}>bottleneck</span>, <span className="accent">become the system</span>.</>,
    lede: "Self-serve intake for low-risk requests, streamlined review on third-party paper, and a workspace your team actually wants to use.",
    pains: [
      "Every Slack DM, every email forward, every \"quick favor\" lands on legal.",
      "Templates live in someone's Drive, last edited two GCs ago.",
      "No visibility into what's in flight, what's stuck, what's slipping.",
      "Your time goes to triage, not to the legal work that actually matters.",
    ],
    gains: [
      "30-second intake form replaces three Slack channels and a shared inbox.",
      "Standard paper handled without legal involvement, only exceptions reach your desk.",
      "Real-time dashboard: every request, every stage, every SLA, at a glance.",
      "Your team works 30+ hours a week on actual legal, not coordination.",
    ],
    metrics: [["94%", "faster cycle time"], ["6 min", "median first draft"], ["3", "tools replaced"]],
    planEyebrow: "Built for legal teams",
    planTitle: <>We know the pain. <span className="accent">Here's the fix.</span></>,
    planBody: "Legal spends 40% of its time on triage, not legal work. Three steps to take back control.",
    plan: [
      {
        num: "01",
        tag: "CENTRALIZE",
        title: "Centralize everything",
        desc: "Bring all contracts, templates, and policies into one searchable platform.",
        icon: (
          <svg width="20" height="20" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2.2" strokeLinecap="round" strokeLinejoin="round"><path d="M21 15v4a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2v-4"/><polyline points="17 8 12 3 7 8"/><line x1="12" y1="3" x2="12" y2="15"/></svg>
        )
      },
      {
        num: "02",
        tag: "AUTOMATE",
        title: "Automate the routine",
        desc: "Self-serve intake, approval routing, and obligation tracking run without manual effort.",
        icon: (
          <svg width="20" height="20" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2.2" strokeLinecap="round" strokeLinejoin="round"><path d="M12 20h9"/><path d="M16.5 3.5a2.121 2.121 0 0 1 3 3L7 19l-4 1 1-4L16.5 3.5z"/></svg>
        )
      },
      {
        num: "03",
        tag: "CONTROL",
        title: "Stay in control",
        desc: "Real-time dashboards, full audit trails, and compliance visibility across every contract.",
        icon: (
          <svg width="20" height="20" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2.2" strokeLinecap="round" strokeLinejoin="round"><path d="M12 22c5.523 0 10-4.477 10-10S17.523 2 12 2 2 6.477 2 12s4.477 10 10 10z"/><path d="m9 12 2 2 4-4"/></svg>
        )
      }
    ],
    modules: [
      {
        eyebrow: "Self-serve templates",
        title: "Remove low-risk contracts <em>from Legal's plate</em>.",
        body: "Stop chasing manual data and help ensure every team follows your company's approved process.",
        bullets: [
          "Set approval workflows so that Legal is looped in only when necessary, no more chasing, with full visibility on requests.",
          "Let business teams generate their own first drafts using pre-approved templates, so they can focus on higher-complexity work.",
        ],
        ctaLabel: "Explore Intake",
        ctaHref: "/platform/intake",
        mockup: "legal-intake",
      },
      {
        eyebrow: "Contract repository",
        title: "A single source of truth <em>for all contracts</em>.",
        body: "Centralize every contract across teams in a secure, organized repository. No more shared drives or scattered tools.",
        bullets: [
          "Use full-text search, filters, and views to find contracts by party, clause, or renewal date.",
          "Instantly extract key metadata, counterparty, payment terms, indemnities, and more.",
        ],
        flip: true,
        ctaLabel: "Explore Repository",
        ctaHref: "/platform/repository",
        mockup: "repository-search",
      },
      {
        eyebrow: "Negotiation",
        title: "Negotiate with anyone, <em>inside and out</em>.",
        body: "Give every deal its own workspace. Internal teams align on positions before anything goes out, and counterparties respond in the same thread.",
        bullets: [
          "Collaborate internally with Legal before sharing externally, no surprises.",
          "Every version auto-saved with timestamp and author, full audit trail from first draft to signature.",
        ],
        ctaLabel: "Explore Negotiation",
        ctaHref: "/platform/negotiation",
        mockup: "negotiation-redline",
      },
    ],
  },
  sales: {
    eyebrow: "For Sales teams", icon: "negotiation",
    title: <>Close on your <span style={{ color: "var(--ink-1)" }}>customer's timeline</span>, <span className="accent">not legal's queue</span>.</>,
    lede: "Standard MSAs, NDAs, and order forms generated and sent in minutes. Track every signature in your CRM.",
    pains: [
      "Deals slip because legal is the last mile and the longest mile.",
      "Customers ask for redlines you can't promise to turn around.",
      "You don't know where a contract is until you ping someone.",
      "Approval chains are tribal knowledge, every deal is a re-learning.",
    ],
    gains: [
      "Self-serve standard paper, on-brand, with one form field.",
      "Customer redlines handled in one workspace, no version confusion, no email threads.",
      "Signed contracts stored automatically, no manual uploads, no lost PDFs.",
      "Auto-routing by deal value, region, paper, every time, the same way.",
    ],
    metrics: [["3.2×", "deal velocity"], ["48h", "median MSA turnaround"], ["0", "lost contracts"]],
    planEyebrow: "Built for sales teams",
    planTitle: <><span style={{ color: "var(--ink-1)" }}>Contracts shouldn't slow deals.</span> <span className="accent">They won't.</span></>,
    planBody: "Your reps spend hours chasing approvals and pinging legal. Three steps to close on your customer's timeline.",
    plan: [
      {
        num: "01",
        tag: "PUBLISH",
        title: "Publish templates",
        desc: "Load your legal-approved NDAs, MSAs, and order forms into the platform once.",
        icon: (
          <svg width="20" height="20" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2.2" strokeLinecap="round" strokeLinejoin="round"><path d="M4 19.5v-15A2.5 2.5 0 0 1 6.5 2H20v20H6.5a2.5 2.5 0 0 1-2.5-2.5Z"/><path d="M6 6h10"/><path d="M6 10h10"/></svg>
        )
      },
      {
        num: "02",
        tag: "DRAFT",
        title: "Generate drafts",
        desc: "Sales reps generate compliant, error-free contract drafts instantly.",
        icon: (
          <svg width="20" height="20" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2.2" strokeLinecap="round" strokeLinejoin="round"><path d="M12 20h9"/><path d="M16.5 3.5a2.121 2.121 0 0 1 3 3L7 19l-4 1 1-4L16.5 3.5z"/></svg>
        )
      },
      {
        num: "03",
        tag: "AUTOPILOT",
        title: "Sign & close",
        desc: "Route approvals automatically and let prospects sign securely in seconds.",
        icon: (
          <svg width="20" height="20" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2.2" strokeLinecap="round" strokeLinejoin="round"><path d="M12 22c5.523 0 10-4.477 10-10S17.523 2 12 2 2 6.477 2 12s4.477 10 10 10z"/><path d="m9 12 2 2 4-4"/></svg>
        )
      }
    ],

    modules: [
      {
        eyebrow: "Accelerate deal cycles",
        title: "Move fast with <em>self-serve contracts</em>, no legal bottlenecks, no risk.",
        body: "Give your sales team pre-approved, legally-compliant templates they can send without waiting on legal. Standardized contracts mean every deal moves at the same speed.",
        bullets: [
          "Move deals faster using pre-approved contract templates that eliminate legal back-and-forth.",
          "Auto-fill counterparty details, deal value, and terms from one intake form.",
          "Approval rules route edge cases to legal automatically, everything else goes straight out.",
        ],
        ctaLabel: "Explore Intake",
        ctaHref: "/platform/intake",
        mockup: "sales-self-serve",
      },
      {
        eyebrow: "Negotiation",
        title: "Negotiate with anyone, <em>inside and out</em>.",
        body: "Give every deal its own workspace. Internal teams align on redlines before they go out, counterparties respond in the same thread, and every version is saved with a full audit trail.",
        bullets: [
          "Collaborate internally with Legal before sharing externally, no surprises.",
          "Counterparties redline and comment directly, no email attachments.",
          "Every version auto-saved with timestamp and author, full audit trail from first draft to signature.",
        ],
        flip: true,
        ctaLabel: "Explore Negotiation",
        ctaHref: "/platform/negotiation",
        mockup: "sales-negotiation",
      },
      {
        eyebrow: "Configure, Price, Quote",
        title: "Beautiful, error-free quotes, <em>every time</em>.",
        body: "Create highly professional, visually stunning proposals and quotes complete with custom cover photos, brand styling, and automatically populated line items. CPQ ensures all reps have up-to-date, accurate pricing without manual mistakes.",
        bullets: [
          "Beautiful proposals styled with custom cover photos and brand colors.",
          "Always-current pricing pulled from a single source of truth, no outdated rate cards.",
          "Line items and totals auto-populated directly into contract drafts.",
        ],
        flip: false,
        ctaLabel: "Explore Drafting",
        ctaHref: "/platform/drafting",
        mockup: "sales-cpq",
      },
      {
        eyebrow: "eSignature",
        title: "Accelerated signing with <em>smart approvals</em>.",
        body: "Collect legally-binding eSignatures natively within your deals while enforcing compliance. Contracts are automatically routed to the right stakeholders for approval before they go out, keeping deal momentum high and risk low.",
        bullets: [
          "Smart routing makes sure each contract reaches the right approver at the right time.",
          "Secure, native eSignature built in for prospects to sign in seconds.",
          "Enforce approval thresholds based on deal value, discount rate, or custom parameters.",
        ],
        flip: true,
        ctaLabel: "Explore eSignature",
        ctaHref: "/platform/esignature",
        mockup: "sales-signature",
      },
      {
        eyebrow: "Engagement tracking",
        title: "Know exactly when your <em>buyer is engaged</em>.",
        body: "Get real-time alerts the moment a prospect opens, shares, or comments on your contract, so you can follow up at exactly the right moment and never lose a deal to silence.",
        bullets: [
          "Instant notification when the counterparty opens or shares the document.",
          "See who signed, who commented, and who's still reviewing, per person.",
          "Full timeline from first send to final signature, with device and timestamp.",
        ],
        flip: false,
        ctaLabel: "Explore eSignature",
        ctaHref: "/platform/esignature",
        mockup: "sales-engagement",
      },
    ],
  },
  procurement: {
    eyebrow: "For Procurement teams", icon: "obligations",
    title: <>Negotiate from a position of <span style={{ color: "var(--ink-1)" }}>leverage</span>, <span className="accent">not catch-up</span>.</>,
    lede: "Speed up third-party reviews, simplify negotiations, and stay in sync with procurement tools, so your team never loses momentum.",
    pains: [
      "Auto-renewals you didn't see coming. Locked in for another year.",
      "Vendor risk lives in someone's spreadsheet, when they remember to update it.",
      "Every renegotiation starts from scratch. No memory of last year's win.",
      "Spend visibility happens at audit time, not at decision time.",
    ],
    gains: [
      "Renewal alerts 90, 60, 30 days out, with the data to renegotiate.",
      "Vendor risk tracked against your playbook, surfaced on every contract.",
      "Negotiation history per counterparty, every clause, every concession, every win.",
      "Live obligation dashboard: who owes what, when, and what's at risk.",
    ],
    metrics: [["18%", "savings on renewals"], ["100%", "obligation coverage"], ["€2.1M", "leakage prevented (avg.)"]],
    planEyebrow: "Built for procurement teams",
    planTitle: <><span style={{ color: "var(--ink-1)" }}>Renewals catch you off guard.</span> <span className="accent">Not anymore.</span></>,
    planBody: "Procurement loses leverage when contracts auto-renew and vendor data lives in spreadsheets. Three steps to negotiate from strength.",
    plan: [
      {
        num: "01",
        tag: "CENTRALIZE",
        title: "Centralize vendor paper",
        desc: "Upload all your existing agreements into one searchable repository.",
        icon: (
          <svg width="20" height="20" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2.2" strokeLinecap="round" strokeLinejoin="round"><path d="M21 15v4a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2v-4"/><polyline points="17 8 12 3 7 8"/><line x1="12" y1="3" x2="12" y2="15"/></svg>
        )
      },
      {
        num: "02",
        tag: "MONITOR",
        title: "Track renewals",
        desc: "Auto-extract renewal windows and notice periods to set up alert schedules.",
        icon: (
          <svg width="20" height="20" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2.2" strokeLinecap="round" strokeLinejoin="round"><circle cx="12" cy="12" r="10"/><polyline points="12 6 12 12 16 14"/></svg>
        )
      },
      {
        num: "03",
        tag: "NEGOTIATE",
        title: "Negotiate with leverage",
        desc: "Review vendor contracts against playbooks and renegotiate from strength.",
        icon: (
          <svg width="20" height="20" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2.2" strokeLinecap="round" strokeLinejoin="round"><path d="M16 21v-2a4 4 0 0 0-4-4H6a4 4 0 0 0-4 4v2"/><circle cx="9" cy="7" r="4"/><path d="M22 21v-2a4 4 0 0 0-3-3.87"/><path d="M16 3.13a4 4 0 0 1 0 7.75"/></svg>
        )
      }
    ],

    modules: [
      {
        eyebrow: "Approval Workflows",
        title: "Faster vendor contracts, <em>faster procurement cycles</em>.",
        body: "Route every vendor contract to the right stakeholders automatically, based on deal value, contract type, or counterparty. No more chasing Legal or Finance for sign-off.",
        bullets: [
          "Speed up review of third-party vendor contracts with pre-configured approval flows.",
          "Route contracts to Finance and Legal automatically based on value thresholds.",
          "Automatic reminders keep approvers on track, no manual follow-up needed.",
        ],
        flip: false,
        ctaLabel: "Explore eSignature",
        ctaHref: "/platform/esignature",
        mockup: "procurement-approval",
      },
      {
        eyebrow: "Obligations",
        title: "Eliminate undesirable <em>auto-renewals</em>.",
        body: "Never get locked into a vendor contract by accident. ContractControl surfaces every upcoming renewal, notice period, and opt-out deadline, and alerts the right person 90, 60, and 30 days out.",
        bullets: [
          "Auto-extracted renewal windows and opt-out deadlines across all vendor contracts.",
          "Alerts at 90 · 60 · 30 days to the right owner, before it's too late to act.",
          "Full obligation register: every commitment, every deadline, always up to date.",
        ],
        flip: true,
        ctaLabel: "Explore Obligations",
        ctaHref: "/platform/obligations",
        mockup: "procurement-repository",
      },
      {
        eyebrow: "Review",
        title: "Drive real-time collaboration between <em>Procurement and Legal</em>.",
        body: "Everyone works in the same place. Procurement, Legal, and Finance see the same contract, get the same alerts, and leave comments in a shared activity log, no back-and-forth emails.",
        bullets: [
          "Collaborate with Legal and Finance in real time, no back-and-forth emails.",
          "Know exactly where contracts stand, who's holding them up, and what's needed to move forward.",
          "Speed up approvals and shorten onboarding time with e-signatures and automated routing.",
        ],
        flip: false,
        ctaLabel: "Explore Review",
        ctaHref: "/platform/review",
        mockup: "procurement-collaboration",
      },
    ],
  },
  hr: {
    eyebrow: "For HR & People", icon: "workspace",
    title: <>Hire faster, onboard <span className="accent">cleaner</span>.</>,
    lede: "Offer letters, contractor agreements, equity docs, on-brand templates with smart routing for variations.",
    pains: [
      "Every offer letter is a copy-paste job from the last one. Sometimes the wrong one.",
      "Contractors, equity, immigration, three workflows, three tools, three liability surfaces.",
      "Senior approvers chase you to sign things they should've gotten in their inbox.",
      "Onboarding day-one paperwork is week-one paperwork.",
    ],
    gains: [
      "Templates with smart fields: role, level, location, equity tier, one form, every variation.",
      "Multi-step approvals with conditional logic, finance for offers > €X, founders for VPs.",
      "Equity docs (ISO, BSPCE, RSU) generated against your option pool plan.",
      "New hire signs day-zero paperwork before day one. Not after week one.",
    ],
    metrics: [["48h", "from offer to signed"], ["12+", "template variations"], ["100%", "compliance"]],
    planEyebrow: "Built for HR & People teams",
    planTitle: <><span style={{ color: "var(--ink-1)" }}>Onboarding shouldn't take weeks.</span> <span className="accent">It won't.</span></>,
    planBody: "Every offer letter is a copy-paste job, approvers chase you for signatures, and day-one paperwork drags into week one. Three steps to fix it.",
    plan: [
      {
        num: "01",
        tag: "PUBLISH",
        title: "Load templates",
        desc: "Upload template offer letters, contractor agreements, and equity docs once.",
        icon: (
          <svg width="20" height="20" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2.2" strokeLinecap="round" strokeLinejoin="round"><path d="M14 2H6a2 2 0 0 0-2 2v16a2 2 0 0 0 2 2h12a2 2 0 0 0 2-2V8z"/><polyline points="14 2 14 8 20 8"/></svg>
        )
      },
      {
        num: "02",
        tag: "DRAFT",
        title: "Generate drafts",
        desc: "Generate custom contracts instantly with pre-approved role, salary, and equity ranges.",
        icon: (
          <svg width="20" height="20" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2.2" strokeLinecap="round" strokeLinejoin="round"><path d="M12 20h9"/><path d="M16.5 3.5a2.121 2.121 0 0 1 3 3L7 19l-4 1 1-4L16.5 3.5z"/></svg>
        )
      },
      {
        num: "03",
        tag: "AUTOPILOT",
        title: "Sign & onboard",
        desc: "Route internal approvals automatically and collect legally-binding signatures day zero.",
        icon: (
          <svg width="20" height="20" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2.2" strokeLinecap="round" strokeLinejoin="round"><path d="M22 11.08V12a10 10 0 1 1-5.93-9.14"/><polyline points="22 4 12 14.01 9 11.01"/></svg>
        )
      }
    ],

    modules: [
      {
        eyebrow: "Intake",
        title: "Faster, smoother <em>onboarding</em>.",
        body: "Auto-generate offer letters and contracts directly from Greenhouse or your ATS. Fields like name, role, compensation, and start date are pre-filled, route for approvals and eSignature in minutes.",
        bullets: [
          "Auto-generate offer letters and contracts from Greenhouse or your ATS.",
          "Pre-fill fields like name, role, compensation, and start date.",
          "Route contracts for internal approvals and eSignature in minutes.",
        ],
        flip: false,
        ctaLabel: "Explore Intake",
        ctaHref: "/platform/intake",
        mockup: "hr-intake",
      },
      {
        eyebrow: "Repository",
        title: "One source of truth for all <em>employee contracts</em>.",
        body: "One secure platform to store all employee contracts, offer letters, appraisals, transfers, and more. Powerful filters and views let you retrieve the right contract instantly.",
        bullets: [
          "One secure home for offer letters, appraisals, transfers, and contractor agreements.",
          "Filter by contract type, date, or team to find what you need instantly.",
          "Full version history on every document.",
        ],
        flip: true,
        ctaLabel: "Explore Repository",
        ctaHref: "/platform/repository",
        mockup: "hr-repository",
      },
      {
        eyebrow: "Review",
        title: "Bring HR, Legal, and Finance <em>together</em>.",
        body: "Automatically route contracts to Legal and Finance based on role and deal size. Collaborate directly within ContractControl, comments, approvals, and activity logs replace back-and-forth emails.",
        bullets: [
          "Auto-route contracts to Legal and Finance based on role and thresholds.",
          "Comment and resolve directly in the platform, no email or Slack threads.",
          "Activity logs and reminders ensure nothing slips through the cracks.",
        ],
        flip: false,
        ctaLabel: "Explore Review",
        ctaHref: "/platform/review",
        mockup: "hr-review",
      },
      {
        eyebrow: "eSignature",
        title: "Fast, frictionless signing, <em>built in</em>.",
        body: "Use ContractControl's native, legally binding eSignature, no external tools required. Get contracts signed quickly without toggling between platforms.",
        bullets: [
          "Legally binding eSignature, built into the platform, no add-ons.",
          "Get contracts signed in minutes, not days.",
          "Full audit trail on every signature event.",
        ],
        flip: true,
        ctaLabel: "Explore eSignature",
        ctaHref: "/platform/esignature",
        mockup: "hr-signature",
      },
    ],
  },
  finance: {
    eyebrow: "For Finance Teams", icon: "analytics",
    title: <>Turn every contract into a source of <span className="accent">financial clarity</span>.</>,
    lede: "Finance teams are on the front lines of cost control and revenue protection, but without visibility into contracts, crucial decisions get delayed or made in the dark.",
    pains: [
      "Revenue leaks at renewals nobody owns and milestones nobody invoices.",
      "You don't know which contracts are missing critical data until an auditor asks.",
      "Payment terms in the contract don't match payment terms in the ERP.",
      "Forecast accuracy depends on whether sales updated the right field.",
    ],
    gains: [
      "Contract-health score on every agreement, metadata, clauses, owners, obligations.",
      "Renewals, escalations, and milestones surfaced via email, calendar, Slack and SMS, to the right owner, before the deadline.",
      "Native sync to Fortnox, Visma, NetSuite, invoice when the contract says invoice.",
      "12-month renewal forecast with confidence scores. Audit export in one click.",
    ],
    metrics: [["€2.1M", "avg. leakage prevented"], ["0", "missed renewals"], ["1 click", "audit export"]],
    planEyebrow: "Built for finance teams",
    planTitle: <><span style={{ color: "var(--ink-1)" }}>Revenue leaks where contracts go dark.</span> <span className="accent">Light them up.</span></>,
    planBody: "Payment terms don't match the ERP, renewals slip through, and audits take weeks. Three steps to full financial visibility.",
    plan: [
      {
        num: "01",
        tag: "PUBLISH",
        title: "Centralize terms",
        desc: "Upload all agreements to centralize notice periods, payment terms, and contract values once.",
        icon: (
          <svg width="20" height="20" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2.2" strokeLinecap="round" strokeLinejoin="round"><path d="M14 2H6a2 2 0 0 0-2 2v16a2 2 0 0 0 2 2h12a2 2 0 0 0 2-2V8z"/><polyline points="14 2 14 8 20 8"/></svg>
        )
      },
      {
        num: "02",
        tag: "CONFIG",
        title: "Set approvals",
        desc: "Configure threshold rules to automatically route high-value contracts to the right stakeholders.",
        icon: (
          <svg width="20" height="20" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2.2" strokeLinecap="round" strokeLinejoin="round"><path d="M4 19.5v-15A2.5 2.5 0 0 1 6.5 2H20v20H6.5a2.5 2.5 0 0 1-2.5-2.5Z"/><path d="M6 6h10"/><path d="M6 10h10"/></svg>
        )
      },
      {
        num: "03",
        tag: "AUTOPILOT",
        title: "Sync & track",
        desc: "Automatically sync payment schedules to your invoicing tools and track renewals before they happen.",
        icon: (
          <svg width="20" height="20" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2.2" strokeLinecap="round" strokeLinejoin="round"><circle cx="12" cy="12" r="10"/><polyline points="12 6 12 12 16 14"/></svg>
        )
      }
    ],

    modules: [
      {
        eyebrow: "Approvals",
        title: "Complete oversight of contract approvals, <em>without sacrificing speed</em>.",
        body: "Automatically kick off finance approvals when a contract crosses a set threshold. Route by value or type, track progress in real time, and keep a complete audit trail, all without leaving ContractControl.",
        bullets: [
          "Auto-trigger finance approvals if a contract crosses a set threshold (e.g., €25k/year).",
          "Route contracts to Finance, Legal, or Procurement by value or type.",
          "Track approvals in real time and keep a complete audit trail.",
        ],
        flip: false,
        ctaLabel: "Explore Approvals",
        ctaHref: "/platform/negotiation",
        mockup: "finance-approval",
      },
      {
        eyebrow: "Obligations",
        title: "No more <em>nasty surprises</em>.",
        body: "Access every contract, payment term, and renewal date from a single searchable source. Automated alerts prevent missed deadlines, and a full audit log makes due diligence fast.",
        bullets: [
          "Every contract, payment term, and renewal date in one searchable place.",
          "Automated alerts on renewals and payment obligations, before it's too late.",
          "Full approval logs, version history, and timestamps, all audit-ready.",
        ],
        flip: true,
        ctaLabel: "Explore Obligations",
        ctaHref: "/platform/obligations",
        mockup: "finance-repository",
      },
      {
        eyebrow: "Analytics",
        title: "Real-time revenue and <em>spend visibility</em>.",
        body: "Identify payment terms, revenue schedules, and renewal risks in one place. Leverage reports to forecast cash flow and plan spend with confidence.",
        bullets: [
          "Payment terms, revenue schedules, and renewal risks in one place.",
          "Forecast cash flow and plan spend with confidence.",
        ],
        flip: false,
        ctaLabel: "Explore Analytics",
        ctaHref: "/platform/analytics",
        mockup: "finance-analytics",
      },
      {
        eyebrow: "Analytics",
        title: "Catch every <em>terms vs. invoice mismatch</em>.",
        body: "ContractControl flags when invoice payment terms don't match what was agreed in the contract, so you get paid on time, every time, and never overpay a vendor.",
        bullets: [
          "Side-by-side comparison of contract terms and invoice terms.",
          "Mismatches flagged automatically before they cause revenue leakage.",
          "Full history of payment term changes across all counterparties.",
        ],
        flip: true,
        ctaLabel: "Explore Analytics",
        ctaHref: "/platform/analytics",
        mockup: "finance-terms-invoice",
      },
    ],
  },
  revops: {
    eyebrow: "For RevOps", icon: "drafting",
    title: <>One <em>source of truth</em>, <span className="accent">every team</span>.</>,
    lede: "Salesforce, HubSpot, Workday, pipe contracts where work happens. No swivel-chair, no copy-paste.",
    pains: [
      "Contracts live in DocuSign, deals live in Salesforce, never the twain shall meet.",
      "Reporting requires three exports, two VLOOKUPs, and a prayer.",
      "Onboarding a new system means rebuilding the whole stack.",
      "Every team's contract data is everybody's contract data, and nobody owns it.",
    ],
    gains: [
      "Native two-way sync with Salesforce, HubSpot, Workday, NetSuite, out of the box.",
      "API + webhooks for the bespoke stuff. Documented, versioned, real.",
      "Single contract object, every system. Edit anywhere, syncs everywhere.",
      "12 native integrations live, 40+ via Zapier and Make.",
    ],
    metrics: [["12+", "native integrations"], ["1", "system of record"], ["0", "swivel-chair"]],
    quote: { text: "We turned off two systems and three Zapier zaps the day we went live.", who: "Anna Söderberg", role: "Head of RevOps, Kvist Group" },
    featuresTitle: <>Revenue operations with <em>one source of truth</em></>,
    features: [
      { icon: "workspace", title: "One system of record", desc: "Contract data piped to Salesforce, HubSpot, and Workday automatically, no copy-paste, no drift." },
      { icon: "analytics", title: "Measure what matters", desc: "Cycle time, deal velocity, and contract health scores in one live dashboard tied to your CRM." },
      { icon: "drafting", title: "Eliminate swivel-chair", desc: "Contract data flows to the tools your team uses. 12 native integrations, 40+ via Zapier and Make." },
    ],
  },
};


function SalesSelfServeMockup() {
  const templates = [
    { name: "Master Service Agreement", tag: "Pre-approved" },
    { name: "Non-Disclosure Agreement", tag: "Pre-approved" },
    { name: "Order Form", tag: "Pre-approved" },
  ];
  return (
    <div className="mockup-frame" style={{ padding: 0, overflow: "hidden" }}>
      <div style={{ padding: "12px 18px", borderBottom: "1px solid var(--line)", display: "flex", alignItems: "center", gap: 8 }}>
        <span style={{ fontSize: 12, fontWeight: 600, color: "var(--ink-1)" }}>New contract</span>
        <span style={{ fontSize: 10.5, padding: "2px 8px", borderRadius: 99, background: "rgba(22,163,74,0.08)", color: "#16A34A", fontWeight: 500 }}>No approval needed</span>
      </div>
      <div style={{ padding: "14px 18px" }}>
        <div style={{ fontSize: 10.5, fontWeight: 600, letterSpacing: "0.08em", textTransform: "uppercase", color: "var(--ink-4)", marginBottom: 10 }}>Choose template</div>
        {templates.map((t, i) => (
          <div key={i} style={{ display: "flex", alignItems: "center", gap: 10, padding: "10px 12px", borderRadius: 8, background: i === 0 ? "var(--accent-soft)" : "transparent", border: i === 0 ? "1px solid rgba(124,92,211,0.2)" : "1px solid var(--line)", marginBottom: 8 }}>
            <svg width="13" height="13" viewBox="0 0 24 24" fill="none" stroke={i === 0 ? "var(--accent)" : "var(--ink-4)"} strokeWidth="2"><path d="M14 2H6a2 2 0 0 0-2 2v16a2 2 0 0 0 2 2h12a2 2 0 0 0 2-2V8z"/><polyline points="14 2 14 8 20 8"/></svg>
            <span style={{ flex: 1, fontSize: 12.5, color: i === 0 ? "var(--ink-1)" : "var(--ink-3)", fontWeight: i === 0 ? 500 : 400 }}>{t.name}</span>
            <span style={{ fontSize: 10.5, padding: "2px 8px", borderRadius: 99, background: "rgba(22,163,74,0.08)", color: "#16A34A", fontWeight: 500 }}>{t.tag}</span>
          </div>
        ))}
      </div>
      <div style={{ padding: "0 18px 14px", borderTop: "1px solid var(--line)", paddingTop: 14 }}>
        <div style={{ fontSize: 10.5, fontWeight: 600, letterSpacing: "0.08em", textTransform: "uppercase", color: "var(--ink-4)", marginBottom: 10 }}>Counterparty details</div>
        <div style={{ display: "flex", flexDirection: "column", gap: 8 }}>
          {[["Company name", "Acme Corp"], ["Contact email", "legal@acme.com"]].map(([label, val], i) => (
            <div key={i} style={{ padding: "8px 12px", borderRadius: 8, border: "1px solid var(--line)", fontSize: 12.5, color: "var(--ink-2)", background: "var(--bg)" }}>{val}</div>
          ))}
        </div>
      </div>
      <div style={{ padding: "12px 18px", borderTop: "1px solid var(--line)" }}>
        <button style={{ width: "100%", padding: "9px 0", borderRadius: 8, border: "none", background: "var(--accent)", color: "#fff", fontSize: 13, fontWeight: 600, cursor: "default", pointerEvents: "none" }}>Generate contract →</button>
      </div>
    </div>
  );
}

function SalesNegotiationMockup() {
  const versions = [
    { label: "v3, Our counter", who: "Linnea (Legal)", time: "11:02", active: true },
    { label: "v2, Acme redlines", who: "J. Walsh (Acme)", time: "10:31", external: true },
    { label: "v1, Original draft", who: "Magnus (Sales)", time: "09:15" },
  ];
  const comments = [
    { who: "Magnus", initials: "M", color: "#7B61FF", msg: "Sent v1 to Acme. Liability cap at €250k as agreed.", time: "09:15", tag: "Internal" },
    { who: "J. Walsh (Acme)", initials: "JW", color: "#0EA5E9", msg: "Liability cap needs to be €500k minimum. Redlined in v2.", time: "10:31", tag: "External" },
    { who: "Linnea", initials: "L", color: "#16A34A", msg: "Agreed, updated to €500k in v3. Ready to send.", time: "11:02", tag: "Internal" },
  ];
  return (
    <div style={{ background: "var(--bg-elevated)", borderRadius: 14, border: "1px solid var(--line)", overflow: "hidden", fontFamily: "var(--font-sans)", fontSize: 13 }}>
      <div style={{ padding: "12px 16px", borderBottom: "1px solid var(--line)", display: "flex", alignItems: "center", justifyContent: "space-between" }}>
        <span style={{ fontWeight: 600, color: "var(--ink-1)", fontSize: 13 }}>MSA · Acme Corp</span>
        <span style={{ fontSize: 11, padding: "2px 8px", borderRadius: 99, background: "rgba(124,92,211,0.08)", color: "var(--accent)", border: "1px solid rgba(124,92,211,0.2)", fontWeight: 500 }}>v3 · In review</span>
      </div>
      <div style={{ display: "grid", gridTemplateColumns: "148px 1fr", minHeight: 220 }}>
        {/* Version history */}
        <div style={{ borderRight: "1px solid var(--line)", padding: "10px 0" }}>
          <div style={{ fontSize: 10, fontWeight: 600, letterSpacing: "0.07em", textTransform: "uppercase", color: "var(--ink-4)", padding: "0 12px 8px" }}>Versions</div>
          {versions.map((v, i) => (
            <div key={i} style={{ padding: "8px 12px", background: v.active ? "var(--accent-soft)" : "transparent", borderLeft: v.active ? "2px solid var(--accent)" : "2px solid transparent" }}>
              <div style={{ fontSize: 11.5, fontWeight: v.active ? 600 : 400, color: v.active ? "var(--accent)" : "var(--ink-2)" }}>{v.label}</div>
              <div style={{ fontSize: 10.5, color: v.external ? "#0EA5E9" : "var(--ink-4)", marginTop: 2 }}>{v.who}</div>
              <div style={{ fontSize: 10, color: "var(--ink-5)", marginTop: 1 }}>{v.time}</div>
            </div>
          ))}
        </div>
        {/* Comment thread */}
        <div style={{ padding: "10px 0", display: "flex", flexDirection: "column", gap: 2 }}>
          {comments.map((c, i) => (
            <div key={i} style={{ padding: "7px 14px", display: "flex", gap: 9, alignItems: "flex-start" }}>
              <div style={{ width: 24, height: 24, borderRadius: "50%", background: c.color, display: "flex", alignItems: "center", justifyContent: "center", flexShrink: 0, fontSize: 9.5, fontWeight: 700, color: "#fff", marginTop: 1 }}>{c.initials}</div>
              <div style={{ flex: 1 }}>
                <div style={{ display: "flex", alignItems: "center", gap: 6, marginBottom: 3 }}>
                  <span style={{ fontSize: 11.5, fontWeight: 600, color: "var(--ink-1)" }}>{c.who}</span>
                  <span style={{ fontSize: 10, padding: "1px 6px", borderRadius: 99, background: c.tag === "External" ? "rgba(14,165,233,0.1)" : "rgba(110,86,207,0.08)", color: c.tag === "External" ? "#0EA5E9" : "var(--accent)", fontWeight: 500 }}>{c.tag}</span>
                  <span style={{ fontSize: 10, color: "var(--ink-5)", marginLeft: "auto" }}>{c.time}</span>
                </div>
                <div style={{ fontSize: 12, color: "var(--ink-3)", lineHeight: 1.5 }}>{c.msg}</div>
              </div>
            </div>
          ))}
        </div>
      </div>
      <div style={{ padding: "10px 14px", borderTop: "1px solid var(--line)", display: "flex", gap: 8, alignItems: "center" }}>
        <div style={{ flex: 1, padding: "7px 11px", borderRadius: 7, border: "1px solid var(--line)", fontSize: 11.5, color: "var(--ink-4)", background: "var(--bg)" }}>Add comment…</div>
        <button style={{ padding: "7px 12px", borderRadius: 7, border: "none", background: "var(--accent)", color: "#fff", fontSize: 11.5, fontWeight: 600, cursor: "default", pointerEvents: "none", whiteSpace: "nowrap" }}>Send v3 →</button>
      </div>
    </div>
  );
}

function SalesCPQMockup() {
  const items = [
    { name: "Platform licence, Enterprise", qty: 1, unit: "€12,000", total: "€12,000" },
    { name: "Onboarding & implementation", qty: 1, unit: "€2,500", total: "€2,500" },
    { name: "Additional user seats (×12)", qty: 12, unit: "€75", total: "€900" },
    { name: "Priority support SLA", qty: 1, unit: "€1,800", total: "€1,800" },
  ];
  return (
    <div style={{ background: "var(--bg-elevated)", borderRadius: 14, border: "1px solid var(--line)", overflow: "hidden", fontFamily: "var(--font-sans)", fontSize: 13 }}>
      <div style={{ position: "relative", height: 100, overflow: "hidden" }}>
        <img src="https://images.unsplash.com/photo-1460925895917-afdab827c52f?auto=format&fit=crop&w=500&h=200&q=80" alt="Proposal Cover" style={{ width: "100%", height: "100%", objectFit: "cover" }} />
        <div style={{ position: "absolute", inset: 0, background: "linear-gradient(to bottom, rgba(0,0,0,0.05), rgba(0,0,0,0.6))", display: "flex", alignItems: "flex-end", padding: "12px 18px" }}>
          <div style={{ color: "#fff", fontWeight: 600, fontSize: 14, letterSpacing: "-0.01em" }}>Enterprise Proposal · Acme Corp</div>
        </div>
      </div>
      <div style={{ padding: "13px 18px", borderBottom: "1px solid var(--line)", display: "flex", alignItems: "center", justifyContent: "space-between" }}>
        <span style={{ fontWeight: 500, color: "var(--ink-2)", fontSize: 12.5 }}>Order Form details</span>
        <span style={{ fontSize: 11, color: "var(--success)", background: "rgba(34,197,94,0.08)", border: "1px solid rgba(34,197,94,0.2)", borderRadius: 99, padding: "2px 8px", fontWeight: 500 }}>Pricing verified</span>
      </div>
      <div style={{ display: "grid", gridTemplateColumns: "1fr 28px 64px 64px", padding: "7px 18px", fontSize: 10.5, fontWeight: 600, color: "var(--ink-4)", letterSpacing: "0.05em", textTransform: "uppercase", background: "var(--bg-soft)", borderBottom: "1px solid var(--line)" }}>
        <span>Item</span><span style={{ textAlign: "center" }}>Qty</span><span style={{ textAlign: "right" }}>Unit</span><span style={{ textAlign: "right" }}>Total</span>
      </div>
      {items.map((item, i) => (
        <div key={i} style={{ display: "grid", gridTemplateColumns: "1fr 28px 64px 64px", padding: "10px 18px", borderBottom: "1px solid var(--line)", alignItems: "center" }}>
          <span style={{ color: "var(--ink-2)", fontSize: 12.5 }}>{item.name}</span>
          <span style={{ textAlign: "center", color: "var(--ink-4)", fontSize: 12 }}>{item.qty}</span>
          <span style={{ textAlign: "right", color: "var(--ink-3)", fontSize: 12 }}>{item.unit}</span>
          <span style={{ textAlign: "right", color: "var(--ink-1)", fontWeight: 500, fontSize: 12.5 }}>{item.total}</span>
        </div>
      ))}
      <div style={{ padding: "12px 18px", display: "flex", justifyContent: "space-between", alignItems: "center", background: "var(--bg-soft)", borderTop: "1px solid var(--line)" }}>
        <div style={{ display: "flex", alignItems: "center", gap: 8 }}>
          <svg width="13" height="13" viewBox="0 0 24 24" fill="none" stroke="var(--success)" strokeWidth="2.5"><polyline points="20 6 9 17 4 12"/></svg>
          <span style={{ fontSize: 12, color: "var(--ink-3)" }}>No approval required · within discount policy</span>
        </div>
        <div style={{ textAlign: "right" }}>
          <div style={{ fontSize: 10.5, color: "var(--ink-4)", marginBottom: 2 }}>Annual contract value</div>
          <div style={{ fontSize: 16, fontWeight: 700, color: "var(--ink-1)", letterSpacing: "-0.02em" }}>€17,200</div>
        </div>
      </div>
    </div>
  );
}

function SalesSignatureMockup() {
  const approvalSteps = [
    { label: "VP of Sales Approval", approver: "Magnus Holm", status: "Approved", color: "#16A34A" },
    { label: "Finance Sign-off", approver: "Erik Lund", status: "Approved", color: "#16A34A" },
  ];
  
  const signers = [
    { name: "Sara Reinholt", role: "VP Procurement, Acme", status: "Pending", time: "Awaiting", color: "#B97A00" },
    { name: "Magnus Holm", role: "VP Sales, ContractControl", status: "Signed", time: "Today, 14:22", color: "#16A34A" },
  ];

  return (
    <div style={{ background: "var(--bg-elevated)", borderRadius: 14, border: "1px solid var(--line)", overflow: "hidden", fontFamily: "var(--font-sans)", fontSize: 13 }}>
      <div style={{ padding: "12px 18px", borderBottom: "1px solid var(--line)", display: "flex", alignItems: "center", justifyContent: "space-between" }}>
        <span style={{ fontWeight: 600, color: "var(--ink-1)" }}>MSA · Acme Corp</span>
        <span style={{ fontSize: 10.5, color: "#B97A00", background: "rgba(185,122,0,0.08)", border: "1px solid rgba(185,122,0,0.2)", borderRadius: 99, padding: "2px 8px", fontWeight: 500 }}>Awaiting signature</span>
      </div>
      
      <div style={{ padding: "14px 18px 0" }}>
        <div style={{ fontSize: 10, fontWeight: 600, letterSpacing: "0.08em", textTransform: "uppercase", color: "var(--ink-4)", marginBottom: 8 }}>Approval chain</div>
        <div style={{ display: "flex", flexDirection: "column", gap: 8 }}>
          {approvalSteps.map((step, i) => (
            <div key={i} style={{ display: "flex", alignItems: "center", gap: 10, padding: "8px 12px", borderRadius: 8, border: "1px solid var(--line)", background: "var(--bg-soft)" }}>
              <div style={{ flex: 1 }}>
                <div style={{ fontSize: 11.5, color: "var(--ink-3)" }}>{step.label}</div>
                <div style={{ fontSize: 12, fontWeight: 600, color: "var(--ink-1)", marginTop: 1 }}>{step.approver}</div>
              </div>
              <span style={{ fontSize: 11, padding: "2px 8px", borderRadius: 6, background: "rgba(22,163,74,0.08)", color: "#16A34A", fontWeight: 600 }}>{step.status}</span>
            </div>
          ))}
        </div>
      </div>
      
      <div style={{ padding: "14px 18px" }}>
        <div style={{ fontSize: 10, fontWeight: 600, letterSpacing: "0.08em", textTransform: "uppercase", color: "var(--ink-4)", marginBottom: 8 }}>Signers</div>
        <div style={{ display: "flex", flexDirection: "column", gap: 8 }}>
          {signers.map((s, i) => (
            <div key={i} style={{ display: "flex", alignItems: "center", gap: 12, padding: "8px 12px", borderRadius: 8, border: "1px solid var(--line)", background: "var(--bg-soft)" }}>
              <div style={{ width: 26, height: 26, borderRadius: "50%", background: s.color + "22", display: "flex", alignItems: "center", justifyContent: "center", fontSize: 10, fontWeight: 700, color: s.color, flexShrink: 0 }}>
                {s.name.split(" ").map(n => n[0]).join("")}
              </div>
              <div style={{ flex: 1 }}>
                <div style={{ fontSize: 12, fontWeight: 600, color: "var(--ink-1)" }}>{s.name}</div>
                <div style={{ fontSize: 10.5, color: "var(--ink-4)" }}>{s.role}</div>
              </div>
              <div style={{ textAlign: "right" }}>
                <div style={{ fontSize: 11, fontWeight: 600, color: s.color }}>{s.status}</div>
                <div style={{ fontSize: 9.5, color: "var(--ink-4)" }}>{s.time}</div>
              </div>
            </div>
          ))}
        </div>
      </div>
      
      <div style={{ padding: "0 18px 14px" }}>
        <div style={{ background: "var(--accent)", borderRadius: 8, padding: "8px 0", textAlign: "center", fontSize: 11.5, fontWeight: 700, color: "#fff", display: "flex", alignItems: "center", justifyContent: "center", gap: 6, cursor: "default", pointerEvents: "none" }}>
          <svg width="13" height="13" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2.5"><polyline points="20 6 9 17 4 12"/></svg>
          Legally binding · ContractControl eSignature
        </div>
      </div>
    </div>
  );
}

function SalesEngagementMockup() {
  const days = [
    {
      date: "Today",
      events: [
        { time: "14:22", initials: "SR", color: "#7B61FF", name: "Sara Reinholt", action: "Signed", actionColor: "#16A34A", device: "Desktop" },
        { time: "13:47", initials: "TW", color: "#0EA5E9", name: "Tom Whitfield", action: "Signed", actionColor: "#16A34A", device: "Mobile" },
        { time: "11:05", initials: "TW", color: "#0EA5E9", name: "Tom Whitfield", action: "Commented", actionColor: "#B97A00", device: "Mobile", note: "\"Need to confirm budget before signing.\"" },
      ],
    },
    {
      date: "Yesterday",
      events: [
        { time: "17:33", initials: "SR", color: "#7B61FF", name: "Sara Reinholt", action: "Opened", actionColor: "#3B82F6", device: "Desktop" },
        { time: "09:12", initials: "MH", color: "#E11D48", name: "Magnus Holm", action: "Sent", actionColor: "var(--ink-3)", device: "-" },
      ],
    },
  ];
  return (
    <div style={{ background: "var(--bg-elevated)", borderRadius: 14, border: "1px solid var(--line)", overflow: "hidden", fontFamily: "var(--font-sans)", fontSize: 13 }}>
      <div style={{ padding: "12px 18px", borderBottom: "1px solid var(--line)", display: "flex", alignItems: "center", justifyContent: "space-between" }}>
        <span style={{ fontWeight: 600, color: "var(--ink-1)", fontSize: 13 }}>MSA · Acme Corp, Timeline</span>
        <span style={{ fontSize: 11, color: "var(--success)", background: "rgba(34,197,94,0.08)", border: "1px solid rgba(34,197,94,0.2)", borderRadius: 99, padding: "2px 8px", fontWeight: 500 }}>2 of 2 signed</span>
      </div>
      {days.map((day, di) => (
        <div key={di}>
          <div style={{ padding: "8px 18px 4px", fontSize: 10.5, fontWeight: 600, color: "var(--ink-4)", letterSpacing: "0.06em", textTransform: "uppercase", background: "var(--bg-soft)", borderBottom: "1px solid var(--line)" }}>{day.date}</div>
          {day.events.map((ev, ei) => (
            <div key={ei} style={{ display: "grid", gridTemplateColumns: "36px 24px 1fr 80px 56px", gap: 10, padding: "10px 18px", borderBottom: "1px solid var(--line)", alignItems: "center" }}>
              <span style={{ fontSize: 11, color: "var(--ink-4)", textAlign: "right" }}>{ev.time}</span>
              <div style={{ width: 24, height: 24, borderRadius: "50%", background: ev.color, display: "flex", alignItems: "center", justifyContent: "center", fontSize: 9, fontWeight: 700, color: "#fff", flexShrink: 0 }}>{ev.initials}</div>
              <div>
                <span style={{ fontSize: 12.5, color: "var(--ink-1)", fontWeight: 500 }}>{ev.name}</span>
                {ev.note && <div style={{ fontSize: 11, color: "var(--ink-4)", marginTop: 2, fontStyle: "italic" }}>{ev.note}</div>}
              </div>
              <span style={{ fontSize: 12, fontWeight: 600, color: ev.actionColor }}>{ev.action}</span>
              <span style={{ fontSize: 11, color: "var(--ink-4)", textAlign: "right" }}>{ev.device}</span>
            </div>
          ))}
        </div>
      ))}
    </div>
  );
}

function ProcurementApprovalMockup() {
  return (
    <div style={{ background: "var(--bg-elevated)", borderRadius: 14, border: "1px solid var(--line)", padding: 28, fontFamily: "var(--font-sans)", fontSize: 13 }}>
      {/* Contract card */}
      <div style={{ display: "flex", alignItems: "center", gap: 12, padding: "12px 16px", borderRadius: 10, border: "1px solid var(--line)", background: "var(--bg)", marginBottom: 0 }}>
        <div style={{ width: 32, height: 32, borderRadius: 8, background: "var(--accent)", display: "flex", alignItems: "center", justifyContent: "center", fontSize: 9.5, fontWeight: 700, color: "#fff", flexShrink: 0 }}>MSA</div>
        <span style={{ fontWeight: 500, color: "var(--ink-1)", fontSize: 13.5 }}>Master Service Agreement</span>
      </div>
      {/* Connector */}
      <div style={{ width: 2, height: 20, background: "var(--line-strong)", margin: "0 0 0 31px" }} />
      {/* Condition row */}
      <div style={{ display: "flex", alignItems: "center", gap: 10, marginBottom: 4, paddingLeft: 4 }}>
        <div style={{ width: 8, height: 8, borderRadius: "50%", background: "var(--accent)", flexShrink: 0 }} />
        <span style={{ color: "var(--ink-2)", fontSize: 13 }}>If deal amount</span>
        <span style={{ padding: "3px 10px", borderRadius: 6, border: "1px solid var(--line-strong)", fontSize: 12.5, color: "var(--ink-2)", background: "var(--bg)" }}>&gt;</span>
        <span style={{ padding: "3px 14px", borderRadius: 6, border: "1px solid var(--line-strong)", fontSize: 12.5, color: "var(--ink-1)", fontWeight: 500, background: "var(--bg)" }}>€50,000</span>
      </div>
      {/* Connector */}
      <div style={{ width: 2, height: 20, background: "var(--line-strong)", margin: "0 0 0 31px" }} />
      {/* Action row */}
      <div style={{ display: "flex", alignItems: "center", gap: 10, marginBottom: 4, paddingLeft: 4 }}>
        <div style={{ width: 8, height: 8, borderRadius: "50%", background: "var(--accent)", flexShrink: 0 }} />
        <span style={{ color: "var(--ink-2)", fontSize: 13 }}>Require approval from</span>
      </div>
      {/* Connector */}
      <div style={{ width: 2, height: 16, background: "var(--line-strong)", margin: "0 0 0 31px" }} />
      {/* Approvers */}
      <div style={{ display: "flex", alignItems: "center", gap: 10, padding: "12px 16px", borderRadius: 10, background: "var(--bg-soft)", border: "1px solid var(--line)", marginLeft: 0 }}>
        {[{ initials: "L", label: "Legal", color: "#7B61FF" }, { initials: "CFO", label: "CFO", color: "#0EA5E9" }].map((a, i) => (
          <React.Fragment key={i}>
            {i > 0 && <span style={{ color: "var(--ink-4)", fontSize: 12 }}>,</span>}
            <div style={{ display: "flex", alignItems: "center", gap: 7 }}>
              <div style={{ width: 28, height: 28, borderRadius: "50%", background: a.color, display: "flex", alignItems: "center", justifyContent: "center", fontSize: 9.5, fontWeight: 700, color: "#fff" }}>{a.initials}</div>
              <span style={{ fontSize: 13, fontWeight: 500, color: "var(--ink-1)" }}>{a.label}</span>
            </div>
          </React.Fragment>
        ))}
      </div>
    </div>
  );
}

function ProcurementRepositoryMockup() {
  const contracts = [
    { name: "Northwind AB, MSA", type: "Vendor", score: 92, scoreColor: "#16A34A", risk: "Low", riskColor: "#16A34A", riskBg: "rgba(22,163,74,0.08)" },
    { name: "Helix Group, SLA", type: "Service", score: 61, scoreColor: "#B97A00", risk: "Medium", riskColor: "#B97A00", riskBg: "rgba(185,122,0,0.08)" },
    { name: "Kvist Systems, Licence", type: "Software", score: 38, scoreColor: "#E11D48", risk: "High", riskColor: "#E11D48", riskBg: "rgba(225,29,72,0.08)" },
    { name: "Solstice Ventures, NDA", type: "Confidentiality", score: 87, scoreColor: "#16A34A", risk: "Low", riskColor: "#16A34A", riskBg: "rgba(22,163,74,0.08)" },
  ];
  const summary = [
    { label: "Healthy", count: 24, color: "#16A34A", bg: "rgba(22,163,74,0.1)", pct: 60 },
    { label: "At risk", count: 10, color: "#B97A00", bg: "rgba(185,122,0,0.1)", pct: 25 },
    { label: "Critical", count: 6, color: "#E11D48", bg: "rgba(225,29,72,0.1)", pct: 15 },
  ];
  return (
    <div style={{ background: "var(--bg-elevated)", borderRadius: 14, border: "1px solid var(--line)", overflow: "hidden", fontFamily: "var(--font-sans)", fontSize: 13 }}>
      {/* Header */}
      <div style={{ padding: "13px 18px", borderBottom: "1px solid var(--line)", display: "flex", alignItems: "center", justifyContent: "space-between" }}>
        <span style={{ fontWeight: 600, color: "var(--ink-1)", fontSize: 13 }}>Contract health</span>
        <span style={{ fontSize: 11, color: "var(--ink-4)" }}>40 contracts</span>
      </div>
      {/* Summary bar */}
      <div style={{ padding: "12px 18px", borderBottom: "1px solid var(--line)", display: "flex", flexDirection: "column", gap: 8 }}>
        <div style={{ display: "flex", height: 7, borderRadius: 99, overflow: "hidden", gap: 2 }}>
          {summary.map((s, i) => (
            <div key={i} style={{ width: `${s.pct}%`, background: s.color, borderRadius: 99 }} />
          ))}
        </div>
        <div style={{ display: "flex", gap: 16 }}>
          {summary.map((s, i) => (
            <div key={i} style={{ display: "flex", alignItems: "center", gap: 5 }}>
              <div style={{ width: 8, height: 8, borderRadius: 2, background: s.color }} />
              <span style={{ fontSize: 11, color: "var(--ink-3)" }}>{s.label}</span>
              <span style={{ fontSize: 11, fontWeight: 700, color: s.color }}>{s.count}</span>
            </div>
          ))}
        </div>
      </div>
      {/* Contract rows */}
      <div style={{ display: "grid", gridTemplateColumns: "1fr 70px 52px 62px", padding: "7px 18px", fontSize: 10.5, fontWeight: 600, color: "var(--ink-4)", letterSpacing: "0.05em", textTransform: "uppercase", background: "var(--bg-soft)", borderBottom: "1px solid var(--line)" }}>
        <span>Contract</span><span>Type</span><span style={{ textAlign: "center" }}>Score</span><span style={{ textAlign: "center" }}>Risk</span>
      </div>
      {contracts.map((c, i) => (
        <div key={i} style={{ display: "grid", gridTemplateColumns: "1fr 70px 52px 62px", padding: "10px 18px", borderBottom: i < contracts.length - 1 ? "1px solid var(--line)" : "none", alignItems: "center" }}>
          <span style={{ fontSize: 12.5, fontWeight: 500, color: "var(--ink-1)" }}>{c.name}</span>
          <span style={{ fontSize: 11, color: "var(--ink-4)" }}>{c.type}</span>
          <span style={{ fontSize: 12, fontWeight: 700, color: c.scoreColor, textAlign: "center" }}>{c.score}</span>
          <span style={{ fontSize: 10.5, fontWeight: 600, color: c.riskColor, background: c.riskBg, border: `1px solid ${c.riskColor}33`, borderRadius: 99, padding: "2px 7px", textAlign: "center", whiteSpace: "nowrap" }}>{c.risk}</span>
        </div>
      ))}
    </div>
  );
}

function ProcurementCollaborationMockup() {
  const events = [
    { type: "system", icon: "📄", msg: "Northwind MSA moved to Executed stage", time: null },
    { type: "team", initials: "FIN", color: "#0EA5E9", label: "Finance", time: "12 hours ago", msg: "Northwind MSA has been approved." },
    { type: "team", initials: "LGL", color: "#16A34A", label: "Legal", time: "2 days ago", msg: "Added updated indemnity clause to v2. Ready for final review." },
  ];
  return (
    <div style={{ background: "var(--bg-elevated)", borderRadius: 14, border: "1px solid var(--line)", overflow: "hidden", fontFamily: "var(--font-sans)", fontSize: 13 }}>
      <div style={{ padding: "12px 18px", borderBottom: "1px solid var(--line)" }}>
        <span style={{ fontSize: 10.5, fontWeight: 700, letterSpacing: "0.09em", textTransform: "uppercase", color: "var(--ink-4)" }}>Activity Log · Northwind MSA</span>
      </div>
      <div style={{ display: "flex", flexDirection: "column", gap: 2, padding: "8px 0" }}>
        {events.map((ev, i) => (
          ev.type === "system" ? (
            <div key={i} style={{ display: "flex", alignItems: "center", gap: 10, padding: "10px 18px", borderBottom: "1px solid var(--line)" }}>
              <div style={{ width: 28, height: 28, borderRadius: 7, background: "var(--bg-soft)", border: "1px solid var(--line)", display: "flex", alignItems: "center", justifyContent: "center", fontSize: 13, flexShrink: 0 }}>
                <svg width="13" height="13" viewBox="0 0 24 24" fill="none" stroke="var(--ink-3)" strokeWidth="2"><path d="M14 2H6a2 2 0 0 0-2 2v16a2 2 0 0 0 2 2h12a2 2 0 0 0 2-2V8z"/><polyline points="14 2 14 8 20 8"/></svg>
              </div>
              <span style={{ fontSize: 12.5, color: "var(--ink-2)" }}>{ev.msg}</span>
            </div>
          ) : (
            <div key={i} style={{ padding: "12px 18px", borderBottom: i < events.length - 1 ? "1px solid var(--line)" : "none" }}>
              <div style={{ display: "flex", alignItems: "center", gap: 8, marginBottom: 6 }}>
                <div style={{ width: 26, height: 26, borderRadius: "50%", background: ev.color, display: "flex", alignItems: "center", justifyContent: "center", fontSize: 8.5, fontWeight: 700, color: "#fff", flexShrink: 0 }}>{ev.initials}</div>
                <span style={{ fontSize: 12, fontWeight: 700, color: "var(--ink-1)", letterSpacing: "0.04em", textTransform: "uppercase" }}>{ev.label}</span>
                <span style={{ fontSize: 11, color: "var(--ink-4)" }}>{ev.time}</span>
              </div>
              <p style={{ margin: "0 0 0 34px", fontSize: 12.5, color: "var(--ink-2)", lineHeight: 1.55 }}>{ev.msg}</p>
            </div>
          )
        ))}
      </div>
    </div>
  );
}

function HRIntakeMockup() {
  const fields = [
    { label: "Full name", value: "Emma Lindqvist", auto: true },
    { label: "Role", value: "Senior Product Designer", auto: true },
    { label: "Start date", value: "1 June 2026", auto: true },
    { label: "Compensation", value: "€72,000 / year", auto: true },
  ];
  return (
    <div style={{ background: "var(--bg-elevated)", borderRadius: 14, border: "1px solid var(--line)", overflow: "hidden", fontFamily: "var(--font-sans)", fontSize: 13 }}>
      <div style={{ padding: "12px 18px", borderBottom: "1px solid var(--line)", display: "flex", alignItems: "center", justifyContent: "space-between" }}>
        <span style={{ fontWeight: 600, color: "var(--ink-1)" }}>New hire · Offer letter</span>
        <span style={{ fontSize: 10.5, color: "#16A34A", background: "rgba(22,163,74,0.08)", border: "1px solid rgba(22,163,74,0.2)", borderRadius: 99, padding: "2px 8px", fontWeight: 500 }}>From Greenhouse</span>
      </div>
      <div style={{ padding: 18, display: "flex", flexDirection: "column", gap: 10 }}>
        {fields.map((f, i) => (
          <div key={i} style={{ display: "grid", gridTemplateColumns: "130px 1fr 60px", alignItems: "center", gap: 10 }}>
            <span style={{ fontSize: 11.5, color: "var(--ink-4)" }}>{f.label}</span>
            <div style={{ padding: "7px 10px", borderRadius: 7, border: "1px solid var(--line)", background: "var(--bg-soft)", fontSize: 12.5, color: "var(--ink-1)", fontWeight: 500 }}>{f.value}</div>
            {f.auto && <span style={{ fontSize: 10, color: "var(--accent)", fontWeight: 600, background: "var(--accent-soft)", borderRadius: 99, padding: "2px 7px", textAlign: "center" }}>Auto</span>}
          </div>
        ))}
        <div style={{ marginTop: 8, display: "flex", gap: 8, alignItems: "center" }}>
          <div style={{ flex: 1, height: 34, borderRadius: 7, background: "var(--accent)", display: "flex", alignItems: "center", justifyContent: "center", gap: 6, fontSize: 12, fontWeight: 600, color: "#fff" }}>
            <svg width="13" height="13" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2.5"><path d="M22 16.92v3a2 2 0 0 1-2.18 2 19.79 19.79 0 0 1-8.63-3.07A19.5 19.5 0 0 1 4.69 15.1a19.79 19.79 0 0 1-3.07-8.67A2 2 0 0 1 3.6 4.18h3a2 2 0 0 1 2 1.72c.127.96.361 1.903.7 2.81a2 2 0 0 1-.45 2.11L7.91 11.91a16 16 0 0 0 6 6l.91-.91a2 2 0 0 1 2.11-.45c.907.339 1.85.573 2.81.7A2 2 0 0 1 21.73 19a2 2 0 0 0 .27-.08z"/></svg>
            Route for approval
          </div>
          <div style={{ width: 34, height: 34, borderRadius: 7, border: "1px solid var(--line)", display: "flex", alignItems: "center", justifyContent: "center" }}>
            <svg width="14" height="14" viewBox="0 0 24 24" fill="none" stroke="var(--ink-3)" strokeWidth="2"><path d="M21 15v4a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2v-4"/><polyline points="7 10 12 15 17 10"/><line x1="12" y1="15" x2="12" y2="3"/></svg>
          </div>
        </div>
      </div>
    </div>
  );
}

function HRRepositoryMockup() {
  const contracts = [
    { name: "Emma Lindqvist", type: "Offer Letter", typeKey: "Offer", date: "12 Apr 2026", team: "Product" },
    { name: "Mikael Strand", type: "Transfer Agreement", typeKey: "Transfer", date: "3 Mar 2026", team: "Engineering" },
    { name: "Sara Öberg", type: "Appraisal 2025", typeKey: "Appraisal", date: "15 Jan 2026", team: "Design" },
    { name: "Jonas Falk", type: "Contractor MSA", typeKey: "Contractor", date: "22 Nov 2025", team: "Legal" },
  ];
  const typeColor = { Offer: "#7B61FF", Transfer: "#0EA5E9", Appraisal: "#16A34A", Contractor: "#B97A00" };
  const typeBg = { Offer: "rgba(110,86,207,0.08)", Transfer: "rgba(14,165,233,0.08)", Appraisal: "rgba(22,163,74,0.08)", Contractor: "rgba(185,122,0,0.08)" };
  return (
    <div style={{ background: "var(--bg-elevated)", borderRadius: 14, border: "1px solid var(--line)", overflow: "hidden", fontFamily: "var(--font-sans)", fontSize: 13 }}>
      <div style={{ padding: "12px 18px", borderBottom: "1px solid var(--line)", display: "flex", alignItems: "center", gap: 10 }}>
        <div style={{ flex: 1, display: "flex", alignItems: "center", gap: 8, padding: "6px 10px", borderRadius: 7, border: "1px solid var(--line)", background: "var(--bg-soft)", fontSize: 12, color: "var(--ink-4)" }}>
          <svg width="12" height="12" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2"><circle cx="11" cy="11" r="7"/><line x1="21" y1="21" x2="16.65" y2="16.65"/></svg>
          Search contracts…
        </div>
        <div style={{ display: "flex", gap: 6 }}>
          {["All types", "Team"].map((f, i) => (
            <div key={i} style={{ padding: "5px 10px", borderRadius: 7, border: "1px solid var(--line)", fontSize: 11, color: "var(--ink-3)", background: "var(--bg-soft)" }}>{f}</div>
          ))}
        </div>
      </div>
      <div style={{ display: "grid", gridTemplateColumns: "1.2fr 1.3fr 90px 80px", padding: "6px 18px", fontSize: 10.5, fontWeight: 600, color: "var(--ink-4)", letterSpacing: "0.05em", textTransform: "uppercase", background: "var(--bg-soft)", borderBottom: "1px solid var(--line)" }}>
        <span>Contract</span><span>Type</span><span>Date</span><span>Team</span>
      </div>
      {contracts.map((c, i) => (
        <div key={i} style={{ display: "grid", gridTemplateColumns: "1.2fr 1.3fr 90px 80px", padding: "10px 18px", borderBottom: i < contracts.length - 1 ? "1px solid var(--line)" : "none", alignItems: "center" }}>
          <span style={{ fontSize: 12.5, fontWeight: 500, color: "var(--ink-1)" }}>{c.name}</span>
          <div>
            <span style={{
              fontSize: 10.5,
              fontWeight: 500,
              color: typeColor[c.typeKey],
              background: typeBg[c.typeKey],
              padding: "2px 8px",
              borderRadius: 99,
              border: `1px solid ${typeColor[c.typeKey]}15`
            }}>
              {c.type}
            </span>
          </div>
          <span style={{ fontSize: 11.5, color: "var(--ink-4)" }}>{c.date}</span>
          <span style={{ fontSize: 11.5, color: "var(--ink-3)" }}>{c.team}</span>
        </div>
      ))}
    </div>
  );
}

function HRReviewMockup() {
  const events = [
    { type: "system", msg: "Offer letter for Emma Lindqvist sent for review" },
    { initials: "LGL", color: "#16A34A", label: "Legal", time: "1 hour ago", msg: "Non-compete clause updated to align with SE law. Ready for Finance sign-off." },
    { initials: "FIN", color: "#0EA5E9", label: "Finance", time: "3 hours ago", msg: "Compensation approved. Equity tier confirmed against option pool." },
  ];
  return (
    <div style={{ background: "var(--bg-elevated)", borderRadius: 14, border: "1px solid var(--line)", overflow: "hidden", fontFamily: "var(--font-sans)", fontSize: 13 }}>
      <div style={{ padding: "12px 18px", borderBottom: "1px solid var(--line)" }}>
        <span style={{ fontSize: 10.5, fontWeight: 700, letterSpacing: "0.09em", textTransform: "uppercase", color: "var(--ink-4)" }}>Activity Log · Emma Lindqvist Offer</span>
      </div>
      <div style={{ display: "flex", flexDirection: "column", gap: 2, padding: "8px 0" }}>
        {events.map((ev, i) => (
          ev.type === "system" ? (
            <div key={i} style={{ display: "flex", alignItems: "center", gap: 10, padding: "10px 18px", borderBottom: "1px solid var(--line)" }}>
              <div style={{ width: 28, height: 28, borderRadius: 7, background: "var(--bg-soft)", border: "1px solid var(--line)", display: "flex", alignItems: "center", justifyContent: "center", flexShrink: 0 }}>
                <svg width="13" height="13" viewBox="0 0 24 24" fill="none" stroke="var(--ink-3)" strokeWidth="2"><path d="M14 2H6a2 2 0 0 0-2 2v16a2 2 0 0 0 2 2h12a2 2 0 0 0 2-2V8z"/><polyline points="14 2 14 8 20 8"/></svg>
              </div>
              <span style={{ fontSize: 12.5, color: "var(--ink-2)" }}>{ev.msg}</span>
            </div>
          ) : (
            <div key={i} style={{ padding: "12px 18px", borderBottom: i < events.length - 1 ? "1px solid var(--line)" : "none" }}>
              <div style={{ display: "flex", alignItems: "center", gap: 8, marginBottom: 6 }}>
                <div style={{ width: 26, height: 26, borderRadius: "50%", background: ev.color, display: "flex", alignItems: "center", justifyContent: "center", fontSize: 8.5, fontWeight: 700, color: "#fff", flexShrink: 0 }}>{ev.initials}</div>
                <span style={{ fontSize: 12, fontWeight: 700, color: "var(--ink-1)", letterSpacing: "0.04em", textTransform: "uppercase" }}>{ev.label}</span>
                <span style={{ fontSize: 11, color: "var(--ink-4)" }}>{ev.time}</span>
              </div>
              <p style={{ margin: "0 0 0 34px", fontSize: 12.5, color: "var(--ink-2)", lineHeight: 1.55 }}>{ev.msg}</p>
            </div>
          )
        ))}
      </div>
    </div>
  );
}

function HRSignatureMockup() {
  const signers = [
    { name: "Emma Lindqvist", role: "New hire", status: "Signed", time: "Today, 09:14", color: "#16A34A" },
    { name: "Saga Bergquist", role: "Chief People Officer", status: "Signed", time: "Today, 08:52", color: "#16A34A" },
    { name: "Anders Holm", role: "Hiring Manager", status: "Pending", time: "Awaiting", color: "#B97A00" },
  ];
  return (
    <div style={{ background: "var(--bg-elevated)", borderRadius: 14, border: "1px solid var(--line)", overflow: "hidden", fontFamily: "var(--font-sans)", fontSize: 13 }}>
      <div style={{ padding: "12px 18px", borderBottom: "1px solid var(--line)", display: "flex", alignItems: "center", justifyContent: "space-between" }}>
        <span style={{ fontWeight: 600, color: "var(--ink-1)" }}>Emma Lindqvist, Offer Letter</span>
        <span style={{ fontSize: 10.5, color: "#B97A00", background: "rgba(185,122,0,0.08)", border: "1px solid rgba(185,122,0,0.2)", borderRadius: 99, padding: "2px 8px", fontWeight: 500 }}>1 pending</span>
      </div>
      <div style={{ padding: "14px 18px", display: "flex", flexDirection: "column", gap: 10 }}>
        {signers.map((s, i) => (
          <div key={i} style={{ display: "flex", alignItems: "center", gap: 12, padding: "10px 14px", borderRadius: 9, border: "1px solid var(--line)", background: "var(--bg-soft)" }}>
            <div style={{ width: 32, height: 32, borderRadius: "50%", background: s.color + "22", display: "flex", alignItems: "center", justifyContent: "center", fontSize: 11, fontWeight: 700, color: s.color, flexShrink: 0 }}>
              {s.name.split(" ").map(n => n[0]).join("")}
            </div>
            <div style={{ flex: 1 }}>
              <div style={{ fontSize: 12.5, fontWeight: 600, color: "var(--ink-1)" }}>{s.name}</div>
              <div style={{ fontSize: 11, color: "var(--ink-4)" }}>{s.role}</div>
            </div>
            <div style={{ textAlign: "right" }}>
              <div style={{ fontSize: 11.5, fontWeight: 600, color: s.color }}>{s.status}</div>
              <div style={{ fontSize: 10.5, color: "var(--ink-4)" }}>{s.time}</div>
            </div>
          </div>
        ))}
      </div>
      <div style={{ padding: "0 18px 14px" }}>
        <div style={{ background: "var(--accent)", borderRadius: 8, padding: "8px 0", textAlign: "center", fontSize: 11.5, fontWeight: 700, color: "#fff", display: "flex", alignItems: "center", justifyContent: "center", gap: 6 }}>
          <svg width="13" height="13" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2.5"><polyline points="20 6 9 17 4 12"/></svg>
          Legally binding · ContractControl eSignature
        </div>
      </div>
    </div>
  );
}

function FinanceApprovalMockup() {
  const branchColor = "#7B61FF";
  const Branch = ({ label, labelColor = branchColor, labelBg = "rgba(110,86,207,0.10)", children }) => (
    <div style={{ display: "flex", alignItems: "center", gap: 0, marginBottom: 14 }}>
      {/* Branch label pill */}
      <div style={{ minWidth: 110, display: "flex", justifyContent: "flex-end", paddingRight: 12 }}>
        <span style={{ fontSize: 11, fontWeight: 700, color: labelColor, background: labelBg, border: `1.5px solid ${labelColor}44`, borderRadius: 6, padding: "4px 10px", whiteSpace: "nowrap" }}>{label}</span>
      </div>
      {/* Connector */}
      <div style={{ width: 20, height: 1.5, background: "var(--line)", flexShrink: 0 }} />
      {/* Card */}
      {children}
    </div>
  );
  const ApprovalCard = ({ approver, team }) => (
    <div style={{ flex: 1, background: "var(--bg-elevated)", border: "1px solid var(--line)", borderRadius: 10, padding: "10px 14px" }}>
      <div style={{ fontSize: 9.5, fontWeight: 700, letterSpacing: "0.09em", textTransform: "uppercase", color: "var(--ink-4)", marginBottom: 7 }}>Approval required</div>
      <div style={{ display: "flex", alignItems: "center", gap: 8 }}>
        <div style={{ width: 24, height: 24, borderRadius: "50%", background: "linear-gradient(135deg, #C7D2FE, #7B61FF)", flexShrink: 0 }} />
        <span style={{ fontSize: 12.5, fontWeight: 600, color: "var(--ink-1)" }}>{approver}</span>
        <span style={{ fontSize: 10.5, color: "var(--ink-4)", background: "var(--bg-soft)", border: "1px solid var(--line)", borderRadius: 4, padding: "1px 6px" }}>{team}</span>
      </div>
    </div>
  );
  const SignCard = () => (
    <div style={{ flex: 1, background: "var(--bg-elevated)", border: "1px solid var(--line)", borderRadius: 10, padding: "10px 14px", display: "flex", alignItems: "center", gap: 8 }}>
      <svg width="14" height="14" viewBox="0 0 24 24" fill="none" stroke="var(--ink-3)" strokeWidth="2"><path d="M12 20h9"/><path d="M16.5 3.5a2.121 2.121 0 0 1 3 3L7 19l-4 1 1-4L16.5 3.5z"/></svg>
      <span style={{ fontSize: 12.5, fontWeight: 500, color: "var(--ink-2)" }}>Send for signing</span>
    </div>
  );
  return (
    <div style={{ background: "var(--bg-soft)", borderRadius: 14, border: "1px solid var(--line)", padding: "20px 16px", fontFamily: "var(--font-sans)", position: "relative" }}>
      {/* Vertical spine */}
      <div style={{ position: "absolute", left: 109, top: 28, bottom: 28, width: 1.5, background: "var(--line)" }} />
      <Branch label="> €50,000">
        <ApprovalCard approver="CFO" team="Finance" />
      </Branch>
      <Branch label="€25k - €50k">
        <ApprovalCard approver="Head of Finance" team="Finance" />
      </Branch>
      <Branch label="Else" labelColor="var(--ink-3)" labelBg="var(--bg)" >
        <SignCard />
      </Branch>
    </div>
  );
}

function FinanceRepositoryMockup() {
  const contracts = [
    { name: "Helix Group", type: "SLA", value: "€48,000", renewal: "23 Mar 2026", alert: true },
    { name: "Northwind AB", type: "MSA", value: "€120,000", renewal: "31 Dec 2026", alert: false },
    { name: "Kvist Systems", type: "Licence", value: "€19,200", renewal: "17 Dec 2026", alert: false },
    { name: "Solstice Ventures", type: "NDA", value: "€0", renewal: "9 Sep 2026", alert: false },
  ];
  return (
    <div style={{ background: "var(--bg-elevated)", borderRadius: 14, border: "1px solid var(--line)", overflow: "hidden", fontFamily: "var(--font-sans)", fontSize: 13 }}>
      <div style={{ padding: "12px 18px", borderBottom: "1px solid var(--line)", display: "flex", alignItems: "center", gap: 10 }}>
        <div style={{ flex: 1, display: "flex", alignItems: "center", gap: 8, padding: "6px 10px", borderRadius: 7, border: "1px solid var(--line)", background: "var(--bg-soft)", fontSize: 12, color: "var(--ink-4)" }}>
          <svg width="12" height="12" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2"><circle cx="11" cy="11" r="7"/><line x1="21" y1="21" x2="16.65" y2="16.65"/></svg>
          Search contracts, terms, values…
        </div>
        <div style={{ padding: "5px 10px", borderRadius: 7, border: "1px solid rgba(225,29,72,0.3)", fontSize: 11, color: "#E11D48", background: "rgba(225,29,72,0.06)", fontWeight: 500 }}>1 alert</div>
      </div>
      <div style={{ display: "grid", gridTemplateColumns: "1fr 80px 100px 28px", padding: "6px 18px", fontSize: 10.5, fontWeight: 600, color: "var(--ink-4)", letterSpacing: "0.05em", textTransform: "uppercase", background: "var(--bg-soft)", borderBottom: "1px solid var(--line)" }}>
        <span>Contract</span><span>Value</span><span>Renewal</span><span></span>
      </div>
      {contracts.map((c, i) => (
        <div key={i} style={{ display: "grid", gridTemplateColumns: "1fr 80px 100px 28px", padding: "10px 18px", borderBottom: i < contracts.length - 1 ? "1px solid var(--line)" : "none", alignItems: "center" }}>
          <div>
            <div style={{ fontSize: 12.5, fontWeight: 500, color: "var(--ink-1)" }}>{c.name}</div>
            <span style={{ fontSize: 10, fontWeight: 600, color: "var(--ink-4)", background: "var(--bg-soft)", border: "1px solid var(--line)", borderRadius: 4, padding: "1px 5px", marginTop: 3, display: "inline-block" }}>{c.type}</span>
          </div>
          <span style={{ fontSize: 12, fontWeight: 600, color: "var(--ink-2)" }}>{c.value}</span>
          <span style={{ fontSize: 11.5, color: c.alert ? "#E11D48" : "var(--ink-4)", fontWeight: c.alert ? 600 : 400 }}>{c.renewal}</span>
          {c.alert ? <svg width="14" height="14" viewBox="0 0 24 24" fill="none" stroke="#E11D48" strokeWidth="2.5"><circle cx="12" cy="12" r="10"/><line x1="12" y1="8" x2="12" y2="12"/><line x1="12" y1="16" x2="12.01" y2="16"/></svg> : <span />}
        </div>
      ))}
    </div>
  );
}

function FinanceAnalyticsMockup() {
  const months = ["Jan", "Feb", "Mar", "Apr", "May", "Jun"];
  const revenue = [62, 75, 68, 88, 95, 104];
  const spend = [34, 38, 42, 39, 44, 48];
  const maxVal = 120;
  return (
    <div style={{ background: "var(--bg-elevated)", borderRadius: 16, border: "1px solid var(--line)", overflow: "hidden", fontFamily: "var(--font-sans)", fontSize: 13 }}>
      {/* Dark header */}
      <div style={{ padding: "16px 20px 14px", borderBottom: "1px solid var(--line)" }}>
        <div style={{ display: "flex", alignItems: "center", justifyContent: "space-between", marginBottom: 14 }}>
          <div>
            <div style={{ fontSize: 10.5, fontWeight: 700, letterSpacing: "0.09em", textTransform: "uppercase", color: "var(--ink-4)", marginBottom: 3 }}>Analytics</div>
            <div style={{ fontSize: 14, fontWeight: 600, color: "var(--ink-1)" }}>Revenue & spend forecast</div>
          </div>
          <div style={{ display: "flex", gap: 10 }}>
            {[{ label: "Revenue", color: "#7B61FF" }, { label: "Spend", color: "#0EA5E9" }].map((l, i) => (
              <div key={i} style={{ display: "flex", alignItems: "center", gap: 5, fontSize: 11, color: "var(--ink-4)" }}>
                <div style={{ width: 8, height: 8, borderRadius: 2, background: l.color }} />{l.label}
              </div>
            ))}
          </div>
        </div>
        {/* KPI row */}
        <div style={{ display: "flex", gap: 24 }}>
          {[
            { label: "Total revenue", value: "€492k", color: "#7B61FF", trend: "+12%" },
            { label: "Total spend", value: "€245k", color: "#0EA5E9", trend: "+6%" },
            { label: "Renewals due", value: "8", sub: "this quarter", color: "#B97A00" },
          ].map((s, i) => (
            <div key={i}>
              <div style={{ display: "flex", alignItems: "baseline", gap: 6 }}>
                <span style={{ fontSize: 18, fontWeight: 700, color: s.color, letterSpacing: "-0.02em" }}>{s.value}</span>
                {s.trend && <span style={{ fontSize: 10.5, fontWeight: 600, color: "#16A34A", background: "rgba(22,163,74,0.1)", borderRadius: 4, padding: "1px 5px" }}>{s.trend}</span>}
                {s.sub && <span style={{ fontSize: 11, color: "var(--ink-4)" }}>{s.sub}</span>}
              </div>
              <div style={{ fontSize: 10.5, color: "var(--ink-4)", marginTop: 1 }}>{s.label}</div>
            </div>
          ))}
        </div>
      </div>
      {/* Chart area */}
      <div style={{ padding: "16px 20px 14px", background: "var(--bg-soft)" }}>
        <div style={{ position: "relative", height: 90 }}>
          {[100, 75, 50, 25].map((pct, i) => (
            <div key={i} style={{ position: "absolute", left: 0, right: 0, bottom: `${pct * 0.85}%`, borderTop: "1px solid var(--line)", display: "flex", alignItems: "center" }}>
              <span style={{ fontSize: 9, color: "var(--ink-5)", marginRight: 6, transform: "translateY(-50%)", minWidth: 24, textAlign: "right" }}>{Math.round(maxVal * pct / 100)}k</span>
            </div>
          ))}
          <div style={{ position: "absolute", inset: 0, paddingLeft: 30, display: "flex", alignItems: "flex-end", gap: 6 }}>
            {months.map((m, i) => (
              <div key={i} style={{ flex: 1, display: "flex", flexDirection: "column", alignItems: "center", gap: 3 }}>
                <div style={{ width: "100%", display: "flex", gap: 2, alignItems: "flex-end", height: 80 }}>
                  <div style={{ flex: 1, background: "linear-gradient(180deg, #9B7BFF 0%, #7B61FF 100%)", borderRadius: "3px 3px 0 0", height: `${(revenue[i] / maxVal) * 80}px` }} />
                  <div style={{ flex: 1, background: "linear-gradient(180deg, #38BDF8 0%, #0284C7 100%)", borderRadius: "3px 3px 0 0", height: `${(spend[i] / maxVal) * 80}px`, opacity: 0.85 }} />
                </div>
                <span style={{ fontSize: 9.5, color: "var(--ink-4)" }}>{m}</span>
              </div>
            ))}
          </div>
        </div>
      </div>
    </div>
  );
}

function FinanceTermsInvoiceMockup() {
  const rows = [
    { contract: "Northwind AB", type: "MSA", contracted: "€120,000", invoiced: "€120,000", match: true },
    { contract: "Helix Group", type: "SLA", contracted: "€48,000", invoiced: "€51,200", match: false },
    { contract: "Kvist Systems", type: "Licence", contracted: "€19,200", invoiced: "€19,200", match: true },
    { contract: "Solstice Ventures", type: "Services", contracted: "€32,500", invoiced: "€28,000", match: false },
  ];
  return (
    <div style={{ background: "var(--bg-elevated)", borderRadius: 14, border: "1px solid var(--line)", overflow: "hidden", fontFamily: "var(--font-sans)", fontSize: 13 }}>
      <div style={{ padding: "12px 18px", borderBottom: "1px solid var(--line)", display: "flex", alignItems: "center", justifyContent: "space-between" }}>
        <span style={{ fontWeight: 600, color: "var(--ink-1)" }}>Contract vs. invoice amount</span>
        <span style={{ fontSize: 11, color: "#E11D48", background: "rgba(225,29,72,0.08)", border: "1px solid rgba(225,29,72,0.2)", borderRadius: 99, padding: "2px 8px", fontWeight: 500 }}>2 mismatches</span>
      </div>
      <div style={{ display: "grid", gridTemplateColumns: "1fr 90px 90px 28px", padding: "6px 18px", fontSize: 10.5, fontWeight: 600, color: "var(--ink-4)", letterSpacing: "0.05em", textTransform: "uppercase", background: "var(--bg-soft)", borderBottom: "1px solid var(--line)" }}>
        <span>Contract</span><span>Contracted</span><span>Invoiced</span><span></span>
      </div>
      {rows.map((r, i) => (
        <div key={i} style={{ display: "grid", gridTemplateColumns: "1fr 90px 90px 28px", padding: "10px 18px", borderBottom: i < rows.length - 1 ? "1px solid var(--line)" : "none", alignItems: "center", background: r.match ? "transparent" : "rgba(225,29,72,0.03)" }}>
          <div>
            <div style={{ fontSize: 12.5, fontWeight: 500, color: "var(--ink-1)" }}>{r.contract}</div>
            <span style={{ fontSize: 10, fontWeight: 600, color: "var(--ink-4)", background: "var(--bg-soft)", border: "1px solid var(--line)", borderRadius: 4, padding: "1px 5px", marginTop: 3, display: "inline-block" }}>{r.type}</span>
          </div>
          <span style={{ fontSize: 11.5, color: "var(--ink-3)" }}>{r.contracted}</span>
          <span style={{ fontSize: 11.5, color: r.match ? "var(--ink-3)" : "#E11D48", fontWeight: r.match ? 400 : 600 }}>{r.invoiced}</span>
          {r.match
            ? <svg width="14" height="14" viewBox="0 0 24 24" fill="none" stroke="#16A34A" strokeWidth="2.5"><polyline points="20 6 9 17 4 12"/></svg>
            : <svg width="14" height="14" viewBox="0 0 24 24" fill="none" stroke="#E11D48" strokeWidth="2.5"><line x1="18" y1="6" x2="6" y2="18"/><line x1="6" y1="6" x2="18" y2="18"/></svg>
          }
        </div>
      ))}
    </div>
  );
}

function LegalIntakeMockup() {
  const requests = [
    { name: "NDA, Acme Corp", from: "Sales", status: "Auto-drafted", statusColor: "#16A34A", time: "2 min ago" },
    { name: "MSA, Brevia Group", from: "Procurement", status: "Pending review", statusColor: "#B97A00", time: "14 min ago" },
    { name: "DPA, Nordia Infra", from: "IT", status: "Auto-drafted", statusColor: "#16A34A", time: "1h ago" },
    { name: "Consulting, Solstice", from: "Finance", status: "Escalated", statusColor: "#DC2626", time: "3h ago" },
  ];
  return (
    <div className="mockup-frame" style={{ padding: 0, overflow: "hidden" }}>
      <div style={{ padding: "14px 18px", borderBottom: "1px solid var(--line)", display: "flex", alignItems: "center", gap: 10 }}>
        <span style={{ fontSize: 12, fontWeight: 600, color: "var(--ink-1)" }}>Contract requests</span>
        <span style={{ marginLeft: "auto", fontSize: 11, color: "var(--ink-4)" }}>Today · 4 new</span>
      </div>
      <div style={{ padding: "4px 0" }}>
        {requests.map((r, i) => (
          <div key={i} style={{ display: "flex", alignItems: "center", gap: 12, padding: "11px 18px", borderBottom: i < requests.length - 1 ? "1px solid var(--line)" : "none", background: i === 0 ? "var(--accent-soft)" : "transparent" }}>
            <div style={{ flex: 1 }}>
              <div style={{ fontSize: 12.5, fontWeight: 500, color: "var(--ink-1)" }}>{r.name}</div>
              <div style={{ fontSize: 10.5, color: "var(--ink-4)", marginTop: 2 }}>Requested by {r.from} · {r.time}</div>
            </div>
            <span style={{ fontSize: 10.5, fontWeight: 500, padding: "2px 8px", borderRadius: 99, background: r.statusColor + "14", color: r.statusColor }}>{r.status}</span>
          </div>
        ))}
      </div>
      <div style={{ padding: "12px 18px", borderTop: "1px solid var(--line)", display: "flex", alignItems: "center", justifyContent: "space-between" }}>
        <div style={{ display: "flex", alignItems: "center", gap: 6 }}>
          <svg width="12" height="12" viewBox="0 0 24 24" fill="none" stroke="var(--success)" strokeWidth="2.5"><polyline points="20 6 9 17 4 12"/></svg>
          <span style={{ fontSize: 11.5, color: "var(--ink-3)" }}>2 of 4 handled automatically</span>
        </div>
        <span style={{ fontSize: 11, color: "var(--accent)", fontWeight: 500 }}>View all</span>
      </div>
    </div>
  );
}

function LegalRepositoryMockup() {
  const rows = [
    { name: "Volantis AB, MSA", party: "Volantis AB", type: "MSA", date: "Dec 31, 2026", status: "Active" },
    { name: "Brevia Group, NDA", party: "Brevia Group", type: "NDA", date: "Jun 14, 2026", status: "Active" },
    { name: "Nordia Infra, DPA", party: "Nordia Infra", type: "DPA", date: "Mar 1, 2027", status: "Active" },
    { name: "Solstice Ventures, SLA", party: "Solstice Ventures", type: "SLA", date: "Sep 9, 2026", status: "Expiring" },
  ];
  return (
    <div className="mockup-frame" style={{ padding: 0, overflow: "hidden" }}>
      <div style={{ padding: "12px 16px", borderBottom: "1px solid var(--line)", display: "flex", alignItems: "center", gap: 8 }}>
        <div style={{ flex: 1, display: "flex", alignItems: "center", gap: 8, background: "var(--bg-soft)", border: "1px solid var(--line)", borderRadius: 8, padding: "6px 12px" }}>
          <svg width="12" height="12" viewBox="0 0 24 24" fill="none" stroke="var(--ink-4)" strokeWidth="2.5"><circle cx="11" cy="11" r="8"/><line x1="21" y1="21" x2="16.65" y2="16.65"/></svg>
          <span style={{ fontSize: 12, color: "var(--ink-4)" }}>Search by party, clause, or renewal date…</span>
        </div>
        <span style={{ fontSize: 11, color: "var(--ink-4)", flexShrink: 0 }}>47 contracts</span>
      </div>
      <div>
        <div style={{ display: "grid", gridTemplateColumns: "1fr 72px 90px 68px", padding: "8px 16px", borderBottom: "1px solid var(--line)" }}>
          {["Contract", "Type", "Renewal", "Status"].map(h => (
            <span key={h} style={{ fontSize: 10.5, fontWeight: 600, color: "var(--ink-4)", letterSpacing: "0.04em", textTransform: "uppercase" }}>{h}</span>
          ))}
        </div>
        {rows.map((r, i) => (
          <div key={i} style={{ display: "grid", gridTemplateColumns: "1fr 72px 90px 68px", padding: "11px 16px", borderBottom: i < rows.length - 1 ? "1px solid var(--line)" : "none", alignItems: "center", background: i === 0 ? "var(--accent-soft)" : "transparent" }}>
            <span style={{ fontSize: 12.5, fontWeight: 500, color: "var(--ink-1)" }}>{r.name}</span>
            <span style={{ fontSize: 11.5, color: "var(--ink-3)" }}>{r.type}</span>
            <span style={{ fontSize: 11.5, color: "var(--ink-3)" }}>{r.date}</span>
            <span style={{ fontSize: 10.5, fontWeight: 600, padding: "2px 8px", borderRadius: 99, background: r.status === "Expiring" ? "rgba(185,122,0,0.09)" : "rgba(22,163,74,0.08)", color: r.status === "Expiring" ? "#B97A00" : "#16A34A", display: "inline-block" }}>{r.status}</span>
          </div>
        ))}
      </div>
    </div>
  );
}

function LegalNegotiationMockup() {
  return (
    <div className="mockup-frame" style={{ padding: 0, overflow: "hidden" }}>
      <div style={{ padding: "12px 18px", borderBottom: "1px solid var(--line)", display: "flex", alignItems: "center", gap: 8 }}>
        <span style={{ fontSize: 12, fontWeight: 600, color: "var(--ink-1)" }}>Acme Corp, MSA v3</span>
        <span style={{ marginLeft: "auto", fontSize: 10.5, padding: "2px 8px", borderRadius: 99, background: "rgba(59,130,246,0.08)", color: "#3B82F6", fontWeight: 500 }}>In review</span>
      </div>
      <div style={{ padding: "16px 18px", display: "flex", flexDirection: "column", gap: 10 }}>
        <div style={{ fontSize: 12.5, color: "var(--ink-2)", lineHeight: 1.6 }}>
          <span>Payment terms shall be net </span>
          <span style={{ background: "rgba(185,122,0,0.12)", color: "#B97A00", textDecoration: "line-through", borderRadius: 3, padding: "0 2px" }}>60</span>
          <span style={{ background: "rgba(22,163,74,0.1)", color: "#16A34A", borderRadius: 3, padding: "0 2px", marginLeft: 3 }}>30</span>
          <span> days from invoice date.</span>
        </div>
        <div style={{ fontSize: 12.5, color: "var(--ink-2)", lineHeight: 1.6 }}>
          <span>Either party may terminate this agreement with </span>
          <span style={{ background: "rgba(185,122,0,0.12)", color: "#B97A00", textDecoration: "line-through", borderRadius: 3, padding: "0 2px" }}>90 days</span>
          <span style={{ background: "rgba(22,163,74,0.1)", color: "#16A34A", borderRadius: 3, padding: "0 2px", marginLeft: 3 }}>30 days</span>
          <span> written notice.</span>
        </div>
        <div style={{ marginTop: 6, padding: "10px 14px", background: "rgba(110,86,207,0.06)", borderLeft: "3px solid var(--accent)", borderRadius: "0 8px 8px 0" }}>
          <div style={{ display: "flex", alignItems: "center", gap: 8, marginBottom: 4 }}>
            <img src="https://images.unsplash.com/photo-1494790108377-be9c29b29330?auto=format&fit=crop&w=150&h=150&q=80" alt="Sara L." style={{ width: 18, height: 18, borderRadius: "50%", objectFit: "cover", flexShrink: 0 }} />
            <span style={{ fontSize: 11.5, fontWeight: 600, color: "var(--ink-1)" }}>Sara L.</span>
            <span style={{ fontSize: 11, color: "var(--ink-4)" }}>2 hrs ago</span>
          </div>
          <p style={{ fontSize: 12, color: "var(--ink-3)", margin: 0, lineHeight: 1.5 }}>Net 30 is our standard, flagged for approval before sending back.</p>
        </div>
      </div>
      <div style={{ padding: "10px 18px", borderTop: "1px solid var(--line)", display: "flex", gap: 8 }}>
        <div style={{ flex: 1, background: "var(--bg-soft)", border: "1px solid var(--line)", borderRadius: 8, padding: "7px 12px", fontSize: 12, color: "var(--ink-4)" }}>Add comment…</div>
        <button style={{ padding: "7px 14px", borderRadius: 8, border: "none", background: "var(--accent)", color: "#fff", fontSize: 12, cursor: "default", pointerEvents: "none" }}>Send</button>
      </div>
    </div>
  );
}

function TeamSolutionPage({ slug }) {
  const t = teamData[slug];
  if (!t) return null;
  return (
    <div>
      <section style={{ padding: "96px 0 56px" }}>
        <div className="container">
          <div style={{ maxWidth: 880, margin: "0 auto", textAlign: "center" }}>
            <span className="eyebrow fade-up">{t.eyebrow}</span>
            <h1 className="display fade-up" style={{ marginTop: 20, fontSize: "clamp(40px, 5.4vw, 72px)" }}>{t.title}</h1>
            <p className="lede fade-up" style={{ margin: "28px auto 0", textAlign: "center" }}>{t.lede}</p>
            <div className="fade-up" style={{ marginTop: 32, display: "flex", gap: 12, justifyContent: "center" }}>
              <a className="btn btn-primary btn-lg" href="/book-demo">Book demo <Icon name="arrow" size={14} /></a>
            </div>
          </div>
        </div>
      </section>

      <section className="section-tight">
        <div className="container">
          <div className="tick-rule" style={{ marginBottom: 8 }} />
          <div className="grid grid-3" style={{ gap: 0 }}>
            {t.metrics.map(([n, l], i) => (
              <div key={l} style={{ borderRight: i < t.metrics.length - 1 ? "1px solid var(--line)" : "none", padding: "0 24px" }}>
                <div className="metric">
                  <div className="num"><em>{n}</em></div>
                  <div className="label">{l}</div>
                </div>
              </div>
            ))}
          </div>
          <div className="tick-rule" style={{ marginTop: 8 }} />
        </div>
      </section>

      {t.plan && (
        <section className="section" style={{ background: "var(--bg-soft)", borderTop: "1px solid var(--line)", padding: "120px 0 96px" }}>
          <div className="container">
            <div style={{ textAlign: "center", maxWidth: 720, margin: "0 auto 64px" }}>
              <span className="eyebrow">{t.planEyebrow || "The path to speed"}</span>
              <h2 className="h-section" style={{ marginTop: 18, fontSize: "clamp(32px, 3.6vw, 44px)" }}>{t.planTitle}</h2>
              {t.planBody && <p className="lede" style={{ marginTop: 20, maxWidth: 600, marginLeft: "auto", marginRight: "auto" }}>{t.planBody}</p>}
            </div>
            <div style={{
              display: "grid",
              gridTemplateColumns: "1fr 1fr 1fr",
              gap: "32px",
              position: "relative"
            }} className="mob-stack">
              
              {/* Timeline connecting lines for desktop */}
              <div className="mob-hide" style={{
                position: "absolute",
                top: "70px",
                left: "15%",
                right: "15%",
                height: "1px",
                background: "linear-gradient(90deg, transparent, var(--line-strong) 20%, var(--line-strong) 80%, transparent)",
                zIndex: 1
              }} />

              {t.plan.map((step, i) => (
                <div key={i} className="card" style={{
                  padding: "36px 32px",
                  background: "var(--bg-elevated)",
                  border: "1px solid var(--line)",
                  borderRadius: "var(--r-xl)",
                  position: "relative",
                  zIndex: 2,
                  display: "flex",
                  flexDirection: "column",
                  height: "100%",
                  boxSizing: "border-box"
                }}>
                  {/* Number Badge */}
                  <div style={{
                    position: "absolute",
                    right: "32px",
                    top: "32px",
                    fontSize: "48px",
                    fontWeight: 800,
                    color: "var(--line-strong)",
                    opacity: 0.15,
                    fontFamily: "var(--font-sans)",
                    lineHeight: 1
                  }}>
                    {step.num}
                  </div>

                  {/* Icon Circle */}
                  <div style={{
                    width: "42px",
                    height: "42px",
                    borderRadius: "12px",
                    background: "var(--accent-soft)",
                    color: "var(--accent)",
                    display: "grid",
                    placeItems: "center",
                    marginBottom: "24px",
                    border: "1px solid rgba(123,97,255,0.15)"
                  }}>
                    {step.icon}
                  </div>

                  <div style={{ flex: 1 }}>
                    {/* Step Tag */}
                    <div style={{
                      fontSize: "10px",
                      fontWeight: 700,
                      color: "var(--accent)",
                      letterSpacing: "0.1em",
                      textTransform: "uppercase",
                      marginBottom: "8px"
                    }}>
                      {step.tag}
                    </div>

                    <h3 className="h-card" style={{ fontSize: "20px", marginBottom: "14px", color: "var(--ink-1)", fontWeight: 600 }}>
                      {step.title}
                    </h3>
                    
                    <p style={{ fontSize: "14px", color: "var(--ink-3)", lineHeight: 1.65, margin: 0 }}>
                      {step.desc}
                    </p>
                  </div>
                </div>
              ))}
            </div>
          </div>
        </section>
      )}

      {t.features && (
        <section className="section" style={{ background: "var(--bg-soft)", borderTop: "1px solid var(--line)", borderBottom: "1px solid var(--line)" }}>
          <div className="container">
            <h2 className="h-section" style={{ textAlign: "center", maxWidth: 720, margin: "0 auto 64px" }}>{t.featuresTitle}</h2>
            <div className="grid grid-3" style={{ gap: 0 }}>
              {t.features.map((f, i) => (
                <div key={i} style={{ padding: "0 40px 0 0", borderRight: i < t.features.length - 1 ? "1px solid var(--line)" : "none", marginRight: i < t.features.length - 1 ? 40 : 0 }}>
                  <div style={{ width: 32, height: 3, borderRadius: 99, background: "var(--accent)", marginBottom: 28 }} />
                  <div style={{ fontSize: 11, fontWeight: 600, letterSpacing: "0.1em", color: "var(--accent)", textTransform: "uppercase", marginBottom: 20 }}>0{i + 1}</div>
                  <div style={{ fontSize: 17, fontWeight: 600, color: "var(--ink-1)", marginBottom: 12, lineHeight: 1.3, letterSpacing: "-0.01em" }}>{f.title}</div>
                  <p style={{ fontSize: 14, color: "var(--ink-3)", lineHeight: 1.7, margin: 0 }}>{f.desc}</p>
                </div>
              ))}
            </div>
          </div>
        </section>
      )}

      {t.modulesHeading && (
        <section className="section" style={{ paddingBottom: 0 }}>
          <div className="container" style={{ textAlign: "center" }}>
            <h2 className="h-section" style={{ maxWidth: 680, margin: "0 auto" }}>{t.modulesHeading}</h2>
          </div>
        </section>
      )}

      {t.modules && t.modules.map((m, i) => (
        <section key={i} className="section" style={m.flip ? { background: "var(--bg-soft)", borderTop: "1px solid var(--line)", borderBottom: "1px solid var(--line)" } : {}}>
          <div className="container">
            <div className={"feat-grid" + (m.flip ? " feat-grid--flip" : "")}>
              <div>
                <span className="eyebrow">{m.eyebrow}</span>
                <h2 className="h-section" style={{ marginTop: 16, marginBottom: 20 }} dangerouslySetInnerHTML={{ __html: m.title }} />
                <p className="lede" style={{ marginBottom: 24 }}>{m.body}</p>
                {m.bullets && (
                  <div style={{ display: "flex", flexDirection: "column", gap: 14 }}>
                    {m.bullets.map((b, j) => (
                      <div key={j} style={{ display: "flex", gap: 12, alignItems: "flex-start" }}>
                        <span style={{ flex: "0 0 16px", marginTop: 3, color: "var(--accent)" }}>
                          <svg width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2.5"><polyline points="20 6 9 17 4 12"/></svg>
                        </span>
                        <p style={{ fontSize: 14.5, color: "var(--ink-2)", lineHeight: 1.55, margin: 0 }}>{b}</p>
                      </div>
                    ))}
                  </div>
                )}
                {m.ctaLabel && m.ctaHref && (
                  <a href={m.ctaHref} className="btn-explore" style={{ marginTop: 28 }}>
                    {m.ctaLabel} <Icon name="arrow" size={13} />
                  </a>
                )}
              </div>
              <div>
                {m.mockup === "legal-intake" && (
                  <div style={{ background: "linear-gradient(135deg, rgba(124,92,211,0.12) 0%, rgba(124,92,211,0.06) 100%)", borderRadius: 20, padding: 24, border: "1px solid rgba(124,92,211,0.12)" }}>
                    <LegalIntakeMockup />
                  </div>
                )}
                {m.mockup === "repository-search" && (
                  <div style={{ background: "linear-gradient(135deg, rgba(124,92,211,0.12) 0%, rgba(124,92,211,0.06) 100%)", borderRadius: 20, padding: 24, border: "1px solid rgba(124,92,211,0.12)" }}>
                    <LegalRepositoryMockup />
                  </div>
                )}
                {m.mockup === "negotiation-redline" && (
                  <div style={{ background: "linear-gradient(135deg, rgba(124,92,211,0.12) 0%, rgba(124,92,211,0.06) 100%)", borderRadius: 20, padding: 24, border: "1px solid rgba(124,92,211,0.12)" }}>
                    <LegalNegotiationMockup />
                  </div>
                )}
                {m.mockup === "sales-self-serve" && (
                  <div style={{ background: "linear-gradient(135deg, rgba(124,92,211,0.12) 0%, rgba(124,92,211,0.06) 100%)", borderRadius: 20, padding: 24, border: "1px solid rgba(124,92,211,0.12)" }}>
                    <SalesSelfServeMockup />
                  </div>
                )}
                {m.mockup === "sales-negotiation" && (
                  <div style={{ background: "linear-gradient(135deg, rgba(124,92,211,0.12) 0%, rgba(124,92,211,0.06) 100%)", borderRadius: 20, padding: 24, border: "1px solid rgba(124,92,211,0.12)" }}>
                    <SalesNegotiationMockup />
                  </div>
                )}
                {m.mockup === "sales-engagement" && (
                  <div style={{ background: "linear-gradient(135deg, rgba(124,92,211,0.12) 0%, rgba(124,92,211,0.06) 100%)", borderRadius: 20, padding: 24, border: "1px solid rgba(124,92,211,0.12)" }}>
                    <SalesEngagementMockup />
                  </div>
                )}
                {m.mockup === "sales-signature" && (
                  <div style={{ background: "linear-gradient(135deg, rgba(124,92,211,0.12) 0%, rgba(124,92,211,0.06) 100%)", borderRadius: 20, padding: 24, border: "1px solid rgba(124,92,211,0.12)" }}>
                    <SalesSignatureMockup />
                  </div>
                )}
                {m.mockup === "sales-cpq" && (
                  <div style={{ background: "linear-gradient(135deg, rgba(124,92,211,0.12) 0%, rgba(124,92,211,0.06) 100%)", borderRadius: 20, padding: 24, border: "1px solid rgba(124,92,211,0.12)" }}>
                    <SalesCPQMockup />
                  </div>
                )}
                {m.mockup === "procurement-approval" && (
                  <div style={{ background: "linear-gradient(135deg, rgba(124,92,211,0.12) 0%, rgba(124,92,211,0.06) 100%)", borderRadius: 20, padding: 24, border: "1px solid rgba(124,92,211,0.12)" }}>
                    <ProcurementApprovalMockup />
                  </div>
                )}
                {m.mockup === "procurement-repository" && (
                  <div style={{ background: "linear-gradient(135deg, rgba(124,92,211,0.12) 0%, rgba(124,92,211,0.06) 100%)", borderRadius: 20, padding: 24, border: "1px solid rgba(124,92,211,0.12)" }}>
                    <ProcurementRepositoryMockup />
                  </div>
                )}
                {m.mockup === "procurement-collaboration" && (
                  <div style={{ background: "linear-gradient(135deg, rgba(124,92,211,0.12) 0%, rgba(124,92,211,0.06) 100%)", borderRadius: 20, padding: 24, border: "1px solid rgba(124,92,211,0.12)" }}>
                    <ProcurementCollaborationMockup />
                  </div>
                )}
                {m.mockup === "hr-intake" && (
                  <div style={{ background: "linear-gradient(135deg, rgba(124,92,211,0.12) 0%, rgba(124,92,211,0.06) 100%)", borderRadius: 20, padding: 24, border: "1px solid rgba(124,92,211,0.12)" }}>
                    <HRIntakeMockup />
                  </div>
                )}
                {m.mockup === "hr-repository" && (
                  <div style={{ background: "linear-gradient(135deg, rgba(124,92,211,0.12) 0%, rgba(124,92,211,0.06) 100%)", borderRadius: 20, padding: 24, border: "1px solid rgba(124,92,211,0.12)" }}>
                    <HRRepositoryMockup />
                  </div>
                )}
                {m.mockup === "hr-review" && (
                  <div style={{ background: "linear-gradient(135deg, rgba(124,92,211,0.12) 0%, rgba(124,92,211,0.06) 100%)", borderRadius: 20, padding: 24, border: "1px solid rgba(124,92,211,0.12)" }}>
                    <HRReviewMockup />
                  </div>
                )}
                {m.mockup === "hr-signature" && (
                  <div style={{ background: "linear-gradient(135deg, rgba(124,92,211,0.12) 0%, rgba(124,92,211,0.06) 100%)", borderRadius: 20, padding: 24, border: "1px solid rgba(124,92,211,0.12)" }}>
                    <HRSignatureMockup />
                  </div>
                )}
                {m.mockup === "finance-approval" && (
                  <div style={{ background: "linear-gradient(135deg, rgba(124,92,211,0.12) 0%, rgba(124,92,211,0.06) 100%)", borderRadius: 20, padding: 24, border: "1px solid rgba(124,92,211,0.12)" }}>
                    <FinanceApprovalMockup />
                  </div>
                )}
                {m.mockup === "finance-repository" && (
                  <div style={{ background: "linear-gradient(135deg, rgba(124,92,211,0.12) 0%, rgba(124,92,211,0.06) 100%)", borderRadius: 20, padding: 24, border: "1px solid rgba(124,92,211,0.12)" }}>
                    <FinanceRepositoryMockup />
                  </div>
                )}
                {m.mockup === "finance-analytics" && (
                  <div style={{ background: "linear-gradient(135deg, rgba(124,92,211,0.12) 0%, rgba(124,92,211,0.06) 100%)", borderRadius: 20, padding: 24, border: "1px solid rgba(124,92,211,0.12)" }}>
                    <FinanceAnalyticsMockup />
                  </div>
                )}
                {m.mockup === "finance-terms-invoice" && (
                  <div style={{ background: "linear-gradient(135deg, rgba(124,92,211,0.12) 0%, rgba(124,92,211,0.06) 100%)", borderRadius: 20, padding: 24, border: "1px solid rgba(124,92,211,0.12)" }}>
                    <FinanceTermsInvoiceMockup />
                  </div>
                )}
              </div>
            </div>
          </div>
        </section>
      ))}

      {t.hub && <HubSection hub={t.hub} />}

      <FinalCTA />
    </div>
  );
}

function HubSection({ hub }) {
  const [firstName, setFirstName] = React.useState("");
  const [lastName, setLastName] = React.useState("");
  const [email, setEmail] = React.useState("");
  const [gdprConsent, setGdprConsent] = React.useState(false);
  const [submitting, setSubmitting] = React.useState(false);
  const [done, setDone] = React.useState(false);

  const inputStyle = {
    width: "100%",
    padding: "11px 14px",
    borderRadius: 10,
    border: "1px solid var(--line)",
    background: "var(--bg)",
    color: "var(--ink-1)",
    fontSize: 14,
    outline: "none",
    boxSizing: "border-box",
    transition: "border-color 150ms ease",
  };

  const handleSubmit = (e) => {
    e.preventDefault();
    if (firstName && lastName && email && gdprConsent) {
      setSubmitting(true);
      const portalId = "144265445";
      const formGuid = "e6283c03-45cb-4953-af36-6d0bf9ac9a0a";
      const submitUrl = `https://api-eu1.hsforms.com/submissions/v3/integration/submit/${portalId}/${formGuid}`;

      const hutkMatch = document.cookie.match(/(?:^|; )hubspotutk=([^;]*)/);
      const hutk = hutkMatch ? hutkMatch[1] : undefined;

      const payload = {
        fields: [
          { name: "firstname", value: firstName },
          { name: "lastname", value: lastName },
          { name: "email", value: email }
        ],
        context: {
          hutk: hutk,
          pageUri: window.location.href,
          pageName: document.title
        }
      };

      fetch(submitUrl, {
        method: "POST",
        headers: {
          "Content-Type": "application/json"
        },
        body: JSON.stringify(payload)
      })
      .then(() => {
        setSubmitting(false);
        setDone(true);
      })
      .catch((err) => {
        console.error("HubSpot Submission Error:", err);
        setSubmitting(false);
        setDone(true);
      });
    }
  };

  return (
    <section className="section" style={{ background: "var(--bg-soft)", borderTop: "1px solid var(--line)", borderBottom: "1px solid var(--line)" }}>
      <div className="container">
        <div style={{ display: "grid", gridTemplateColumns: "1fr 1fr", gap: 80, alignItems: "center" }}>
          <div>
            <span style={{ fontSize: 11, fontWeight: 700, letterSpacing: "0.12em", textTransform: "uppercase", color: "var(--accent)", background: "var(--accent-soft)", border: "1px solid rgba(124,92,211,0.18)", padding: "4px 12px", borderRadius: 99, display: "inline-block", marginBottom: 24 }}>
              Coming soon
            </span>
            <h2 style={{ fontFamily: "var(--font-serif)", fontSize: "clamp(32px, 4vw, 52px)", fontWeight: 400, color: "var(--ink-1)", lineHeight: 1.1, letterSpacing: "-0.02em", margin: "0 0 18px" }}>
              {hub.title}
            </h2>
            <p style={{ fontSize: 15.5, color: "var(--ink-3)", lineHeight: 1.7, margin: "0 0 24px" }}>
              {hub.body}
            </p>
            <a href="/platform/power-modules/legal-hub" style={{ display: "inline-flex", alignItems: "center", gap: 6, fontSize: 13.5, fontWeight: 500, color: "var(--accent)", textDecoration: "none" }}>
              Read more <Icon name="arrow" size={13} />
            </a>
          </div>
          <div>
            <div className="card" style={{ padding: 36 }}>
              <div style={{ fontSize: 15, fontWeight: 600, color: "var(--ink-1)", marginBottom: 6 }}>Get early access</div>
              <p style={{ fontSize: 13.5, color: "var(--ink-4)", lineHeight: 1.6, margin: "0 0 24px" }}>
                Be the first to get access when Legal Hub launches. One email when it's ready, no spam.
              </p>
              {done ? (
                <div style={{ padding: "14px 20px", borderRadius: 10, background: "var(--accent-soft)", border: "1px solid rgba(124,92,211,0.2)", fontSize: 14, fontWeight: 500, color: "var(--accent)" }}>
                  You're on the list, we'll be in touch.
                </div>
              ) : submitting ? (
                <div style={{ display: "flex", flexDirection: "column", alignItems: "center", justifyContent: "center", padding: "40px 0", gap: 12 }}>
                  <div className="spinner" style={{
                    width: 24,
                    height: 24,
                    borderRadius: "50%",
                    border: "2px solid rgba(110,86,207,0.1)",
                    borderTopColor: "var(--accent)"
                  }} />
                  <div style={{ fontSize: 12.5, color: "var(--ink-4)", fontWeight: 500 }}>Sending request...</div>
                </div>
              ) : (
                <form onSubmit={handleSubmit} style={{ display: "flex", flexDirection: "column", gap: 14 }}>
                  <div style={{ display: "grid", gridTemplateColumns: "1fr 1fr", gap: 12 }}>
                    <div>
                      <input
                        type="text"
                        placeholder="First name"
                        required
                        value={firstName}
                        onChange={e => setFirstName(e.target.value)}
                        style={inputStyle}
                      />
                    </div>
                    <div>
                      <input
                        type="text"
                        placeholder="Last name"
                        required
                        value={lastName}
                        onChange={e => setLastName(e.target.value)}
                        style={inputStyle}
                      />
                    </div>
                  </div>
                  <div>
                    <input
                      type="email"
                      placeholder="Work email"
                      required
                      value={email}
                      onChange={e => setEmail(e.target.value)}
                      style={inputStyle}
                    />
                  </div>
                  <label style={{ display: "flex", alignItems: "flex-start", gap: 10, cursor: "pointer", userSelect: "none", fontSize: 12, color: "var(--ink-3)", marginTop: 4 }}>
                    <input
                      type="checkbox"
                      required
                      checked={gdprConsent}
                      onChange={e => setGdprConsent(e.target.checked)}
                      style={{ marginTop: 3, accentColor: "var(--accent)", width: 14, height: 14, flexShrink: 0 }}
                    />
                    <span>I consent to the storage and processing of my personal data to receive updates.</span>
                  </label>
                  <button
                    type="submit"
                    className="btn btn-primary"
                    style={{ width: "100%", justifyContent: "center", marginTop: 4 }}>
                    {hub.cta}
                  </button>
                </form>
              )}
            </div>
          </div>
        </div>
      </div>
    </section>
  );
}

// === Careers ===
function CareersPage() {
  const roles = [
    { team: "Engineering", title: "Senior Backend Engineer", loc: "Stockholm · Hybrid" },
    { team: "Engineering", title: "Staff Frontend Engineer", loc: "Berlin · Hybrid" },
    { team: "Engineering", title: "ML Engineer · Document AI", loc: "Stockholm · Hybrid" },
    { team: "Engineering", title: "Platform Engineer", loc: "Remote (EU)" },
    { team: "Design", title: "Senior Product Designer", loc: "Stockholm · Hybrid" },
    { team: "Design", title: "Brand Designer", loc: "Berlin · Hybrid" },
    { team: "GTM", title: "Account Executive · DACH", loc: "Berlin · Hybrid" },
    { team: "GTM", title: "Account Executive · Nordics", loc: "Stockholm · Hybrid" },
    { team: "GTM", title: "Solutions Engineer", loc: "Remote (EU)" },
    { team: "GTM", title: "Demand Generation Lead", loc: "Stockholm · Hybrid" },
    { team: "Customer Success", title: "Customer Success Manager", loc: "Berlin · Hybrid" },
    { team: "Customer Success", title: "Implementation Consultant", loc: "Stockholm · Hybrid" },
    { team: "People & Ops", title: "Head of People", loc: "Stockholm · Hybrid" },
    { team: "Legal", title: "Counsel · Commercial", loc: "Stockholm · Hybrid" },
  ];
  const benefits = [
    { title: "Remote-EU friendly", body: "Live anywhere in the EU. We meet IRL once a quarter in Stockholm or Berlin." },
    { title: "Equity for everyone", body: "Every employee owns a meaningful slice. Four-year vest, one-year cliff." },
    { title: "30 days off", body: "Plus the local public holidays of wherever you live. Take them." },
    { title: "Learning budget", body: "€2,500/year for courses, books, conferences, anything that makes you better." },
    { title: "Health & family", body: "Private health, parental leave doubled over the local minimum, fertility support." },
    { title: "Workspace stipend", body: "€1,500 to set up your home office. Refreshed every two years." },
  ];
  const groups = [...new Set(roles.map(r => r.team))];
  return (
    <div>
      <section style={{ padding: "96px 0 56px" }}>
        <div className="container">
          <div style={{ maxWidth: 880, margin: "0 auto", textAlign: "center" }}>
            <span className="eyebrow fade-up">Careers</span>
            <h1 className="display fade-up" style={{ marginTop: 20, fontSize: "clamp(40px, 5.4vw, 72px)" }}>
              Build the <em>operating system</em><br/>for <span className="accent">European legal</span>.
            </h1>
            <p className="lede fade-up" style={{ margin: "28px auto 0", textAlign: "center" }}>
              14 open roles · Stockholm, Berlin, remote-EU. Series-A backed, 38 people, 60+ customers, growing fast.
            </p>
          </div>
        </div>
      </section>

      <section className="section-tight" style={{ background: "var(--bg-soft)", borderTop: "1px solid var(--line)", borderBottom: "1px solid var(--line)" }}>
        <div className="container">
          <div className="grid grid-3" style={{ gap: 16 }}>
            {benefits.map((b) => (
              <div key={b.title} style={{ padding: 24, background: "var(--bg-elevated)", border: "1px solid var(--line)", borderRadius: "var(--r-lg)" }}>
                <h3 style={{ fontSize: 17, fontWeight: 500, letterSpacing: "-0.01em", margin: "0 0 8px" }}>{b.title}</h3>
                <p style={{ fontSize: 13.5, color: "var(--ink-3)", lineHeight: 1.55, margin: 0 }}>{b.body}</p>
              </div>
            ))}
          </div>
        </div>
      </section>

      <section className="section">
        <div className="container">
          <div style={{ marginBottom: 32 }}>
            <span className="eyebrow">Open roles · {roles.length}</span>
            <h2 className="h-section" style={{ marginTop: 18 }}>Find your <em>place</em>.</h2>
          </div>
          {groups.map((g) => (
            <div key={g} style={{ marginBottom: 40 }}>
              <h3 style={{ fontSize: 13, fontWeight: 500, letterSpacing: "0.14em", textTransform: "uppercase", color: "var(--ink-4)", margin: "0 0 16px" }}>{g}</h3>
              <div className="card" style={{ padding: 0, overflow: "hidden" }}>
                {roles.filter(r => r.team === g).map((r, i, arr) => (
                  <a key={r.title} href={`mailto:careers@contractcontrol.com?subject=Application for ${r.title}`} style={{
                    display: "flex", alignItems: "center", justifyContent: "space-between",
                    padding: "20px 28px",
                    borderBottom: i < arr.length - 1 ? "1px solid var(--line)" : "none",
                    color: "inherit", textDecoration: "none",
                    transition: "background 160ms ease",
                  }}
                    onMouseEnter={(e) => e.currentTarget.style.background = "var(--bg-soft)"}
                    onMouseLeave={(e) => e.currentTarget.style.background = "transparent"}>
                    <div>
                      <div style={{ fontSize: 16, fontWeight: 500 }}>{r.title}</div>
                      <div style={{ fontSize: 13, color: "var(--ink-4)", marginTop: 2 }}>{r.loc}</div>
                    </div>
                    <span style={{ fontSize: 13, color: "var(--accent)", display: "inline-flex", alignItems: "center", gap: 6 }}>Apply <Icon name="arrow" size={14} /></span>
                  </a>
                ))}
              </div>
            </div>
          ))}
        </div>
      </section>
      <FinalCTA />
    </div>
  );
}

// === Press / brand ===
function PressPage() {
  const news = [
    { date: "Apr 2026", outlet: "TechCrunch", title: "ContractControl raises €14M Series A to rebuild contract management for Europe" },
    { date: "Mar 2026", outlet: "Sifted", title: "The Stockholm startup quietly winning over Europe's GCs" },
    { date: "Feb 2026", outlet: "Dagens Industri", title: "Svenska legal-tech-bolaget passerar 60 kunder" },
    { date: "Jan 2026", outlet: "Legal Geek", title: "Why Volantis ripped out three CLM tools for one platform" },
  ];
  return (
    <div>
      <section style={{ padding: "96px 0 56px" }}>
        <div className="container">
          <div style={{ maxWidth: 880, margin: "0 auto", textAlign: "center" }}>
            <span className="eyebrow fade-up">Press & brand</span>
            <h1 className="display fade-up" style={{ marginTop: 20, fontSize: "clamp(40px, 5.4vw, 72px)" }}>For the <em>record</em>.</h1>
            <p className="lede fade-up" style={{ margin: "28px auto 0", textAlign: "center" }}>
              Logos, screenshots, founder bios, and our latest in the press.
            </p>
            <div className="fade-up" style={{ marginTop: 32, display: "flex", gap: 12, justifyContent: "center" }}>
              <a className="btn btn-primary btn-lg" href="/logo.svg" download>Download press kit <Icon name="arrow" size={14} /></a>
              <a className="btn btn-ghost btn-lg" href="/contact">Press inquiries</a>
            </div>
          </div>
        </div>
      </section>

      <section className="section-tight" style={{ background: "var(--bg-soft)", borderTop: "1px solid var(--line)", borderBottom: "1px solid var(--line)" }}>
        <div className="container">
          <div style={{ marginBottom: 24 }}>
            <span className="eyebrow">Brand assets</span>
            <h2 className="h-section" style={{ marginTop: 18 }}>Logos & <em>guidelines</em>.</h2>
          </div>
          {(() => {
            const blackPaths = `<path d="M54.34,82.38a31,31,0,0,1-12.6-2.59,32.67,32.67,0,0,1-10.25-7.05,33.56,33.56,0,0,1,0-46.74,32.84,32.84,0,0,1,10.25-7,31,31,0,0,1,12.6-2.59,29.06,29.06,0,0,1,5,.44,29.7,29.7,0,0,1,5,1.37,39.21,39.21,0,0,1,5.14,2.38c.67.37,1.36.76,2.05,1.18a5.66,5.66,0,0,1,1.79,7.88,5.33,5.33,0,0,1-4.48,2.46A5.27,5.27,0,0,1,66,31.25a26.47,26.47,0,0,0-4.9-2.47,20.21,20.21,0,0,0-6.86-1.25,20.81,20.81,0,0,0-8.36,1.72,21.2,21.2,0,0,0-6.84,4.69,23,23,0,0,0-4.6,7,22.08,22.08,0,0,0,0,17,23,23,0,0,0,4.6,7,21.42,21.42,0,0,0,6.84,4.69,20.81,20.81,0,0,0,8.36,1.72A17.68,17.68,0,0,0,57.68,71,19,19,0,0,0,61,70a27.7,27.7,0,0,0,3.65-1.79c.41-.23.82-.48,1.26-.74a5.2,5.2,0,0,1,2.76-.79,5.34,5.34,0,0,1,4.53,2.52,5.68,5.68,0,0,1-1.81,7.87c-.68.41-1.34.79-2,1.14a39,39,0,0,1-5.06,2.35,27.87,27.87,0,0,1-10,1.8Z"/><path d="M303.38,83a24.31,24.31,0,0,1,0-48.62A24,24,0,0,1,317.6,39a4.73,4.73,0,0,1,9.27,1.31V77a4.73,4.73,0,0,1-8.07,3.34,4.93,4.93,0,0,1-1.18-2A24.12,24.12,0,0,1,303.38,83Zm0-38.89A12.82,12.82,0,0,0,298,45.32a14.69,14.69,0,0,0-4.44,3.17,15.7,15.7,0,0,0-3,4.61,13.81,13.81,0,0,0-1.13,5.53,14,14,0,0,0,1.13,5.62,16.49,16.49,0,0,0,3,4.67,14.45,14.45,0,0,0,4.43,3.2,13.08,13.08,0,0,0,10.86,0A14.89,14.89,0,0,0,313.25,69a15.74,15.74,0,0,0,3-4.62,13.94,13.94,0,0,0,1.13-5.52,14.53,14.53,0,0,0-1.13-5.67,15.56,15.56,0,0,0-3-4.66,14.74,14.74,0,0,0-4.44-3.17A12.76,12.76,0,0,0,303.39,44.14Z"/><path d="M365.16,83a24.43,24.43,0,0,1-9.65-1.94,25.92,25.92,0,0,1-7.94-5.23,24.75,24.75,0,0,1-5.4-7.77,24.51,24.51,0,0,1,0-19.35,24.92,24.92,0,0,1,23-14.94,21.71,21.71,0,0,1,6,.8,24.54,24.54,0,0,1,5.21,2.22,34.14,34.14,0,0,1,4.69,3.28c.45.37.9.75,1.34,1.14A4.7,4.7,0,0,1,384,44.57a4.5,4.5,0,0,1-1.34,3.34l-.61.62a5,5,0,0,1-6.94.11,20.89,20.89,0,0,0-3-2.35,16.09,16.09,0,0,0-3.31-1.61,11.48,11.48,0,0,0-3.75-.59,14.08,14.08,0,0,0-5.58,1.12,14.89,14.89,0,0,0-4.65,3.07,13.83,13.83,0,0,0-3.11,4.57,14.18,14.18,0,0,0-1.13,5.65,13.3,13.3,0,0,0,1.16,5.5,15.31,15.31,0,0,0,3.13,4.55,14.41,14.41,0,0,0,4.6,3.06,11.72,11.72,0,0,0,1.89.65,12.2,12.2,0,0,0,3.19.42,15.13,15.13,0,0,0,9-3.18c.43-.33.86-.67,1.27-1a5.8,5.8,0,0,1,3.71-1.35,5.61,5.61,0,0,1,3.95,1.62,4.68,4.68,0,0,1,1.42,3.51,4.8,4.8,0,0,1-1.63,3.48c-.38.33-.76.66-1.15,1A33.21,33.21,0,0,1,376.37,80a24,24,0,0,1-5.21,2.22A21.65,21.65,0,0,1,365.16,83Z"/><path d="M791.76,82.32a5.13,5.13,0,0,1-5.23-5v-56a5.24,5.24,0,0,1,10.46,0v56A5.13,5.13,0,0,1,791.76,82.32Z"/><path d="M672.79,82.72a17,17,0,0,1-6.43-1.11,15.54,15.54,0,0,1-8.47-8.43,16.1,16.1,0,0,1-1.06-6.32V44.56h-5.44a5.23,5.23,0,0,1,0-10.46h5.44V22.35a5.24,5.24,0,0,1,10.47,0V34.1h5.54a5.23,5.23,0,1,1,0,10.46H667.3v22.3a4.84,4.84,0,0,0,1.7,3.92,7.85,7.85,0,0,0,4.9,1.48h.44c4.13.36,4.28,4.11,4.17,5.52-.2,2.57-1.83,4.73-4.51,4.93Z"/><path d="M420.91,82.52a17,17,0,0,1-6.43-1.12A15.54,15.54,0,0,1,406,73,16.37,16.37,0,0,1,405,66.65V44.35H399.5a5.23,5.23,0,0,1,0-10.46H405V22.15a5.23,5.23,0,1,1,10.46,0V33.89H421a5.23,5.23,0,1,1,0,10.46h-5.54v22.3a4.85,4.85,0,0,0,1.71,3.92,7.79,7.79,0,0,0,4.9,1.48l.48,0c4.1.67,3.95,4.16,3.85,5.57-.22,2.57-1.55,4.66-4.23,4.86Z"/><path d="M604.21,82.59a5.17,5.17,0,0,1-5.2-5.25V39.63a5.16,5.16,0,0,1,5.2-5.25,5.27,5.27,0,0,1,4.71,2.89,18.93,18.93,0,0,1,10-2.89,20,20,0,0,1,19.94,20.08V77.33a5.18,5.18,0,0,1-5.1,5.25,5.36,5.36,0,0,1-5.19-5.25V54.46A9.58,9.58,0,0,0,618.87,45a9.28,9.28,0,0,0-9.29,9.48V77.33a2.2,2.2,0,0,1-.17,1A5.5,5.5,0,0,1,604.21,82.59Z"/><path d="M151.94,82.68a5.16,5.16,0,0,1-5.19-5.23V39.93a5.16,5.16,0,0,1,5.19-5.23,5.27,5.27,0,0,1,4.71,2.88,19.07,19.07,0,0,1,9.95-2.88,20,20,0,0,1,20,20V77.44a5.18,5.18,0,0,1-5.1,5.23,5.34,5.34,0,0,1-5.19-5.23V54.69a9.56,9.56,0,0,0-9.66-9.44,9.27,9.27,0,0,0-9.28,9.44V77.44a2.2,2.2,0,0,1-.17,1A5.5,5.5,0,0,1,151.94,82.68Z"/><path d="M523,46.1a29.58,29.58,0,0,0-59.15-.31v.36l.05,6.14V70.9A5.16,5.16,0,0,0,469,76.05h.32a5.16,5.16,0,0,0,5.13-5.15V49.46l.07-4.42a18.92,18.92,0,0,1,37.82,1.05c0,.2,0,.38,0,.58h0V60.78l0,12.3h0v4.49a5.2,5.2,0,0,0,5.33,5.11A5.15,5.15,0,0,0,523,77.57V47.92a6.2,6.2,0,0,0-.06-.62C522.93,46.9,523,46.5,523,46.1Z"/><path d="M493.63,40.83h-.36A5.14,5.14,0,0,0,488.15,46V71.27a18.9,18.9,0,0,1-37.78-.87h0V46.58h0V40.5a5.19,5.19,0,0,0-5.32-5.11,5.13,5.13,0,0,0-5.31,5.11v6.08h0V71.15a5.65,5.65,0,0,0,.07.73,29.47,29.47,0,0,0,58.81,1.19c.08-1.78.14-5.53.14-5.53V46A5.16,5.16,0,0,0,493.63,40.83Z"/><path d="M695.66,82.45a5.2,5.2,0,0,1-5.24-5.27V39.65a5.2,5.2,0,0,1,5.24-5.27,5.29,5.29,0,0,1,4.73,2.85,19.19,19.19,0,0,1,9.94-2.85,18.38,18.38,0,0,1,5.8,1A5.11,5.11,0,0,1,719.57,42l-.26.65a5.09,5.09,0,0,1-4.74,3,4.93,4.93,0,0,1-1.42-.21,9.6,9.6,0,0,0-2.83-.42,9.45,9.45,0,0,0-9.23,9.55v22.6a2.16,2.16,0,0,1-.2,1A5.46,5.46,0,0,1,695.66,82.45Z"/><path d="M246.9,82.55a5.19,5.19,0,0,1-5.2-5.28V39.33A5.2,5.2,0,0,1,246.9,34,5.26,5.26,0,0,1,251.61,37,18.91,18.91,0,0,1,261.56,34a19.44,19.44,0,0,1,6,1,4.43,4.43,0,0,1,2.9,2.6,6.19,6.19,0,0,1,.19,4l-.27.66a5,5,0,0,1-4.59,3.07,4.82,4.82,0,0,1-1.41-.21,9.77,9.77,0,0,0-2.84-.42,9.54,9.54,0,0,0-9.28,9.7V77.26a2.14,2.14,0,0,1-.21,1v0A5.38,5.38,0,0,1,246.9,82.55Z"/><path d="M748.67,82.45a23.07,23.07,0,0,1-9.39-2,24.83,24.83,0,0,1-7.73-5.31,26.07,26.07,0,0,1-5.26-7.77,23.14,23.14,0,0,1,0-18.64,25.63,25.63,0,0,1,5.31-7.72,25.37,25.37,0,0,1,7.77-5.31,23,23,0,0,1,18.59,0A25.94,25.94,0,0,1,765.73,41,25,25,0,0,1,771,48.73a23.23,23.23,0,0,1,0,18.68,25.82,25.82,0,0,1-5.26,7.77,24.83,24.83,0,0,1-7.73,5.31A23.06,23.06,0,0,1,748.67,82.45Zm0-38.45a13.17,13.17,0,0,0-5.35,1.13,14.56,14.56,0,0,0-4.49,3.09,15.57,15.57,0,0,0-3.06,4.51,13.09,13.09,0,0,0-1.13,5.39,12.83,12.83,0,0,0,1.13,5.29,15.43,15.43,0,0,0,3.06,4.51A14.33,14.33,0,0,0,743.32,71a13.18,13.18,0,0,0,5.35,1.14A12.84,12.84,0,0,0,754,71a14.62,14.62,0,0,0,4.45-3.09,15.43,15.43,0,0,0,3.06-4.51,12.84,12.84,0,0,0,1.14-5.29,13.06,13.06,0,0,0-1.14-5.39,15.57,15.57,0,0,0-3.06-4.51A14.62,14.62,0,0,0,754,45.13,12.83,12.83,0,0,0,748.67,44Z"/><path d="M108.67,83.05a23.21,23.21,0,0,1-9.46-2,25.21,25.21,0,0,1-7.79-5.35,25.94,25.94,0,0,1-5.29-7.83,23.26,23.26,0,0,1,0-18.78A25.72,25.72,0,0,1,99.3,36,23.27,23.27,0,0,1,118,36a26.23,26.23,0,0,1,7.82,5.3,25.21,25.21,0,0,1,5.35,7.79,23.29,23.29,0,0,1,2,9.46,23,23,0,0,1-2,9.36,26.09,26.09,0,0,1-5.3,7.83,25.29,25.29,0,0,1-7.78,5.35A23.28,23.28,0,0,1,108.67,83.05Zm0-38.75a13.25,13.25,0,0,0-5.39,1.15,14.51,14.51,0,0,0-4.53,3.11,15.49,15.49,0,0,0-3.08,4.55,13.09,13.09,0,0,0-1.15,5.43,13,13,0,0,0,1.15,5.34,15.77,15.77,0,0,0,3.08,4.54,14.4,14.4,0,0,0,4.53,3.11,13.25,13.25,0,0,0,5.39,1.15A13.1,13.1,0,0,0,114,71.54a14.72,14.72,0,0,0,4.48-3.12,15.67,15.67,0,0,0,3.09-4.54,12.94,12.94,0,0,0,1.14-5.34,13.09,13.09,0,0,0-1.14-5.43,15.71,15.71,0,0,0-3.09-4.55A14.64,14.64,0,0,0,114,45.45,13,13,0,0,0,108.67,44.3Z"/><path d="M561,82.59a23.2,23.2,0,0,1-9.45-2,24.87,24.87,0,0,1-7.79-5.35,26.23,26.23,0,0,1-5.3-7.82,23.36,23.36,0,0,1,0-18.78,25.69,25.69,0,0,1,13.18-13.13,23.14,23.14,0,0,1,18.73,0,26.15,26.15,0,0,1,7.83,5.3,25.05,25.05,0,0,1,5.35,7.78,23.48,23.48,0,0,1,0,18.83,26.23,26.23,0,0,1-5.3,7.82,24.87,24.87,0,0,1-7.79,5.35A23.22,23.22,0,0,1,561,82.59Zm0-38.75A13.28,13.28,0,0,0,555.6,45a14.66,14.66,0,0,0-4.52,3.12A15.57,15.57,0,0,0,548,52.64a13.16,13.16,0,0,0-1.15,5.43A12.92,12.92,0,0,0,548,63.41,15.31,15.31,0,0,0,551.08,68a14.55,14.55,0,0,0,4.52,3.12A13.28,13.28,0,0,0,561,72.21a12.87,12.87,0,0,0,5.34-1.14A14.43,14.43,0,0,0,570.82,68a15.5,15.5,0,0,0,3.08-4.54,12.88,12.88,0,0,0,1.15-5.34,13.13,13.13,0,0,0-1.15-5.43,15.5,15.5,0,0,0-3.08-4.54A14.72,14.72,0,0,0,566.33,45,12.87,12.87,0,0,0,561,43.84Z"/><path d="M222.44,82.36A16.78,16.78,0,0,1,216,81.24a15.56,15.56,0,0,1-8.47-8.42,16.1,16.1,0,0,1-1.06-6.32V44.2H201a5.24,5.24,0,0,1,0-10.47h5.44V22A5.24,5.24,0,0,1,217,22V33.73h5.54a5.24,5.24,0,0,1,0,10.47H217V66.5a4.87,4.87,0,0,0,1.7,3.92,7.85,7.85,0,0,0,4.9,1.48l.48,0c4.1.68,4,4.17,3.85,5.57-.21,2.57-1.55,4.66-4.23,4.86Z"/>`;

            const LogoBlack = ({ style }) => (
              <svg viewBox="0 0 813.96 104.17" style={{ width: "100%", maxHeight: 36, ...style }} dangerouslySetInnerHTML={{ __html: blackPaths }} />
            );
            const LogoWhite = ({ style }) => (
              <svg viewBox="0 0 813.96 104.17" style={{ width: "100%", maxHeight: 36, fill: "white", ...style }} dangerouslySetInnerHTML={{ __html: blackPaths }} />
            );
            const LogoPurple = ({ style }) => (
              <svg viewBox="0 0 813.96 104.17" style={{ width: "100%", maxHeight: 36, fill: "var(--accent)", ...style }} dangerouslySetInnerHTML={{ __html: blackPaths }} />
            );

            return (
              <div className="grid grid-2" style={{ gap: 16, maxWidth: 640 }}>
                <div style={{ padding: 40, background: "var(--bg-elevated)", border: "1px solid var(--line)", borderRadius: "var(--r-lg)", textAlign: "center" }}>
                  <div style={{ height: 80, display: "grid", placeItems: "center", padding: "0 24px" }}>
                    <LogoBlack />
                  </div>
                  <div style={{ marginTop: 16, fontSize: 12.5, color: "var(--ink-4)" }}>Wordmark · Light</div>
                </div>
                <div style={{ padding: 40, background: "var(--ink-1)", border: "1px solid var(--line)", borderRadius: "var(--r-lg)", textAlign: "center" }}>
                  <div style={{ height: 80, display: "grid", placeItems: "center", padding: "0 24px" }}>
                    <LogoWhite />
                  </div>
                  <div style={{ marginTop: 16, fontSize: 12.5, color: "rgba(255,255,255,0.35)" }}>Wordmark · Dark</div>
                </div>
              </div>
            );
          })()}
          <div style={{ marginTop: 24, fontSize: 13.5, color: "var(--ink-3)" }}>
            Need something specific? <a href="/contact" style={{ color: "var(--accent)" }}>Contact us</a>.
          </div>
        </div>
      </section>
      <FinalCTA />
    </div>
  );
}

// === Contact ===
function ContactPage() {
  const categories = [
    {
      id: "sales",
      icon: "negotiation",
      label: "Sales & demos",
      desc: "Talk to a solutions engineer about your team's setup.",
      formTitle: "Get in touch with sales",
      messagePlaceholder: "What are you trying to solve? Which teams are involved? Current contract volume?",
      submitLabel: "Send to sales",
      responseTime: "We'll follow up within one business day.",
    },
    {
      id: "support",
      icon: "review",
      label: "Customer support",
      desc: "Already a customer? We're here within your SLA.",
      formTitle: "How can we help?",
      messagePlaceholder: "Describe the issue, include any error messages or steps to reproduce.",
      submitLabel: "Submit request",
      responseTime: "We'll get back to you as quickly as we can.",
    },
    {
      id: "partnerships",
      icon: "workspace",
      label: "Partnerships",
      desc: "Integrations, channel, and co-marketing opportunities.",
      formTitle: "Let's explore it together",
      messagePlaceholder: "Tell us about your product or network and what kind of partnership you have in mind.",
      submitLabel: "Start the conversation",
      responseTime: "Our partnerships team reviews weekly.",
    },
    {
      id: "press",
      icon: "docs",
      label: "Press",
      desc: "Coverage requests, briefings, and executive interviews.",
      formTitle: "Press inquiry",
      messagePlaceholder: "Publication, deadline, and what you're working on.",
      submitLabel: "Send inquiry",
      responseTime: "We respond to press requests within 24 hours.",
    },
    {
      id: "other",
      icon: "legal",
      label: "Other",
      desc: "Security disclosures, careers, or anything else.",
      formTitle: "Get in touch",
      messagePlaceholder: "What's on your mind?",
      submitLabel: "Send message",
      responseTime: "We read everything and respond to everyone.",
    },
  ];

  const [activeId, setActiveId] = React.useState("sales");
  const [form, setForm] = React.useState({ firstName: "", lastName: "", email: "", company: "", message: "" });
  const [focused, setFocused] = React.useState(null);
  const [submitted, setSubmitted] = React.useState({});
  const [submitting, setSubmitting] = React.useState(false);

  const active = categories.find(c => c.id === activeId);
  const set = (k) => (e) => setForm({ ...form, [k]: e.target.value });

  const handleSubmit = (e) => {
    e.preventDefault();
    if (form.firstName && form.lastName && form.email && form.company && form.message) {
      setSubmitting(true);
      const portalId = "144265445";
      const formGuids = {
        sales: "954a48a8-f613-4f4f-bd2f-903c1f7d04e8",
        support: "11bcd303-a684-4958-bf6d-9b41c248062d",
        partnerships: "b8e1b494-3c98-4938-95b8-b75c1757737a",
        press: "0d890845-967f-4d39-8b73-0cb92ec33c1a",
        other: "4c2abf4c-5b36-4ff0-a119-197fd5670751"
      };
      const formGuid = formGuids[activeId];
      const submitUrl = `https://api-eu1.hsforms.com/submissions/v3/integration/submit/${portalId}/${formGuid}`;

      const hutkMatch = document.cookie.match(/(?:^|; )hubspotutk=([^;]*)/);
      const hutk = hutkMatch ? hutkMatch[1] : undefined;

      const payload = {
        fields: [
          { name: "firstname", value: form.firstName },
          { name: "lastname", value: form.lastName },
          { name: "email", value: form.email },
          { name: "company", value: form.company },
          { name: "message", value: form.message }
        ],
        context: {
          hutk: hutk,
          pageUri: window.location.href,
          pageName: document.title
        }
      };

      fetch(submitUrl, {
        method: "POST",
        headers: {
          "Content-Type": "application/json"
        },
        body: JSON.stringify(payload)
      })
      .then(() => {
        setSubmitting(false);
        setSubmitted({ ...submitted, [activeId]: true });
        setForm({ firstName: "", lastName: "", email: "", company: "", message: "" });
      })
      .catch((err) => {
        console.error("Hubspot API Submission Error:", err);
        setSubmitting(false);
        setSubmitted({ ...submitted, [activeId]: true });
        setForm({ firstName: "", lastName: "", email: "", company: "", message: "" });
      });
    }
  };

  const inputStyle = (key) => ({
    width: "100%", height: 42, padding: "0 13px",
    borderRadius: "var(--r-md)",
    border: "1px solid " + (focused === key ? "var(--accent)" : "var(--line-strong)"),
    background: "var(--bg-elevated)",
    fontFamily: "inherit", fontSize: 13.5, color: "var(--ink-1)",
    outline: "none", transition: "border-color 150ms ease",
    boxShadow: focused === key ? "0 0 0 3px rgba(110,86,207,0.10)" : "none",
    boxSizing: "border-box",
  });

  const labelStyle = { display: "block", fontSize: 12, fontWeight: 500, color: "var(--ink-3)", marginBottom: 5, letterSpacing: "0.01em" };

  return (
    <div>
      {/* Hero */}
      <section style={{ padding: "80px 0 64px" }}>
        <div className="container">
          <span className="eyebrow fade-up">Contact</span>
          <h1 className="display fade-up" style={{ marginTop: 16, fontSize: "clamp(40px, 5vw, 68px)", maxWidth: 640 }}>
            Get in <em>touch</em>.
          </h1>
          <p className="lede fade-up" style={{ marginTop: 20, maxWidth: 480 }}>
            No black-hole inboxes. Real humans, real responses, usually within a few hours.
          </p>
        </div>
      </section>

      {/* Main: category selector + form */}
      <section style={{ paddingBottom: 96 }}>
        <div className="container">
          <div style={{ display: "grid", gridTemplateColumns: "280px 1fr", gap: 40, alignItems: "start" }}>

            {/* Left: category list */}
            <div style={{ display: "flex", flexDirection: "column", gap: 4 }}>
              {categories.map((c) => {
                const isActive = c.id === activeId;
                const isDone = submitted[c.id];
                return (
                  <button
                    key={c.id}
                    onClick={() => { setActiveId(c.id); setSubmitting(false); }}
                    style={{
                      display: "flex", alignItems: "flex-start", gap: 12,
                      padding: "14px 16px", borderRadius: "var(--r-md)",
                      border: "1px solid " + (isActive ? "var(--accent)" : "transparent"),
                      background: isActive ? "var(--accent-soft)" : "transparent",
                      cursor: "pointer", textAlign: "left", width: "100%",
                      transition: "all 120ms ease",
                    }}
                  >
                    <span style={{ width: 28, height: 28, borderRadius: 7, background: isActive ? "var(--accent)" : "var(--bg-soft)", display: "grid", placeItems: "center", color: isActive ? "#fff" : "var(--ink-3)", flexShrink: 0, marginTop: 1, transition: "all 120ms ease" }}>
                      {isDone
                        ? <svg width="13" height="13" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2.5"><polyline points="20 6 9 17 4 12"/></svg>
                        : <Icon name={c.icon} size={13} />
                      }
                    </span>
                    <div>
                      <div style={{ fontSize: 13.5, fontWeight: 500, color: isActive ? "var(--accent)" : "var(--ink-1)", lineHeight: 1.3 }}>{c.label}</div>
                      <div style={{ fontSize: 12, color: isActive ? "var(--accent)" : "var(--ink-4)", lineHeight: 1.45, marginTop: 2, opacity: isActive ? 0.8 : 1 }}>{c.desc}</div>
                    </div>
                  </button>
                );
              })}

              {/* Office addresses */}
              <div style={{ marginTop: 28, paddingTop: 24, borderTop: "1px solid var(--line)" }}>
                <div style={{ fontSize: 11, fontWeight: 600, letterSpacing: "0.1em", textTransform: "uppercase", color: "var(--ink-4)", marginBottom: 14 }}>Offices</div>
                {[
                  { city: "Stockholm", addr: "Karlavägen 20, 114 31" },
                ].map((o) => (
                  <div key={o.city} style={{ marginBottom: 12 }}>
                    <div style={{ fontSize: 12.5, fontWeight: 500, color: "var(--ink-2)" }}>{o.city}</div>
                    <div style={{ fontSize: 12, color: "var(--ink-4)" }}>{o.addr}</div>
                  </div>
                ))}
                <div style={{ marginTop: 8 }}>
                  <div style={{ fontSize: 12, color: "var(--ink-4)" }}>010-750 09 66</div>
                </div>
              </div>
            </div>

            {/* Right: form card */}
            <div className="card" style={{ padding: 40 }}>
              {submitted[activeId] ? (
                <div style={{ textAlign: "center", padding: "48px 0" }}>
                  <div style={{ width: 48, height: 48, borderRadius: "50%", background: "var(--accent-soft)", display: "grid", placeItems: "center", color: "var(--accent)", margin: "0 auto 20px" }}>
                    <svg width="22" height="22" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2.5"><polyline points="20 6 9 17 4 12"/></svg>
                  </div>
                  <h2 style={{ fontSize: 22, fontWeight: 500, margin: "0 0 10px", letterSpacing: "-0.02em" }}>Message sent.</h2>
                  <p style={{ fontSize: 14.5, color: "var(--ink-3)", lineHeight: 1.65, margin: "0 0 24px", maxWidth: 360, marginLeft: "auto", marginRight: "auto" }}>
                    {active.responseTime}
                  </p>
                  <button
                    onClick={() => setSubmitted({ ...submitted, [activeId]: false })}
                    className="btn btn-ghost"
                  >
                    Send another message
                  </button>
                </div>
              ) : submitting ? (
                <div style={{ display: "flex", flexDirection: "column", alignItems: "center", justifyContent: "center", padding: "120px 0", gap: 16 }}>
                  <div className="spinner" style={{
                    width: 32,
                    height: 32,
                    borderRadius: "50%",
                    border: "3px solid rgba(110,86,207,0.1)",
                    borderTopColor: "var(--accent)"
                  }} />
                  <div style={{ fontSize: 13.5, color: "var(--ink-4)", fontWeight: 500 }}>Sending message...</div>
                </div>
              ) : (
                <>
                  <div style={{ marginBottom: 28 }}>
                    <h2 style={{ fontSize: 20, fontWeight: 500, margin: "0 0 6px", letterSpacing: "-0.02em" }}>{active.formTitle}</h2>
                    <p style={{ fontSize: 13.5, color: "var(--ink-3)", margin: 0 }}>{active.responseTime}</p>
                  </div>

                  <form onSubmit={handleSubmit} style={{ display: "flex", flexDirection: "column", gap: 16 }}>
                    <div style={{ display: "grid", gridTemplateColumns: "1fr 1fr", gap: 14 }}>
                      <div>
                        <label style={labelStyle}>First name</label>
                        <input type="text" required placeholder="Linnea"
                          value={form.firstName} onChange={set("firstName")}
                          onFocus={() => setFocused("firstName")} onBlur={() => setFocused(null)}
                          style={inputStyle("firstName")} />
                      </div>
                      <div>
                        <label style={labelStyle}>Last name</label>
                        <input type="text" required placeholder="Andersson"
                          value={form.lastName} onChange={set("lastName")}
                          onFocus={() => setFocused("lastName")} onBlur={() => setFocused(null)}
                          style={inputStyle("lastName")} />
                      </div>
                    </div>

                    <div style={{ display: "grid", gridTemplateColumns: "1fr 1fr", gap: 14 }}>
                      <div>
                        <label style={labelStyle}>Work email</label>
                        <input type="email" required placeholder="linnea@volantis.se"
                          value={form.email} onChange={set("email")}
                          onFocus={() => setFocused("email")} onBlur={() => setFocused(null)}
                          style={inputStyle("email")} />
                      </div>
                      <div>
                        <label style={labelStyle}>Company</label>
                        <input type="text" required placeholder="Volantis AB"
                          value={form.company} onChange={set("company")}
                          onFocus={() => setFocused("company")} onBlur={() => setFocused(null)}
                          style={inputStyle("company")} />
                      </div>
                    </div>

                    <div>
                      <label style={labelStyle}>Message</label>
                      <textarea required
                        placeholder={active.messagePlaceholder}
                        value={form.message} onChange={set("message")}
                        onFocus={() => setFocused("message")} onBlur={() => setFocused(null)}
                        style={{ ...inputStyle("message"), height: "auto", minHeight: 110, padding: "11px 13px", resize: "vertical", lineHeight: 1.55 }}
                      />
                    </div>

                    <button type="submit" className="btn btn-primary btn-lg" style={{ alignSelf: "flex-start", marginTop: 4 }}>
                      {active.submitLabel} <Icon name="arrow" size={14} />
                    </button>
                  </form>
                </>
              )}
            </div>
          </div>
        </div>
      </section>

      <FinalCTA />
    </div>
  );
}

Object.assign(window, { TeamSolutionPage, CareersPage, PressPage, ContactPage });