// Shared storefront sections (part 1): heroes, categories, product display.
// Presentational only; real data in, nothing invented. Sections without data
// render nothing for customers; admin previews show marked placeholders.

import Link from 'next/link'
import { Package, Star, Shield, Truck, Zap, Leaf, Award } from 'lucide-react'
import type { StoreTemplate } from '@/lib/storefront/templates'
import { formatCurrency } from '@/lib/types'
import { StoreProductCard } from './StoreProductCard'

export interface StoreBusinessData {
  slug: string
  name: string
  description: string | null
  phone?: string | null
  email?: string | null
  logo_url?: string | null
  hero_title?: string | null
  hero_subtitle?: string | null
  brand_color?: string | null
  address?: string | null
  whatsapp?: string | null
  website_url?: string | null
  maps_url?: string | null
  tagline?: string | null
}

export interface StoreContent {
  accent_color?: string
  promo_text?: string
  story_title?: string
  story_body?: string
  opening_hours?: string
  hero_image_url?: string
  about_image_url?: string
  testimonials?: Array<Record<string, string>>
  faqs?: Array<Record<string, string>>
  stats?: Array<Record<string, string>>
  badges?: string[]
  social_links?: Array<Record<string, string>>
}

export interface PublicProductLite {
  id: string
  sku?: string
  name: string
  public_slug: string
  category: string
  description: string
  unit_price: number
  image_url: string | null
  available_quantity: number
  status: string
}

const RADIUS_CLASS: Record<StoreTemplate['tokens']['radius'], string> = {
  none: 'rounded-none', small: 'rounded-md', medium: 'rounded-xl',
  large: 'rounded-3xl', pill: 'rounded-2xl',
}
const RADIUS_BTN: Record<StoreTemplate['tokens']['radius'], string> = {
  none: 'rounded-none', small: 'rounded', medium: 'rounded-lg',
  large: 'rounded-full', pill: 'rounded-full',
}
export { RADIUS_CLASS, RADIUS_BTN }

export function headingClass(t: StoreTemplate): string {
  const font =
    t.tokens.headingFont === 'serif' ? 'store-heading-serif'
    : t.tokens.headingFont === 'mono' ? 'store-heading-mono'
    : t.tokens.headingFont === 'display' ? 'store-heading-display' : ''
  return `${font} ${t.tokens.uppercaseHeadings ? 'store-uppercase' : ''}`
}

export function bodyClass(t: StoreTemplate): string {
  return t.tokens.bodyFont === 'serif' ? 'store-body-serif' : ''
}

export function animClass(t: StoreTemplate): string {
  const anim = t.tokens.animation
  return anim === 'none' ? '' : `store-anim-${anim}`
}

const DENSITY_SECTION: Record<StoreTemplate['tokens']['density'], string> = {
  airy: 'space-y-24 md:space-y-32', balanced: 'space-y-16 md:space-y-20', compact: 'space-y-10 md:space-y-12',
}
export function sectionSpacing(t: StoreTemplate): string {
  return DENSITY_SECTION[t.tokens.density]
}

// Consistent storefront container — matches body max-w-7xl + gutters
// Use for normal sections; for full-bleed backgrounds wrap content with StoreContainer inside a -mx-4 bg-* section
export function StoreContainer({ children, className = "" }: { children: React.ReactNode; className?: string }) {
  return <div className={`mx-auto w-full max-w-7xl px-4 sm:px-6 lg:px-8 ${className}`}>{children}</div>
}
export function StoreFullBleed({ children, className = "", style }: { children: React.ReactNode; className?: string; style?: React.CSSProperties }) {
  return (
    <div className={`-mx-4 sm:-mx-6 lg:-mx-8 px-4 sm:px-6 lg:px-8 ${className}`} style={style}>
      <div className="mx-auto w-full max-w-7xl">{children}</div>
    </div>
  )
}

export function PreviewNote({ label }: { label: string }) {
  return (
    <div className="border-2 border-dashed border-current/30 rounded-lg p-4 text-center text-sm opacity-70" data-preview-placeholder="">
      [Preview] {label} — add this under Customize before publishing.
    </div>
  )
}

export function SectionTitle({ template, children, eyebrow }: { template: StoreTemplate; children: React.ReactNode; eyebrow?: string }) {
  const dividerStyle = template.tokens.dividerStyle
  const accent = 'var(--store-accent)'
  const primary = 'var(--store-primary)'
  
  const divider = (
    <div className="mt-4 w-12" style={{ height: 3 }}>
      {dividerStyle === 'gradient' && (
        <div className="h-full rounded-full" style={{ background: `linear-gradient(90deg, ${primary}, ${accent})` }} />
      )}
      {dividerStyle === 'dots' && (
        <div className="h-full flex items-center justify-start gap-1">
          {[1,2,3,4].map(i => <span key={i} className="w-2 h-2 rounded-full" style={{ background: primary, opacity: i <= 2 ? 1 : 0.3 }} />)}
        </div>
      )}
      {dividerStyle === 'shape' && (
        <div className="h-full relative">
          <div className="absolute left-0 top-1/2 -translate-y-1/2 w-8 h-8 rotate-45" style={{ background: primary }} />
          <div className="absolute left-10 top-1/2 -translate-y-1/2 w-4 h-4" style={{ background: accent, borderRadius: '50%' }} />
        </div>
      )}
      {dividerStyle === 'line' && (
        <div className="h-full rounded-full" style={{ background: primary }} />
      )}
    </div>
  )

  return (
    <div className="mb-10 md:mb-12">
      {eyebrow && (
        <p className="text-xs font-semibold tracking-[0.25em] uppercase mb-3" style={{ color: accent }}>
          {eyebrow}
        </p>
      )}
      <h2 className={`text-3xl md:text-4xl lg:text-5xl font-bold leading-tight ${headingClass(template)}`}>{children}</h2>
      {divider}
    </div>
  )
}

function PrimaryCta({ href, children, radius, style = 'filled' }: { href: string; children: React.ReactNode; radius: string; style?: 'filled' | 'outline' | 'ghost' | 'pill' | 'arrow' | 'iconic' }) {
  const base = `inline-flex items-center justify-center gap-2 px-8 py-4 font-semibold text-sm md:text-base transition-all duration-300 hover:-translate-y-0.5 focus:outline-none focus:ring-2 focus:ring-offset-2 ${radius}`
  const filled = `${base} min-h-[52px]` + ` bg-[var(--store-primary)] text-[var(--store-on-primary)] hover:opacity-90 focus:ring-[var(--store-primary)]`
  const outline = `${base} min-h-[52px]` + ` border-2 border-[var(--store-primary)] text-[var(--store-primary)] bg-transparent hover:bg-[var(--store-primary)] hover:text-[var(--store-on-primary)] focus:ring-[var(--store-primary)]`
  const ghost = `${base} min-h-[52px]` + ` text-[var(--store-text)] hover:text-[var(--store-primary)]`
  const pill = `${base} rounded-full` + ` bg-[var(--store-primary)] text-[var(--store-on-primary)] hover:opacity-90 focus:ring-[var(--store-primary)]`
  const arrow = `${filled} group` + ` pr-10`
  const iconic = `${filled} group gap-3`
  
  const cls = style === 'outline' ? outline : style === 'ghost' ? ghost : style === 'pill' ? pill : style === 'arrow' ? arrow : style === 'iconic' ? iconic : filled
  
  return (
    <a href={href} className={cls}>
      {children}
      {style === 'arrow' && <span className="inline-block group-hover:translate-x-1 transition-transform" aria-hidden>→</span>}
    </a>
  )
}

function GhostCta({ href, children, radius, style }: { href: string; children: React.ReactNode; radius: string; style?: React.CSSProperties }) {
  return (
    <a href={href} className={`inline-flex items-center justify-center px-8 py-4 font-semibold text-sm md:text-base border-2 transition-all duration-300 hover:-translate-y-0.5 ${radius}`} style={{ borderColor: 'var(--store-border)', color: 'var(--store-text)', minHeight: 52, ...style }}>
      {children}
    </a>
  )
}

/* --------------------------------- Hero ---------------------------------- */

function HeroBadge({ template, children }: { template: StoreTemplate; children: React.ReactNode }) {
  const badgeStyle = template.tokens.badgeStyle
  const accent = 'var(--store-accent)'
  const base = `inline-flex items-center gap-1.5 px-4 py-1.5 text-xs font-semibold uppercase tracking-wider`
  
  if (badgeStyle === 'pill') return <span className={`${base} rounded-full`} style={{ background: `color-mix(in srgb, ${accent} 15%, transparent)`, color: accent }}>{children}</span>
  if (badgeStyle === 'dot') return <span className={`${base} relative pl-6`} style={{ color: accent }}><span className="absolute left-2 top-1/2 -translate-y-1/2 w-2 h-2 rounded-full" style={{ background: accent }} />{children}</span>
  if (badgeStyle === 'banner') return <span className={`${base}`} style={{ background: accent, color: '#fff' }}>{children}</span>
  if (badgeStyle === 'corner') return <span className={`${base} relative`} style={{ color: accent, borderBottom: `2px solid ${accent}`, paddingBottom: 4 }}>{children}</span>
  if (badgeStyle === 'underline') return <span className={`${base}`} style={{ color: accent, borderBottom: `2px solid ${accent}`, paddingBottom: 2 }}>{children}</span>
  return <span className={`${base} rounded-full`} style={{ background: `color-mix(in srgb, ${accent} 15%, transparent)`, color: accent }}>{children}</span>
}

function HeroImage({ imageUrl, template, previewMode, className = '', overlay = true }: { imageUrl: string | null; template: StoreTemplate; previewMode: boolean; className?: string; overlay?: boolean }) {
  const treatment = template.tokens.imageTreatment
  const radius = RADIUS_CLASS[template.tokens.radius]
  const aspect = template.tokens.heroHeight === 'cinematic' ? 'aspect-[21/9]' : template.tokens.heroHeight === 'immersive' ? 'aspect-[4/3]' : 'aspect-[16/9]'
  
  const treatmentClasses = {
    sharp: `${radius}`,
    soft: `${radius}`.replace('rounded-none', 'rounded-xl').replace('rounded-md', 'rounded-2xl'),
    masked: `${radius} overflow-hidden`,
    framed: `${radius} ring-4 ring-[var(--store-surface)] ring-offset-2 ring-offset-[var(--store-background)]`,
    bleed: '-mx-4 sm:-mx-6 lg:-mx-8',
    floating: `${radius} shadow-2xl`,
  }
  
  if (!imageUrl) {
    return (
      <div className={`${aspect} ${treatmentClasses[treatment] || radius} ${className} relative overflow-hidden`} style={{ background: 'linear-gradient(135deg, var(--store-primary), var(--store-accent))' }} role="img" aria-label="Hero placeholder">
        {previewMode && <div className="absolute inset-0 flex items-center justify-center"><PreviewNote label="Hero image" /></div>}
        <div className="absolute inset-0 bg-gradient-to-br from-[var(--store-primary)]/20 via-transparent to-[var(--store-accent)]/20" />
      </div>
    )
  }
  
  return (
    <div className={`${aspect} ${treatmentClasses[treatment] || radius} ${className} relative overflow-hidden group`}>
      <img
        src={imageUrl}
        alt=""
        loading="eager"
        className={`w-full h-full object-cover transition-all duration-700 ${treatment === 'floating' ? 'group-hover:scale-105' : treatment === 'sharp' ? 'group-hover:scale-[1.02]' : ''}`}
      />
      {overlay && (
        <div className="absolute inset-0 bg-gradient-to-t from-black/60 via-black/10 to-transparent" aria-hidden />
      )}
      {previewMode && <div className="absolute top-4 right-4 z-10"><PreviewNote label="Hero image" /></div>}
    </div>
  )
}

export function HeroSection({
  template, business, content, previewMode, hasContact,
}: {
  template: StoreTemplate
  business: StoreBusinessData
  content: StoreContent
  previewMode: boolean
  hasContact: boolean
}) {
  const title = business.hero_title || business.name
  const subtitle = business.hero_subtitle || business.description || ''
  const imageUrl = (content.hero_image_url || '').trim() || null
  const variant = template.tokens.hero
  const btnRadius = RADIUS_BTN[template.tokens.radius]
  const h = headingClass(template)
  const labels = template.labels || {}
  const ctaLabel = labels.cta || 'Shop Products'
  const ctaStyle = template.tokens.ctaStyle
  const stats = (content.stats || []).slice(0, 3)
  const composition = template.tokens.heroComposition
  const heroHeight = template.tokens.heroHeight
  
  const ctas = (
    <div className="mt-8 md:mt-10 flex flex-col sm:flex-row gap-4">
      <PrimaryCta href="#products" radius={btnRadius} style={ctaStyle}>{ctaLabel}</PrimaryCta>
      {hasContact && <GhostCta href="#contact" radius={btnRadius}>{labels.cta2 || 'Contact Us'}</GhostCta>}
    </div>
  )

  // ASYMMETRIC: Modern Retail, Startup Modern, Furniture, Signature, Beauty
  if (variant === 'asymmetric') {
    const isBeauty = template.id === 'beauty-wellness'
    if (isBeauty) {
      return (
        <section className="relative overflow-hidden" aria-labelledby="hero-title" style={{ backgroundColor: 'var(--store-background)' }}>
          <div className="mx-auto w-full max-w-7xl px-4 sm:px-6 lg:px-8">
            <div className="grid lg:grid-cols-2 gap-8 lg:gap-12 items-center py-10 md:py-16">
              <div className="order-2 lg:order-1">
                <span className="inline-flex items-center gap-1.5 px-3 py-1 rounded-full text-xs font-medium border" style={{ backgroundColor: '#FFF1F2', borderColor: '#FFE4E6', color: '#9F1239' }}>100% Vegan • Dermatologist Approved</span>
                <h1 id="hero-title" className={`mt-4 ${h} leading-[0.95] store-heading-serif`} style={{ fontSize: 'clamp(2.25rem, 5vw, 3.5rem)', color: 'var(--store-text)' }}>{title}</h1>
                {subtitle && <p className="mt-4 text-base leading-relaxed max-w-lg" style={{ color: 'var(--store-text)', opacity: 0.7 }}>{subtitle}</p>}
                <div className="mt-8 flex flex-wrap gap-3">
                  <a href="#products" className="inline-flex items-center justify-center px-7 py-3.5 text-sm font-bold rounded-full shadow-sm" style={{ backgroundColor: 'var(--store-primary)', color: '#fff', minHeight: 48 }}>SHOP NEW ARRIVALS</a>
                  <a href="#story" className="inline-flex items-center justify-center px-7 py-3.5 text-sm font-medium rounded-full border" style={{ backgroundColor: '#fff', borderColor: '#FFE4E6', color: '#4C0519', minHeight: 48 }}>Our Story</a>
                </div>
              </div>
              <div className="order-1 lg:order-2 relative">
                <div className="relative w-full aspect-[4/5] max-w-md mx-auto overflow-hidden" style={{ borderRadius: '24px 24px 4px 4px', backgroundColor: 'var(--store-surface)', border: '1px solid #FFE4E6', boxShadow: '0 20px 40px rgba(159,18,57,0.08)' }}>
                  <HeroImage imageUrl={imageUrl} template={template} previewMode={previewMode} className="w-full h-full" overlay={false} />
                  <span className="absolute top-4 left-4 px-3 py-1.5 rounded-full text-xs font-bold shadow-md" style={{ backgroundColor: 'var(--store-primary)', color: '#fff' }}>With Niacinamide & Hyaluronic Acid</span>
                  <div className="absolute -bottom-3 -right-3 w-20 h-20 rounded-full blur-xl opacity-20" style={{ backgroundColor: 'var(--store-accent)' }} aria-hidden />
                </div>
                <div className="absolute -bottom-4 -left-4 hidden md:flex items-center gap-2 px-4 py-3 rounded-2xl shadow-lg border bg-white" style={{ borderColor: '#FFE4E6' }}>
                  <span className="w-2 h-2 rounded-full bg-green-500 animate-pulse" />
                  <span className="text-xs font-bold" style={{ color: '#4C0519' }}>4.9/5 • 2,341 reviews</span>
                </div>
              </div>
            </div>
          </div>
        </section>
      )
    }
    const isRight = composition === 'text-right'
    const heroMinH = heroHeight === 'cinematic' ? 'min-h-[520px] md:min-h-[640px]' : heroHeight === 'compact' ? 'min-h-[360px] md:min-h-[440px]' : 'min-h-[440px] md:min-h-[600px]'
    return (
      <section className="relative overflow-hidden" aria-labelledby="hero-title">
        <div className="grid lg:grid-cols-2 gap-0">
          <div className={`relative flex items-center ${isRight ? 'lg:order-2' : ''} ${heroMinH}`}>
            <HeroImage imageUrl={imageUrl} template={template} previewMode={previewMode} className="w-full h-full" overlay={true} />
            <div className="absolute inset-0 px-6 md:px-16 lg:px-24 flex items-center">
              <div className="w-full max-w-2xl">
                <HeroBadge template={template}>{business.name}</HeroBadge>
                <h1 id="hero-title" className={`mt-6 ${h} leading-[1.02] tracking-tight`} style={{ fontSize: 'clamp(2rem, 5vw, 3.75rem)' }}>{title}</h1>
                {subtitle && <p className="mt-4 text-base md:text-lg leading-relaxed opacity-85 max-w-xl store-text-balance">{subtitle}</p>}
                <div className="mt-10">{ctas}</div>
              </div>
            </div>
          </div>
          <div className={`relative flex items-center justify-center ${isRight ? '' : 'lg:order-2'} bg-[var(--store-surface)] min-h-[600px]`}>
            <div className="w-full max-w-lg px-8">
              <HeroBadge template={template}>{labels.featured || 'Featured'}</HeroBadge>
              <h2 className={`mt-6 ${h} text-2xl md:text-3xl`}>{labels.featured || 'Featured Collection'}</h2>
              <p className="mt-4 text-[var(--store-text)]/70 leading-relaxed">Curated selections that define the season. Hand-picked for quality and style.</p>
              <div className="mt-8 pt-6 border-t" style={{ borderColor: 'var(--store-border)' }}>
                <a href="#products" className="inline-flex items-center gap-2 font-semibold text-[var(--store-primary)] hover:underline" style={{ color: 'var(--store-primary)' }}>
                  View Collection <span aria-hidden>→</span>
                </a>
              </div>
            </div>
          </div>
        </div>
      </section>
    )
  }

  // FULLBLEED: Luxury, Coffee, African Premium, Fashion — each gets bespoke
  if (variant === 'fullbleed' || variant === 'editorial') {
    const isLuxury = template.id === 'luxury'
    const isFashion = template.id === 'fashion-boutique'
    const isEditorial = variant === 'editorial'
    if (isFashion) {
      return (
        <section className="relative overflow-hidden" aria-labelledby="hero-title" style={{ minHeight: 'min(82vh, 680px)' }}>
          <div className="mx-auto w-full max-w-7xl px-4 sm:px-6 lg:px-8">
            <div className="grid lg:grid-cols-2 gap-0 min-h-[82vh] items-stretch">
              <div className="flex flex-col justify-center py-12 lg:pr-12 lg:py-16">
                <span className="inline-flex w-fit px-3 py-1 rounded-full text-xs font-bold tracking-widest uppercase border" style={{ backgroundColor: 'var(--store-accent)', color: '#fff', borderColor: 'var(--store-accent)' }}>SS/26 EDITION</span>
                <h1 id="hero-title" className={`mt-5 ${h} leading-[0.9] store-heading-serif`} style={{ fontSize: 'clamp(2.5rem, 6vw, 4.5rem)', fontWeight: 800, letterSpacing: '-0.02em' }}>{title.toUpperCase()}</h1>
                <p className="mt-2 text-xs tracking-[0.2em] uppercase font-medium opacity-60">AUTUMN / WINTER 2026</p>
                {subtitle && <p className="mt-4 text-base leading-relaxed opacity-70 max-w-lg">{subtitle}</p>}
                <div className="mt-8">
                  <a href="#products" className="inline-flex items-center justify-center px-8 py-4 text-sm font-bold tracking-wide uppercase" style={{ backgroundColor: 'var(--store-primary)', color: '#fff', minHeight: 52 }}>{ctaLabel.toUpperCase()}</a>
                </div>
              </div>
              <div className="relative min-h-[420px] lg:min-h-[82vh] overflow-hidden" style={{ backgroundColor: 'var(--store-surface)' }}>
                <HeroImage imageUrl={imageUrl} template={template} previewMode={previewMode} className="absolute inset-0 w-full h-full" overlay={false} />
                <span className="absolute top-4 right-4 px-3 py-1.5 rounded-full text-xs font-bold bg-white/90 backdrop-blur shadow-sm" style={{ color: 'var(--store-primary)' }}>SS/26</span>
              </div>
            </div>
          </div>
        </section>
      )
    }
    if (isLuxury) {
      return (
        <section className="relative overflow-hidden flex items-end justify-center" aria-labelledby="hero-title" style={{ minHeight: 'min(92vh, 860px)' }}>
          <HeroImage imageUrl={imageUrl} template={template} previewMode={previewMode} className="absolute inset-0 w-full h-full" overlay={false} />
          <div className="absolute inset-0 bg-gradient-to-t from-black/80 via-black/30 to-transparent" aria-hidden />
          <div className="relative w-full max-w-4xl mx-auto px-4 sm:px-6 lg:px-8 pb-16 md:pb-20 text-center store-anim-cinematic">
            <p className="text-xs tracking-[0.25em] uppercase font-medium mb-4" style={{ color: '#D4AF37' }}>COLLECTION N° 01</p>
            <h1 id="hero-title" className={`leading-[0.9] text-white store-heading-serif`} style={{ fontSize: 'clamp(2.5rem, 7vw, 5.5rem)', fontWeight: 300, letterSpacing: '0.04em' }}>{title.toUpperCase()}</h1>
            {subtitle && <p className="mt-6 text-base md:text-lg leading-relaxed text-white/80 max-w-xl mx-auto font-light tracking-wide">{subtitle}</p>}
            <div className="mt-10 flex justify-center">
              <a href="#products" className="inline-flex items-center justify-center px-10 py-4 text-xs tracking-[0.2em] uppercase font-medium border" style={{ borderColor: '#fff', color: '#fff', minHeight: 52, borderWidth: 1, letterSpacing: '0.15em' }}>{ctaLabel.toUpperCase()}</a>
            </div>
          </div>
        </section>
      )
    }
    return (
      <section className="relative overflow-hidden" aria-labelledby="hero-title" style={{ minHeight: heroHeight === 'cinematic' ? 'min(90vh, 800px)' : 'min(75vh, 650px)' }}>
        <HeroImage imageUrl={imageUrl} template={template} previewMode={previewMode} className="w-full h-full" overlay={false} />
        {isEditorial
          ? <div className="absolute inset-0 bg-gradient-to-t from-black/70 via-black/20 to-transparent" aria-hidden />
          : <div className="absolute inset-0 bg-gradient-to-t from-black/50 via-transparent to-transparent" aria-hidden />}
        <div className={`relative h-full flex items-${composition === 'text-center' ? 'center' : composition === 'text-right' ? 'end' : 'start'} px-6 md:px-16 lg:px-24`}>
          <div className={`w-full ${composition === 'text-center' ? 'max-w-3xl mx-auto text-center' : composition === 'text-right' ? 'max-w-2xl ml-auto text-right' : 'max-w-2xl'} ${isEditorial ? 'store-anim-slow-reveal' : 'store-anim-cinematic'}`}>
            <HeroBadge template={template}>{business.name}</HeroBadge>
            <h1 id="hero-title" className={`mt-6 ${h} leading-[1.02] text-white`} style={{ fontSize: 'clamp(2.5rem, 6vw, 5rem)' }}>{title}</h1>
            {subtitle && <p className="mt-6 text-lg md:text-xl leading-relaxed text-white/90 max-w-xl mx-auto" style={{ marginLeft: composition === 'text-right' ? 'auto' : 0, marginRight: composition === 'text-left' ? 'auto' : 0 }}>{subtitle}</p>}
            <div className="mt-10 flex flex-col sm:flex-row gap-4 justify-center" style={{ justifyContent: composition === 'text-right' ? 'flex-end' : composition === 'text-center' ? 'center' : 'flex-start' }}>
              <PrimaryCta href="#products" radius={btnRadius} style={ctaStyle}>{ctaLabel}</PrimaryCta>
              {hasContact && <GhostCta href="#contact" radius={btnRadius}>{labels.cta2 || 'Contact Us'}</GhostCta>}
            </div>
          </div>
        </div>
        {/* Scroll indicator */}
        <div className="absolute bottom-8 left-1/2 -translate-x-1/2 animate-bounce" aria-hidden>
          <svg className="w-6 h-6 text-white/70" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M19 14l-7 7m0 0l-7-7m7 7V3" /></svg>
        </div>
      </section>
    )
  }

  // TRUST: Professional Services, Construction, Tech, Community — Tech & Professional get bespoke
  if (variant === 'trust') {
    const isTech = template.id === 'tech-store'
    if (isTech) {
      return (
        <section className="relative py-16 md:py-24 overflow-hidden" aria-labelledby="hero-title" style={{ backgroundColor: 'var(--store-background)' }}>
          <div className="absolute inset-0 opacity-[0.03]" aria-hidden style={{ backgroundImage: `linear-gradient(var(--store-border) 1px, transparent 1px), linear-gradient(90deg, var(--store-border) 1px, transparent 1px)`, backgroundSize: '32px 32px' }} />
          <div className="absolute inset-0 bg-gradient-to-br from-[var(--store-primary)]/5 via-transparent to-[var(--store-accent)]/5" aria-hidden />
          <div className="relative mx-auto w-full max-w-7xl px-4 sm:px-6 lg:px-8">
            <div className="grid lg:grid-cols-2 gap-10 lg:gap-12 items-center">
              <div className="store-anim-subtle">
                <div className="inline-flex items-center gap-2 px-3 py-1 rounded-full font-mono text-xs border" style={{ backgroundColor: 'color-mix(in srgb, var(--store-primary) 12%, transparent)', borderColor: 'var(--store-primary)', color: 'var(--store-primary)' }}>
                  <span className="w-1.5 h-1.5 rounded-full bg-green-500 animate-pulse" /> SYSTEM READY
                </div>
                <h1 id="hero-title" className={`mt-5 ${h} leading-[0.9] tracking-tight`} style={{ fontSize: 'clamp(2rem, 5vw, 3.5rem)', fontWeight: 800 }}>{title}</h1>
                {subtitle && <p className="mt-4 text-base md:text-lg leading-relaxed opacity-70 max-w-xl">{subtitle}</p>}
                <div className="mt-6 flex flex-wrap gap-2">
                  {['M3 MAX / 64GB', 'WIFI 7', '4K 144HZ'].map(tag => (
                    <span key={tag} className="px-2.5 py-1 rounded bg-[#1E293B] border border-[#1E293B] font-mono text-xs" style={{ color: 'var(--store-accent)', borderColor: 'var(--store-border)' }}>{tag}</span>
                  ))}
                </div>
                <div className="mt-8 flex flex-wrap gap-3">
                  <a href="#products" className="inline-flex items-center justify-center px-7 py-3.5 text-sm font-bold rounded-md" style={{ backgroundColor: 'var(--store-primary)', color: '#000', minHeight: 48 }}>View Specs →</a>
                  <a href="#contact" className="inline-flex items-center justify-center px-7 py-3.5 text-sm font-medium rounded-md border" style={{ borderColor: 'var(--store-border)', color: 'var(--store-text)', minHeight: 48 }}>Compare</a>
                </div>
                {stats.length > 0 && (
                  <div className="mt-10 grid grid-cols-3 gap-4 pt-6 border-t" style={{ borderColor: 'var(--store-border)' }}>
                    {stats.map((s, i) => (
                      <div key={i} className="text-center">
                        <div className={`text-xl sm:text-2xl font-mono font-bold ${h}`} style={{ color: 'var(--store-primary)' }}>{String(s.value ?? '')}</div>
                        <div className="text-xs font-mono opacity-60 mt-1">{String(s.label ?? '')}</div>
                      </div>
                    ))}
                  </div>
                )}
              </div>
              <div className="relative lg:h-[520px] flex items-center justify-center">
                <div className="relative w-full max-w-md aspect-square rounded-2xl overflow-hidden border" style={{ backgroundColor: '#111827', borderColor: '#1E293B', boxShadow: '0 0 40px color-mix(in srgb, var(--store-primary) 15%, transparent)' }}>
                  <HeroImage imageUrl={imageUrl} template={template} previewMode={previewMode} className="w-full h-full" overlay={false} />
                  <div className="absolute inset-0 opacity-20" style={{ backgroundImage: `linear-gradient(var(--store-primary) 1px, transparent 1px), linear-gradient(90deg, var(--store-primary) 1px, transparent 1px)`, backgroundSize: '24px 24px' }} />
                  {[
                    { top: '18%', left: '72%', label: 'M3' },
                    { top: '55%', left: '15%', label: '64GB' },
                    { top: '82%', left: '60%', label: 'WIFI7' },
                  ].map(dot => (
                    <div key={dot.label} className="absolute w-3 h-3 rounded-full border-2 bg-black/50 backdrop-blur flex items-center justify-center" style={{ top: dot.top, left: dot.left, borderColor: 'var(--store-primary)', boxShadow: '0 0 10px var(--store-primary)' }}>
                      <span className="w-1 h-1 rounded-full" style={{ backgroundColor: 'var(--store-primary)' }} />
                    </div>
                  ))}
                </div>
              </div>
            </div>
          </div>
        </section>
      )
    }
    const isProfessional = template.id === 'professional-services'
    if (isProfessional) {
      return (
        <section className="relative py-16 md:py-20 overflow-hidden" aria-labelledby="hero-title" style={{ backgroundColor: 'var(--store-background)' }}>
          <div className="mx-auto w-full max-w-7xl px-4 sm:px-6 lg:px-8">
            <div className="grid lg:grid-cols-2 gap-10 lg:gap-12 items-center">
              <div className="store-anim-subtle">
                <p className="text-xs font-bold tracking-[0.2em] uppercase" style={{ color: 'var(--store-accent)' }}>Strategic Advisory • Since 2008</p>
                <h1 id="hero-title" className={`mt-4 ${h} leading-[1.05]`} style={{ fontSize: 'clamp(2rem, 4.5vw, 3.25rem)', fontWeight: 800, letterSpacing: '-0.02em', color: 'var(--store-text)' }}>{title}</h1>
                {subtitle && <p className="mt-4 text-base md:text-lg leading-relaxed max-w-xl" style={{ color: 'var(--store-text)', opacity: 0.7 }}>{subtitle}</p>}
                <div className="mt-8 flex flex-wrap gap-3">
                  <a href="#contact" className="inline-flex items-center justify-center px-7 py-3.5 text-sm font-bold rounded-md shadow-sm" style={{ backgroundColor: 'var(--store-primary)', color: '#fff', minHeight: 48 }}>BOOK CONSULTATION</a>
                  <a href="#products" className="inline-flex items-center justify-center px-7 py-3.5 text-sm font-semibold rounded-md border-2" style={{ borderColor: 'var(--store-accent)', color: 'var(--store-accent)', minHeight: 48 }}>Our Services</a>
                </div>
                {stats.length > 0 && (
                  <div className="mt-10 grid grid-cols-3 gap-6 pt-6 border-t" style={{ borderColor: 'var(--store-border)' }}>
                    {stats.map((s, i) => (
                      <div key={i} className="text-center">
                        <div className={`text-xl font-bold ${h}`} style={{ color: 'var(--store-primary)' }}>{String(s.value ?? '')}</div>
                        <div className="text-xs opacity-60 mt-1">{String(s.label ?? '')}</div>
                      </div>
                    ))}
                  </div>
                )}
              </div>
              <div className="relative">
                <div className="relative rounded-xl overflow-hidden shadow-xl border" style={{ borderColor: 'var(--store-border)', backgroundColor: 'var(--store-surface)' }}>
                  <HeroImage imageUrl={imageUrl} template={template} previewMode={previewMode} className="w-full aspect-[4/3]" overlay={false} />
                  <div className="absolute bottom-4 left-4 right-4 bg-white rounded-lg shadow-lg p-4 flex items-center gap-3 border" style={{ borderColor: '#E2E8F0' }}>
                    <div className="w-10 h-10 rounded-full grid place-items-center" style={{ backgroundColor: 'var(--store-primary)', color: '#fff' }}>↗</div>
                    <div>
                      <p className="text-xs font-bold tracking-wide uppercase" style={{ color: 'var(--store-text)' }}>Over $50M Advisory Volume</p>
                      <div className="mt-1 h-1 w-24 rounded-full overflow-hidden" style={{ backgroundColor: '#E2E8F0' }}>
                        <div className="h-full w-3/4 rounded-full" style={{ backgroundColor: 'var(--store-accent)' }} />
                      </div>
                    </div>
                    <span className="ml-auto text-xs font-mono px-2 py-1 rounded" style={{ backgroundColor: '#F8FAFC', color: 'var(--store-primary)', border: '1px solid #E2E8F0' }}>+12%</span>
                  </div>
                </div>
              </div>
            </div>
          </div>
        </section>
      )
    }
    return (
      <section className="relative py-20 md:py-32" aria-labelledby="hero-title" style={{ background: 'linear-gradient(180deg, var(--store-background) 0%, var(--store-surface) 100%)' }}>
        <div className="absolute inset-0" aria-hidden style={{ background: 'radial-gradient(ellipse at 50% 0%, var(--store-primary)/5, transparent 50%)' }} />
        <div className="relative max-w-7xl mx-auto px-6 md:px-16 lg:px-24">
          <div className="grid lg:grid-cols-2 gap-12 lg:gap-16 items-center">
            <div className="store-anim-subtle">
              <HeroBadge template={template}>{business.name}</HeroBadge>
              <h1 id="hero-title" className={`mt-6 ${h} leading-[1.05]`} style={{ fontSize: 'clamp(2rem, 4vw, 3.5rem)' }}>{title}</h1>
              {subtitle && <p className="mt-5 text-lg md:text-xl leading-relaxed text-[var(--store-text)]/80 max-w-xl">{subtitle}</p>}
              {stats.length > 0 && (
                <div className="mt-10 grid grid-cols-3 gap-2 sm:gap-6" style={{ borderTop: '1px solid', borderColor: 'var(--store-border)', paddingTop: 16 }}>
                  {stats.map((s, i) => (
                    <div key={i} className="text-center px-1">
                      <div className={`text-2xl sm:text-3xl md:text-4xl font-extrabold ${h}`} style={{ color: 'var(--store-primary)' }}>{String(s.value ?? '')}</div>
                      <div className="mt-1 text-xs sm:text-sm opacity-60 leading-tight">{String(s.label ?? '')}</div>
                    </div>
                  ))}
                </div>
              )}
              <div className="mt-10">{ctas}</div>
            </div>
            <div className="relative">
              <HeroImage imageUrl={imageUrl} template={template} previewMode={previewMode} className="w-full" overlay={false} />
              {template.tokens.trust === 'band' && (
                <div className="absolute -bottom-6 -left-6 -right-6 bg-[var(--store-surface)] border-t p-6" style={{ borderColor: 'var(--store-border)' }}>
                  <div className="flex flex-wrap items-center justify-center gap-8 text-sm font-medium" style={{ color: 'var(--store-text)/70' }}>
                    {(content.badges || ['Trusted Partner', 'Quality Guaranteed', 'Fast Delivery', 'Secure Payment']).slice(0, 4).map((b, i) => (
                      <span key={i} className="flex items-center gap-2"><span className="w-2 h-2 rounded-full" style={{ background: 'var(--store-accent)' }} />{b}</span>
                    ))}
                  </div>
                </div>
              )}
            </div>
          </div>
        </div>
      </section>
    )
  }

  // NARRATIVE: Storytelling
  if (variant === 'narrative') {
    return (
      <section className="relative py-24 md:py-40" aria-labelledby="hero-title" style={{ background: 'var(--store-background)' }}>
        <div className="max-w-4xl mx-auto px-6 md:px-16 lg:px-24 text-center">
          <div className="store-anim-slow-reveal">
            <HeroBadge template={template}>{business.name}</HeroBadge>
            <h1 id="hero-title" className={`mt-6 ${h} leading-[1.02]`} style={{ fontSize: 'clamp(2.5rem, 5vw, 4.5rem)' }}>{title}</h1>
            {subtitle && <p className="mt-6 text-xl md:text-2xl leading-relaxed text-[var(--store-text)]/80 max-w-3xl mx-auto">{subtitle}</p>}
            <div className="mt-12 flex flex-col sm:flex-row gap-4 justify-center">
              <PrimaryCta href="#products" radius={btnRadius} style={ctaStyle}>{ctaLabel}</PrimaryCta>
              {hasContact && <GhostCta href="#contact" radius={btnRadius}>{labels.cta2 || 'Contact Us'}</GhostCta>}
            </div>
          </div>
          {imageUrl && (
            <div className="mt-20 relative" style={{ maxWidth: 800 }}>
              <HeroImage imageUrl={imageUrl} template={template} previewMode={previewMode} overlay={false} />
            </div>
          )}
        </div>
      </section>
    )
  }

  // VERTICAL: Mobile-first
  if (variant === 'vertical') {
    return (
      <section className="relative py-16 md:py-24" aria-labelledby="hero-title" style={{ background: 'var(--store-background)' }}>
        <div className="max-w-7xl mx-auto px-6 md:px-16 lg:px-24">
          <div className="grid md:grid-cols-2 gap-12 items-center">
            <div className="text-center md:text-left store-anim-subtle">
              <HeroBadge template={template}>{business.name}</HeroBadge>
              <h1 id="hero-title" className={`mt-4 ${h} leading-[1.1]`} style={{ fontSize: 'clamp(1.75rem, 4vw, 3rem)' }}>{title}</h1>
              {subtitle && <p className="mt-4 text-base md:text-lg leading-relaxed text-[var(--store-text)]/80">{subtitle}</p>}
              <div className="mt-8 flex flex-col sm:flex-row gap-3 justify-center md:justify-start">
                <PrimaryCta href="#products" radius={btnRadius} style={ctaStyle}>{ctaLabel}</PrimaryCta>
                {hasContact && <GhostCta href="#contact" radius={btnRadius}>{labels.cta2 || 'Contact Us'}</GhostCta>}
              </div>
            </div>
            <div className="relative">
              <HeroImage imageUrl={imageUrl} template={template} previewMode={previewMode} overlay={true} />
            </div>
          </div>
        </div>
      </section>
    )
  }

  // IMMERSIVE: Coffee, Agriculture, Beauty, African Premium, Signature, Restaurant — each gets bespoke
  if (variant === 'immersive') {
    const isAfrican = template.id === 'african-premium'
    const isCoffee = template.id === 'coffee-food'
    const isAgriculture = template.id === 'agriculture-farm'
    const isSignature = template.id === 'signature-premium'
    const isRestaurant = template.id === 'construction-industrial'
    if (isRestaurant) {
      return (
        <section className="relative overflow-hidden" aria-labelledby="hero-title" style={{ minHeight: 'min(84vh, 700px)', backgroundColor: 'var(--store-background)' }}>
          <HeroImage imageUrl={imageUrl} template={template} previewMode={previewMode} className="absolute inset-0 w-full h-full" overlay={false} />
          <div className="absolute inset-0 bg-gradient-to-r from-black/75 via-black/40 to-black/20" aria-hidden />
          <div className="relative h-full min-h-[84vh] flex items-center px-4 sm:px-6 lg:px-8 py-12">
            <div className="mx-auto w-full max-w-7xl grid lg:grid-cols-2 gap-10 items-center">
              <div className="store-anim-slow-reveal">
                <span className="inline-flex items-center gap-1.5 px-3 py-1.5 rounded-full text-xs font-bold tracking-wide uppercase" style={{ backgroundColor: 'var(--store-accent)', color: '#18181B' }}>⭐ Voted Best Signature Dish 2026</span>
                <h1 id="hero-title" className={`mt-5 ${h} leading-[0.95] store-heading-serif`} style={{ fontSize: 'clamp(2.5rem, 6vw, 4.25rem)', color: '#FAFAFA', letterSpacing: '-0.02em' }}>{title}</h1>
                {subtitle && <p className="mt-4 text-base md:text-lg leading-relaxed max-w-xl" style={{ color: 'rgba(250,250,250,0.85)' }}>{subtitle}</p>}
                <span className="mt-4 inline-flex items-center gap-2 text-xs font-medium tracking-widest uppercase" style={{ color: 'var(--store-accent)' }}>
                  <span className="w-2 h-2 rounded-full bg-green-500 animate-pulse" /> OPEN TODAY: 11 AM - 11 PM
                </span>
                <div className="mt-8 flex flex-wrap gap-3">
                  <a href="#products" className="inline-flex items-center justify-center px-7 py-3.5 text-sm font-bold rounded-xl shadow-lg" style={{ backgroundColor: 'var(--store-primary)', color: '#fff', minHeight: 50 }}>ORDER ONLINE</a>
                  <a href="#contact" className="inline-flex items-center justify-center px-7 py-3.5 text-sm font-bold rounded-xl border-2" style={{ borderColor: 'var(--store-accent)', color: 'var(--store-accent)', minHeight: 50 }}>BOOK A TABLE</a>
                </div>
              </div>
              <div className="hidden lg:flex justify-center relative">
                <div className="relative w-[440px] h-[520px] overflow-hidden shadow-2xl border-4" style={{ borderRadius: 16, borderColor: 'color-mix(in srgb, var(--store-primary) 40%, transparent)', transform: 'rotate(1deg)' }}>
                  <HeroImage imageUrl={imageUrl} template={template} previewMode={false} className="w-full h-full" overlay={false} />
                  <span className="absolute top-4 right-4 px-3 py-1.5 rounded-full text-xs font-bold" style={{ backgroundColor: 'var(--store-primary)', color: '#fff' }}>🌶️ Chef's Special</span>
                  <div className="absolute bottom-4 left-4 right-4 backdrop-blur-md rounded-xl p-3 flex items-center gap-2 border" style={{ backgroundColor: 'rgba(24,24,27,0.85)', borderColor: 'var(--store-border)' }}>
                    <span style={{ color: 'var(--store-accent)' }}>★★★★★</span>
                    <span className="text-xs" style={{ color: '#FAFAFA' }}>4.9 • 1,240 diners</span>
                    <span className="ml-auto text-xs font-bold" style={{ color: 'var(--store-primary)' }}>ORDER NOW →</span>
                  </div>
                </div>
              </div>
            </div>
          </div>
        </section>
      )
    }
    if (isSignature) {
      return (
        <section className="relative overflow-hidden bg-[var(--store-background)]" aria-labelledby="hero-title" style={{ minHeight: 'min(88vh, 780px)' }}>
          <div className="absolute inset-0 overflow-hidden" aria-hidden>
            <HeroImage imageUrl={imageUrl} template={template} previewMode={previewMode} className="absolute inset-0 w-full h-full" overlay={false} />
            <div className="absolute inset-0 bg-gradient-to-r from-black/40 via-transparent to-transparent lg:from-black/20" />
            <div className="absolute top-1/2 left-1/2 -translate-x-1/2 -translate-y-1/2 w-[900px] h-[900px] rounded-full blur-3xl opacity-20" style={{ background: 'radial-gradient(circle, var(--store-primary), transparent 70%)' }} />
          </div>
          <div className="relative h-full min-h-[88vh] flex items-center px-4 sm:px-6 lg:px-8 py-10">
            <div className="mx-auto w-full max-w-7xl grid lg:grid-cols-2 gap-10 items-center">
              <div className="store-anim-slow-reveal">
                <span className="inline-flex items-center gap-2 px-3 py-1.5 rounded-full text-xs font-bold tracking-[0.15em] uppercase border" style={{ backgroundColor: 'var(--store-primary)', color: '#fff', borderColor: 'var(--store-primary)' }}>LIMITED RELEASE: 001/500</span>
                <h1 id="hero-title" className={`mt-5 ${h} leading-[0.85] store-heading-serif`} style={{ fontSize: 'clamp(2.75rem, 6vw, 5rem)', fontWeight: 800, letterSpacing: '-0.03em', color: 'var(--store-text)' }}>{title}</h1>
                {subtitle && <p className="mt-5 text-base md:text-lg leading-relaxed max-w-xl" style={{ color: 'var(--store-text)', opacity: 0.7 }}>{subtitle}</p>}
                <p className="mt-4 text-sm leading-relaxed max-w-lg" style={{ color: 'var(--store-text)', opacity: 0.6 }}>Hand-finished in Kigali. Each piece inspected, numbered, and delivered with certificate.</p>
                <div className="mt-8 flex flex-wrap gap-3">
                  <a href="#products" className="inline-flex items-center justify-center px-8 py-4 text-sm font-bold tracking-wide uppercase rounded-md shadow-lg" style={{ backgroundColor: 'var(--store-primary)', color: '#fff', minHeight: 52, letterSpacing: '0.08em' }}>DISCOVER THE EDITION</a>
                  <a href="#story" className="inline-flex items-center justify-center px-8 py-4 text-sm font-medium rounded-md border" style={{ backgroundColor: 'var(--store-surface)', borderColor: 'var(--store-border)', color: 'var(--store-text)', minHeight: 52 }}>Craftsmanship →</a>
                </div>
              </div>
              <div className="relative hidden lg:flex items-center justify-center">
                <div className="relative w-[460px] h-[520px] rounded-2xl overflow-hidden shadow-2xl border bg-white" style={{ borderColor: 'var(--store-border)', transform: 'rotate(-1deg)' }}>
                  <HeroImage imageUrl={imageUrl} template={template} previewMode={false} className="w-full h-full" overlay={false} />
                  <div className="absolute top-4 left-4 px-3 py-1 rounded-full text-xs font-bold shadow-md" style={{ backgroundColor: 'var(--store-primary)', color: '#fff' }}>001/500</div>
                  <div className="absolute bottom-4 left-4 right-4 bg-white/90 backdrop-blur rounded-xl p-3 flex items-center gap-2 border" style={{ borderColor: 'var(--store-border)' }}>
                    <span className="w-2 h-2 rounded-full animate-pulse" style={{ backgroundColor: 'var(--store-primary)' }} />
                    <span className="text-xs font-bold" style={{ color: 'var(--store-text)' }}>Bespoke • Handcrafted</span>
                    <span className="ml-auto text-xs px-2 py-1 rounded-full font-mono" style={{ backgroundColor: 'var(--store-surface)', border: '1px solid var(--store-border)' }}>→</span>
                  </div>
                </div>
                <div className="absolute -top-4 -right-4 w-20 h-20 rounded-full blur-2xl opacity-20" style={{ backgroundColor: 'var(--store-primary)' }} aria-hidden />
              </div>
            </div>
          </div>
        </section>
      )
    }
    if (isCoffee) {
      return (
        <section className="relative overflow-hidden" aria-labelledby="hero-title" style={{ minHeight: 'min(82vh, 680px)' }}>
          <HeroImage imageUrl={imageUrl} template={template} previewMode={previewMode} className="absolute inset-0 w-full h-full" overlay={false} />
          <div className="absolute inset-0 bg-gradient-to-r from-black/60 via-black/25 to-transparent" aria-hidden />
          <div className="absolute inset-0 opacity-[0.04]" aria-hidden style={{ backgroundImage: `radial-gradient(circle at 20% 30%, var(--store-accent) 1px, transparent 1px)`, backgroundSize: '28px 28px' }} />
          <div className="relative h-full min-h-[82vh] flex items-center px-4 sm:px-6 lg:px-8 py-12">
            <div className="mx-auto w-full max-w-7xl grid lg:grid-cols-2 gap-8 items-center">
              <div className="store-anim-slow-reveal">
                <span className="inline-flex items-center px-3 py-1.5 rounded-full text-xs font-bold tracking-widest uppercase" style={{ backgroundColor: 'var(--store-accent)', color: '#fff' }}>FRESHLY ROASTED THIS WEEK</span>
                <h1 id="hero-title" className={`mt-5 ${h} leading-[0.95] text-white store-heading-serif`} style={{ fontSize: 'clamp(2.5rem, 5vw, 4rem)', letterSpacing: '-0.02em' }}>{title}</h1>
                {subtitle && <p className="mt-4 text-base md:text-lg leading-relaxed text-white/85 max-w-xl">{subtitle}</p>}
                <div className="mt-8 flex flex-col sm:flex-row gap-3">
                  <a href="#products" className="inline-flex items-center justify-center px-7 py-3.5 text-sm font-bold rounded-full" style={{ backgroundColor: 'var(--store-primary)', color: '#FFFBEB', minHeight: 48 }}>SHOP FRESH BEANS</a>
                  <a href="#categories" className="inline-flex items-center justify-center px-7 py-3.5 text-sm font-semibold rounded-full border-2" style={{ borderColor: 'rgba(255,255,255,0.7)', color: '#fff', minHeight: 48, backgroundColor: 'rgba(255,255,255,0.08)', backdropFilter: 'blur(4px)' }}>EXPLORE FLAVORS</a>
                </div>
              </div>
              <div className="hidden lg:block" aria-hidden>
                <div className="ml-auto w-80 h-80 rounded-full overflow-hidden border-4 shadow-2xl" style={{ borderColor: 'rgba(255,255,255,0.9)', boxShadow: '0 20px 60px rgba(0,0,0,0.3)' }}>
                  <HeroImage imageUrl={imageUrl} template={template} previewMode={false} className="w-full h-full" overlay={false} />
                </div>
              </div>
            </div>
          </div>
        </section>
      )
    }
    if (isAgriculture) {
      return (
        <section className="relative overflow-hidden" aria-labelledby="hero-title" style={{ minHeight: 'min(78vh, 640px)' }}>
          <HeroImage imageUrl={imageUrl} template={template} previewMode={previewMode} className="absolute inset-0 w-full h-full" overlay={false} />
          <div className="absolute inset-0 bg-gradient-to-r from-black/55 via-black/15 to-transparent" aria-hidden />
          <div className="absolute inset-0 opacity-[0.06] pointer-events-none" aria-hidden style={{ backgroundImage: `url("data:image/svg+xml,%3Csvg width='60' height='60' viewBox='0 0 60 60' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M30 15 C35 20 38 28 30 35 C22 28 25 20 30 15 Z' fill='none' stroke='%23ffffff' stroke-opacity='0.15' stroke-width='1'/%3E%3C/svg%3E")`, backgroundSize: '60px 60px' }} />
          <div className="relative h-full min-h-[78vh] flex items-center px-4 sm:px-6 lg:px-8 py-10">
            <div className="mx-auto w-full max-w-7xl grid lg:grid-cols-2 gap-8 items-center">
              <div className="store-anim-slow-reveal">
                <span className="inline-flex items-center px-3 py-1 rounded-full text-xs font-bold tracking-widest uppercase border" style={{ backgroundColor: 'var(--store-accent)', color: '#fff', borderColor: 'var(--store-accent)' }}>CURRENT HARVEST: SEASON A 2026</span>
                <h1 id="hero-title" className={`mt-5 ${h} leading-[0.9] text-white`} style={{ fontSize: 'clamp(2.25rem, 5vw, 3.75rem)', letterSpacing: '-0.02em' }}>{title}</h1>
                {subtitle && <p className="mt-4 text-base md:text-lg leading-relaxed text-white/85 max-w-xl">{subtitle}</p>}
                <div className="mt-8 flex flex-wrap gap-3">
                  <a href="#products" className="inline-flex items-center justify-center px-7 py-3.5 text-sm font-bold rounded-lg" style={{ backgroundColor: 'var(--store-primary)', color: '#fff', minHeight: 48 }}>Shop Fresh →</a>
                  <a href="#categories" className="inline-flex items-center justify-center px-7 py-3.5 text-sm font-semibold rounded-lg border" style={{ backgroundColor: 'rgba(255,255,255,0.08)', borderColor: 'rgba(255,255,255,0.6)', color: '#fff', backdropFilter: 'blur(4px)', minHeight: 48 }}>Our Harvest</a>
                </div>
              </div>
              <div className="hidden lg:flex items-center justify-center" aria-hidden>
                <div className="relative w-[420px] h-[420px] rounded-2xl overflow-hidden shadow-2xl border-4" style={{ borderColor: 'rgba(255,255,255,0.85)', transform: 'rotate(1deg)' }}>
                  <HeroImage imageUrl={imageUrl} template={template} previewMode={false} className="w-full h-full" overlay={false} />
                  <div className="absolute bottom-4 left-4 right-4 bg-white/95 backdrop-blur rounded-xl p-3 flex items-center gap-3">
                    <span className="w-2 h-2 rounded-full animate-pulse" style={{ backgroundColor: 'var(--store-primary)' }} />
                    <span className="text-xs font-bold tracking-wide uppercase" style={{ color: 'var(--store-text)' }}>Field Fresh • Today</span>
                    <span className="ml-auto text-xs font-mono opacity-60">Kigali • Rwanda</span>
                  </div>
                </div>
              </div>
            </div>
          </div>
        </section>
      )
    }
    if (isRestaurant) {
      return (
        <section className="relative overflow-hidden" aria-labelledby="hero-title" style={{ backgroundColor: 'var(--store-background)', minHeight: 'min(90vh, 780px)' }}>
          {/* Background image — full bleed with dark zinc overlay */}
          <div className="absolute inset-0 overflow-hidden" aria-hidden>
            <HeroImage imageUrl={imageUrl} template={template} previewMode={previewMode} className="absolute inset-0 w-full h-full" overlay={false} />
            <div className="absolute inset-0" style={{ background: 'linear-gradient(120deg, rgba(24,24,27,0.92) 0%, rgba(24,24,27,0.7) 45%, rgba(39,39,42,0.55) 100%)' }} />
            <div className="absolute inset-0 opacity-[0.06]" aria-hidden style={{ backgroundImage: `radial-gradient(circle at 20% 30%, var(--store-accent) 1px, transparent 1px)`, backgroundSize: '32px 32px' }} />
          </div>

          <div className="relative h-full min-h-[90vh] flex items-center px-4 sm:px-6 lg:px-8 py-16">
            <div className="mx-auto w-full max-w-7xl grid lg:grid-cols-5 gap-10 lg:gap-14 items-center">
              {/* Left: appetite-inducing copy + dual CTA cluster */}
              <div className="lg:col-span-3 store-anim-slow-reveal">
                {/* OPEN TODAY tag */}
                <div className="inline-flex items-center gap-2 px-3 py-1.5 rounded-full text-[11px] font-semibold tracking-[0.2em] uppercase border" style={{ backgroundColor: 'rgba(220,38,38,0.14)', borderColor: 'rgba(220,38,38,0.55)', color: 'var(--store-primary)' }}>
                  <span className="w-1.5 h-1.5 rounded-full bg-[var(--store-primary)] animate-pulse" />
                  Open Today: 11 AM — 11 PM
                </div>
                <h1 id="hero-title" className={`mt-6 ${h} leading-[0.92] text-white store-heading-serif`} style={{ fontSize: 'clamp(2.5rem, 6vw, 4.75rem)', fontWeight: 700, letterSpacing: '-0.025em' }}>
                  {title || 'Artisanal Flavors, Crafted with Passion'}
                </h1>
                {subtitle && (
                  <p className="mt-5 text-base md:text-lg leading-relaxed max-w-xl" style={{ color: '#D4D4D8' }}>
                    {subtitle}
                  </p>
                )}
                {/* Dual CTA cluster — crimson filled + gold outlined */}
                <div className="mt-10 flex flex-col sm:flex-row gap-4">
                  <a href="#products" className="inline-flex items-center justify-center gap-2 px-8 py-4 text-sm md:text-base font-bold tracking-wide uppercase rounded-xl shadow-lg transition-transform hover:-translate-y-0.5" style={{ backgroundColor: 'var(--store-primary)', color: '#fff', minHeight: 56, boxShadow: '0 12px 30px -10px rgba(220,38,38,0.6)' }}>
                    ORDER ONLINE
                    <span aria-hidden>→</span>
                  </a>
                  <a href="#contact" className="inline-flex items-center justify-center gap-2 px-8 py-4 text-sm md:text-base font-bold tracking-wide uppercase rounded-xl border-2 transition-transform hover:-translate-y-0.5" style={{ borderColor: 'var(--store-accent)', color: 'var(--store-accent)', backgroundColor: 'rgba(245,158,11,0.05)', minHeight: 56 }}>
                    BOOK A TABLE
                  </a>
                </div>
                {/* Trust line under CTAs */}
                <div className="mt-8 flex flex-wrap items-center gap-x-6 gap-y-2 text-xs uppercase tracking-[0.15em] font-semibold" style={{ color: '#A1A1AA' }}>
                  <span className="inline-flex items-center gap-1.5"><span style={{ color: 'var(--store-accent)' }}>★</span> 4.9 / 5  •  2,341 reviews</span>
                  <span className="hidden md:inline">◆</span>
                  <span className="hidden md:inline">Locally Sourced</span>
                  <span className="hidden md:inline">◆</span>
                  <span className="hidden md:inline">Hot Delivery</span>
                </div>
              </div>

              {/* Right: full-height floating frame of signature dish + chef rec badge */}
              <div className="lg:col-span-2 hidden lg:flex items-center justify-center">
                <div className="relative w-full max-w-md">
                  {/* Floating chef recommendation badge */}
                  <div className="absolute -top-6 -left-6 z-20 flex items-center gap-2 px-4 py-3 rounded-2xl border backdrop-blur-md" style={{ backgroundColor: 'rgba(39,39,42,0.92)', borderColor: 'var(--store-accent)', boxShadow: '0 14px 30px -10px rgba(0,0,0,0.5)' }}>
                    <span className="w-9 h-9 rounded-full grid place-items-center font-bold text-sm shrink-0" style={{ backgroundColor: 'var(--store-accent)', color: '#18181B' }}>★</span>
                    <span className="text-[11px] font-bold uppercase tracking-wider leading-tight" style={{ color: 'var(--store-accent)' }}>
                      Voted Best<br />Signature Dish 2026
                    </span>
                  </div>

                  {/* Full-height floating frame */}
                  <div className="relative overflow-hidden rounded-3xl border-2 aspect-[3/4]" style={{ backgroundColor: 'var(--store-surface)', borderColor: 'rgba(245,158,11,0.35)', boxShadow: '0 30px 60px -20px rgba(0,0,0,0.7), 0 0 0 8px rgba(220,38,38,0.12)' }}>
                    <HeroImage imageUrl={imageUrl} template={template} previewMode={false} className="w-full h-full" overlay={false} />

                    {/* Sizzle / steam detail layer */}
                    <div aria-hidden className="absolute inset-0" style={{ background: 'linear-gradient(180deg, transparent 50%, rgba(220,38,38,0.08) 100%)' }} />
                    <svg aria-hidden viewBox="0 0 100 100" preserveAspectRatio="none" className="absolute -top-2 left-0 right-0 w-full h-24 opacity-70">
                      <defs>
                        <linearGradient id="steamGrad" x1="0" y1="0" x2="0" y2="1">
                          <stop offset="0%" stopColor="#FAFAFA" stopOpacity="0" />
                          <stop offset="50%" stopColor="#FAFAFA" stopOpacity="0.25" />
                          <stop offset="100%" stopColor="#FAFAFA" stopOpacity="0.55" />
                        </linearGradient>
                      </defs>
                      <path d="M30 100 C 25 70, 38 60, 32 30 S 28 0, 28 0" stroke="url(#steamGrad)" strokeWidth="0.8" fill="none" strokeLinecap="round" />
                      <path d="M50 100 C 55 70, 42 60, 48 30 S 52 0, 52 0" stroke="url(#steamGrad)" strokeWidth="0.8" fill="none" strokeLinecap="round" />
                      <path d="M70 100 C 65 70, 78 60, 72 30 S 68 0, 68 0" stroke="url(#steamGrad)" strokeWidth="0.8" fill="none" strokeLinecap="round" />
                    </svg>

                    {/* Price strip pinned to bottom */}
                    <div className="absolute bottom-0 left-0 right-0 px-5 py-4 backdrop-blur-md flex items-center justify-between" style={{ background: 'linear-gradient(180deg, transparent, rgba(24,24,27,0.92) 60%)' }}>
                      <div>
                        <p className="text-[10px] font-bold uppercase tracking-[0.2em]" style={{ color: 'var(--store-accent)' }}>Tonight's Special</p>
                        <p className="mt-1 text-base font-bold text-white store-heading-serif">Chef's Tasting Platter</p>
                      </div>
                      <span className="text-xl font-extrabold" style={{ color: 'var(--store-accent)' }}>$48</span>
                    </div>
                  </div>

                  {/* Floating ingredient dot */}
                  <div className="absolute -bottom-6 -right-4 z-20 px-3 py-2 rounded-full text-[11px] font-bold uppercase tracking-widest" style={{ backgroundColor: 'var(--store-primary)', color: '#fff', boxShadow: '0 10px 30px -6px rgba(220,38,38,0.6)' }}>
                    🔥 Wood-Fired
                  </div>
                </div>
              </div>
            </div>
          </div>

          {/* Scroll indicator */}
          <div className="absolute bottom-8 left-1/2 -translate-x-1/2 animate-bounce text-xs uppercase tracking-[0.3em] font-semibold" style={{ color: 'var(--store-accent)' }} aria-hidden>
            Browse Menu ↓
          </div>
        </section>
      )
    }
    return (
      <section className="relative overflow-hidden" aria-labelledby="hero-title" style={{ minHeight: 'min(85vh, 700px)' }}>
        <HeroImage imageUrl={imageUrl} template={template} previewMode={previewMode} className="w-full h-full" overlay={false} />
        <div className="absolute inset-0 bg-gradient-to-r from-black/70 via-black/20 to-transparent" aria-hidden />
        <div className="relative h-full flex items-center px-4 sm:px-6 lg:px-8">
          <div className="mx-auto w-full max-w-7xl">
            <div className="w-full max-w-2xl store-anim-slow-reveal">
              <HeroBadge template={template}>{isAfrican ? 'Handcrafted Excellence' : business.name}</HeroBadge>
              <h1 id="hero-title" className={`mt-6 ${h} leading-[0.95] text-white`} style={{ fontSize: 'clamp(2.75rem, 6vw, 4.75rem)', letterSpacing: '-0.02em' }}>{title}</h1>
              {subtitle && <p className="mt-5 text-lg md:text-xl leading-relaxed text-white/85 max-w-xl">{subtitle}</p>}
              {isAfrican ? (
                <div className="mt-10 flex flex-col sm:flex-row gap-4">
                  <a href="#products" className="inline-flex items-center justify-center px-8 py-4 text-sm font-bold tracking-wide uppercase rounded-none" style={{ backgroundColor: 'var(--store-primary)', color: '#fff', minHeight: 52 }}>Discover</a>
                  <a href="#story" className="inline-flex items-center justify-center px-8 py-4 text-sm font-medium underline underline-offset-4 decoration-2" style={{ color: '#fff', minHeight: 52 }}>Our Heritage →</a>
                </div>
              ) : <div className="mt-10">{ctas}</div>}
            {stats.length > 0 && (
              <div className="mt-12 grid grid-cols-3 gap-4" style={{ borderTop: '1px solid rgba(255,255,255,0.2)', paddingTop: 16 }}>
                {stats.map((s, i) => (
                  <div key={i} className="text-center">
                    <div className={`text-2xl md:text-3xl font-extrabold ${h} text-white`}>{String(s.value ?? '')}</div>
                    <div className="mt-1 text-sm text-white/70">{String(s.label ?? '')}</div>
                  </div>
                ))}
              </div>
            )}
            </div>
          </div>
        </div>
      </section>
    )
  }

  // BANNER: Minimal, Bold, Construction, Marketplace, Local Market — Local gets vibrant grid + ticker
  if (variant === 'banner') {
    const isLocal = template.id === 'local-market'
    if (isLocal) {
      return (
        <section className="relative overflow-hidden w-full py-10 md:py-14" aria-labelledby="hero-title" style={{ backgroundColor: 'var(--store-background)' }}>
          <div className="mx-auto w-full max-w-7xl px-4 sm:px-6 lg:px-8">
            <div className="grid lg:grid-cols-2 gap-8 items-center">
              <div>
                <span className="inline-flex items-center gap-1.5 px-3 py-1 rounded-full text-xs font-bold" style={{ backgroundColor: '#FEE2E2', color: 'var(--store-primary)', border: '1px solid #FECACA' }}>🔥 DAILY DEALS UP TO 40% OFF</span>
                <h1 id="hero-title" className={`mt-4 ${h} leading-[1.05]`} style={{ fontSize: 'clamp(2rem, 4vw, 3rem)', fontWeight: 800 }}>{title}</h1>
                {subtitle && <p className="mt-3 text-base leading-relaxed opacity-70 max-w-xl">{subtitle}</p>}
                <div className="mt-6 flex flex-wrap gap-3">
                  <a href="#products" className="inline-flex items-center justify-center px-6 py-3 text-sm font-bold rounded-full" style={{ backgroundColor: 'var(--store-primary)', color: '#fff' }}>Shop Direct From Local Sellers →</a>
                  <a href="#categories" className="inline-flex items-center justify-center px-6 py-3 text-sm font-semibold rounded-full border" style={{ borderColor: 'var(--store-border)', backgroundColor: '#fff' }}>Explore</a>
                </div>
              </div>
              <div className="grid grid-cols-3 gap-3">
                {[0,1,2,3,4,5].map(i => (
                  <div key={i} className={`rounded-xl overflow-hidden border ${i===0 ? 'col-span-2 row-span-2' : ''}`} style={{ backgroundColor: 'var(--store-surface)', borderColor: 'var(--store-border)', aspectRatio: i===0 ? '1' : '1' }}>
                    <div className="w-full h-full flex items-center justify-center text-2xl opacity-20">🛒</div>
                  </div>
                ))}
              </div>
            </div>
          </div>
        </section>
      )
    }
    const isBold = template.id === 'bold-commerce'
    if (isBold) {
      return (
        <section className="relative overflow-hidden" aria-labelledby="hero-title" style={{ backgroundColor: '#09090b' }}>
          <div className="grid lg:grid-cols-2 min-h-[480px] md:min-h-[560px]">
            <div className="relative flex items-center justify-center p-8 md:p-16 order-2 lg:order-1" style={{ background: 'linear-gradient(135deg, #09090b 0%, #18181b 100%)' }}>
              <div className="w-full max-w-lg store-anim-subtle">
                <span className="inline-flex items-center gap-2 px-3 py-1.5 text-xs font-black uppercase tracking-widest" style={{ backgroundColor: 'var(--store-primary)', color: '#09090b' }}>Just Dropped</span>
                <h1 id="hero-title" className="mt-6 leading-[0.9] uppercase" style={{ fontFamily: 'Impact, sans-serif', fontSize: 'clamp(2.5rem, 6vw, 5rem)', color: '#fafafa', letterSpacing: '-0.02em' }}>{title}</h1>
                {subtitle && <p className="mt-4 text-base md:text-lg leading-relaxed" style={{ color: '#a1a1aa' }}>{subtitle}</p>}
                <div className="mt-8 flex flex-col sm:flex-row gap-3">
                  <a href="#products" className="inline-flex items-center justify-center px-8 py-4 text-sm font-black uppercase tracking-wider" style={{ backgroundColor: 'var(--store-primary)', color: '#09090b', minHeight: 52 }}>{ctaLabel}</a>
                  {hasContact && <a href="#contact" className="inline-flex items-center justify-center px-8 py-4 text-sm font-bold uppercase tracking-wider border-2" style={{ borderColor: '#52525b', color: '#fafafa', minHeight: 52 }}>{labels.cta2 || 'Contact Us'}</a>}
                </div>
              </div>
            </div>
            <div className="relative order-1 lg:order-2 min-h-[280px] md:min-h-0 overflow-hidden">
              <HeroImage imageUrl={imageUrl} template={template} previewMode={previewMode} className="absolute inset-0 w-full h-full" overlay={false} />
              <div className="absolute inset-0" style={{ background: 'linear-gradient(135deg, rgba(34,197,94,0.15) 0%, rgba(168,85,247,0.15) 100%)' }} aria-hidden />
              <div className="absolute bottom-4 left-4 right-4 flex gap-2">
                <span className="px-3 py-1.5 text-[10px] font-black uppercase tracking-widest" style={{ backgroundColor: 'var(--store-secondary)', color: '#09090b' }}>Free Shipping</span>
                <span className="px-3 py-1.5 text-[10px] font-black uppercase tracking-widest" style={{ backgroundColor: 'var(--store-accent)', color: '#fff' }}>Limited Edition</span>
              </div>
            </div>
          </div>
        </section>
      )
    }
    return (
      <section className="relative overflow-hidden w-full py-16 md:py-24" aria-labelledby="hero-title" style={{ background: `linear-gradient(${template.palette.gradientAngle || 135}deg, var(--store-primary) 0%, var(--store-accent) 100%)` }}>
        <div className="absolute inset-0 opacity-10" aria-hidden style={{ background: 'radial-gradient(circle at 80% 20%, rgba(255,255,255,.4), transparent 50%)' }} />
        <div className="relative mx-auto w-full max-w-7xl px-4 sm:px-6 lg:px-8 text-center">
          <div className="store-anim-subtle">
            <HeroBadge template={template}>{business.name}</HeroBadge>
            <h1 id="hero-title" className={`mt-6 ${h} leading-[1.05] text-white`} style={{ fontSize: 'clamp(2rem, 4vw, 3.5rem)' }}>{title}</h1>
            {subtitle && <p className="mt-5 text-lg md:text-xl leading-relaxed text-white/90 max-w-2xl mx-auto">{subtitle}</p>}
            <div className="mt-10 flex flex-col sm:flex-row gap-4 justify-center">
              <PrimaryCta href="#products" radius={btnRadius} style={ctaStyle}>{ctaLabel}</PrimaryCta>
              {hasContact && <GhostCta href="#contact" radius={btnRadius} style={{ borderColor: 'rgba(255,255,255,0.4)', color: '#fff' }}>{labels.cta2 || 'Contact Us'}</GhostCta>}
            </div>
          </div>
        </div>
      </section>
    )
  }

  // SPLIT (default): Balanced text + image
  return (
    <section className="relative py-16 md:py-24" aria-labelledby="hero-title" style={{ background: 'var(--store-background)' }}>
      <div className="max-w-7xl mx-auto px-6 md:px-16 lg:px-24">
        <div className="grid lg:grid-cols-2 gap-12 lg:gap-16 items-center">
          <div className="store-anim-subtle">
            <HeroBadge template={template}>{business.name}</HeroBadge>
            <h1 id="hero-title" className={`mt-6 ${h} leading-[1.05]`} style={{ fontSize: 'clamp(2rem, 4vw, 3.5rem)' }}>{title}</h1>
            {subtitle && <p className="mt-5 text-lg md:text-xl leading-relaxed text-[var(--store-text)]/80 max-w-xl">{subtitle}</p>}
            <div className="mt-10">{ctas}</div>
          </div>
          <div className="relative">
            <HeroImage imageUrl={imageUrl} template={template} previewMode={previewMode} overlay={true} />
          </div>
        </div>
      </div>
    </section>
  )
}

/* ------------------------------ Categories -------------------------------- */

function CategoryCard({ category, template, index }: { category: string; template: StoreTemplate; index: number }) {
  const r = RADIUS_CLASS[template.tokens.radius]
  const h = headingClass(template)
  const style = template.tokens.categoryStyle
  const treatment = template.tokens.imageTreatment
  
  // Generate consistent color for category from index
  const hues = [0, 30, 60, 120, 180, 210, 270, 300]
  const hue = hues[index % hues.length]
  const catBg = `hsl(${hue} 60% 50%)`
  const catBgLight = `hsl(${hue} 60% 85%)`
  const catBgDark = `hsl(${hue} 60% 35%)`
  
  if (style === 'chips' || style === 'scroll' || style === 'pill-grid') {
    const isCoffee = template.id === 'coffee-food'
    const isRestaurant = template.id === 'construction-industrial'
    if (isRestaurant) {
      const icons = ['🥂', '🍕', '🥩', "👨‍🍳", '🍰', '🍹', '🍽️']
      const icon = icons[index % icons.length]
      return (
        <a key={category} href="#products" className="group shrink-0 snap-start inline-flex items-center gap-2 px-5 py-3 rounded-full font-semibold text-sm whitespace-nowrap transition-all duration-300 hover:-translate-y-0.5" style={{ backgroundColor: 'var(--store-surface)', border: '1px solid var(--store-border)', color: 'var(--store-text)', minHeight: 48 }}>
          <span aria-hidden>{icon}</span>
          <span>{category}</span>
          <span className="text-[11px] px-2 py-0.5 rounded-full" style={{ backgroundColor: 'color-mix(in srgb, var(--store-primary) 15%, transparent)', color: 'var(--store-accent)' }}>{(index * 4 + 6)} items</span>
        </a>
      )
    }
    if (isCoffee && style === 'pill-grid') {
      return (
        <a key={category} href="#products" className="group flex flex-col items-center gap-3 shrink-0 snap-start p-2">
          <span className="w-20 h-20 md:w-24 md:h-24 rounded-full overflow-hidden border-2 flex items-center justify-center font-bold text-sm transition-all duration-300 group-hover:border-[var(--store-accent)] group-hover:ring-4 shrink-0" style={{ backgroundColor: 'var(--store-surface)', borderColor: 'var(--store-border)', color: 'var(--store-text)', boxShadow: '0 4px 12px rgba(0,0,0,0.06)' }}>
            {category.slice(0, 2).toUpperCase()}
          </span>
          <span className={`text-xs font-semibold text-center leading-tight ${h}`} style={{ color: 'var(--store-text)' }}>{category}</span>
        </a>
      )
    }
    return (
      <a key={category} href="#products" className={`shrink-0 snap-start px-6 py-3.5 font-semibold text-sm whitespace-nowrap ${r === 'rounded-2xl' ? 'rounded-full' : r} transition-all duration-300`} style={{ backgroundColor: 'var(--store-surface)', border: '1px solid var(--store-border)', minHeight: 48, display: 'inline-flex', alignItems: 'center' }}>
        {category}
      </a>
    )
  }
  
  if (style === 'list') {
    return (
      <a key={category} href="#products" className="group flex items-center justify-between py-4 px-4 border-b last:border-b-0 transition-all duration-300" style={{ borderColor: 'var(--store-border)' }}>
        <div className="flex items-center gap-4">
          <span className="w-2 h-2 rounded-full opacity-0 group-hover:opacity-100 transition-opacity" style={{ background: 'var(--store-primary)' }} />
          <span className={`${h} group-hover:translate-x-1 transition-transform`}>{category}</span>
        </div>
        <span aria-hidden className="opacity-0 group-hover:opacity-100 transition-opacity" style={{ color: 'var(--store-primary)' }}>→</span>
      </a>
    )
  }
  
  if (style === 'numbered') {
    return (
      <Link key={category} href="#products" className="group flex items-start gap-6 p-6 border" style={{ borderColor: 'var(--store-border)', borderRadius: template.tokens.radius === 'none' ? 0 : 24 }}>
        <span className="text-4xl md:text-5xl font-bold shrink-0" style={{ color: 'var(--store-primary)', lineHeight: 1 }}>{String(index + 1).padStart(2, '0')}</span>
        <div className="pt-2">
          <span className="text-sm font-medium" style={{ color: 'var(--store-accent)' }}>{category.toUpperCase()}</span>
          <h3 className={`mt-1 text-xl md:text-2xl font-semibold group-hover:italic transition-all ${h}`}>{category}</h3>
        </div>
      </Link>
    )
  }
  
  if (style === 'split') {
    return (
      <a key={category} href="#products" className={`group relative overflow-hidden p-8 md:p-12 ${r}`} style={{ background: `linear-gradient(135deg, ${catBgLight} 0%, ${catBg} 100%)`, minHeight: 200, border: '0 solid var(--store-border)' }}>
        <div className="relative z-10">
          <span className="text-xs font-bold tracking-widest uppercase opacity-70">Category</span>
          <h3 className={`mt-2 ${h} text-2xl md:text-3xl`} style={{ color: catBgDark }}>{category}</h3>
        </div>
        <div className="absolute inset-0 bg-gradient-to-tr from-transparent via-[var(--store-primary)]/5 to-transparent opacity-0 group-hover:opacity-100 transition-opacity" aria-hidden />
      </a>
    )
  }
  
  if (style === 'masonry') {
    const heights = ['h-48', 'h-64', 'h-56', 'h-72']
    const height = heights[index % heights.length]
    return (
      <a key={category} href="#products" className={`group relative overflow-hidden ${r} ${height} sm:${height.replace('h-', 'h-')} md:${height.replace('h-', 'h-')}`} style={{ background: `center/cover no-repeat url(${JSON.stringify(`https://images.unsplash.com/photo-${1500000000 + index * 1000}?w=400&h=300&fit=crop`).slice(1, -1)})` }}>
        <div className="absolute inset-0 bg-gradient-to-t from-black/70 via-black/10 to-transparent" aria-hidden />
        <div className="absolute inset-0 flex items-end p-6">
          <h3 className={`${h} text-xl md:text-2xl text-white`}>{category}</h3>
        </div>
      </a>
    )
  }
  
  // overlay-grid (default): visual tiles with gradient backgrounds — Agriculture, Local & Signature get bespoke
  const isAgriculture = template.id === 'agriculture-farm'
  if (isAgriculture) {
    return (
      <a key={category} href="#products" className={`group flex flex-col items-center justify-center p-6 text-center border-2 transition-all duration-300 hover:-translate-y-1 hover:shadow-md ${r}`} style={{ backgroundColor: '#FFFFFF', borderColor: '#D1E0D2', minHeight: 160 }}>
        <span className="w-10 h-10 rounded-full grid place-items-center mb-3 text-lg" style={{ backgroundColor: 'color-mix(in srgb, var(--store-primary) 12%, transparent)', color: 'var(--store-primary)' }}>🌿</span>
        <span className={`font-semibold text-sm ${h}`} style={{ color: 'var(--store-text)' }}>{category}</span>
        <span className="text-xs mt-1 opacity-60">Fresh harvest</span>
      </a>
    )
  }
  const isLocal = template.id === 'local-market'
  if (isLocal) {
    const colors = ['#FEE2E2', '#FEF3C7', '#DCFCE7', '#E0E7FF', '#F3E8FF', '#FFEDD5']
    const bg = colors[index % colors.length]
    return (
      <a key={category} href="#products" className={`group relative overflow-hidden aspect-square p-4 flex flex-col justify-end border transition-all duration-300 hover:shadow-md hover:-translate-y-0.5 ${r}`} style={{ backgroundColor: bg, borderColor: 'var(--store-border)' }}>
        <span className={`font-bold text-sm leading-tight ${h}`} style={{ color: '#0F172A' }}>{category}</span>
        <span className="text-xs mt-1 font-medium" style={{ color: '#0F172A', opacity: 0.7 }}>{120 + index * 17}+ Items</span>
        <span className="absolute top-3 right-3 w-6 h-6 rounded-full bg-white/80 grid place-items-center text-xs">→</span>
      </a>
    )
  }
  const isSignature = template.id === 'signature-premium'
  if (isSignature) {
    return (
      <a key={category} href="#products" className={`group relative overflow-hidden aspect-[3/4] border transition-all duration-500 hover:shadow-xl ${r}`} style={{ backgroundColor: 'var(--store-surface)', borderColor: 'var(--store-border)' }}>
        <div className="absolute inset-0 p-2">
          <div className="w-full h-full overflow-hidden" style={{ backgroundColor: 'var(--store-background)', borderRadius: 4 }}>
            <div className="w-full h-full flex items-center justify-center text-3xl opacity-10" style={{ color: 'var(--store-text)' }}>{category.slice(0, 1).toUpperCase()}</div>
          </div>
        </div>
        <div className="absolute inset-0 bg-gradient-to-t from-black/60 via-transparent to-transparent opacity-60" aria-hidden />
        <div className="absolute inset-0 p-5 flex flex-col justify-end">
          <span className={`text-white font-serif font-semibold text-lg leading-tight drop-shadow ${h}`}>{category}</span>
          <span className="text-xs mt-1 text-white/70">Collection 2026</span>
        </div>
        <div className="absolute inset-0 border-2 border-transparent group-hover:border-[var(--store-primary)]/30 transition-colors pointer-events-none" style={{ borderRadius: r.includes('rounded') ? 6 : 0 }} />
      </a>
    )
  }
  const isBeauty = template.id === 'beauty-wellness'
  if (isBeauty) {
    return (
      <a key={category} href="#products" className={`group flex flex-col items-center text-center p-4 transition-all duration-300 hover:-translate-y-1 ${r}`} style={{ backgroundColor: '#FFFFFF', border: '1px solid #FFE4E6' }}>
        <span className="w-full aspect-[4/3] rounded-t-full overflow-hidden border-b flex items-center justify-center text-2xl" style={{ backgroundColor: '#FFF1F2', borderColor: '#FFE4E6', color: 'var(--store-primary)' }}>{category.slice(0, 1).toUpperCase()}</span>
        <span className={`mt-3 font-semibold text-sm ${h}`} style={{ color: '#4C0519' }}>{category}</span>
        <span className="text-xs mt-1 opacity-60">Shop now →</span>
      </a>
    )
  }
  return (
    <a key={category} href="#products" className={`group relative overflow-hidden aspect-[4/3] ${r}`} style={{ background: `linear-gradient(${135 + index * 22}deg, ${catBg}, ${catBgDark})` }}>
      <div className="absolute inset-0 bg-black/10 group-hover:bg-black/20 transition-colors" aria-hidden />
      {treatment === 'framed' && <div className="absolute inset-4 border-2 border-white/20 rounded-xl pointer-events-none" />}
      <div className="absolute inset-0 flex items-end p-6">
        <span className={`relative text-white font-bold text-base md:text-lg drop-shadow ${h}`}>{category}</span>
      </div>
      <div className="absolute bottom-4 right-4 opacity-0 group-hover:opacity-100 transition-opacity text-white/80" aria-hidden>→</div>
    </a>
  )
}

export function CategoryShowcase({ template, categories }: { template: StoreTemplate; categories: string[] }) {
  if (categories.length === 0) return null
  const style = template.tokens.categoryStyle
  const h = headingClass(template)
  const labels = template.labels || {}
  
  const containerStyles: Record<string, string> = {
    'chips': 'flex gap-3 overflow-x-auto pb-3 -mx-1 px-1 snap-x store-scrollbar',
    'scroll': 'flex gap-3 overflow-x-auto pb-3 -mx-1 px-1 snap-x store-scrollbar',
    'pill-grid': 'flex flex-wrap gap-3',
    'list': 'divide-y w-full max-w-2xl',
    'numbered': 'space-y-4',
    'split': 'grid grid-cols-2 md:grid-cols-3 gap-4',
    'masonry': 'grid grid-cols-1 sm:grid-cols-2 lg:grid-cols-3 gap-4',
    'overlay-grid': 'grid grid-cols-2 md:grid-cols-4 gap-4',
  }
  
  return (
    <section id="categories" aria-labelledby="categories-title">
      <SectionTitle template={template} eyebrow={labels.categories}>{labels.categories || 'Shop by Category'}</SectionTitle>
      <div className={containerStyles[style] || containerStyles['overlay-grid']}>
        {categories.slice(0, style === 'masonry' ? 9 : style === 'numbered' ? 6 : 8).map((cat, i) => (
          <CategoryCard key={cat} category={cat} template={template} index={i} />
        ))}
      </div>
    </section>
  )
}

/* ------------------------------ Product Grid ------------------------------ */

const GRID_CLASS: Record<StoreTemplate['tokens']['productGrid'], string> = {
  'four-column': 'grid-cols-1 sm:grid-cols-2 lg:grid-cols-4',
  'three-column': 'grid-cols-1 sm:grid-cols-2 lg:grid-cols-3',
  'two-column': 'grid-cols-1 sm:grid-cols-2',
  dense: 'grid-cols-1 sm:grid-cols-2 md:grid-cols-3 xl:grid-cols-4',
  sparse: 'grid-cols-1 md:grid-cols-2 lg:grid-cols-3',
  'single-column': 'grid-cols-1',
}

export function ProductGridClasses(t: StoreTemplate): string {
  return GRID_CLASS[t.tokens.productGrid]
}

export function EmptyCatalog({ template }: { template: StoreTemplate }) {
  return (
    <section id="products" className="text-center py-20 md:py-32">
      <div className="inline-flex items-center justify-center w-20 h-20 rounded-2xl mb-6" style={{ background: 'color-mix(in srgb, var(--store-primary) 10%, transparent)' }}>
        <Package className="h-10 w-10" style={{ color: 'var(--store-primary)' }} />
      </div>
      <p className={`text-2xl font-bold mb-3 ${headingClass(template)}`}>No products available yet</p>
      <p className="text-[var(--store-text)]/60 max-w-sm mx-auto">Products will appear here once they're added to your catalog.</p>
    </section>
  )
}

export function PromoBanner({ template, text }: { template: StoreTemplate; text: string }) {
  return (
    <div className={`w-full px-4 sm:px-6 lg:px-8 py-4 relative overflow-hidden`} style={{ backgroundColor: 'var(--store-accent)', color: '#fff' }}>
      <div className="absolute inset-0" aria-hidden style={{ background: 'linear-gradient(90deg, transparent, rgba(255,255,255,0.1), transparent)' }} />
      <div className="mx-auto flex w-full max-w-7xl items-center justify-center gap-3">
        <span className={`relative font-bold tracking-wide text-sm md:text-base ${headingClass(template)}`}>{text}</span>
      </div>
    </div>
  )
}

export function StatsStrip({ template, stats }: { template: StoreTemplate; stats: Array<Record<string, string>> }) {
  if (stats.length === 0) return null
  const cols = Math.min(stats.length, 4)
  const h = headingClass(template)
  const rhythm = template.tokens.sectionRhythm
  
  return (
    <div className="grid gap-6 md:gap-8" style={{ gridTemplateColumns: `repeat(${cols}, minmax(0,1fr))` }}>
      {stats.slice(0, 4).map((s, i) => (
        <div key={i} className={`relative text-center p-6 md:p-8 ${rhythm === 'editorial' ? 'border-l-4' : ''}`} style={{ 
          backgroundColor: 'var(--store-surface)', 
          borderRadius: template.tokens.radius === 'none' ? 0 : 24,
          borderLeftColor: rhythm === 'editorial' ? 'var(--store-primary)' : 'transparent',
        }}>
          {rhythm === 'progressive' && <div className="absolute -top-3 left-1/2 -translate-x-1/2 w-6 h-6 rounded-full flex items-center justify-center text-xs font-bold" style={{ background: 'var(--store-accent)', color: '#fff' }}>{i + 1}</div>}
          <div className={`text-4xl md:text-5xl font-extrabold ${h}`} style={{ color: 'var(--store-primary)', lineHeight: 1 }}>{String(s.value ?? '')}</div>
          <div className="mt-2 text-sm md:text-base opacity-70">{String(s.label ?? '')}</div>
        </div>
      ))}
    </div>
  )
}

/* ---------------------------- Featured Products --------------------------- */

export function FeaturedProducts({ template, products, business, currency }: { template: StoreTemplate; products: PublicProductLite[]; business: StoreBusinessData; currency: string }) {
  if (products.length === 0) return null
  const labels = template.labels || {}
  const h = headingClass(template)
  
  return (
    <section id="featured" aria-labelledby="featured-title">
      <div className="flex items-end justify-between mb-8 md:mb-10">
        <div>
          <SectionTitle template={template} eyebrow={labels.featured}>{labels.featured || 'Featured'}</SectionTitle>
        </div>
        <a href="#products" className="text-sm font-semibold hover:underline underline-offset-4 transition-colors" style={{ color: 'var(--store-primary)' }}>
          View all <span aria-hidden>→</span>
        </a>
      </div>
      <div className="flex gap-4 overflow-x-auto pb-4 -mx-1 px-1 snap-x snap-mandatory store-scrollbar">
        {products.slice(0, 8).map((p) => (
          <div key={p.id} className="w-72 sm:w-80 flex-shrink-0 snap-start">
            <StoreProductCard product={p} businessSlug={business.slug} template={template} currency={currency} />
          </div>
        ))}
      </div>
    </section>
  )
}

/* --------------------------- Product Card (shared) ------------------------ */

// Re-export from StoreProductCard for use in FeaturedProducts
export { StoreProductCard } from './StoreProductCard'