// Shared small components
function Card({ children, style, className = "", onMouseEnter, onMouseLeave }) {
  return (
    <div className={`glass ${className}`} style={{ padding: 20, position: "relative", ...style }} onMouseEnter={onMouseEnter} onMouseLeave={onMouseLeave}>
      {children}
    </div>
  );
}

function SectionHead({ eyebrow, title, sub, action }) {
  return (
    <div style={{ display: "flex", alignItems: "flex-end", justifyContent: "space-between", marginBottom: 18, gap: 20 }}>
      <div>
        {eyebrow && <div className="eyebrow" style={{ marginBottom: 8 }}>{eyebrow}</div>}
        <h2 className="display" style={{ fontSize: 34, margin: 0, lineHeight: 1.05, color: "var(--ink-1)" }}>{title}</h2>
        {sub && <p style={{ fontSize: 13, color: "var(--ink-3)", marginTop: 6, marginBottom: 0, maxWidth: 560 }}>{sub}</p>}
      </div>
      {action}
    </div>
  );
}

// Sparkline
function Sparkline({ data, color = "var(--accent)", h = 32, w = 120, fill = true }) {
  const max = Math.max(...data), min = Math.min(...data);
  const range = max - min || 1;
  const step = w / (data.length - 1);
  const pts = data.map((v, i) => [i * step, h - ((v - min) / range) * (h - 4) - 2]);
  const d = pts.map((p, i) => (i ? "L" : "M") + p[0].toFixed(1) + " " + p[1].toFixed(1)).join(" ");
  const gid = "sg-" + Math.random().toString(36).slice(2, 7);
  return (
    <svg width={w} height={h} style={{ display: "block", overflow: "visible" }}>
      <defs>
        <linearGradient id={gid} x1="0" y1="0" x2="0" y2="1">
          <stop offset="0" stopColor={color} stopOpacity="0.35"/>
          <stop offset="1" stopColor={color} stopOpacity="0"/>
        </linearGradient>
      </defs>
      {fill && <path d={`${d} L ${w} ${h} L 0 ${h} Z`} fill={`url(#${gid})`}/>}
      <path d={d} fill="none" stroke={color} strokeWidth="1.2"/>
      <circle cx={pts[pts.length-1][0]} cy={pts[pts.length-1][1]} r="2.5" fill={color}/>
    </svg>
  );
}

window.Card = Card;
window.SectionHead = SectionHead;
window.Sparkline = Sparkline;