// Hero visual — stylized automation workflow mockup.
// Three variants selectable via prop. All use accent color via CSS var.

function HeroVisual({ variant = "workflow" }) {
  if (variant === "workflow") return <WorkflowMockup />;
  if (variant === "metrics") return <MetricsMockup />;
  return <GeometricMockup />;
}

/* ---------- VARIANT 1: stylized n8n-like workflow ---------- */
function WorkflowMockup() {
  const nodeStyle = {
    position: "absolute",
    background: "var(--bg-card)",
    border: "1px solid var(--border-strong)",
    borderRadius: 14,
    padding: "12px 14px",
    fontSize: 12.5,
    fontWeight: 500,
    letterSpacing: "-0.01em",
    boxShadow: "0 6px 24px -8px rgba(0,0,0,0.4)",
    backdropFilter: "blur(12px)",
    display: "flex",
    alignItems: "center",
    gap: 10,
    minWidth: 168,
  };
  const dot = (color) => ({
    width: 8, height: 8, borderRadius: "50%",
    background: color, boxShadow: `0 0 10px ${color}`,
  });

  return (
    <div style={{
      position: "relative",
      width: "100%",
      aspectRatio: "1.05/1",
      maxWidth: 560,
      margin: "0 auto",
    }}>
      {/* Radial bg glow */}
      <div style={{
        position: "absolute", inset: "-10%",
        background: "radial-gradient(circle at 60% 40%, var(--accent-soft), transparent 55%)",
        filter: "blur(40px)",
        pointerEvents: "none",
      }}/>

      {/* SVG connectors */}
      <svg viewBox="0 0 100 100" preserveAspectRatio="none" style={{
        position: "absolute", inset: 0, width: "100%", height: "100%",
        zIndex: 1, overflow: "visible",
      }}>
        <defs>
          <linearGradient id="line-grad" x1="0" y1="0" x2="1" y2="0">
            <stop offset="0%" stopColor="var(--accent)" stopOpacity="0.2" />
            <stop offset="50%" stopColor="var(--accent)" stopOpacity="0.8" />
            <stop offset="100%" stopColor="var(--accent)" stopOpacity="0.2" />
          </linearGradient>
        </defs>
        {/* Trigger -> AI */}
        <path d="M 22 22 C 35 22, 35 50, 50 50" stroke="var(--border-strong)" strokeWidth="0.4" fill="none" />
        <path d="M 22 22 C 35 22, 35 50, 50 50" stroke="url(#line-grad)" strokeWidth="0.5" fill="none"
              strokeDasharray="2 2" style={{ animation: "dash 4s linear infinite" }}/>
        {/* AI -> Email */}
        <path d="M 50 50 C 65 50, 65 22, 78 22" stroke="var(--border-strong)" strokeWidth="0.4" fill="none" />
        <path d="M 50 50 C 65 50, 65 22, 78 22" stroke="url(#line-grad)" strokeWidth="0.5" fill="none"
              strokeDasharray="2 2" style={{ animation: "dash 4s linear infinite 0.5s" }}/>
        {/* AI -> CRM */}
        <path d="M 50 50 C 65 50, 65 80, 78 80" stroke="var(--border-strong)" strokeWidth="0.4" fill="none" />
        <path d="M 50 50 C 65 50, 65 80, 78 80" stroke="url(#line-grad)" strokeWidth="0.5" fill="none"
              strokeDasharray="2 2" style={{ animation: "dash 4s linear infinite 1s" }}/>
        {/* Trigger2 -> AI */}
        <path d="M 22 78 C 35 78, 35 50, 50 50" stroke="var(--border-strong)" strokeWidth="0.4" fill="none" />
        <path d="M 22 78 C 35 78, 35 50, 50 50" stroke="url(#line-grad)" strokeWidth="0.5" fill="none"
              strokeDasharray="2 2" style={{ animation: "dash 4s linear infinite 1.5s" }}/>
      </svg>

      <style>{`
        @keyframes dash { to { stroke-dashoffset: -20; } }
        @keyframes pulse-soft { 0%,100% { opacity: 1; } 50% { opacity: 0.6; } }
      `}</style>

      {/* Nodes */}
      <div style={{ ...nodeStyle, top: "12%", left: "0%", zIndex: 2 }}>
        <span style={dot("#4D8DFF")}/>
        <div>
          <div style={{ fontSize: 10, color: "var(--text-dim)", fontFamily: '"JetBrains Mono", monospace', letterSpacing: "0.05em", textTransform: "uppercase" }}>Trigger</div>
          <div>Nouveau lead</div>
        </div>
      </div>

      <div style={{ ...nodeStyle, top: "70%", left: "0%", zIndex: 2 }}>
        <span style={dot("#4D8DFF")}/>
        <div>
          <div style={{ fontSize: 10, color: "var(--text-dim)", fontFamily: '"JetBrains Mono", monospace', letterSpacing: "0.05em", textTransform: "uppercase" }}>Trigger</div>
          <div>Email entrant</div>
        </div>
      </div>

      {/* Center AI node — featured */}
      <div style={{
        ...nodeStyle,
        top: "42%", left: "38%",
        background: "linear-gradient(135deg, var(--accent-soft), transparent)",
        borderColor: "var(--accent)",
        boxShadow: "0 8px 32px -8px var(--accent-glow)",
        zIndex: 3,
      }}>
        <span style={{ ...dot("var(--accent)"), animation: "pulse-soft 2s ease-in-out infinite" }}/>
        <div>
          <div style={{ fontSize: 10, color: "var(--accent)", fontFamily: '"JetBrains Mono", monospace', letterSpacing: "0.05em", textTransform: "uppercase" }}>Agent IA</div>
          <div>Qualification</div>
        </div>
      </div>

      <div style={{ ...nodeStyle, top: "12%", right: "0%", zIndex: 2 }}>
        <span style={dot("#3DDC97")}/>
        <div>
          <div style={{ fontSize: 10, color: "var(--text-dim)", fontFamily: '"JetBrains Mono", monospace', letterSpacing: "0.05em", textTransform: "uppercase" }}>Action</div>
          <div>Envoi email</div>
        </div>
      </div>

      <div style={{ ...nodeStyle, top: "70%", right: "0%", zIndex: 2 }}>
        <span style={dot("#3DDC97")}/>
        <div>
          <div style={{ fontSize: 10, color: "var(--text-dim)", fontFamily: '"JetBrains Mono", monospace', letterSpacing: "0.05em", textTransform: "uppercase" }}>Action</div>
          <div>MAJ CRM</div>
        </div>
      </div>

      {/* Bottom status pill */}
      <div style={{
        position: "absolute", bottom: "-2%", left: "50%", transform: "translateX(-50%)",
        background: "var(--bg-card)", border: "1px solid var(--border)",
        borderRadius: 999, padding: "8px 14px",
        fontSize: 11.5, fontFamily: '"JetBrains Mono", monospace',
        color: "var(--text-muted)",
        display: "flex", alignItems: "center", gap: 8,
        zIndex: 4,
      }}>
        <span style={{ ...dot("#3DDC97"), animation: "pulse-soft 2s ease-in-out infinite" }}/>
        <span>workflow.run · 1 247 exécutions / mois</span>
      </div>
    </div>
  );
}

/* ---------- VARIANT 2: live metrics dashboard ---------- */
function MetricsMockup() {
  return (
    <div style={{
      position: "relative",
      width: "100%",
      maxWidth: 560,
      margin: "0 auto",
      aspectRatio: "1.05/1",
    }}>
      <div style={{
        position: "absolute", inset: "-10%",
        background: "radial-gradient(circle at 50% 30%, var(--accent-soft), transparent 55%)",
        filter: "blur(40px)",
      }}/>
      <div style={{
        position: "relative",
        background: "var(--bg-card)",
        border: "1px solid var(--border)",
        borderRadius: 18,
        padding: 22,
        boxShadow: "0 24px 64px -24px rgba(0,0,0,0.5)",
        backdropFilter: "blur(12px)",
      }}>
        {/* Header */}
        <div style={{ display: "flex", alignItems: "center", justifyContent: "space-between", marginBottom: 18 }}>
          <div>
            <div style={{ fontSize: 11, color: "var(--text-dim)", fontFamily: '"JetBrains Mono", monospace', textTransform: "uppercase", letterSpacing: "0.08em" }}>Activité 30j</div>
            <div style={{ fontSize: 22, fontWeight: 600, letterSpacing: "-0.02em", marginTop: 2 }}>2 184 tâches automatisées</div>
          </div>
          <div style={{ display: "flex", gap: 4 }}>
            {[0,1,2].map(i => <span key={i} style={{ width: 8, height: 8, borderRadius: "50%", background: i===0 ? "#FF5F57" : i===1 ? "#FEBC2E" : "#28C840", opacity: 0.6 }}/>)}
          </div>
        </div>

        {/* Big number */}
        <div style={{
          display: "flex", alignItems: "baseline", gap: 10, marginBottom: 22,
        }}>
          <div style={{ fontSize: 44, fontWeight: 600, letterSpacing: "-0.04em", lineHeight: 1 }}>+312<span style={{ fontSize: 22 }}>%</span></div>
          <div style={{ color: "var(--accent)", fontSize: 13, fontFamily: '"JetBrains Mono", monospace' }}>↗ vs. T-1</div>
        </div>

        {/* Bar chart */}
        <div style={{ display: "flex", alignItems: "flex-end", gap: 6, height: 110, marginBottom: 18 }}>
          {[28, 42, 38, 56, 48, 64, 58, 72, 68, 82, 76, 92].map((h, i) => (
            <div key={i} style={{
              flex: 1,
              height: `${h}%`,
              background: i >= 8 ? "var(--accent)" : "var(--border-strong)",
              borderRadius: "3px 3px 0 0",
              opacity: i >= 8 ? 1 : 0.7,
            }}/>
          ))}
        </div>

        {/* Stats grid */}
        <div style={{ display: "grid", gridTemplateColumns: "1fr 1fr 1fr", gap: 12, paddingTop: 16, borderTop: "1px solid var(--border)" }}>
          {[
            { label: "Heures gagnées", value: "184h" },
            { label: "Tâches/jour", value: "73" },
            { label: "Erreurs", value: "0,2%" },
          ].map(s => (
            <div key={s.label}>
              <div style={{ fontSize: 18, fontWeight: 600, letterSpacing: "-0.02em" }}>{s.value}</div>
              <div style={{ fontSize: 11, color: "var(--text-dim)", fontFamily: '"JetBrains Mono", monospace', textTransform: "uppercase", letterSpacing: "0.06em", marginTop: 2 }}>{s.label}</div>
            </div>
          ))}
        </div>
      </div>
    </div>
  );
}

/* ---------- VARIANT 3: geometric / abstract ---------- */
function GeometricMockup() {
  return (
    <div style={{
      position: "relative",
      width: "100%",
      maxWidth: 560,
      margin: "0 auto",
      aspectRatio: "1/1",
    }}>
      <div style={{
        position: "absolute", inset: "-10%",
        background: "radial-gradient(circle at 50% 50%, var(--accent-soft), transparent 60%)",
        filter: "blur(40px)",
      }}/>
      <svg viewBox="0 0 400 400" style={{ width: "100%", height: "100%", position: "relative", zIndex: 1 }}>
        <defs>
          <linearGradient id="geo-grad" x1="0" y1="0" x2="1" y2="1">
            <stop offset="0%" stopColor="var(--accent)" stopOpacity="0.6"/>
            <stop offset="100%" stopColor="var(--accent)" stopOpacity="0.05"/>
          </linearGradient>
        </defs>
        {/* Concentric arcs */}
        {[180, 140, 100, 60].map((r, i) => (
          <circle key={r} cx="200" cy="200" r={r}
            fill="none" stroke="var(--border-strong)" strokeWidth="0.8"
            strokeDasharray={i % 2 ? "2 4" : ""}/>
        ))}
        {/* Accent arc */}
        <circle cx="200" cy="200" r="180"
          fill="none" stroke="url(#geo-grad)" strokeWidth="2"
          strokeDasharray="240 1130" transform="rotate(-90 200 200)"/>
        {/* Grid */}
        {Array.from({ length: 9 }).map((_, i) => (
          <line key={`v${i}`} x1={i*50} y1="0" x2={i*50} y2="400"
            stroke="var(--border)" strokeWidth="0.5"/>
        ))}
        {Array.from({ length: 9 }).map((_, i) => (
          <line key={`h${i}`} x1="0" y1={i*50} x2="400" y2={i*50}
            stroke="var(--border)" strokeWidth="0.5"/>
        ))}
        {/* Floating dots */}
        {[
          [120, 120], [280, 130], [200, 200], [310, 270], [110, 290], [240, 320]
        ].map(([x,y], i) => (
          <g key={i}>
            <circle cx={x} cy={y} r="4" fill="var(--accent)"/>
            <circle cx={x} cy={y} r="12" fill="var(--accent)" opacity="0.15"/>
          </g>
        ))}
        {/* Connecting lines */}
        <path d="M120 120 L 200 200 L 280 130 M 200 200 L 310 270 M 200 200 L 110 290 M 200 200 L 240 320"
          stroke="var(--accent)" strokeWidth="1" opacity="0.4" fill="none"/>
      </svg>
      {/* Floating label */}
      <div style={{
        position: "absolute", top: "8%", right: "8%",
        background: "var(--bg-card)", border: "1px solid var(--border)",
        borderRadius: 10, padding: "8px 12px",
        fontFamily: '"JetBrains Mono", monospace', fontSize: 11,
        color: "var(--text-muted)",
      }}>
        node.lymorya / 12 actifs
      </div>
    </div>
  );
}

Object.assign(window, { HeroVisual, WorkflowMockup, MetricsMockup, GeometricMockup });