const Pulse = () => {
  const points = [22, 28, 25, 38, 31, 44, 52, 48, 61, 58, 70, 64, 72];
  const max = Math.max(...points);
  const w = 360, h = 70;
  const path = points.map((p, i) => {
    const x = (i / (points.length - 1)) * w;
    const y = h - (p / max) * h;
    return (i === 0 ? "M" : "L") + x.toFixed(1) + "," + y.toFixed(1);
  }).join(" ");

  return (
    <section id="pulse" className="compact">
      <div className="wrap">
        <div style={{
          background: "var(--text)", color: "white", borderRadius: 18,
          padding: "48px 52px",
          display: "grid", gridTemplateColumns: "1.2fr 1fr", gap: 56,
          alignItems: "center", position: "relative", overflow: "hidden",
        }} className="pulse-card">
          <div style={{
            position: "absolute", inset: 0,
            backgroundImage: "linear-gradient(rgba(255,255,255,0.04) 1px, transparent 1px), linear-gradient(90deg, rgba(255,255,255,0.04) 1px, transparent 1px)",
            backgroundSize: "32px 32px", pointerEvents: "none",
          }} />
          <div style={{ position: "relative" }}>
            <div className="eyebrow" style={{ color: "rgba(255,255,255,0.55)", marginBottom: 18 }}>
              <span className="dot" style={{ background: "var(--amber)" }}></span>
              Cited Pulse · live
            </div>
            <h2 className="display" style={{ fontSize: 48, margin: "0 0 18px", letterSpacing: "-0.02em", maxWidth: "18ch", fontVariationSettings: '"opsz" 96' }}>
              AI answers move. Your category moves with them.
            </h2>
            <p style={{ color: "rgba(255,255,255,0.7)", fontSize: 16.5, lineHeight: 1.55, maxWidth: "46ch", margin: "0 0 24px" }}>
              Cited Pulse shows when AI shopping recommendations shift in your category, so you know when yesterday's citation gaps may no longer match today's answers.
            </p>
            <a href="#" className="btn" style={{ background: "white", color: "var(--text)" }}>
              See category movement <span className="arrow">→</span>
            </a>
          </div>
          <div style={{
            background: "rgba(255,255,255,0.04)", border: "1px solid rgba(255,255,255,0.08)",
            borderRadius: 12, padding: "20px 22px", position: "relative",
          }}>
            <div style={{ display: "flex", justifyContent: "space-between", alignItems: "baseline", marginBottom: 10 }}>
              <span className="mono" style={{ fontSize: 11, textTransform: "uppercase", letterSpacing: ".1em", color: "rgba(255,255,255,0.55)" }}>
                Volatility · 7d
              </span>
              <span className="mono" style={{ fontSize: 11, color: "var(--amber)" }}>● HIGH · +28%</span>
            </div>
            <div className="display" style={{ fontSize: 56, color: "white", lineHeight: 1, fontVariationSettings: '"opsz" 144' }}>
              72<span style={{ fontSize: 22, color: "rgba(255,255,255,0.5)" }}>/100</span>
            </div>
            <svg viewBox={"0 0 " + w + " " + h} style={{ width: "100%", height: 70, marginTop: 12 }} preserveAspectRatio="none">
              <defs>
                <linearGradient id="pulseGrad" x1="0" y1="0" x2="0" y2="1">
                  <stop offset="0%" stopColor="var(--amber)" stopOpacity="0.4" />
                  <stop offset="100%" stopColor="var(--amber)" stopOpacity="0" />
                </linearGradient>
              </defs>
              <path d={path + " L" + w + "," + h + " L0," + h + " Z"} fill="url(#pulseGrad)" />
              <path d={path} fill="none" stroke="var(--amber)" strokeWidth="2" />
              <circle cx={w} cy={h - (points[points.length - 1] / max) * h} r="4" fill="var(--amber)" />
              <circle cx={w} cy={h - (points[points.length - 1] / max) * h} r="8" fill="var(--amber)" opacity="0.25">
                <animate attributeName="r" from="4" to="14" dur="1.4s" repeatCount="indefinite" />
                <animate attributeName="opacity" from="0.4" to="0" dur="1.4s" repeatCount="indefinite" />
              </circle>
            </svg>
            <div style={{
              marginTop: 12, paddingTop: 12, borderTop: "1px solid rgba(255,255,255,0.08)",
              display: "flex", justifyContent: "space-between",
              fontFamily: "JetBrains Mono, monospace", fontSize: 11, color: "rgba(255,255,255,0.55)",
            }}>
              <span>Last update · 04:18 UTC</span>
              <span>citedstore.com/pulse</span>
            </div>
          </div>
        </div>
      </div>
      <style>{`
        @media (max-width: 860px) {
          .pulse-card { grid-template-columns: 1fr !important; padding: 36px 28px !important; gap: 32px !important; }
        }
      `}</style>
    </section>
  );
};

window.Pulse = Pulse;