// Shared UI bits

const Logo = ({ size = 34 }) => (
  <svg viewBox="0 0 80 60" width={size} height={size * 0.75}>
    <path d="M18 44 Q12 20 40 16 Q68 20 62 44 Q64 52 58 52 Q50 48 40 52 Q30 48 22 52 Q16 52 18 44 Z" fill="#5FBF5F" stroke="#0F1F2C" strokeWidth="2" strokeLinejoin="round" />
    <ellipse cx="33" cy="30" rx="4" ry="5" fill="white" stroke="#0F1F2C" strokeWidth="1.4" />
    <ellipse cx="47" cy="30" rx="4" ry="5" fill="white" stroke="#0F1F2C" strokeWidth="1.4" />
    <circle cx="33" cy="31" r="1.8" fill="#0F1F2C" />
    <circle cx="47" cy="31" r="1.8" fill="#0F1F2C" />
    <path d="M33 40 Q40 45 47 40" stroke="#0F1F2C" strokeWidth="1.8" fill="none" strokeLinecap="round" />
  </svg>
);

const Nav = ({ view, onNav }) => (
  <nav className="nav">
    <div className="nav-inner">
      <div className="brand">
        <span className="brand-mark"><Logo size={34} /></span>
        PeptidePal
      </div>
      <div className="nav-links">
        <a onClick={() => onNav("landing")} className={view === "landing" ? "active" : ""}>Home</a>
        <a onClick={() => onNav("index")} className={view === "index" ? "active" : ""}>Peptide Index</a>
        <a onClick={() => onNav("learn")} className={view === "learn" || view === "article" ? "active" : ""}>Learn</a>
        <a onClick={() => onNav("dashboard")} className={view === "dashboard" ? "active" : ""}>My Dashboard</a>
      </div>
      <div style={{ display: "flex", gap: 8, minWidth: 185, justifyContent: "flex-end" }}>
        <button
          className="btn"
          onClick={() => onNav("dashboard")}
          style={{ visibility: view === "dashboard" ? "hidden" : "visible" }}
        >
          Open dashboard →
        </button>
      </div>
    </div>
  </nav>
);

const Sparkline = ({ data, color = "#2F8C3A" }) => {
  const w = 200, h = 34;
  const max = Math.max(...data), min = Math.min(...data);
  const pts = data.map((v, i) => {
    const x = (i / (data.length - 1)) * w;
    const y = h - ((v - min) / (max - min || 1)) * (h - 6) - 3;
    return `${x},${y}`;
  }).join(" ");
  const area = `0,${h} ${pts} ${w},${h}`;
  return (
    <svg viewBox={`0 0 ${w} ${h}`} preserveAspectRatio="none">
      <polygon points={area} fill={color} opacity="0.1" />
      <polyline points={pts} fill="none" stroke={color} strokeWidth="1.8" strokeLinejoin="round" strokeLinecap="round" />
      {data.map((v, i) => {
        if (i !== data.length - 1) return null;
        const x = (i / (data.length - 1)) * w;
        const y = h - ((v - min) / (max - min || 1)) * (h - 6) - 3;
        return <circle key={i} cx={x} cy={y} r="2.5" fill={color} />;
      })}
    </svg>
  );
};

Object.assign(window, { Nav, Sparkline });