// AI Sales Agent, custom landing page
// A chat-first product: visitors get guided to a product, AI drafts a contract from approved templates,
// and they sign it inside the chat. No middleman.

function SalesAgentChatDemo() {
  const script = [
  { who: "bot", text: "Hi! I'm Mira, the coffee concierge for Dr. Coffee. Looking for a machine for the office, café, or hotel?", delay: 1200 },
  { who: "user", text: "Office, about 50 people, mostly cappuccino and latte drinkers. Around 150 cups/day.", delay: 2200 },
  { who: "bot", text: "Perfect fit: the Coffee F11 Big Plus, fully automatic, dual heating, fresh-milk system. 200 cups/day rated. Want a quick quote?", delay: 2200 },
  { who: "user", text: "Yes please, 36-month leasing with service.", delay: 1700 },
  { who: "bot", text: "Drafting your agreement now…", delay: 1300 },
  { who: "bot", kind: "doc", title: "Dr. Coffee · F11 Big Plus", lines: [
    "1× F11 Big Plus · fresh-milk module",
    "Lease · 36 months · €189/mo incl. service",
    "Delivery & install · Stockholm · 7 days",
    "Beans, training & uptime SLA included"],
    delay: 2400 },
  { who: "user", text: "Looks right. Can I sign now?", delay: 1400 },
  { who: "bot", kind: "sign", delay: 1500 },
  { who: "bot", text: "Signed and countersigned. PDF in your inbox. We'll be in touch to schedule install ☕", delay: 1700 }];


  const [step, setStep] = React.useState(0);
  const scrollRef = React.useRef(null);

  React.useEffect(() => {
    if (step >= script.length) {
      const t = setTimeout(() => setStep(0), 4000);
      return () => clearTimeout(t);
    }
    const t = setTimeout(() => setStep(step + 1), script[step].delay);
    return () => clearTimeout(t);
  }, [step]);

  React.useEffect(() => {
    if (scrollRef.current) {
      scrollRef.current.scrollTop = scrollRef.current.scrollHeight;
    }
  }, [step]);

  const visible = script.slice(0, step);

  return (
    <div style={{
      width: "100%", maxWidth: 440,
      background: "var(--bg-elevated)",
      border: "1px solid var(--line)",
      borderRadius: 20,
      boxShadow: "0 30px 60px -20px rgba(14,14,16,0.18), 0 8px 16px -8px rgba(14,14,16,0.05)",
      overflow: "hidden",
      display: "flex", flexDirection: "column",
      height: 540
    }}>
      {/* Chat header */}
      <div style={{ padding: "14px 18px", borderBottom: "1px solid var(--line)", display: "flex", alignItems: "center", gap: 12 }}>
        <span style={{
          width: 32, height: 32, borderRadius: "50%",
          background: "linear-gradient(135deg, #C7B4FF, #7B61FF)",
          display: "grid", placeItems: "center", color: "white", fontSize: 13, fontWeight: 600
        }}>M</span>
        <div style={{ flex: 1 }}>
          <div style={{ fontSize: 13.5, fontWeight: 500 }}>Mira · Coffee Concierge</div>
          <div style={{ fontSize: 11.5, color: "var(--success)", display: "flex", alignItems: "center", gap: 5 }}>
            <span style={{ width: 6, height: 6, borderRadius: "50%", background: "var(--success)" }} />
            Online · powered by ContractControl
          </div>
        </div>
        <button style={{ width: 28, height: 28, borderRadius: 8, border: "1px solid var(--line)", background: "var(--bg-soft)", color: "var(--ink-3)", fontSize: 14 }}>×</button>
      </div>

      {/* Chat scroll */}
      <div ref={scrollRef} style={{ flex: 1, overflow: "hidden", padding: "18px 16px", display: "flex", flexDirection: "column", gap: 10, background: "var(--bg)" }}>
        {visible.map((m, i) => {
          if (m.kind === "doc") {
            return (
              <div key={i} className="agent-bubble bubble-bot bubble-doc">
                <div style={{ display: "flex", alignItems: "center", gap: 8, marginBottom: 10 }}>
                  <span style={{ width: 22, height: 22, borderRadius: 6, background: "var(--accent-soft)", color: "var(--accent)", display: "grid", placeItems: "center" }}>
                    <Icon name="docs" size={12} />
                  </span>
                  <span style={{ fontSize: 12.5, fontWeight: 500 }}>{m.title}</span>
                </div>
                {m.lines.map((l, j) =>
                <div key={j} style={{ fontSize: 12, color: "var(--ink-3)", lineHeight: 1.5, padding: "3px 0", display: "flex", gap: 6, alignItems: "flex-start" }}>
                    <span style={{ color: "var(--success)", marginTop: 1 }}>
                      <svg width="10" height="10" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2.5"><polyline points="20 6 9 17 4 12" /></svg>
                    </span>
                    {l}
                  </div>
                )}
                <div style={{ marginTop: 10, paddingTop: 10, borderTop: "1px dashed var(--line)", fontSize: 11, color: "var(--ink-4)", fontFamily: "var(--font-mono)" }}>
                  Auto-drafted from template · Lease-Standard-v3
                </div>
              </div>);

          }
          if (m.kind === "sign") {
            return (
              <div key={i} className="agent-bubble bubble-bot bubble-sign">
                <div style={{ fontSize: 12, color: "var(--ink-3)", marginBottom: 10 }}>Click to sign, eIDAS AES.</div>
                <div style={{
                  background: "white", border: "1px dashed var(--accent)", borderRadius: 10,
                  padding: "16px 14px", display: "flex", flexDirection: "column", gap: 8, alignItems: "center"
                }}>
                  <div style={{
                    fontFamily: "'Caveat', cursive", fontSize: 26,
                    color: "var(--accent)", letterSpacing: "-0.02em"
                  }}>Sarah Chen</div>
                  <div style={{ fontSize: 10, color: "var(--ink-4)", fontFamily: "var(--font-mono)" }}>SIGNED · 14:32 CET · IP 81.230.x.x</div>
                </div>
              </div>);

          }
          return (
            <div key={i} className={"agent-bubble " + (m.who === "bot" ? "bubble-bot" : "bubble-user")}>
              {m.text}
            </div>);

        })}
        {step < script.length &&
        <div className="agent-bubble bubble-bot" style={{ width: 50, padding: "10px 14px" }}>
            <div className="typing-dots"><span /><span /><span /></div>
          </div>
        }
      </div>

      {/* Composer */}
      <div style={{ padding: 12, borderTop: "1px solid var(--line)", background: "var(--bg-elevated)", display: "flex", gap: 8, alignItems: "center" }}>
        <input disabled style={{ flex: 1, height: 36, border: "1px solid var(--line)", borderRadius: 10, padding: "0 12px", fontSize: 13, background: "var(--bg)", color: "var(--ink-4)" }} placeholder="Ask anything…" />
        <button style={{ width: 36, height: 36, borderRadius: 10, background: "var(--accent)", color: "white", border: "none", display: "grid", placeItems: "center" }}>
          <Icon name="arrow" size={14} />
        </button>
      </div>
    </div>);

}

function SalesAgentHero() {
  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-salesagent" 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-salesagent)" />
      </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>
          <a href="/platform/power-modules" style={{ color: "rgba(255,255,255,0.45)" }}>Power Modules</a>
          <span>›</span>
          <span className="tag tag-purple" style={{ margin: 0, padding: "2px 10px" }}>Intake AI Agent</span>
        </div>
        <div style={{ display: "flex", alignItems: "center", gap: 8, marginBottom: 20 }}>
          <span style={{ fontSize: 10.5, fontWeight: 600, letterSpacing: "0.06em", textTransform: "uppercase", padding: "3px 9px", borderRadius: 99, background: "var(--accent-soft)", border: "1px solid rgba(110,86,207,0.2)", color: "var(--accent)", display: "inline-flex", alignItems: "center" }}>Coming soon</span>
        </div>
        <div className="mob-stack no-border" style={{ display: "grid", gridTemplateColumns: "1.05fr 0.95fr", gap: 64, alignItems: "center", marginTop: 24 }}>
          <div>
            <h1 className="display" style={{ fontSize: "clamp(40px, 5.4vw, 64px)", margin: "0 0 22px", color: "#fff" }}>
              Sell, sign, <em>done</em> -<br />
              <span className="accent">all inside one chat</span>.
            </h1>
            <div className="mob-show" style={{ width: "100%", justifyContent: "center", marginBottom: 24 }}>
              <SalesAgentChatDemo />
            </div>
            <p className="lede" style={{ maxWidth: 520, color: "rgba(255,255,255,0.65)" }}>
              Embed a branded AI assistant on your website that guides visitors to the right product, drafts a compliant contract from your approved templates, and lets them click-to-sign, all inside one chat.
            </p>
            <div style={{ marginTop: 28, display: "flex", gap: 12, flexWrap: "wrap" }}>
              <a className="btn btn-accent btn-lg" href="/platform/power-modules/sales-agent/waitlist">Sign up on waiting list <Icon name="arrow" size={14} /></a>
              <a className="btn btn-ghost btn-lg" href="#demo">See it in action</a>
            </div>
            <div style={{ marginTop: 28, display: "flex", gap: 24, fontSize: 12.5, color: "rgba(255,255,255,0.45)" }}>
              <div style={{ display: "flex", alignItems: "center", gap: 6 }}>
                <span style={{ color: "var(--success)" }}>
                  <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>
                15-minute setup
              </div>
              <div style={{ display: "flex", alignItems: "center", gap: 6 }}>
                <span style={{ color: "var(--success)" }}>
                  <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>
                eIDAS AES signatures
              </div>
              <div style={{ display: "flex", alignItems: "center", gap: 6 }}>
                <span style={{ color: "var(--success)" }}>
                  <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>
                Your branding, your domain
              </div>
            </div>
          </div>
          <div id="demo" className="mob-hide" style={{ display: "flex", justifyContent: "center" }}>
            <SalesAgentChatDemo />
          </div>
        </div>
      </div>
    </section>);

}

function SalesAgentValueProps() {
  const props = [
  { num: "0", label: "minutes from interest to signed contract", note: "Typical CLM round-trip is 4-11 days. The Sales Agent collapses it into one conversation." },
  { num: "24/7", label: "always-on, always-on-brand", note: "Closes deals at 2am Tuesday in São Paulo while you sleep in Stockholm." },
  { num: "100%", label: "compliant by construction", note: "Every contract drafted from approved templates. No off-piste language, no surprise legal review." }];

  return (
    <section className="section">
      <div className="container">
        <div style={{ textAlign: "center", maxWidth: 720, margin: "0 auto 48px" }}>
          <span className="eyebrow">Why teams ship it</span>
          <h2 className="h-section" style={{ marginTop: 18 }}>The shortest path<br />between <em>interest and ink</em>.</h2>
        </div>
        <div className="tick-rule" />
        <div className="grid grid-3" style={{ gap: 0 }}>
          {props.map((p, i) =>
          <div key={i} style={{ borderRight: i < props.length - 1 ? "1px solid var(--line)" : "none", padding: "28px 24px" }}>
              <div style={{
              fontFamily: "var(--font-sans)", fontSize: "clamp(40px, 4.6vw, 56px)",
              fontWeight: 500, letterSpacing: "-0.03em", lineHeight: 1, marginBottom: 10
            }}>
                <em style={{ fontFamily: "var(--font-serif)", fontStyle: "italic", fontWeight: 400, color: "var(--accent)" }}>{p.num}</em>
              </div>
              <div style={{ fontSize: 14, fontWeight: 500, marginBottom: 8 }}>{p.label}</div>
              <div style={{ fontSize: 13, color: "var(--ink-4)", lineHeight: 1.55 }}>{p.note}</div>
            </div>
          )}
        </div>
        <div className="tick-rule" />
      </div>
    </section>);

}

function SalesAgentHowItWorks() {
  const steps = [
  {
    n: "01", title: "Connect your templates",
    body: "Pick which contract templates the agent can use, by product, plan, region, or customer segment. Set boundaries on what's negotiable, what's not.",
    visual:
    <div style={{ background: "var(--bg-elevated)", border: "1px solid var(--line)", borderRadius: 12, padding: 16, fontSize: 12 }}>
          <div style={{ fontSize: 10, fontWeight: 500, letterSpacing: "0.14em", textTransform: "uppercase", color: "var(--ink-4)", marginBottom: 12 }}>Synced templates · 4</div>
          {["MSA · Pro Plan", "MSA · Enterprise", "DPA · GDPR addendum", "NDA · Mutual"].map((t, i) =>
      <div key={t} style={{ display: "flex", alignItems: "center", gap: 8, padding: "8px 0", borderTop: i === 0 ? "none" : "1px solid var(--line)" }}>
              <input type="checkbox" defaultChecked style={{ accentColor: "var(--accent)" }} />
              <span style={{ flex: 1, fontSize: 12 }}>{t}</span>
              <span className="tag" style={{ height: 18, fontSize: 9, padding: "0 6px", background: "var(--accent-soft)", color: "var(--accent-ink)", borderColor: "rgba(110,86,207,0.2)" }}>v4.2</span>
            </div>
      )}
        </div>

  },
  {
    n: "02", title: "Map products & terms",
    body: "Tell the agent what you sell, products, plans, prices, and the rules around them. It learns your catalog, then asks the right questions to match each visitor to the right contract.",
    visual:
    <div style={{ background: "var(--bg-elevated)", border: "1px solid var(--line)", borderRadius: 12, padding: 16, fontSize: 12 }}>
          <div style={{ fontSize: 10, fontWeight: 500, letterSpacing: "0.14em", textTransform: "uppercase", color: "var(--ink-4)", marginBottom: 12 }}>Catalog rules</div>
          {[
      { rule: "If team size > 50", arrow: "→ Enterprise template" },
      { rule: "If region = EU", arrow: "→ Append GDPR DPA" },
      { rule: "If trial conversion", arrow: "→ Apply 20% discount" }].
      map((r, i) =>
      <div key={i} style={{ padding: "8px 0", borderTop: i === 0 ? "none" : "1px solid var(--line)" }}>
              <div style={{ fontSize: 11.5, fontFamily: "var(--font-mono)", color: "var(--ink-2)" }}>{r.rule}</div>
              <div style={{ fontSize: 11.5, color: "var(--accent)", marginTop: 2 }}>{r.arrow}</div>
            </div>
      )}
        </div>

  },
  {
    n: "03", title: "Drop in the chat widget",
    body: "One <script> tag on your site. Brand it with your colors, logo, agent name, and tone of voice. Position it anywhere, on pricing pages, post-trial, or as a global launcher.",
    visual:
    <div style={{ background: "var(--ink-1)", color: "white", borderRadius: 12, padding: 18, fontSize: 11.5, fontFamily: "var(--font-mono)", lineHeight: 1.65, position: "relative" }}>
          <div style={{ position: "absolute", top: 14, right: 14, display: "flex", gap: 5 }}>
            {["#FF5F56", "#FFBD2E", "#27C93F"].map((c, i) =>
        <span key={i} style={{ width: 10, height: 10, borderRadius: "50%", background: c }} />
        )}
          </div>
          <div style={{ color: "rgba(255,255,255,0.5)" }}>{"<!-- Embed Mira on your site -->"}</div>
          <div style={{ color: "#C7B4FF" }}>{'<script'}</div>
          <div style={{ paddingLeft: 16, color: "rgba(255,255,255,0.85)" }}>src="https://contractcontrol.co/agent.js"</div>
          <div style={{ paddingLeft: 16, color: "rgba(255,255,255,0.85)" }}>data-agent="mira"</div>
          <div style={{ paddingLeft: 16, color: "rgba(255,255,255,0.85)" }}>data-theme="light"</div>
          <div style={{ color: "#C7B4FF" }}>{'/>'}</div>
        </div>

  },
  {
    n: "04", title: "Sit back, watch deals close",
    body: "Visitors chat. Mira understands their need, drafts the right contract from your approved templates, walks them through it, and collects the signature, all without a single internal hand-off.",
    visual:
    <div style={{ background: "var(--bg-elevated)", border: "1px solid var(--line)", borderRadius: 12, padding: 16, fontSize: 12 }}>
          <div style={{ fontSize: 10, fontWeight: 500, letterSpacing: "0.14em", textTransform: "uppercase", color: "var(--ink-4)", marginBottom: 12 }}>This week · auto-closed</div>
          {[
      { who: "northwind.com", val: "€11,400", time: "2h ago" },
      { who: "kvist-group.eu", val: "€7,200", time: "yesterday" },
      { who: "modulor.de", val: "€42,000", time: "Mon" }].
      map((d, i) =>
      <div key={i} style={{ display: "flex", alignItems: "center", padding: "8px 0", borderTop: i === 0 ? "none" : "1px solid var(--line)" }}>
              <span style={{ width: 6, height: 6, borderRadius: "50%", background: "var(--success)", marginRight: 10 }} />
              <span style={{ flex: 1, fontSize: 11.5, fontFamily: "var(--font-mono)" }}>{d.who}</span>
              <span style={{ fontSize: 12, fontWeight: 500, marginRight: 12 }}>{d.val}</span>
              <span style={{ fontSize: 11, color: "var(--ink-4)" }}>{d.time}</span>
            </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 style={{ textAlign: "center", maxWidth: 720, margin: "0 auto 56px" }}>
          <span className="eyebrow">From templates to sale · in four steps</span>
          <h2 className="h-section" style={{ marginTop: 18 }}>Set it up <em>once</em>.<br />Close deals <span className="accent">forever</span>.</h2>
        </div>
        <div style={{ display: "flex", flexDirection: "column", gap: 16 }}>
          {steps.map((s, i) =>
          <div key={s.n} style={{
            display: "grid",
            gridTemplateColumns: i % 2 === 0 ? "1.1fr 0.9fr" : "0.9fr 1.1fr",
            gap: 32, alignItems: "center",
            background: "var(--bg-elevated)",
            border: "1px solid var(--line)",
            borderRadius: "var(--r-xl)",
            padding: 32
          }}>
              <div style={{ order: i % 2 === 0 ? 1 : 2 }}>
                <div style={{ fontFamily: "var(--font-mono)", fontSize: 11, color: "var(--accent)", letterSpacing: "0.14em", marginBottom: 10 }}>STEP {s.n}</div>
                <h3 style={{ fontSize: 26, fontWeight: 500, letterSpacing: "-0.02em", margin: "0 0 12px" }}>{s.title}</h3>
                <p style={{ fontSize: 14.5, color: "var(--ink-3)", lineHeight: 1.6, margin: 0 }}>{s.body}</p>
              </div>
              <div style={{ order: i % 2 === 0 ? 2 : 1 }}>{s.visual}</div>
            </div>
          )}
        </div>
      </div>
    </section>);

}

function SalesAgentBeforeAfter() {
  const before = [
  "Visitor lands on pricing → fills out a form → waits 4 days for sales to email back",
  "Sales books a call, qualifies, sends a quote, three more days gone",
  "Sales drafts a contract in Word, emails it, customer redlines, back-and-forth begins",
  "Customer finally signs at week two, half the original urgency gone",
  "Sales rep wakes up in São Paulo, deal closed in Stockholm hours, momentum lost"];

  const after = [
  "Visitor lands on pricing → opens chat → describes their team in 15 seconds",
  "Mira asks two clarifying questions, picks the right template, drafts in real time",
  "Customer reads the contract inside the chat, terms in plain language, click to expand",
  "Visitor signs in 90 seconds, PDF in their inbox, account auto-provisioned",
  "Asleep at 2am? Mira's already closed three deals. Wake up to signed PDFs."];

  return (
    <section className="section">
      <div className="container">
        <div 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>Mira</em>.</h2>
        </div>
        <div className="grid grid-2" style={{ gap: 20 }}>
          <div className="card" style={{ padding: 32 }}>
            <span className="tag" style={{ background: "rgba(180,35,24,0.06)", color: "var(--danger)", borderColor: "rgba(180,35,24,0.16)" }}>Before</span>
            <h3 style={{ fontSize: 22, fontWeight: 500, letterSpacing: "-0.018em", margin: "16px 0 18px" }}>4-11 days from interest to ink</h3>
            {before.map((it, i) =>
            <div 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: "rgba(180,35,24,0.08)", color: "var(--danger)" }}>
                  <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>
                </span>
                <span>{it}</span>
              </div>
            )}
          </div>
          <div className="card" style={{ padding: 32, position: "relative", overflow: "hidden" }}>
            <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={{ background: "var(--accent-soft)", color: "var(--accent-ink)", borderColor: "rgba(110,86,207,0.20)" }}>After</span>
              <h3 style={{ fontSize: 22, fontWeight: 500, letterSpacing: "-0.018em", margin: "16px 0 18px" }}>90 seconds from interest to ink</h3>
              {after.map((it, i) =>
              <div 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: "var(--accent-soft)", color: "var(--accent)" }}>
                    <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>
                </div>
              )}
            </div>
          </div>
        </div>
      </div>
    </section>);

}

function SalesAgentCapabilities() {
  const features = [
  { icon: "workspace", title: "Brand it like yours", desc: "Logo, colors, agent name, tone of voice, your customers chat with you, not us. Your domain, your styling, your voice." },
  { icon: "intake", title: "Smart product matching", desc: "Mira asks the right questions to route each visitor to the right plan, the right template, the right terms. No misfits." },
  { icon: "drafting", title: "Drafted from approved templates", desc: "Every contract built from your library, never invented. Variables filled, optional clauses included or omitted by your rules." },
  { icon: "negotiation", title: "Plain-language explainers", desc: "Customers can ask \"what does this clause mean\" inside the chat. Mira explains, the contract stays compliant." },
  { icon: "sign", title: "Click-to-sign · eIDAS AES", desc: "Signed inside the chat. Legally binding across the EU and EEA. Counter-signature automatic, PDF emailed both ways." },
  { icon: "permission", title: "Escalates when needed", desc: "Custom request? Off-template clause? Mira pauses, captures the ask, and routes to a human with full context." },
  { icon: "review", title: "Native to ContractControl", desc: "Every signed contract lands in your repository, tagged, indexed, and tied to the customer record. No second system." },
  { icon: "analytics", title: "Conversion analytics", desc: "Where do visitors drop off? Which products convert fastest? What's the average size of a Mira-closed deal? All in your dashboard." },
  { icon: "obligations", title: "Honest by design", desc: "Mira tells visitors she's an AI. She'll never overpromise, never invent terms. Your reputation, intact." }];

  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">Capabilities</span>
          <h2 className="h-section" style={{ marginTop: 18 }}>Everything you'd expect from <em>your best closer</em>.</h2>
        </div>
        <div className="grid grid-3" 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 SalesAgentSetup() {
  return (
    <section className="section">
      <div className="container">
        <div className="mob-stack" style={{ display: "grid", gridTemplateColumns: "0.95fr 1.05fr", gap: 56, alignItems: "center" }}>
          <div>
            <span className="eyebrow">Setup</span>
            <h2 className="h-section" style={{ marginTop: 18 }}>Live on your site in <em>15 minutes</em>.</h2>
            <p style={{ fontSize: 16, color: "var(--ink-3)", lineHeight: 1.6, marginTop: 18 }}>
              No engineering team required. No professional services package. No multi-month implementation. Just three things you already have, and one script tag.
            </p>
            <ul style={{ listStyle: "none", padding: 0, margin: "24px 0 0" }}>
              {[
              "Pick the templates you want Mira to use",
              "Map your products and pricing",
              "Drop the chat widget on your site"].
              map((s, i) =>
              <li key={i} style={{ display: "flex", alignItems: "center", gap: 14, padding: "14px 0", borderTop: i === 0 ? "1px solid var(--line)" : "1px solid var(--line)" }}>
                  <span style={{
                  width: 28, height: 28, borderRadius: "50%",
                  background: "var(--accent)", color: "white",
                  display: "grid", placeItems: "center",
                  fontSize: 13, fontWeight: 500
                }}>{i + 1}</span>
                  <span style={{ fontSize: 15.5, color: "var(--ink-1)" }}>{s}</span>
                </li>
              )}
            </ul>
          </div>
          <div style={{ background: "var(--bg-elevated)", border: "1px solid var(--line)", borderRadius: 16, padding: 28 }}>
            <div style={{ display: "flex", alignItems: "center", justifyContent: "space-between", marginBottom: 20 }}>
              <div style={{ fontSize: 11, fontWeight: 500, letterSpacing: "0.14em", textTransform: "uppercase", color: "var(--ink-4)" }}>Setup checklist</div>
              <span className="tag tag-purple" style={{ height: 22, fontSize: 11 }}>15 min</span>
            </div>
            {[
            { task: "Connect 3+ contract templates", time: "5 min", done: true },
            { task: "Map products to template rules", time: "5 min", done: true },
            { task: "Brand & customize the widget", time: "3 min", done: true },
            { task: "Embed the script on your site", time: "2 min", done: false, active: true }].
            map((item, i) =>
            <div key={i} style={{
              display: "flex", alignItems: "center", gap: 14,
              padding: "14px 0",
              borderTop: i === 0 ? "none" : "1px solid var(--line)"
            }}>
                <span style={{
                width: 18, height: 18, borderRadius: 5,
                border: item.done ? "none" : "1.5px solid var(--line)",
                background: item.done ? "var(--accent)" : "transparent",
                color: "white", display: "grid", placeItems: "center",
                flex: "0 0 18px"
              }}>
                  {item.done && <svg width="11" height="11" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="3"><polyline points="20 6 9 17 4 12" /></svg>}
                </span>
                <span style={{ flex: 1, fontSize: 14, fontWeight: item.active ? 500 : 400, color: item.done ? "var(--ink-3)" : "var(--ink-1)", textDecoration: item.done ? "line-through" : "none" }}>{item.task}</span>
                <span style={{ fontSize: 11.5, color: "var(--ink-4)", fontFamily: "var(--font-mono)" }}>{item.time}</span>
              </div>
            )}
            <div style={{ marginTop: 18, paddingTop: 18, borderTop: "1px dashed var(--line)", display: "flex", alignItems: "center", gap: 10 }}>
              <span style={{ width: 8, height: 8, borderRadius: "50%", background: "var(--success)" }} />
              <span style={{ fontSize: 12.5, color: "var(--ink-3)" }}>3 of 4 complete · ready to deploy</span>
            </div>
          </div>
        </div>
      </div>
    </section>);

}

function SalesAgentQuote() {
  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: "44px 48px" }}>
          <p style={{
            fontFamily: "var(--font-serif)", fontStyle: "italic", fontWeight: 400,
            fontSize: "clamp(22px, 2.4vw, 28px)", lineHeight: 1.35, letterSpacing: "-0.005em",
            margin: "0 0 24px", color: "var(--ink-1)"
          }}>"We launched Mira on a Tuesday. By Friday she'd closed €38k in self-serve deals, and not one of them had touched our sales team. We renamed our pricing page launch the same week."</p>
          <div style={{ display: "flex", alignItems: "center", gap: 12 }}>
            <span style={{ width: 36, height: 36, borderRadius: "50%", background: "linear-gradient(135deg, #C7D2FE, #7B61FF)" }} />
            <div>
              <div style={{ fontSize: 14, fontWeight: 500 }}>Henrik Engdahl</div>
              <div style={{ fontSize: 12, color: "var(--ink-4)" }}>VP Sales, Modulor</div>
            </div>
          </div>
        </div>
      </div>
    </section>);

}

function SalesAgentCTA() {
  return (
    <section className="section">
      <div className="container">
        <div style={{
          background: "linear-gradient(135deg, #1A1226 0%, #2C1F47 60%, #3D2C66 100%)",
          color: "white",
          borderRadius: "var(--r-2xl)",
          padding: "64px 56px",
          position: "relative", overflow: "hidden"
        }}>
          <div style={{ position: "absolute", right: -120, top: -120, width: 480, height: 480, background: "radial-gradient(closest-side, rgba(199,180,255,0.25), transparent 70%)", pointerEvents: "none" }} />
          <div style={{ maxWidth: 640, position: "relative", zIndex: 1 }}>
            <span className="tag" style={{ background: "rgba(199,180,255,0.18)", color: "#E5DAFF", borderColor: "rgba(199,180,255,0.3)" }}>Ready when you are</span>
            <h2 style={{ fontFamily: "var(--font-sans)", fontWeight: 500, fontSize: "clamp(32px, 4vw, 48px)", lineHeight: 1.05, letterSpacing: "-0.025em", margin: "20px 0 16px" }}>
              Stop losing deals to <span style={{ fontFamily: "var(--font-serif)", fontStyle: "italic", fontWeight: 400, color: "#C7B4FF" }}>scheduling</span>.
            </h2>
            <p style={{ fontSize: 17, lineHeight: 1.55, color: "rgba(255,255,255,0.78)", margin: 0, maxWidth: 540 }}>
              See Mira in action with your own templates. We'll spin up a sandbox in your branding so you can chat with your own AI sales agent before you commit.
            </p>
            <div style={{ marginTop: 32, display: "flex", gap: 12, flexWrap: "wrap" }}>
              <a className="btn btn-lg" href="/platform/power-modules/sales-agent/waitlist" style={{ background: "white", color: "var(--ink-1)" }}>Sign up on waiting list <Icon name="arrow" size={14} /></a>
              <a className="btn btn-lg" href="/pricing" style={{ color: "white", border: "1px solid rgba(255,255,255,0.25)" }}>View pricing</a>
            </div>
          </div>
        </div>
      </div>
    </section>);

}

function SalesAgentPage() {
  return (
    <div>
      <SalesAgentHero />
      <LogoStrip />
      <SalesAgentValueProps />
      <SalesAgentHowItWorks />
      <SalesAgentBeforeAfter />
      <SalesAgentCapabilities />
      <SalesAgentSetup />
      <SalesAgentQuote />
      <SalesAgentCTA />
    </div>);

}

Object.assign(window, { SalesAgentPage });