// Industry Solutions pages

const industryData = {
  saas: {
    eyebrow: "For SaaS & Software",
    icon: "repository",
    title: <>Built for the way SaaS contracts <span className="accent">actually move</span>.</>,
    lede: "MSAs, DPAs, order forms, NDAs, generated, redlined, and signed at the speed of your sales cycle.",
    heroImage: "/images/saas-hero.png",
    heroAlt: "SaaS team collaborating on contract workflows",
    heroFloats: [
      { pos: { top: 24, left: 28 }, label: "MSA", sublabel: "Signed · 2m ago" },
      { pos: { top: 24, right: 28 }, number: "2,847", sublabel: "Active contracts" },
      { pos: { top: "42%", right: 32 }, label: "DPA", sublabel: "Auto-attached" },
      { pos: { bottom: 80, left: 28 }, label: "Order Form", sublabel: "Awaiting sign" },
      { pos: { bottom: 28, right: 28 }, label: "Renewal", sublabel: "90d alert sent" },
    ],
    heroCard: {
      title: "Upcoming obligations",
      badge: "2 due",
      items: [
        { name: "Stripe MSA", type: "Renewal", days: "12d", color: "#E11D48" },
        { name: "AWS DPA", type: "Opt-out window", days: "28d", color: "#F59E0B" },
        { name: "HubSpot SLA", type: "Price review", days: "64d", color: "#10B981" },
      ],
    },
    pains: [
      "Every MSA takes three weeks of email ping-pong between legal, sales, and the customer.",
      "DPAs are copy-pasted from the last deal and nobody's sure which version is current.",
      "Renewals slip through because the dates live in a spreadsheet someone forgot to update.",
      "Order forms are drafted manually, and half the time the terms don't match the MSA.",
    ],
    planEyebrow: "How it works",
    planTitle: <>We've seen this before. <span className="accent">Here's the playbook.</span></>,
    planBody: "SaaS contracts move fast. Your CLM should move faster. Three steps to get every contract type under control.",
    plan: [
      {
        num: "01",
        tag: "TEMPLATIZE",
        title: "Build your playbook",
        desc: "Turn your MSAs, DPAs, NDAs, and order forms into smart templates with your approved fallbacks built in.",
        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"/><line x1="16" y1="13" x2="8" y2="13"/><line x1="16" y1="17" x2="8" y2="17"/></svg>
        )
      },
      {
        num: "02",
        tag: "AUTOMATE",
        title: "Let the system run",
        desc: "Sales self-serves from CRM. Approvals routed automatically. e-Sign triggered the moment the last approval lands.",
        icon: (
          <svg width="20" height="20" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2.2" strokeLinecap="round" strokeLinejoin="round"><polyline points="16 3 21 3 21 8"/><line x1="4" y1="20" x2="21" y2="3"/><polyline points="21 16 21 21 16 21"/><line x1="15" y1="15" x2="21" y2="21"/><line x1="4" y1="4" x2="9" y2="9"/></svg>
        )
      },
      {
        num: "03",
        tag: "TRACK",
        title: "Never miss a deadline",
        desc: "Every renewal, opt-out, and obligation tracked automatically. The right stakeholder alerted at 90, 60, and 30 days.",
        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>
        )
      },
    ],
    pillars: [
      { tag: "MSAs", title: "Standard paper, fast", desc: "Sales sends MSAs from your approved templates in 60 seconds. Approvals routed by value, type, and region." },
      { tag: "DPAs", title: "GDPR-native, by default", desc: "Schedule B, sub-processor lists, SCCs, auto-attached and version-tracked per customer." },
      { tag: "Order forms", title: "CRM-synced", desc: "Salesforce or HubSpot opportunity → order form → signed PDF → closed-won. One pipe." },
      { tag: "Renewals", title: "No more silent churn", desc: "Auto-renewal alerts 90/60/30 days out. Forecast revenue 12 months out, with confidence scores." },
    ],
    workflows: [
      "Self-serve MSA portal embedded in your sales process",
      "AI redlines third-party paper against your playbook",
      "Order form generation from CRM opportunities",
      "DPA + SCC auto-attachment for EU customers",
      "Renewal & expansion tracking with revenue forecasts",
      "ARR, term, payment terms structured into every record",
    ],
    metrics: [["3.2×", "deal velocity"], ["48h", "median MSA turnaround"], ["100%", "DPA coverage"]],
    integrations: ["Salesforce", "HubSpot", "Slack", "Linear", "Stripe", "NetSuite"],
    quote: { text: "We close on Friday, the customer signs Monday. Every time.", who: "Magnus Holm", role: "VP Sales, Northwind AB" },
    failure: {
      eyebrow: "The cost of doing nothing",
      title: <>Every week without a system, <span className="accent">you lose.</span></>,
      items: [
        { stat: "23 days", desc: "Average MSA turnaround when contracts travel by email. That's 23 days your deal isn't closing." },
        { stat: "€180K", desc: "Average revenue lost per year to auto-renewals nobody flagged in time. One missed opt-out can lock you in for another 12 months." },
        { stat: "4.2 hrs", desc: "Per week your legal team spends chasing status updates, not doing legal work. That's a full quarter of their capacity, gone." },
      ],
    },
    gains: {
      eyebrow: "The outcome",
      title: <>What changes when contracts <span className="accent">just work</span>.</>,
      items: [
        "MSAs go from first draft to signature in 48 hours, not 3 weeks.",
        "Every DPA auto-attached, version-tracked, and audit-ready without manual effort.",
        "Renewals surfaced 90 days out with revenue impact, so you negotiate on your terms.",
        "Order forms generated from CRM data. No copy-paste, no mismatched terms.",
      ],
    },
  },
  finserv: {
    eyebrow: "For Financial Services",
    icon: "dataroom",
    title: <>No obligation missed. <span className="accent">DORA, MiFID, covered</span>.</>,
    lede: "Track every obligation across every contract. Automated alerts for renewals, opt-outs, and regulatory deadlines so nothing falls through the cracks.",
    heroImage: "/images/finserv-hero.png",
    heroAlt: "Financial services team reviewing contracts and compliance documents",
    heroFloats: [
      { pos: { top: 24, left: 28 }, label: "DORA register", sublabel: "Live" },
      { pos: { top: 24, right: 28 }, number: "1,240", sublabel: "Active contracts" },
      { pos: { top: "42%", right: 32 }, label: "ICT vendor", sublabel: "Flagged" },
      { pos: { bottom: 80, left: 28 }, label: "Vendor SLA", sublabel: "Signed · 4h ago" },
      { pos: { bottom: 28, right: 28 }, label: "Renewal", sublabel: "30d alert sent" },
    ],
    heroCard: {
      title: "Upcoming obligations",
      badge: "3 due",
      items: [
        { name: "Helix MSA", type: "Renewal window", days: "8d", color: "#E11D48" },
        { name: "Nordic Fund, SLA", type: "DORA review", days: "22d", color: "#F59E0B" },
        { name: "Kvist DPA", type: "Sub-processor update", days: "51d", color: "#10B981" },
      ],
    },
    pains: [
      "Regulatory deadlines buried in spreadsheets. DORA, MiFID, PSD2 obligations tracked manually across hundreds of contracts.",
      "Audit prep takes weeks. Every request means hunting through folders, emails, and shared drives to assemble a response.",
      "Renewals and opt-out windows slip past unnoticed. One missed date can lock you into unfavorable terms for another year.",
      "No single source of truth for vendor and ICT contracts. Concentration risk goes unmonitored until the regulator asks.",
    ],
    plan: [
      {
        num: "01",
        tag: "CENTRALIZE",
        title: "One register for everything",
        desc: "Import every vendor, ICT, and client contract into a single, searchable register. DORA fields, risk flags, and exit strategies auto-populated.",
        icon: (
          <svg width="20" height="20" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2.2" strokeLinecap="round" strokeLinejoin="round"><rect x="2" y="3" width="20" height="14" rx="2" ry="2"/><line x1="8" y1="21" x2="16" y2="21"/><line x1="12" y1="17" x2="12" y2="21"/></svg>
        )
      },
      {
        num: "02",
        tag: "AUTOMATE",
        title: "Alerts, not spreadsheets",
        desc: "Every renewal, opt-out, and regulatory review date tracked automatically. The right stakeholder alerted at 90, 60, and 30 days.",
        icon: (
          <svg width="20" height="20" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2.2" strokeLinecap="round" strokeLinejoin="round"><path d="M18 8A6 6 0 0 0 6 8c0 7-3 9-3 9h18s-3-2-3-9"/><path d="M13.73 21a2 2 0 0 1-3.46 0"/></svg>
        )
      },
      {
        num: "03",
        tag: "PROVE",
        title: "Audit-ready in one click",
        desc: "Tamper-proof trails, version history, and regulator-ready exports. When the audit comes, you hand over one PDF, not a five-week project.",
        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 22s8-4 8-10V5l-8-3-8 3v7c0 6 8 10 8 10z"/></svg>
        )
      },
    ],
    planEyebrow: "Your guide",
    planTitle: <>We built ContractControl for <span className="accent">regulated industries</span>.</>,
    planBody: "Three steps to full obligation coverage and regulator-ready audit trails.",
    failure: {
      eyebrow: "The cost of doing nothing",
      title: <>Every quarter without a system, <span className="accent">risk compounds.</span></>,
      items: [
        { stat: "6 weeks", desc: "Average time to prepare for a regulatory audit when contract data lives in spreadsheets, shared drives, and email." },
        { stat: "€320K", desc: "Average penalty exposure per year from missed DORA reporting deadlines and undocumented ICT vendor obligations." },
        { stat: "3 FTEs", desc: "Equivalent headcount spent on manual compliance tracking instead of risk management and strategic work." },
      ],
    },
    gains: {
      eyebrow: "The outcome",
      title: <>What changes when obligations <span className="accent">track themselves</span>.</>,
      items: [
        "DORA vendor register is always live, always current. No quarterly fire drills.",
        "Every renewal and opt-out surfaced 90 days out with stakeholder alerts built in.",
        "Audit prep drops from 6 weeks to one click. Regulators get a single, tamper-proof export.",
        "Concentration risk, exit strategies, and sub-processor chains visible at a glance.",
      ],
    },
    pillars: [
      { tag: "DORA", title: "ICT third-party risk", desc: "Vendor register with criticality flags, exit strategies, and concentration metrics, auto-maintained from contract data." },
      { tag: "MiFID II", title: "Client onboarding", desc: "KYC docs, suitability records, and disclosure attestations attached to every client agreement, searchable forever." },
      { tag: "PSD2", title: "Outsourcing oversight", desc: "Sub-processor approvals, change notifications, and audit rights baked into contract templates." },
      { tag: "BCBS 239", title: "Risk data lineage", desc: "Every contract change versioned, signed, and exportable. Regulators get one PDF, not a five-week audit." },
    ],
    workflows: [
      "EU-only data residency (Stockholm + Frankfurt)",
      "ISO 27001, SOC 2 Type II, GDPR-aligned",
      "Regulator-ready audit exports (one click)",
      "DORA-aligned vendor & ICT contract register",
      "Quad-eye approval workflows for high-risk paper",
      "Immutable signing trails (eIDAS QES)",
    ],
    metrics: [["EU-only", "data residency"], ["100%", "audit coverage"], ["6wk → 1d", "regulator audit prep"]],
    integrations: ["Workday", "Salesforce FSC", "OneTrust", "ServiceNow", "Bloomberg", "Refinitiv"],
    quote: { text: "Our DORA register went from a quarterly fire drill to a live dashboard.", who: "Erik Lund", role: "Chief Risk Officer, Helix Financial" },
  },
  realestate: {
    eyebrow: "For Real Estate",
    icon: "drafting",
    title: <>Every lease, every deadline, <span className="accent">under control</span>.</>,
    lede: "Track rent reviews, break options, and renewal windows across your entire portfolio. No spreadsheets, no surprises.",
    heroImage: "/images/realestate-hero.png",
    heroAlt: "Real estate portfolio management with lease and property documents",
    heroFloats: [
      { pos: { top: 24, left: 28 }, label: "Lease", sublabel: "Signed · 1d ago" },
      { pos: { top: 24, right: 28 }, number: "486", sublabel: "Active leases" },
      { pos: { top: "42%", right: 32 }, label: "Rent review", sublabel: "45d out" },
      { pos: { bottom: 80, left: 28 }, label: "SPA", sublabel: "Due diligence" },
      { pos: { bottom: 28, right: 28 }, label: "Break option", sublabel: "90d alert sent" },
    ],
    heroCard: {
      title: "Upcoming obligations",
      badge: "3 due",
      items: [
        { name: "Storgatan 12, Lease", type: "Rent review", days: "14d", color: "#E11D48" },
        { name: "Kungsholmen SPA", type: "Conditions deadline", days: "31d", color: "#F59E0B" },
        { name: "Vasagatan 8, Lease", type: "Break option window", days: "62d", color: "#10B981" },
      ],
    },
    pains: [
      "Rent review dates live in spreadsheets that nobody owns. One missed date means 12 months at the old rate.",
      "Break options expire silently. By the time someone notices, you're locked in for another term.",
      "Lease terms are scattered across PDFs, emails, and filing cabinets. Finding a specific clause takes hours.",
      "No single view of obligations across the portfolio. Every property is its own silo.",
    ],
    plan: [
      {
        num: "01",
        tag: "IMPORT",
        title: "Centralize every lease",
        desc: "Upload your entire portfolio. Lease terms, rent schedules, break options, and counterparty details extracted and structured automatically.",
        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="7 10 12 15 17 10"/><line x1="12" y1="15" x2="12" y2="3"/></svg>
        )
      },
      {
        num: "02",
        tag: "TRACK",
        title: "Automate every deadline",
        desc: "Rent reviews, break options, and renewal windows tracked automatically. The right stakeholder alerted at 90, 60, and 30 days.",
        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: "ACT",
        title: "Negotiate on your terms",
        desc: "When a deadline surfaces, your team has the full context: current terms, market benchmarks, and counterparty history. No scrambling.",
        icon: (
          <svg width="20" height="20" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2.2" strokeLinecap="round" strokeLinejoin="round"><path d="M17 21v-2a4 4 0 0 0-4-4H5a4 4 0 0 0-4 4v2"/><circle cx="9" cy="7" r="4"/><path d="M23 21v-2a4 4 0 0 0-3-3.87"/><path d="M16 3.13a4 4 0 0 1 0 7.75"/></svg>
        )
      },
    ],
    planEyebrow: "How it works",
    planTitle: <>Built for property teams that <span className="accent">manage portfolios, not files</span>.</>,
    planBody: "Three steps from scattered lease data to full portfolio visibility.",
    failure: {
      eyebrow: "The cost of doing nothing",
      title: <>Every missed deadline <span className="accent">costs real money.</span></>,
      items: [
        { stat: "€95K", desc: "Average annual revenue lost per portfolio from missed rent reviews. One overlooked date means 12 months at below-market rates." },
        { stat: "47 days", desc: "Average time to locate and review lease terms for a single property when documents live in shared drives and email." },
        { stat: "3 in 10", desc: "Break options exercised too late. By the time the team reacts, the window has closed and you're locked in." },
      ],
    },
    gains: {
      eyebrow: "The outcome",
      title: <>What changes when your portfolio <span className="accent">runs itself</span>.</>,
      items: [
        "Every rent review surfaced 90 days out with current terms and market context.",
        "Break options never expire silently. The right person is alerted with full lease history.",
        "New leases generated from templates with escalation clauses and notice periods built in.",
        "One dashboard for every property, every lease, every obligation across the portfolio.",
      ],
    },
    pillars: [
      { tag: "Leases", title: "Commercial & residential", desc: "Standard and bespoke lease templates with rent escalation clauses, break options, and renewal alerts built in." },
      { tag: "Transactions", title: "Sale & purchase agreements", desc: "SPAs, deeds, and title documents tracked through every stage, due diligence, conditions, completion." },
      { tag: "Obligations", title: "Rent reviews & options", desc: "Rent review dates, option periods, and notice windows automatically extracted and flagged 90 days out." },
      { tag: "Counterparties", title: "Tenant & vendor register", desc: "Every tenant, vendor, and broker with their contracts, correspondence, and payment history in one record." },
    ],
    workflows: [
      "Lease template library with escalation & break-option logic",
      "SPA and title document management for acquisitions",
      "Rent review and option period tracking",
      "Tenant and vendor register linked to contracts",
      "Due diligence dataroom with granular access controls",
      "eIDAS-compliant electronic signatures",
    ],
    metrics: [["90d", "advance obligation alerts"], ["100%", "lease terms extracted"], ["1 place", "every property contract"]],
    integrations: ["Salesforce", "Yardi", "MRI Software", "DocuSign", "Slack", "SharePoint"],
    quote: { text: "Rent review dates used to live in spreadsheets and sticky notes. Now they surface automatically.", who: "Sara Lindgren", role: "Head of Asset Management, Nordika Properties" },
  },
};

function IndustrySolutionPage({ slug }) {
  const d = industryData[slug];
  if (!d) return null;
  return (
    <div>
      <section style={{ padding: "96px 0 0" }}>
        <div className="container">
          <div style={{ maxWidth: 880, margin: "0 auto", textAlign: "center" }}>
            <span className="eyebrow fade-up">{d.eyebrow}</span>
            <h1 className="display fade-up" style={{ marginTop: 20, fontSize: "clamp(40px, 5.4vw, 72px)" }}>{d.title}</h1>
            <p className="lede fade-up" style={{ margin: "28px auto 0", textAlign: "center" }}>{d.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>

          {/* Showcase panel */}
          {d.heroImage && (
          <div className="fade-up" style={{
            marginTop: 64,
            borderRadius: 20,
            position: "relative",
            overflow: "hidden",
            height: 480,
          }}>
            {/* Background photo */}
            <img src={d.heroImage} alt={d.heroAlt || ""} style={{
              position: "absolute", inset: 0, width: "100%", height: "100%",
              objectFit: "cover", objectPosition: "center 30%",
            }} />
            {/* Subtle bottom gradient only */}
            <div style={{ position: "absolute", inset: 0, background: "linear-gradient(180deg, transparent 40%, rgba(10,10,12,0.35) 100%)", pointerEvents: "none" }} />

            {/* Floating pills */}
            {d.heroFloats && d.heroFloats.map((f, i) => (
              <div key={i} style={{ position: "absolute", ...f.pos, padding: "7px 14px", background: "rgba(255,255,255,0.75)", borderRadius: 99, backdropFilter: "blur(16px)", display: "flex", alignItems: "center", gap: f.number ? 8 : 6, boxShadow: "0 2px 12px rgba(0,0,0,0.08)", zIndex: 2 }}>
                {f.number ? (
                  <>
                    <span style={{ fontSize: 13, fontWeight: 600, color: "var(--ink-1)", fontFamily: "var(--font-mono)" }}>{f.number}</span>
                    <span style={{ fontSize: 11, color: "var(--ink-2)" }}>{f.sublabel}</span>
                  </>
                ) : (
                  <>
                    <span style={{ fontSize: 12, fontWeight: 600, color: "var(--ink-1)" }}>{f.label}</span>
                    <span style={{ fontSize: 11, color: "var(--ink-2)" }}>{f.sublabel}</span>
                  </>
                )}
              </div>
            ))}

            {/* Obligations card - center */}
            {d.heroCard && (
            <div style={{
              position: "absolute", top: "50%", left: "50%", transform: "translate(-50%, -50%)",
              width: 280, padding: 0,
              background: "rgba(255,255,255,0.88)", borderRadius: 14,
              backdropFilter: "blur(20px)",
              boxShadow: "0 8px 32px rgba(0,0,0,0.12), 0 2px 8px rgba(0,0,0,0.06)",
              zIndex: 2, overflow: "hidden",
            }}>
              <div style={{ padding: "10px 16px", borderBottom: "1px solid rgba(0,0,0,0.06)", display: "flex", alignItems: "center", justifyContent: "space-between" }}>
                <span style={{ fontSize: 11, fontWeight: 600, letterSpacing: "0.06em", textTransform: "uppercase", color: "var(--ink-2)" }}>{d.heroCard.title}</span>
                <span style={{ fontSize: 10, color: "#E11D48", fontWeight: 600 }}>{d.heroCard.badge}</span>
              </div>
              {d.heroCard.items.map((item, i) => (
                <div key={i} style={{ display: "flex", alignItems: "center", justifyContent: "space-between", padding: "8px 16px", borderBottom: i < d.heroCard.items.length - 1 ? "1px solid rgba(0,0,0,0.05)" : "none" }}>
                  <div>
                    <div style={{ fontSize: 12, fontWeight: 500, color: "var(--ink-1)" }}>{item.name}</div>
                    <div style={{ fontSize: 10.5, color: "var(--ink-2)" }}>{item.type}</div>
                  </div>
                  <span style={{ fontSize: 11, fontWeight: 700, color: item.color }}>{item.days}</span>
                </div>
              ))}
            </div>
            )}
          </div>
          )}
        </div>
      </section>

      {/* Metrics bar - quick credibility */}
      <section className="section-tight">
        <div className="container">
          <div className="tick-rule" style={{ marginBottom: 8 }} />
          <div className="grid grid-3" style={{ gap: 0 }}>
            {d.metrics.map(([n, l], i) => (
              <div key={l} style={{ borderRight: i < d.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>

      {/* === StoryBrand Flow === */}

      {/* 1. PAINS (Problem) */}
      {d.pains && (
        <section className="section">
          <div className="container">
            <div style={{ display: "grid", gridTemplateColumns: "1fr 1fr", gap: 64, alignItems: "center" }} className="mob-stack">
              <div>
                <span className="eyebrow">Sound familiar?</span>
                <h2 className="h-section" style={{ marginTop: 18, fontSize: "clamp(28px, 3.2vw, 38px)" }}>Contracts shouldn't be the bottleneck in your sales cycle.</h2>
              </div>
              <div style={{ display: "flex", flexDirection: "column", gap: 16 }}>
                {d.pains.map((p, i) => (
                  <div key={i} style={{ display: "flex", gap: 14, alignItems: "flex-start" }}>
                    <span style={{ flex: "0 0 20px", marginTop: 2, color: "var(--ink-4)", display: "flex", alignItems: "center", justifyContent: "center" }}>
                      <svg width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2" strokeLinecap="round" strokeLinejoin="round"><line x1="18" y1="6" x2="6" y2="18"/><line x1="6" y1="6" x2="18" y2="18"/></svg>
                    </span>
                    <p style={{ fontSize: 15, color: "var(--ink-2)", lineHeight: 1.55, margin: 0 }}>{p}</p>
                  </div>
                ))}
              </div>
            </div>
          </div>
        </section>
      )}

      {/* 2. GUIDE + PLAN */}
      {d.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 48px" }}>
              <span className="eyebrow">{d.planEyebrow || "How it works"}</span>
              <h2 className="h-section" style={{ marginTop: 18, fontSize: "clamp(32px, 3.6vw, 44px)" }}>{d.planTitle}</h2>
              {d.planBody && <p className="lede" style={{ marginTop: 20, maxWidth: 600, marginLeft: "auto", marginRight: "auto" }}>{d.planBody}</p>}
            </div>
            <div style={{ display: "grid", gridTemplateColumns: "1fr 1fr 1fr", gap: "32px", position: "relative" }} className="mob-stack">
              <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 }} />
              {d.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" }}>
                  <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 }}>
                    <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 style={{ textAlign: "center", marginTop: 56 }}>
              <a className="btn btn-primary btn-lg" href="/book-demo">Book demo <Icon name="arrow" size={14} /></a>
            </div>
          </div>
        </section>
      )}

      {/* 3. FAILURE */}
      {d.failure && (
        <section className="section">
          <div className="container">
            <div style={{ textAlign: "center", maxWidth: 720, margin: "0 auto 56px" }}>
              <span className="eyebrow">{d.failure.eyebrow}</span>
              <h2 className="h-section" style={{ marginTop: 18, fontSize: "clamp(28px, 3.2vw, 38px)" }}>{d.failure.title}</h2>
            </div>
            <div className="grid grid-3 mob-stack" style={{ gap: 24 }}>
              {d.failure.items.map((item, i) => (
                <div key={i} style={{ padding: "32px 28px", background: "var(--bg-elevated)", border: "1px solid var(--line)", borderRadius: "var(--r-xl)" }}>
                  <div style={{ fontSize: "clamp(28px, 3vw, 36px)", fontWeight: 700, color: "var(--accent)", letterSpacing: "-0.02em", marginBottom: 12, fontFamily: "var(--font-sans)" }}>{item.stat}</div>
                  <p style={{ fontSize: 14, color: "var(--ink-3)", lineHeight: 1.65, margin: 0 }}>{item.desc}</p>
                </div>
              ))}
            </div>
          </div>
        </section>
      )}

      {/* 4. SUCCESS */}
      {d.gains && (
        <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: 64, alignItems: "center" }} className="mob-stack">
              <div>
                <span className="eyebrow">{d.gains.eyebrow}</span>
                <h2 className="h-section" style={{ marginTop: 18, fontSize: "clamp(28px, 3.2vw, 38px)" }}>{d.gains.title}</h2>
              </div>
              <div style={{ display: "flex", flexDirection: "column", gap: 16 }}>
                {d.gains.items.map((g, i) => (
                  <div key={i} style={{ display: "flex", gap: 14, alignItems: "flex-start" }}>
                    <span style={{ flex: "0 0 20px", marginTop: 2, color: "var(--accent)", display: "flex", alignItems: "center", justifyContent: "center" }}>
                      <svg width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2.5" strokeLinecap="round" strokeLinejoin="round"><polyline points="20 6 9 17 4 12"/></svg>
                    </span>
                    <p style={{ fontSize: 15, color: "var(--ink-2)", lineHeight: 1.55, margin: 0 }}>{g}</p>
                  </div>
                ))}
              </div>
            </div>
          </div>
        </section>
      )}

      {/* Legacy sections for generic industry pages */}
      {slug !== "saas" && slug !== "finserv" && slug !== "realestate" && <section className="section">
        <div className="container">
          <div style={{ display: "grid", gridTemplateColumns: "1fr 1fr", gap: 64, alignItems: "start", marginBottom: 56 }}>
            <div>
              <span className="eyebrow">Coverage</span>
              <h2 className="h-section" style={{ marginTop: 18 }}>Every workflow, <em>by name</em>.</h2>
            </div>
            <p className="lede" style={{ paddingTop: 24 }}>
              Pre-built for the contract types, regulations, and review patterns that define this industry, not generic CLM repurposed.
            </p>
          </div>
          <div className="grid grid-2" style={{ gap: 16 }}>
            {d.pillars.map((p) => (
              <div key={p.tag} className="card" style={{ padding: 32 }}>
                <span className="tag tag-purple" style={{ marginBottom: 16 }}>{p.tag}</span>
                <h3 className="h-card" style={{ fontSize: 20, marginBottom: 8 }}>{p.title}</h3>
                <p style={{ fontSize: 14, color: "var(--ink-3)", lineHeight: 1.55, margin: 0 }}>{p.desc}</p>
              </div>
            ))}
          </div>
        </div>
      </section>}

      {slug !== "saas" && slug !== "finserv" && slug !== "realestate" && <section className="section" style={{ background: "var(--bg-soft)", borderTop: "1px solid var(--line)", borderBottom: "1px solid var(--line)" }}>
        <div className="container">
          <div style={{ marginBottom: 32 }}>
            <span className="eyebrow">What's included</span>
            <h2 className="h-section" style={{ marginTop: 18 }}>The <em>full kit</em>.</h2>
          </div>
          <div className="grid grid-2" style={{ gap: 0, border: "1px solid var(--line)", borderRadius: "var(--r-lg)", overflow: "hidden", background: "var(--bg-elevated)" }}>
            {d.workflows.map((w, i) => (
              <div key={i} style={{
                padding: "20px 24px",
                display: "flex", alignItems: "center", gap: 12,
                borderRight: i % 2 === 0 ? "1px solid var(--line)" : "none",
                borderBottom: i < d.workflows.length - 2 ? "1px solid var(--line)" : "none",
              }}>
                <span style={{ flex: "0 0 16px", color: "var(--accent)", display: "flex", alignItems: "center" }}>
                  <svg width="14" height="14" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2.8"><polyline points="20 6 9 17 4 12"/></svg>
                </span>
                <span style={{ fontSize: 14.5, color: "var(--ink-2)" }}>{w}</span>
              </div>
            ))}
          </div>
        </div>
      </section>}

      {slug !== "saas" && slug !== "finserv" && slug !== "realestate" && <section className="section">
        <div className="container">
          <div style={{ display: "grid", gridTemplateColumns: "1fr 1fr", gap: 64, alignItems: "center" }}>
            <div>
              <span className="eyebrow">Plays nicely</span>
              <h2 className="h-section" style={{ marginTop: 18 }}>Native to your <em>industry stack</em>.</h2>
              <p className="lede" style={{ marginTop: 18 }}>
                Pre-built integrations for the systems your team already lives in. API and webhooks for the rest.
              </p>
            </div>
            <div style={{ display: "flex", flexWrap: "wrap", gap: 10 }}>
              {d.integrations.map((i) => (
                <span key={i} className="tag" style={{ height: 36, padding: "0 16px", fontSize: 13.5 }}>{i}</span>
              ))}
            </div>
          </div>
        </div>
      </section>}

      {slug !== "saas" && slug !== "finserv" && slug !== "realestate" && <section className="section">
        <div className="container" style={{ maxWidth: 920 }}>
          <div className="card" style={{ padding: 56 }}>
            <span className="eyebrow">Customer story</span>
            <p style={{ fontFamily: "var(--font-serif)", fontStyle: "italic", fontSize: "clamp(28px, 3.4vw, 40px)", lineHeight: 1.2, letterSpacing: "-0.01em", margin: "20px 0 28px", color: "var(--ink-1)" }}>
              "{d.quote.text}"
            </p>
            <div style={{ display: "flex", alignItems: "center", gap: 14, paddingTop: 24, borderTop: "1px solid var(--line)" }}>
              <span style={{ width: 40, height: 40, borderRadius: "50%", background: "linear-gradient(135deg, #C7D2FE, #7B61FF)" }} />
              <div>
                <div style={{ fontSize: 14, fontWeight: 500 }}>{d.quote.who}</div>
                <div style={{ fontSize: 13, color: "var(--ink-4)" }}>{d.quote.role}</div>
              </div>
            </div>
          </div>
        </div>
      </section>}

      {/* Feature deep-dives */}
      {slug === "saas" && <SaasFeatureSections />}
      {slug === "saas" && <SaasDeptSection />}
      {slug === "finserv" && <FinservFeatureSections />}
      {slug === "finserv" && <FinservDeptSection />}
      {slug === "realestate" && <RealEstateFeatureSections />}
      <FinalCTA />
    </div>
  );
}

function RealEstateApprovalMockup() {
  const stages = [
    { label: "Offer submitted", color: "#7B61FF", done: true },
    { label: "Legal review", color: "#7B61FF", done: true },
    { label: "CFO sign-off", color: "#B97A00", done: false, active: true },
    { label: "Exchange", color: "var(--ink-5)", done: false },
    { label: "Completion", color: "var(--ink-5)", done: 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)" }}>SPA · 14 Birchwood Lane</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 CFO</span>
      </div>
      <div style={{ padding: "18px 18px 14px" }}>
        <div style={{ display: "flex", alignItems: "center", gap: 0, marginBottom: 18 }}>
          {stages.map((s, i) => (
            <React.Fragment key={i}>
              <div style={{ display: "flex", flexDirection: "column", alignItems: "center", gap: 5 }}>
                <div style={{ width: 28, height: 28, borderRadius: "50%", background: s.done ? s.color : s.active ? "rgba(185,122,0,0.12)" : "var(--bg-soft)", border: `2px solid ${s.done ? s.color : s.active ? "#B97A00" : "var(--line)"}`, display: "flex", alignItems: "center", justifyContent: "center" }}>
                  {s.done ? <svg width="12" height="12" viewBox="0 0 24 24" fill="none" stroke="white" strokeWidth="3"><polyline points="20 6 9 17 4 12"/></svg>
                    : s.active ? <div style={{ width: 8, height: 8, borderRadius: "50%", background: "#B97A00" }} />
                    : <div style={{ width: 6, height: 6, borderRadius: "50%", background: "var(--line)" }} />}
                </div>
                <span style={{ fontSize: 9.5, color: s.done ? "var(--ink-2)" : s.active ? "#B97A00" : "var(--ink-5)", fontWeight: s.active ? 600 : 400, whiteSpace: "nowrap" }}>{s.label}</span>
              </div>
              {i < stages.length - 1 && <div style={{ flex: 1, height: 2, background: s.done ? "#7B61FF" : "var(--line)", marginBottom: 16, marginTop: -2 }} />}
            </React.Fragment>
          ))}
        </div>
        <div style={{ padding: 12, borderRadius: 9, border: "1px solid rgba(185,122,0,0.25)", background: "rgba(185,122,0,0.05)" }}>
          <div style={{ fontSize: 10.5, fontWeight: 700, color: "#B97A00", letterSpacing: "0.06em", textTransform: "uppercase", marginBottom: 4 }}>Approval required</div>
          <div style={{ fontSize: 12, color: "var(--ink-2)" }}>Deal value <strong>€2.4M</strong> requires CFO sign-off before exchange of contracts.</div>
        </div>
      </div>
    </div>
  );
}

function RealEstatePermissionsMockup() {
  const roles = [
    { name: "Lars Eriksson", role: "Lead Broker", access: "Full access", color: "#7B61FF" },
    { name: "Anna Svensson", role: "Buyer's Solicitor", access: "Deal documents only", color: "#0EA5E9" },
    { name: "Helix Capital (Buyer)", role: "External party", access: "Read-only, NDA-gated", color: "#16A34A" },
    { name: "Marcus Björk", role: "Asset Manager", access: "No financial terms", 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)" }}>Access control · 14 Birchwood Lane</span>
        <span style={{ fontSize: 10.5, color: "var(--ink-4)" }}>4 parties</span>
      </div>
      <div style={{ padding: "12px 14px", display: "flex", flexDirection: "column", gap: 8 }}>
        {roles.map((r, i) => (
          <div key={i} style={{ display: "flex", alignItems: "center", gap: 10, padding: "9px 12px", borderRadius: 8, border: "1px solid var(--line)", background: "var(--bg-soft)" }}>
            <div style={{ width: 28, height: 28, borderRadius: "50%", background: r.color + "22", display: "flex", alignItems: "center", justifyContent: "center", fontSize: 10, fontWeight: 700, color: r.color, flexShrink: 0 }}>
              {r.name.split(" ").map(n => n[0]).join("")}
            </div>
            <div style={{ flex: 1, minWidth: 0 }}>
              <div style={{ fontSize: 12.5, fontWeight: 600, color: "var(--ink-1)", whiteSpace: "nowrap", overflow: "hidden", textOverflow: "ellipsis" }}>{r.name}</div>
              <div style={{ fontSize: 11, color: "var(--ink-4)" }}>{r.role}</div>
            </div>
            <span style={{ fontSize: 10.5, color: r.color, background: r.color + "15", border: `1px solid ${r.color}33`, borderRadius: 4, padding: "2px 7px", whiteSpace: "nowrap", fontWeight: 500 }}>{r.access}</span>
          </div>
        ))}
      </div>
    </div>
  );
}

function RealEstateDocHubMockup() {
  const categories = [
    { label: "Sale & Purchase", docs: ["SPA - 14 Birchwood Lane", "Title Register", "Fixtures & Fittings List"], color: "#7B61FF" },
    { label: "Due Diligence", docs: ["Environmental Report", "Planning Conditions", "Structural Survey"], color: "#0EA5E9" },
    { label: "Tenancy", docs: ["AST, Unit 4A", "Section 21 Notice", "Deposit Protection Cert"], 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: "11px 18px", borderBottom: "1px solid var(--line)", display: "flex", alignItems: "center", gap: 8 }}>
        <svg width="12" height="12" viewBox="0 0 24 24" fill="none" stroke="var(--ink-4)" strokeWidth="2"><circle cx="11" cy="11" r="7"/><line x1="21" y1="21" x2="16.65" y2="16.65"/></svg>
        <span style={{ fontSize: 12, color: "var(--ink-4)" }}>Search all property documents…</span>
      </div>
      <div style={{ padding: 14, display: "flex", flexDirection: "column", gap: 10 }}>
        {categories.map((cat, ci) => (
          <div key={ci}>
            <div style={{ fontSize: 10, fontWeight: 700, letterSpacing: "0.08em", textTransform: "uppercase", color: cat.color, marginBottom: 6 }}>{cat.label}</div>
            <div style={{ display: "flex", flexDirection: "column", gap: 5 }}>
              {cat.docs.map((doc, di) => (
                <div key={di} style={{ display: "flex", alignItems: "center", gap: 8, padding: "7px 10px", borderRadius: 7, border: "1px solid var(--line)", background: "var(--bg-soft)" }}>
                  <svg width="11" height="11" viewBox="0 0 24 24" fill="none" stroke="var(--ink-4)" strokeWidth="1.8"><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={{ fontSize: 12, color: "var(--ink-2)", fontWeight: 500 }}>{doc}</span>
                </div>
              ))}
            </div>
          </div>
        ))}
      </div>
    </div>
  );
}

function RealEstateNegotiationMockup() {
  const events = [
    { type: "system", msg: "SPA v3 uploaded - 14 Birchwood Lane" },
    { initials: "BS", color: "#0EA5E9", label: "Buyer's Solicitor", time: "45 min ago", msg: "Clause 8.3 (completion date) amended to 30 June. Please confirm seller acceptance." },
    { initials: "SS", color: "#7B61FF", label: "Seller's Solicitor", time: "2 hours ago", msg: "Title indemnity insurance confirmed. Updated SPA attached for buyer 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)" }}>Negotiation · 14 Birchwood Lane SPA</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 RealEstateRepositoryMockup() {
  const contracts = [
    { name: "14 Birchwood Lane", type: "SPA", status: "Exchanged", statusColor: "#7B61FF", statusBg: "rgba(110,86,207,0.08)" },
    { name: "Unit 4A, Nordika House", type: "AST", status: "Active", statusColor: "#16A34A", statusBg: "rgba(22,163,74,0.08)" },
    { name: "Warehouse, SE14 7PP", type: "Lease", status: "Renewal due", statusColor: "#B97A00", statusBg: "rgba(185,122,0,0.08)" },
    { name: "Office Suite C, Kvist Sq", type: "LOI", status: "Under offer", statusColor: "#0EA5E9", statusBg: "rgba(14,165,233,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: "11px 18px", borderBottom: "1px solid var(--line)", display: "flex", alignItems: "center", gap: 8 }}>
        <div style={{ flex: 1, display: "flex", alignItems: "center", gap: 8, padding: "5px 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 properties and contracts…
        </div>
      </div>
      <div style={{ display: "grid", gridTemplateColumns: "1fr 60px 90px", 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>Property</span><span>Type</span><span>Status</span>
      </div>
      {contracts.map((c, i) => (
        <div key={i} style={{ display: "grid", gridTemplateColumns: "1fr 60px 90px", 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: 10.5, color: "var(--ink-4)", fontWeight: 500 }}>{c.type}</span>
          <span style={{ fontSize: 10.5, fontWeight: 600, color: c.statusColor, background: c.statusBg, border: `1px solid ${c.statusColor}33`, borderRadius: 99, padding: "2px 7px", textAlign: "center", whiteSpace: "nowrap" }}>{c.status}</span>
        </div>
      ))}
    </div>
  );
}

function RealEstateObligationsMockup() {
  const items = [
    { name: "Unit 4A, Rent Review", date: "1 Jun 2026", days: 13, daysColor: "#E11D48", note: "Market review clause" },
    { name: "Warehouse SE14, Break Option", date: "30 Jun 2026", days: 42, daysColor: "#B97A00", note: "Tenant opt-out window" },
    { name: "Office Suite C, Lease Expiry", date: "31 Dec 2026", days: 226, daysColor: "#16A34A", note: "Renewal negotiation due" },
    { name: "14 Birchwood, Snagging Deadline", date: "15 Jul 2026", days: 57, daysColor: "#B97A00", note: "Post-completion obligation" },
  ];
  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)" }}>Obligations</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 }}>1 urgent</span>
      </div>
      <div style={{ display: "grid", gridTemplateColumns: "1fr 80px 42px", 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>Obligation</span><span>Deadline</span><span style={{ textAlign: "right" }}>Days</span>
      </div>
      {items.map((r, i) => (
        <div key={i} style={{ display: "grid", gridTemplateColumns: "1fr 80px 42px", padding: "10px 18px", borderBottom: i < items.length - 1 ? "1px solid var(--line)" : "none", alignItems: "center" }}>
          <div>
            <div style={{ fontSize: 12.5, fontWeight: 500, color: "var(--ink-1)" }}>{r.name}</div>
            <div style={{ fontSize: 10.5, color: "var(--ink-4)", marginTop: 1 }}>{r.note}</div>
          </div>
          <span style={{ fontSize: 11.5, color: "var(--ink-3)" }}>{r.date}</span>
          <span style={{ fontSize: 12, fontWeight: 700, color: r.daysColor, textAlign: "right" }}>{r.days}d</span>
        </div>
      ))}
    </div>
  );
}

function RealEstateFeatureSections() {
  const checkIcon = <svg width="13" height="13" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2.8" style={{ flexShrink: 0 }}><polyline points="20 6 9 17 4 12"/></svg>;

  // Intro heading section
  const IntroSection = () => (
    <section className="section" style={{ background: "var(--bg-soft)", borderTop: "1px solid var(--line)", borderBottom: "1px solid var(--line)" }}>
      <div className="container" style={{ maxWidth: 760, textAlign: "center" }}>
        <span className="eyebrow">Approval workflows</span>
        <h2 className="h-section" style={{ marginTop: 18 }}>Take control of <em>complex contract workflows</em>.</h2>
        <p style={{ fontSize: 16, color: "var(--ink-3)", lineHeight: 1.65, marginTop: 18 }}>
          Workflows with an integrated approval system need to be in place to keep your team moving fast and securely. Give your team the ability to quickly create, send, and track contracts, with a clear understanding of approval rights, so every deal keeps moving toward the closing table.
        </p>
      </div>
    </section>
  );

  const sections = [
    {
      eyebrow: "Approval Workflows",
      h2: <>Every deal through <em>the right hands</em>, fast.</>,
      body: "From offer to exchange, every high-value transaction needs the right eyes on it before ink dries. Set approval rules by deal size, property type, or counterparty, and contracts route automatically to legal, finance, and senior management.",
      bullets: [
        "Auto-route SPAs, lease agreements, and LOIs based on deal value.",
        "Multi-party chains: legal, CFO, asset management, nothing moves without sign-off.",
        "Full audit trail from first draft to completion.",
      ],
      cta: { label: "Explore Approvals", href: "/platform/negotiation" },
      mockup: <RealEstateApprovalMockup />,
      flip: false,
    },
    {
      eyebrow: "Advanced Permissions",
      h2: <>The right access for every <em>party in the deal</em>.</>,
      body: "Real estate deals involve buyers, sellers, solicitors, agents, lenders, and surveyors, each with different rights. ContractControl lets you set granular access per person, per document, so sensitive terms stay confidential and every party sees exactly what they need.",
      bullets: [
        "Role-based access: broker, buyer, solicitor, external surveyor, each scoped precisely.",
        "NDA-gated access for buyers before financial terms are shared.",
        "Audit log of every view, download, and edit, per user, per document.",
      ],
      cta: { label: "Explore Permissions", href: "/platform/power-modules/permissions" },
      mockup: <RealEstatePermissionsMockup />,
      flip: true,
    },
    {
      eyebrow: "Document Hub",
      h2: <>One organised home for <em>every property document</em>.</>,
      body: "SPAs, title registers, ASTs, planning conditions, survey reports, every document for every property in one searchable hub. No more hunting through email threads or shared drives when a completion date is looming.",
      bullets: [
        "Organised by deal, property, or document type, find anything in seconds.",
        "Full version history: always know which SPA is the executed copy.",
        "Controlled sharing with external solicitors and buyers, no email attachments.",
      ],
      cta: { label: "Explore Document Hub", href: "/platform/power-modules/document-hub" },
      mockup: <RealEstateDocHubMockup />,
      flip: false,
    },
    {
      eyebrow: "Negotiation",
      h2: <>Buyers, sellers, and solicitors <em>in one workspace</em>.</>,
      body: "Stop chasing redlines over email. Bring all parties into a shared workspace where comments, amendments, and version history live in one place. From heads of terms to final SPA, every exchange tracked, nothing lost.",
      bullets: [
        "Collaborate with buyer's and seller's solicitors in real time.",
        "Comment on specific clauses, completion dates, break options, title indemnities.",
        "Full version history: see every redline, who made it, and when.",
      ],
      cta: { label: "Explore Negotiation", href: "/platform/negotiation" },
      mockup: <RealEstateNegotiationMockup />,
      flip: true,
    },
    {
      eyebrow: "Repository",
      h2: <>Your entire portfolio, <em>contract by contract</em>.</>,
      body: "Every property, every agreement, every counterparty, in one searchable record. Whether it's a residential sale, a commercial lease, or an LOI, your team can pull up the right document in seconds and always know where a deal stands.",
      bullets: [
        "Search across your entire portfolio by property, contract type, or status.",
        "Link contracts to properties, SPAs, leases, licences, and side letters in one record.",
        "Share with solicitors and agents without losing control of your documents.",
      ],
      cta: { label: "Explore Repository", href: "/platform/repository" },
      mockup: <RealEstateRepositoryMockup />,
      flip: false,
    },
    {
      eyebrow: "Obligations",
      h2: <>Never miss a rent review, break option, or <em>completion deadline</em>.</>,
      body: "Lease renewals, rent reviews, break clauses, and post-completion obligations are easy to miss, until they cost you. ContractControl extracts key dates automatically and alerts the right person 90, 60, and 30 days before the deadline.",
      bullets: [
        "Rent reviews, break options, and lease expiries flagged automatically.",
        "Alerts at 90 · 60 · 30 days, to the asset manager, solicitor, or broker.",
        "Never lose a break option or let a lease roll into an unwanted term again.",
      ],
      cta: { label: "Explore Obligations", href: "/platform/obligations" },
      mockup: <RealEstateObligationsMockup />,
      flip: true,
    },
  ];

  return (
    <>
      {sections.map((s, i) => (
        <section key={i} className="section" style={i % 2 === 0 ? {} : { background: "var(--bg-soft)", borderTop: "1px solid var(--line)", borderBottom: "1px solid var(--line)" }}>
          <div className="container">
            <div className="mob-stack" style={{ display: "grid", gridTemplateColumns: "1fr 1fr", gap: 64, alignItems: "center", direction: s.flip ? "rtl" : "ltr" }}>
              <div style={{ direction: "ltr" }}>
                <span className="eyebrow">{s.eyebrow}</span>
                <h2 className="h-section" style={{ marginTop: 18 }}>{s.h2}</h2>
                <p style={{ fontSize: 15.5, color: "var(--ink-3)", lineHeight: 1.6, margin: "18px 0 24px" }}>{s.body}</p>
                <div style={{ display: "flex", flexDirection: "column", gap: 10, marginBottom: 28 }}>
                  {s.bullets.map((b, bi) => (
                    <div key={bi} style={{ display: "flex", gap: 10, alignItems: "flex-start", fontSize: 14, color: "var(--ink-2)", lineHeight: 1.5 }}>
                      <span style={{ color: "var(--accent)", marginTop: 2 }}>{checkIcon}</span>
                      {b}
                    </div>
                  ))}
                </div>
                <a href={s.cta.href} className="btn-explore mob-hide">
                  {s.cta.label} <Icon name="arrow" size={13} />
                </a>
              </div>
              <div style={{ direction: "ltr" }}>
                <div className="showcase-panel-mockup" style={{ borderRadius: 16, border: "1px solid var(--line)", aspectRatio: "1" }}>
                  {s.mockup}
                </div>
                <a href={s.cta.href} className="btn-explore mob-show" style={{ marginTop: 28 }}>
                  {s.cta.label} <Icon name="arrow" size={13} />
                </a>
              </div>
            </div>
          </div>
        </section>
      ))}
    </>
  );
}

function FinservDeptMockup({ dept }) {
  if (dept === "Legal & Compliance") {
    const rows = [
      { id: "REG-041", type: "DORA", subject: "AWS EMEA, ICT Register", status: "compliant", color: "var(--success)" },
      { id: "REG-042", type: "MiFID II", subject: "Client Disclosure Pack", status: "review due", color: "var(--warning)" },
      { id: "REG-043", type: "GDPR", subject: "DPA, Stripe Payments", status: "compliant", color: "var(--success)" },
      { id: "REG-044", type: "PSD2", subject: "Outsourcing Agreement", status: "needs action", color: "var(--danger)" },
    ];
    return (
      <div style={{ background: "var(--bg-elevated)", border: "1px solid var(--line)", borderRadius: 14, overflow: "hidden" }}>
        <div style={{ display: "flex", justifyContent: "space-between", padding: "10px 16px", borderBottom: "1px solid var(--line)", background: "var(--bg-soft)" }}>
          <span style={{ fontSize: 12, fontWeight: 500, color: "var(--ink-2)" }}>Regulatory contract register</span>
          <span style={{ fontSize: 11.5, color: "var(--danger)", fontWeight: 500 }}>1 needs action</span>
        </div>
        {rows.map((r, i) => (
          <div key={i} style={{ display: "grid", gridTemplateColumns: "56px 56px 1fr auto", gap: 10, alignItems: "center", padding: "9px 16px", borderBottom: i < rows.length - 1 ? "1px solid var(--line)" : "none" }}>
            <span style={{ fontSize: 10, color: "var(--ink-4)", fontFamily: "var(--font-mono)" }}>{r.id}</span>
            <span style={{ fontSize: 10.5, fontWeight: 600, color: "var(--accent)", background: "rgba(124,92,211,0.08)", padding: "2px 6px", borderRadius: 4 }}>{r.type}</span>
            <span style={{ fontSize: 12.5, color: "var(--ink-2)" }}>{r.subject}</span>
            <span style={{ fontSize: 10.5, padding: "2px 8px", borderRadius: 99, background: r.color + "18", border: `1px solid ${r.color}33`, color: r.color, whiteSpace: "nowrap" }}>{r.status}</span>
          </div>
        ))}
      </div>
    );
  }
  if (dept === "Sales") {
    const deals = [
      { name: "Helix Capital", type: "NDA", value: "-", status: "Auto-sent", color: "var(--accent)" },
      { name: "Nordic Payments AB", type: "MSA", value: "€180k", status: "Signing", color: "var(--success)" },
      { name: "Fintra Group", type: "Term Sheet", value: "€420k", status: "Redlining", color: "var(--warning)" },
      { name: "Velo Bank", type: "MSA", value: "€95k", status: "In review", color: "var(--warning)" },
    ];
    return (
      <div style={{ background: "var(--bg-elevated)", border: "1px solid var(--line)", borderRadius: 14, overflow: "hidden" }}>
        <div style={{ display: "flex", justifyContent: "space-between", padding: "10px 16px", borderBottom: "1px solid var(--line)", background: "var(--bg-soft)" }}>
          <span style={{ fontSize: 12, fontWeight: 500, color: "var(--ink-2)" }}>Active deals</span>
          <span style={{ fontSize: 11.5, color: "var(--success)", fontWeight: 500 }}>€695k pipeline</span>
        </div>
        {deals.map((d, i) => (
          <div key={i} style={{ display: "grid", gridTemplateColumns: "1fr 72px 52px auto", gap: 10, alignItems: "center", padding: "9px 16px", borderBottom: i < deals.length - 1 ? "1px solid var(--line)" : "none" }}>
            <span style={{ fontSize: 12.5, fontWeight: 500, color: "var(--ink-1)" }}>{d.name}</span>
            <span style={{ fontSize: 11.5, color: "var(--ink-4)" }}>{d.type}</span>
            <span style={{ fontSize: 11.5, fontFamily: "var(--font-mono)", color: "var(--ink-3)" }}>{d.value}</span>
            <span style={{ fontSize: 10.5, padding: "2px 8px", borderRadius: 99, background: d.color + "18", border: `1px solid ${d.color}33`, color: d.color, whiteSpace: "nowrap" }}>{d.status}</span>
          </div>
        ))}
      </div>
    );
  }
  if (dept === "Finance") {
    const items = [
      { name: "Bloomberg, Data Licence", date: "Jul 15", type: "Renewal", risk: "Medium", color: "var(--warning)" },
      { name: "Refinitiv, Feed Agreement", date: "Aug 1", type: "Opt-out deadline", risk: "Low", color: "var(--success)" },
      { name: "Stripe, Processing MSA", date: "Sep 12", type: "Price escalation", risk: "High", color: "var(--danger)" },
    ];
    return (
      <div style={{ background: "var(--bg-elevated)", border: "1px solid var(--line)", borderRadius: 14, overflow: "hidden" }}>
        <div style={{ display: "flex", justifyContent: "space-between", padding: "10px 16px", borderBottom: "1px solid var(--line)", background: "var(--bg-soft)" }}>
          <span style={{ fontSize: 12, fontWeight: 500, color: "var(--ink-2)" }}>Upcoming obligations</span>
          <span style={{ fontSize: 11.5, color: "var(--danger)", fontWeight: 500 }}>1 high risk</span>
        </div>
        {items.map((it, i) => (
          <div key={i} style={{ display: "grid", gridTemplateColumns: "1fr 60px 100px auto", gap: 10, alignItems: "center", padding: "9px 16px", borderBottom: i < items.length - 1 ? "1px solid var(--line)" : "none" }}>
            <span style={{ fontSize: 12.5, fontWeight: 500, color: "var(--ink-1)" }}>{it.name}</span>
            <span style={{ fontSize: 11, fontFamily: "var(--font-mono)", color: "var(--ink-4)" }}>{it.date}</span>
            <span style={{ fontSize: 11.5, color: "var(--ink-3)" }}>{it.type}</span>
            <span style={{ fontSize: 10.5, padding: "2px 8px", borderRadius: 99, background: it.color + "18", border: `1px solid ${it.color}33`, color: it.color }}>{it.risk}</span>
          </div>
        ))}
      </div>
    );
  }
  if (dept === "Procurement") {
    const vendors = [
      { name: "AWS EMEA", category: "ICT Infrastructure", dora: "Critical", status: "Tracked" },
      { name: "Salesforce FSC", category: "CRM", dora: "Important", status: "Tracked" },
      { name: "ServiceNow", category: "ITSM", dora: "Important", status: "Alert" },
    ];
    return (
      <div style={{ background: "var(--bg-elevated)", border: "1px solid var(--line)", borderRadius: 14, overflow: "hidden" }}>
        <div style={{ display: "flex", justifyContent: "space-between", padding: "10px 16px", borderBottom: "1px solid var(--line)", background: "var(--bg-soft)" }}>
          <span style={{ fontSize: 12, fontWeight: 500, color: "var(--ink-2)" }}>DORA vendor register</span>
          <span style={{ fontSize: 11.5, color: "var(--ink-4)" }}>3 ICT suppliers</span>
        </div>
        {vendors.map((v, i) => (
          <div key={i} style={{ display: "grid", gridTemplateColumns: "1fr 100px 72px auto", gap: 10, alignItems: "center", padding: "9px 16px", borderBottom: i < vendors.length - 1 ? "1px solid var(--line)" : "none" }}>
            <span style={{ fontSize: 12.5, fontWeight: 500, color: "var(--ink-1)" }}>{v.name}</span>
            <span style={{ fontSize: 11.5, color: "var(--ink-4)" }}>{v.category}</span>
            <span style={{ fontSize: 10.5, fontWeight: 600, color: v.dora === "Critical" ? "var(--danger)" : "var(--warning)" }}>{v.dora}</span>
            <span style={{ fontSize: 10.5, padding: "2px 8px", borderRadius: 99, background: v.status === "Alert" ? "var(--danger)18" : "var(--success)18", border: `1px solid ${v.status === "Alert" ? "var(--danger)" : "var(--success)"}33`, color: v.status === "Alert" ? "var(--danger)" : "var(--success)" }}>{v.status}</span>
          </div>
        ))}
      </div>
    );
  }
  if (dept === "HR & People") {
    const docs = [
      { name: "Sofia H., Offer Letter", type: "Employment", status: "Signed", color: "var(--success)" },
      { name: "Ravi D., NDA + IP Assignment", type: "Onboarding", status: "Pending", color: "var(--warning)" },
      { name: "Contractor MSA · Tandem Legal", type: "Contractor", status: "Auto-sent", color: "var(--accent)" },
    ];
    return (
      <div style={{ background: "var(--bg-elevated)", border: "1px solid var(--line)", borderRadius: 14, overflow: "hidden" }}>
        <div style={{ display: "flex", justifyContent: "space-between", padding: "10px 16px", borderBottom: "1px solid var(--line)", background: "var(--bg-soft)" }}>
          <span style={{ fontSize: 12, fontWeight: 500, color: "var(--ink-2)" }}>People contracts</span>
          <span style={{ fontSize: 11.5, color: "var(--ink-4)" }}>This month</span>
        </div>
        {docs.map((d, i) => (
          <div key={i} style={{ display: "grid", gridTemplateColumns: "1fr 90px auto", gap: 10, alignItems: "center", padding: "9px 16px", borderBottom: i < docs.length - 1 ? "1px solid var(--line)" : "none" }}>
            <span style={{ fontSize: 12, fontWeight: 500, color: "var(--ink-1)" }}>{d.name}</span>
            <span style={{ fontSize: 11.5, color: "var(--ink-4)" }}>{d.type}</span>
            <span style={{ fontSize: 10.5, padding: "2px 8px", borderRadius: 99, background: d.color + "18", border: `1px solid ${d.color}33`, color: d.color }}>{d.status}</span>
          </div>
        ))}
      </div>
    );
  }
  return null;
}

function FinservDeptSection() {
  const depts = [
    { label: "Legal & Compliance", title: "Audit-ready contracts, every regulation covered.", desc: "Legal and Compliance teams use ContractControl to maintain a live register of DORA, MiFID II, PSD2, and GDPR-relevant contracts. Every obligation tracked, every audit trail immutable.", bullets: ["DORA-aligned ICT contract register, always current", "Regulator-ready audit export in one click", "Obligations and review cycles surfaced automatically"] },
    { label: "Sales", title: "NDAs and MSAs at the speed of a deal.", desc: "Sales sends NDAs from their CRM in seconds. MSAs generated from templates, approval-routed, and signed before the counterparty loses interest. No legal bottleneck on standard paper.", bullets: ["Self-serve NDA and MSA from CRM or intake form", "Approval chain triggered automatically by deal value", "e-Sign sent the moment everyone has approved"] },
    { label: "Finance", title: "No surprise renewals. No missed obligations.", desc: "Finance gets a live view of every vendor renewal, price escalation, and payment term, flagged 90 days out with risk scores. Spreadsheets replaced by structured contract data.", bullets: ["Auto-renewal and opt-out alerts at 90 · 60 · 30 days", "Payment terms and liability caps structured per contract", "Spend impact surfaced before every renewal decision"] },
    { label: "Procurement", title: "DORA third-party risk, managed in contracts.", desc: "Procurement manages every ICT vendor from first NDA to DORA register entry. Criticality flags, exit strategies, and concentration risk, auto-maintained from contract data.", bullets: ["DORA Art. 28 ICT register auto-maintained from contracts", "Criticality and concentration risk flags per vendor", "Exit strategy and sub-contractor terms tracked automatically"] },
    { label: "HR & People", title: "Offer letters and NDAs without involving legal.", desc: "HR sends employment contracts, NDAs, and IP assignments in minutes, templated, approval-routed, and signed. Regulated roles get the right clauses automatically.", bullets: ["Offer letters and NDAs from templates in under 60 seconds", "Regulated role clauses auto-applied by position type", "eSignature triggered automatically once approved"] },
  ];
  const [active, setActive] = React.useState(0);
  const dept = depts[active];
  return (
    <section className="section" style={{ background: "var(--bg-soft)", borderTop: "1px solid var(--line)", borderBottom: "1px solid var(--line)" }}>
      <div className="container">
        <div style={{ textAlign: "center", maxWidth: 640, margin: "0 auto 40px" }}>
          <span className="eyebrow">Built for every team</span>
          <h2 className="h-section" style={{ marginTop: 16 }}>The platform your whole org <em>actually uses</em>.</h2>
          <p className="lede" style={{ margin: "16px auto 0", textAlign: "center" }}>Every department in a regulated business touches contracts. ContractControl gives each team the view they need, without creating compliance gaps.</p>
        </div>
        <div style={{ display: "flex", justifyContent: "center", gap: 8, flexWrap: "wrap", marginBottom: 40 }}>
          {depts.map((d, i) => (
            <button key={d.label} onClick={() => setActive(i)} style={{
              height: 38, padding: "0 20px", borderRadius: 999, border: "1px solid",
              borderColor: i === active ? "var(--accent)" : "var(--line-strong)",
              background: i === active ? "var(--accent)" : "transparent",
              color: i === active ? "white" : "var(--ink-2)",
              fontSize: 13.5, fontWeight: 500, cursor: "pointer", transition: "all 120ms",
            }}>{d.label}</button>
          ))}
        </div>
        <div className="mob-stack" style={{ display: "grid", gridTemplateColumns: "1fr 1fr", gap: 40, alignItems: "center", background: "var(--bg-elevated)", border: "1px solid var(--line)", borderRadius: "var(--r-xl)", padding: 40 }}>
          <div>
            <span style={{ fontSize: 11, fontWeight: 700, letterSpacing: "0.1em", textTransform: "uppercase", color: "var(--accent)", display: "block", marginBottom: 14 }}>{dept.label}</span>
            <h3 style={{ fontSize: "clamp(22px, 2.8vw, 30px)", fontWeight: 500, letterSpacing: "-0.02em", lineHeight: 1.2, margin: "0 0 16px" }}>{dept.title}</h3>
            <p style={{ fontSize: 14.5, color: "var(--ink-3)", lineHeight: 1.6, margin: "0 0 20px" }}>{dept.desc}</p>
            <div style={{ display: "flex", flexDirection: "column", gap: 10 }}>
              {dept.bullets.map((b, i) => (
                <div key={i} style={{ display: "flex", gap: 10, alignItems: "flex-start", fontSize: 13.5, color: "var(--ink-2)" }}>
                  <span style={{ color: "var(--accent)", marginTop: 2, flexShrink: 0 }}>
                    <svg width="13" height="13" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2.8"><polyline points="20 6 9 17 4 12"/></svg>
                  </span>
                  {b}
                </div>
              ))}
            </div>
          </div>
          <div>
            <div className="showcase-panel-mockup" style={{ borderRadius: 16, border: "1px solid var(--line)", aspectRatio: "1" }}>
              <FinservDeptMockup dept={dept.label} />
            </div>
          </div>
        </div>
      </div>
    </section>
  );
}

function FinservTemplatesMockup() {
  const templates = [
    { name: "NDA, Standard", type: "NDA", sent: "Auto-send", status: "Active", count: "142 sent" },
    { name: "Vendor MSA", type: "MSA", sent: "On request", status: "Active", count: "38 sent" },
    { name: "DPA, GDPR Schedule B", type: "DPA", sent: "Auto-attach", status: "Active", count: "89 sent" },
    { name: "ICT Supplier Agreement", type: "DORA", sent: "On request", status: "Active", count: "14 sent" },
  ];
  return (
    <div style={{ background: "var(--bg-elevated)", border: "1px solid var(--line)", borderRadius: 14, overflow: "hidden" }}>
      <div style={{ padding: "10px 16px", borderBottom: "1px solid var(--line)", background: "var(--bg-soft)", display: "flex", justifyContent: "space-between", alignItems: "center" }}>
        <span style={{ fontSize: 12, fontWeight: 500, color: "var(--ink-2)" }}>Template library</span>
        <span style={{ fontSize: 11, color: "var(--accent)", fontWeight: 500 }}>4 active templates</span>
      </div>
      <div style={{ display: "grid", gridTemplateColumns: "60px 1fr 80px 70px auto", gap: 0, padding: "6px 14px", background: "var(--bg-soft)", borderBottom: "1px solid var(--line)" }}>
        {["Type", "Template", "Trigger", "Status", ""].map((h, i) => (
          <span key={i} style={{ fontSize: 10, fontWeight: 600, letterSpacing: "0.08em", textTransform: "uppercase", color: "var(--ink-4)" }}>{h}</span>
        ))}
      </div>
      {templates.map((t, i) => (
        <div key={i} style={{ display: "grid", gridTemplateColumns: "60px 1fr 80px 70px auto", gap: 0, alignItems: "center", padding: "9px 14px", borderBottom: i < templates.length - 1 ? "1px solid var(--line)" : "none" }}>
          <span style={{ fontSize: 10.5, fontWeight: 600, color: "var(--accent)", background: "rgba(124,92,211,0.08)", padding: "2px 0", borderRadius: 4, display: "inline-flex", alignItems: "center", justifyContent: "center", width: 44, textAlign: "center" }}>{t.type}</span>
          <span style={{ fontSize: 12, color: "var(--ink-1)", fontWeight: 500, paddingRight: 8 }}>{t.name}</span>
          <span style={{ fontSize: 11, color: "var(--ink-4)" }}>{t.sent}</span>
          <span style={{ fontSize: 10.5, padding: "2px 8px", borderRadius: 99, background: "var(--success)18", border: "1px solid var(--success)33", color: "var(--success)" }}>{t.status}</span>
          <span style={{ fontSize: 10.5, color: "var(--ink-4)", whiteSpace: "nowrap" }}>{t.count}</span>
        </div>
      ))}
      <div style={{ padding: "10px 16px", borderTop: "1px solid var(--line)", fontSize: 11.5, color: "var(--ink-4)", display: "flex", justifyContent: "space-between" }}>
        <span>283 contracts auto-generated this quarter</span>
        <span style={{ color: "var(--success)", fontWeight: 500 }}>● All live</span>
      </div>
    </div>
  );
}

function FinservApprovalMockup() {
  const rules = [
    { trigger: "Value > €500k", approvers: ["Legal", "CFO", "Compliance"], color: "var(--danger)" },
    { trigger: "ICT / DORA vendor", approvers: ["Risk", "Legal"], color: "var(--warning)" },
    { trigger: "New counterparty", approvers: ["Legal", "Finance"], color: "var(--warning)" },
    { trigger: "Value ≤ €50k", approvers: ["Manager"], color: "var(--success)" },
  ];
  const steps = [
    { label: "Legal", status: "Approved", color: "var(--success)" },
    { label: "CFO", status: "Approved", color: "var(--success)" },
    { label: "Compliance", status: "Pending", color: "var(--warning)" },
  ];
  return (
    <div style={{ background: "var(--bg-elevated)", border: "1px solid var(--line)", borderRadius: 14, overflow: "hidden" }}>
      <div style={{ padding: "10px 16px", borderBottom: "1px solid var(--line)", background: "var(--bg-soft)", display: "flex", justifyContent: "space-between", alignItems: "center" }}>
        <span style={{ fontSize: 12, fontWeight: 500, color: "var(--ink-2)" }}>Approval rules</span>
        <span style={{ fontSize: 11, color: "var(--ink-4)" }}>4 active</span>
      </div>
      {rules.map((r, i) => (
        <div key={i} style={{ display: "flex", alignItems: "center", gap: 10, padding: "9px 16px", borderBottom: "1px solid var(--line)" }}>
          <svg width="12" height="12" viewBox="0 0 24 24" fill="none" stroke={r.color} strokeWidth="2"><polygon points="13 2 3 14 12 14 11 22 21 10 12 10 13 2"/></svg>
          <span style={{ fontSize: 12, color: "var(--ink-2)", flex: 1 }}>
            <span style={{ fontWeight: 600, color: r.color }}>{r.trigger}</span>
            <span style={{ color: "var(--ink-4)", margin: "0 5px" }}>→</span>
            {r.approvers.join(" + ")}
          </span>
        </div>
      ))}
      <div style={{ padding: "10px 16px", background: "var(--bg-soft)", borderTop: "1px solid var(--line)" }}>
        <div style={{ fontSize: 10.5, fontWeight: 600, letterSpacing: "0.08em", textTransform: "uppercase", color: "var(--ink-4)", marginBottom: 10 }}>Helix Financial, Vendor MSA · €1.2M</div>
        <div style={{ display: "flex", alignItems: "center" }}>
          {steps.map((s, i) => (
            <React.Fragment key={i}>
              <div style={{ display: "flex", flexDirection: "column", alignItems: "center", gap: 4 }}>
                <div style={{ width: 26, height: 26, borderRadius: "50%", background: s.status === "Approved" ? "var(--success)" : "var(--bg-elevated)", border: `2px solid ${s.color}`, display: "flex", alignItems: "center", justifyContent: "center" }}>
                  {s.status === "Approved"
                    ? <svg width="11" height="11" viewBox="0 0 24 24" fill="none" stroke="white" strokeWidth="3"><polyline points="20 6 9 17 4 12"/></svg>
                    : <div style={{ width: 7, height: 7, borderRadius: "50%", background: s.color }} />
                  }
                </div>
                <span style={{ fontSize: 10, color: "var(--ink-3)", whiteSpace: "nowrap" }}>{s.label}</span>
              </div>
              {i < steps.length - 1 && <div style={{ flex: 1, height: 2, background: i === 0 ? "var(--success)" : "var(--line)", margin: "0 4px", marginBottom: 16 }} />}
            </React.Fragment>
          ))}
        </div>
      </div>
    </div>
  );
}

function FinservObligationsMockup() {
  const items = [
    { name: "Stripe, Vendor MSA", date: "Jun 10", days: "14d", type: "Auto-renewal", risk: "High", color: "var(--danger)" },
    { name: "AWS EMEA, ICT Agreement", date: "Jun 28", days: "32d", type: "DORA review", risk: "High", color: "var(--danger)" },
    { name: "Bloomberg, Data Licence", date: "Jul 15", days: "49d", type: "Renewal window", risk: "Medium", color: "var(--warning)" },
    { name: "Refinitiv, Feed Agreement", date: "Aug 1", days: "66d", type: "Opt-out deadline", risk: "Low", color: "var(--success)" },
  ];
  return (
    <div style={{ background: "var(--bg-elevated)", border: "1px solid var(--line)", borderRadius: 14, overflow: "hidden" }}>
      <div style={{ display: "flex", justifyContent: "space-between", alignItems: "center", padding: "10px 16px", borderBottom: "1px solid var(--line)", background: "var(--bg-soft)" }}>
        <span style={{ fontSize: 12, fontWeight: 500, color: "var(--ink-2)" }}>Upcoming obligations</span>
        <span style={{ fontSize: 11.5, color: "var(--danger)", fontWeight: 500 }}>2 high risk</span>
      </div>
      {items.map((it, i) => (
        <div key={i} style={{ display: "grid", gridTemplateColumns: "1fr 44px 72px auto", gap: 10, alignItems: "center", padding: "10px 16px", borderBottom: i < items.length - 1 ? "1px solid var(--line)" : "none" }}>
          <div>
            <div style={{ fontSize: 12.5, fontWeight: 500, color: "var(--ink-1)" }}>{it.name}</div>
            <div style={{ fontSize: 11, color: "var(--ink-4)", marginTop: 2 }}>{it.type}</div>
          </div>
          <span style={{ fontSize: 11, fontFamily: "var(--font-mono)", color: it.color, fontWeight: 700, textAlign: "right" }}>{it.days}</span>
          <span style={{ fontSize: 11, color: "var(--ink-4)", fontFamily: "var(--font-mono)", textAlign: "right" }}>{it.date}</span>
          <span style={{ fontSize: 10.5, padding: "2px 8px", borderRadius: 99, background: it.color + "18", border: `1px solid ${it.color}33`, color: it.color, whiteSpace: "nowrap" }}>{it.risk}</span>
        </div>
      ))}
      <div style={{ padding: "10px 16px", fontSize: 11.5, color: "var(--ink-4)", borderTop: "1px solid var(--line)", display: "flex", justifyContent: "space-between" }}>
        <span>Alerts sent at 90 · 60 · 30 days</span>
        <span style={{ color: "var(--success)", fontWeight: 500 }}>● Active</span>
      </div>
    </div>
  );
}

function FinservClickwrapMockup() {
  return (
    <div style={{ position: "relative", paddingBottom: 56 }}>
      {/* Audit Trail, main card */}
      <div style={{ background: "rgba(235,240,255,0.7)", border: "1px solid rgba(124,92,211,0.18)", borderRadius: 14, padding: "18px 20px", boxShadow: "0 4px 24px rgba(0,0,0,0.06)" }}>
        <div style={{ display: "flex", justifyContent: "space-between", alignItems: "center", marginBottom: 16 }}>
          <span style={{ fontSize: 11, fontWeight: 700, letterSpacing: "0.1em", textTransform: "uppercase", color: "#5B4EAD" }}>Audit Trail</span>
          <span style={{ fontSize: 11, padding: "2px 8px", borderRadius: 99, background: "rgba(124,92,211,0.1)", border: "1px solid rgba(124,92,211,0.25)", color: "var(--accent)", fontWeight: 600 }}>Coming Soon</span>
        </div>
        <div style={{ display: "flex", alignItems: "center", gap: 12, marginBottom: 14 }}>
          <div style={{ width: 36, height: 36, borderRadius: "50%", background: "linear-gradient(135deg, #C7D2FE, #7B61FF)", flexShrink: 0, display: "flex", alignItems: "center", justifyContent: "center", fontSize: 13, fontWeight: 700, color: "white" }}>M</div>
          <span style={{ fontSize: 13.5, fontWeight: 500, color: "#1e1b3a", flex: 1 }}>molly@acme.com</span>
          <span style={{ fontSize: 11, padding: "3px 10px", borderRadius: 6, background: "rgba(124,92,211,0.12)", color: "#5B4EAD", fontWeight: 600 }}>Executed</span>
        </div>
        <div style={{ background: "white", borderRadius: 8, padding: "10px 14px", border: "1px solid rgba(124,92,211,0.12)" }}>
          <div style={{ fontSize: 11.5, color: "#5B4EAD", marginBottom: 4 }}>Signed: 19 May, 2026 · 09:14 UTC</div>
          <div style={{ fontSize: 11.5, color: "#6B7280" }}>IP Address: 82.114.22.47</div>
        </div>
      </div>
      {/* Certificate of Completion, floating card */}
      <div style={{ position: "absolute", bottom: 0, left: 16, right: 0, background: "white", border: "1px solid var(--line)", borderRadius: 12, padding: "14px 18px", boxShadow: "0 8px 32px rgba(0,0,0,0.10)" }}>
        <div style={{ fontSize: 11, fontWeight: 700, letterSpacing: "0.1em", textTransform: "uppercase", color: "var(--ink-3)", marginBottom: 12 }}>Certificate of Completion</div>
        {[["Clickwrap ID", "CW-2026-0419"], ["Agreement", "Privacy Policy v3.1"], ["Signed by", "molly@acme.com"], ["Status", "Executed"]].map(([k, v], i) => (
          <div key={i} style={{ display: "flex", justifyContent: "space-between", alignItems: "center", padding: "6px 0", borderBottom: i < 3 ? "1px solid var(--line)" : "none" }}>
            <span style={{ fontSize: 12, color: "var(--ink-4)" }}>{k}</span>
            <span style={{ fontSize: 12, fontWeight: 500, color: i === 3 ? "var(--success)" : "var(--ink-2)" }}>{v}</span>
          </div>
        ))}
      </div>
    </div>
  );
}

function FinservDocHubMockup() {
  const categories = [
    { label: "Regulatory", docs: ["DORA Framework Policy", "MiFID II Compliance Manual", "GDPR Data Processing Policy"] },
    { label: "Vendor & ICT", docs: ["ICT Third-Party Risk Policy", "Critical Vendor Register", "Exit Strategy Template"] },
    { label: "Internal Controls", docs: ["AML Procedures v4", "KYC Onboarding Policy", "Incident Response Playbook"] },
  ];
  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: "14px 18px", borderBottom: "1px solid var(--line)", display: "flex", alignItems: "center", justifyContent: "space-between" }}>
        <span style={{ fontWeight: 600, color: "var(--ink-1)", fontSize: 13 }}>Document Hub</span>
        <span style={{ fontSize: 11.5, color: "var(--ink-4)", background: "var(--bg-soft)", border: "1px solid var(--line)", borderRadius: 6, padding: "2px 8px" }}>18 documents</span>
      </div>
      {categories.map((cat, ci) => (
        <div key={ci}>
          <div style={{ padding: "8px 18px 4px", fontSize: 10.5, fontWeight: 600, color: "var(--ink-4)", letterSpacing: "0.06em", textTransform: "uppercase", background: "var(--bg-soft)" }}>{cat.label}</div>
          {cat.docs.map((doc, di) => (
            <div key={di} style={{ padding: "10px 18px", borderBottom: "1px solid var(--line)", display: "flex", alignItems: "center", gap: 10 }}>
              <svg width="14" height="14" viewBox="0 0 24 24" fill="none" stroke="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={{ color: "var(--ink-2)", flex: 1 }}>{doc}</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: "1px 7px", fontWeight: 500 }}>Current</span>
            </div>
          ))}
        </div>
      ))}
    </div>
  );
}

function FinservTermsMockup() {
  const terms = [
    { name: "Privacy Policy", version: "v3.2", accepts: "12,480", rate: "98%", updated: "12 Mar 2025" },
    { name: "Terms of Service", version: "v5.0", accepts: "12,480", rate: "97%", updated: "1 Jan 2025" },
    { name: "Cookie Policy", version: "v2.1", accepts: "11,902", rate: "95%", updated: "5 Feb 2025" },
    { name: "Data Processing Agreement", version: "v1.4", accepts: "3,210", rate: "100%", updated: "20 Apr 2025" },
  ];
  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: "14px 18px", borderBottom: "1px solid var(--line)", display: "flex", alignItems: "center", justifyContent: "space-between" }}>
        <span style={{ fontWeight: 600, color: "var(--ink-1)", fontSize: 13 }}>Terms Management</span>
        <span style={{ fontSize: 11.5, color: "var(--accent)", background: "rgba(124,92,211,0.08)", border: "1px solid rgba(124,92,211,0.2)", borderRadius: 6, padding: "2px 8px", fontWeight: 500 }}>Live</span>
      </div>
      <div style={{ display: "grid", gridTemplateColumns: "1fr 44px 64px 64px 80px", padding: "7px 18px", fontSize: 11, fontWeight: 600, color: "var(--ink-4)", letterSpacing: "0.04em", textTransform: "uppercase", background: "var(--bg-soft)", borderBottom: "1px solid var(--line)" }}>
        <span>Document</span><span style={{ textAlign: "center" }}>Ver.</span><span style={{ textAlign: "right" }}>Accepts</span><span style={{ textAlign: "right" }}>Rate</span><span style={{ textAlign: "right" }}>Updated</span>
      </div>
      {terms.map((t, i) => (
        <div key={i} style={{ display: "grid", gridTemplateColumns: "1fr 44px 64px 64px 80px", padding: "11px 18px", borderBottom: i < terms.length - 1 ? "1px solid var(--line)" : "none", alignItems: "center" }}>
          <span style={{ color: "var(--ink-1)", fontWeight: 500 }}>{t.name}</span>
          <span style={{ textAlign: "center", color: "var(--ink-4)", fontSize: 12 }}>{t.version}</span>
          <span style={{ textAlign: "right", color: "var(--ink-2)" }}>{t.accepts}</span>
          <span style={{ textAlign: "right", color: "var(--success)", fontWeight: 500 }}>{t.rate}</span>
          <span style={{ textAlign: "right", color: "var(--ink-4)", fontSize: 11.5 }}>{t.updated}</span>
        </div>
      ))}
    </div>
  );
}

function FinservFeatureSections() {
  const checkIcon = (
    <svg width="13" height="13" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2.8" style={{ flexShrink: 0 }}><polyline points="20 6 9 17 4 12"/></svg>
  );
  const sections = [
    {
      eyebrow: "Intake",
      h2: <>Templatize NDAs, <em>put them on autopilot</em>.</>,
      body: "High-volume contracts like NDAs don't need a lawyer every time. Templatize once, set your send trigger, and ContractControl handles the rest, fewer errors, faster close, no bottleneck.",
      bullets: ["NDA, DPA, and MSA templates ready in seconds", "Auto-send on trigger or self-serve by counterparty", "Every execution tracked with a full audit trail"],
      cta: { label: "Explore Intake", href: "/platform/intake" },
      mockup: <FinservTemplatesMockup />,
      flip: false,
    },
    {
      eyebrow: "Approval Workflows",
      h2: <>High-value contracts through <em>the right hands</em>.</>,
      body: "Set rules by value, contract type, or counterparty classification, and every high-value deal is automatically routed to the right approvers. Legal, CFO, Compliance. No one missed, no exceptions.",
      bullets: ["Rules based on value thresholds (e.g. > €500k) and DORA classification", "Multi-stakeholder chains, Legal, CFO, Risk, Compliance", "Nothing moves to signature until every approver has signed off"],
      cta: { label: "Explore eSignature", href: "/esignature" },
      mockup: <FinservApprovalMockup />,
      flip: true,
    },
    {
      eyebrow: "Obligations",
      h2: <>Eliminate undesirable <em>auto-renewals</em>.</>,
      body: "Never fall prey to a contract auto-renewal again. ContractControl surfaces every upcoming obligation, renewal windows, opt-out deadlines, DORA review dates, and alerts the right stakeholders 90, 60, and 30 days out.",
      bullets: ["Auto-extracted renewal, notice, and opt-out dates", "DORA review cycles and ICT supplier obligations tracked", "Alerts at 90 · 60 · 30 days to the right person"],
      cta: { label: "Explore Obligations", href: "/obligations" },
      mockup: <FinservObligationsMockup />,
      flip: false,
    },
    {
      eyebrow: "Clickwrap",
      h2: <>Tamper-proof audit trails, <em>coming soon</em>.</>,
      body: "Get a comprehensive audit trail for each executed clickwrap agreement, reducing litigation risk and ensuring enforceability. Signed timestamp, IP address, and certificate of completion for every execution.",
      bullets: ["Executed agreements with timestamp and IP capture", "Certificate of completion per agreement", "Legally enforceable in regulated jurisdictions"],
      cta: { label: "Sign up on the waiting list", href: "/platform/power-modules/clickwrap/waitlist" },
      badge: "Coming Soon",
      mockup: <FinservClickwrapMockup />,
      flip: true,
    },
    {
      eyebrow: "Document Hub",
      h2: <>One place for all your <em>regulatory documents</em>.</>,
      body: "Keep your policy library organized, versioned, and always up to date. From DORA framework policies to GDPR procedures, every document is searchable, current, and audit-ready.",
      bullets: ["Centralized library for regulatory, vendor, and internal policies", "Version control with full edit history", "Role-based access so the right people always find the right document"],
      cta: { label: "Explore Document Hub", href: "/platform/power-modules/document-hub" },
      mockup: <FinservDocHubMockup />,
      flip: false,
    },
  ];
  return (<>
    {sections.map((s, i) => (
      <section key={i} className="section" style={i % 2 === 1 ? { background: "var(--bg-soft)", borderTop: "1px solid var(--line)", borderBottom: "1px solid var(--line)" } : {}}>
        <div className="container">
          <div className="mob-stack" style={{ display: "grid", gridTemplateColumns: "1fr 1fr", gap: 64, alignItems: "center", direction: s.flip ? "rtl" : "ltr" }}>
            <div style={{ direction: "ltr" }}>
              <div style={{ display: "flex", alignItems: "center", gap: 10 }}>
                <span className="eyebrow">{s.eyebrow}</span>
                {s.badge && <span style={{ fontSize: 10.5, fontWeight: 600, padding: "2px 8px", borderRadius: 99, background: "rgba(124,92,211,0.1)", border: "1px solid rgba(124,92,211,0.25)", color: "var(--accent)" }}>{s.badge}</span>}
              </div>
              <h2 className="h-section" style={{ marginTop: 18 }}>{s.h2}</h2>
              <p style={{ fontSize: 15.5, color: "var(--ink-3)", lineHeight: 1.6, margin: "18px 0 24px" }}>{s.body}</p>
              <div style={{ display: "flex", flexDirection: "column", gap: 10, marginBottom: s.cta ? 28 : 0 }}>
                {s.bullets.map((b, bi) => (
                  <div key={bi} style={{ display: "flex", gap: 10, alignItems: "flex-start", fontSize: 14, color: "var(--ink-2)", lineHeight: 1.5 }}>
                    <span style={{ color: "var(--accent)", marginTop: 2 }}>{checkIcon}</span>
                    {b}
                  </div>
                ))}
              </div>
              {s.cta && <a href={s.cta.href} className="btn-explore mob-hide" style={{ marginTop: 28 }}>
                {s.cta.label} <Icon name="arrow" size={13} />
              </a>}
            </div>
            <div style={{ direction: "ltr" }}>
              <div className="showcase-panel-mockup" style={{ borderRadius: 16, border: "1px solid var(--line)", aspectRatio: "1" }}>
                {s.mockup}
              </div>
              {s.cta && <a href={s.cta.href} className="btn-explore mob-show" style={{ marginTop: 28 }}>
                {s.cta.label} <Icon name="arrow" size={13} />
              </a>}
            </div>
          </div>
        </div>
      </section>
    ))}
  </>);
}

function SaasRepositoryMockup() {
  const contracts = [
    { name: "Northwind AB, MSA", type: "MSA", status: "Active", color: "var(--success)" },
    { name: "Velora Group, NDA", type: "NDA", status: "Active", color: "var(--success)" },
    { name: "Kvist Systems, Order Form", type: "Order Form", status: "Renewing", color: "var(--warning)" },
    { name: "Helix AB, DPA", type: "DPA", status: "Active", color: "var(--success)" },
  ];
  return (
    <div style={{ position: "relative", paddingBottom: 48, width: "100%" }}>
      {/* Main panel, contract list */}
      <div style={{ background: "var(--bg-elevated)", border: "1px solid var(--line)", borderRadius: 14, overflow: "hidden", boxShadow: "0 4px 24px rgba(0,0,0,0.06)" }}>
        <div style={{ padding: "10px 14px", borderBottom: "1px solid var(--line)", background: "var(--bg-soft)", display: "flex", gap: 8, alignItems: "center" }}>
          <svg width="13" height="13" viewBox="0 0 24 24" fill="none" stroke="var(--ink-4)" strokeWidth="2"><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 contracts…</span>
          <div style={{ marginLeft: "auto", display: "flex", gap: 6 }}>
            {["MSA", "NDA", "Active"].map(f => (
              <span key={f} style={{ fontSize: 10.5, padding: "2px 8px", borderRadius: 99, background: "rgba(124,92,211,0.08)", border: "1px solid rgba(124,92,211,0.2)", color: "var(--accent)" }}>{f}</span>
            ))}
          </div>
        </div>
        {contracts.map((c, i) => (
          <div key={i} style={{ display: "flex", alignItems: "center", gap: 12, padding: "10px 14px", borderBottom: i < contracts.length - 1 ? "1px solid var(--line)" : "none", background: i === 2 ? "rgba(124,92,211,0.04)" : "transparent" }}>
            <span style={{ fontSize: 10.5, fontWeight: 600, color: "var(--accent)", background: "rgba(124,92,211,0.08)", padding: "2px 7px", borderRadius: 4, flexShrink: 0 }}>{c.type}</span>
            <span style={{ fontSize: 12.5, color: "var(--ink-1)", fontWeight: 500, flex: 1 }}>{c.name}</span>
            <span style={{ fontSize: 10.5, padding: "2px 8px", borderRadius: 99, background: c.color + "18", border: `1px solid ${c.color}33`, color: c.color, whiteSpace: "nowrap" }}>{c.status}</span>
            <svg width="12" height="12" viewBox="0 0 24 24" fill="none" stroke="var(--ink-4)" strokeWidth="2"><polyline points="9 18 15 12 9 6"/></svg>
          </div>
        ))}
      </div>
      {/* Floating detail card */}
      <div style={{ position: "absolute", bottom: 0, right: 0, width: "72%", background: "var(--bg-elevated)", border: "1px solid var(--line)", borderRadius: 12, padding: "14px 16px", boxShadow: "0 8px 32px rgba(0,0,0,0.10)" }}>
        <div style={{ fontSize: 10.5, fontWeight: 700, letterSpacing: "0.08em", textTransform: "uppercase", color: "var(--ink-4)", marginBottom: 10 }}>Kvist Systems, Order Form</div>
        <div style={{ display: "grid", gridTemplateColumns: "1fr 1fr", gap: "6px 16px" }}>
          {[["Owner", "Sara K."], ["Value", "€42,000"], ["Signed", "12 Apr 2026"], ["Renewal", "12 Apr 2027"]].map(([k, v]) => (
            <div key={k}>
              <div style={{ fontSize: 10, color: "var(--ink-4)", marginBottom: 1 }}>{k}</div>
              <div style={{ fontSize: 12, fontWeight: 500, color: "var(--ink-1)" }}>{v}</div>
            </div>
          ))}
        </div>
        <div style={{ marginTop: 10, paddingTop: 10, borderTop: "1px solid var(--line)", display: "flex", alignItems: "center", justifyContent: "space-between" }}>
          <span style={{ fontSize: 11, color: "var(--ink-4)" }}>Auto-renewal · 30-day notice window</span>
          <span style={{ fontSize: 10.5, padding: "2px 8px", borderRadius: 99, background: "var(--warning)18", border: "1px solid var(--warning)33", color: "var(--warning)" }}>Renewing</span>
        </div>
      </div>
    </div>
  );
}

function SaasObligationsMockup() {
  const upcoming = [
    { name: "Velora Group, SLA", days: "32d", type: "Price escalation", color: "var(--warning)" },
    { name: "Kvist Systems, Order Form", days: "49d", type: "Renewal window", color: "var(--success)" },
  ];
  return (
    <div style={{ position: "relative", paddingBottom: 52, width: "100%" }}>
      {/* Main contract card */}
      <div style={{ background: "var(--bg-elevated)", border: "1px solid var(--line)", borderRadius: 14, padding: "18px 20px", boxShadow: "0 4px 24px rgba(0,0,0,0.06)" }}>
        <div style={{ display: "flex", justifyContent: "space-between", alignItems: "flex-start", marginBottom: 16 }}>
          <div>
            <div style={{ fontSize: 10.5, fontWeight: 600, letterSpacing: "0.08em", textTransform: "uppercase", color: "var(--ink-4)", marginBottom: 4 }}>Northwind AB, MSA</div>
            <div style={{ fontSize: 11.5, color: "var(--ink-4)" }}>Auto-renewal · Jun 10, 2026</div>
          </div>
          <span style={{ fontSize: 10.5, padding: "2px 8px", borderRadius: 99, background: "var(--danger)18", border: "1px solid var(--danger)33", color: "var(--danger)" }}>High risk</span>
        </div>
        <div style={{ display: "grid", gridTemplateColumns: "1fr 1fr", gap: 12, marginBottom: 16 }}>
          <div style={{ background: "var(--bg-soft)", border: "1px solid var(--line)", borderRadius: 8, padding: "10px 12px" }}>
            <div style={{ fontSize: 10, color: "var(--ink-4)", marginBottom: 4 }}>Execution date</div>
            <div style={{ fontSize: 13, fontWeight: 600, color: "var(--ink-1)" }}>Jun 10, 2025</div>
          </div>
          <div style={{ background: "rgba(239,68,68,0.04)", border: "1px solid rgba(239,68,68,0.2)", borderRadius: 8, padding: "10px 12px" }}>
            <div style={{ fontSize: 10, color: "var(--danger)", marginBottom: 4 }}>Renewal date</div>
            <div style={{ fontSize: 13, fontWeight: 600, color: "var(--ink-1)" }}>Jun 10, 2026</div>
          </div>
        </div>
        <div style={{ display: "flex", alignItems: "center", gap: 8, paddingTop: 12, borderTop: "1px solid var(--line)" }}>
          <div style={{ flex: 1, height: 4, borderRadius: 99, background: "var(--line)", overflow: "hidden" }}>
            <div style={{ width: "85%", height: "100%", borderRadius: 99, background: "linear-gradient(90deg, var(--success), var(--danger))" }} />
          </div>
          <span style={{ fontSize: 11.5, fontWeight: 700, color: "var(--danger)", whiteSpace: "nowrap" }}>14 days left</span>
        </div>
      </div>
      {/* Upcoming list, floating card */}
      <div style={{ position: "absolute", bottom: 0, left: 0, right: 0, background: "var(--bg-elevated)", border: "1px solid var(--line)", borderRadius: 12, boxShadow: "0 8px 32px rgba(0,0,0,0.10)", overflow: "hidden" }}>
        <div style={{ display: "flex", justifyContent: "space-between", alignItems: "center", padding: "8px 14px", background: "var(--bg-soft)", borderBottom: "1px solid var(--line)" }}>
          <span style={{ fontSize: 11, fontWeight: 600, color: "var(--ink-3)" }}>Also coming up</span>
          <span style={{ fontSize: 10.5, color: "var(--ink-4)" }}>Alerts sent at 90 · 60 · 30 days</span>
        </div>
        {upcoming.map((u, i) => (
          <div key={i} style={{ display: "flex", alignItems: "center", gap: 10, padding: "8px 14px", borderBottom: i < upcoming.length - 1 ? "1px solid var(--line)" : "none" }}>
            <span style={{ fontSize: 11.5, fontWeight: 700, color: u.color, width: 28, flexShrink: 0 }}>{u.days}</span>
            <span style={{ fontSize: 12, color: "var(--ink-2)", flex: 1, fontWeight: 500 }}>{u.name}</span>
            <span style={{ fontSize: 10.5, color: "var(--ink-4)" }}>{u.type}</span>
          </div>
        ))}
      </div>
    </div>
  );
}

function SaasEsignMockup() {
  const rules = [
    { trigger: "Value > €50k", approvers: ["Legal", "CFO"], color: "var(--danger)" },
    { trigger: "Contract type = MSA", approvers: ["Legal Ops"], color: "var(--accent)" },
    { trigger: "New counterparty", approvers: ["Legal", "Finance"], color: "var(--warning)" },
    { trigger: "Value ≤ €10k", approvers: ["Manager"], color: "var(--success)" },
  ];
  const steps = [
    { label: "Legal Ops", status: "Approved", color: "var(--success)" },
    { label: "CFO sign-off", status: "Approved", color: "var(--success)" },
    { label: "e-Sign sent", status: "Sent", color: "var(--accent)" },
  ];
  return (
    <div style={{ background: "var(--bg-elevated)", border: "1px solid var(--line)", borderRadius: 14, overflow: "hidden" }}>
      <div style={{ padding: "10px 16px", borderBottom: "1px solid var(--line)", background: "var(--bg-soft)", display: "flex", justifyContent: "space-between", alignItems: "center" }}>
        <span style={{ fontSize: 12, fontWeight: 500, color: "var(--ink-2)" }}>Approval rules</span>
        <span style={{ fontSize: 11, color: "var(--ink-4)" }}>4 active</span>
      </div>
      {rules.map((r, i) => (
        <div key={i} style={{ display: "flex", alignItems: "center", gap: 10, padding: "9px 16px", borderBottom: "1px solid var(--line)" }}>
          <svg width="12" height="12" viewBox="0 0 24 24" fill="none" stroke={r.color} strokeWidth="2"><polygon points="13 2 3 14 12 14 11 22 21 10 12 10 13 2"/></svg>
          <span style={{ fontSize: 12, color: "var(--ink-2)", flex: 1 }}>
            <span style={{ fontWeight: 600, color: r.color }}>{r.trigger}</span>
            <span style={{ color: "var(--ink-4)", margin: "0 5px" }}>→</span>
            {r.approvers.join(" + ")}
          </span>
        </div>
      ))}
      <div style={{ padding: "10px 16px", background: "var(--bg-soft)", borderTop: "1px solid var(--line)" }}>
        <div style={{ fontSize: 10.5, fontWeight: 600, letterSpacing: "0.08em", textTransform: "uppercase", color: "var(--ink-4)", marginBottom: 10 }}>Northwind AB, MSA · Active flow</div>
        <div style={{ display: "flex", alignItems: "center", gap: 0 }}>
          {steps.map((s, i) => (
            <React.Fragment key={i}>
              <div style={{ display: "flex", flexDirection: "column", alignItems: "center", gap: 4 }}>
                <div style={{ width: 26, height: 26, borderRadius: "50%", background: s.color, display: "flex", alignItems: "center", justifyContent: "center" }}>
                  {s.status === "Sent"
                    ? <svg width="11" height="11" viewBox="0 0 24 24" fill="none" stroke="white" strokeWidth="2.5"><line x1="22" y1="2" x2="11" y2="13"/><polygon points="22 2 15 22 11 13 2 9 22 2"/></svg>
                    : <svg width="11" height="11" viewBox="0 0 24 24" fill="none" stroke="white" strokeWidth="3"><polyline points="20 6 9 17 4 12"/></svg>
                  }
                </div>
                <span style={{ fontSize: 10, color: "var(--ink-3)", whiteSpace: "nowrap" }}>{s.label}</span>
              </div>
              {i < steps.length - 1 && <div style={{ flex: 1, height: 2, background: "var(--success)", margin: "0 4px", marginBottom: 16 }} />}
            </React.Fragment>
          ))}
        </div>
      </div>
    </div>
  );
}

function SaasWorkspaceMockup() {
  const activity = [
    { type: "comment", user: "Anna L.", action: "Payment terms, flagging clause 8.2 for your review.", time: "2m ago", initials: "AL", color: "#7B61FF" },
    { type: "task", user: "Tomas B.", action: "assigned task: Confirm liability cap with finance.", time: "14m ago", initials: "TB", color: "#0891B2" },
    { type: "edit", user: "Sara K.", action: "updated Clause 12, SLA response times.", time: "1h ago", initials: "SK", color: "#059669" },
    { type: "comment", user: "Mira V.", action: "@anna this looks good to me, proceed to sign-off.", time: "2h ago", initials: "MV", color: "#DC2626" },
  ];
  return (
    <div style={{ background: "var(--bg-elevated)", border: "1px solid var(--line)", borderRadius: 14, overflow: "hidden" }}>
      <div style={{ padding: "10px 16px", borderBottom: "1px solid var(--line)", background: "var(--bg-soft)", display: "flex", justifyContent: "space-between", alignItems: "center" }}>
        <span style={{ fontSize: 12, fontWeight: 500, color: "var(--ink-2)" }}>Northwind AB, MSA · Activity</span>
        <span style={{ fontSize: 11, color: "var(--ink-4)" }}>v2.3 · 4 contributors</span>
      </div>
      {activity.map((a, i) => (
        <div key={i} style={{ display: "flex", gap: 12, padding: "11px 16px", borderBottom: i < activity.length - 1 ? "1px solid var(--line)" : "none", alignItems: "flex-start" }}>
          <div style={{ width: 26, height: 26, borderRadius: "50%", background: a.color, display: "flex", alignItems: "center", justifyContent: "center", flexShrink: 0, fontSize: 9, fontWeight: 700, color: "white", letterSpacing: "0.04em" }}>{a.initials}</div>
          <div style={{ flex: 1, minWidth: 0 }}>
            <div style={{ fontSize: 12.5, color: "var(--ink-1)" }}>
              <span style={{ fontWeight: 600 }}>{a.user}</span>
              <span style={{ color: "var(--ink-3)", marginLeft: 4 }}>{a.action}</span>
            </div>
          </div>
          <span style={{ fontSize: 10.5, color: "var(--ink-4)", whiteSpace: "nowrap", flexShrink: 0 }}>{a.time}</span>
        </div>
      ))}
    </div>
  );
}

function SaasNegotiationMockup() {
  const versions = [
    { version: "v3, Your edit", who: "Anna L.", time: "Just now", initials: "AL", color: "#7B61FF", current: true },
    { version: "v2, Counterparty redline", who: "Kvist Systems", time: "Yesterday", initials: "KS", color: "#0891B2", current: false },
    { version: "v1, First draft", who: "Tomas B.", time: "3 days ago", initials: "TB", color: "#059669", current: false },
  ];
  const comments = [
    { who: "Kvist Systems", text: "Adjusted payment terms to net-45, please review.", time: "Yesterday", initials: "KS", color: "#0891B2" },
    { who: "Anna L.", text: "@kvist Accepted net-45. Updated liability section in v3.", time: "Just now", initials: "AL", color: "#7B61FF" },
  ];
  return (
    <div style={{ background: "var(--bg-elevated)", border: "1px solid var(--line)", borderRadius: 14, overflow: "hidden" }}>
      <div style={{ padding: "10px 16px", borderBottom: "1px solid var(--line)", background: "var(--bg-soft)", display: "flex", justifyContent: "space-between", alignItems: "center" }}>
        <span style={{ fontSize: 12, fontWeight: 500, color: "var(--ink-2)" }}>Kvist Systems, MSA</span>
        <span style={{ fontSize: 11, padding: "2px 8px", borderRadius: 99, background: "var(--accent)18", border: "1px solid var(--accent)33", color: "var(--accent)" }}>Negotiating · v3</span>
      </div>
      <div style={{ padding: "12px 16px", borderBottom: "1px solid var(--line)" }}>
        <div style={{ fontSize: 10.5, fontWeight: 600, letterSpacing: "0.08em", textTransform: "uppercase", color: "var(--ink-4)", marginBottom: 10 }}>Version history</div>
        {versions.map((v, i) => (
          <div key={i} style={{ display: "flex", alignItems: "center", gap: 10, marginBottom: i < versions.length - 1 ? 8 : 0 }}>
            <div style={{ width: 24, height: 24, borderRadius: "50%", background: v.color, display: "flex", alignItems: "center", justifyContent: "center", fontSize: 8.5, fontWeight: 700, color: "white", flexShrink: 0 }}>{v.initials}</div>
            <div style={{ flex: 1 }}>
              <span style={{ fontSize: 12, fontWeight: v.current ? 600 : 400, color: v.current ? "var(--ink-1)" : "var(--ink-3)" }}>{v.version}</span>
              <span style={{ fontSize: 11, color: "var(--ink-4)", marginLeft: 6 }}>{v.who}</span>
            </div>
            <span style={{ fontSize: 10.5, color: "var(--ink-4)" }}>{v.time}</span>
            {v.current && <span style={{ fontSize: 10, padding: "1px 7px", borderRadius: 99, background: "var(--success)18", border: "1px solid var(--success)33", color: "var(--success)" }}>Current</span>}
          </div>
        ))}
      </div>
      <div style={{ padding: "12px 16px" }}>
        <div style={{ fontSize: 10.5, fontWeight: 600, letterSpacing: "0.08em", textTransform: "uppercase", color: "var(--ink-4)", marginBottom: 10 }}>Comments</div>
        {comments.map((c, i) => (
          <div key={i} style={{ display: "flex", gap: 8, marginBottom: i < comments.length - 1 ? 10 : 0 }}>
            <div style={{ width: 22, height: 22, borderRadius: "50%", background: c.color, display: "flex", alignItems: "center", justifyContent: "center", fontSize: 8, fontWeight: 700, color: "white", flexShrink: 0, marginTop: 1 }}>{c.initials}</div>
            <div style={{ flex: 1, background: "var(--bg-soft)", border: "1px solid var(--line)", borderRadius: 8, padding: "7px 10px" }}>
              <div style={{ fontSize: 11, fontWeight: 600, color: "var(--ink-2)", marginBottom: 3 }}>{c.who} <span style={{ fontWeight: 400, color: "var(--ink-4)" }}>· {c.time}</span></div>
              <div style={{ fontSize: 11.5, color: "var(--ink-2)", lineHeight: 1.4 }}>{c.text}</div>
            </div>
          </div>
        ))}
      </div>
    </div>
  );
}

function SaasFeatureSections() {
  const checkIcon = (
    <svg width="13" height="13" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2.8" style={{ flexShrink: 0 }}><polyline points="20 6 9 17 4 12"/></svg>
  );
  const sections = [
    {
      eyebrow: "Repository",
      h2: <>Every contract, <em>always findable</em>.</>,
      body: "One searchable repository for every agreement your company has ever signed. Filter by counterparty, type, owner, or status. Share a filtered view with exactly the people who need it, and no one else.",
      bullets: ["Full-text search across every contract and clause", "Filter by type, counterparty, owner, or status", "Scoped access, the right contracts with the right people"],
      cta: { label: "Explore Repository", href: "/repository" },
      mockup: <SaasRepositoryMockup />,
      flip: false,
    },
    {
      eyebrow: "Obligations",
      h2: <>Never miss a renewal <em>or a deadline</em>.</>,
      body: "ContractControl extracts every key date automatically, renewals, notice windows, opt-out deadlines, price escalations. The right stakeholders get alerted 90, 60, and 30 days in advance, so you act on your terms.",
      bullets: ["Auto-extracted renewal and termination dates", "Alerts at 90 · 60 · 30 days to the right owner", "Revenue impact and risk level surfaced upfront"],
      cta: { label: "Explore Obligations", href: "/obligations" },
      mockup: <SaasObligationsMockup />,
      flip: true,
    },
    {
      eyebrow: "Negotiation",
      h2: <>Redline, collaborate, <em>close faster</em>.</>,
      body: "Negotiate directly inside ContractControl, with your team and your counterparty. Redlines, comments, and version history all in one place. Everyone sees exactly what changed and who changed it.",
      bullets: ["Real-time redlining with your counterparty in one shared workspace", "Full version history, compare any two versions side by side", "Internal and external comments, @mentions, and task assignments"],
      cta: { label: "Explore Negotiation", href: "/negotiation" },
      mockup: <SaasNegotiationMockup />,
      flip: false,
    },
    {
      eyebrow: "eSignature",
      h2: <>The right approvers, <em>triggered automatically</em>.</>,
      body: "Set rules once, by contract value, type, or counterparty, and ContractControl routes every contract to the right approval chain. When everyone has signed off, e-sign goes out without anyone having to remember.",
      bullets: ["Rules based on value thresholds, contract type, and triggers", "Approval chains adapt automatically to each contract", "e-Sign sent the moment the last approval lands"],
      cta: { label: "Explore eSignature", href: "/esignature" },
      mockup: <SaasEsignMockup />,
      flip: true,
    },
  ];
  return (<>
    {sections.map((s, i) => (
      <section key={i} className="section" style={i % 2 === 1 ? { background: "var(--bg-soft)", borderTop: "1px solid var(--line)", borderBottom: "1px solid var(--line)" } : {}}>
        <div className="container">
          <div className="mob-stack" style={{ display: "grid", gridTemplateColumns: "1fr 1fr", gap: 64, alignItems: "center", direction: s.flip ? "rtl" : "ltr" }}>
            <div style={{ direction: "ltr" }}>
              <span className="eyebrow">{s.eyebrow}</span>
              <h2 className="h-section" style={{ marginTop: 18 }}>{s.h2}</h2>
              <p style={{ fontSize: 15.5, color: "var(--ink-3)", lineHeight: 1.6, margin: "18px 0 24px" }}>{s.body}</p>
              <div style={{ display: "flex", flexDirection: "column", gap: 10, marginBottom: 28 }}>
                {s.bullets.map((b, bi) => (
                  <div key={bi} style={{ display: "flex", gap: 10, alignItems: "flex-start", fontSize: 14, color: "var(--ink-2)", lineHeight: 1.5 }}>
                    <span style={{ color: "var(--accent)", marginTop: 2 }}>{checkIcon}</span>
                    {b}
                  </div>
                ))}
              </div>
              <a href={s.cta.href} className="btn-explore mob-hide">
                {s.cta.label} <Icon name="arrow" size={13} />
              </a>
            </div>
            <div style={{ direction: "ltr" }}>
              <div className="showcase-panel-mockup" style={{ borderRadius: 16, border: "1px solid var(--line)", aspectRatio: "1" }}>
                {s.mockup}
              </div>
              <a href={s.cta.href} className="btn-explore mob-show" style={{ marginTop: 28 }}>
                {s.cta.label} <Icon name="arrow" size={13} />
              </a>
            </div>
          </div>
        </div>
      </section>
    ))}
  </>);
}

function SaasDeptMockup({ dept }) {
  if (dept === "Legal Ops") {
    const rows = [
      { id: "REQ-114", type: "NDA", co: "Velora AB", status: "auto-draft", color: "var(--accent)" },
      { id: "REQ-115", type: "MSA", co: "Kvist Group", status: "in review", color: "var(--warning)" },
      { id: "REQ-116", type: "DPA", co: "Helix Legal", status: "needs attention", color: "var(--danger)" },
      { id: "REQ-117", type: "SoW", co: "Brevia", status: "auto-draft", color: "var(--accent)" },
    ];
    return (
      <div style={{ background: "var(--bg-elevated)", border: "1px solid var(--line)", borderRadius: 14, overflow: "hidden" }}>
        <div style={{ display: "flex", justifyContent: "space-between", padding: "10px 16px", borderBottom: "1px solid var(--line)", background: "var(--bg-soft)" }}>
          <span style={{ fontSize: 12, fontWeight: 500, color: "var(--ink-2)" }}>Intake queue</span>
          <span style={{ fontSize: 11.5, color: "var(--accent)", fontWeight: 500 }}>4 active</span>
        </div>
        {rows.map((r, i) => (
          <div key={i} style={{ display: "grid", gridTemplateColumns: "56px 40px 1fr auto", gap: 10, alignItems: "center", padding: "9px 16px", borderBottom: i < rows.length - 1 ? "1px solid var(--line)" : "none" }}>
            <span style={{ fontSize: 10.5, color: "var(--ink-4)", fontFamily: "var(--font-mono)" }}>{r.id}</span>
            <span style={{ fontSize: 12, fontWeight: 600, color: "var(--ink-1)" }}>{r.type}</span>
            <span style={{ fontSize: 12.5, color: "var(--ink-2)" }}>{r.co}</span>
            <span style={{ fontSize: 10.5, padding: "2px 8px", borderRadius: 99, background: r.color + "18", border: `1px solid ${r.color}33`, color: r.color, whiteSpace: "nowrap" }}>{r.status}</span>
          </div>
        ))}
      </div>
    );
  }
  if (dept === "Sales") {
    const deals = [
      { name: "Northwind AB", type: "MSA", value: "€84k", status: "Signing", color: "var(--success)" },
      { name: "Velora Group", type: "Order Form", value: "€42k", status: "In review", color: "var(--warning)" },
      { name: "Kvist Systems", type: "NDA", value: "-", status: "Auto-sent", color: "var(--accent)" },
      { name: "Brevia Holdings", type: "MSA", value: "€120k", status: "Redlining", color: "var(--warning)" },
    ];
    return (
      <div style={{ background: "var(--bg-elevated)", border: "1px solid var(--line)", borderRadius: 14, overflow: "hidden" }}>
        <div style={{ display: "flex", justifyContent: "space-between", padding: "10px 16px", borderBottom: "1px solid var(--line)", background: "var(--bg-soft)" }}>
          <span style={{ fontSize: 12, fontWeight: 500, color: "var(--ink-2)" }}>Active deals</span>
          <span style={{ fontSize: 11.5, color: "var(--success)", fontWeight: 500 }}>€246k pipeline</span>
        </div>
        {deals.map((d, i) => (
          <div key={i} style={{ display: "grid", gridTemplateColumns: "1fr 72px 48px auto", gap: 10, alignItems: "center", padding: "9px 16px", borderBottom: i < deals.length - 1 ? "1px solid var(--line)" : "none" }}>
            <span style={{ fontSize: 12.5, fontWeight: 500, color: "var(--ink-1)" }}>{d.name}</span>
            <span style={{ fontSize: 11.5, color: "var(--ink-4)" }}>{d.type}</span>
            <span style={{ fontSize: 11.5, fontFamily: "var(--font-mono)", color: "var(--ink-3)" }}>{d.value}</span>
            <span style={{ fontSize: 10.5, padding: "2px 8px", borderRadius: 99, background: d.color + "18", border: `1px solid ${d.color}33`, color: d.color, whiteSpace: "nowrap" }}>{d.status}</span>
          </div>
        ))}
      </div>
    );
  }
  if (dept === "Finance") {
    const items = [
      { name: "Velora MSA", date: "31 Jan", type: "Auto-renewal", risk: "High", color: "var(--danger)" },
      { name: "Northwind SLA", date: "14 Feb", type: "Price escalation", risk: "Medium", color: "var(--warning)" },
      { name: "Kvist License", date: "28 Feb", type: "Renewal", risk: "Low", color: "var(--success)" },
    ];
    return (
      <div style={{ background: "var(--bg-elevated)", border: "1px solid var(--line)", borderRadius: 14, overflow: "hidden" }}>
        <div style={{ display: "flex", justifyContent: "space-between", padding: "10px 16px", borderBottom: "1px solid var(--line)", background: "var(--bg-soft)" }}>
          <span style={{ fontSize: 12, fontWeight: 500, color: "var(--ink-2)" }}>Upcoming obligations</span>
          <span style={{ fontSize: 11.5, color: "var(--danger)", fontWeight: 500 }}>3 need action</span>
        </div>
        {items.map((it, i) => (
          <div key={i} style={{ display: "grid", gridTemplateColumns: "1fr 60px 1fr auto", gap: 10, alignItems: "center", padding: "9px 16px", borderBottom: i < items.length - 1 ? "1px solid var(--line)" : "none" }}>
            <span style={{ fontSize: 12.5, fontWeight: 500, color: "var(--ink-1)" }}>{it.name}</span>
            <span style={{ fontSize: 11, color: "var(--ink-4)", fontFamily: "var(--font-mono)" }}>{it.date}</span>
            <span style={{ fontSize: 11.5, color: "var(--ink-3)" }}>{it.type}</span>
            <span style={{ fontSize: 10.5, padding: "2px 8px", borderRadius: 99, background: it.color + "18", border: `1px solid ${it.color}33`, color: it.color }}>{it.risk}</span>
          </div>
        ))}
      </div>
    );
  }
  if (dept === "Procurement") {
    const vendors = [
      { name: "AWS (EMEA)", category: "Infrastructure", renewal: "90d", status: "Tracked" },
      { name: "Stripe", category: "Payments", renewal: "Annual", status: "Tracked" },
      { name: "Salesforce", category: "CRM", renewal: "45d", status: "Alert" },
    ];
    return (
      <div style={{ background: "var(--bg-elevated)", border: "1px solid var(--line)", borderRadius: 14, overflow: "hidden" }}>
        <div style={{ display: "flex", justifyContent: "space-between", padding: "10px 16px", borderBottom: "1px solid var(--line)", background: "var(--bg-soft)" }}>
          <span style={{ fontSize: 12, fontWeight: 500, color: "var(--ink-2)" }}>Vendor contracts</span>
          <span style={{ fontSize: 11.5, color: "var(--ink-4)" }}>3 active</span>
        </div>
        {vendors.map((v, i) => (
          <div key={i} style={{ display: "grid", gridTemplateColumns: "1fr 100px 48px auto", gap: 10, alignItems: "center", padding: "9px 16px", borderBottom: i < vendors.length - 1 ? "1px solid var(--line)" : "none" }}>
            <span style={{ fontSize: 12.5, fontWeight: 500, color: "var(--ink-1)" }}>{v.name}</span>
            <span style={{ fontSize: 11.5, color: "var(--ink-4)" }}>{v.category}</span>
            <span style={{ fontSize: 11, fontFamily: "var(--font-mono)", color: "var(--ink-3)" }}>{v.renewal}</span>
            <span style={{ fontSize: 10.5, padding: "2px 8px", borderRadius: 99, background: v.status === "Alert" ? "var(--danger)18" : "var(--success)18", border: `1px solid ${v.status === "Alert" ? "var(--danger)" : "var(--success)"}33`, color: v.status === "Alert" ? "var(--danger)" : "var(--success)" }}>{v.status}</span>
          </div>
        ))}
      </div>
    );
  }
  if (dept === "HR & People") {
    const docs = [
      { name: "Sofia H., Offer Letter", type: "Employment", status: "Signed", color: "var(--success)" },
      { name: "Ravi D., NDA", type: "Confidentiality", status: "Pending", color: "var(--warning)" },
      { name: "Contractor MSA · Tandem", type: "Contractor", status: "Auto-sent", color: "var(--accent)" },
    ];
    return (
      <div style={{ background: "var(--bg-elevated)", border: "1px solid var(--line)", borderRadius: 14, overflow: "hidden" }}>
        <div style={{ display: "flex", justifyContent: "space-between", padding: "10px 16px", borderBottom: "1px solid var(--line)", background: "var(--bg-soft)" }}>
          <span style={{ fontSize: 12, fontWeight: 500, color: "var(--ink-2)" }}>People contracts</span>
          <span style={{ fontSize: 11.5, color: "var(--ink-4)" }}>This month</span>
        </div>
        {docs.map((d, i) => (
          <div key={i} style={{ display: "grid", gridTemplateColumns: "1fr 96px auto", gap: 10, alignItems: "center", padding: "9px 16px", borderBottom: i < docs.length - 1 ? "1px solid var(--line)" : "none" }}>
            <span style={{ fontSize: 12, fontWeight: 500, color: "var(--ink-1)" }}>{d.name}</span>
            <span style={{ fontSize: 11.5, color: "var(--ink-4)" }}>{d.type}</span>
            <span style={{ fontSize: 10.5, padding: "2px 8px", borderRadius: 99, background: d.color + "18", border: `1px solid ${d.color}33`, color: d.color }}>{d.status}</span>
          </div>
        ))}
      </div>
    );
  }
  return null;
}

function SaasDeptSection() {
  const depts = [
    { label: "Legal Ops", title: "Intake to signature without the back-and-forth.", desc: "Legal Ops teams use ContractControl to eliminate the request queue. Self-serve intake routes every contract to the right workflow, templated, approved, and tracked without manual intervention.", bullets: ["Intake forms routed by type, value, and region", "SLA timers and real-time status for every request", "Full audit trail, no paper chase"], href: "/solutions/team/legal" },
    { label: "Sales", title: "MSAs and order forms at deal speed.", desc: "Sales sends standard paper from Salesforce in 60 seconds. Nothing waits in legal's queue that doesn't have to.", bullets: ["Self-serve MSA and NDA from CRM opportunity", "Approval routing by value, type, and region", "e-Sign triggered automatically on approval"], href: "/solutions/team/sales" },
    { label: "Finance", title: "Renewals tracked. Revenue protected.", desc: "Finance gets visibility into every auto-renewal, price escalation, and payment terms, up to 90 days out, with risk flags. No spreadsheets, no surprises.", bullets: ["Auto-renewal and escalation alerts at 90/60/30 days", "Payment terms and liability caps structured per contract", "Spend and ARR impact surfaced across the portfolio"], href: "/solutions/team/finance" },
    { label: "Procurement", title: "Vendor contracts from first email to signed.", desc: "Procurement manages every vendor relationship in one place, from NDA to MSA to renewal. Every obligation tracked, every opt-out date flagged in advance.", bullets: ["Vendor onboarding and contract capture in one flow", "Renewal windows and opt-out dates flagged automatically", "Full audit trail per vendor, per contract version"], href: "/solutions/team/procurement" },
    { label: "HR & People", title: "Offer letters and NDAs without the wait.", desc: "HR sends employment contracts and NDAs in minutes, generated from templates, approved by the right people, and signed without involving legal for every hire.", bullets: ["Offer letters and NDAs from templates in under 60 seconds", "Approval routing for level, comp threshold, and region", "eSignature triggered automatically once approved"], href: "/solutions/team/hr" },
  ];
  const [active, setActive] = React.useState(0);
  const dept = depts[active];
  return (
    <section className="section" style={{ background: "var(--bg-soft)", borderTop: "1px solid var(--line)", borderBottom: "1px solid var(--line)" }}>
      <div className="container">
        <div style={{ textAlign: "center", maxWidth: 640, margin: "0 auto 40px" }}>
          <span className="eyebrow">Built for every team</span>
          <h2 className="h-section" style={{ marginTop: 16 }}>The platform your whole org <em>actually uses</em>.</h2>
          <p className="lede" style={{ margin: "16px auto 0", textAlign: "center" }}>Legal isn't the only team in a contract. ContractControl gives every department the view they need, without stepping on each other.</p>
        </div>
        <div style={{ display: "flex", justifyContent: "center", gap: 8, flexWrap: "wrap", marginBottom: 40 }}>
          {depts.map((d, i) => (
            <button key={d.label} onClick={() => setActive(i)} style={{
              height: 38, padding: "0 20px", borderRadius: 999, border: "1px solid",
              borderColor: i === active ? "var(--accent)" : "var(--line-strong)",
              background: i === active ? "var(--accent)" : "transparent",
              color: i === active ? "white" : "var(--ink-2)",
              fontSize: 13.5, fontWeight: 500, cursor: "pointer", transition: "all 120ms",
            }}>{d.label}</button>
          ))}
        </div>
        <div className="mob-stack" style={{ display: "grid", gridTemplateColumns: "1fr 1fr", gap: 40, alignItems: "center", background: "var(--bg-elevated)", border: "1px solid var(--line)", borderRadius: "var(--r-xl)", padding: 40 }}>
          <div>
            <span style={{ fontSize: 11, fontWeight: 700, letterSpacing: "0.1em", textTransform: "uppercase", color: "var(--accent)", display: "block", marginBottom: 14 }}>{dept.label}</span>
            <h3 style={{ fontSize: "clamp(22px, 2.8vw, 30px)", fontWeight: 500, letterSpacing: "-0.02em", lineHeight: 1.2, margin: "0 0 16px" }}>{dept.title}</h3>
            <p style={{ fontSize: 14.5, color: "var(--ink-3)", lineHeight: 1.6, margin: "0 0 20px" }}>{dept.desc}</p>
            <div style={{ display: "flex", flexDirection: "column", gap: 10 }}>
              {dept.bullets.map((b, i) => (
                <div key={i} style={{ display: "flex", gap: 10, alignItems: "flex-start", fontSize: 13.5, color: "var(--ink-2)" }}>
                  <span style={{ color: "var(--accent)", marginTop: 2, flexShrink: 0 }}>
                    <svg width="13" height="13" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2.8"><polyline points="20 6 9 17 4 12"/></svg>
                  </span>
                  {b}
                </div>
              ))}
            </div>
            <a href={dept.href} style={{ marginTop: 24, display: "inline-flex", alignItems: "center", gap: 6, fontSize: 13.5, fontWeight: 500, color: "var(--accent)" }}>
              Learn more about {dept.label} <Icon name="arrow" size={13} />
            </a>
          </div>
          <div>
            <div className="showcase-panel-mockup" style={{ borderRadius: 16, border: "1px solid var(--line)", aspectRatio: "1" }}>
              <SaasDeptMockup dept={dept.label} />
            </div>
          </div>
        </div>
      </div>
    </section>
  );
}

Object.assign(window, { IndustrySolutionPage });