/* Shared chrome — nav + footer */

function Logo({ size = 28 }) {
  return (
    <div style={{ display: "flex", alignItems: "center", gap: 10 }}>
      <svg width={size} height={size} viewBox="0 0 28 28" aria-hidden="true">
        <rect x="1" y="1" width="26" height="26" rx="7"
              fill="var(--brand-600)" />
        {/* benchtop bracket */}
        <path d="M7 18 L7 10 L21 10 L21 18" stroke="white" strokeWidth="1.8" fill="none" strokeLinecap="round" />
        <line x1="7" y1="18" x2="21" y2="18" stroke="white" strokeWidth="1.8" strokeLinecap="round" />
        <circle cx="11" cy="14" r="1.4" fill="white" />
        <circle cx="14" cy="14" r="1.4" fill="white" />
        <circle cx="17" cy="14" r="1.4" fill="white" />
      </svg>
      <div style={{ display: "flex", alignItems: "baseline", gap: 0, fontSize: 16, fontWeight: 600, letterSpacing: "-0.01em", color: "var(--ink-900)" }}>
        <span>Conduct</span>
        <span style={{ color: "var(--brand-700)" }}>Bench</span>
      </div>
    </div>
  );
}

function Nav({ current }) {
  const items = [
    { label: "Workspace", href: "/demo/", key: "demo" },
    { label: "Workflows", href: "/#workflows", key: "workflows" },
    { label: "Customers", href: "/#customers", key: "customers" },
    { label: "Pricing", href: "/#pricing", key: "pricing" },
    { label: "Docs", href: "#", key: "docs" },
  ];
  return (
    <nav style={{
      position: "sticky", top: 0, zIndex: 50,
      background: "rgba(255,255,255,.85)",
      backdropFilter: "saturate(180%) blur(8px)",
      WebkitBackdropFilter: "saturate(180%) blur(8px)",
      borderBottom: "1px solid var(--ink-200)",
    }}>
      <div style={{
        maxWidth: 1240, margin: "0 auto",
        padding: "12px 24px",
        display: "flex", alignItems: "center", justifyContent: "space-between", gap: 16,
      }}>
        <a href="/" style={{ display: "flex" }}><Logo /></a>
        <div style={{ display: "flex", alignItems: "center", gap: 22 }}>
          {items.map(i => (
            <a key={i.key} href={i.href}
               style={{
                 fontSize: 13.5, fontWeight: 500,
                 color: current === i.key ? "var(--brand-700)" : "var(--ink-700)",
               }}>{i.label}</a>
          ))}
          <div style={{ width: 1, height: 18, background: "var(--ink-200)" }} />
          <a href="#" style={{ fontSize: 13.5, fontWeight: 500, color: "var(--ink-700)" }}>Sign in</a>
          <a href="#" className="btn btn-primary btn-sm">
            Start free
          </a>
        </div>
      </div>
    </nav>
  );
}

function Footer() {
  const groups = [
    {
      title: "Product",
      links: [
        ["Workspace", "/demo/"],
        ["qPCR / ELISA workflow", "/#workflow-qpcr"],
        ["Behavior + assay", "/#workflow-behavior"],
        ["Methods + provenance", "/demo/#methods"],
        ["Changelog", "#"],
      ],
    },
    {
      title: "Get started",
      links: [
        ["Start free", "#"],
        ["Pricing", "/#pricing"],
        ["Book a demo", "#"],
        ["Customer stories", "/#customers"],
      ],
    },
    {
      title: "ConductScience",
      links: [
        ["ConductCognition", "#"],
        ["ConductColony", "#"],
        ["ConductSignal", "#"],
        ["ConductSpeech", "#"],
        ["ConductVision", "#"],
      ],
    },
    {
      title: "Lab",
      links: [
        ["About ConductScience", "#"],
        ["Security & data", "#"],
        ["Methods reference", "#"],
        ["Contact", "#"],
      ],
    },
  ];

  return (
    <footer style={{ background: "var(--ink-50)", borderTop: "1px solid var(--ink-200)", marginTop: 80 }}>
      <div style={{ maxWidth: 1240, margin: "0 auto", padding: "56px 24px 36px" }}>
        <div style={{ display: "grid", gridTemplateColumns: "1.6fr repeat(4, 1fr)", gap: 32 }}>
          <div>
            <Logo />
            <p style={{ marginTop: 14, color: "var(--ink-600)", fontSize: 13.5, lineHeight: 1.6, maxWidth: 320 }}>
              The study workspace for bioinformatics and assay projects.
              Turns scattered files into one analysis-ready record.
            </p>
            <div className="mono" style={{ marginTop: 18, fontSize: 11, color: "var(--ink-500)", letterSpacing: ".04em" }}>
              SOC 2 Type II · HIPAA-ready · v3.2
            </div>
          </div>
          {groups.map(g => (
            <div key={g.title}>
              <div style={{ fontSize: 11.5, fontWeight: 600, letterSpacing: ".08em", textTransform: "uppercase", color: "var(--ink-500)" }}>
                {g.title}
              </div>
              <ul style={{ listStyle: "none", margin: "14px 0 0", padding: 0, display: "grid", gap: 9 }}>
                {g.links.map(([label, href]) => (
                  <li key={label}>
                    <a href={href} style={{ fontSize: 13.5, color: "var(--ink-700)" }}>{label}</a>
                  </li>
                ))}
              </ul>
            </div>
          ))}
        </div>
        <div style={{
          marginTop: 48, paddingTop: 20, borderTop: "1px solid var(--ink-200)",
          display: "flex", alignItems: "center", justifyContent: "space-between",
          fontSize: 12.5, color: "var(--ink-500)",
        }}>
          <div>© 2026 ConductScience · ConductBench is a product wedge of the ConductScience research platform.</div>
          <div className="mono" style={{ fontSize: 11, letterSpacing: ".04em" }}>
            For research use only · no PHI in demo data
          </div>
        </div>
      </div>
    </footer>
  );
}

Object.assign(window, { Logo, Nav, Footer });