/* Shared components: logo, header, footer, icons */

const ARMark = ({ size = 28 }) => (
  <svg width={size} height={size} viewBox="0 0 32 32" fill="none" aria-hidden="true">
    {/* Stylized A/R monogram — geometric, Swiss */}
    <rect x="0.5" y="0.5" width="31" height="31" rx="6" stroke="currentColor" strokeOpacity="0.18" />
    <path d="M7 24 L11 8 L13.5 8 L17.5 24 M9 18 L15.5 18" stroke="currentColor" strokeWidth="1.6" strokeLinecap="square" />
    <path d="M19.5 24 L19.5 8 L23 8 C25.2 8 26.5 9.6 26.5 11.5 C26.5 13.4 25.2 15 23 15 L19.5 15 M23 15 L26.5 24" stroke="currentColor" strokeWidth="1.6" strokeLinecap="square" strokeLinejoin="miter" />
  </svg>
);

const Logo = ({ compact = false }) => (
  <a href="#top" className="logo" aria-label="AR Communications — home">
    <ARMark size={28} />
    {!compact && (
      <span className="logo__type">
        <span className="logo__name">AR Communications</span>
        <span className="logo__sub mono">Gabriola, BC</span>
      </span>
    )}
    <style>{`
      .logo { display:inline-flex; align-items:center; gap:12px; color:var(--ink); }
      .logo__type { display:flex; flex-direction:column; line-height:1; gap:3px; }
      .logo__name { font-size:14px; font-weight:500; letter-spacing:-0.01em; }
      .logo__sub { font-size:10px; color:var(--ink-3); }
    `}</style>
  </a>
);

const NavArrow = ({ size = 14 }) => (
  <svg width={size} height={size} viewBox="0 0 14 14" fill="none" aria-hidden="true">
    <path d="M3 11 L11 3 M5 3 L11 3 L11 9" stroke="currentColor" strokeWidth="1.5" strokeLinecap="square" />
  </svg>
);

const PlusIcon = ({ size = 12 }) => (
  <svg width={size} height={size} viewBox="0 0 12 12" fill="none" aria-hidden="true">
    <path d="M6 1 L6 11 M1 6 L11 6" stroke="currentColor" strokeWidth="1.4" />
  </svg>
);

const Header = () => {
  const [scrolled, setScrolled] = React.useState(false);
  const [open, setOpen] = React.useState(false);

  React.useEffect(() => {
    const onScroll = () => setScrolled(window.scrollY > 24);
    onScroll();
    window.addEventListener("scroll", onScroll, { passive: true });
    return () => window.removeEventListener("scroll", onScroll);
  }, []);

  const links = [
    { label: "Services", href: "#services", num: "01" },
    { label: "Work", href: "#work", num: "02" },
    { label: "About", href: "#about", num: "03" },
    { label: "Contact", href: "#contact", num: "04" },
  ];

  return (
    <header className={`hdr ${scrolled ? "is-scrolled" : ""}`}>
      <div className="container container--wide hdr__row">
        <Logo />
        <nav className="hdr__nav" aria-label="Primary">
          {links.map((l) => (
            <a key={l.href} href={l.href} className="hdr__link">
              <span className="mono hdr__num">{l.num}</span>
              <span>{l.label}</span>
            </a>
          ))}
        </nav>
        <div className="hdr__cta">
          <span className="hdr__status">
            <span className="hdr__dot" />
            <span className="mono">Taking on projects</span>
          </span>
          <a href="#contact" className="btn btn--primary btn--arrow">
            Start a project
            <NavArrow />
          </a>
        </div>
      </div>
      <hr className="rule" />
      <style>{`
        .hdr {
          position: fixed; top:0; left:0; right:0; z-index: 50;
          background: transparent;
          transition: background var(--t), backdrop-filter var(--t), border-color var(--t);
        }
        .hdr.is-scrolled {
          background: rgba(10,10,10,0.72);
          backdrop-filter: blur(16px) saturate(140%);
          -webkit-backdrop-filter: blur(16px) saturate(140%);
        }
        .hdr__row {
          display:grid;
          grid-template-columns: 1fr auto 1fr;
          align-items:center;
          gap: 32px;
          padding: 18px var(--gutter);
        }
        .hdr__nav { display:flex; gap: 28px; justify-self:center; }
        .hdr__link {
          display:inline-flex; align-items:center; gap:6px;
          font-size:14px; color: var(--ink-2);
          transition: color var(--t-fast);
        }
        .hdr__link:hover { color: var(--ink); }
        .hdr__num { color: var(--ink-4); font-size: 10px; }
        .hdr__cta { display:flex; align-items:center; gap:18px; justify-self:end; }
        .hdr__status { display:inline-flex; align-items:center; gap:8px; color: var(--ink-2); }
        .hdr__dot {
          width:7px; height:7px; border-radius:50%;
          background: var(--accent);
          box-shadow: 0 0 0 4px color-mix(in oklch, var(--accent) 20%, transparent);
          animation: blink 2.4s ease-in-out infinite;
        }
        .hdr .rule { opacity: 0; transition: opacity var(--t); }
        .hdr.is-scrolled .rule { opacity: 1; }
        @media (max-width: 900px) {
          .hdr__nav, .hdr__status { display:none; }
          .hdr__row { grid-template-columns: 1fr auto; }
        }
      `}</style>
    </header>
  );
};

const ColumnLabel = ({ num, children }) => (
  <div className="col-label">
    <span className="mono col-label__num">{num}</span>
    <span className="mono col-label__txt">{children}</span>
    <style>{`
      .col-label { display:flex; align-items:center; gap:10px; color: var(--ink-3); }
      .col-label__num { color: var(--ink-4); }
    `}</style>
  </div>
);

Object.assign(window, { ARMark, Logo, NavArrow, PlusIcon, Header, ColumnLabel });
