'use client'

import { useState, useEffect } from 'react'
import Link from 'next/link'
import { Menu, X, ShoppingCart, Phone, MapPin, Mail, MessageCircle, Sun, Moon } from 'lucide-react'
import { cn } from '@/lib/utils'
import { useCart } from '@/lib/cart'
import type { StoreTemplate } from '@/lib/storefront/templates'
import { LogoMark } from './nav-shared'

export interface NavItem {
  label: string
  href: string
}

interface StorefrontNavProps {
  template: StoreTemplate
  businessName: string
  businessSlug: string
  logoUrl: string | null
  navItems: NavItem[]
  phone?: string | null
  hours?: string | null
  whatsapp?: string | null
  email?: string | null
  address?: string | null
}

export function StorefrontNav({ template, businessName, businessSlug, logoUrl, navItems, phone, hours, whatsapp, email, address }: StorefrontNavProps) {
  const [open, setOpen] = useState(false)
  const [scrolled, setScrolled] = useState(false)
  const { itemCount } = useCart()
  const h = template.tokens.header
  const navStyle = template.tokens.navStyle
  const r = template.tokens.radius === 'none' ? 'rounded-none' : template.tokens.radius === 'pill' ? 'rounded-full' : `rounded-${template.tokens.radius}`

  useEffect(() => {
    const handleScroll = () => setScrolled(window.scrollY > 20)
    window.addEventListener('scroll', handleScroll, { passive: true })
    return () => window.removeEventListener('scroll', handleScroll)
  }, [])

  const linkCls = 'text-sm font-medium transition-colors hover:opacity-70'
  const upperCls = template.tokens.uppercaseHeadings ? 'uppercase tracking-widest text-xs' : ''

  const desktopLinks = (
    <nav className="hidden md:flex items-center gap-1 md:gap-6" aria-label="Main navigation">
      {navItems.map((item) => (
        <a key={item.label} href={item.href} className={cn(linkCls, upperCls, 'relative py-2')}>
          {item.label}
          <span className="absolute bottom-0 left-0 right-0 h-[2px] scale-x-0 origin-center transition-transform duration-300 group-hover:scale-x-100" style={{ background: 'var(--store-primary)' }} />
        </a>
      ))}
    </nav>
  )

  const cartBtn = (
    <Link
      href={`/shop/${businessSlug}/cart`}
      aria-label={`Shopping cart (${itemCount} items)`}
      className="relative p-2 rounded-full hover:opacity-70 transition-all duration-200"
    >
      <ShoppingCart className="h-5 w-5" />
      {itemCount > 0 && (
        <span
          className="absolute -top-1 -right-1 flex h-5 min-w-5 items-center justify-center rounded-full px-1 text-[10px] font-bold animate-pop"
          style={{ backgroundColor: 'var(--store-accent)', color: '#fff' }}
        >
          {itemCount > 99 ? '99+' : itemCount}
        </span>
      )}
    </Link>
  )

  const contactActions = (
    <div className="hidden md:flex items-center gap-2 ml-4">
      {phone && (
        <a href={`tel:${phone.replace(/\s+/g, '')}`} className="inline-flex items-center gap-1.5 px-3 py-1.5 text-xs font-medium rounded-full transition-all" style={{ background: 'var(--store-primary)', color: 'var(--store-on-primary)' }}>
          <Phone className="h-3.5 w-3.5" /> {phone}
        </a>
      )}
      {whatsapp && (
        <a href={`https://wa.me/${whatsapp.replace(/\s+/g, '')}`} target="_blank" rel="noopener noreferrer" className="inline-flex items-center gap-1.5 px-3 py-1.5 text-xs font-medium rounded-full transition-all" style={{ background: '#25D366', color: '#fff' }}>
          <MessageCircle className="h-3.5 w-3.5" />
        </a>
      )}
    </div>
  )

  const logo = (
    <Link href="#" className="flex items-center gap-2.5 min-w-0" aria-label={businessName}>
      <LogoMark logoUrl={logoUrl} name={businessName} size="lg" />
      <span className={cn('font-bold truncate max-w-[40vw] sm:max-w-none', template.tokens.headingFont === 'serif' ? 'store-heading-serif' : '')}>
        {businessName}
      </span>
    </Link>
  )

  // NAV STYLES

  // Luxury — ultra-minimal fixed centered tracked-out (must be before minimal check)
  if (template.id === 'luxury') {
    return (
      <>
        <header className={`fixed top-0 z-50 w-full border-b transition-all duration-300 ${scrolled ? 'bg-[var(--store-background)]/95 backdrop-blur-md' : 'bg-transparent'}`} style={{ borderColor: 'var(--store-border)', borderWidth: scrolled ? 1 : 0 }}>
          <div className="mx-auto flex w-full max-w-7xl items-center justify-between gap-4 px-4 sm:px-6 lg:px-8 py-4">
            <button className="text-xs tracking-[0.2em] uppercase font-medium hover:opacity-70" onClick={() => setOpen(true)} aria-label="Open menu">MENU</button>
            <Link href="#" className="absolute left-1/2 -translate-x-1/2 flex items-center gap-2" aria-label={businessName}>
              <span className="font-serif font-bold tracking-[0.15em] text-sm md:text-base store-heading-serif" style={{ color: 'var(--store-text)' }}>{businessName.toUpperCase()}</span>
            </Link>
            <Link href={`/shop/${businessSlug}/cart`} className="text-xs tracking-[0.2em] uppercase hover:opacity-70" aria-label={`Shopping bag ${itemCount} items`}>BAG [{itemCount}]</Link>
          </div>
        </header>
        {open && <MobileDrawer />}
      </>
    )
  }

  // African Premium — editorial floating with gold top line, centered serif
  if (template.id === 'african-premium') {
    return (
      <>
        <div className="h-[3px] w-full" style={{ background: 'linear-gradient(90deg, var(--store-accent), var(--store-primary))' }} aria-hidden />
        <header className={`sticky top-0 z-50 w-full border-b transition-all duration-300 ${scrolled ? 'shadow-sm' : ''}`} style={{ backgroundColor: scrolled ? 'var(--store-background)' : 'var(--store-background)', borderColor: 'var(--store-border)' }}>
          <div className="mx-auto flex w-full max-w-7xl items-center justify-between gap-4 px-4 sm:px-6 lg:px-8 py-4">
            <div className="hidden md:flex items-center gap-6 text-xs font-medium tracking-widest uppercase" style={{ color: 'var(--store-text)' }}>
              <button className="inline-flex items-center gap-2 hover:opacity-70" onClick={() => setOpen(true)} aria-label="Open menu"><Menu className="h-4 w-4" /> Menu</button>
              <button className="hover:opacity-70" onClick={() => setOpen(true)} aria-label="Search">Search</button>
            </div>
            <div className="md:hidden"><button onClick={() => setOpen(true)} aria-label="Open menu" className="p-2"><Menu className="h-6 w-6" /></button></div>
            <Link href="#" className="flex items-center gap-3 absolute left-1/2 -translate-x-1/2 md:static md:translate-x-0" aria-label={businessName}>
              <LogoMark logoUrl={logoUrl} name={businessName} size="lg" />
              <span className="font-serif font-bold text-lg md:text-xl tracking-tight store-heading-serif hidden sm:inline">{businessName}</span>
            </Link>
            <div className="flex items-center gap-4">
              <span className="hidden md:inline text-xs tracking-widest uppercase opacity-60">Wishlist (0)</span>
              <Link href={`/shop/${businessSlug}/cart`} className="hidden md:inline text-xs font-medium tracking-widest uppercase hover:opacity-70">Cart ({itemCount})</Link>
              <span className="md:hidden">{cartBtn}</span>
              <button className="hidden md:block p-2" onClick={() => setOpen(true)} aria-label="Open menu"><Menu className="h-5 w-5" /></button>
            </div>
          </div>
        </header>
        {open && <MobileDrawer />}
      </>
    )
  }
  
  // FLOATING: Luxury, Startup, Signature, Mobile-first, Beauty — each gets bespoke
  if (navStyle === 'floating' || h === 'floating') {
    const isSignature = template.id === 'signature-premium'
    if (isSignature) {
      return (
        <>
          <header className="sticky top-0 z-40 w-full flex justify-center pt-4 px-4" style={{ zIndex: 50 }}>
            <div className="flex items-center gap-6 px-6 py-3 rounded-full border backdrop-blur-md transition-all duration-300" style={{ backgroundColor: 'color-mix(in srgb, var(--store-background) 85%, transparent)', borderColor: 'color-mix(in srgb, var(--store-text) 10%, transparent)', boxShadow: scrolled ? '0 10px 40px rgba(0,0,0,0.12)' : '0 4px 20px rgba(0,0,0,0.06)' }}>
              <nav className="hidden lg:flex items-center gap-5 text-xs font-medium tracking-wide" style={{ color: 'var(--store-text)' }}>
                <a href="#categories" className="hover:opacity-70">Collection</a>
                <a href="#story" className="hover:opacity-70">Craftsmanship</a>
                <a href="#about" className="hover:opacity-70 hidden xl:inline">Brand Vision</a>
              </nav>
              <Link href="#" className="flex items-center gap-2 px-2" aria-label={businessName}>
                <span className="font-serif font-bold tracking-[0.12em] text-sm store-heading-serif" style={{ color: 'var(--store-text)' }}>{businessName.toUpperCase().slice(0, 4)}</span>
                <span className="hidden sm:inline font-serif text-sm tracking-tight" style={{ color: 'var(--store-text)' }}>{businessName}</span>
              </Link>
              <div className="flex items-center gap-3">
                <a href="#contact" className="hidden md:inline text-xs hover:opacity-70" style={{ color: 'var(--store-text)' }}>Private Client Concierge</a>
                <span className="hidden md:inline text-xs opacity-40">RWF ▾</span>
                <Link href={`/shop/${businessSlug}/cart`} className="inline-flex items-center gap-1.5 px-3 py-1.5 rounded-full text-xs font-bold" style={{ backgroundColor: 'var(--store-primary)', color: '#fff' }}>BAG [{itemCount}]</Link>
                <button className="lg:hidden p-1.5 rounded-full" onClick={() => setOpen(true)} aria-label="Open menu"><Menu className="h-5 w-5" /></button>
              </div>
            </div>
          </header>
          {open && <MobileDrawer />}
        </>
      )
    }
    const isBeauty = template.id === 'beauty-wellness'
    if (isBeauty) {
      return (
        <>
          <header className="sticky top-0 z-50 w-full border-b backdrop-blur-md" style={{ backgroundColor: 'color-mix(in srgb, #FFF1F2 70%, transparent)', borderColor: '#FFE4E6', backdropFilter: 'blur(12px)', WebkitBackdropFilter: 'blur(12px)' }}>
            <div className="mx-auto flex w-full max-w-7xl items-center justify-between gap-4 px-4 sm:px-6 lg:px-8 py-3">
              <Link href="#" className="flex items-center gap-2 shrink-0" aria-label={businessName}>
                <LogoMark logoUrl={logoUrl} name={businessName} size="lg" />
                <span className="font-serif font-bold text-lg tracking-tight store-heading-serif hidden sm:inline" style={{ color: '#4C0519' }}>{businessName}</span>
              </Link>
              <nav className="hidden lg:flex items-center gap-6 text-sm font-medium" style={{ color: '#4C0519' }}>
                <a href="#products" className="hover:opacity-70">Skincare</a>
                <a href="#categories" className="hover:opacity-70">Wellness</a>
                <a href="#story" className="hover:opacity-70">Ingredients</a>
                <a href="#contact" className="hover:opacity-70">Routine Finder</a>
              </nav>
              <div className="flex items-center gap-2">
                <a href="#story" className="hidden md:inline text-xs font-medium hover:opacity-70 mr-1" style={{ color: '#4C0519' }}>Find Your Routine</a>
                <Link href={`/shop/${businessSlug}/cart`} className="inline-flex items-center gap-1.5 px-3 py-1.5 rounded-full text-xs font-bold shadow-sm" style={{ backgroundColor: '#9F1239', color: '#fff' }}>GLOW CART ({itemCount})</Link>
                <button className="lg:hidden p-2 -mr-2" onClick={() => setOpen(true)} aria-label="Open menu"><Menu className="h-6 w-6" style={{ color: '#4C0519' }} /></button>
              </div>
            </div>
          </header>
          {open && <MobileDrawer />}
        </>
      )
    }
    const barBg = scrolled ? 'var(--store-background)' : 'transparent'
    const barShadow = scrolled ? '0 10px 40px rgba(0,0,0,0.15)' : 'none'
    
    return (
      <>
        <header className="sticky top-0 z-50 w-full" style={{ zIndex: 50 }}>
          <div className="mt-4 mx-auto max-w-6xl px-4 transition-all duration-300" style={{ backgroundColor: barBg, boxShadow: barShadow, borderRadius: 999 }}>
            <div className="flex items-center justify-between gap-4 px-5 py-3">
              {logo}
              <div className="flex items-center gap-2 md:gap-4">
                {desktopLinks}
                {cartBtn}
                <button
                  className="md:hidden p-2 rounded-full"
                  onClick={() => setOpen(true)}
                  aria-expanded={open}
                  aria-label="Open menu"
                >
                  <Menu className="h-6 w-6" />
                </button>
              </div>
            </div>
          </div>
        </header>
        {open && <MobileDrawer />}
      </>
    )
  }

  // MINIMAL: African Premium, Luxury, Fashion, Beauty, Storytelling, Coffee — Fashion gets announcement bar
  if (navStyle === 'minimal' || h === 'minimal') {
    const isFashion = template.id === 'fashion-boutique'
    if (isFashion) {
      return (
        <>
          <div className="w-full text-center py-2 text-xs tracking-[0.15em] uppercase font-medium" style={{ backgroundColor: 'var(--store-primary)', color: '#fff' }}>
            COMPLIMENTARY EXPRESS SHIPPING ON ORDERS OVER $150
          </div>
          <header className={`sticky top-0 z-50 w-full border-b bg-white/95 backdrop-blur-md`} style={{ borderColor: 'var(--store-border)', backgroundColor: 'rgba(255,255,255,0.95)' }}>
            <div className="mx-auto flex w-full max-w-7xl items-center justify-between gap-4 px-4 sm:px-6 lg:px-8 py-3">
              <nav className="hidden lg:flex items-center gap-6 text-xs font-medium tracking-wide" style={{ color: '#09090B' }}>
                <a href="#products" className="hover:opacity-70">New Arrivals</a>
                <a href="#categories" className="hover:opacity-70">Clothing</a>
                <a href="#products" className="hover:opacity-70">Accessories</a>
                <a href="#story" className="hover:opacity-70">Lookbook</a>
              </nav>
              <button className="lg:hidden p-2" onClick={() => setOpen(true)} aria-label="Open menu"><Menu className="h-6 w-6" /></button>
              <Link href="#" className="flex items-center gap-2 absolute left-1/2 -translate-x-1/2 lg:static lg:translate-x-0" aria-label={businessName}>
                <span className="font-serif font-black tracking-tight text-lg store-heading-serif" style={{ color: '#09090B' }}>{businessName.toUpperCase()}</span>
              </Link>
              <div className="flex items-center gap-3">
                <span className="hidden md:inline-flex items-center gap-1.5 text-xs">
                  <span>♡</span><span className="hidden lg:inline">Wishlist</span>
                </span>
                <Link href={`/shop/${businessSlug}/cart`} className="inline-flex items-center gap-1.5 px-3 py-1.5 rounded-full text-xs font-bold bg-black text-white">BAG [{itemCount}]</Link>
                <span className="hidden md:inline">{cartBtn}</span>
              </div>
            </div>
          </header>
          {open && <MobileDrawer />}
        </>
      )
    }
    const barBg = scrolled ? 'rgba(var(--store-background-rgb), 0.95)' : 'transparent'
    const barBlur = scrolled ? 'backdrop-blur-md' : ''
    
    return (
      <>
        <header className={`sticky top-0 z-50 w-full transition-all duration-300 ${barBlur}`} style={{ backgroundColor: barBg }}>
          <div className="flex items-center justify-between gap-4 px-4 py-4 md:px-8 max-w-7xl mx-auto">
            {logo}
            <div className="flex items-center gap-2">
              {desktopLinks}
              {cartBtn}
              <button
                className="md:hidden p-2 rounded-full"
                onClick={() => setOpen(true)}
                aria-expanded={open}
                aria-label="Open menu"
              >
                <Menu className="h-6 w-6" />
              </button>
            </div>
          </div>
        </header>
        {open && <MobileDrawer />}
      </>
    )
  }

  // CENTERED: Fashion, Mobile-first (alternative) — Luxury & Coffee get bespoke
  if (navStyle === 'centered') {
    const isLuxury = template.id === 'luxury'
    if (isLuxury) {
      return (
        <>
          <header className={`fixed top-0 z-50 w-full border-b transition-all duration-300 ${scrolled ? 'bg-[var(--store-background)]/95 backdrop-blur-md' : 'bg-transparent'}`} style={{ borderColor: 'var(--store-border)', borderWidth: scrolled ? 1 : 0 }}>
            <div className="mx-auto flex w-full max-w-7xl items-center justify-between gap-4 px-4 sm:px-6 lg:px-8 py-4">
              <button className="text-xs tracking-[0.2em] uppercase font-medium hover:opacity-70" onClick={() => setOpen(true)} aria-label="Open menu">MENU</button>
              <Link href="#" className="absolute left-1/2 -translate-x-1/2 flex items-center gap-2" aria-label={businessName}>
                <span className="font-serif font-bold tracking-[0.15em] text-sm md:text-base store-heading-serif" style={{ color: 'var(--store-text)' }}>{businessName.toUpperCase()}</span>
              </Link>
            <Link href={`/shop/${businessSlug}/cart`} className="text-xs tracking-[0.2em] uppercase hover:opacity-70" aria-label={`Shopping bag ${itemCount} items`}>BAG [{itemCount}]</Link>
            </div>
          </header>
          {open && <MobileDrawer />}
        </>
      )
    }
    const isCoffee = template.id === 'coffee-food'
    if (isCoffee) {
      return (
        <>
          <header className={`sticky top-0 z-50 w-full border-b shadow-sm`} style={{ backgroundColor: 'var(--store-background)', borderColor: 'var(--store-border)', boxShadow: '0 1px 10px rgba(0,0,0,0.04)' }}>
            <div className="mx-auto flex w-full max-w-7xl items-center justify-between gap-4 px-4 sm:px-6 lg:px-8 py-3">
              <nav className="hidden md:flex items-center gap-6 text-sm font-medium" style={{ color: 'var(--store-text)' }}>
                <a href="#products" className="hover:opacity-70">Menu</a>
                <a href="#categories" className="hover:opacity-70">Beans</a>
                <a href="#story" className="hover:opacity-70">Our Story</a>
              </nav>
              <button className="md:hidden p-2" onClick={() => setOpen(true)} aria-label="Open menu"><Menu className="h-6 w-6" /></button>
              <Link href="#" className="flex items-center gap-2 absolute left-1/2 -translate-x-1/2 md:static md:translate-x-0" aria-label={businessName}>
                <LogoMark logoUrl={logoUrl} name={businessName} size="lg" />
                <span className="font-serif font-bold text-lg tracking-tight store-heading-serif hidden sm:inline" style={{ color: 'var(--store-text)' }}>{businessName}</span>
              </Link>
              <div className="flex items-center gap-3">
                <a href="#products" className="hidden md:inline text-xs font-medium hover:opacity-70" style={{ color: 'var(--store-text)' }}>Subscriptions</a>
                <Link href={`/shop/${businessSlug}/cart`} className="inline-flex items-center gap-1.5 px-3 py-1.5 rounded-full text-xs font-bold" style={{ backgroundColor: 'var(--store-accent)', color: '#fff' }}>BAG ({itemCount})</Link>
                <span className="hidden md:inline">{cartBtn}</span>
              </div>
            </div>
          </header>
          {open && <MobileDrawer />}
        </>
      )
    }
    const barBg = scrolled ? 'var(--store-background)' : 'transparent'
    
    return (
      <>
        <header className={`sticky top-0 z-50 w-full border-b transition-all duration-300`} style={{ backgroundColor: barBg, borderColor: 'var(--store-border)' }}>
          <div className="flex flex-col md:flex-row items-center justify-center gap-4 px-4 py-4 max-w-7xl mx-auto">
            <div className="w-full md:w-auto flex justify-center">{logo}</div>
            <div className="w-full md:w-auto flex justify-center">{desktopLinks}</div>
            <div className="w-full md:w-auto flex justify-center gap-2">{cartBtn}{contactActions}</div>
          </div>
        </header>
        {open && <MobileDrawer />}
      </>
    )
  }

  // SPLIT: Tech, Construction, Professional
  if (navStyle === 'split') {
    const barBg = scrolled ? 'var(--store-background)' : 'transparent'
    
    return (
      <>
        <header className={`sticky top-0 z-50 w-full border-b transition-all duration-300`} style={{ backgroundColor: barBg, borderColor: 'var(--store-border)' }}>
          <div className="mx-auto flex w-full max-w-7xl flex-col md:flex-row items-center justify-between gap-4 px-4 sm:px-6 lg:px-8 py-3">
            <div className="w-full md:w-auto">{logo}</div>
            <div className="w-full md:w-auto flex justify-center">{desktopLinks}</div>
            <div className="w-full md:w-auto flex justify-end gap-2">{cartBtn}{contactActions}</div>
          </div>
        </header>
        {open && <MobileDrawer />}
      </>
    )
  }

  // TOPBAR: Tech, Construction, Marketplace, Bold — Tech, Local & Restaurant get bespoke
  if (h === 'topbar') {
    const isTech = template.id === 'tech-store'
    const isRestaurant = template.id === 'construction-industrial'
    const isLocal = template.id === 'local-market'
    if (isRestaurant) {
      return (
        <>
          <div className="w-full px-4 sm:px-6 lg:px-8 py-1.5 text-center text-xs font-medium tracking-wide" style={{ backgroundColor: '#F59E0B', color: '#18181B' }}>
            LIVE MUSIC &amp; SPECIAL TASTING MENU THIS FRIDAY — Reserve Your Table
          </div>
          <header className="sticky top-0 z-50 w-full border-b backdrop-blur-xl" style={{ backgroundColor: 'color-mix(in srgb, var(--store-background) 92%, transparent)', borderColor: 'var(--store-border)' }}>
            <div className="mx-auto flex w-full max-w-7xl items-center justify-between gap-4 px-4 sm:px-6 lg:px-8 py-3">
              <Link href="#" className="flex items-center gap-2 shrink-0" aria-label={businessName}>
                <LogoMark logoUrl={logoUrl} name={businessName} size="lg" />
                <span className="font-serif font-bold hidden sm:inline" style={{ color: 'var(--store-text)' }}>{businessName}</span>
              </Link>
              <nav className="hidden lg:flex items-center gap-6 text-sm font-medium" style={{ color: 'var(--store-text)' }}>
                <a href="#products" className="hover:opacity-70">Full Menu</a>
                <a href="#contact" className="hover:opacity-70">Reservations</a>
                <a href="#story" className="hover:opacity-70">Our Kitchen</a>
                <a href="#contact" className="hover:opacity-70">Location</a>
              </nav>
              <div className="flex items-center gap-2">
                <a href="#contact" className="hidden md:inline-flex items-center gap-1.5 px-3 py-1.5 rounded-full text-xs font-medium border" style={{ borderColor: 'var(--store-border)', color: 'var(--store-text)' }}>Table Reservation</a>
                <Link href={`/shop/${businessSlug}/cart`} className="inline-flex items-center gap-1.5 px-3 py-1.5 rounded-full text-xs font-bold whitespace-nowrap" style={{ backgroundColor: 'var(--store-primary)', color: '#fff' }}>ORDER NOW ({itemCount})</Link>
                <button className="lg:hidden p-2 -mr-2" onClick={() => setOpen(true)} aria-label="Open menu"><Menu className="h-6 w-6" /></button>
              </div>
            </div>
          </header>
          {open && <MobileDrawer />}
        </>
      )
    }
    if (isTech) {
      return (
        <>
          <div className="w-full px-4 sm:px-6 lg:px-8 py-1.5 border-b" style={{ backgroundColor: 'color-mix(in srgb, var(--store-background) 80%, transparent)', backdropFilter: 'blur(12px)', WebkitBackdropFilter: 'blur(12px)', borderColor: 'var(--store-primary)', borderBottomWidth: 1, boxShadow: '0 0 20px color-mix(in srgb, var(--store-primary) 20%, transparent)' }}>
            <div className="mx-auto flex w-full max-w-7xl items-center justify-between gap-4 text-xs">
              <div className="flex items-center gap-3">
                {phone && <span className="inline-flex items-center gap-1.5 font-mono"><span className="w-2 h-2 rounded-full bg-green-500 animate-pulse" /> SYSTEM ONLINE</span>}
                {!phone && <span className="inline-flex items-center gap-1.5 font-mono"><span className="w-2 h-2 rounded-full bg-green-500 animate-pulse" /> SYSTEM ONLINE</span>}
              </div>
              <div className="hidden md:flex items-center gap-4 font-mono text-xs opacity-70">
                <span>HW-STATUS: OK</span>
                <span className="hidden lg:inline">UPTIME: 99.9%</span>
              </div>
              <div className="flex items-center gap-2">
                <span className="hidden sm:inline-flex items-center gap-1.5 px-2.5 py-1 rounded bg-[#1E293B] border border-[#1E293B] font-mono text-[11px]">⌘K</span>
                <span className="text-xs opacity-60 hidden sm:inline">{hours || '24/7 DISPATCH'}</span>
              </div>
            </div>
          </div>
          <header className={`sticky top-0 z-50 w-full border-b backdrop-blur-xl transition-all duration-300 ${scrolled ? 'shadow-lg' : ''}`} style={{ backgroundColor: 'color-mix(in srgb, var(--store-background) 85%, transparent)', borderColor: 'var(--store-border)', boxShadow: scrolled ? '0 4px 30px rgba(0,0,0,0.3)' : 'none' }}>
            <div className="mx-auto flex w-full max-w-7xl items-center justify-between gap-4 px-4 sm:px-6 lg:px-8 py-3">
              <Link href="#" className="flex items-center gap-2.5 min-w-0" aria-label={businessName}>
                <span className="w-2 h-2 rounded-full animate-pulse" style={{ backgroundColor: 'var(--store-primary)', boxShadow: '0 0 8px var(--store-primary)' }} />
                <LogoMark logoUrl={logoUrl} name={businessName} size="lg" />
                <span className="font-mono font-bold tracking-widest text-sm hidden sm:inline" style={{ color: 'var(--store-text)' }}>{businessName.toUpperCase()}<span className="opacity-40 ml-1">_v2.1</span></span>
              </Link>
              <div className="hidden md:flex items-center gap-6">{desktopLinks}</div>
              <div className="flex items-center gap-2">
                <span className="hidden md:inline-flex items-center gap-1.5 px-3 py-1.5 rounded-full text-xs font-bold font-mono" style={{ backgroundColor: 'var(--store-primary)', color: '#000' }}>CART [{itemCount}]</span>
                <span className="md:hidden">{cartBtn}</span>
                <button className="md:hidden p-2 rounded-full" onClick={() => setOpen(true)} aria-label="Open menu"><Menu className="h-6 w-6" /></button>
              </div>
            </div>
          </header>
          {open && <MobileDrawer />}
        </>
      )
    }
    if (isLocal) {
      return (
        <>
          <div className="w-full px-4 sm:px-6 lg:px-8 py-1.5 text-xs font-medium" style={{ backgroundColor: '#F59E0B', color: '#0F172A' }}>
            <div className="mx-auto flex w-full max-w-7xl items-center justify-between gap-4">
              <span>📍 Delivering to: Kigali & Nearby</span>
              <span className="hidden md:inline opacity-70">Kinyarwanda | RWF • Help</span>
            </div>
          </div>
          <header className={`sticky top-0 z-50 w-full border-b bg-white shadow-sm`} style={{ borderColor: '#E2E8F0' }}>
            <div className="mx-auto flex w-full max-w-7xl items-center gap-3 px-4 sm:px-6 lg:px-8 py-3">
              <Link href="#" className="flex items-center gap-2 shrink-0" aria-label={businessName}>
                <LogoMark logoUrl={logoUrl} name={businessName} size="lg" />
                <span className="font-bold hidden sm:inline" style={{ color: '#0F172A' }}>{businessName}</span>
              </Link>
              <div className="hidden md:flex flex-1 max-w-xl mx-4">
                <div className="flex w-full rounded-full overflow-hidden border" style={{ borderColor: '#E2E8F0', backgroundColor: '#F8FAFC' }}>
                  <select className="hidden lg:block px-3 text-xs font-medium border-r bg-transparent" style={{ borderColor: '#E2E8F0' }}><option>All</option></select>
                  <input placeholder="Search fresh produce, crafts..." className="flex-1 px-4 py-2 text-sm bg-transparent outline-none" />
                  <button className="px-4" style={{ backgroundColor: 'var(--store-primary)', color: '#fff' }}>🔍</button>
                </div>
              </div>
              <div className="flex items-center gap-2 shrink-0">
                <a href="#products" className="hidden md:inline text-xs font-medium hover:opacity-70">Vendor Login</a>
                <Link href={`/shop/${businessSlug}/cart`} className="relative inline-flex items-center gap-2 px-3 py-2 rounded-full text-xs font-bold text-white" style={{ backgroundColor: 'var(--store-primary)' }}>
                  <ShoppingCart className="h-4 w-4" /> Cart <span className="bg-white text-xs px-1.5 py-0.5 rounded-full" style={{ color: 'var(--store-primary)' }}>{itemCount}</span>
                  <span className="hidden lg:inline opacity-90">• {itemCount * 12.5} RWF</span>
                </Link>
                <button className="md:hidden p-2" onClick={() => setOpen(true)} aria-label="Open menu"><Menu className="h-6 w-6" /></button>
              </div>
            </div>
          </header>
          {open && <MobileDrawer />}
        </>
      )
    }
    return (
      <>
        {(phone || hours || whatsapp || email) && (
          <div className="w-full px-4 sm:px-6 lg:px-8 py-1.5" style={{ backgroundColor: 'var(--store-secondary)', color: '#fff' }}>
            <div className="mx-auto flex w-full max-w-7xl items-center justify-center gap-4 text-xs">
            {phone && <span className="inline-flex items-center gap-1.5"><Phone className="h-3 w-3" /> {phone}</span>}
            {whatsapp && <a href={`https://wa.me/${whatsapp.replace(/\s+/g, '')}`} target="_blank" rel="noopener noreferrer" className="inline-flex items-center gap-1.5 hover:opacity-80"><MessageCircle className="h-3 w-3" /> WhatsApp</a>}
            {email && <a href={`mailto:${email}`} className="inline-flex items-center gap-1.5 hover:opacity-80"><Mail className="h-3 w-3" /> {email}</a>}
            {hours && <span>{hours}</span>}
            </div>
          </div>
        )}
        <header className={`sticky top-0 z-50 w-full border-b transition-all duration-300 ${scrolled ? 'bg-[var(--store-background)] shadow-md' : ''}`} style={{ borderColor: 'var(--store-border)' }}>
          <div className="mx-auto flex w-full max-w-7xl items-center justify-between gap-4 px-4 sm:px-6 lg:px-8 py-3">
            {logo}
            <div className="flex items-center gap-2">
              {desktopLinks}
              {cartBtn}
              <button
                className="md:hidden p-2 rounded-full"
                onClick={() => setOpen(true)}
                aria-expanded={open}
                aria-label="Open menu"
              >
                <Menu className="h-6 w-6" />
              </button>
            </div>
          </div>
        </header>
        {open && <MobileDrawer />}
      </>
    )
  }

  // BORDERED: Modern Retail, Furniture, Professional, Construction — Professional gets fixed white + navy top border
  if (h === 'bordered') {
    const isBold = template.id === 'bold-commerce'
    if (isBold) {
      return (
        <>
          <div className="w-full h-1" style={{ background: 'linear-gradient(90deg, var(--store-primary), var(--store-accent), var(--store-secondary))' }} aria-hidden />
          <header className="sticky top-0 z-50 w-full border-b-2" style={{ backgroundColor: '#09090b', borderColor: 'var(--store-primary)' }}>
            <div className="mx-auto flex w-full max-w-7xl items-center justify-between gap-4 px-4 sm:px-6 lg:px-8 py-3">
              <Link href="#" className="flex items-center gap-3 shrink-0" aria-label={businessName}>
                <LogoMark logoUrl={logoUrl} name={businessName} size="lg" />
                <span className="font-extrabold tracking-tight text-lg uppercase hidden sm:inline" style={{ fontFamily: 'Impact, sans-serif', color: '#fafafa', letterSpacing: '-0.02em' }}>{businessName}</span>
              </Link>
              <nav className="hidden lg:flex items-center gap-8 text-sm font-bold uppercase tracking-wider" style={{ color: '#fafafa' }}>
                {navItems.map((item) => (
                  <a key={item.label} href={item.href} className="hover:opacity-70 transition-opacity">{item.label}</a>
                ))}
              </nav>
              <div className="flex items-center gap-3">
                <Link href={`/shop/${businessSlug}/cart`} className="inline-flex items-center gap-2 px-4 py-2 rounded-none text-sm font-black uppercase tracking-wider" style={{ backgroundColor: 'var(--store-primary)', color: '#09090b' }}>
                  <ShoppingCart className="h-4 w-4" /> Cart ({itemCount})
                </Link>
                <button className="lg:hidden p-2" onClick={() => setOpen(true)} aria-label="Open menu"><Menu className="h-6 w-6" style={{ color: '#fafafa' }} /></button>
              </div>
            </div>
          </header>
          {open && <MobileDrawer />}
        </>
      )
    }
    const isProfessional = template.id === 'professional-services'
    if (isProfessional) {
      return (
        <>
          <div className="h-1 w-full" style={{ backgroundColor: 'var(--store-primary)' }} aria-hidden />
          <header className={`sticky top-0 z-50 w-full border-b bg-white shadow-sm`} style={{ borderColor: '#E2E8F0', backgroundColor: '#FFFFFF' }}>
            <div className="mx-auto flex w-full max-w-7xl items-center justify-between gap-4 px-4 sm:px-6 lg:px-8 py-3">
              <Link href="#" className="flex items-center gap-2" aria-label={businessName}>
                <LogoMark logoUrl={logoUrl} name={businessName} size="lg" />
                <span className="font-bold hidden sm:inline" style={{ color: '#0F172A' }}>{businessName}</span>
              </Link>
              <nav className="hidden lg:flex items-center gap-6 text-sm font-medium" style={{ color: '#0F172A' }}>
                <a href="#products" className="hover:opacity-70">Practice Areas</a>
                <a href="#testimonials" className="hover:opacity-70">Case Studies</a>
                <a href="#story" className="hover:opacity-70">Insights</a>
                <a href="#about" className="hover:opacity-70">About Us</a>
              </nav>
              <div className="flex items-center gap-2">
                {phone && <a href={`tel:${phone.replace(/\s+/g, '')}`} className="hidden md:inline-flex items-center gap-1.5 px-3 py-1.5 rounded-full text-xs font-medium border" style={{ borderColor: '#E2E8F0', color: '#0F172A' }}><Phone className="h-3 w-3" /> {phone}</a>}
                <a href="#contact" className="inline-flex items-center justify-center px-5 py-2.5 text-xs font-bold tracking-wide uppercase rounded-md" style={{ backgroundColor: 'var(--store-primary)', color: '#fff' }}>BOOK CONSULTATION</a>
                <span className="hidden md:inline">{cartBtn}</span>
                <button className="md:hidden p-2 rounded-full lg:hidden" onClick={() => setOpen(true)} aria-label="Open menu"><Menu className="h-6 w-6" /></button>
              </div>
            </div>
          </header>
          {open && <MobileDrawer />}
        </>
      )
    }
    const barBg = scrolled ? 'var(--store-background)' : 'transparent'
    
    return (
      <>
        <header className={`sticky top-0 z-50 w-full border-b-2 transition-all duration-300 ${scrolled ? 'bg-[var(--store-background)] shadow-lg' : ''}`} style={{ borderColor: 'var(--store-primary)' }}>
          <div className="mx-auto flex w-full max-w-7xl items-center justify-between gap-4 px-4 sm:px-6 lg:px-8 py-3">
            {logo}
            <div className="flex items-center gap-2">
              {desktopLinks}
              {cartBtn}
              <button
                className="md:hidden p-2 rounded-full"
                onClick={() => setOpen(true)}
                aria-expanded={open}
                aria-label="Open menu"
              >
                <Menu className="h-6 w-6" />
              </button>
            </div>
          </div>
        </header>
        {open && <MobileDrawer />}
      </>
    )
  }

  // CLASSIC (default): Local Market, Community, Agriculture, Marketplace — Agriculture gets meadow + forest strip
  if (template.id === 'agriculture-farm') {
    return (
      <>
        <div className="h-1 w-full" style={{ backgroundColor: 'var(--store-primary)' }} aria-hidden />
        <header className={`sticky top-0 z-50 w-full border-b transition-all duration-300 ${scrolled ? 'shadow-md' : ''}`} style={{ backgroundColor: 'var(--store-background)', borderColor: 'var(--store-border)' }}>
          <div className="mx-auto flex w-full max-w-7xl items-center justify-between gap-4 px-4 sm:px-6 lg:px-8 py-3">
            <Link href="#" className="flex items-center gap-2" aria-label={businessName}>
              <span className="w-2 h-2 rounded-full" style={{ backgroundColor: 'var(--store-primary)' }} />
              <LogoMark logoUrl={logoUrl} name={businessName} size="lg" />
              <span className="font-serif font-bold hidden sm:inline" style={{ color: 'var(--store-text)' }}>{businessName}</span>
            </Link>
            <nav className="hidden lg:flex items-center gap-6 text-sm font-medium" style={{ color: 'var(--store-text)' }}>
              <a href="#categories" className="hover:opacity-70">Our Harvest</a>
              <a href="#about" className="hover:opacity-70">Farm Story</a>
              <a href="#products" className="hover:opacity-70">Bulk Orders</a>
              <a href="#contact" className="hover:opacity-70">Certifications</a>
            </nav>
            <div className="flex items-center gap-2">
              <span className="hidden md:inline-flex items-center gap-1.5 px-2.5 py-1 rounded-full text-xs font-mono border" style={{ borderColor: 'var(--store-primary)', color: 'var(--store-primary)', backgroundColor: 'color-mix(in srgb, var(--store-primary) 10%, transparent)' }}>● HARVEST BASKET ({itemCount})</span>
              <span className="md:hidden">{cartBtn}</span>
              <span className="hidden md:inline">{cartBtn}</span>
              <button className="md:hidden p-2 rounded-full lg:hidden" onClick={() => setOpen(true)} aria-label="Open menu"><Menu className="h-6 w-6" /></button>
            </div>
          </div>
        </header>
        {open && <MobileDrawer />}
      </>
    )
  }
  return (
    <>
      <header className={`sticky top-0 z-50 w-full border-b transition-all duration-300 ${scrolled ? 'bg-[var(--store-background)] shadow-md' : 'bg-[var(--store-background)]'}`} style={{ borderColor: 'var(--store-border)' }}>
        <div className="mx-auto flex w-full max-w-7xl items-center justify-between gap-4 px-4 sm:px-6 lg:px-8 py-3">
          {logo}
          <div className="flex items-center gap-2">
            {desktopLinks}
            {cartBtn}
            <button
              className="md:hidden p-2 rounded-full"
              onClick={() => setOpen(true)}
              aria-expanded={open}
              aria-label="Open menu"
            >
              <Menu className="h-6 w-6" />
            </button>
          </div>
        </div>
      </header>
      {open && <MobileDrawer />}
    </>
  )

  function MobileDrawer() {
    const waHref = whatsapp ? `https://wa.me/${whatsapp.replace(/\s+/g, '')}` : null
    const directionsHref = address ? `https://www.google.com/maps/search/?api=1&query=${encodeURIComponent(address)}` : null

    return (
      <div className="fixed inset-0 z-[60]" role="dialog" aria-modal="true" aria-label="Menu">
        <button className="absolute inset-0 bg-black/50 animate-fade-in" aria-label="Close menu" onClick={() => setOpen(false)} />
        <div
          className="absolute right-0 top-0 h-full w-[88%] max-w-sm p-6 overflow-y-auto animate-slide-in-right"
          style={{ backgroundColor: 'var(--store-background)', color: 'var(--store-text)', boxShadow: '-12px 0 40px rgba(0,0,0,0.3)' }}
        >
          <div className="flex items-center justify-between mb-8">
            <LogoMark logoUrl={logoUrl} name={businessName} size="lg" />
            <button className="p-2 rounded-full hover:bg-[var(--store-surface)] transition-colors" onClick={() => setOpen(false)} aria-label="Close menu">
              <X className="h-6 w-6" />
            </button>
          </div>
          
          <nav className="flex flex-col gap-1 mb-8" aria-label="Mobile navigation">
            {navItems.map((item) => (
              <a
                key={item.label}
                href={item.href}
                onClick={() => setOpen(false)}
                className="px-4 py-4 text-base font-semibold rounded-xl active:bg-[var(--store-surface)] transition-colors min-h-[52px]"
              >
                {item.label}
              </a>
            ))}
          </nav>

          <div className="space-y-3 border-t pt-6" style={{ borderColor: 'var(--store-border)' }}>
            {phone && (
              <a href={`tel:${phone.replace(/\s+/g, '')}`} className="flex items-center justify-center gap-3 w-full py-4 rounded-xl font-semibold" style={{ backgroundColor: 'var(--store-primary)', color: 'var(--store-on-primary)', minHeight: 52 }}>
                <Phone className="h-5 w-5" /> Call {businessName}
              </a>
            )}
            {waHref && (
              <a href={waHref} target="_blank" rel="noopener noreferrer" className="flex items-center justify-center gap-3 w-full py-4 rounded-xl font-semibold border-2" style={{ borderColor: 'var(--store-primary)', color: 'var(--store-primary)', minHeight: 52 }}>
                <MessageCircle className="h-5 w-5" /> WhatsApp
              </a>
            )}
            {email && (
              <a href={`mailto:${email}`} className="flex items-center justify-center gap-3 w-full py-4 rounded-xl font-semibold border-2" style={{ borderColor: 'var(--store-border)', minHeight: 52 }}>
                <Mail className="h-5 w-5" /> Email
              </a>
            )}
            {directionsHref && (
              <a href={directionsHref} target="_blank" rel="noopener noreferrer" className="flex items-center justify-center gap-3 w-full py-4 rounded-xl font-semibold border-2" style={{ borderColor: 'var(--store-border)', minHeight: 52 }}>
                <MapPin className="h-5 w-5" /> Directions
              </a>
            )}
          </div>

          <div className="mt-6 pt-6 border-t flex items-center justify-between text-sm opacity-60" style={{ borderColor: 'var(--store-border)' }}>
            <span>© {new Date().getFullYear()} {businessName}</span>
            <span>Powered by IMBARAGA</span>
          </div>
        </div>
      </div>
    )
  }
}