// Animated eSignature mockup, narrates the value:
// 0) Document locked · ready  →  1) Email ping lands
// 2) Identity verified         →  3) Signature placed
// 4) eIDAS certificate appears →  5) "Sealed & filed" confirmation

function SignatureAnimation() {
  const [tick, setTick] = React.useState(0);
  React.useEffect(() => {
    const id = setInterval(() => setTick((t) => (t + 1) % 8), 1200);
    return () => clearInterval(id);
  }, []);

  const show = (n) => tick >= n;
  const hide = (n) => tick < n;

  const signers = [
    { name: "Linnea Andersson", role: "CFO · Volantis AB", state: tick >= 3 ? "signed" : tick >= 2 ? "active" : "waiting" },
    { name: "Erik Hagberg",     role: "CEO · Volantis AB", state: tick >= 5 ? "signed" : "waiting" },
    { name: "Maya Karlsson",    role: "GC · Velora",       state: "waiting" },
  ];

  return (
    <div className="hero-mockup-container">
      {/* Background card container with photo of human in office */}
      <div
        style={{
          width: "100%",
          height: "540px",
          border: "1px solid var(--line-strong)",
          borderRadius: "28px",
          boxShadow: "0 20px 40px rgba(14,14,16,0.03), 0 1px 3px rgba(14,14,16,0.01)",
          position: "relative",
          overflow: "hidden",
          display: "flex",
          alignItems: "center",
          justifyContent: "center",
          padding: "24px",
        }}
      >
        {/* Background Image Layer (dedicated photo) */}
        <div
          style={{
            position: "absolute",
            inset: 0,
            backgroundImage: "url('/images/esignature_bg.png')",
            backgroundSize: "cover",
            backgroundPosition: "center",
            zIndex: 0,
            pointerEvents: "none",
          }}
        />
        {/* Subtle white wash overlay to ensure readability */}
        <div
          style={{
            position: "absolute",
            inset: 0,
            background: "rgba(255, 255, 255, 0.12)",
            zIndex: 1,
            pointerEvents: "none",
          }}
        />

        {/* Card wrapper */}
        <div style={{ position: "relative", zIndex: 2, width: "100%", maxWidth: "340px" }}>
          {/* Email ping, slides in at tick 1, fades at tick 2 */}
          <div style={{
            position: "absolute",
            top: -18, right: -8,
            transform: show(1) && hide(3) ? "translateY(0) scale(1)" : "translateY(-10px) scale(0.93)",
            opacity: show(1) && hide(3) ? 1 : 0,
            transition: "all 380ms cubic-bezier(.2,.8,.2,1)",
            background: "var(--bg-elevated)",
            border: "1px solid var(--line)",
            borderRadius: 10,
            boxShadow: "0 12px 28px -10px rgba(14,14,16,0.18)",
            padding: "8px 12px",
            display: "flex", alignItems: "center", gap: 8,
            fontSize: 11.5, zIndex: 4, whiteSpace: "nowrap",
          }}>
        <span style={{
          width: 20, height: 20, borderRadius: 6,
          background: "var(--accent-soft)", color: "var(--accent)",
          display: "grid", placeItems: "center",
        }}>
          <svg width="11" height="11" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2">
            <path d="M4 4h16c1.1 0 2 .9 2 2v12c0 1.1-.9 2-2 2H4c-1.1 0-2-.9-2-2V6c0-1.1.9-2 2-2z"/>
            <polyline points="22,6 12,13 2,6"/>
          </svg>
        </span>
        <span style={{ color: "var(--ink-2)" }}>Signature request, <strong style={{ color: "var(--ink-1)" }}>MSA · Velora</strong></span>
      </div>

      {/* Main panel */}
      <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)",
      }}>

        {/* Panel header */}
        <div style={{ display: "flex", justifyContent: "space-between", alignItems: "center", marginBottom: 14 }}>
          <span style={{ fontSize: 11, fontWeight: 500, letterSpacing: "0.14em", textTransform: "uppercase", color: "var(--ink-4)" }}>
            eSignature · MSA · Velora Industries
          </span>
          <span style={{
            fontSize: 10.5, fontFamily: "var(--font-mono)", padding: "2px 8px",
            borderRadius: 99, background: "var(--bg-soft)", color: "var(--ink-4)",
          }}>
            {tick < 5 ? "IN PROGRESS" : "COMPLETED"}
          </span>
        </div>

        {/* Document preview strip */}
        <div style={{
          background: "var(--bg-soft)",
          borderRadius: 8,
          padding: "10px 12px",
          marginBottom: 14,
          display: "flex", alignItems: "center", gap: 10,
        }}>
          <span style={{ color: "var(--accent)", opacity: 0.8 }}>
            <svg width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="1.8">
              <path d="M14 2H6a2 2 0 0 0-2 2v16a2 2 0 0 0 2 2h12a2 2 0 0 0 2-2V8z"/>
              <polyline points="14 2 14 8 20 8"/>
              <line x1="16" y1="13" x2="8" y2="13"/>
              <line x1="16" y1="17" x2="8" y2="17"/>
            </svg>
          </span>
          <div style={{ flex: 1, minWidth: 0 }}>
            <div style={{ fontSize: 12, fontWeight: 500, color: "var(--ink-1)", marginBottom: 2 }}>
              MSA_Velora_v4-final.pdf
            </div>
            <div style={{ fontSize: 10.5, color: "var(--ink-4)", fontFamily: "var(--font-mono)" }}>
              18 pages · locked for signing
            </div>
          </div>
          {/* Lock icon, green when signed */}
          <span style={{
            color: tick >= 5 ? "var(--success)" : "var(--ink-4)",
            transition: "color 400ms ease",
          }}>
            <svg width="13" height="13" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2">
              <rect x="3" y="11" width="18" height="11" rx="2"/>
              <path d="M7 11V7a5 5 0 0 1 10 0v4"/>
            </svg>
          </span>
        </div>

        {/* Signers list */}
        {signers.map((s, i) => (
          <div key={i} style={{
            display: "flex", alignItems: "center", gap: 10,
            padding: "8px 0",
            borderBottom: i < signers.length - 1 ? "1px solid var(--line)" : "none",
          }}>
            {/* Avatar / status indicator */}
            <span style={{
              width: 24, height: 24, borderRadius: "50%",
              flexShrink: 0,
              background: s.state === "signed"
                ? "#10B981"
                : s.state === "active"
                  ? "var(--accent)"
                  : "var(--bg-soft)",
              display: "grid", placeItems: "center",
              color: s.state === "waiting" ? "var(--ink-4)" : "white",
              fontSize: 11,
              transition: "background 500ms ease",
              boxShadow: s.state === "active" ? "0 0 0 3px rgba(110,86,207,0.18)" : "none",
            }}>
              {s.state === "signed"
                ? <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>
                : s.state === "active"
                  ? <svg width="11" height="11" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2.5"><path d="M3 17.25V21h3.75L17.81 9.94l-3.75-3.75L3 17.25z"/></svg>
                  : <span style={{ fontSize: 9, fontFamily: "var(--font-mono)" }}>{i + 1}</span>
              }
            </span>

            <div style={{ flex: 1, minWidth: 0 }}>
              <div style={{ fontSize: 12.5, color: "var(--ink-1)", fontWeight: s.state === "active" ? 500 : 400 }}>
                {s.name}
              </div>
              <div style={{ fontSize: 11, color: "var(--ink-4)" }}>{s.role}</div>
            </div>

            <span style={{
              fontSize: 10.5,
              fontFamily: "var(--font-mono)",
              color: s.state === "signed" ? "var(--success)" : s.state === "active" ? "var(--accent)" : "var(--ink-5)",
              transition: "color 400ms ease",
              letterSpacing: "0.04em",
            }}>
              {s.state === "signed" ? "SIGNED" : s.state === "active" ? "SIGNING…" : "PENDING"}
            </span>
          </div>
        ))}

        {/* Signature stroke, appears at tick 3 */}
        <div style={{
          marginTop: 14,
          padding: "10px 12px",
          background: tick >= 3 ? "rgba(110,86,207,0.05)" : "var(--bg-soft)",
          borderRadius: 8,
          border: "1px solid " + (tick >= 3 ? "rgba(110,86,207,0.18)" : "var(--line)"),
          transition: "all 500ms ease",
          overflow: "hidden",
          height: 44,
          display: "flex", alignItems: "center", gap: 10,
        }}>
          {tick >= 3 && (
            <svg width="120" height="24" viewBox="0 0 120 24" fill="none" style={{ overflow: "visible" }}>
              <path
                d="M4 18 C10 8, 16 4, 22 12 C28 20, 30 4, 38 14 C44 22, 50 10, 58 16 C66 22, 70 8, 78 12 C86 16, 88 10, 96 14"
                stroke="var(--ink-2)"
                strokeWidth="1.8"
                strokeLinecap="round"
                fill="none"
                style={{
                  strokeDasharray: 160,
                  strokeDashoffset: tick >= 3 ? 0 : 160,
                  transition: "stroke-dashoffset 900ms cubic-bezier(.4,0,.2,1)",
                }}
              />
            </svg>
          )}
          {tick < 3 && (
            <span style={{ fontSize: 11.5, color: "var(--ink-4)", fontStyle: "italic" }}>
              Signature field · Linnea Andersson
            </span>
          )}
        </div>

        {/* eIDAS certificate badge, appears at tick 4 */}
        <div style={{
          marginTop: 12,
          display: "flex", alignItems: "center", gap: 8,
          opacity: show(4) ? 1 : 0,
          transform: show(4) ? "translateY(0)" : "translateY(6px)",
          transition: "all 400ms cubic-bezier(.2,.8,.2,1)",
        }}>
          <span style={{
            width: 18, height: 18, borderRadius: "50%",
            background: "rgba(31,138,76,0.10)",
            display: "grid", placeItems: "center",
            color: "var(--success)",
          }}>
            <svg width="10" height="10" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="3">
              <polyline points="20 6 9 17 4 12"/>
            </svg>
          </span>
          <span style={{ fontSize: 11, color: "var(--ink-3)", fontFamily: "var(--font-mono)" }}>
            eIDAS AES · Identity verified · Tamper-evident seal applied
          </span>
        </div>
      </div>

      {/* Sealed confirmation chip, floats up at tick 6 */}
      <div style={{
        position: "absolute",
        bottom: -16, left: "50%",
        transform: show(6) ? "translateX(-50%) translateY(0) scale(1)" : "translateX(-50%) translateY(8px) scale(0.94)",
        opacity: show(6) ? 1 : 0,
        transition: "all 400ms cubic-bezier(.2,.8,.2,1)",
        background: "var(--success)",
        color: "white",
        borderRadius: 999,
        padding: "5px 14px",
        fontSize: 11.5, fontWeight: 500,
        display: "flex", alignItems: "center", gap: 6,
        whiteSpace: "nowrap",
        boxShadow: "0 4px 12px -2px rgba(31,138,76,0.35)",
        zIndex: 4,
      }}>
        <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>
        Signed, sealed &amp; filed to repository
      </div>
        </div>
      </div>
    </div>
  );
}

Object.assign(window, { SignatureAnimation });