// Generic module-page template, drives every "module" subpage with data.

function ModuleHero({ breadcrumbs, tag, headline, italicTail, accentWords, lede, mockup, ctaPrimary = "Book demo", ctaSecondary = "Explore module" }) {
  // headline can include {{accent:word}} {{italic:word}}
  const renderHeadline = (s) => {
    const parts = s.split(/(\{\{[^}]+\}\})/g);
    return parts.map((p, i) => {
      const m = p.match(/^\{\{(accent|italic):(.+)\}\}$/);
      if (!m) return p;
      if (m[1] === "accent") return <span key={i} style={{ color: "var(--accent)" }}>{m[2]}</span>;
      return <span key={i} style={{ color: "var(--accent)" }}>{m[2]}</span>;
    });
  };
  return (
    <section style={{ position: "relative", overflow: "hidden", padding: "120px 0 88px", background: "var(--bg)", color: "var(--ink-1)" }}>
      <svg style={{ position: "absolute", inset: 0, width: "100%", height: "100%", opacity: 0.5, color: "rgba(14,14,16,0.06)", pointerEvents: "none" }} preserveAspectRatio="none">
        <defs><pattern id={"mhg" + (tag || "x").replace(/\s+/g, "")} x="0" y="0" width="48" height="48" patternUnits="userSpaceOnUse"><path d="M 48 0 L 0 0 0 48" fill="none" stroke="currentColor" strokeWidth="1" /></pattern></defs>
        <rect width="100%" height="100%" fill={"url(#mhg" + (tag || "x").replace(/\s+/g, "") + ")"} />
      </svg>
      <div style={{ position: "absolute", left: -120, top: -180, width: 720, height: 720, background: "radial-gradient(closest-side, rgba(124,92,211,0.20), transparent 70%)", pointerEvents: "none" }} />
      <div className="container" style={{ position: "relative", zIndex: 2 }}>
        <div style={{ display: "flex", alignItems: "center", gap: 12, fontSize: 12.5, color: "var(--ink-4)", marginBottom: 20, flexWrap: "wrap" }}>
          {breadcrumbs.map((b, i) =>
          <React.Fragment key={i}>
              {i > 0 && <span>›</span>}
              {b.href ? <a href={b.href} style={{ color: "var(--ink-4)", textDecoration: "none" }}>{b.label}</a> : <span className="tag tag-purple" style={{ margin: 0, padding: "2px 10px" }}>{b.label}</span>}
            </React.Fragment>
          )}
        </div>
        <div className="mob-stack no-border" style={{ display: "grid", gridTemplateColumns: "0.9fr 1.1fr", gap: 64, alignItems: "center", marginTop: 24 }}>
          <div>
            <h1 className="display" style={{ fontSize: "clamp(40px, 5.4vw, 68px)", margin: "0 0 22px", textWrap: "balance" }}>
              {renderHeadline(headline)}
            </h1>
            <div className="mob-show" style={{ width: "100%", justifyContent: "center", marginBottom: 24 }}>
              {mockup}
            </div>
            <p className="lede" style={{ maxWidth: 520 }}>{lede}</p>
            <div style={{ marginTop: 28, display: "flex", gap: 12, flexWrap: "wrap" }}>
              <a className="btn btn-primary btn-lg" href={ctaPrimary === "Book demo" ? "/book-demo" : "#"}>{ctaPrimary} <Icon name="arrow" size={14} /></a>
              {ctaSecondary && ctaSecondary.toLowerCase() !== "explore module" && (
                <a className="btn btn-ghost btn-lg" href="#">{ctaSecondary}</a>
              )}
            </div>
          </div>
          <div className="mob-hide">{mockup}</div>
        </div>
      </div>
    </section>);

}

function ModuleMetrics({ eyebrow, title, metrics }) {
  return (
    <section className="section" style={{ paddingBottom: 0 }}>
      <div className="container">
        <div className="cc-section-header" style={{ textAlign: "center", maxWidth: 720, margin: "0 auto" }}>
          {eyebrow && <span className="eyebrow">{eyebrow}</span>}
          {title && <h2 className="h-section" style={{ marginTop: eyebrow ? 18 : 0 }}>{title}</h2>}
        </div>
      </div>
    </section>);

}

function ModuleBeforeAfter({ name, beforeTitle, beforeItems, afterTitle, afterItems }) {
  const Card = ({ tone, tag, title, items }) =>
  <div className="card" style={{ padding: 32, position: "relative", overflow: "hidden" }}>
      {tone === "after" && <div style={{ position: "absolute", right: -60, top: -60, width: 220, height: 220, background: "radial-gradient(closest-side, rgba(124,92,211,0.18), transparent 70%)", pointerEvents: "none" }} />}
      <div style={{ position: "relative", zIndex: 1 }}>
        <span className="tag" style={tone === "before" ?
      { background: "rgba(180,35,24,0.06)", color: "var(--danger)", borderColor: "rgba(180,35,24,0.16)" } :
      { background: "var(--accent-soft)", color: "var(--accent-ink)", borderColor: "rgba(110,86,207,0.20)" }
      }>{tag}</span>
        <h3 style={{ fontSize: 22, fontWeight: 500, letterSpacing: "-0.018em", margin: "16px 0 18px", color: "var(--ink-1)" }}>{title}</h3>
        <ul style={{ listStyle: "none", padding: 0, margin: 0 }}>
          {items.map((it, i) =>
            <li key={i} style={{ display: "flex", gap: 12, alignItems: "flex-start", padding: "10px 0", borderTop: i === 0 ? "none" : "1px solid var(--line)", fontSize: 13.5, color: "var(--ink-2)", lineHeight: 1.55 }}>
              <span style={{ flex: "0 0 18px", marginTop: 2, height: 18, borderRadius: 5, display: "grid", placeItems: "center",
            background: tone === "before" ? "rgba(180,35,24,0.08)" : "var(--accent-soft)",
            color: tone === "before" ? "var(--danger)" : "var(--accent)" }}>
                {tone === "before" ?
            <svg width="9" height="9" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="3"><line x1="18" y1="6" x2="6" y2="18" /><line x1="6" y1="6" x2="18" y2="18" /></svg> :
            <svg width="9" height="9" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="3"><polyline points="20 6 9 17 4 12" /></svg>}
              </span>
              <span>{it}</span>
            </li>
          )}
        </ul>
      </div>
    </div>;

  return (
    <section className="section" style={{ background: "var(--bg-soft)", borderTop: "1px solid var(--line)", borderBottom: "1px solid var(--line)" }}>
      <div className="container">
        <div className="cc-section-header" style={{ textAlign: "center", maxWidth: 720, margin: "0 auto 48px" }}>
          <span className="eyebrow">The shift</span>
          <h2 className="h-section" style={{ marginTop: 18 }}>Before & after <em>{name}</em>.</h2>
        </div>
        <div className="grid grid-2" style={{ gap: 20 }}>
          <Card tone="before" tag="Before" title={beforeTitle} items={beforeItems} />
          <Card tone="after" tag="After" title={afterTitle} items={afterItems} />
        </div>
      </div>
    </section>);

}

function ModuleSteps({ eyebrow = "Built in hours, governed for years", title = "Four steps, fully automated", steps }) {
  return (
    <section className="section">
      <div className="container">
        <div className="cc-section-header" style={{ textAlign: "center", maxWidth: 720, margin: "0 auto 48px" }}>
          <span className="eyebrow">{eyebrow}</span>
          <h2 className="h-section" style={{ marginTop: 18 }}>{title.split("automated")[0]}<em>{title.includes("automated") ? "automated" : ""}</em>{title.split("automated")[1] || ""}</h2>
        </div>
        <div className="tick-rule" style={{ marginBottom: 24 }} />
        <ol className="grid grid-4" style={{ gap: 16, listStyle: "none", padding: 0, margin: 0 }}>
          {steps.map((s, i) =>
          <li key={i} className="card" style={{ padding: 24 }}>
              <div style={{ fontFamily: "var(--font-mono)", fontSize: 11, color: "var(--ink-4)", letterSpacing: "0.08em", marginBottom: 14 }}>{String(i + 1).padStart(2, "0")}</div>
              <div style={{ fontSize: 16, fontWeight: 500, marginBottom: 8, letterSpacing: "-0.012em" }}>{s.title}</div>
              <div style={{ fontSize: 13, color: "var(--ink-3)", lineHeight: 1.55 }}>{s.desc}</div>
            </li>
          )}
        </ol>
      </div>
    </section>);

}

function ModuleFeatures({ name, features }) {
  return (
    <section className="section" style={{ background: "var(--bg-soft)", borderTop: "1px solid var(--line)", borderBottom: "1px solid var(--line)" }}>
      <div className="container">
        <div className="cc-section-header" style={{ textAlign: "center", maxWidth: 720, margin: "0 auto 48px" }}>
          <span className="eyebrow">Capabilities</span>
          <h2 className="h-section" style={{ marginTop: 18 }}>Everything you need for <em>{name}</em>.</h2>
        </div>
        <div className="grid grid-3 cc-border-grid" style={{ gap: 0, border: "1px solid var(--line)", borderRadius: "var(--r-lg)", overflow: "hidden", background: "var(--bg-elevated)" }}>
          {features.map((f, i) =>
          <div key={f.title} style={{
            padding: 28,
            borderRight: (i + 1) % 3 !== 0 ? "1px solid var(--line)" : "none",
            borderBottom: i < features.length - 3 ? "1px solid var(--line)" : "none"
          }}>
              <span style={{ width: 32, height: 32, borderRadius: 8, background: "var(--bg-soft)", display: "grid", placeItems: "center", color: "var(--accent)", marginBottom: 16 }}>
                <Icon name={f.icon} size={16} />
              </span>
              <h3 className="h-card" style={{ marginBottom: 8 }}>{f.title}</h3>
              <p style={{ fontSize: 13.5, color: "var(--ink-3)", lineHeight: 1.55, margin: 0 }}>{f.desc}</p>
            </div>
          )}
        </div>
      </div>
    </section>);

}

function ModuleQuote({ quote, author, role, avatar }) {
  if (!quote) return null;
  return (
    <section className="section-tight">
      <div className="container" style={{ maxWidth: 880 }}>
        <div style={{ background: "linear-gradient(180deg, #F4EFFB, #FAFAF7)", border: "1px solid var(--line)", borderRadius: "var(--r-xl)", padding: "36px 40px" }}>
          <p style={{
            fontStyle: "italic", fontWeight: 400,
            lineHeight: 1.35, letterSpacing: "-0.005em",
            margin: "0 0 22px", color: "var(--ink-1)", fontFamily: "Poppins", fontSize: "22px"
          }}>"{quote}"</p>
          <div style={{ display: "flex", alignItems: "center", gap: 12 }}>
            {avatar
              ? <img src={avatar} alt={author} style={{ width: 36, height: 36, borderRadius: "50%", objectFit: "cover", objectPosition: "top" }} />
              : <span style={{ width: 36, height: 36, borderRadius: "50%", background: "linear-gradient(135deg, #C7D2FE, #7B61FF)", flexShrink: 0 }} />
            }
            <div>
              <div style={{ fontSize: 13, fontWeight: 500 }}>{author}</div>
              <div style={{ fontSize: 12, color: "var(--ink-4)" }}>{role}</div>
            </div>
          </div>
        </div>
      </div>
    </section>);

}

function ModuleCTA({ title, accent, body, primary = "Book demo", secondary = "View pricing" }) {
  return (
    <section className="section">
      <div className="container">
        <div style={{ background: "linear-gradient(180deg, #F4EFFB 0%, #FAFAF7 100%)", border: "1px solid var(--line)", borderRadius: "var(--r-2xl)", padding: "48px 48px" }}>
          <div style={{ maxWidth: 640 }}>
            <h2 style={{ fontFamily: "var(--font-sans)", fontWeight: 500, fontSize: "clamp(28px, 3.4vw, 40px)", lineHeight: 1.1, letterSpacing: "-0.025em", margin: "0 0 14px" }}>
              {title} <span style={{ fontFamily: "var(--font-serif)", fontStyle: "italic", fontWeight: 400, color: "var(--accent)" }}>{accent}</span>.
            </h2>
            <p style={{ color: "var(--ink-3)", fontSize: 16, lineHeight: 1.55, margin: 0, maxWidth: 520 }}>{body}</p>
            <div style={{ marginTop: 24, display: "flex", gap: 12, flexWrap: "wrap" }}>
              <a className="btn btn-accent btn-lg" href={primary === "Book demo" ? "/book-demo" : "#"}>{primary} <Icon name="arrow" size={14} /></a>
              <a className="btn btn-ghost btn-lg" href={secondary && secondary.toLowerCase() === "view pricing" ? "/pricing" : "#"}>{secondary}</a>
            </div>
          </div>
        </div>
      </div>
    </section>);

}

// === Reusable dark mockup primitives ===
function MockPanel({ title, sub, children }) {
  return (
    <div style={{ background: "var(--bg-elevated)", border: "1px solid var(--line)", borderRadius: 16, padding: 18, boxShadow: "0 30px 60px -20px rgba(14,14,16,0.10), 0 4px 12px -4px rgba(14,14,16,0.04)" }}>
      {(title || sub) &&
      <div style={{ display: "flex", justifyContent: "space-between", alignItems: "center", marginBottom: 12 }}>
          <span style={{ fontSize: 11, fontWeight: 500, letterSpacing: "0.14em", textTransform: "uppercase", color: "var(--ink-4)" }}>{title}</span>
          {sub && <span style={{ fontSize: 11, color: "var(--ink-4)", fontFamily: "var(--font-mono)" }}>{sub}</span>}
        </div>
      }
      {children}
    </div>);

}

function LogoStrip() {
  const logos = ["Bauer Media", "ISS Facility Services", "Caparol", "Bewi Group", "Wellvita", "WaterAid", "Savethechildren"];
  return (
    <section style={{ padding: "32px 0 24px", borderTop: "1px solid var(--line)", borderBottom: "1px solid var(--line)" }}>
      <div className="container">
        <div style={{ fontSize: 11.5, fontWeight: 500, letterSpacing: "0.16em", textTransform: "uppercase", color: "var(--ink-4)", textAlign: "center", marginBottom: 22 }}>
          Trusted by legal, finance & ops teams across the Nordics
        </div>
        <div className="logo-strip" style={{ justifyContent: "space-around" }}>
          {logos.map((l) =>
            <span key={l} className="logo-item">{l}</span>
          )}
        </div>
      </div>
    </section>
  );
}

// === The full ModulePage ===
function ModulePage({ data }) {
  return (
    <div>
      <ModuleHero {...data.hero} />
      <LogoStrip />
      <ModuleMetrics {...data.metrics} />
      <ModuleSteps {...data.steps} />
      <ModuleFeatures name={data.featuresName || data.name.toLowerCase()} features={data.features} />
      <ModuleQuote {...data.quote} />
      <FinalCTA />
    </div>);

}

Object.assign(window, { ModulePage, ModuleHero, ModuleMetrics, ModuleBeforeAfter, ModuleSteps, ModuleFeatures, ModuleQuote, ModuleCTA, MockPanel, LogoStrip });

// ─── Department Showcase (exposing homepage component for modules) ───────────

function DeptMockupLegalOps() {
  const rows = [
    { id: "REQ-114", type: "NDA", party: "Velora AB", sla: "2d left", status: "auto-draft", urgency: "low" },
    { id: "REQ-115", type: "MSA", party: "Kvist Group", sla: "4d left", status: "in review", urgency: "normal" },
    { id: "REQ-116", type: "DPA", party: "Helix Legal", sla: "1d left", status: "needs attention", urgency: "high" },
    { id: "REQ-117", type: "SoW", party: "Brevia", sla: "5d left", status: "auto-draft", urgency: "low" },
  ];
  const statusStyle = (s) => {
    if (s === "auto-draft") return { bg: "var(--accent-soft)", color: "var(--accent)" };
    if (s === "in review") return { bg: "rgba(234,179,8,0.1)", color: "#854d0e" };
    return { bg: "rgba(220,38,38,0.08)", color: "#991b1b" };
  };
  return (
    <div style={{ width: "100%", maxWidth: 400 }}>
      <div style={{ background: "var(--bg-elevated)", border: "1px solid var(--line)", borderRadius: 10, overflow: "hidden", fontSize: 12 }}>
        <div style={{ padding: "10px 14px", background: "var(--bg-soft)", borderBottom: "1px solid var(--line)", display: "flex", alignItems: "center", justifyContent: "space-between" }}>
          <span style={{ fontWeight: 500, color: "var(--ink-2)", fontSize: 12 }}>Intake queue</span>
          <span style={{ fontFamily: "var(--font-mono)", fontSize: 11, color: "var(--accent)", background: "var(--accent-soft)", padding: "2px 8px", borderRadius: 99 }}>4 active</span>
        </div>
        {rows.map((r, i) => {
          const s = statusStyle(r.status);
          return (
            <div key={r.id} style={{ display: "grid", gridTemplateColumns: "48px 60px 1fr auto", alignItems: "center", gap: 10, padding: "9px 14px", borderBottom: i < rows.length - 1 ? "1px solid var(--line)" : "none" }}>
              <span style={{ fontFamily: "var(--font-mono)", fontSize: 10, color: "var(--ink-4)" }}>{r.id}</span>
              <span style={{ fontWeight: 500, color: "var(--ink-2)" }}>{r.type}</span>
              <span style={{ color: "var(--ink-3)", overflow: "hidden", textOverflow: "ellipsis", whiteSpace: "nowrap" }}>{r.party}</span>
              <span style={{ fontSize: 10.5, fontWeight: 500, padding: "2px 8px", borderRadius: 99, background: s.bg, color: s.color, whiteSpace: "nowrap" }}>{r.status}</span>
            </div>
          );
        })}
      </div>
    </div>
  );
}

function DeptMockupHR() {
  const contracts = [
    { name: "Sara Lindgren", role: "Senior Engineer", type: "Full-time", status: "Signed", color: "#166534", bg: "rgba(22,163,74,0.08)" },
    { name: "Erik Wallin", role: "Contractor · Design", type: "Contractor", status: "Sent", color: "#854d0e", bg: "rgba(234,179,8,0.1)" },
    { name: "Maja Björk", role: "Head of Product", type: "Full-time", status: "Signed", color: "#166534", bg: "rgba(22,163,74,0.08)" },
    { name: "Tom Heid", role: "Legal Counsel", type: "Full-time", status: "Draft", color: "var(--ink-4)", bg: "var(--bg-soft)" },
  ];
  return (
    <div style={{ width: "100%", maxWidth: 400 }}>
      <div style={{ background: "var(--bg-elevated)", border: "1px solid var(--line)", borderRadius: 10, overflow: "hidden", fontSize: 12 }}>
        <div style={{ padding: "10px 14px", background: "var(--bg-soft)", borderBottom: "1px solid var(--line)", display: "flex", alignItems: "center", gap: 8 }}>
          <span style={{ fontWeight: 500, color: "var(--ink-2)", fontSize: 12 }}>Employment contracts · Q2</span>
          <span style={{ marginLeft: "auto", fontSize: 10.5, background: "var(--accent-soft)", color: "var(--accent)", padding: "2px 8px", borderRadius: 99, fontWeight: 500 }}>4 active</span>
        </div>
        {contracts.map((c, i) => (
          <div key={c.name} style={{ display: "flex", alignItems: "center", gap: 10, padding: "9px 14px", borderBottom: i < contracts.length - 1 ? "1px solid var(--line)" : "none" }}>
            <span style={{ width: 28, height: 28, borderRadius: "50%", background: "linear-gradient(135deg, #C7D2FE, #7B61FF)", flexShrink: 0 }} />
            <div style={{ flex: 1, minWidth: 0 }}>
              <div style={{ fontWeight: 500, color: "var(--ink-2)", marginBottom: 1 }}>{c.name}</div>
              <div style={{ color: "var(--ink-4)", fontSize: 11 }}>{c.role} · {c.type}</div>
            </div>
            <span style={{ fontSize: 10.5, fontWeight: 500, padding: "2px 8px", borderRadius: 99, background: c.bg, color: c.color, whiteSpace: "nowrap" }}>{c.status}</span>
          </div>
        ))}
      </div>
    </div>
  );
}

function DeptMockupProcurement() {
  const vendors = [
    { name: "Kvist Group", type: "Software", value: "€84k/yr", renewal: "2025-11-30", daysLeft: 47, status: "renewing" },
    { name: "Brevia", type: "Services", value: "€31k/yr", renewal: "2026-01-15", daysLeft: 93, status: "ok" },
    { name: "Northwind AB", type: "Hardware", value: "€120k", renewal: "2025-10-01", daysLeft: 15, status: "urgent" },
    { name: "Helix Legal", type: "Advisory", value: "€52k/yr", renewal: "2026-03-01", daysLeft: 138, status: "ok" },
  ];
  const statusStyle = (s) => {
    if (s === "urgent") return { color: "#991b1b", bg: "rgba(220,38,38,0.08)" };
    if (s === "renewing") return { color: "#854d0e", bg: "rgba(234,179,8,0.1)" };
    return { color: "#166534", bg: "rgba(22,163,74,0.08)" };
  };
  return (
    <div style={{ width: "100%", maxWidth: 400 }}>
      <div style={{ background: "var(--bg-elevated)", border: "1px solid var(--line)", borderRadius: 10, overflow: "hidden", fontSize: 12 }}>
        <div style={{ padding: "10px 14px", background: "var(--bg-soft)", borderBottom: "1px solid var(--line)", display: "flex", alignItems: "center", gap: 8 }}>
          <span style={{ fontWeight: 500, color: "var(--ink-2)" }}>Vendor contracts</span>
          <span style={{ marginLeft: "auto", fontSize: 10.5, background: "rgba(220,38,38,0.08)", color: "#991b1b", padding: "2px 8px", borderRadius: 99, fontWeight: 500 }}>1 urgent</span>
        </div>
        {vendors.map((v, i) => {
          const s = statusStyle(v.status);
          return (
            <div key={v.name} style={{ display: "grid", gridTemplateColumns: "1fr auto", alignItems: "center", gap: 8, padding: "9px 14px", borderBottom: i < vendors.length - 1 ? "1px solid var(--line)" : "none" }}>
              <div>
                <div style={{ fontWeight: 500, color: "var(--ink-2)", marginBottom: 1 }}>{v.name}</div>
                <div style={{ color: "var(--ink-4)", fontSize: 11 }}>{v.type} · {v.value} · renews {v.renewal}</div>
              </div>
              <span style={{ fontSize: 10.5, fontWeight: 500, padding: "2px 10px", borderRadius: 99, background: s.bg, color: s.color, whiteSpace: "nowrap" }}>
                {v.daysLeft}d
              </span>
            </div>
          );
        })}
      </div>
    </div>
  );
}

function DeptMockupSales() {
  const stages = [
    { label: "Request submitted", time: "09:14", done: true },
    { label: "Template auto-drafted", time: "09:15", done: true },
    { label: "Sent for countersign", time: "09:18", done: true },
    { label: "Signed by Velora AB", time: "11:42", done: true },
    { label: "Filed to repository", time: "11:42", done: true },
  ];
  return (
    <div style={{ width: "100%", maxWidth: 360 }}>
      <div style={{ background: "var(--bg-elevated)", border: "1px solid var(--line)", borderRadius: 10, overflow: "hidden", fontSize: 12 }}>
        <div style={{ padding: "10px 14px", background: "var(--bg-soft)", borderBottom: "1px solid var(--line)", display: "flex", alignItems: "center", justifyContent: "space-between" }}>
          <span style={{ fontWeight: 500, color: "var(--ink-2)" }}>NDA · Velora AB</span>
          <span style={{ fontSize: 10.5, background: "rgba(22,163,74,0.08)", color: "#166534", padding: "2px 8px", borderRadius: 99, fontWeight: 500 }}>SIGNED</span>
        </div>
        <div style={{ padding: "14px 14px", display: "flex", flexDirection: "column", gap: 0 }}>
          {stages.map((s, i) => (
            <div key={i} style={{ display: "flex", alignItems: "flex-start", gap: 10 }}>
              <div style={{ display: "flex", flexDirection: "column", alignItems: "center" }}>
                <span style={{ width: 18, height: 18, borderRadius: "50%", background: "#10B981", display: "grid", placeItems: "center", flexShrink: 0 }}>
                  <svg width="8" height="8" viewBox="0 0 24 24" fill="none" stroke="white" strokeWidth="3"><polyline points="20 6 9 17 4 12" /></svg>
                </span>
                {i < stages.length - 1 && <span style={{ width: 1, height: 16, background: "var(--line)", margin: "3px 0" }} />}
              </div>
              <div style={{ paddingBottom: i < stages.length - 1 ? 0 : 0 }}>
                <span style={{ color: "var(--ink-2)", fontWeight: 500 }}>{s.label}</span>
                <span style={{ color: "var(--ink-5)", marginLeft: 8, fontFamily: "var(--font-mono)", fontSize: 10.5 }}>{s.time}</span>
              </div>
            </div>
          ))}
        </div>
        <div style={{ padding: "10px 14px", borderTop: "1px solid var(--line)", background: "var(--accent-soft)", display: "flex", alignItems: "center", gap: 8 }}>
          <svg width="13" height="13" viewBox="0 0 24 24" fill="none" stroke="var(--accent)" strokeWidth="2"><circle cx="12" cy="12" r="10"/><polyline points="12 6 12 12 16 14"/></svg>
          <span style={{ fontSize: 11.5, color: "var(--accent-ink)", fontWeight: 500 }}>Total time: 2 hrs 28 min</span>
        </div>
      </div>
    </div>
  );
}

function DeptMockupFinance() {
  const obligations = [
    { contract: "Kvist Group MSA", type: "Price uplift", due: "2025-11-01", value: "+3.5%", status: "due-soon" },
    { contract: "Northwind SLA", type: "Payment milestone", due: "2025-10-15", value: "€40,000", status: "overdue" },
    { contract: "Brevia Services", type: "Renewal window", due: "2025-12-01", value: "€31k/yr", status: "upcoming" },
    { contract: "Helix Advisory", type: "CPI adjustment", due: "2026-01-01", value: "+2.1%", status: "upcoming" },
  ];
  const statusStyle = (s) => {
    if (s === "overdue") return { color: "#991b1b", bg: "rgba(220,38,38,0.08)", label: "Overdue" };
    if (s === "due-soon") return { color: "#854d0e", bg: "rgba(234,179,8,0.1)", label: "Due soon" };
    return { color: "#166534", bg: "rgba(22,163,74,0.08)", label: "Upcoming" };
  };
  return (
    <div style={{ width: "100%", maxWidth: 400 }}>
      <div style={{ background: "var(--bg-elevated)", border: "1px solid var(--line)", borderRadius: 10, overflow: "hidden", fontSize: 12 }}>
        <div style={{ padding: "10px 14px", background: "var(--bg-soft)", borderBottom: "1px solid var(--line)", display: "flex", alignItems: "center", gap: 8 }}>
          <span style={{ fontWeight: 500, color: "var(--ink-2)" }}>Obligation tracker</span>
          <span style={{ marginLeft: "auto", fontSize: 10.5, background: "rgba(220,38,38,0.08)", color: "#991b1b", padding: "2px 8px", borderRadius: 99, fontWeight: 500 }}>1 overdue</span>
        </div>
        {obligations.map((o, i) => {
          const s = statusStyle(o.status);
          return (
            <div key={i} style={{ display: "grid", gridTemplateColumns: "1fr auto", alignItems: "start", gap: 8, padding: "9px 14px", borderBottom: i < obligations.length - 1 ? "1px solid var(--line)" : "none" }}>
              <div>
                <div style={{ fontWeight: 500, color: "var(--ink-2)", marginBottom: 1 }}>{o.contract}</div>
                <div style={{ color: "var(--ink-4)", fontSize: 11 }}>{o.type} · due {o.due}</div>
              </div>
              <div style={{ textAlign: "right" }}>
                <div style={{ fontFamily: "var(--font-mono)", fontSize: 11.5, color: "var(--ink-1)", fontWeight: 500, marginBottom: 2 }}>{o.value}</div>
                <span style={{ fontSize: 10.5, fontWeight: 500, padding: "2px 8px", borderRadius: 99, background: s.bg, color: s.color }}>{s.label}</span>
              </div>
            </div>
          );
        })}
      </div>
    </div>
  );
}

function DepartmentShowcase({
  eyebrow = "Built for every team",
  title = "The platform your whole org actually uses.",
  lede = "Legal isn't the only team in a contract. ContractControl gives every department the view they need, without stepping on each other."
} = {}) {
  const departments = [
    {
      id: "legal-ops",
      label: "Legal Ops",
      href: "/solutions/team/legal",
      tagline: "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",
        "Real-time status for every request",
        "Full audit trail, no paper chase",
      ],
    },
    {
      id: "hr-people",
      label: "HR & People",
      href: "/solutions/team/hr",
      tagline: "Hire fast. Contract right. Stay compliant.",
      desc: "HR teams generate offer letters, contractor agreements, and NDAs from templates, signed and stored without a single legal bottleneck.",
      bullets: [
        "Offer letters and contracts generated from one form",
        "Automated routing for approvals and eSignature",
        "Full audit trail on every employment agreement",
      ],
    },
    {
      id: "procurement",
      label: "Procurement",
      href: "/solutions/team/procurement",
      tagline: "Vendor contracts under control, not in a folder.",
      desc: "Procurement teams track commitments, renewals, and price uplifts from a single dashboard, with alerts before opt-out windows close.",
      bullets: [
        "Centralised vendor contract repository",
        "Auto-alerts on renewal and exit windows",
        "Spend visibility across all supplier agreements",
      ],
    },
    {
      id: "sales",
      label: "Sales",
      href: "/solutions/team/sales",
      tagline: "Close faster. Stop waiting on legal.",
      desc: "Sales teams submit a 30-second request and get a signed contract without touching legal. Standard deals go straight to auto-draft and countersign.",
      bullets: [
        "Standard deals signed in hours, not weeks",
        "Live deal status visible in CRM",
      ],
    },
    {
      id: "finance",
      label: "Finance",
      href: "/solutions/team/finance",
      tagline: "Revenue leakage starts in the contract.",
      desc: "Finance teams connect contract commitments to financial outcomes, tracking payment milestones, uplifts, and renewal dates before they become surprises.",
      bullets: [
        "Obligation and milestone tracking per contract",
        "Renewal forecasting and budget impact",
        "ERP sync with Fortnox, Visma, and NetSuite",
      ],
    },
  ];

  const [active, setActive] = React.useState(0);
  const dept = departments[active];

  const mockups = {
    "legal-ops": <DeptMockupLegalOps />,
    "hr-people": <DeptMockupHR />,
    "procurement": <DeptMockupProcurement />,
    "sales": <DeptMockupSales />,
    "finance": <DeptMockupFinance />,
  };

  return (
    <section className="section" style={{ background: "var(--bg-soft)" }}>
      <div className="container">
        {/* Header */}
        <div className="cc-section-header" style={{ textAlign: "center", maxWidth: 720, margin: "0 auto 48px" }}>
          <span className="eyebrow">{eyebrow}</span>
          <h2 className="h-section" style={{ marginTop: 18 }}>
            {title}
          </h2>
          {lede && (
            <p className="lede" style={{ margin: "16px auto 0", textAlign: "center" }}>
              {lede}
            </p>
          )}
        </div>

        {/* Tabs */}
        <div className="showcase-tabs-wrap">
          <div className="showcase-tabs">
            {departments.map((d, i) => (
              <button
                key={d.id}
                onClick={() => setActive(i)}
                style={{
                  height: 38,
                  padding: "0 20px",
                  borderRadius: 999,
                  border: "1px solid",
                  borderColor: active === i ? "var(--accent)" : "var(--line-strong)",
                  background: active === i ? "var(--accent)" : "var(--bg-elevated)",
                  color: active === i ? "white" : "var(--ink-2)",
                  fontFamily: "inherit",
                  fontSize: 13.5,
                  fontWeight: active === i ? 500 : 400,
                  cursor: "pointer",
                  transition: "all 140ms ease",
                  whiteSpace: "nowrap",
                }}
              >
                {d.label}
              </button>
            ))}
          </div>
        </div>

        {/* Panel */}
        <div className="card mob-stack" style={{ padding: 0, overflow: "hidden", display: "grid", gridTemplateColumns: "1fr 1fr", minHeight: 480 }}>
          {/* Left - copy */}
          <div className="showcase-panel-content">
            <span style={{ fontSize: 11, fontWeight: 500, letterSpacing: "0.12em", textTransform: "uppercase", color: "var(--accent)", marginBottom: 16 }}>
              {dept.label}
            </span>
            <h3 style={{ fontSize: "clamp(20px, 2.2vw, 28px)", fontWeight: 500, letterSpacing: "-0.022em", lineHeight: 1.25, color: "var(--ink-1)", margin: "0 0 16px" }}>
              {dept.tagline}
            </h3>
            <p style={{ fontSize: 14.5, color: "var(--ink-3)", lineHeight: 1.65, margin: "0 0 28px" }}>
              {dept.desc}
            </p>
            <ul style={{ margin: "0 0 32px", padding: 0, listStyle: "none", display: "flex", flexDirection: "column", gap: 10 }}>
              {dept.bullets.map((b, i) => (
                <li key={i} style={{ display: "flex", alignItems: "flex-start", gap: 10, fontSize: 14, color: "var(--ink-2)", lineHeight: 1.5 }}>
                  <span style={{ flex: "0 0 14px", marginTop: 3, color: "var(--accent)", display: "flex", alignItems: "center" }}>
                    <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}
                </li>
              ))}
            </ul>
            <a href={dept.href} style={{ display: "inline-flex", alignItems: "center", gap: 6, fontSize: 13.5, fontWeight: 500, color: "var(--accent)", textDecoration: "none" }}>
              Learn more about {dept.label} <Icon name="arrow" size={12} />
            </a>
          </div>

          {/* Right - mockup */}
          <div className="showcase-panel-mockup">
            {mockups[dept.id]}
          </div>
        </div>
      </div>
    </section>
  );
}

Object.assign(window, { ModulePage, ModuleHero, ModuleMetrics, ModuleBeforeAfter, ModuleSteps, ModuleFeatures, ModuleQuote, ModuleCTA, MockPanel, DepartmentShowcase, DeptMockupLegalOps, DeptMockupHR, DeptMockupProcurement, DeptMockupSales, DeptMockupFinance });