import Link from 'next/link'
import Image from 'next/image'
import BrandName from '@/app/BrandName'

const NAV_LINKS = [
  { href: '/about', label: 'About' },
  { href: '/company', label: 'Company' },
  { href: '/contact', label: 'Contact' },
]

const LINKEDIN_URL = 'https://www.linkedin.com/company/quality-intelligence'

export default function MarketingLayout({ children }: { children: React.ReactNode }) {
  return (
    <>
      {/* Marketing header */}
      <header className="sticky top-0 z-40 border-b border-zinc-200 bg-white/95 backdrop-blur dark:border-zinc-800 dark:bg-zinc-950/95">
        <div className="mx-auto flex max-w-6xl items-center justify-between px-6 py-4">
          <Link href="/" className="flex items-center gap-2.5 text-sm font-semibold text-zinc-950 dark:text-white">
            <Image src="/brand/qi-mark.png" alt="Ask QIEN" width={28} height={28} className="h-7 w-7 rounded-md" priority />
            <BrandName />
          </Link>

          <nav className="hidden items-center gap-1 sm:flex">
            {NAV_LINKS.map(({ href, label }) => (
              <Link
                key={href}
                href={href}
                className="rounded-md px-3 py-1.5 text-sm text-zinc-500 transition hover:bg-zinc-100 hover:text-zinc-950 dark:text-zinc-400 dark:hover:bg-zinc-800 dark:hover:text-white"
              >
                {label}
              </Link>
            ))}
          </nav>

          <Link
            href="/login"
            className="inline-flex h-11 items-center rounded-xl border border-zinc-300 bg-white px-4 text-sm font-semibold text-zinc-800 shadow-sm transition hover:bg-zinc-50 dark:border-zinc-700 dark:bg-zinc-900 dark:text-zinc-100 dark:hover:bg-zinc-800"
          >
            Sign in
          </Link>
        </div>
      </header>

      <main className="flex-1">
        {children}
      </main>

      {/* Footer */}
      <footer className="border-t border-zinc-200 bg-white dark:border-zinc-800 dark:bg-zinc-950">
        <div className="mx-auto max-w-6xl px-6 py-12">
          <div className="flex flex-col gap-8 sm:flex-row sm:justify-between">
            <div>
              <Link href="/" className="flex items-center gap-2.5 text-sm font-semibold text-zinc-950 dark:text-white">
                <Image src="/brand/qi-mark.png" alt="Ask QIEN" width={24} height={24} className="h-6 w-6 rounded-md" />
                <BrandName />
              </Link>
              <p className="mt-2 text-xs text-zinc-500 dark:text-zinc-400">
                AI-augmented expert support for regulated manufacturing.
              </p>
              <a
                href={LINKEDIN_URL}
                target="_blank"
                rel="noopener noreferrer"
                className="mt-3 inline-flex items-center gap-1.5 text-xs text-zinc-500 hover:text-zinc-950 dark:text-zinc-400 dark:hover:text-zinc-100 transition"
              >
                <LinkedInIcon className="h-3.5 w-3.5" />
                LinkedIn
              </a>
            </div>

            <div className="grid grid-cols-2 gap-x-12 gap-y-4 text-sm sm:grid-cols-3">
              <div className="space-y-2">
                <p className="text-xs font-semibold uppercase tracking-wide text-zinc-400 dark:text-zinc-500">Product</p>
                <Link href="/about" className="block text-zinc-600 hover:text-zinc-950 dark:text-zinc-400 dark:hover:text-white">About</Link>
                <Link href="/contact" className="block text-zinc-600 hover:text-zinc-950 dark:text-zinc-400 dark:hover:text-white">Request access</Link>
              </div>
              <div className="space-y-2">
                <p className="text-xs font-semibold uppercase tracking-wide text-zinc-400 dark:text-zinc-500">Company</p>
                <Link href="/company" className="block text-zinc-600 hover:text-zinc-950 dark:text-zinc-400 dark:hover:text-white">Who we are</Link>
                <a
                  href={LINKEDIN_URL}
                  target="_blank"
                  rel="noopener noreferrer"
                  className="block text-zinc-600 hover:text-zinc-950 dark:text-zinc-400 dark:hover:text-white"
                >
                  LinkedIn
                </a>
              </div>
              <div className="space-y-2">
                <p className="text-xs font-semibold uppercase tracking-wide text-zinc-400 dark:text-zinc-500">Account</p>
                <Link href="/login" className="block text-zinc-600 hover:text-zinc-950 dark:text-zinc-400 dark:hover:text-white">Sign in</Link>
                <Link href="/contact" className="block text-zinc-600 hover:text-zinc-950 dark:text-zinc-400 dark:hover:text-white">Contact us</Link>
              </div>
            </div>
          </div>

          <div className="mt-10 border-t border-zinc-100 pt-6 dark:border-zinc-800">
            <p className="text-xs text-zinc-400 dark:text-zinc-600">
              © {new Date().getFullYear()} Quality Intelligence Ltd. All rights reserved.
            </p>
          </div>
        </div>
      </footer>
    </>
  )
}

function LinkedInIcon({ className }: { className?: string }) {
  return (
    <svg className={className} viewBox="0 0 24 24" fill="currentColor" aria-hidden="true">
      <path d="M20.447 20.452h-3.554v-5.569c0-1.328-.027-3.037-1.852-3.037-1.853 0-2.136 1.445-2.136 2.939v5.667H9.351V9h3.414v1.561h.046c.477-.9 1.637-1.85 3.37-1.85 3.601 0 4.267 2.37 4.267 5.455v6.286zM5.337 7.433a2.062 2.062 0 01-2.063-2.065 2.064 2.064 0 112.063 2.065zm1.782 13.019H3.555V9h3.564v11.452zM22.225 0H1.771C.792 0 0 .774 0 1.729v20.542C0 23.227.792 24 1.771 24h20.451C23.2 24 24 23.227 24 22.271V1.729C24 .774 23.2 0 22.222 0h.003z" />
    </svg>
  )
}