/* v2 shared chrome: Wordmark, Navbar, Footer, AxiomOneCallout. Light theme. */

function Wordmark({ suffix = "", className = "", href = "index.html" }) {
  return (
    <a href={href} className={"inline-flex items-center gap-2.5 " + className}>
      <img src="/media/axiom-mark.svg" alt="" aria-hidden="true" className="h-8 w-8 object-contain shrink-0" />
      <span className="font-semibold tracking-tight text-[15px] sm:text-[16px] whitespace-nowrap text-[color:var(--ink)]">
        Axiom{suffix && <span style={{ color: 'var(--brand)' }}>{suffix}</span>}
      </span>
    </a>
  );
}

const NAV_LINKS = [
  { label: 'AxiomPOS',             href: 'pos.html' },
  { label: 'Axiom Marketing',      href: 'marketing.html' },
  { label: 'Axiom Website Design', href: 'websites.html' },
  { label: 'About',                href: 'index.html#about' },
  { label: 'Contact',              href: '#demo' },
];

function Navbar({ wordmarkSuffix = '', wordmarkHref = 'index.html', ctaLabel = 'Book a consultation', ctaHref = '#demo' }) {
  const [open, setOpen] = React.useState(false);
  const [scrolled, setScrolled] = React.useState(false);
  React.useEffect(() => {
    const onScroll = () => setScrolled(window.scrollY > 8);
    window.addEventListener('scroll', onScroll, { passive: true });
    return () => window.removeEventListener('scroll', onScroll);
  }, []);

  return (
    <header
      className={
        "sticky top-0 z-40 transition-colors " +
        (scrolled
          ? "bg-white/85 backdrop-blur-md border-b border-[color:var(--line)]"
          : "bg-white/0 border-b border-transparent")
      }
    >
      <div className="max-w-7xl mx-auto px-4 sm:px-6 h-16 flex items-center justify-between gap-3">
        <Wordmark suffix={wordmarkSuffix} href={wordmarkHref} />

        <nav className="hidden lg:flex items-center gap-7">
          {NAV_LINKS.map(l => (
            <a key={l.label} href={l.href} className="text-[14px] font-medium text-[color:var(--ink-700)] hover:text-[color:var(--ink)] transition-colors whitespace-nowrap">
              {l.label}
            </a>
          ))}
        </nav>

        <div className="hidden lg:flex items-center">
          <a href={ctaHref} className="btn-primary inline-flex items-center gap-1.5 rounded-full text-[13px] font-semibold px-4 py-2 whitespace-nowrap">
            {ctaLabel}
            <Ax.ArrowRight className="w-4 h-4" />
          </a>
        </div>

        <button
          className="lg:hidden w-10 h-10 rounded-md border border-[color:var(--line)] inline-flex items-center justify-center text-[color:var(--ink-700)]"
          onClick={() => setOpen(v => !v)}
          aria-label="Toggle menu"
        >
          {open ? <Ax.Close className="w-5 h-5" /> : <Ax.Menu className="w-5 h-5" />}
        </button>
      </div>

      {open && (
        <div className="lg:hidden border-t border-[color:var(--line)] bg-white">
          <div className="max-w-6xl mx-auto px-5 py-4 flex flex-col gap-1">
            {NAV_LINKS.map(l => (
              <a key={l.label} href={l.href} onClick={() => setOpen(false)} className="px-2 py-2.5 rounded-md text-[15px] font-medium text-[color:var(--ink-700)] hover:bg-[color:var(--bg-alt)]">
                {l.label}
              </a>
            ))}
            <a href={ctaHref} onClick={() => setOpen(false)} className="btn-primary mt-2 inline-flex items-center justify-center gap-1.5 rounded-full text-[14px] font-medium px-4 py-2.5">
              {ctaLabel}
              <Ax.ArrowRight className="w-4 h-4" />
            </a>
          </div>
        </div>
      )}
    </header>
  );
}

function Footer() {
  const cols = [
    {
      title: 'Services',
      links: [
        ['AxiomPOS', 'pos.html'],
        ['Axiom Marketing', 'marketing.html'],
        ['Axiom Website Design', 'websites.html'],
        ['AxiomOne bundle', 'pos.html#pricing'],
      ],
    },
    {
      title: 'Company',
      links: [
        ['About', 'index.html#about'],
        ['Contact', '#demo'],
        ['Partners', '#'],
        ['Status', '#'],
      ],
    },
    {
      title: 'Resources',
      links: [
        ['Help centre', '#'],
        ['POS onboarding', 'pos.html#how'],
        ['Marketing FAQ', 'marketing.html#faq'],
        ['Website FAQ', 'websites.html#faq'],
      ],
    },
    {
      title: 'Legal',
      links: [
        ['Privacy', 'privacy.html'],
        ['Terms', 'terms.html'],
        ['Acceptable use', 'acceptable-use.html'],
        ['POPIA', 'privacy.html'],
      ],
    },
  ];
  return (
    <footer className="border-t border-[color:var(--line)] mt-10" style={{ background: 'var(--bg-alt)' }}>
      <div className="max-w-6xl mx-auto px-5 sm:px-8 py-14">
        <div className="grid grid-cols-2 md:grid-cols-6 gap-10">
          <div className="col-span-2">
            <Wordmark suffix=" Digital Solutions" />
            <p className="mt-4 text-[14px] text-[color:var(--ink-500)] max-w-xs leading-relaxed">
              Axiom Digital Solutions — tools, marketing, and websites for South African shops.
            </p>
            <div className="mt-5 flex items-center gap-2">
              {['X', 'IG', 'FB', 'in'].map(n => (
                <a key={n} href="#" className="w-9 h-9 rounded-full border border-[color:var(--line)] inline-flex items-center justify-center text-[12px] font-semibold text-[color:var(--ink-500)] hover:text-[color:var(--ink)] hover:border-[color:var(--line-strong)] transition-colors bg-white">
                  {n}
                </a>
              ))}
            </div>
          </div>

          {cols.map(c => (
            <div key={c.title}>
              <div className="text-[12px] font-semibold uppercase tracking-wider text-[color:var(--ink-500)]">{c.title}</div>
              <ul className="mt-4 space-y-2.5">
                {c.links.map(([label, href]) => (
                  <li key={label}>
                    <a href={href} className="text-[14px] text-[color:var(--ink-700)] hover:text-[color:var(--brand)] transition-colors">{label}</a>
                  </li>
                ))}
              </ul>
            </div>
          ))}
        </div>

        <div className="mt-12 pt-6 border-t border-[color:var(--line)] flex flex-col sm:flex-row items-start sm:items-center justify-between gap-3 text-[12px] text-[color:var(--ink-500)]">
          <div>© 2026 Axiom Digital Solutions (Pty) Ltd. Made in South Africa.</div>
          <div className="flex items-center gap-4">
            <span className="inline-flex items-center gap-1.5">
              <span className="w-1.5 h-1.5 rounded-full bg-emerald-500" />
              All systems operational
            </span>
          </div>
        </div>
      </div>
    </footer>
  );
}

/* AxiomOne flagship callout — light theme version. Amber solid card. */
function AxiomOneCallout() {
  return (
    <section className="py-20 sm:py-24">
      <div className="max-w-6xl mx-auto px-5 sm:px-8">
        <Reveal variant="up">
          <div className="relative rounded-3xl p-8 sm:p-12 overflow-hidden card-hover" style={{ background: 'linear-gradient(135deg, #D97706 0%, #B45309 100%)', boxShadow: '0 24px 60px rgba(217,119,6,0.30)' }}>
            <div className="absolute inset-0 pointer-events-none" aria-hidden="true" style={{ background: 'radial-gradient(60% 60% at 100% 0%, rgba(255,255,255,0.20), transparent 60%), radial-gradient(50% 50% at 0% 100%, rgba(0,0,0,0.18), transparent 60%)' }} />
            <div className="relative grid lg:grid-cols-12 gap-8 items-center">
              <div className="lg:col-span-7 text-white">
                <span className="inline-flex items-center gap-1 px-3 py-1 rounded-full text-[11px] font-semibold uppercase tracking-wider bg-white text-[color:var(--brand-hover)]">
                  <Ax.Star className="w-3 h-3" strokeWidth={2.4} />
                  Flagship bundle
                </span>
                <h2 className="mt-4 text-[32px] sm:text-[40px] font-semibold tracking-[-0.02em] leading-[1.08] text-balance">
                  Want it all? Meet AxiomOne.
                </h2>
                <p className="mt-4 text-[16px] sm:text-[17px] text-white/85 leading-relaxed max-w-xl">
                  AxiomPOS Plus + unlimited WhatsApp + a managed shop website. Everything you need to run and grow your shop, except the ads — for one flat monthly price.
                </p>
                <div className="mt-6 flex flex-wrap items-center gap-4">
                  <a href="pos.html#pricing" className="inline-flex items-center gap-1.5 rounded-full text-[14px] font-semibold px-5 py-3 bg-white text-[color:var(--brand-hover)] hover:bg-[color:var(--bg-alt)] transition-colors">
                    See AxiomOne
                    <Ax.ArrowRight className="w-4 h-4" />
                  </a>
                  <span className="font-mono text-[16px] text-white/90">
                    from <strong className="text-white font-semibold">R 1,099</strong> / month
                  </span>
                </div>
              </div>

              <div className="lg:col-span-5">
                <ul className="space-y-3">
                  {[
                    'Full AxiomPOS till',
                    'Unlimited WhatsApp messages',
                    'Managed business website',
                    'Hosting + domain included',
                    'Priority onboarding & support',
                  ].map(line => (
                    <li key={line} className="flex items-center gap-3 text-[15px] text-white">
                      <span className="inline-flex items-center justify-center w-6 h-6 rounded-full shrink-0 bg-white/20">
                        <Ax.Check className="w-3.5 h-3.5" strokeWidth={3} />
                      </span>
                      {line}
                    </li>
                  ))}
                </ul>
              </div>
            </div>
          </div>
        </Reveal>
      </div>
    </section>
  );
}

Object.assign(window, { Wordmark, Navbar, Footer, AxiomOneCallout });