/* NoralAI website — shared layout components */

const INK    = "#0A1F2E";
const INK_2  = "#122a3c";
const CREAM  = "#F5F1EA";
const PAPER  = "#FAF7F1";
const SAND   = "#ECE6DA";
const SIGNAL = "#FF5B2E";
const STONE  = "#4a5560";
const MIST   = "#7d8a96";

const NAV_LINKS = [
  { href: "index.html", label: "Home", id: "home" },
  { href: "platform.html", label: "Platform", id: "platform" },
  { href: "industries.html", label: "Industries", id: "industries" },
  { href: "company.html", label: "Company", id: "company" },
  { href: "blog.html", label: "Blog", id: "blog" },
  { href: "contact.html", label: "Contact", id: "contact" },
];

// Show the Blog link unless window.POSTS is explicitly empty. blog-data.jsx
// only loads on the blog/post pages, so on other pages window.POSTS is
// undefined — we treat that as "posts unknown, leave the link visible".
const hasPosts = () => !Array.isArray(window.POSTS) || window.POSTS.length > 0;

const Nav = ({ active, inverted = false }) => {
  const [open, setOpen] = React.useState(false);
  const ink = inverted ? CREAM : INK;
  const muted = inverted ? "rgba(245,241,234,0.75)" : STONE;
  const middleLinks = NAV_LINKS.slice(1, -1).filter(l => l.id !== "blog" || hasPosts());
  return (
    <nav style={{
      position: "sticky", top: 0, zIndex: 50,
      background: inverted ? INK : `${PAPER}ee`,
      backdropFilter: "saturate(140%) blur(8px)",
      borderBottom: `1px solid ${inverted ? "rgba(245,241,234,0.10)" : `${INK}11`}`,
    }}>
      <div style={{
        maxWidth: 1200, margin: "0 auto", padding: "18px 24px",
        display: "flex", alignItems: "center", justifyContent: "space-between",
      }}>
        <a href="index.html" style={{ textDecoration: "none", display: "inline-flex", alignItems: "center" }}>
          <NoralPrimary size={28} inkColor={ink} accent={SIGNAL} />
        </a>

        {/* Desktop nav */}
        <div className="nora-nav-desktop" style={{ gap: 32, alignItems: "center" }}>
          {middleLinks.map(l => (
            <a key={l.id} href={l.href} style={{
              fontFamily: "'Inter', sans-serif", fontWeight: 500, fontSize: 14,
              color: active === l.id ? ink : muted,
              textDecoration: "none", letterSpacing: "-0.01em",
              borderBottom: active === l.id ? `2px solid ${SIGNAL}` : "2px solid transparent",
              paddingBottom: 4,
            }}>{l.label}</a>
          ))}
          <a href="contact.html" style={{
            fontFamily: "'Inter', sans-serif", fontWeight: 600, fontSize: 13,
            color: CREAM, background: SIGNAL,
            textDecoration: "none", padding: "10px 16px", borderRadius: 10,
            letterSpacing: "-0.01em",
          }}>Talk to us</a>
        </div>

        {/* Mobile hamburger */}
        <button
          type="button"
          className="nora-nav-burger"
          aria-label={open ? "Close menu" : "Open menu"}
          aria-expanded={open}
          onClick={() => setOpen(o => !o)}
          style={{
            background: "transparent", border: "none", cursor: "pointer",
            padding: 8, alignItems: "center", justifyContent: "center",
            color: ink,
          }}
        >
          <svg width="24" height="24" viewBox="0 0 24 24" fill="none" aria-hidden="true">
            {open ? (
              <path d="M6 6 L18 18 M18 6 L6 18" stroke="currentColor" strokeWidth="2" strokeLinecap="round" />
            ) : (
              <>
                <path d="M4 7 H20" stroke="currentColor" strokeWidth="2" strokeLinecap="round" />
                <path d="M4 12 H20" stroke="currentColor" strokeWidth="2" strokeLinecap="round" />
                <path d="M4 17 H20" stroke="currentColor" strokeWidth="2" strokeLinecap="round" />
              </>
            )}
          </svg>
        </button>
      </div>

      {/* Mobile dropdown panel */}
      {open && (
        <div
          className="nora-nav-burger"
          style={{
            flexDirection: "column",
            padding: "8px 24px 24px",
            borderTop: `1px solid ${inverted ? "rgba(245,241,234,0.10)" : `${INK}11`}`,
            gap: 4,
          }}
        >
          {middleLinks.map(l => (
            <a key={l.id} href={l.href} onClick={() => setOpen(false)} style={{
              fontFamily: "'Inter', sans-serif", fontWeight: 500, fontSize: 16,
              color: active === l.id ? SIGNAL : ink,
              textDecoration: "none", letterSpacing: "-0.01em",
              padding: "12px 0",
              borderBottom: `1px solid ${inverted ? "rgba(245,241,234,0.08)" : `${INK}11`}`,
            }}>{l.label}</a>
          ))}
          <a href="contact.html" onClick={() => setOpen(false)} style={{
            marginTop: 16,
            fontFamily: "'Inter', sans-serif", fontWeight: 600, fontSize: 15,
            color: CREAM, background: SIGNAL,
            textDecoration: "none", padding: "14px 18px", borderRadius: 10,
            letterSpacing: "-0.01em", textAlign: "center",
          }}>Talk to us →</a>
        </div>
      )}
    </nav>
  );
};

const Footer = () => {
  const resourceLinks = [
    hasPosts() && { href: "blog.html", label: "Blog" },
    { href: "company.html", label: "About" },
    { href: "company.html#shift", label: "The shift" },
    { href: "industries.html", label: "Industries" },
  ].filter(Boolean);
  return (
  <footer style={{ background: INK, color: CREAM, padding: "64px 32px 32px", marginTop: 80 }}>
    <div style={{ maxWidth: 1200, margin: "0 auto" }}>
      <div data-grid="4col" style={{ display: "grid", gridTemplateColumns: "2fr 1fr 1fr 1fr", gap: 48, paddingBottom: 48, borderBottom: "1px solid rgba(245,241,234,0.12)" }}>
        <div>
          <NoralPrimary size={26} inkColor={CREAM} accent={SIGNAL} />
          <div style={{ fontFamily: "'Inter', sans-serif", fontWeight: 700, fontSize: 22, letterSpacing: "-0.025em", marginTop: 24, lineHeight: 1.2, maxWidth: 360, color: CREAM }}>
            We don't sell software.<br />We deploy <span style={{ color: SIGNAL }}>AI workers.</span>
          </div>
          <div style={{ fontSize: 13, color: "rgba(245,241,234,0.78)", marginTop: 16, maxWidth: 360, lineHeight: 1.6 }}>
            Managed AI infrastructure & services. We deploy systems that take work from conversation through coordination to completion.
          </div>
        </div>
        <FooterCol title="Platform" links={[
          { href: "platform.html", label: "How it works" },
          { href: "platform.html#capabilities", label: "Capabilities" },
          { href: "platform.html#replaces", label: "What this replaces" },
        ]} />
        <FooterCol title="Resources" links={resourceLinks} />
        <FooterCol title="Contact" links={[
          { href: "contact.html", label: "Talk to us" },
          { href: "mailto:hello@noralai.com", label: "hello@noralai.com" },
        ]} />
      </div>
      <div style={{ display: "flex", justifyContent: "space-between", alignItems: "center", paddingTop: 24, gap: 16, flexWrap: "wrap" }}>
        <div style={{ fontFamily: "'JetBrains Mono', monospace", fontSize: 11, letterSpacing: "0.16em", textTransform: "uppercase", color: "rgba(245,241,234,0.75)" }}>
          © 2026 NoralAI · All rights reserved
        </div>
        <div style={{ fontFamily: "'JetBrains Mono', monospace", fontSize: 11, letterSpacing: "0.16em", textTransform: "uppercase", color: "rgba(245,241,234,0.75)" }}>
          noralai.com
        </div>
      </div>
    </div>
  </footer>
  );
};

const FooterCol = ({ title, links }) => (
  <div>
    <div style={{ fontFamily: "'JetBrains Mono', monospace", fontSize: 11, letterSpacing: "0.16em", textTransform: "uppercase", color: "rgba(245,241,234,0.78)", fontWeight: 600, marginBottom: 16 }}>{title}</div>
    <ul style={{ listStyle: "none", padding: 0, margin: 0, display: "flex", flexDirection: "column", gap: 10 }}>
      {links.map(l => (
        <li key={l.label}>
          <a href={l.href} style={{ fontFamily: "'Inter', sans-serif", fontSize: 13, color: "rgba(245,241,234,0.9)", textDecoration: "none", letterSpacing: "-0.005em" }}>{l.label}</a>
        </li>
      ))}
    </ul>
  </div>
);

const Eyebrow = ({ children, color = MIST }) => (
  <div style={{
    fontFamily: "'JetBrains Mono', monospace",
    fontSize: 11, letterSpacing: "0.18em",
    textTransform: "uppercase", color, fontWeight: 500,
  }}>{children}</div>
);

const Section = ({ children, dark = false, paddingY = 96, style = {}, ...rest }) => (
  <section data-section="" style={{
    background: dark ? INK : "transparent",
    color: dark ? CREAM : INK,
    padding: `${paddingY}px 32px`,
    ...style,
  }} {...rest}>
    <div style={{ maxWidth: 1200, margin: "0 auto" }}>{children}</div>
  </section>
);

// Page wrapper
const Page = ({ children, active, navInverted = false }) => (
  <div style={{ background: PAPER, color: INK, minHeight: "100vh", fontFamily: "'Inter', sans-serif" }}>
    <Nav active={active} inverted={navInverted} />
    {children}
    <Footer />
  </div>
);

Object.assign(window, {
  Nav, Footer, Eyebrow, Section, Page,
  INK, INK_2, CREAM, PAPER, SAND, SIGNAL, STONE, MIST,
});