// Power Modules page, port of the existing "Extend ContractControl" page

function PowerModulesHeroVisual() {
  const cards = [
    { icon: "dataroom", title: "Dataroom", tag: "Compliance" },
    { icon: "docs", title: "Document Hub", tag: "Knowledge" },
    { icon: "permission", title: "Advanced Permissions", tag: "Security" },
    { icon: "review", title: "Unlimited Viewer", tag: "Collaboration" },
    { icon: "workspace", title: "Workspaces", tag: "Scaling" },
    { icon: "bulk", title: "BulkSignatures", tag: "Signatures" },
  ];
  return (
    <div style={{ display: "grid", gridTemplateColumns: "1fr 1fr", gap: 10 }}>
      {cards.map((c) => (
        <div key={c.title} style={{ background: "rgba(255,255,255,0.06)", border: "1px solid rgba(255,255,255,0.10)", borderRadius: 12, padding: "14px 16px", display: "flex", alignItems: "center", gap: 12 }}>
          <span style={{ width: 32, height: 32, borderRadius: 8, background: "var(--accent-soft)", display: "grid", placeItems: "center", color: "var(--accent)", flexShrink: 0 }}>
            <Icon name={c.icon} size={15} />
          </span>
          <div>
            <div style={{ fontSize: 13, fontWeight: 500, letterSpacing: "-0.01em", color: "rgba(255,255,255,0.9)" }}>{c.title}</div>
            <div style={{ fontSize: 11.5, color: "rgba(255,255,255,0.4)", marginTop: 1 }}>{c.tag}</div>
          </div>
        </div>
      ))}
    </div>
  );
}

function PowerModulesHero() {
  return (
    <section style={{ position: "relative", overflow: "hidden", padding: "72px 0 88px", background: "linear-gradient(160deg, #1A1625 0%, #0F0E14 50%, #13111C 100%)", color: "#F5F5F7" }}>
      <svg style={{ position: "absolute", inset: 0, width: "100%", height: "100%", opacity: 0.35, color: "rgba(255,255,255,0.05)", pointerEvents: "none" }} preserveAspectRatio="none">
        <defs><pattern id="gmhg-powermodules" 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(#gmhg-powermodules)" />
      </svg>
      <div style={{ position: "absolute", left: -120, top: -180, width: 720, height: 720, background: "radial-gradient(closest-side, rgba(124,92,211,0.25), transparent 70%)", pointerEvents: "none" }} />
      <div className="container" style={{ position: "relative", zIndex: 2 }}>
        <div style={{ display: "flex", alignItems: "center", gap: 12, fontSize: 12.5, color: "rgba(255,255,255,0.45)", marginBottom: 20, flexWrap: "wrap" }}>
          <a href="/" style={{ color: "rgba(255,255,255,0.45)" }}>Home</a>
          <span>›</span>
          <span className="tag tag-purple" style={{ margin: 0, padding: "2px 10px" }}>Power Modules</span>
        </div>
        <div className="mob-stack no-border" style={{ display: "grid", gridTemplateColumns: "1fr 1fr", gap: 56, alignItems: "center", marginTop: 24 }}>
          <div>
            <h1 className="display" style={{ fontSize: "clamp(40px, 5.4vw, 64px)", margin: "0 0 20px", color: "#fff" }}>
              Extend ContractControl<br/>
              to <em>fit the way</em><br/>
              <span className="accent">you work</span>.
            </h1>
            <div className="mob-show" style={{ width: "100%", justifyContent: "center", marginBottom: 24 }}>
              <PowerModulesHeroVisual />
            </div>
            <p className="lede" style={{ maxWidth: 520, color: "rgba(255,255,255,0.65)" }}>
              Add exactly what your team needs, a secure dataroom, granular permissions, unlimited viewers, or dedicated workspaces. Nothing more, nothing you'll never use.
            </p>
            <div style={{ marginTop: 28, display: "flex", gap: 12, flexWrap: "wrap" }}>
              <a className="btn btn-accent btn-lg" href="/book-demo">Book demo <Icon name="arrow" size={14} /></a>
              <a className="btn btn-ghost btn-lg" href="/pricing">See modules pricing</a>
            </div>
            <div style={{ marginTop: 28, display: "flex", gap: 24, fontSize: 12.5, color: "rgba(255,255,255,0.45)", flexWrap: "wrap" }}>
              {["Add only what you need", "No long-term lock-in", "Live in hours, not weeks"].map((t) => (
                <div key={t} style={{ display: "flex", alignItems: "center", gap: 6 }}>
                  <span style={{ color: "#34D399" }}>
                    <svg width="14" height="14" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2.5"><polyline points="20 6 9 17 4 12"/></svg>
                  </span>
                  {t}
                </div>
              ))}
            </div>
          </div>
          <div className="mob-hide">
            <PowerModulesHeroVisual />
          </div>
        </div>
      </div>
    </section>
  );
}

function ModuleFilters() {
  const tabs = ["All modules", "Customisation", "Audit & Privacy", "Risk & Compliance", "AI & Data", "New"];
  const [active, setActive] = React.useState(0);
  return (
    <section style={{ borderBottom: "1px solid var(--line)", background: "var(--bg)" }}>
      <div className="container" style={{ display: "flex", alignItems: "center", gap: 24, padding: "20px 0", flexWrap: "wrap" }}>
        <div style={{ display: "flex", gap: 6, flexWrap: "wrap" }}>
          {tabs.map((t, i) => (
            <button key={t} onClick={() => setActive(i)} style={{
              height: 32, padding: "0 14px", borderRadius: 999,
              border: "1px solid " + (active === i ? "var(--ink-1)" : "var(--line)"),
              background: active === i ? "var(--ink-1)" : "transparent",
              color: active === i ? "white" : "var(--ink-2)",
              fontSize: 13, fontWeight: 500, letterSpacing: "-0.005em",
            }}>{t}</button>
          ))}
        </div>
        <div style={{
          marginLeft: "auto", display: "flex", alignItems: "center", gap: 8,
          height: 36, padding: "0 14px", borderRadius: 999,
          border: "1px solid var(--line)", minWidth: 260,
          background: "var(--bg-elevated)",
        }}>
          <svg width="14" height="14" viewBox="0 0 24 24" fill="none" stroke="var(--ink-4)" strokeWidth="1.6"><circle cx="11" cy="11" r="7"/><line x1="21" y1="21" x2="16.65" y2="16.65"/></svg>
          <span style={{ fontSize: 13, color: "var(--ink-4)" }}>Search modules</span>
        </div>
      </div>
    </section>
  );
}function ModuleCard({ tag, tagTone = "default", icon, title, desc, bullets, cta = "Learn more", href = "#", comingSoon = false, onNotify }) {
  const tagStyles = {
    default: { background: "var(--bg-soft)", color: "var(--ink-2)", borderColor: "var(--line)" },
    purple: { background: "var(--accent-soft)", color: "var(--accent-ink)", borderColor: "rgba(110,86,207,0.2)" },
    new: { background: "rgba(31,138,76,0.08)", color: "var(--success)", borderColor: "rgba(31,138,76,0.22)" },
    coming: { background: "rgba(214,141,32,0.10)", color: "#8A5A12", borderColor: "rgba(214,141,32,0.28)" },
  };
  const displayTag = comingSoon ? "Coming soon" : tag;
  const displayTone = comingSoon ? "coming" : tagTone;
  return (
    <div className="card" style={{ padding: 28, display: "flex", flexDirection: "column", gap: 14, position: "relative", transition: "border-color 160ms ease, transform 160ms ease", opacity: comingSoon ? 0.92 : 1 }}
      onMouseEnter={(e) => { e.currentTarget.style.borderColor = "var(--ink-5)"; e.currentTarget.style.transform = "translateY(-2px)"; }}
      onMouseLeave={(e) => { e.currentTarget.style.borderColor = "var(--line)"; e.currentTarget.style.transform = "translateY(0)"; }}>
      <div style={{ display: "flex", alignItems: "center", justifyContent: "space-between" }}>
        <span style={{ width: 32, height: 32, borderRadius: 8, background: "var(--bg-soft)", display: "grid", placeItems: "center", color: comingSoon ? "var(--ink-4)" : "var(--accent)" }}>
          <Icon name={icon} size={16} />
        </span>
        <span className="tag" style={{ ...tagStyles[displayTone], height: 22, fontSize: 11 }}>{displayTag}</span>
      </div>
      <h3 className="h-card" style={{ fontSize: 20 }}>{title}</h3>
      <p style={{ fontSize: 13.5, color: "var(--ink-3)", lineHeight: 1.55, margin: 0 }}>{desc}</p>
      <ul style={{ listStyle: "none", padding: 0, margin: "4px 0 0", display: "flex", flexDirection: "column", gap: 8 }}>
        {bullets.map((b, i) => (
          <li key={i} style={{ display: "flex", gap: 10, alignItems: "flex-start", fontSize: 13, color: "var(--ink-2)", lineHeight: 1.5 }}>
            <span style={{ flex: "0 0 14px", marginTop: 4, color: comingSoon ? "var(--ink-5)" : "var(--success)" }}>
              <svg width="13" height="13" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2.4"><polyline points="20 6 9 17 4 12"/></svg>
            </span>
            <span>{b}</span>
          </li>
        ))}
      </ul>
      <a href={href} style={{ marginTop: "auto", paddingTop: 8, fontSize: 13, fontWeight: 500, color: "var(--accent)", display: "inline-flex", alignItems: "center", gap: 6 }}>
        {cta} <Icon name="arrow" size={13} />
      </a>
    </div>
  );
}

function PowerModulesGrid({ onNotify }) {
  const modules = [
    { tag: "Compliance", tagTone: "default", icon: "dataroom", title: "Dataroom", href: "/platform/power-modules/dataroom", comingSoon: true,
      desc: "Secure deal and due-diligence rooms with granular audit and watermarking.",
      bullets: ["Per-document and per-user access controls", "Tracked downloads and view history", "Q&A workflows for buyers and sellers"]},
    { tag: "Knowledge", tagTone: "default", icon: "docs", title: "Document Hub", href: "/platform/power-modules/document-hub",
      desc: "One home for every contract, policy, template and exhibit, with smart search.",
      bullets: ["Full-text and clause-level search", "Versioning with side-by-side diff", "AI tags on uploads"]},
    { tag: "Legal", tagTone: "default", icon: "legal", title: "Legal Hub", href: "/platform/power-modules/legal-hub", comingSoon: true,
      desc: "Run risk, playbooks, and obligations from a dedicated legal workspace.",
      bullets: ["Playbook authoring and versioning", "Matter and intake triage", "Auto-extracted obligations log"]},
    { tag: "Security", tagTone: "default", icon: "permission", title: "Advanced Permissions", href: "/platform/power-modules/permissions",
      desc: "Role-, attribute-, and entity-based access across every workspace and folder.",
      bullets: ["RBAC + ABAC policy builder", "Granular roles & groups", "Approval-gated reads on sensitive files"]},
    { tag: "Scaling", tagTone: "default", icon: "workspace", title: "Workspaces", href: "/platform/power-modules/workspaces",
      desc: "Per-entity, per-region or per-business-unit workspaces with clean separation.",
      bullets: ["Templates inherit from parent workspace", "Cross-workspace search (when permitted)", "Region-pinned data residency"]},
    { tag: "Collaboration", tagTone: "default", icon: "review", title: "Unlimited Viewer", href: "/platform/power-modules/unlimited-viewer",
      desc: "Free, unlimited read-only seats so reviewers, stakeholders, and auditors can see contracts without a paid licence.",
      bullets: ["Unlimited free viewer seats across the org", "Scoped to specific contracts, folders or workspaces", "Full audit trail on every view, comment, and download"]},
    { tag: "New", tagTone: "new", icon: "negotiation", title: "Intake AI Agent", href: "/platform/power-modules/sales-agent", comingSoon: true,
      desc: "Autonomous intake assistant that triages requests, drafts standard paper, and routes edge cases to legal.",
      bullets: ["Auto-classifies and routes every request", "Drafts low-risk paper end-to-end", "Escalates edge cases with reasoning"]},
    { tag: "Beta", tagTone: "new", icon: "bulk", title: "BulkSignatures", href: "/platform/power-modules/bulk-signatures", comingSoon: false,
      desc: "Bulk send feature for esignatures. Users can create a template and upload a recipient list via CSV.",
      bullets: ["Smart background send queue", "Custom document merge variables", "Automatic CSV validation & parser"]},
    { tag: "Beta", tagTone: "new", icon: "clickwrap", title: "Clickwrap", href: "/platform/power-modules/clickwrap", comingSoon: true,
      desc: "Tracking for terms and conditions approval audits across your website.",
      bullets: ["Affirmative checkboxes & click consent", "Detailed audit log with IP, timestamp", "Defensible proof of consent certificates"]},
    { tag: "Sales", tagTone: "default", icon: "dealroom", title: "Dealroom", href: "/platform/power-modules/dealroom", comingSoon: true,
      desc: "Deal-friendly space for sales reps and customers to collaborate, share materials, and sign.",
      bullets: ["Branded buyer portal landing pages", "Stakeholder coordination & workspace", "Shared document viewing & signing"]},
    { tag: "Compliance", tagTone: "default", icon: "complaint-hub", title: "Compliant Hub", href: "/platform/power-modules/complaint-hub", comingSoon: true,
      desc: "Log, investigate, and resolve compliance and customer complaints systematically.",
      bullets: ["ISO 9001 audit-ready tracking", "Action items & workflow routing", "Resolution document logs & templates"]}
   ];
  const available = modules.filter(m => !m.comingSoon);
  const soon = modules.filter(m => m.comingSoon);
  return (
    <section className="section">
      <div className="container">
        <div style={{ textAlign: "center", maxWidth: 720, margin: "0 auto 48px" }}>
          <span className="eyebrow">Available today</span>
          <h2 className="h-section" style={{ marginTop: 18 }}>
            Modules you can <em>turn on this week</em>.
          </h2>
          <p className="lede" style={{ margin: "16px auto 0", textAlign: "center" }}>
            Every module inherits your roles, audit trail and branding. No separate logins, no duplicate configuration.
          </p>
        </div>
        <div className="grid grid-3" style={{ gap: 20 }}>
          {available.map((m) => <ModuleCard key={m.title} {...m} />)}
        </div>
        <div style={{ textAlign: "center", maxWidth: 720, margin: "64px auto 40px" }}>
          <span className="eyebrow">Coming soon</span>
          <h2 className="h-section" style={{ marginTop: 18 }}>
            What's <em>on the roadmap</em>.
          </h2>
          <p className="lede" style={{ margin: "16px auto 0", textAlign: "center" }}>
            Read about our upcoming modules and explore their features.
          </p>
        </div>
        <div className="grid grid-3" style={{ gap: 20 }}>
          {soon.map((m) => <ModuleCard key={m.title} {...m} />)}
        </div>
      </div>
    </section>
  );
}

function BundleTiers() {
  const tiers = [
    { name: "Included in every plan", lead: true, items: [
      "Intake, drafting, review, signature",
      "eSignature, repository, analytics",
      "Audit trail, SSO, role-based access",
    ]},
    { name: "Pick the modules you need", items: [
      "Turn on a module a la carte",
      "Pay-per-module · monthly or annual",
      "Scale to enterprise as your team grows",
    ]},
    { name: "Enterprise bundle", items: [
      "Every Power Module across every entity",
      "Dedicated CSM and implementation lead",
      "Custom data residency and audit controls",
    ]},
  ];
  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: 720, margin: "0 auto 48px" }}>
          <span className="eyebrow">How it bundles</span>
          <h2 className="h-section" style={{ marginTop: 18 }}>
            Core platform, Power Modules,<br/>or <em>enterprise bundle</em>.
          </h2>
          <p className="lede" style={{ margin: "16px auto 0", textAlign: "center" }}>
            ContractControl is usable on day one without any modules. Add what you need, when you need it.
          </p>
        </div>
        <div className="grid grid-3" style={{ gap: 16 }}>
          {tiers.map((t, i) => (
            <div key={t.name} className="card" style={{ padding: 28, background: t.lead ? "var(--bg-elevated)" : "var(--bg-elevated)" }}>
              <div style={{ fontSize: 13, fontWeight: 500, marginBottom: 18, color: "var(--ink-1)" }}>{t.name}</div>
              <ul style={{ listStyle: "none", padding: 0, margin: 0, display: "flex", flexDirection: "column", gap: 10 }}>
                {t.items.map((it, k) => (
                  <li key={k} style={{ display: "flex", gap: 10, alignItems: "flex-start", fontSize: 13.5, color: "var(--ink-2)", lineHeight: 1.5 }}>
                    <span style={{ flex: "0 0 14px", marginTop: 4, color: "var(--success)" }}>
                      <svg width="13" height="13" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2.4"><polyline points="20 6 9 17 4 12"/></svg>
                    </span>
                    <span>{it}</span>
                  </li>
                ))}
              </ul>
            </div>
          ))}
        </div>
      </div>
    </section>
  );
}

function ModulesCTA() {
  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: "56px 56px",
        }}>
          <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 16px" }}>
              Ready to shape ContractControl to your <span style={{ fontFamily: "var(--font-serif)", fontStyle: "italic", fontWeight: 400, color: "var(--accent)" }}>operating model</span>?
            </h2>
            <p style={{ color: "var(--ink-3)", fontSize: 16, lineHeight: 1.55, margin: 0, maxWidth: 520 }}>
              A live 30-minute tour. Configured to your entities, roles, and the modules that matter most to you.
            </p>
            <div style={{ marginTop: 28, display: "flex", gap: 12, flexWrap: "wrap" }}>
              <a className="btn btn-accent btn-lg" href="/book-demo">Book demo <Icon name="arrow" size={14} /></a>
              <a className="btn btn-ghost btn-lg" href="/pricing">View pricing</a>
            </div>
          </div>
        </div>
      </div>
    </section>
  );
}

function NotifyModal({ module, onClose }) {
  const [form, setForm] = React.useState({ firstName: "", lastName: "", email: "", company: "" });
  const [submitted, setSubmitted] = React.useState(false);
  const [visible, setVisible] = React.useState(false);

  React.useEffect(() => {
    requestAnimationFrame(() => setVisible(true));
    const onKey = (e) => { if (e.key === "Escape") handleClose(); };
    document.addEventListener("keydown", onKey);
    return () => document.removeEventListener("keydown", onKey);
  }, []);

  function handleClose() {
    setVisible(false);
    setTimeout(onClose, 220);
  }

  function handleSubmit(e) {
    e.preventDefault();
    // HubSpot form submission can be wired here later
    setSubmitted(true);
  }

  const inputStyle = {
    width: "100%", boxSizing: "border-box",
    height: 40, padding: "0 12px",
    borderRadius: 8, border: "1px solid var(--line)",
    background: "var(--bg-soft)", color: "var(--ink-1)",
    fontSize: 14, outline: "none",
    transition: "border-color 140ms ease",
  };

  return (
    <div
      onClick={handleClose}
      style={{
        position: "fixed", inset: 0, zIndex: 1000,
        display: "flex", alignItems: "center", justifyContent: "center",
        background: "rgba(14,14,16,0.48)",
        backdropFilter: "blur(4px)",
        opacity: visible ? 1 : 0,
        transition: "opacity 200ms ease",
        padding: 20,
      }}>
      <div
        onClick={(e) => e.stopPropagation()}
        style={{
          background: "var(--bg-elevated)", borderRadius: 20,
          border: "1px solid var(--line)",
          boxShadow: "0 40px 80px -20px rgba(14,14,16,0.28), 0 8px 24px -8px rgba(14,14,16,0.12)",
          width: "100%", maxWidth: 440, padding: 32, position: "relative",
          transform: visible ? "translateY(0) scale(1)" : "translateY(16px) scale(0.97)",
          transition: "transform 220ms cubic-bezier(0.34, 1.2, 0.64, 1), opacity 200ms ease",
          opacity: visible ? 1 : 0,
        }}>
        {/* Close */}
        <button onClick={handleClose} style={{ position: "absolute", top: 16, right: 16, width: 28, height: 28, borderRadius: 8, border: "1px solid var(--line)", background: "var(--bg-soft)", cursor: "pointer", display: "grid", placeItems: "center", color: "var(--ink-3)" }}>
          <svg width="12" height="12" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2.5"><line x1="18" y1="6" x2="6" y2="18"/><line x1="6" y1="6" x2="18" y2="18"/></svg>
        </button>

        {submitted ? (
          <div style={{ textAlign: "center", padding: "16px 0" }}>
            <div style={{ width: 48, height: 48, borderRadius: "50%", background: "rgba(31,138,76,0.10)", display: "grid", placeItems: "center", margin: "0 auto 16px", color: "var(--success)" }}>
              <svg width="22" height="22" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2.5"><polyline points="20 6 9 17 4 12"/></svg>
            </div>
            <h3 style={{ fontSize: 20, fontWeight: 600, margin: "0 0 10px", letterSpacing: "-0.015em" }}>You're on the list</h3>
            <p style={{ fontSize: 14, color: "var(--ink-3)", lineHeight: 1.55, margin: "0 0 24px" }}>
              We'll notify you as soon as <strong>{module}</strong> is available. No spam, just the launch.
            </p>
            <button onClick={handleClose} className="btn btn-primary" style={{ width: "100%" }}>Done</button>
          </div>
        ) : (
          <>
            <div style={{ marginBottom: 22 }}>
              <span style={{ fontSize: 10.5, fontWeight: 600, letterSpacing: "0.08em", textTransform: "uppercase", padding: "3px 9px", borderRadius: 99, background: "rgba(124,92,211,0.09)", border: "1px solid rgba(124,92,211,0.22)", color: "var(--accent)", display: "inline-block", marginBottom: 14 }}>Coming soon</span>
              <h3 style={{ fontSize: 22, fontWeight: 600, margin: "0 0 8px", letterSpacing: "-0.018em" }}>Get notified about <em style={{ fontStyle: "italic", fontWeight: 400, fontFamily: "var(--font-serif)", color: "var(--accent)" }}>{module}</em></h3>
              <p style={{ fontSize: 14, color: "var(--ink-3)", lineHeight: 1.55, margin: 0 }}>Leave your details and we'll reach out the moment it launches.</p>
            </div>
            <form onSubmit={handleSubmit} style={{ display: "flex", flexDirection: "column", gap: 12 }}>
              <div style={{ display: "grid", gridTemplateColumns: "1fr 1fr", gap: 10 }}>
                <div>
                  <label style={{ fontSize: 12.5, fontWeight: 500, color: "var(--ink-2)", display: "block", marginBottom: 5 }}>First name</label>
                  <input
                    style={inputStyle}
                    placeholder="Anna"
                    value={form.firstName}
                    required
                    onChange={(e) => setForm(f => ({ ...f, firstName: e.target.value }))}
                    onFocus={(e) => e.target.style.borderColor = "var(--accent)"}
                    onBlur={(e) => e.target.style.borderColor = "var(--line)"}
                  />
                </div>
                <div>
                  <label style={{ fontSize: 12.5, fontWeight: 500, color: "var(--ink-2)", display: "block", marginBottom: 5 }}>Last name</label>
                  <input
                    style={inputStyle}
                    placeholder="Lindqvist"
                    value={form.lastName}
                    required
                    onChange={(e) => setForm(f => ({ ...f, lastName: e.target.value }))}
                    onFocus={(e) => e.target.style.borderColor = "var(--accent)"}
                    onBlur={(e) => e.target.style.borderColor = "var(--line)"}
                  />
                </div>
              </div>
              <div>
                <label style={{ fontSize: 12.5, fontWeight: 500, color: "var(--ink-2)", display: "block", marginBottom: 5 }}>Work email</label>
                <input
                  style={inputStyle}
                  type="email" placeholder="anna@company.com"
                  value={form.email}
                  required
                  onChange={(e) => setForm(f => ({ ...f, email: e.target.value }))}
                  onFocus={(e) => e.target.style.borderColor = "var(--accent)"}
                  onBlur={(e) => e.target.style.borderColor = "var(--line)"}
                />
              </div>
              <div>
                <label style={{ fontSize: 12.5, fontWeight: 500, color: "var(--ink-2)", display: "block", marginBottom: 5 }}>Company name</label>
                <input
                  style={inputStyle}
                  placeholder="Acme AB"
                  value={form.company}
                  required
                  onChange={(e) => setForm(f => ({ ...f, company: e.target.value }))}
                  onFocus={(e) => e.target.style.borderColor = "var(--accent)"}
                  onBlur={(e) => e.target.style.borderColor = "var(--line)"}
                />
              </div>
              <button type="submit" className="btn btn-accent btn-lg" style={{ marginTop: 4, width: "100%", justifyContent: "center" }}>
                Notify me at launch <Icon name="arrow" size={13} />
              </button>
            </form>
          </>
        )}
      </div>
    </div>
  );
}

function PowerModulesPage() {
  const [notifyModule, setNotifyModule] = React.useState(null);
  return (
    <div>
      <PowerModulesHero />
      <PowerModulesGrid />
      <BundleTiers />
      <ModulesCTA />
      {notifyModule && <NotifyModal module={notifyModule} onClose={() => setNotifyModule(null)} />}
    </div>
  );
}

Object.assign(window, { PowerModulesPage });