// Shared storefront sections (part 2): about/story, trust, testimonials,
// FAQ, contact actions, and the full site footer.
// Presentational only; real data in, nothing invented.

import { MapPin, Clock, Phone, Mail, MessageCircle, ExternalLink } from 'lucide-react'
import type { StoreTemplate } from '@/lib/storefront/templates'
import { StoreBusinessData, StoreContent, PreviewNote, SectionTitle, RADIUS_CLASS, RADIUS_BTN, headingClass, bodyClass, StoreContainer } from './sections'
import { LogoMark } from './nav-shared'

/* --------------------------------- About ---------------------------------- */

export function AboutStory({
  template, business, content, previewMode,
}: {
  template: StoreTemplate
  business: StoreBusinessData
  content: StoreContent
  previewMode: boolean
}) {
  const text = business.description || ''
  if (!text.trim()) return null
  const variant = template.tokens.about || 'split'
  const h = headingClass(template)
  const b = bodyClass(template)
  const imageUrl = (content.about_image_url || '').trim() || null
  const badges = (content.badges || []).filter(Boolean)
  const stats = (content.stats || []).filter(Boolean)

  const body = (
    <p className={`text-base md:text-lg leading-relaxed opacity-75 ${b}`}>{text}</p>
  )

  if (variant === 'centered') {
    const isAfrican = template.id === 'african-premium'
    if (isAfrican) {
      return (
        <section id="about" className="w-full py-16 md:py-20 relative overflow-hidden" style={{ backgroundColor: 'var(--store-surface)' }}>
          <div className="absolute inset-0 flex items-center justify-center opacity-[0.03] pointer-events-none select-none" aria-hidden style={{ fontSize: '18rem', fontFamily: 'Georgia, serif', color: 'var(--store-primary)' }}>“</div>
          <div className="relative max-w-3xl mx-auto text-center px-4 sm:px-6 lg:px-8">
            <p className="text-xs font-semibold tracking-[0.24em] uppercase mb-4" style={{ color: 'var(--store-accent)' }}>Our Heritage</p>
            <h2 className={`text-3xl md:text-4xl font-bold mb-6 ${h} store-heading-serif`}>About {business.name}</h2>
            <div className="h-px w-12 mx-auto mb-6" style={{ backgroundColor: 'var(--store-accent)' }} />
            {body}
            {imageUrl && (
              <div className="mt-10 p-1" style={{ backgroundColor: 'var(--store-accent)', borderRadius: 2 }}>
                <div className="overflow-hidden aspect-[16/9]" style={{ background: `center/cover no-repeat url(${JSON.stringify(imageUrl).slice(1, -1)})` }} role="img" aria-label={`About ${business.name}`} />
              </div>
            )}
          </div>
        </section>
      )
    }
    return (
      <section id="about" className="w-full">
        <div className="max-w-3xl mx-auto text-center">
          <p className="text-xs font-semibold tracking-[0.24em] uppercase mb-4" style={{ color: 'var(--store-accent)' }}>About</p>
          <h2 className={`text-2xl md:text-4xl font-bold mb-6 ${h}`}>About {business.name}</h2>
          {body}
        </div>
      </section>
    )
  }

  if (variant === 'quote') {
    const isLuxury = template.id === 'luxury'
    if (isLuxury) {
      return (
        <section id="about" className="w-full py-8">
          <div className="max-w-4xl mx-auto text-center px-4">
            <blockquote>
              <p className={`text-3xl md:text-5xl leading-tight font-light italic ${b} store-heading-serif`} style={{ fontWeight: 300, letterSpacing: '0.02em' }}>“{text}”</p>
              <footer className="mt-8 flex flex-col items-center gap-3">
                <span className="inline-flex items-center px-3 py-1 text-xs tracking-[0.2em] uppercase" style={{ backgroundColor: 'var(--store-accent)', color: '#000' }}>Atelier</span>
                <span className={`text-sm font-medium tracking-wide ${h}`} style={{ color: 'var(--store-accent)' }}>— {business.name}</span>
              </footer>
            </blockquote>
          </div>
        </section>
      )
    }
    return (
      <section id="about" className="w-full">
        <div className="border-l-4 pl-6 md:pl-10 py-2 max-w-4xl" style={{ borderColor: 'var(--store-primary)' }}>
          <blockquote>
            <p className={`text-xl md:text-3xl leading-snug font-medium ${b}`}>“{text}”</p>
            <footer className={`mt-4 text-sm font-semibold ${h}`} style={{ color: 'var(--store-accent)' }}>— {business.name}</footer>
          </blockquote>
        </div>
      </section>
    )
  }

  if (variant === 'narrow') {
    return (
      <section id="about" className="w-full">
        <div className="max-w-2xl">
          <SectionTitle template={template} eyebrow="About">About {business.name}</SectionTitle>
          {body}
        </div>
      </section>
    )
  }

  if (variant === 'story-led') {
    const story = (content.story_body || '').trim()
    return (
      <section id="about" className="grid lg:grid-cols-5 gap-8 lg:gap-12 items-start">
        <div className="lg:col-span-3">
          <p className="text-xs font-semibold tracking-[0.24em] uppercase mb-3" style={{ color: 'var(--store-accent)' }}>About {business.name}</p>
          <h2 className={`text-3xl md:text-4xl font-bold leading-tight mb-6 ${h}`}>{business.name}</h2>
          <div className="h-1 w-12 rounded-full mb-6" style={{ backgroundColor: 'var(--store-primary)' }} />
          <p className={`text-base md:text-lg leading-relaxed opacity-80 ${b}`}>{text}</p>
          {story && <p className={`mt-6 text-sm leading-relaxed opacity-60 border-l-2 pl-4 ${b}`} style={{ borderColor: 'var(--store-border)' }}>{story.slice(0, 320)}</p>}
        </div>
        <div className={`lg:col-span-2 overflow-hidden aspect-[4/5] ${RADIUS_CLASS[template.tokens.radius]} store-img-soft`} style={{ background: imageUrl ? `center/cover no-repeat url(${JSON.stringify(imageUrl).slice(1, -1)})` : 'linear-gradient(135deg, var(--store-primary), var(--store-secondary))' }} role="img" aria-label={`About ${business.name}`}>
          {!imageUrl && previewMode && <div className="p-3"><PreviewNote label="About image" /></div>}
          {!imageUrl && !previewMode && <div className="w-full h-full grid place-items-center text-white/60 text-6xl font-bold">{business.name.trim().charAt(0).toUpperCase()}</div>}
        </div>
      </section>
    )
  }

  if (variant === 'values') {
    return (
      <section id="about">
        <SectionTitle template={template} eyebrow="About">About {business.name}</SectionTitle>
        <p className={`text-base md:text-lg leading-relaxed opacity-75 max-w-3xl mb-8 ${b}`}>{text}</p>
        {badges.length > 0 ? (
          <div className="grid sm:grid-cols-2 lg:grid-cols-3 gap-4">
            {badges.slice(0, 6).map((badge, i) => (
              <div key={i} className={`p-5 border ${RADIUS_CLASS[template.tokens.radius]}`} style={{ borderColor: 'var(--store-border)', backgroundColor: 'var(--store-surface)' }}>
                <div className="w-8 h-8 rounded-full grid place-items-center mb-3" style={{ backgroundColor: 'color-mix(in srgb, var(--store-primary) 14%, transparent)', color: 'var(--store-primary)' }}>
                  <span className="text-sm font-bold">{i + 1}</span>
                </div>
                <p className={`text-sm font-semibold ${h}`}>{badge}</p>
              </div>
            ))}
          </div>
        ) : (
          <div className={`p-6 border-2 border-dashed ${RADIUS_CLASS[template.tokens.radius]} text-center text-sm opacity-60`} style={{ borderColor: 'var(--store-border)' }}>
            Our values define how we serve {business.name} customers every day.
          </div>
        )}
      </section>
    )
  }

  if (variant === 'metrics') {
    return (
      <section id="about" className="grid md:grid-cols-2 gap-10 items-center">
        <div>
          <SectionTitle template={template} eyebrow="About">About {business.name}</SectionTitle>
          <p className={`text-base leading-relaxed opacity-75 ${b}`}>{text}</p>
          {stats.length > 0 && (
            <div className="mt-8 grid grid-cols-3 gap-2 sm:gap-4">
              {stats.slice(0, 3).map((s, i) => (
                <div key={i} className="text-center px-1">
                  <div className={`text-xl sm:text-2xl md:text-3xl font-extrabold ${h}`} style={{ color: 'var(--store-primary)' }}>{String(s.value ?? '')}</div>
                  <div className="text-[11px] sm:text-xs uppercase tracking-wide opacity-60 mt-1 leading-tight">{String(s.label ?? '')}</div>
                </div>
              ))}
            </div>
          )}
        </div>
        <div className={`overflow-hidden aspect-[4/3] ${RADIUS_CLASS[template.tokens.radius]}`} style={{ background: imageUrl ? `center/cover no-repeat url(${JSON.stringify(imageUrl).slice(1, -1)})` : 'linear-gradient(135deg, var(--store-surface), var(--store-primary))' }} role="img" aria-label={`About ${business.name}`}>
          {!imageUrl && previewMode && <div className="p-3"><PreviewNote label="About image" /></div>}
          {!imageUrl && !previewMode && <div className="w-full h-full grid place-items-center text-white/40 text-5xl font-bold">{business.name.trim().charAt(0).toUpperCase()}</div>}
        </div>
      </section>
    )
  }

  if (variant === 'team') {
    return (
      <section id="about">
        <div className="max-w-3xl">
          <SectionTitle template={template} eyebrow="About">About {business.name}</SectionTitle>
          <p className={`text-base md:text-lg leading-relaxed opacity-75 ${b}`}>{text}</p>
        </div>
        <div className="mt-8 grid sm:grid-cols-3 gap-4">
          {[business.name, 'Our team', 'Our promise'].slice(0, 3).map((title, i) => (
            <div key={i} className={`p-6 text-center border ${RADIUS_CLASS[template.tokens.radius]}`} style={{ borderColor: 'var(--store-border)', backgroundColor: i === 0 ? 'var(--store-primary)' : 'var(--store-surface)', color: i === 0 ? 'var(--store-on-primary)' : 'inherit' }}>
              <div className="w-12 h-12 rounded-full mx-auto grid place-items-center font-bold mb-3" style={{ backgroundColor: i === 0 ? 'rgba(255,255,255,0.18)' : 'var(--store-background)', color: i === 0 ? '#fff' : 'var(--store-primary)' }}>
                {String(title).trim().charAt(0).toUpperCase()}
              </div>
              <p className={`text-sm font-semibold ${h}`}>{title}</p>
              <p className={`text-xs mt-2 opacity-70 ${b}`}>{i === 0 ? 'Leading with care' : i === 1 ? 'Dedicated support' : 'Quality first'}</p>
            </div>
          ))}
        </div>
      </section>
    )
  }

  // split (default): image beside copy
  return (
    <section id="about" className="grid md:grid-cols-2 gap-10 md:gap-14 items-center">
      <div className={`overflow-hidden aspect-[4/3] ${RADIUS_CLASS[template.tokens.radius]}`} style={{ background: imageUrl ? `center/cover no-repeat url(${JSON.stringify(imageUrl).slice(1, -1)})` : 'linear-gradient(135deg, var(--store-secondary), var(--store-primary))' }} role="img" aria-label={`About ${business.name}`}>
        {!imageUrl && previewMode && <div className="p-3"><PreviewNote label="About image" /></div>}
      </div>
      <div>
        <SectionTitle template={template} eyebrow="About">About {business.name}</SectionTitle>
        {body}
      </div>
    </section>
  )
}

/* ------------------------------ Founder story ------------------------------ */

export function StorySection({
  template, content, previewMode, businessName,
}: {
  template: StoreTemplate
  content: StoreContent
  previewMode: boolean
  businessName: string
}) {
  const title = (content.story_title || '').trim()
  const body = (content.story_body || '').trim()
  if (!title && !body) {
    if (!previewMode) return null
    return (
      <section>
        <PreviewNote label="Founder story (title + story)" />
      </section>
    )
  }
  return (
    <section id="story" className={`w-full ${template.tokens.animation === 'cinematic' ? 'store-anim-cinematic' : ''}`}>
      <div className="max-w-3xl mx-auto text-center px-4 sm:px-6 lg:px-8">
        {title && (
          <>
            <p className="text-xs font-semibold tracking-[0.24em] uppercase mb-4" style={{ color: 'var(--store-accent)' }}>Our story</p>
            <h2 className={`text-2xl md:text-4xl font-bold mb-6 leading-tight ${headingClass(template)}`}>{title}</h2>
          </>
        )}
        {body && <p className={`whitespace-pre-line text-base md:text-lg leading-loose opacity-80 ${bodyClass(template)}`}>{body}</p>}
        <div className="mt-8 flex justify-center">
          <span className="inline-block h-[3px] w-16 rounded-full" style={{ backgroundColor: 'var(--store-primary)' }} />
        </div>
        <p className="sr-only">{businessName}</p>
      </div>
    </section>
  )
}

/* --------------------------------- Trust ---------------------------------- */

export function TrustSignals({ template, content }: { template: StoreTemplate; content: StoreContent }) {
  const badges = (content.badges || []).filter(Boolean)
  const stats = (content.stats || []).filter(Boolean)
  if (badges.length === 0 && stats.length === 0) return null
  const variant = template.tokens.trust || 'badges'
  const h = headingClass(template)

  if (variant === 'band') {
    const isAfrican = template.id === 'african-premium'
    if (isAfrican) {
      return (
        <div className="w-full px-4 sm:px-6 lg:px-8 py-6" style={{ backgroundColor: 'var(--store-surface)', borderTop: '1px solid var(--store-border)', borderBottom: '1px solid var(--store-border)' }}>
          <div className="mx-auto w-full max-w-7xl grid grid-cols-2 md:grid-cols-4 gap-6">
            {[
              { label: 'Sustainable Sourcing', icon: '♻' },
              { label: 'Global Shipping', icon: '✈' },
              { label: 'Authentic Guarantee', icon: '✓' },
              { label: 'Fair Trade Certified', icon: '★' },
            ].map((item, i) => (
              <div key={i} className="flex flex-col items-center text-center gap-2">
                <span className="w-8 h-8 rounded-full grid place-items-center text-sm" style={{ backgroundColor: 'color-mix(in srgb, var(--store-accent) 15%, transparent)', color: 'var(--store-accent)', border: '1px solid var(--store-accent)' }}>{item.icon}</span>
                <span className={`text-xs font-semibold tracking-wide uppercase ${h}`}>{item.label}</span>
              </div>
            ))}
          </div>
        </div>
      )
    }
    const isAgriculture = template.id === 'agriculture-farm'
    if (isAgriculture) {
      return (
        <div className="w-full px-4 sm:px-6 lg:px-8 py-5" style={{ backgroundColor: 'var(--store-primary)', color: '#fff' }}>
          <div className="mx-auto w-full max-w-7xl flex flex-wrap items-center justify-center gap-x-6 gap-y-2 text-xs md:text-sm font-medium tracking-wide">
            {['100% Organically Grown', 'Direct Farmer Fair Pay', 'Quality Tested Seedlings', 'Cold-Chain Fresh Shipping'].map((label, i) => (
              <span key={i} className="inline-flex items-center gap-2">
                {i > 0 && <span className="hidden sm:inline opacity-60">◆</span>}
                <span style={{ color: '#F7F9F5' }}>{label}</span>
              </span>
            ))}
          </div>
        </div>
      )
    }
    const isProfessional = template.id === 'professional-services'
    const isRestaurant = template.id === 'construction-industrial'
    if (isRestaurant) {
      return (
        <div className="w-full px-4 sm:px-6 lg:px-8 py-5" style={{ backgroundColor: '#27272A', borderTop: '1px solid #3F3F46', borderBottom: '1px solid #3F3F46' }}>
          <div className="mx-auto w-full max-w-7xl flex flex-wrap items-center justify-center gap-x-6 gap-y-2 text-xs md:text-sm font-semibold tracking-wide">
            {['100% Locally Sourced Ingredients', 'Express Hot Delivery', 'Hygiene Certified Kitchen', 'Private Dining Available'].map((label, i) => (
              <span key={i} className="inline-flex items-center gap-2" style={{ color: '#FAFAFA' }}>
                {i > 0 && <span aria-hidden className="hidden sm:inline" style={{ color: 'var(--store-accent)' }}>◆</span>}
                <span className="inline-flex items-center gap-1.5"><span style={{ color: 'var(--store-accent)' }}>✓</span>{label}</span>
              </span>
            ))}
          </div>
        </div>
      )
    }
    if (isProfessional) {
      return (
        <div className="w-full px-4 sm:px-6 lg:px-8 py-6" style={{ backgroundColor: 'var(--store-primary)', color: '#fff' }}>
          <div className="mx-auto w-full max-w-7xl grid grid-cols-2 md:grid-cols-4 gap-6">
            {[
              { value: '99%', label: 'Client Retention' },
              { value: '15+', label: 'Years Experience' },
              { value: '250+', label: 'Advisory Projects' },
              { value: 'ISO', label: 'Certified Firm' },
            ].map((item, i) => (
              <div key={i} className="text-center">
                <div className="text-2xl md:text-3xl font-extrabold" style={{ color: '#fff' }}>{item.value}</div>
                <div className="text-xs uppercase tracking-wide mt-1" style={{ color: 'rgba(255,255,255,0.7)' }}>{item.label}</div>
                <div className="mt-2 h-1 w-8 mx-auto rounded-full" style={{ backgroundColor: 'var(--store-accent)' }} />
              </div>
            ))}
          </div>
        </div>
      )
    }
    const isLocal = template.id === 'local-market'
    if (isLocal) {
      return (
        <div className="w-full px-4 sm:px-6 lg:px-8 py-6" style={{ backgroundColor: '#FFFFFF', borderTop: '1px solid #E2E8F0', borderBottom: '1px solid #E2E8F0' }}>
          <div className="mx-auto w-full max-w-7xl grid grid-cols-2 md:grid-cols-4 gap-6">
            {[
              { label: 'Same-Day Delivery', icon: '🚚', color: '#0EA5E9' },
              { label: 'Verified Sellers', icon: '✓', color: '#16A34A' },
              { label: 'Mobile Money', icon: '●', color: '#F59E0B' },
              { label: 'Fresh & Authentic', icon: '★', color: '#DC2626' },
            ].map((item, i) => (
              <div key={i} className="flex flex-col items-center text-center gap-2">
                <span className="w-10 h-10 rounded-full grid place-items-center text-lg" style={{ backgroundColor: `${item.color}15`, color: item.color, border: `1px solid ${item.color}30` }}>{item.icon}</span>
                <span className="text-xs font-bold tracking-wide uppercase" style={{ color: '#0F172A' }}>{item.label}</span>
              </div>
            ))}
          </div>
        </div>
      )
    }
    return (
      <div className="w-full px-4 sm:px-6 lg:px-8 py-4 overflow-x-auto store-scrollbar" style={{ backgroundColor: 'var(--store-surface)', borderTop: '1px solid var(--store-border)', borderBottom: '1px solid var(--store-border)' }}>
        <div className="flex gap-8 justify-start md:justify-center min-w-max mx-auto w-full max-w-7xl">
          {(badges.length ? badges : stats.map(s => `${s.value ?? ''} ${s.label ?? ''}`)).map((badge, i) => (
            <span key={i} className={`text-sm font-semibold whitespace-nowrap ${h}`}>{String(badge)}</span>
          ))}
        </div>
      </div>
    )
  }

  if (variant === 'stats') {
    return (
      <StoreContainer>
        <div className="grid grid-cols-2 md:grid-cols-4 gap-4">
          {(badges.length ? badges.slice(0, 4) : stats.slice(0, 4).map(s => `${s.value ?? ''} ${s.label ?? ''}`)).map((badge, i) => (
            <div key={i} className="flex items-center justify-center gap-2 py-4 border" style={{ borderColor: 'var(--store-border)', borderRadius: template.tokens.radius === 'none' ? 0 : 12 }}>
              <span aria-hidden style={{ color: 'var(--store-accent)' }}>✓</span>
              <span className="text-sm font-medium">{String(badge)}</span>
            </div>
          ))}
        </div>
      </StoreContainer>
    )
  }

  if (variant === 'certifications') {
    return (
      <StoreContainer>
        <div className="grid sm:grid-cols-2 lg:grid-cols-3 gap-4">
          {badges.slice(0, 6).map((badge, i) => (
            <div key={i} className={`flex items-start gap-3 p-4 border ${RADIUS_CLASS[template.tokens.radius]}`} style={{ borderColor: 'var(--store-border)', backgroundColor: 'var(--store-background)' }}>
              <span className="w-8 h-8 rounded-full grid place-items-center shrink-0" style={{ backgroundColor: 'color-mix(in srgb, var(--store-primary) 12%, transparent)', color: 'var(--store-primary)' }}>✓</span>
              <div>
                <p className={`text-sm font-semibold ${h}`}>{badge}</p>
                <p className="text-xs opacity-60 mt-1">Verified & trusted</p>
              </div>
            </div>
          ))}
        </div>
      </StoreContainer>
    )
  }

  if (variant === 'logos') {
    return (
      <StoreContainer>
        <div className="flex flex-wrap items-center justify-center gap-3 sm:gap-6 py-2">
          {badges.slice(0, 8).map((badge, i) => (
            <div key={i} className="px-4 py-2 text-xs font-bold tracking-widest uppercase rounded-full border" style={{ borderColor: 'var(--store-border)', backgroundColor: 'var(--store-surface)', color: 'var(--store-text)', opacity: 0.85 }}>
              {badge.slice(0, 18)}
            </div>
          ))}
        </div>
      </StoreContainer>
    )
  }

  if (variant === 'metrics-strip') {
    const items = stats.length ? stats.slice(0, 4) : badges.slice(0, 4).map(b => ({ value: '✓', label: b }))
    return (
      <div className="w-full px-4 sm:px-6 lg:px-8 py-8" style={{ backgroundColor: 'var(--store-surface)' }}>
        <div className="grid grid-cols-2 md:grid-cols-4 gap-6 max-w-5xl mx-auto w-full">
          {items.map((s, i) => (
            <div key={i} className="text-center">
              <div className={`text-2xl md:text-3xl font-extrabold ${h}`} style={{ color: 'var(--store-primary)' }}>{String((s as Record<string,string>).value ?? s)}</div>
              <div className="text-xs uppercase tracking-widest opacity-60 mt-1">{String((s as Record<string,string>).label ?? '')}</div>
            </div>
          ))}
        </div>
      </div>
    )
  }

  // badges (default): pill row
  return (
    <StoreContainer>
      <div className="flex flex-wrap gap-3">
        {badges.map((badge, i) => (
          <span key={i} className="inline-flex items-center gap-1.5 px-4 py-2 text-sm font-medium rounded-full" style={{ backgroundColor: 'var(--store-surface)', border: '1px solid var(--store-border)' }}>
            <span aria-hidden style={{ color: 'var(--store-accent)' }}>✓</span> {badge}
          </span>
        ))}
      </div>
    </StoreContainer>
  )
}

/* ------------------------------- Testimonials ------------------------------ */

export function TestimonialsSection({ template, content }: { template: StoreTemplate; content: StoreContent }) {
  const items = content.testimonials || []
  if (items.length === 0) return null
  const variant = template.tokens.testimonial || 'cards'
  const h = headingClass(template)
  const b = bodyClass(template)

  if (variant === 'quotes') {
    return (
      <section>
        <SectionTitle template={template}>What customers say</SectionTitle>
        <div className="grid md:grid-cols-2 gap-x-14 gap-y-10">
          {items.slice(0, 4).map((t, i) => (
            <figure key={i}>
              <div aria-hidden className="text-4xl leading-none mb-3" style={{ color: 'var(--store-primary)', fontFamily: 'Georgia, serif' }}>“</div>
              <blockquote className={`leading-relaxed opacity-85 ${b}`}>{String(t.quote ?? t.text ?? '')}</blockquote>
              <figcaption className={`mt-3 text-sm font-semibold ${h}`}>— {String(t.author ?? '')}</figcaption>
            </figure>
          ))}
        </div>
      </section>
    )
  }

  if (variant === 'featured') {
    const first = items[0]
    return (
      <section className={`p-8 md:p-12 text-center ${RADIUS_CLASS[template.tokens.radius]}`} style={{ backgroundColor: 'var(--store-secondary)', color: '#fff' }}>
        <div aria-hidden className="text-5xl leading-none mb-4 opacity-60" style={{ fontFamily: 'Georgia, serif' }}>“</div>
        <blockquote className={`max-w-3xl mx-auto text-xl md:text-2xl leading-relaxed font-medium ${b}`}>{String(first.quote ?? first.text ?? '')}</blockquote>
        <p className={`mt-5 text-sm tracking-wide ${h}`} style={{ color: 'rgba(255,255,255,.75)' }}>— {String(first.author ?? '')}</p>
      </section>
    )
  }

  if (variant === 'carousel') {
    const isAfrican = template.id === 'african-premium'
    if (isAfrican) {
      return (
        <section className="py-8">
          <div className="max-w-3xl mx-auto text-center px-4">
            <div className="flex justify-center mb-6">
              <span className="w-10 h-10 rounded-full grid place-items-center text-lg" style={{ backgroundColor: 'var(--store-accent)', color: '#fff' }}>“</span>
            </div>
            {items.slice(0, 3).map((t, i) => (
              <figure key={i} className={i > 0 ? 'mt-10 pt-10 border-t' : ''} style={{ borderColor: 'var(--store-border)' }}>
                <blockquote className={`text-xl md:text-2xl leading-relaxed font-serif italic ${b}`} style={{ fontFamily: 'Georgia, serif' }}>{String(t.quote ?? t.text ?? '')}</blockquote>
                <div className="mt-6 flex flex-col items-center gap-3">
                  <div className="w-12 h-12 rounded-full p-0.5" style={{ backgroundColor: 'var(--store-accent)' }}>
                    <div className="w-full h-full rounded-full bg-white grid place-items-center text-sm font-bold" style={{ color: 'var(--store-primary)' }}>{String(t.author ?? '').charAt(0).toUpperCase()}</div>
                  </div>
                  <figcaption className={`text-sm font-semibold ${h}`}>{String(t.author ?? '')} <span className="font-normal opacity-60">— Kigali, Rwanda</span></figcaption>
                  <div className="flex gap-1" style={{ color: 'var(--store-accent)' }}>★★★★★</div>
                </div>
              </figure>
            ))}
          </div>
        </section>
      )
    }
    return (
      <section>
        <SectionTitle template={template}>What customers say</SectionTitle>
        <div className="flex gap-4 overflow-x-auto pb-4 snap-x snap-mandatory store-scrollbar -mx-1 px-1">
          {items.slice(0, 8).map((t, i) => (
            <figure key={i} className={`min-w-[280px] sm:min-w-[320px] max-w-sm flex-shrink-0 snap-start p-6 border ${RADIUS_CLASS[template.tokens.radius]}`} style={{ borderColor: 'var(--store-border)', backgroundColor: 'var(--store-background)' }}>
              <div aria-hidden className="mb-3" style={{ color: 'var(--store-accent)' }}>★★★★★</div>
              <blockquote className={`text-sm leading-relaxed opacity-80 ${b}`}>{String(t.quote ?? t.text ?? '')}</blockquote>
              <figcaption className={`mt-4 text-sm font-semibold ${h}`}>{String(t.author ?? '')}</figcaption>
            </figure>
          ))}
        </div>
      </section>
    )
  }

  if (variant === 'masonry') {
    return (
      <section>
        <SectionTitle template={template}>What customers say</SectionTitle>
        <div className="columns-1 sm:columns-2 lg:columns-3 gap-5 space-y-5">
          {items.slice(0, 6).map((t, i) => (
            <figure key={i} className={`break-inside-avoid p-6 border ${RADIUS_CLASS[template.tokens.radius]}`} style={{ borderColor: 'var(--store-border)', backgroundColor: i % 2 === 0 ? 'var(--store-surface)' : 'var(--store-background)' }}>
              <div aria-hidden className="mb-3" style={{ color: 'var(--store-accent)' }}>★★★★★</div>
              <blockquote className={`text-sm leading-relaxed opacity-80 ${b}`}>{String(t.quote ?? t.text ?? '')}</blockquote>
              <figcaption className={`mt-4 text-sm font-semibold ${h}`}>{String(t.author ?? '')}</figcaption>
            </figure>
          ))}
        </div>
      </section>
    )
  }

  if (variant === 'video') {
    // Video-style: elegant card with play overlay, but only if we have testimonials; no fabricated video URLs
    return (
      <section>
        <SectionTitle template={template}>Customer stories</SectionTitle>
        <div className="grid md:grid-cols-2 gap-6">
          {items.slice(0, 4).map((t, i) => (
            <figure key={i} className={`relative overflow-hidden border ${RADIUS_CLASS[template.tokens.radius]}`} style={{ borderColor: 'var(--store-border)', backgroundColor: 'var(--store-surface)' }}>
              <div className="aspect-video relative grid place-items-center" style={{ background: `linear-gradient(135deg, var(--store-primary), var(--store-secondary))` }}>
                <div className="w-12 h-12 rounded-full bg-white/90 grid place-items-center shadow-lg">
                  <span className="ml-0.5 text-lg" style={{ color: 'var(--store-primary)' }}>▶</span>
                </div>
                <span className="absolute bottom-2 right-2 text-[10px] font-semibold px-2 py-1 rounded-full bg-black/60 text-white">Story</span>
              </div>
              <div className="p-5">
                <blockquote className={`text-sm leading-relaxed opacity-80 ${b}`}>{String(t.quote ?? t.text ?? '')}</blockquote>
                <figcaption className={`mt-3 text-sm font-semibold ${h}`}>— {String(t.author ?? '')}</figcaption>
              </div>
            </figure>
          ))}
        </div>
        <p className="text-xs opacity-50 mt-3 text-center">Video stories from real customers — contact us to share yours.</p>
      </section>
    )
  }

  // cards (default)
  return (
    <section>
      <SectionTitle template={template}>What customers say</SectionTitle>
      <div className="grid sm:grid-cols-2 lg:grid-cols-3 gap-5">
        {items.slice(0, 6).map((t, i) => (
          <figure key={i} className={`p-6 border ${RADIUS_CLASS[template.tokens.radius]}`} style={{ borderColor: 'var(--store-border)', backgroundColor: 'var(--store-background)' }}>
            <div aria-hidden className="mb-3" style={{ color: 'var(--store-accent)' }}>★★★★★</div>
            <blockquote className={`text-sm leading-relaxed opacity-80 ${b}`}>{String(t.quote ?? t.text ?? '')}</blockquote>
            <figcaption className={`mt-4 text-sm font-semibold ${h}`}>{String(t.author ?? '')}</figcaption>
          </figure>
        ))}
      </div>
    </section>
  )
}

/* ----------------------------------- FAQ ----------------------------------- */

export function FaqSection({ template, content }: { template: StoreTemplate; content: StoreContent }) {
  const faqs = content.faqs || []
  if (faqs.length === 0) return null
  return (
    <section id="faq" className="w-full">
      <div className="max-w-3xl mx-auto px-4 sm:px-6 lg:px-8">
        <SectionTitle template={template}>Common questions</SectionTitle>
        <div className="divide-y" style={{ borderColor: 'var(--store-border)' }}>
        {faqs.map((f, i) => (
          <details key={i} className="group py-4 border-b last:border-b-0" style={{ borderColor: 'var(--store-border)' }}>
            <summary className={`cursor-pointer list-none flex items-center justify-between gap-4 font-semibold ${headingClass(template)}`} style={{ minHeight: 44 }}>
              {String(f.question ?? '')}
              <span aria-hidden className="transition-transform group-open:rotate-45 shrink-0" style={{ color: 'var(--store-primary)' }}>+</span>
            </summary>
            <p className={`mt-3 text-sm md:text-base opacity-70 leading-relaxed pr-8 ${bodyClass(template)}`}>{String(f.answer ?? '')}</p>
          </details>
        ))}
        </div>
      </div>
    </section>
  )
}

/* --------------------------------- Contact --------------------------------- */

function whatsappHref(raw: string | null | undefined): string | null {
  const digits = (raw || '').replace(/[^\d]/g, '')
  return digits.length >= 7 ? `https://wa.me/${digits}` : null
}

function directionsHref(address: string | null | undefined): string | null {
  const a = (address || '').trim()
  return a ? `https://www.google.com/maps/search/?api=1&query=${encodeURIComponent(a)}` : null
}

export function ContactActions({
  template, business, stacked = false,
}: {
  template: StoreTemplate
  business: StoreBusinessData
  stacked?: boolean
}) {
  const wa = whatsappHref(business.whatsapp)
  const directions = directionsHref(business.address)
  const btnRadius = RADIUS_BTN[template.tokens.radius]

  const cls = `inline-flex items-center justify-center gap-2 px-5 py-3 text-sm font-semibold transition-transform hover:-translate-y-0.5 ${btnRadius}`
  const primaryStyle = { backgroundColor: 'var(--store-primary)', color: 'var(--store-on-primary)', minHeight: 46 }
  const outlineStyle = { border: '1px solid var(--store-border)', minHeight: 46 }

  const actions: React.ReactNode[] = []
  if (business.phone) actions.push(
    <a key="call" href={`tel:${business.phone.replace(/\s+/g, '')}`} className={cls} style={primaryStyle}>
      <Phone className="h-4 w-4" /> Call {business.phone}
    </a>,
  )
  if (wa) actions.push(
    <a key="wa" href={wa} target="_blank" rel="noopener noreferrer" className={cls} style={outlineStyle}>
      <MessageCircle className="h-4 w-4" /> WhatsApp
    </a>,
  )
  if (business.email) actions.push(
    <a key="mail" href={`mailto:${business.email}`} className={cls} style={outlineStyle}>
      <Mail className="h-4 w-4" /> Email
    </a>,
  )
  if (directions) actions.push(
    <a key="dir" href={directions} target="_blank" rel="noopener noreferrer" className={cls} style={outlineStyle}>
      <MapPin className="h-4 w-4" /> Directions
    </a>,
  )
  if (actions.length === 0) return null
  return <div className={`flex flex-wrap gap-3 ${stacked ? '' : ''}`}>{actions}</div>
}

export function ContactSection({
  template, business, content,
}: {
  template: StoreTemplate
  business: StoreBusinessData
  content: StoreContent
}) {
  const hasAny = Boolean(business.phone || business.email || business.whatsapp || business.address || business.website_url || content.opening_hours)
  if (!hasAny) return null
  const variant = template.tokens.contact || 'panel'
  const r = RADIUS_CLASS[template.tokens.radius]
  const h = headingClass(template)

  const info = (
    <ul className="space-y-3 text-sm md:text-base">
      {content.opening_hours && (
        <li className="flex items-start gap-3"><Clock className="h-4 w-4 mt-1 shrink-0" style={{ color: 'var(--store-primary)' }} /><span>{content.opening_hours}</span></li>
      )}
      {business.address && (
        <li className="flex items-start gap-3"><MapPin className="h-4 w-4 mt-1 shrink-0" style={{ color: 'var(--store-primary)' }} /><span>{business.address}</span></li>
      )}
      {business.phone && (
        <li className="flex items-start gap-3"><Phone className="h-4 w-4 mt-1 shrink-0" style={{ color: 'var(--store-primary)' }} /><a href={`tel:${business.phone.replace(/\s+/g, '')}`} className="hover:underline">{business.phone}</a></li>
      )}
      {business.email && (
        <li className="flex items-start gap-3"><Mail className="h-4 w-4 mt-1 shrink-0" style={{ color: 'var(--store-primary)' }} /><a href={`mailto:${business.email}`} className="hover:underline break-all">{business.email}</a></li>
      )}
      {business.website_url && (
        <li className="flex items-start gap-3"><ExternalLink className="h-4 w-4 mt-1 shrink-0" style={{ color: 'var(--store-primary)' }} /><a href={business.website_url} target="_blank" rel="noopener noreferrer" className="hover:underline break-all">{business.website_url.replace(/^https?:\/\//, '')}</a></li>
      )}
    </ul>
  )

  if (variant === 'columns') {
    return (
      <section id="contact">
        <StoreContainer>
          <div className="grid md:grid-cols-2 gap-10">
            <div>
              <SectionTitle template={template}>Get in touch</SectionTitle>
              <ContactActions template={template} business={business} />
            </div>
            <div>{info}</div>
          </div>
        </StoreContainer>
      </section>
    )
  }

  if (variant === 'card') {
    return (
      <section id="contact">
        <StoreContainer>
          <SectionTitle template={template}>Get in touch</SectionTitle>
          <div className={`grid md:grid-cols-2 gap-8 p-6 md:p-10 shadow-md ${r}`} style={{ backgroundColor: 'var(--store-background)', border: '1px solid var(--store-border)' }}>
            <div>
              <h3 className={`text-xl font-bold mb-4 ${h}`}>Reach us directly</h3>
              <ContactActions template={template} business={business} />
            </div>
            <div>{info}</div>
          </div>
        </StoreContainer>
      </section>
    )
  }

  if (variant === 'inline') {
    return (
      <section id="contact" className="w-full px-4 sm:px-6 lg:px-8 py-6" style={{ backgroundColor: 'var(--store-surface)', borderTop: '1px solid var(--store-border)', borderBottom: '1px solid var(--store-border)' }}>
        <div className="flex flex-col lg:flex-row lg:items-center justify-between gap-6 mx-auto w-full max-w-7xl">
          <div className="flex flex-wrap items-center gap-4 text-sm">
            {business.phone && <a href={`tel:${business.phone.replace(/\s+/g, '')}`} className="inline-flex items-center gap-2 font-medium hover:underline"><Phone className="h-4 w-4" style={{ color: 'var(--store-primary)' }} />{business.phone}</a>}
            {business.email && <a href={`mailto:${business.email}`} className="inline-flex items-center gap-2 hover:underline"><Mail className="h-4 w-4" style={{ color: 'var(--store-primary)' }} />{business.email}</a>}
            {business.address && <span className="inline-flex items-center gap-2"><MapPin className="h-4 w-4" style={{ color: 'var(--store-primary)' }} />{business.address}</span>}
            {content.opening_hours && <span className="inline-flex items-center gap-2"><Clock className="h-4 w-4" style={{ color: 'var(--store-primary)' }} />{content.opening_hours}</span>}
          </div>
          <ContactActions template={template} business={business} />
        </div>
      </section>
    )
  }

  if (variant === 'map-led') {
    const mapHref = business.maps_url || (business.address ? `https://www.google.com/maps/search/?api=1&query=${encodeURIComponent(business.address)}` : null)
    return (
      <section id="contact">
        <StoreContainer>
          <div className="grid lg:grid-cols-2 gap-8 items-stretch">
            <div className={`relative overflow-hidden min-h-[280px] flex items-end p-6 ${r}`} style={{ background: business.address ? 'linear-gradient(135deg, var(--store-primary), var(--store-secondary))' : 'var(--store-surface)', border: '1px solid var(--store-border)' }}>
              <div className="absolute inset-0 opacity-10" aria-hidden style={{ background: 'radial-gradient(circle at 30% 30%, white, transparent 60%)' }} />
              <div className="relative bg-white/95 dark:bg-gray-900/90 backdrop-blur rounded-xl p-5 max-w-sm">
                {business.address ? (
                  <>
                    <div className="flex items-start gap-3">
                      <span className="w-9 h-9 rounded-full grid place-items-center shrink-0" style={{ backgroundColor: 'var(--store-primary)', color: 'var(--store-on-primary)' }}><MapPin className="h-4 w-4" /></span>
                      <div>
                        <p className={`text-sm font-semibold ${h}`}>{business.name}</p>
                        <p className="text-sm opacity-70 mt-1 leading-snug">{business.address}</p>
                      </div>
                    </div>
                    {mapHref && <a href={mapHref} target="_blank" rel="noopener noreferrer" className={`mt-4 inline-flex items-center gap-2 px-4 py-2 text-sm font-semibold ${RADIUS_BTN[template.tokens.radius]}`} style={{ backgroundColor: 'var(--store-primary)', color: 'var(--store-on-primary)', minHeight: 40 }}>Open in Maps <ExternalLink className="h-3.5 w-3.5" /></a>}
                  </>
                ) : (
                  <p className="text-sm opacity-60">Visit us — contact for location details.</p>
                )}
                {content.opening_hours && <p className="text-xs opacity-60 mt-3 flex items-center gap-1.5"><Clock className="h-3.5 w-3.5" />{content.opening_hours}</p>}
              </div>
            </div>
            <div>
              <SectionTitle template={template}>Find us</SectionTitle>
              {business.description && <p className={`mb-6 opacity-70 ${bodyClass(template)}`}>{business.description.slice(0, 220)}</p>}
              <div className="space-y-4">
                <div className={`p-5 ${r}`} style={{ backgroundColor: 'var(--store-surface)', border: '1px solid var(--store-border)' }}>{info}</div>
                <ContactActions template={template} business={business} />
              </div>
            </div>
          </div>
        </StoreContainer>
      </section>
    )
  }

  if (variant === 'chat-led') {
    const wa = whatsappHref(business.whatsapp)
    return (
      <section id="contact">
        <StoreContainer>
          <div className={`p-6 md:p-8 ${r}`} style={{ backgroundColor: 'var(--store-surface)', border: '1px solid var(--store-border)' }}>
            <div className="grid md:grid-cols-2 gap-8 items-center">
              <div>
                <p className="text-xs font-semibold tracking-[0.18em] uppercase mb-2" style={{ color: 'var(--store-accent)' }}>Get in touch</p>
                <h3 className={`text-2xl md:text-3xl font-bold mb-3 ${h}`}>Chat with {business.name}</h3>
                <p className={`text-sm leading-relaxed opacity-70 mb-5 ${bodyClass(template)}`}>{business.description ? business.description.slice(0, 180) : 'We reply fast — message us on WhatsApp or call directly.'}</p>
                <div className="flex flex-wrap gap-3">
                  {wa && <a href={wa} target="_blank" rel="noopener noreferrer" className={`inline-flex items-center gap-2 px-6 py-3 text-sm font-bold ${RADIUS_BTN[template.tokens.radius]}`} style={{ backgroundColor: '#25D366', color: '#fff', minHeight: 48 }}><MessageCircle className="h-5 w-5" /> WhatsApp Us</a>}
                  {business.phone && <a href={`tel:${business.phone.replace(/\s+/g, '')}`} className={`inline-flex items-center gap-2 px-6 py-3 text-sm font-semibold border-2 ${RADIUS_BTN[template.tokens.radius]}`} style={{ borderColor: 'var(--store-primary)', color: 'var(--store-primary)', minHeight: 48 }}><Phone className="h-5 w-5" /> Call {business.phone}</a>}
                </div>
                {!wa && !business.phone && <p className="text-sm opacity-60 mt-2">Contact us via email for fastest response.</p>}
              </div>
              <div className={`p-5 ${r}`} style={{ backgroundColor: 'var(--store-background)', border: '1px solid var(--store-border)' }}>
                {info}
                {business.email && <div className="mt-4 pt-4 border-t" style={{ borderColor: 'var(--store-border)' }}><a href={`mailto:${business.email}`} className="text-sm font-medium hover:underline" style={{ color: 'var(--store-primary)' }}>{business.email}</a></div>}
              </div>
            </div>
          </div>
        </StoreContainer>
      </section>
    )
  }

  // panel (default): full-width tinted panel — bg matches body now, but keep full-bleed for tinted effect
  return (
    <section id="contact" className={`w-full px-4 sm:px-6 lg:px-8 py-12 md:py-16`} style={{ backgroundColor: 'var(--store-surface)' }}>
      <div className="grid md:grid-cols-2 gap-10 items-start mx-auto w-full max-w-7xl">
        <div>
          <SectionTitle template={template}>Get in touch</SectionTitle>
          {business.description && <p className={`mb-6 opacity-70 max-w-md ${bodyClass(template)}`}>{business.description}</p>}
          <ContactActions template={template} business={business} />
        </div>
        <div className={`p-6 ${r}`} style={{ backgroundColor: 'var(--store-background)', border: '1px solid var(--store-border)' }}>{info}</div>
      </div>
    </section>
  )
}

/* ---------------------------------- Footer ---------------------------------- */

const SOCIAL_ICONS: Record<string, string> = {
  facebook: 'f', instagram: 'ig', x: '𝕏', twitter: '𝕏', linkedin: 'in',
  youtube: '▶', tiktok: 'tt', whatsapp: '✆', telegram: '➤',
}

function SocialLinks({ links, dark }: { links: Array<Record<string, string>>; dark?: boolean }) {
  const clean = links.filter((l) => (l.url || '').trim() && (l.platform || '').trim())
  if (clean.length === 0) return null
  return (
    <div className="flex flex-wrap gap-2.5">
      {clean.map((l, i) => (
        <a
          key={i}
          href={l.url}
          target="_blank"
          rel="noopener noreferrer"
          aria-label={l.platform}
          title={l.platform}
          className="w-9 h-9 grid place-items-center rounded-full text-xs font-bold transition-all hover:-translate-y-0.5 hover:scale-105"
          style={{
            backgroundColor: dark ? 'rgba(255,255,255,0.12)' : 'color-mix(in srgb, var(--store-text) 8%, var(--store-background))',
            border: `1px solid ${dark ? 'rgba(255,255,255,0.15)' : 'var(--store-border)'}`,
            color: dark ? '#fff' : 'var(--store-text)',
            minWidth: 36, minHeight: 36,
          }}
        >
          {SOCIAL_ICONS[l.platform.toLowerCase()] || l.platform.slice(0, 2).toUpperCase()}
        </a>
      ))}
    </div>
  )
}

export function FooterPro({
  template, business, content, categories,
}: {
  template: StoreTemplate
  business: StoreBusinessData
  content: StoreContent
  categories: string[]
}) {
  const variant = template.tokens.footer || 'dark-columns'
  const layout = template.tokens.footerLayout || '4-col'
  const h = headingClass(template)
  const year = new Date().getFullYear()

  const isDark = variant.startsWith('dark') || variant === 'brand-band'
  const isCentered = variant === 'centered-minimal' || layout === 'centered'
  const isNewsletter = variant === 'newsletter' || layout === 'newsletter'
  const isExpanded = variant === 'expanded' || layout === 'expanded'

  // Background logic respects brand colors
  const bgStyle: React.CSSProperties = variant === 'brand-band'
    ? { background: 'linear-gradient(135deg, var(--store-secondary), var(--store-primary))' }
    : isDark
      ? { backgroundColor: 'color-mix(in srgb, var(--store-text) 94%, black)' }
      : { backgroundColor: 'var(--store-surface)', borderTop: '1px solid var(--store-border)' }
  const fg = variant === 'brand-band' ? '#fff' : isDark ? 'rgba(255,255,255,.92)' : 'var(--store-text)'
  const muted = isDark ? 'rgba(255,255,255,.68)' : 'color-mix(in srgb, var(--store-text) 64%, transparent)'
  const borderColor = isDark ? 'rgba(255,255,255,.14)' : 'var(--store-border)'

  const colTitle = `text-[11px] font-bold tracking-[0.2em] uppercase mb-5 ${h}`
  const colLink = 'block py-1.5 text-sm hover:underline underline-offset-4 transition-opacity opacity-80 hover:opacity-100'
  const initial = business.name.trim().charAt(0).toUpperCase()

  // Newsletter variant: prominent centered + subscription placeholder (no fabricated form action)
  if (isNewsletter) {
    return (
      <footer className="w-full mt-20" style={{ ...bgStyle, color: fg }}>
        <div className="px-4 sm:px-6 lg:px-8 pt-14 pb-8 max-w-6xl mx-auto w-full">
          <div className="grid lg:grid-cols-2 gap-10 items-start pb-12 border-b" style={{ borderColor }}>
            <div>
              <div className="flex items-center gap-3 mb-4">
                <LogoMark logoUrl={business.logo_url ?? null} name={business.name} />
                <span className={`font-bold text-xl tracking-tight ${h}`}>{business.name}</span>
              </div>
              {business.description && (
                <p className="text-sm leading-relaxed max-w-md" style={{ color: muted }}>{business.description.slice(0, 220)}</p>
              )}
              <div className="mt-6">
                <SocialLinks links={(content.social_links || []) as Array<Record<string, string>>} dark={isDark} />
              </div>
            </div>
            <div className={`p-6 sm:p-8 ${RADIUS_CLASS[template.tokens.radius]}`} style={{ backgroundColor: isDark ? 'rgba(255,255,255,0.07)' : 'var(--store-background)', border: `1px solid ${borderColor}` }}>
              <h4 className={colTitle} style={{ color: isDark ? '#fff' : undefined }}>Stay connected</h4>
              <p className="text-sm mb-5" style={{ color: muted }}>Get updates on new {String(template.labels?.products || 'products').toLowerCase()} and news from {business.name}.</p>
              <div className="flex flex-col sm:flex-row gap-3">
                <div className={`flex-1 px-4 py-3 text-sm ${RADIUS_BTN[template.tokens.radius]}`} style={{ backgroundColor: isDark ? 'rgba(255,255,255,0.08)' : 'var(--store-surface)', border: `1px solid ${borderColor}`, color: muted, minHeight: 44 }}>
                  Enter your email
                </div>
                <a href="#contact" className={`px-6 py-3 text-sm font-semibold text-center whitespace-nowrap ${RADIUS_BTN[template.tokens.radius]}`} style={{ backgroundColor: 'var(--store-primary)', color: 'var(--store-on-primary)', minHeight: 44, display: 'inline-flex', alignItems: 'center', justifyContent: 'center' }}>
                  Contact us
                </a>
              </div>
              <p className="text-xs mt-3" style={{ color: muted }}>We respect your inbox. Contact us directly for updates.</p>
            </div>
          </div>

          <div className="grid grid-cols-2 md:grid-cols-4 gap-8 pt-10">
            <div>
              <h4 className={colTitle} style={{ color: isDark ? '#fff' : undefined }}>{template.labels?.products || 'Products'}</h4>
              {(categories.length > 0 ? categories.slice(0, 5) : ['All products']).map((c) => (
                <a key={c} href="#products" className={colLink}>{c}</a>
              ))}
            </div>
            <div>
              <h4 className={colTitle} style={{ color: isDark ? '#fff' : undefined }}>Company</h4>
              <a href="#" className={colLink}>Home</a>
              <a href="#products" className={colLink}>{template.labels?.categories || 'Categories'}</a>
              {business.description && <a href="#about" className={colLink}>About</a>}
              {(content.story_body || '').trim() && <a href="#story" className={colLink}>Our story</a>}
              <a href="#contact" className={colLink}>Contact</a>
            </div>
            <div className="col-span-2 md:col-span-2">
              <h4 className={colTitle} style={{ color: isDark ? '#fff' : undefined }}>Contact</h4>
              <ul className="space-y-2.5 text-sm" style={{ color: muted }}>
                {business.address && <li className="flex items-start gap-2.5 leading-snug"><MapPin className="h-4 w-4 mt-0.5 shrink-0" style={{ color: 'var(--store-primary)' }} /><span>{business.address}</span></li>}
                {business.phone && <li className="flex items-center gap-2.5"><Phone className="h-4 w-4 shrink-0" style={{ color: 'var(--store-primary)' }} /><a href={`tel:${business.phone.replace(/\s+/g, '')}`} className="hover:underline font-medium" style={{ color: fg }}>{business.phone}</a></li>}
                {business.email && <li className="flex items-center gap-2.5"><Mail className="h-4 w-4 shrink-0" style={{ color: 'var(--store-primary)' }} /><a href={`mailto:${business.email}`} className="hover:underline break-all" style={{ color: fg }}>{business.email}</a></li>}
                {content.opening_hours && <li className="flex items-start gap-2.5"><Clock className="h-4 w-4 mt-0.5 shrink-0" style={{ color: 'var(--store-primary)' }} /><span>{content.opening_hours}</span></li>}
              </ul>
            </div>
          </div>

          <div className="mt-10 pt-6 flex flex-col sm:flex-row items-center justify-between gap-3 text-xs border-t" style={{ borderColor, color: muted }}>
            <span>© {year} {business.name}. All rights reserved.</span>
            <span className="opacity-60">Powered by IMBARAGA</span>
          </div>
        </div>
      </footer>
    )
  }

  // Expanded variant: 5-column rich footer
  if (isExpanded) {
    return (
      <footer className="w-full mt-20" style={{ ...bgStyle, color: fg }}>
        <div className="px-4 sm:px-6 lg:px-8 pt-14 pb-8 max-w-7xl mx-auto w-full">
          <div className="grid gap-10 lg:grid-cols-12">
            <div className="lg:col-span-4">
              <div className="flex items-center gap-3">
                <LogoMark logoUrl={business.logo_url ?? null} name={business.name} />
                <span className={`font-bold text-xl tracking-tight ${h}`}>{business.name}</span>
              </div>
              {business.description && (
                <p className="mt-4 text-sm leading-relaxed max-w-md" style={{ color: muted }}>{business.description.slice(0, 260)}</p>
              )}
              <div className="mt-6 flex flex-wrap gap-2">
                <a href="#products" className={`inline-flex items-center justify-center px-5 py-2.5 text-sm font-semibold ${RADIUS_BTN[template.tokens.radius]}`} style={{ backgroundColor: 'var(--store-primary)', color: 'var(--store-on-primary)', minHeight: 44 }}>
                  {template.labels?.cta || 'Shop now'}
                </a>
                <a href="#contact" className={`inline-flex items-center justify-center px-5 py-2.5 text-sm font-semibold border ${RADIUS_BTN[template.tokens.radius]}`} style={{ borderColor, color: fg, minHeight: 44 }}>
                  Contact
                </a>
              </div>
              <div className="mt-6">
                <SocialLinks links={(content.social_links || []) as Array<Record<string, string>>} dark={isDark} />
              </div>
            </div>

            <div className="lg:col-span-8 grid grid-cols-2 sm:grid-cols-3 gap-8">
              <div>
                <h4 className={colTitle} style={{ color: isDark ? '#fff' : undefined }}>{template.labels?.products || 'Products'}</h4>
                {(categories.length > 0 ? categories.slice(0, 6) : ['All products']).map((c) => (
                  <a key={c} href="#products" className={colLink}>{c}</a>
                ))}
              </div>
              <div>
                <h4 className={colTitle} style={{ color: isDark ? '#fff' : undefined }}>Company</h4>
                <a href="#" className={colLink}>Home</a>
                <a href="#products" className={colLink}>{template.labels?.categories || 'Categories'}</a>
                {business.description && <a href="#about" className={colLink}>About</a>}
                {(content.story_body || '').trim() && <a href="#story" className={colLink}>Our story</a>}
                <a href="#contact" className={colLink}>Contact</a>
                <a href="#faq" className={colLink}>FAQ</a>
              </div>
              <div className="col-span-2 sm:col-span-1">
                <h4 className={colTitle} style={{ color: isDark ? '#fff' : undefined }}>Contact</h4>
                <ul className="space-y-2.5 text-sm" style={{ color: muted }}>
                  {business.address && <li className="flex items-start gap-2.5"><MapPin className="h-4 w-4 mt-0.5 shrink-0" style={{ color: 'var(--store-primary)' }} /><span>{business.address}</span></li>}
                  {business.phone && <li><a href={`tel:${business.phone.replace(/\s+/g, '')}`} className="hover:underline font-medium" style={{ color: fg }}>{business.phone}</a></li>}
                  {business.email && <li><a href={`mailto:${business.email}`} className="hover:underline break-all text-xs sm:text-sm" style={{ color: fg }}>{business.email}</a></li>}
                  {content.opening_hours && <li className="flex items-start gap-2.5 text-xs sm:text-sm"><Clock className="h-4 w-4 mt-0.5 shrink-0" style={{ color: 'var(--store-primary)' }} /><span>{content.opening_hours}</span></li>}
                  {business.website_url && <li className="flex items-start gap-2.5"><ExternalLink className="h-4 w-4 mt-0.5 shrink-0" style={{ color: 'var(--store-primary)' }} /><a href={business.website_url} target="_blank" rel="noopener noreferrer" className="hover:underline break-all" style={{ color: fg }}>{business.website_url.replace(/^https?:\/\//, '')}</a></li>}
                </ul>
              </div>
            </div>
          </div>
          <div className="mt-12 pt-6 flex flex-col sm:flex-row items-center justify-between gap-3 text-xs border-t" style={{ borderColor, color: muted }}>
            <span className="text-center sm:text-left">© {year} {business.name}. All rights reserved. <span className="hidden sm:inline">—</span> <span className="block sm:inline mt-1 sm:mt-0">{business.tagline || ''}</span></span>
            <span className="opacity-60 shrink-0">Powered by IMBARAGA</span>
          </div>
        </div>
      </footer>
    )
  }

  // Centered minimal: editorial focus
  if (isCentered) {
    return (
      <footer className="w-full mt-20" style={{ ...bgStyle, color: fg }}>
        <div className="px-4 sm:px-6 lg:px-8 py-16 max-w-2xl mx-auto w-full text-center">
          <div className="flex items-center justify-center gap-3">
            <LogoMark logoUrl={business.logo_url ?? null} name={business.name} />
            <span className={`font-bold text-2xl tracking-tight ${h}`}>{business.name}</span>
          </div>
          {business.description && (
            <p className="mt-5 text-sm leading-relaxed max-w-xl mx-auto" style={{ color: muted }}>
              {business.description.slice(0, 280)}
            </p>
          )}
          <div className="mt-8 flex flex-wrap justify-center gap-3">
            <a href="#products" className={`inline-flex items-center justify-center px-6 py-3 text-sm font-semibold ${RADIUS_BTN[template.tokens.radius]}`} style={{ backgroundColor: 'var(--store-primary)', color: 'var(--store-on-primary)', minHeight: 44 }}>
              {template.labels?.cta || 'Explore'}
            </a>
            <a href="#contact" className={`inline-flex items-center justify-center px-6 py-3 text-sm font-semibold border ${RADIUS_BTN[template.tokens.radius]}`} style={{ borderColor, color: fg, minHeight: 44 }}>
              Get in touch
            </a>
          </div>
          <div className="mt-8 flex justify-center">
            <SocialLinks links={(content.social_links || []) as Array<Record<string, string>>} dark={isDark} />
          </div>
          {(business.phone || business.email || business.address) && (
            <div className="mt-8 pt-8 border-t flex flex-col items-center gap-2 text-sm" style={{ borderColor, color: muted }}>
              {business.address && <span className="flex items-center gap-2"><MapPin className="h-3.5 w-3.5" />{business.address}</span>}
              <span className="flex flex-wrap justify-center gap-x-4 gap-y-1">
                {business.phone && <a href={`tel:${business.phone.replace(/\s+/g, '')}`} className="hover:underline" style={{ color: fg }}>{business.phone}</a>}
                {business.email && <a href={`mailto:${business.email}`} className="hover:underline" style={{ color: fg }}>{business.email}</a>}
              </span>
            </div>
          )}
          <div className="mt-8 pt-6 text-xs flex flex-col items-center gap-1 border-t" style={{ borderColor, color: muted }}>
            <span>© {year} {business.name}. All rights reserved.</span>
            <span className="opacity-60">Powered by IMBARAGA</span>
          </div>
        </div>
      </footer>
    )
  }

  // Default: grid adapts to footerLayout
  const gridCols = layout === '3-col' ? 'md:grid-cols-3' : layout === '2-col' ? 'md:grid-cols-2' : 'md:grid-cols-4'
  const brandSpan = layout === '2-col' ? 'md:col-span-1' : 'md:col-span-1'

  return (
    <footer className="w-full mt-20" style={{ ...bgStyle, color: fg }}>
      <div className={`px-4 sm:px-6 lg:px-8 pt-12 pb-8 max-w-7xl mx-auto w-full grid gap-10 ${gridCols}`}>
        {/* Brand column */}
        <div className={brandSpan}>
          <div className="flex items-center gap-3">
            <LogoMark logoUrl={business.logo_url ?? null} name={business.name} />
            <span className={`font-bold text-lg leading-none ${h}`}>{business.name}</span>
          </div>
          {template.tokens.footerLayout === '4-col' && business.tagline && (
            <p className="mt-2 text-xs font-medium tracking-wide uppercase" style={{ color: 'var(--store-accent)' }}>{String(business.tagline).slice(0, 60)}</p>
          )}
          {business.description && (
            <p className="mt-4 text-sm leading-relaxed line-clamp-4" style={{ color: muted }}>
              {business.description.slice(0, 220)}
            </p>
          )}
          <div className="mt-5">
            <SocialLinks links={(content.social_links || []) as Array<Record<string, string>>} dark={isDark} />
          </div>
        </div>

        {/* Products column */}
        <div>
          <h4 className={colTitle} style={{ color: isDark ? '#fff' : undefined }}>{template.labels?.products || 'Products'}</h4>
          {(categories.length > 0 ? categories.slice(0, 5) : ['All products']).map((c) => (
            <a key={c} href="#products" className={colLink}>{c}</a>
          ))}
        </div>

        {/* Company column */}
        <div>
          <h4 className={colTitle} style={{ color: isDark ? '#fff' : undefined }}>Company</h4>
          <a href="#" className={colLink}>Home</a>
          <a href="#products" className={colLink}>{template.labels?.categories || 'Categories'}</a>
          {business.description && <a href="#about" className={colLink}>About</a>}
          {(content.story_body || '').trim() && <a href="#story" className={colLink}>Our story</a>}
          <a href="#contact" className={colLink}>Contact</a>
          {(content.faqs || []).length > 0 && <a href="#faq" className={colLink}>FAQ</a>}
        </div>

        {/* Contact column - hidden on 3-col layout to keep density right, shown on 4-col and 2-col */}
        {(layout === '4-col' || layout === '2-col') && (
          <div>
            <h4 className={colTitle} style={{ color: isDark ? '#fff' : undefined }}>Contact</h4>
            <ul className="space-y-2.5 text-sm" style={{ color: muted }}>
              {business.address && <li className="flex items-start gap-2 leading-snug"><MapPin className="h-3.5 w-3.5 mt-0.5 shrink-0" style={{ color: 'var(--store-primary)' }} /><span>{business.address}</span></li>}
              {business.phone && <li className="flex items-center gap-2"><Phone className="h-3.5 w-3.5 shrink-0" style={{ color: 'var(--store-primary)' }} /><a href={`tel:${business.phone.replace(/\s+/g, '')}`} className="hover:underline font-medium" style={{ color: fg }}>{business.phone}</a></li>}
              {business.email && <li><a href={`mailto:${business.email}`} className="hover:underline break-all text-xs" style={{ color: fg }}>{business.email}</a></li>}
              {content.opening_hours && <li className="flex items-start gap-2"><Clock className="h-3.5 w-3.5 mt-0.5 shrink-0" style={{ color: 'var(--store-primary)' }} /><span>{content.opening_hours}</span></li>}
            </ul>
            {/* Quick CTA in footer */}
            <div className="mt-5 flex flex-wrap gap-2">
              {business.phone && <a href={`tel:${business.phone.replace(/\s+/g, '')}`} className={`inline-flex items-center gap-1.5 px-3 py-2 text-xs font-semibold ${RADIUS_BTN[template.tokens.radius]}`} style={{ backgroundColor: isDark ? 'rgba(255,255,255,0.12)' : 'var(--store-surface)', border: `1px solid ${borderColor}`, color: fg, minHeight: 36 }}><Phone className="h-3.5 w-3.5" /> Call</a>}
              {business.whatsapp && <a href={`https://wa.me/${String(business.whatsapp).replace(/\s+/g, '')}`} target="_blank" rel="noopener noreferrer" className={`inline-flex items-center gap-1.5 px-3 py-2 text-xs font-semibold ${RADIUS_BTN[template.tokens.radius]}`} style={{ backgroundColor: '#25D366', color: '#fff', minHeight: 36 }}><MessageCircle className="h-3.5 w-3.5" /> WhatsApp</a>}
            </div>
          </div>
        )}
        {layout === '3-col' && (
          <div>
            <h4 className={colTitle} style={{ color: isDark ? '#fff' : undefined }}>Contact</h4>
            <ul className="space-y-2 text-sm" style={{ color: muted }}>
              {business.address && <li className="flex items-start gap-2"><MapPin className="h-3.5 w-3.5 mt-0.5 shrink-0" style={{ color: 'var(--store-primary)' }} /><span>{business.address}</span></li>}
              {business.phone && <li><a href={`tel:${business.phone.replace(/\s+/g, '')}`} className="hover:underline" style={{ color: fg }}>{business.phone}</a></li>}
              {business.email && <li><a href={`mailto:${business.email}`} className="hover:underline break-all" style={{ color: fg }}>{business.email}</a></li>}
              {content.opening_hours && <li className="flex items-start gap-2"><Clock className="h-3.5 w-3.5 mt-0.5 shrink-0" style={{ color: 'var(--store-primary)' }} /><span>{content.opening_hours}</span></li>}
            </ul>
          </div>
        )}
      </div>

      <div className="mx-auto w-full max-w-7xl px-4 sm:px-6 lg:px-8 py-5 text-xs flex flex-col sm:flex-row items-center justify-between gap-2 border-t" style={{ borderColor, color: muted }}>
        <span>© {year} {business.name}. All rights reserved.</span>
        <span className="opacity-60">Powered by IMBARAGA</span>
      </div>
    </footer>
  )
}