// ============================================================
// FOOTER
// ============================================================

function Footer() {
  const theme = window.useActiveTheme();
  const { isMobile } = window.useViewport();
  const { ShardLogo } = window;

  // Flip hidden:false to bring a column or item back.
  const cols = [
    {
      title: "Product",
      links: [
        ["Features", "/#features"],
        ["How it works", "/#how"],
        ["Pricing", "/#pricing"],
      ],
    },
    {
      title: "Resources",
      hidden: true,
      links: [
        ["Docs", "#docs"],
        ["API reference", "#api"],
        ["Blog", "#blog"],
        ["Sample frameworks", "#frameworks"],
      ],
    },
    {
      title: "Company",
      links: [
        ["About", "/about"],
        ["Careers", "#careers", true],
        ["Contact", "/contact"],
      ],
    },
    {
      title: "Legal",
      hidden: true,
      links: [
        ["Privacy", "#privacy"],
        ["Terms", "#terms"],
        ["Security", "#security"],
        ["DPA", "#dpa"],
      ],
    },
  ];

  return (
    <footer
      style={{
        background: theme.surface,
        borderTop: `1px solid ${theme.cardBorder}`,
        padding: isMobile ? "48px 0 32px" : "72px 0 40px",
        fontFamily: "'DM Sans', sans-serif",
      }}
    >
      <div
        style={{
          maxWidth: 1240,
          margin: "0 auto",
          padding: isMobile ? "0 22px" : "0 48px",
        }}
      >
        <div
          style={{
            display: "grid",
            gridTemplateColumns: isMobile
              ? "1fr 1fr"
              : `1.4fr ${"1fr ".repeat(cols.filter((c) => !c.hidden).length).trim()}`,
            gap: isMobile ? 24 : 40,
            marginBottom: isMobile ? 36 : 56,
          }}
        >
          {/* Brand block */}
          <div style={{ gridColumn: isMobile ? "1 / -1" : "auto", maxWidth: 320 }}>
            <a
              href="/"
              style={{
                display: "flex",
                alignItems: "center",
                gap: 12,
                textDecoration: "none",
                color: "inherit",
                marginBottom: 18,
              }}
            >
              <ShardLogo size={26} />
              <span style={{ fontFamily: "'Lexend', sans-serif", fontWeight: 600, fontSize: 20, letterSpacing: -0.4 }}>
                Shard
              </span>
            </a>
            <p style={{ fontSize: 14.5, lineHeight: 1.6, color: theme.sub, margin: 0 }}>
              The AI evaluation stack. Build rubrics, run scenarios, score with humans + AI
              councils. Evidence by default.
            </p>
          </div>

          {cols.filter((c) => !c.hidden).map((c) => (
            <div key={c.title}>
              <div
                style={{
                  fontFamily: "'JetBrains Mono', monospace",
                  fontSize: 10.5,
                  letterSpacing: 1.4,
                  textTransform: "uppercase",
                  color: theme.mute,
                  fontWeight: 600,
                  marginBottom: 16,
                }}
              >
                {c.title}
              </div>
              <ul style={{ listStyle: "none", padding: 0, margin: 0, display: "flex", flexDirection: "column", gap: 10 }}>
                {c.links.filter((link) => !link[2]).map(([label, href]) => (
                  <li key={label}>
                    <a
                      href={href}
                      style={{
                        fontSize: 14,
                        color: theme.sub,
                        textDecoration: "none",
                      }}
                      onMouseEnter={(e) => (e.currentTarget.style.color = theme.ink)}
                      onMouseLeave={(e) => (e.currentTarget.style.color = theme.sub)}
                    >
                      {label}
                    </a>
                  </li>
                ))}
              </ul>
            </div>
          ))}
        </div>

        {/* Kintsugi seam divider */}
        <svg
          aria-hidden
          viewBox="0 0 1200 8"
          preserveAspectRatio="none"
          style={{ display: "block", width: "100%", height: 6, marginBottom: 24, opacity: 0.55 }}
        >
          <path
            d="M0 4 L260 4 L300 2 L360 6 L420 4 L760 4 L800 1 L860 7 L920 4 L1200 4"
            stroke={theme.accent}
            strokeWidth="1"
            fill="none"
            strokeLinecap="round"
          />
        </svg>

        <div
          style={{
            display: "flex",
            flexDirection: isMobile ? "column" : "row",
            justifyContent: "space-between",
            alignItems: isMobile ? "flex-start" : "center",
            gap: 10,
            fontSize: 12.5,
            color: theme.mute,
          }}
        >
          <div style={{ fontFamily: "'JetBrains Mono', monospace", letterSpacing: 0.3 }}>
            © {new Date().getFullYear()} Shard. Built in Australia.
          </div>
          <div style={{ fontFamily: "'JetBrains Mono', monospace", letterSpacing: 0.3, color: theme.sub }}>
            <span style={{ color: theme.accent }}>◆</span> Evaluation, with evidence.
          </div>
        </div>
      </div>
    </footer>
  );
}

window.Footer = Footer;