// Shared atoms used across all three pages.
// Cast, paths, atomic components, slick-UI surfaces, chonk cutouts.

const CAST = JSON.parse(document.getElementById("chonk-cast").textContent);
const byId = Object.fromEntries(CAST.map(c => [c.id, c]));
const CHONK_CUT  = (id) => `assets/chonks-cutout/${byId[id].file}`;
const CHONK_FLAT = (id) => `assets/chonks-full/${byId[id].file}`;

/* ---------- atoms ---------- */

const Eyebrow = ({ children, light = false }) => (
  <span className={`eyebrow ${light ? "eyebrow-light" : ""}`}>{children}</span>
);

const Pill = ({ children, variant }) => (
  <span className={`pill ${variant === "signal" ? "pill-signal" : ""}`}>
    <span className="dot" />{children}
  </span>
);

const Mono = ({ children, style }) => (
  <span className="mono uc" style={{ fontSize: 11, color: "var(--ink-soft)", letterSpacing: "0.08em", ...style }}>{children}</span>
);

const LinkArrow = ({ href, children }) => (
  <a href={href} className="link-arrow">{children} <span>↗</span></a>
);

/* ---------- chonks ---------- */

const ChonkCutout = ({ id, h = 360, style }) => {
  const c = byId[id];
  if (!c) return null;
  return (
    <img
      className="chonk-cutout"
      src={CHONK_CUT(id)}
      alt={c.name}
      style={{ height: h, width: "auto", ...style }}
    />
  );
};

const ChonkAvatar = ({ id, size = 32 }) => {
  const c = byId[id];
  if (!c) return null;
  return (
    <span className="chonk-avatar" style={{ width: size, height: size }}>
      <img src={CHONK_CUT(id)} alt={c.name} />
    </span>
  );
};

/* ---------- slick UI surfaces ---------- */

// SVG: tiny cardiac-style sparkline used in dashboards.
const SparkECG = ({ width = 220, height = 60, stroke = "var(--signal)" }) => {
  const pts = [];
  const N = 100;
  for (let i = 0; i < N; i++) {
    const t = i / N;
    // calm baseline with an occasional spike
    let y = Math.sin(t * Math.PI * 4) * 4;
    if (i % 25 === 14) y += -28;
    if (i % 25 === 15) y += 40;
    if (i % 25 === 16) y += -20;
    pts.push(`${(t * width).toFixed(1)},${(height / 2 + y).toFixed(1)}`);
  }
  return (
    <svg width={width} height={height} viewBox={`0 0 ${width} ${height}`}>
      <polyline fill="none" stroke={stroke} strokeWidth="1.5" strokeLinecap="round" strokeLinejoin="round" points={pts.join(" ")} />
    </svg>
  );
};

// PK/PD style line chart
const LineChart = ({ width = 320, height = 120, series, axis = true }) => {
  const padL = 28, padR = 8, padT = 8, padB = 22;
  const w = width - padL - padR, h = height - padT - padB;
  const all = series.flatMap(s => s.data);
  const yMax = Math.max(...all, 1);
  const xMax = Math.max(...series.map(s => s.data.length - 1), 1);
  const xs = i => padL + (i / xMax) * w;
  const ys = v => padT + h - (v / yMax) * h;
  return (
    <svg width={width} height={height} viewBox={`0 0 ${width} ${height}`}>
      {/* grid */}
      {axis && [0.25, 0.5, 0.75, 1].map((t, i) => (
        <line key={i} x1={padL} x2={padL + w} y1={padT + h - t * h} y2={padT + h - t * h}
              stroke="var(--line)" strokeDasharray="2 3" />
      ))}
      {/* x axis */}
      {axis && <line x1={padL} x2={padL + w} y1={padT + h} y2={padT + h} stroke="var(--line-2)" />}
      {/* series */}
      {series.map((s, si) => (
        <polyline key={si} fill="none" stroke={s.color || "var(--signal)"} strokeWidth="2" strokeLinecap="round"
                  points={s.data.map((v, i) => `${xs(i)},${ys(v)}`).join(" ")} />
      ))}
      {/* y labels */}
      {axis && (
        <g style={{ fontFamily: "var(--font-mono)", fontSize: 9, fill: "var(--ink-soft)" }}>
          <text x={padL - 6} y={padT + 4} textAnchor="end">{yMax}</text>
          <text x={padL - 6} y={padT + h + 3} textAnchor="end">0</text>
        </g>
      )}
    </svg>
  );
};

// Animated dashed flow line (linking process steps)
const FlowLine = ({ width = 800 }) => (
  <svg width={width} height={40} viewBox={`0 0 ${width} 40`}>
    <line x1="0" y1="20" x2={width} y2="20"
          stroke="var(--ink-mute)" strokeWidth="1" strokeDasharray="3 6">
      <animate attributeName="stroke-dashoffset" from="0" to="-36" dur="2s" repeatCount="indefinite" />
    </line>
  </svg>
);

// "Molecule" diagram — abstract hex/atom graph, decorative
const MoleculeViz = ({ size = 180 }) => {
  const cx = size / 2, cy = size / 2, r = size * 0.32;
  const nodes = [
    { x: cx,         y: cy - r,      label: "N"   },
    { x: cx + r * 0.95, y: cy - r * 0.3, label: "C" },
    { x: cx + r * 0.6,  y: cy + r * 0.78, label: "C" },
    { x: cx - r * 0.6,  y: cy + r * 0.78, label: "O" },
    { x: cx - r * 0.95, y: cy - r * 0.3, label: "C" },
    { x: cx,         y: cy,         label: "C"   }
  ];
  const edges = [[0,1],[1,2],[2,5],[5,4],[4,0],[5,3],[2,3]];
  return (
    <svg width={size} height={size} viewBox={`0 0 ${size} ${size}`}>
      {edges.map(([a,b], i) => (
        <line key={i} x1={nodes[a].x} y1={nodes[a].y} x2={nodes[b].x} y2={nodes[b].y}
              stroke="var(--ink-2)" strokeWidth="1.2" />
      ))}
      {nodes.map((n, i) => (
        <g key={i}>
          <circle cx={n.x} cy={n.y} r="11" fill="var(--paper)" stroke="var(--ink-2)" strokeWidth="1.2" />
          <text x={n.x} y={n.y + 3.5} textAnchor="middle"
                style={{ fontFamily: "var(--font-mono)", fontSize: 10, fill: "var(--ink)" }}>{n.label}</text>
        </g>
      ))}
    </svg>
  );
};

/* ---------- nav ---------- */

const NAV_LINKS = [
  { label: "Our model",            href: "our-model.html" },
  { label: "Licensing & pipeline", href: "licensing-and-pipeline.html" },
  { label: "Candidex™",            href: "candidex.html" }
];

const Nav = ({ current }) => {
  const [open, setOpen] = React.useState(false);

  // lock body scroll while drawer is open
  React.useEffect(() => {
    document.body.classList.toggle("nav-locked", open);
    const onKey = (e) => { if (e.key === "Escape") setOpen(false); };
    if (open) document.addEventListener("keydown", onKey);
    return () => document.removeEventListener("keydown", onKey);
  }, [open]);

  const close = () => setOpen(false);

  return (
    <>
      <header className="nav-glass">
        <div className="wrap nav-wrap">
          <a href="index.html" style={{ display: "flex", alignItems: "center" }}>
            <img src="greenlogo.svg" alt="Chonk Bio" style={{ height: 23, width: "auto", display: "block" }} />
          </a>
          <nav className="nav-desktop">
            {NAV_LINKS.map(l => {
              const active = current === l.label.toLowerCase();
              return (
                <a key={l.href} href={l.href}
                   style={{ color: active ? "var(--ink)" : "var(--ink-soft)", borderBottom: active ? "1px solid var(--ink)" : "none", paddingBottom: 2 }}>
                  {l.label}
                </a>
              );
            })}
          </nav>
          <a href="mailto:bd@chonk.bio" className="btn btn-primary nav-cta">
            Partner with us →
          </a>
          <button className="nav-hamburger" onClick={() => setOpen(true)} aria-label="Open menu" aria-expanded={open}>
            <span className="nav-hamburger-icon"><span /><span /><span /></span>
          </button>
        </div>
      </header>

      {/* Mobile drawer */}
      <div className={`nav-drawer ${open ? "open" : ""}`} aria-hidden={!open}>
        <div className="nav-drawer-bg" onClick={close} />
        <div className="nav-drawer-panel" role="dialog" aria-label="Site menu">
          <div className="nav-drawer-head">
            <img src="greenlogo.svg" alt="Chonk Bio" style={{ height: 22, width: "auto" }} />
            <button className="nav-drawer-close" onClick={close} aria-label="Close menu">✕</button>
          </div>
          <nav className="nav-drawer-links">
            <a href="index.html" onClick={close} className={!current ? "active" : ""}>Home</a>
            {NAV_LINKS.map(l => {
              const active = current === l.label.toLowerCase();
              return (
                <a key={l.href} href={l.href} onClick={close} className={active ? "active" : ""}>
                  {l.label}
                </a>
              );
            })}
          </nav>
          <div className="nav-drawer-cta">
            <a href="mailto:bd@chonk.bio" className="btn btn-primary">Partner with us →</a>
            <div className="nav-drawer-cta-mail">
              bd@chonk.bio · scout@chonk.bio
            </div>
          </div>
        </div>
      </div>
    </>
  );
};

/* ---------- footer ---------- */

const Footer = () => (
  <footer style={{ padding: "80px 0 40px", borderTop: "1px solid var(--line)", marginTop: 80 }}>
    <div className="wrap">
      <div style={{ display: "grid", gridTemplateColumns: "1.5fr 1fr 1fr 1fr 1fr", gap: 40, marginBottom: 56 }}>
        <div>
          <img src="greenlogo.svg" alt="Chonk Bio" style={{ height: 20, marginBottom: 16, display: "block" }} />
          <p style={{ fontSize: 13, color: "var(--ink-soft)", maxWidth: 280, lineHeight: 1.55 }}>
            Sniffing out the best drugs for the world's animals.
          </p>
        </div>
        {[
          { title: "Company",       links: ["About", "Team", "Careers", "Press"] },
          { title: "Development",   links: ["Our model", "Licensing", "Pipeline", "Clinical sites"] },
          { title: "For partners",  links: ["In-licensors", "Vet networks", "Strategic", "Investors"] },
          { title: "Policies",      links: ["Terms", "Privacy", "Animal welfare", "Compliance"] }
        ].map(col => (
          <div key={col.title}>
            <Mono style={{ marginBottom: 14, display: "block" }}>{col.title}</Mono>
            <ul style={{ listStyle: "none", display: "flex", flexDirection: "column", gap: 8 }}>
              {col.links.map(l => (
                <li key={l}><a href="#" style={{ fontSize: 14, color: "var(--ink-2)" }}>{l}</a></li>
              ))}
            </ul>
          </div>
        ))}
      </div>
      <hr className="hr" />
      <div style={{ display: "flex", justifyContent: "space-between", alignItems: "center", paddingTop: 28, fontFamily: "var(--font-mono)", fontSize: 11, color: "var(--ink-soft)", letterSpacing: "0.06em" }}>
        <span>© 2026 Chonk Bio, Inc. · Delaware</span>
        <span style={{ display: "flex", gap: 16 }}>
          <span>● Pipeline live</span>
          <span>· v0.5</span>
        </span>
      </div>
    </div>
  </footer>
);