// Shared chrome for Noble page mockups.
const { useState } = React;

function NobleNav({ active = "shop" }) {
  const links = [
    { id: "shop", label: "Shop" },
    { id: "collection", label: "Collection" },
    { id: "craft", label: "The Craft" },
    { id: "journal", label: "Journal" },
    { id: "support", label: "Support" },
  ];
  return (
    <nav className="n-nav">
      <div style={{ display: "flex", alignItems: "center", gap: 48 }}>
        <div className="n-logo">
          <span className="n-logo-mark">N</span>
          <span>Noble</span>
        </div>
        <div className="n-nav-links">
          {links.map((l) => (
            <a
              key={l.id}
              href="#"
              style={{
                color: active === l.id ? "var(--n-cream)" : undefined,
                borderBottom: active === l.id ? "1px solid var(--n-gold)" : "1px solid transparent",
                paddingBottom: 4,
              }}
            >
              {l.label}
            </a>
          ))}
        </div>
      </div>
      <div className="n-nav-right">
        <span style={{ display: "flex", alignItems: "center", gap: 6 }}>
          <svg width="14" height="14" viewBox="0 0 14 14" fill="none">
            <circle cx="6" cy="6" r="4.5" stroke="currentColor" />
            <path d="M9.5 9.5L13 13" stroke="currentColor" strokeLinecap="round" />
          </svg>
          Search
        </span>
        <span>Account</span>
        <span style={{ display: "flex", alignItems: "center", gap: 8 }}>
          Cart
          <span
            className="n-mono"
            style={{
              background: "var(--n-gold)",
              color: "var(--n-ink)",
              borderRadius: 999,
              padding: "1px 7px",
              fontSize: 10,
              fontWeight: 600,
            }}
          >
            02
          </span>
        </span>
      </div>
    </nav>
  );
}

function NobleFooter() {
  return (
    <footer
      style={{
        borderTop: "1px solid var(--n-line)",
        padding: "56px 56px 40px",
        background: "var(--n-ink)",
      }}
    >
      <div
        style={{
          display: "grid",
          gridTemplateColumns: "1.4fr 1fr 1fr 1fr 1fr",
          gap: 40,
          marginBottom: 56,
        }}
      >
        <div>
          <div className="n-logo" style={{ marginBottom: 16 }}>
            <span className="n-logo-mark">N</span>
            <span>Noble</span>
          </div>
          <p
            style={{
              color: "var(--n-muted)",
              fontSize: 13,
              lineHeight: 1.6,
              maxWidth: 240,
              margin: 0,
            }}
          >
            Heritage audio, built one pair at a time in Kyoto and Copenhagen since
            2009.
          </p>
        </div>
        {[
          { title: "Shop", items: ["Headphones", "Amplifiers", "Cables", "Care kits", "Gift cards"] },
          { title: "Company", items: ["The Craft", "Studio", "Stockists", "Press"] },
          { title: "Support", items: ["Warranty", "Repairs", "Shipping", "Returns"] },
          { title: "Connect", items: ["Newsletter", "Instagram", "Journal"] },
        ].map((c) => (
          <div key={c.title}>
            <div className="n-label" style={{ marginBottom: 14 }}>{c.title}</div>
            <ul style={{ listStyle: "none", padding: 0, margin: 0, display: "grid", gap: 10 }}>
              {c.items.map((i) => (
                <li key={i} style={{ fontSize: 13, color: "var(--n-cream-dim)" }}>{i}</li>
              ))}
            </ul>
          </div>
        ))}
      </div>
      <div
        style={{
          display: "flex",
          justifyContent: "space-between",
          alignItems: "center",
          borderTop: "1px solid var(--n-line)",
          paddingTop: 24,
        }}
      >
        <div className="n-mono" style={{ fontSize: 11, color: "var(--n-faint)", letterSpacing: "0.12em" }}>
          © NOBLE AUDIO · MMXXVI · KYOTO / COPENHAGEN
        </div>
        <div style={{ display: "flex", gap: 28, fontSize: 12, color: "var(--n-muted)" }}>
          <span>Terms</span>
          <span>Privacy</span>
          <span>Cookies</span>
          <span>EN / USD</span>
        </div>
      </div>
    </footer>
  );
}

function NoblePlaceholder({
  height = 420,
  label = "PRODUCT",
  corner = "",
  cornerRight = "",
  children,
  style = {},
}) {
  return (
    <div className="n-img" style={{ height, ...style }}>
      {corner && <span className="n-img-corner">{corner}</span>}
      {cornerRight && <span className="n-img-corner-r">{cornerRight}</span>}
      <span>{label}</span>
      <span>NOBLE · 35MM</span>
      {children}
    </div>
  );
}

Object.assign(window, { NobleNav, NobleFooter, NoblePlaceholder });