// Animated intake mockup, narrates the value to Legal:
// 1) request lands  →  2) AI auto-fills fields  →  3) smart routing  →  4) "saved for legal" chip

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

  // Phase map (0..6, then loops):
  // 0  panel mounts, header only
  // 1  Slack-like ping appears top-right, "from sales"
  // 2  fields stream in (counterparty)
  // 3  type + value
  // 4  region + AI badge
  // 5  routing decision lights up
  // 6  "saved for legal" chip slides in
  const show = (n) => tick >= n;

  const fields = [
    { k: "Counterparty", v: "Velora Industries", at: 2 },
    { k: "Type", v: "Customer MSA", at: 3 },
    { k: "Value", v: "€ 240,000", at: 3, mono: true },
    { k: "Region", v: "EU", at: 4 },
  ];

  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 */}
        <div
          style={{
            position: "absolute",
            inset: 0,
            backgroundImage: "url('/images/process_friction_bg.png')",
            backgroundSize: "145%",
            backgroundPosition: "52% 35%",
            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" }}>
          <MockPanel title="New request · MSA" sub={
            <span style={{ display: "inline-flex", alignItems: "center", gap: 6 }}>
              <span
                style={{
                  width: 6, height: 6, borderRadius: "50%",
                  background: show(4) ? "#4DBA6E" : "var(--ink-5)",
                  transition: "background 300ms",
                  boxShadow: show(4) ? "0 0 0 4px rgba(77,186,110,0.18)" : "none",
                }}
              />
              {show(4) ? "auto-routed" : show(1) ? "analyzing…" : "idle"}
            </span>
          }>
            {/* AI scanning bar */}
            <div
              style={{
                height: 2, borderRadius: 2, background: "var(--bg-soft)",
                overflow: "hidden", marginBottom: 12,
              }}
            >
              <div
                style={{
                  height: "100%",
                  width: show(4) ? "100%" : show(1) ? "60%" : "0%",
                  background: "linear-gradient(90deg, transparent, #7B61FF, transparent)",
                  transition: "width 600ms ease",
                  animation: show(1) && !show(4) ? "intakeShimmer 1.2s linear infinite" : "none",
                }}
              />
            </div>

            <div style={{ display: "flex", flexDirection: "column", fontSize: 12.5 }}>
              {fields.map((f) => {
                const visible = show(f.at);
                return (
                  <div
                    key={f.k}
                    style={{
                      display: "flex",
                      justifyContent: "space-between",
                      alignItems: "center",
                      padding: "8px 0",
                      borderBottom: "1px solid var(--line)",
                      opacity: visible ? 1 : 0.35,
                      transition: "opacity 300ms",
                    }}
                  >
                    <span style={{ color: "var(--ink-4)" }}>{f.k}</span>
                    <span
                      style={{
                        color: "var(--ink-1)",
                        fontFamily: f.mono ? "var(--font-mono)" : "inherit",
                        display: "inline-flex", alignItems: "center", gap: 6,
                        transform: visible ? "translateX(0)" : "translateX(8px)",
                        transition: "transform 360ms cubic-bezier(.2,.8,.2,1)",
                      }}
                    >
                      {visible ? f.v : <span style={{ width: 64, height: 8, background: "var(--bg-soft)", borderRadius: 4, display: "inline-block" }} />}
                      {visible && (
                        <span
                          style={{
                            fontSize: 9, fontWeight: 600, letterSpacing: "0.06em",
                            color: "#7B61FF", background: "rgba(110,86,207,0.10)",
                            padding: "2px 5px", borderRadius: 4, textTransform: "uppercase",
                          }}
                        >AI</span>
                      )}
                    </span>
                  </div>
                );
              })}
            </div>

            {/* Routing decision */}
            <div
              style={{
                marginTop: 14,
                padding: "10px 12px",
                borderRadius: 10,
                background: show(5) ? "rgba(110,86,207,0.10)" : "var(--bg-soft)",
                border: show(5) ? "1px solid rgba(110,86,207,0.35)" : "1px solid var(--line)",
                fontSize: 12,
                color: show(5) ? "var(--accent-deep)" : "var(--ink-4)",
                display: "flex", alignItems: "center", gap: 8,
                transition: "all 360ms",
              }}
            >
              <span
                style={{
                  width: 16, height: 16, borderRadius: "50%",
                  background: show(5) ? "#7B61FF" : "var(--ink-5)",
                  display: "inline-flex", alignItems: "center", justifyContent: "center",
                  color: "#fff", fontSize: 11,
                  transition: "background 300ms",
                }}
              >→</span>
              <span style={{ flex: 1 }}>
                {show(5) ? (
                  <>Routed to <strong style={{ fontWeight: 500, color: "var(--ink-1)" }}>Sarah K.</strong></>
                ) : show(2) ? "Choosing reviewer…" : "Awaiting input"}
              </span>
              {show(5) && (
                <span
                  style={{
                    fontSize: 10, fontWeight: 600, letterSpacing: "0.06em",
                    color: "#0F7B3F", background: "rgba(15,123,63,0.10)",
                    padding: "3px 6px", borderRadius: 4, textTransform: "uppercase",
                  }}
                >Match</span>
              )}
            </div>
          </MockPanel>
        </div>
      </div>

      {/* "Saved for legal" floating chip */}
      <div
        style={{
          position: "absolute",
          bottom: -18,
          left: "50%",
          transform: show(6)
            ? "translate(-50%, 0)"
            : "translate(-50%, 12px)",
          opacity: show(6) ? 1 : 0,
          transition: "all 480ms cubic-bezier(.2,.8,.2,1)",
          background: "#0E0E10",
          color: "#fff",
          borderRadius: 999,
          padding: "10px 16px",
          fontSize: 12.5,
          fontWeight: 500,
          display: "flex",
          alignItems: "center",
          gap: 10,
          boxShadow: "0 18px 40px -16px rgba(14,14,16,0.45)",
          zIndex: 4,
          whiteSpace: "nowrap",
        }}
      >
        <span style={{ fontSize: 14 }}>⚡</span>
        Saved <strong style={{ fontWeight: 600, color: "#C7BFFF" }}>2h 14m</strong> for legal
        <span style={{ width: 1, height: 14, background: "rgba(255,255,255,0.18)" }} />
        <span style={{ color: "#9D96B5" }}>0 emails</span>
      </div>

      <style>{`
        @keyframes intakeShimmer {
          0%   { transform: translateX(-100%); }
          100% { transform: translateX(100%); }
        }
      `}</style>
    </div>
  );
}

window.IntakeAnimation = IntakeAnimation;