// Drafts Auto V1 — "Ce vede echipa noastră" access-boundary card.
const DraftsAutoV1 = () => {
  const [isMobile, setIsMobile] = React.useState(false);
  React.useEffect(() => {
    const mq = () => setIsMobile(window.innerWidth < 900);
    mq();
    window.addEventListener("resize", mq);
    return () => window.removeEventListener("resize", mq);
  }, []);

  return (
    <div className="ev-stage" style={{ width: "100%", height: "100%", padding: isMobile ? "56px 18px" : "96px 80px" }}>
      <div style={{
        display: "grid",
        gridTemplateColumns: isMobile ? "1fr" : "1fr 1fr",
        gap: isMobile ? 24 : 28,
        maxWidth: 1180, margin: "0 auto",
        alignItems: "stretch",
      }}>

        {/* CARD 1 — Drafturile intră singure */}
        <div className="ev-glass daf1-card" style={{
          padding: isMobile ? "28px 22px" : "40px 40px",
          borderRadius: 22,
          position: "relative",
        }}>
          <div style={{
            width: 48, height: 48, borderRadius: 14,
            display: "grid", placeItems: "center", marginBottom: 20,
            background: "linear-gradient(150deg, rgba(9,169,85,0.24), rgba(9,169,85,0.06))",
            border: "1px solid rgba(9,169,85,0.30)",
          }}>
            <svg width="20" height="20" viewBox="0 0 24 24" fill="none" stroke="var(--neon-purple-2)" strokeWidth="2" strokeLinecap="round" strokeLinejoin="round">
              <path d="M3 12a9 9 0 0 1 9-9 9.75 9.75 0 0 1 6.74 2.74L21 8" />
              <path d="M21 3v5h-5" />
              <path d="M21 12a9 9 0 0 1-9 9 9.75 9.75 0 0 1-6.74-2.74L3 16" />
              <path d="M8 16H3v5" />
            </svg>
          </div>

          <h2 style={{ fontSize: isMobile ? 24 : 28, fontWeight: 800, color: "#fff", letterSpacing: "-0.02em", margin: "0 0 10px" }}>
            Comenzile și Drafturile intră Singure
          </h2>
          <p style={{ fontSize: 14.5, color: "var(--fg-2)", lineHeight: 1.6, margin: "0 0 26px" }}>
            Odată ce magazinul tău este integrat cu platforma noastră, nu ne scapă nicio comandă.
          </p>

          <div style={{
            borderRadius: 14, border: "1px solid var(--glass-border)",
            background: "rgba(0,0,0,0.24)", padding: 18,
            display: "flex", alignItems: "center", gap: 16,
          }}>
            <div style={{ flex: 1, display: "flex", flexDirection: "column", gap: 7, minWidth: 0 }}>
              <span style={{ fontFamily: "ui-monospace, SFMono-Regular, Menlo, monospace", fontSize: 9, letterSpacing: "0.11em", textTransform: "uppercase", color: "var(--fg-3)" }}>Shopify</span>
              {[0, 1, 2].map(i => (
                <i key={i} style={{ height: 9, borderRadius: 3, background: "rgba(255,255,255,0.08)", display: "block" }} />
              ))}
            </div>

            <div style={{ position: "relative", width: 48, height: 26, flexShrink: 0, overflow: "hidden" }}>
              {[0, 1, 2].map(i => (
                <span key={i} style={{
                  position: "absolute", top: 11, left: 0,
                  width: 16, height: 3, borderRadius: 2,
                  background: "linear-gradient(90deg, transparent, var(--neon-purple-2))",
                  animation: `daf1-flow 2.8s cubic-bezier(.4,0,.6,1) ${i * 0.93}s infinite`,
                }} />
              ))}
            </div>

            <div style={{ flex: 1, display: "flex", flexDirection: "column", gap: 7, minWidth: 0 }}>
              <span style={{ fontFamily: "ui-monospace, SFMono-Regular, Menlo, monospace", fontSize: 9, letterSpacing: "0.11em", textTransform: "uppercase", color: "var(--neon-purple-2)" }}>Confirmări.ro</span>
              {[0, 1, 2].map(i => (
                <i key={i} style={{ height: 9, borderRadius: 3, background: "linear-gradient(90deg, rgba(9,169,85,0.5), rgba(9,169,85,0.16))", display: "block" }} />
              ))}
            </div>
          </div>
        </div>

        {/* CARD 2 — Ce vede echipa noastră */}
        <div className="daf1-card" style={{
          borderRadius: 22, overflow: "hidden",
          border: "1px solid var(--glass-border-2)",
          background: "linear-gradient(160deg, rgba(255,255,255,0.05), rgba(255,255,255,0.015))",
          display: "flex", flexDirection: "column",
        }}>
        {/* Live draft panel */}
        <div style={{
          padding: isMobile ? "24px 20px" : "30px 28px",
          background: "linear-gradient(rgba(9,169,85,0.05), transparent 60%)",
          flex: 1,
        }}>
          <div style={{ display: "flex", alignItems: "center", gap: 12, marginBottom: 16 }}>
            <span style={{ display: "inline-flex", alignItems: "center", gap: 8, fontSize: 13, fontWeight: 700, color: "#fff" }}>
              <window.Icon name="phone-call" size={14} color="var(--neon-purple-2)" strokeWidth={2.2} />
              Ce vede echipa noastră
            </span>
          </div>

          <div style={{ borderRadius: 14, border: "1px solid rgba(250,204,21,0.35)", boxShadow: "0 0 0 3px rgba(250,204,21,0.06)", background: "rgba(255,255,255,0.03)", overflow: "hidden" }}>
            <div style={{ display: "flex", alignItems: "center", justifyContent: "space-between", gap: 10, padding: "11px 14px", borderBottom: "1px solid var(--glass-border)" }}>
              <span style={{ fontFamily: "ui-monospace, SFMono-Regular, Menlo, monospace", fontSize: 11, color: "var(--fg-3)" }}>Draft <b style={{ color: "var(--fg-2)", fontWeight: 500 }}>#9127</b></span>
              <span style={{
                display: "inline-flex", alignItems: "center", gap: 6,
                fontFamily: "ui-monospace, SFMono-Regular, Menlo, monospace", fontSize: 9.5, letterSpacing: "0.08em", textTransform: "uppercase",
                padding: "4px 9px", borderRadius: 6,
                background: "rgba(250,204,21,0.13)", color: "var(--neon-yellow)",
              }}>
                <i aria-hidden="true" style={{ width: 5, height: 5, borderRadius: "50%", background: "currentColor", display: "inline-block", animation: "daf1-pulse 1s ease-in-out infinite" }} />
                În apel
              </span>
            </div>
            <div style={{ padding: 14, display: "flex", flexDirection: "column", gap: 10 }}>
              <div style={{ display: "flex", justifyContent: "space-between", alignItems: "baseline", gap: 12, paddingBottom: 9, borderBottom: "1px dashed rgba(255,255,255,0.08)" }}>
                <span style={{ fontSize: 13.5, fontWeight: 500, color: "#fff" }}>Cristina D.</span>
                <em style={{ fontStyle: "normal", fontFamily: "ui-monospace, SFMono-Regular, Menlo, monospace", fontSize: 11.5, color: "var(--fg-3)", whiteSpace: "nowrap" }}>0733 ••• •••</em>
              </div>
              <div style={{ display: "flex", justifyContent: "space-between", alignItems: "baseline", gap: 12, paddingBottom: 9, borderBottom: "1px dashed rgba(255,255,255,0.08)" }}>
                <span style={{ fontSize: 13.5, fontWeight: 500, color: "#fff" }}>Str. Mihai Eminescu 8</span>
                <em style={{ fontStyle: "normal", fontFamily: "ui-monospace, SFMono-Regular, Menlo, monospace", fontSize: 11.5, color: "var(--fg-3)", whiteSpace: "nowrap" }}>Cluj-Napoca, Cluj</em>
              </div>
              <div style={{ fontSize: 12.5, color: "var(--fg-2)", padding: "9px 11px", borderRadius: 9, background: "rgba(255,255,255,0.03)" }}>
                Cască wireless · 1 buc
              </div>
              <div style={{ display: "flex", alignItems: "center", gap: 8, padding: "9px 11px", borderRadius: 9, background: "rgba(9,169,85,0.07)", border: "1px solid rgba(9,169,85,0.16)", fontSize: 11.5, color: "var(--fg-2)" }}>
                <svg width="12" height="12" viewBox="0 0 24 24" fill="none" stroke="var(--neon-purple-2)" strokeWidth="2" strokeLinecap="round" strokeLinejoin="round" style={{ flexShrink: 0 }}>
                  <path d="M3 12a9 9 0 1 0 9-9 9.75 9.75 0 0 0-6.74 2.74L3 8" /><path d="M3 3v5h5" /><path d="M12 7v5l4 2" />
                </svg>
                <span>Istoric client</span>
                <em style={{ marginLeft: "auto", fontStyle: "normal", fontFamily: "ui-monospace, SFMono-Regular, Menlo, monospace", fontSize: 10.5, color: "var(--neon-purple-2)", textAlign: "right" }}>3 comenzi livrate · 0 refuzuri</em>
              </div>
              <div style={{ display: "flex", justifyContent: "space-between", alignItems: "baseline" }}>
                <span style={{ fontFamily: "ui-monospace, SFMono-Regular, Menlo, monospace", fontSize: 10, letterSpacing: "0.1em", textTransform: "uppercase", color: "var(--fg-3)" }}>Total ramburs</span>
                <b style={{ fontSize: 19, fontWeight: 700, letterSpacing: "-0.03em", color: "#fff" }}>249 lei</b>
              </div>
            </div>
            <div style={{ display: "grid", gridTemplateColumns: "1.4fr 1fr", gap: 8, padding: "0 14px 14px" }}>
              <button type="button" tabIndex={-1} style={{ display: "inline-flex", alignItems: "center", justifyContent: "center", gap: 6, padding: 10, borderRadius: 10, fontSize: 12.5, fontWeight: 700, border: "1px solid var(--glass-border-2)", background: "rgba(255,255,255,0.04)", color: "var(--fg-2)", cursor: "default" }}>
                <window.Icon name="check" size={13} color="var(--fg-2)" strokeWidth={2.5} /> Confirmă
              </button>
              <button type="button" tabIndex={-1} style={{ display: "inline-flex", alignItems: "center", justifyContent: "center", gap: 6, padding: 10, borderRadius: 10, fontSize: 12.5, fontWeight: 700, border: "1px solid var(--glass-border-2)", background: "rgba(255,255,255,0.04)", color: "var(--fg-2)", cursor: "default" }}>
                ✕ Refuz
              </button>
            </div>
          </div>

          <p style={{ fontSize: 12.5, lineHeight: 1.6, color: "var(--fg-3)", margin: "14px 0 0" }}>
            Sună clientul, corectează adresa sau telefonul, confirmă ori marchează refuzul. Atât.
          </p>
        </div>
        </div>
      </div>

      {/* CARD 3 — Sync snapshot (centered below, forms an inverted pyramid with cards 1+2) */}
      <div className="daf1-win daf1-card" style={{
        maxWidth: 1180, margin: isMobile ? "24px auto 0" : "28px auto 0",
        borderRadius: 20, overflow: "hidden",
        border: "1px solid var(--glass-border-2)",
        background: "linear-gradient(168deg, rgba(255,255,255,0.05), rgba(255,255,255,0.015))",
      }}>
        <div style={{
          display: "flex", alignItems: "center", gap: 12,
          padding: "12px 15px", borderBottom: "1px solid var(--glass-border)",
          background: "rgba(255,255,255,0.02)",
        }}>
          <span style={{ display: "inline-flex", gap: 6 }}>
            <i style={{ width: 9, height: 9, borderRadius: "50%", background: "rgba(255,107,107,0.55)", display: "block" }} />
            <i style={{ width: 9, height: 9, borderRadius: "50%", background: "rgba(255,176,32,0.5)", display: "block" }} />
            <i style={{ width: 9, height: 9, borderRadius: "50%", background: "rgba(9,169,85,0.5)", display: "block" }} />
          </span>
          <span style={{ flex: 1, textAlign: "center", fontFamily: "ui-monospace, SFMono-Regular, Menlo, monospace", fontSize: 11, color: "var(--fg-3)", letterSpacing: "0.01em" }}>
            confirmari.ro/dashboard
          </span>
          <span style={{ display: "inline-flex", alignItems: "center", gap: 5, fontFamily: "ui-monospace, SFMono-Regular, Menlo, monospace", fontSize: 10, letterSpacing: "0.1em", textTransform: "uppercase", color: "var(--neon-purple-2)" }}>
            <i aria-hidden="true" style={{ width: 5, height: 5, borderRadius: "50%", background: "currentColor", display: "inline-block", animation: "daf1-pulse 1.8s ease-in-out infinite" }} />
            sync
          </span>
        </div>

        <div style={{ display: "grid", gridTemplateColumns: "1fr 1fr 1fr", gap: 9, padding: 15 }}>
          <div style={{ padding: "12px 13px", borderRadius: 12, background: "rgba(255,255,255,0.03)", border: "1px solid var(--glass-border)" }}>
            <b style={{ display: "block", fontSize: 25, fontWeight: 700, color: "#fff", letterSpacing: "-0.035em", lineHeight: 1 }}>43</b>
            <span style={{ display: "block", marginTop: 5, fontFamily: "ui-monospace, SFMono-Regular, Menlo, monospace", fontSize: 9.5, letterSpacing: "0.11em", textTransform: "uppercase", color: "var(--fg-3)" }}>Drafturi azi</span>
          </div>
          <div style={{ padding: "12px 13px", borderRadius: 12, background: "rgba(255,255,255,0.03)", border: "1px solid var(--glass-border)" }}>
            <b style={{ display: "block", fontSize: 25, fontWeight: 700, color: "#fff", letterSpacing: "-0.035em", lineHeight: 1 }}>61</b>
            <span style={{ display: "block", marginTop: 5, fontFamily: "ui-monospace, SFMono-Regular, Menlo, monospace", fontSize: 9.5, letterSpacing: "0.11em", textTransform: "uppercase", color: "var(--fg-3)" }}>Comenzi Confirmate</span>
          </div>
          <div style={{ padding: "12px 13px", borderRadius: 12, background: "rgba(255,255,255,0.03)", border: "1px solid var(--glass-border)" }}>
            <b style={{ display: "block", fontSize: 25, fontWeight: 700, color: "var(--neon-purple-2)", letterSpacing: "-0.035em", lineHeight: 1 }}>85<em style={{ fontStyle: "normal", fontSize: 15, opacity: 0.55 }}>%</em></b>
            <span style={{ display: "block", marginTop: 5, fontFamily: "ui-monospace, SFMono-Regular, Menlo, monospace", fontSize: 9.5, letterSpacing: "0.11em", textTransform: "uppercase", color: "var(--fg-3)" }}>Rată confirmare</span>
          </div>
        </div>

        <div style={{ margin: "0 15px 15px", borderRadius: 12, border: "1px solid var(--glass-border)", overflow: "hidden", background: "rgba(255,255,255,0.02)" }}>
          <div style={{ display: "flex", justifyContent: "space-between", alignItems: "center", padding: "10px 13px", borderBottom: "1px solid var(--glass-border)", fontFamily: "ui-monospace, SFMono-Regular, Menlo, monospace", fontSize: 9.5, letterSpacing: "0.11em", textTransform: "uppercase", color: "var(--fg-3)" }}>
            Comenzi de procesat<span>Azi</span>
          </div>
          {[
            { av: "B", name: "Bogdan T.", item: "Aparat masaj cervical", chip: "Confirmat", tone: "ok" },
            { av: "R", name: "Raluca S.", item: "Sigilator pungi 2 în 1", chip: "De sunat", tone: "wait" },
            { av: "V", name: "Vlad P.", item: "Set 4 lămpi solare", chip: "Refuzat", tone: "bad" },
            { av: "D", name: "Diana M.", item: "Perie facială electrică", chip: "Confirmat", tone: "ok" },
          ].map((r, i, arr) => (
            <div key={i} style={{ display: "flex", alignItems: "center", gap: 10, padding: "10px 13px", borderBottom: i === arr.length - 1 ? "none" : "1px solid rgba(255,255,255,0.043)" }}>
              <span style={{ width: 26, height: 26, borderRadius: 8, flexShrink: 0, display: "grid", placeItems: "center", background: "rgba(9,169,85,0.16)", color: "var(--neon-purple-2)", fontSize: 11, fontWeight: 700 }}>{r.av}</span>
              <span style={{ flex: 1, minWidth: 0 }}>
                <b style={{ display: "block", fontSize: 12.5, fontWeight: 600, color: "rgba(255,255,255,0.9)" }}>{r.name}</b>
                <em style={{ display: "block", fontStyle: "normal", fontSize: 10.5, color: "var(--fg-3)", whiteSpace: "nowrap", overflow: "hidden", textOverflow: "ellipsis" }}>{r.item}</em>
              </span>
              <span style={{
                flexShrink: 0, fontFamily: "ui-monospace, SFMono-Regular, Menlo, monospace", fontSize: 9.5, letterSpacing: "0.05em",
                padding: "4px 8px", borderRadius: 6, whiteSpace: "nowrap",
                background: r.tone === "ok" ? "rgba(9,169,85,0.14)" : r.tone === "wait" ? "rgba(255,176,32,0.13)" : "rgba(255,107,107,0.14)",
                color: r.tone === "ok" ? "var(--neon-purple-2)" : r.tone === "wait" ? "#FFB020" : "#FF6B6B",
              }}>{r.chip}</span>
            </div>
          ))}
        </div>
      </div>

      <style>{`
        @keyframes daf1-flow {
          0%   { transform: translateX(0); opacity: 0; }
          18%  { opacity: 1; }
          82%  { opacity: 1; }
          100% { transform: translateX(48px); opacity: 0; }
        }
        @keyframes daf1-pulse {
          0%, 100% { opacity: 1; transform: scale(1); }
          50% { opacity: 0.5; transform: scale(0.8); }
        }
        .daf1-card {
          cursor: pointer;
          transition: transform .35s cubic-bezier(.2,.7,.2,1), box-shadow .35s cubic-bezier(.2,.7,.2,1), border-color .3s ease;
        }
        .daf1-card:hover {
          transform: translateY(-6px);
          box-shadow: 0 30px 60px rgba(0,0,0,0.45), 0 0 40px rgba(9,169,85,0.18);
          border-color: rgba(9,169,85,0.35);
        }
      `}</style>
    </div>
  );
};

window.DraftsAutoV1 = DraftsAutoV1;