// Dataroom, custom landing page with animated value visualization
// Story arc: invite buyer → they open a doc with personalized watermark → audit captures the view → deal closes → access auto-revoked

function DataroomAnim() {
  // Stages of the story; advance every ~2.4s, loop forever.
  const STAGES = [
    "invite",     // 0  Send invite to buyer
    "viewing",    // 1  Buyer opens watermarked doc
    "tracking",   // 2  Audit captures the activity
    "qa",         // 3  Q&A routed to right SME
    "closed",     // 4  Deal closes, access auto-revoked
  ];
  const [stage, setStage] = React.useState(0);
  React.useEffect(() => {
    const t = setTimeout(() => setStage((stage + 1) % STAGES.length), 2700);
    return () => clearTimeout(t);
  }, [stage]);

  // pull-out helpers
  const at = (s) => stage >= STAGES.indexOf(s);
  const eq = (s) => stage === STAGES.indexOf(s);

  return (
    <div style={{
      width: "100%", maxWidth: 580, height: 520,
      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",
      position: "relative",
      display: "flex", flexDirection: "column",
    }}>
      {/* Top chrome */}
      <div style={{ display: "flex", alignItems: "center", gap: 10, padding: "12px 16px", borderBottom: "1px solid var(--line)", background: "var(--bg-soft)" }}>
        <span style={{ width: 30, height: 30, borderRadius: 8, background: "var(--accent-soft)", color: "var(--accent)", display: "grid", placeItems: "center" }}>
          <Icon name="dataroom" size={14} />
        </span>
        <div style={{ flex: 1, fontSize: 13, fontWeight: 500 }}>
          Project Helios · M&A
          <div style={{ fontSize: 10.5, color: "var(--ink-4)", fontWeight: 400 }}>
            142 documents · 6 invited parties
          </div>
        </div>
        <span style={{
          fontSize: 10.5, fontFamily: "var(--font-mono)",
          padding: "3px 9px", borderRadius: 999,
          background: eq("closed") ? "rgba(31,138,76,0.10)" : "var(--accent-soft)",
          color: eq("closed") ? "var(--success)" : "var(--accent)",
          border: "1px solid " + (eq("closed") ? "rgba(31,138,76,0.20)" : "rgba(110,86,207,0.20)"),
          transition: "all 280ms ease",
        }}>
          {eq("closed") ? "Closed" : "Active"}
        </span>
      </div>

      {/* Main canvas */}
      <div style={{ position: "relative", flex: 1, padding: 18, display: "grid", gridTemplateColumns: "180px 1fr", gap: 14, overflow: "hidden" }}>
        {/* Left: file tree */}
        <div style={{ background: "var(--bg-soft)", border: "1px solid var(--line)", borderRadius: 12, padding: 14, fontSize: 12 }}>
          <div style={{ fontSize: 10, fontWeight: 500, letterSpacing: "0.14em", textTransform: "uppercase", color: "var(--ink-4)", marginBottom: 10 }}>Index</div>
          {[
            { n: "01", name: "Corporate", count: 18 },
            { n: "02", name: "Financials", count: 32, active: true },
            { n: "03", name: "Commercial", count: 41 },
            { n: "04", name: "IP & tech", count: 22 },
            { n: "05", name: "HR", count: 15 },
            { n: "06", name: "Legal", count: 14 },
          ].map((f, i) => (
            <div key={f.name} style={{
              display: "flex", alignItems: "center", gap: 8,
              padding: "6px 8px",
              background: f.active ? "var(--bg-elevated)" : "transparent",
              border: f.active ? "1px solid var(--line)" : "1px solid transparent",
              borderRadius: 6,
              marginBottom: 2,
            }}>
              <span style={{ fontSize: 9.5, fontFamily: "var(--font-mono)", color: "var(--ink-4)", width: 14 }}>{f.n}</span>
              <span style={{ flex: 1, fontSize: 11.5, color: f.active ? "var(--ink-1)" : "var(--ink-3)", fontWeight: f.active ? 500 : 400 }}>{f.name}</span>
              <span style={{ fontSize: 10, color: "var(--ink-4)" }}>{f.count}</span>
            </div>
          ))}
        </div>

        {/* Right: dynamic stage area */}
        <div style={{ position: "relative", background: "var(--bg)", border: "1px solid var(--line)", borderRadius: 12, overflow: "hidden" }}>
          {/* Document with watermark */}
          <div style={{
            position: "absolute", inset: 0,
            padding: "20px 22px 18px",
            opacity: at("viewing") && !eq("closed") ? 1 : (eq("invite") ? 0.4 : 0.6),
            transition: "opacity 360ms ease",
          }}>
            <div style={{ fontSize: 9.5, fontFamily: "var(--font-mono)", color: "var(--ink-4)", letterSpacing: "0.12em" }}>02 · FINANCIALS</div>
            <div style={{ fontSize: 14, fontWeight: 500, marginTop: 4, color: "var(--ink-1)" }}>Audited financials · FY2025</div>
            {/* Lines */}
            <div style={{ marginTop: 14, display: "flex", flexDirection: "column", gap: 6 }}>
              {[100, 92, 96, 70, 88, 82, 100, 60, 90, 76, 86, 70].map((w, i) => (
                <div key={i} style={{ height: 4, width: w + "%", background: "var(--line)", borderRadius: 2 }} />
              ))}
            </div>

            {/* Watermark, only shows during viewing/tracking */}
            {(eq("viewing") || eq("tracking")) && (
              <div style={{
                position: "absolute",
                inset: 0,
                pointerEvents: "none",
                display: "grid",
                placeItems: "center",
                animation: "fadeWM 360ms ease",
              }}>
                <div style={{
                  transform: "rotate(-22deg)",
                  opacity: 0.18,
                  fontFamily: "var(--font-mono)",
                  fontSize: 11,
                  letterSpacing: "0.08em",
                  color: "var(--accent)",
                  textAlign: "center",
                  lineHeight: 1.7,
                  whiteSpace: "nowrap",
                }}>
                  EMMA SCHULZ · 81.230.x.x · 2026-04-26 14:32 CET<br/>
                  EMMA SCHULZ · 81.230.x.x · 2026-04-26 14:32 CET<br/>
                  EMMA SCHULZ · 81.230.x.x · 2026-04-26 14:32 CET<br/>
                  EMMA SCHULZ · 81.230.x.x · 2026-04-26 14:32 CET
                </div>
              </div>
            )}
          </div>

          {/* === Overlays per stage === */}

          {/* Stage 0: Invite card slides in from top */}
          {eq("invite") && (
            <div style={{
              position: "absolute", inset: 12,
              background: "var(--bg-elevated)",
              border: "1px solid var(--line)",
              borderRadius: 10,
              padding: 16,
              boxShadow: "0 12px 24px -12px rgba(14,14,16,0.16)",
              animation: "stageIn 360ms cubic-bezier(0.2, 0.8, 0.2, 1)",
            }}>
              <div style={{ fontSize: 10, fontWeight: 500, letterSpacing: "0.14em", textTransform: "uppercase", color: "var(--accent)" }}>Invite buyer</div>
              <div style={{ fontSize: 14, fontWeight: 500, marginTop: 6 }}>Apex Capital, Lead buyer</div>
              <div style={{ marginTop: 14, display: "flex", flexDirection: "column", gap: 8, fontSize: 11.5 }}>
                {[
                  { l: "Recipient", v: "emma.schulz@apex-capital.de" },
                  { l: "Access", v: "View only · No download" },
                  { l: "Watermark", v: "Email · IP · Timestamp" },
                  { l: "Expires", v: "On signing · or 90 days" },
                ].map((r) => (
                  <div key={r.l} style={{ display: "flex", justifyContent: "space-between", padding: "5px 0", borderTop: "1px solid var(--line)" }}>
                    <span style={{ color: "var(--ink-4)" }}>{r.l}</span>
                    <span style={{ color: "var(--ink-1)", fontWeight: 500, fontFamily: r.l === "Recipient" ? "var(--font-mono)" : "inherit", fontSize: r.l === "Recipient" ? 10.5 : 11.5 }}>{r.v}</span>
                  </div>
                ))}
              </div>
              <button style={{
                marginTop: 14, width: "100%",
                padding: "9px 0", borderRadius: 8,
                background: "var(--accent)", color: "white",
                border: "none", fontSize: 12, fontWeight: 500,
                display: "inline-flex", alignItems: "center", justifyContent: "center", gap: 6,
              }}>
                Send secure invite <Icon name="arrow" size={11} />
              </button>
            </div>
          )}

          {/* Stage 2: tracking, audit chips animate in */}
          {eq("tracking") && (
            <div style={{
              position: "absolute", left: 12, right: 12, bottom: 12,
              background: "var(--ink-1)", color: "white",
              borderRadius: 10, padding: 14,
              animation: "stageInUp 320ms cubic-bezier(0.2, 0.8, 0.2, 1)",
            }}>
              <div style={{ display: "flex", alignItems: "center", gap: 8, marginBottom: 8 }}>
                <span style={{ width: 6, height: 6, borderRadius: "50%", background: "#7CC58A", animation: "pulse 1.4s ease-in-out infinite" }} />
                <div style={{ fontSize: 10.5, letterSpacing: "0.14em", textTransform: "uppercase", color: "rgba(255,255,255,0.65)" }}>Live audit · Apex Capital</div>
              </div>
              {[
                { t: "14:32", e: "Opened Audited financials · FY2025", new: true },
                { t: "14:30", e: "Opened Cap table v3" },
                { t: "14:29", e: "Logged in · 81.230.x.x" },
              ].map((row, i) => (
                <div key={i} style={{
                  display: "grid", gridTemplateColumns: "44px 1fr auto",
                  gap: 8, alignItems: "center",
                  padding: "5px 0",
                  borderTop: i === 0 ? "none" : "1px solid rgba(255,255,255,0.08)",
                  fontSize: 11,
                  color: "rgba(255,255,255,0.85)",
                  animation: row.new ? "stageInUp 360ms ease" : "none",
                }}>
                  <span style={{ fontFamily: "var(--font-mono)", color: "rgba(255,255,255,0.55)" }}>{row.t}</span>
                  <span>{row.e}</span>
                  {row.new && <span style={{ fontSize: 9, color: "#7CC58A", fontFamily: "var(--font-mono)" }}>NEW</span>}
                </div>
              ))}
            </div>
          )}

          {/* Stage 3: Q&A routing card */}
          {eq("qa") && (
            <div style={{
              position: "absolute", inset: 12,
              display: "flex", flexDirection: "column", gap: 10,
              animation: "stageIn 360ms cubic-bezier(0.2, 0.8, 0.2, 1)",
            }}>
              <div style={{ background: "var(--bg-elevated)", border: "1px solid var(--line)", borderRadius: 10, padding: 12, fontSize: 11.5 }}>
                <div style={{ display: "flex", alignItems: "center", gap: 8, marginBottom: 6 }}>
                  <span style={{ width: 22, height: 22, borderRadius: "50%", background: "linear-gradient(135deg, #C7D2FE, #818CF8)" }} />
                  <span style={{ fontWeight: 500 }}>Emma Schulz · Apex</span>
                  <span style={{ fontSize: 10, color: "var(--ink-4)", marginLeft: "auto" }}>14:34</span>
                </div>
                <div style={{ color: "var(--ink-2)", lineHeight: 1.5 }}>"Re: §4.2 of the MSA, confirm the cap on indirect damages."</div>
              </div>
              {/* Routing arrow */}
              <div style={{ alignSelf: "center", display: "flex", alignItems: "center", gap: 6, fontSize: 10, color: "var(--accent)", fontFamily: "var(--font-mono)", letterSpacing: "0.12em" }}>
                AUTO-ROUTED <Icon name="arrow" size={10} />
              </div>
              <div style={{ background: "var(--accent-soft)", border: "1px solid rgba(110,86,207,0.20)", borderRadius: 10, padding: 12, fontSize: 11.5 }}>
                <div style={{ display: "flex", alignItems: "center", gap: 8, marginBottom: 6 }}>
                  <span style={{ width: 22, height: 22, borderRadius: "50%", background: "linear-gradient(135deg, #FCD7C6, #B65532)" }} />
                  <span style={{ fontWeight: 500 }}>Linnea · Commercial counsel</span>
                  <span className="tag" style={{ height: 18, fontSize: 9, padding: "0 6px", marginLeft: "auto", background: "white", borderColor: "rgba(110,86,207,0.20)" }}>SME · Commercial</span>
                </div>
                <div style={{ color: "var(--ink-2)", lineHeight: 1.5 }}>Drafting reply · approval before send.</div>
              </div>
            </div>
          )}

          {/* Stage 4: closed, revoke banner */}
          {eq("closed") && (
            <div style={{
              position: "absolute", inset: 12,
              display: "grid", placeItems: "center",
              animation: "stageIn 360ms cubic-bezier(0.2, 0.8, 0.2, 1)",
            }}>
              <div style={{
                background: "var(--bg-elevated)",
                border: "1px solid var(--line)",
                borderRadius: 14,
                padding: 24,
                textAlign: "center",
                width: "100%",
              }}>
                <div style={{ width: 44, height: 44, borderRadius: "50%", background: "rgba(31,138,76,0.10)", color: "var(--success)", display: "grid", placeItems: "center", margin: "0 auto 12px" }}>
                  <Icon name="permission" size={20} />
                </div>
                <div style={{ fontSize: 14, fontWeight: 500, marginBottom: 4 }}>Deal closed · access revoked</div>
                <div style={{ fontSize: 11.5, color: "var(--ink-4)", lineHeight: 1.55 }}>
                  All 6 parties auto-removed at signing.<br/>
                  142-page audit log archived to deal file.
                </div>
                <div style={{ marginTop: 14, paddingTop: 12, borderTop: "1px dashed var(--line)", fontSize: 10.5, fontFamily: "var(--font-mono)", color: "var(--accent)", letterSpacing: "0.10em" }}>
                  T+0 · NO MANUAL CLEANUP
                </div>
              </div>
            </div>
          )}
        </div>
      </div>

      {/* Stepper / progress at bottom */}
      <div style={{ borderTop: "1px solid var(--line)", padding: "12px 18px", display: "flex", alignItems: "center", justifyContent: "space-between", background: "var(--bg-soft)" }}>
        <div style={{ display: "flex", gap: 6 }}>
          {STAGES.map((s, i) => (
            <span key={s} style={{
              width: i === stage ? 28 : 8, height: 4, borderRadius: 2,
              background: i <= stage ? "var(--accent)" : "var(--line-strong)",
              transition: "all 320ms ease",
            }} />
          ))}
        </div>
        <div style={{ fontSize: 10.5, fontFamily: "var(--font-mono)", color: "var(--ink-4)", letterSpacing: "0.10em" }}>
          {[
            "01 · INVITE",
            "02 · WATERMARKED VIEW",
            "03 · LIVE AUDIT",
            "04 · Q&A ROUTED",
            "05 · AUTO-REVOKE",
          ][stage]}
        </div>
      </div>

      <style>{`
        @keyframes stageIn { from { opacity: 0; transform: translateY(6px) scale(0.98); } to { opacity: 1; transform: none; } }
        @keyframes stageInUp { from { opacity: 0; transform: translateY(10px); } to { opacity: 1; transform: none; } }
        @keyframes fadeWM { from { opacity: 0; } to { opacity: 0.18; } }
        @keyframes pulse { 0%, 100% { transform: scale(1); opacity: 1; } 50% { transform: scale(1.4); opacity: 0.5; } }
      `}</style>
    </div>
  );
}

function DataroomHero() {
  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-dataroom" 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-dataroom)" />
      </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" }}>Dataroom</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: "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" }}>
              Diligence-ready datarooms,<br/>
              in <em>two clicks</em>.
            </h1>
            <div className="mob-show" style={{ width: "100%", justifyContent: "center", marginBottom: 24 }}>
              <DataroomAnim />
            </div>
            <p className="lede" style={{ maxWidth: 520, color: "rgba(255,255,255,0.65)" }}>
              Spin up secure deal rooms with watermarking, granular permissions, and full audit trails, without the legacy VDR price tag.
            </p>
            <div style={{ marginTop: 28, display: "flex", gap: 12, flexWrap: "wrap" }}>
              <a className="btn btn-accent btn-lg" href="/platform/power-modules/dataroom/waitlist">Sign up on waiting list <Icon name="arrow" size={14} /></a>
              <a className="btn btn-ghost btn-lg" href="/platform/power-modules">All modules</a>
            </div>
            <div style={{ marginTop: 28, display: "flex", gap: 24, fontSize: 12.5, color: "rgba(255,255,255,0.45)", flexWrap: "wrap" }}>
              {["Per-viewer watermarks", "Auto-revoke at close", "SOC 2 + ISO 27001"].map((t) => (
                <div key={t} 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>
                  {t}
                </div>
              ))}
            </div>
          </div>
          <div className="mob-hide" style={{ display: "flex", justifyContent: "center" }}>
            <DataroomAnim />
          </div>
        </div>
      </div>
    </section>
  );
}

function DataroomValueProps() {
  const props = [
    { num: "2 min", label: "to spin up a fully-indexed dataroom", note: "Drag your folder, set permissions, send invites. Skip the 4-week setup other VDRs charge for." },
    { num: "60%", label: "less than legacy virtual datarooms", note: "Predictable pricing, no per-MB fees, no per-page export charges, no surprise invoice at closing." },
    { num: "100%", label: "auditable, every view, every page", note: "Every interaction logged and exportable. Counter-signed audit trail goes straight into the deal file." },
  ];
  return (
    <section className="section">
      <div className="container">
        <div style={{ textAlign: "center", maxWidth: 720, margin: "0 auto 48px" }}>
          <span className="eyebrow">Why deal teams switch</span>
          <h2 className="h-section" style={{ marginTop: 18 }}>Modern <em>VDR economics</em>.<br/>None of the legacy fees.</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 DataroomCapabilities() {
  const features = [
    { title: "Personalized watermarks", desc: "Every page stamped with viewer email, IP and timestamp. Leaks become forensic, not anonymous." },
    { title: "Granular access", desc: "Folder, file, even page-level permissions. Revoke instantly when a deal goes cold." },
    { title: "Full audit trail", desc: "Who opened what, for how long, on which device. Exportable for the board pack." },
    { title: "Q&A workflows", desc: "Buyer questions routed to the right SME, with version-controlled answers visible to all bidders." },
    { title: "Dynamic NDA gates", desc: "Click-through NDA on entry; access blocked until executed and stored alongside the audit log." },
    { title: "Auto-revoke on close", desc: "Deal closes → access disabled, watermarks frozen, complete archive sealed for retention." },
  ];
  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 in <em>one module</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="dataroom" 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 DataroomPage() {
  return (
    <div>
      <DataroomHero />
      <LogoStrip />
      <DataroomValueProps />
      <DataroomCapabilities />
      <FinalCTA
        eyebrow="Power Module · Dataroom"
        title={<>Modern VDR economics,<br /><span style={{ color: "#C7B4FF" }}>none of the legacy fees</span>.</>}
        description="Spin up secure deal rooms with watermarking, granular permissions, and full audit trails. Early access opens to waitlist members first."
        ctaText="Sign up on waiting list"
        ctaHref="/platform/power-modules/dataroom/waitlist"
      />
    </div>
  );
}

Object.assign(window, { DataroomPage, DataroomAnim });