import { useState, useEffect, useRef } from 'react'
import { Link, useNavigate } from 'react-router-dom'
import { ArrowRight, ChevronLeft, ChevronRight, Stethoscope, HeartPulse, Ticket, Star, Tag, TrendingDown, MapPin, Users, Clock } from 'lucide-react'
import { PromoAPI, RaffleAPI, ClubAPI, JobsAPI } from '../api'
import { useTenantCtx } from '../context/TenantContext'

function WhatsAppIcon({ size = 24, style }: { size?: number; style?: React.CSSProperties }) {
  return (
    <svg width={size} height={size} viewBox="0 0 24 24" fill="currentColor" style={style}>
      <path d="M17.472 14.382c-.297-.149-1.758-.867-2.03-.967-.273-.099-.471-.148-.67.15-.197.297-.767.966-.94 1.164-.173.199-.347.223-.644.075-.297-.15-1.255-.463-2.39-1.475-.883-.788-1.48-1.761-1.653-2.059-.173-.297-.018-.458.13-.606.134-.133.298-.347.446-.52.149-.174.198-.298.298-.497.099-.198.05-.371-.025-.52-.075-.149-.669-1.612-.916-2.207-.242-.579-.487-.5-.669-.51-.173-.008-.371-.01-.57-.01-.198 0-.52.074-.792.372-.272.297-1.04 1.016-1.04 2.479 0 1.462 1.065 2.875 1.213 3.074.149.198 2.096 3.2 5.077 4.487.709.306 1.262.489 1.694.625.712.227 1.36.195 1.871.118.571-.085 1.758-.719 2.006-1.413.248-.694.248-1.289.173-1.413-.074-.124-.272-.198-.57-.347m-5.421 7.403h-.004a9.87 9.87 0 01-5.031-1.378l-.361-.214-3.741.982.998-3.648-.235-.374a9.86 9.86 0 01-1.51-5.26c.001-5.45 4.436-9.884 9.888-9.884 2.64 0 5.122 1.03 6.988 2.898a9.825 9.825 0 012.893 6.994c-.003 5.45-4.437 9.884-9.885 9.884m8.413-18.297A11.815 11.815 0 0012.05 0C5.495 0 .16 5.335.157 11.892c0 2.096.547 4.142 1.588 5.945L.057 24l6.305-1.654a11.882 11.882 0 005.683 1.448h.005c6.554 0 11.89-5.335 11.893-11.893a11.821 11.821 0 00-3.48-8.413z"/>
    </svg>
  )
}

// ── Hero Slider ───────────────────────────────────────────────────────────────

const SLIDES = [
  {
    id: 'promo',
    tag: 'Promoções Exclusivas',
    title: 'As melhores ofertas para você e sua família',
    sub: 'Acesse promoções especiais e economize todos os dias.',
    cta: { label: 'Ver Promoções', href: '#promocoes', to: null as string | null },
    gradient: 'from-amber-900/40 via-black to-black',
    accent: '#f59e0b',
    icon: Star,
  },
  {
    id: 'sorteio',
    tag: 'Sorteios',
    title: 'Ganhe prêmios incríveis participando dos nossos sorteios',
    sub: 'Números a partir de R$ 5,00. Pague via PIX e garanta sua chance!',
    cta: { label: 'Participar Agora', href: null as string | null, to: '/raffle' },
    gradient: 'from-cyan-900/40 via-black to-black',
    accent: '#06b6d4',
    icon: Ticket,
  },
  {
    id: 'clube',
    tag: 'Clube de Benefícios',
    title: 'Saúde odontológica e médica por um valor acessível',
    sub: 'Clube Odonto e Clube Médico. Assine agora e tenha desconto em clínicas parceiras.',
    cta: { label: 'Conhecer Clubes', href: null as string | null, to: '/clube/odonto' },
    gradient: 'from-violet-900/40 via-black to-black',
    accent: '#8b5cf6',
    icon: HeartPulse,
  },
  {
    id: 'whatsapp',
    tag: 'Atendimento',
    title: 'Fale com a gente pelo WhatsApp',
    sub: 'Tire dúvidas, faça pedidos e receba suporte direto no seu WhatsApp. Rápido e fácil!',
    cta: { label: 'Chamar no WhatsApp', href: 'https://wa.me/556799138694', to: null as string | null },
    gradient: 'from-green-900/40 via-black to-black',
    accent: '#25d366',
    icon: null,
  },
]

function HeroSlider() {
  const [idx, setIdx] = useState(0)
  const timerRef = useRef<ReturnType<typeof setInterval> | null>(null)
  const navigate = useNavigate()

  function reset() {
    clearInterval(timerRef.current!)
    timerRef.current = setInterval(() => setIdx(i => (i + 1) % SLIDES.length), 5000)
  }

  useEffect(() => { reset(); return () => clearInterval(timerRef.current!) }, [])

  const s = SLIDES[idx]
  const Icon = s.icon

  return (
    <section className={`relative min-h-[60vh] md:min-h-[88vh] flex items-center bg-gradient-to-br ${s.gradient} overflow-hidden transition-all duration-700`}>
      {/* Ambient orbs */}
      <div className="absolute inset-0 pointer-events-none overflow-hidden">
        <div className="absolute -top-32 -left-32 w-[500px] h-[500px] rounded-full blur-3xl opacity-10"
          style={{ background: s.accent }} />
        <div className="absolute -bottom-32 -right-32 w-[400px] h-[400px] rounded-full blur-3xl opacity-5"
          style={{ background: s.accent }} />
        {/* Grid pattern */}
        <div className="absolute inset-0 opacity-[0.03]"
          style={{ backgroundImage: 'linear-gradient(rgba(255,255,255,.5) 1px, transparent 1px), linear-gradient(90deg, rgba(255,255,255,.5) 1px, transparent 1px)', backgroundSize: '60px 60px' }} />
      </div>

      <div className="relative z-10 max-w-6xl mx-auto px-4 sm:px-6 py-12 md:py-28 w-full">
        <div className="max-w-2xl">
          <span className="inline-flex items-center gap-2 text-xs font-black uppercase tracking-widest text-slate-400 bg-white/5 border border-white/10 px-3 py-1.5 rounded-full mb-4 md:mb-6">
            {s.id === 'whatsapp'
              ? <WhatsAppIcon size={12} style={{ color: s.accent }} />
              : Icon && <Icon size={12} style={{ color: s.accent }} />
            } {s.tag}
          </span>
          <h1 className="text-3xl sm:text-5xl md:text-7xl font-black text-white tracking-tighter leading-[1.05] mb-4 md:mb-5">
            {s.title}
          </h1>
          <p className="text-slate-400 text-base md:text-lg mb-6 md:mb-10 leading-relaxed max-w-lg">{s.sub}</p>
          {s.cta.to ? (
            <button
              onClick={() => navigate(s.cta.to!)}
              className="inline-flex items-center gap-2 px-6 py-3 md:px-8 md:py-4 rounded-2xl font-black text-sm tracking-wide transition-all hover:scale-105 hover:shadow-2xl cursor-pointer"
              style={{ background: s.accent, color: '#000', boxShadow: `0 0 40px ${s.accent}40` }}>
              {s.cta.label} <ArrowRight size={16} />
            </button>
          ) : (
            <a href={s.cta.href!}
              target={s.cta.href?.startsWith('http') ? '_blank' : undefined}
              rel={s.cta.href?.startsWith('http') ? 'noopener noreferrer' : undefined}
              className="inline-flex items-center gap-2 px-6 py-3 md:px-8 md:py-4 rounded-2xl font-black text-sm tracking-wide transition-all hover:scale-105 hover:shadow-2xl"
              style={{ background: s.accent, color: '#fff', boxShadow: `0 0 40px ${s.accent}40` }}>
              {s.id === 'whatsapp' ? <WhatsAppIcon size={18} /> : <ArrowRight size={16} />}
              {s.cta.label}
            </a>
          )}
        </div>
      </div>

      {/* Slide controls */}
      <div className="absolute bottom-8 left-1/2 -translate-x-1/2 flex items-center gap-4 z-20">
        <button onClick={() => { setIdx(i => (i - 1 + SLIDES.length) % SLIDES.length); reset() }}
          className="p-2 rounded-full bg-white/10 hover:bg-white/20 text-white transition-colors backdrop-blur-sm">
          <ChevronLeft size={16} />
        </button>
        <div className="flex gap-2">
          {SLIDES.map((sl, i) => (
            <button key={i} onClick={() => { setIdx(i); reset() }}
              className="h-1 rounded-full transition-all duration-300"
              style={{
                width: i === idx ? '28px' : '8px',
                background: i === idx ? sl.accent : 'rgba(255,255,255,0.2)',
              }} />
          ))}
        </div>
        <button onClick={() => { setIdx(i => (i + 1) % SLIDES.length); reset() }}
          className="p-2 rounded-full bg-white/10 hover:bg-white/20 text-white transition-colors backdrop-blur-sm">
          <ChevronRight size={16} />
        </button>
      </div>
    </section>
  )
}

// ── Promotions Section ────────────────────────────────────────────────────────

interface Promo {
  id: number; nome: string; descricao?: string
  preco_original?: string | number; preco_promocional?: string | number; imagem?: string
}

function PromoCard({ p }: { p: Promo }) {
  const original  = p.preco_original  ? Number(p.preco_original)  : null
  const promo     = p.preco_promocional ? Number(p.preco_promocional) : null
  const discount  = original && promo ? Math.round((1 - promo / original) * 100) : null
  const hasImage  = p.imagem && p.imagem.trim() !== ''

  return (
    <div className="group relative bg-slate-900 border border-slate-800/80 rounded-2xl overflow-hidden hover:border-slate-600 hover:-translate-y-1 transition-all duration-300 cursor-pointer">
      {/* Image or placeholder */}
      <div className="relative h-44 overflow-hidden bg-slate-800">
        {hasImage ? (
          <img src={p.imagem} alt={p.nome}
            className="w-full h-full object-cover group-hover:scale-105 transition-transform duration-500" />
        ) : (
          <div className="w-full h-full flex items-center justify-center">
            <Tag size={36} className="text-slate-700" />
          </div>
        )}
        {/* Gradient overlay */}
        {hasImage && (
          <div className="absolute inset-0 bg-gradient-to-t from-slate-900/90 via-slate-900/20 to-transparent" />
        )}
        {/* Discount badge */}
        {discount && discount > 0 && (
          <div className="absolute top-3 right-3 flex items-center gap-1 bg-emerald-500 text-white text-xs font-black px-2.5 py-1 rounded-full shadow-lg">
            <TrendingDown size={10} />
            -{discount}%
          </div>
        )}
      </div>

      {/* Content */}
      <div className="p-4">
        <h3 className="font-black text-white text-sm leading-tight mb-1 group-hover:text-slate-100 transition-colors">
          {p.nome}
        </h3>
        {p.descricao && (
          <p className="text-slate-500 text-xs leading-relaxed line-clamp-2 mb-3">{p.descricao}</p>
        )}

        {/* Price */}
        {promo !== null && (
          <div className="flex items-end gap-2 mt-auto">
            <span className="text-xl font-black" style={{ color: 'var(--primary)' }}>
              R$ {promo.toFixed(2).replace('.', ',')}
            </span>
            {original !== null && original > promo && (
              <span className="text-xs text-slate-600 line-through pb-0.5">
                R$ {original.toFixed(2).replace('.', ',')}
              </span>
            )}
          </div>
        )}
      </div>
    </div>
  )
}

function PromotionsSection() {
  const [promos, setPromos] = useState<Promo[]>([])

  useEffect(() => {
    PromoAPI.list().then(d => setPromos(d?.slice(0, 6) || [])).catch(() => {})
  }, [])

  if (!promos.length) return null

  return (
    <section id="promocoes" className="py-16 md:py-24 max-w-6xl mx-auto px-4 sm:px-6">
      {/* Header */}
      <div className="flex flex-wrap items-end justify-between gap-3 mb-8 md:mb-10">
        <div>
          <span className="text-xs font-black uppercase tracking-widest mb-2 block" style={{ color: 'var(--primary)' }}>
            Ofertas da semana
          </span>
          <h2 className="text-3xl md:text-4xl font-black text-white tracking-tighter">Promoções</h2>
          <p className="text-slate-500 mt-1.5">Descontos exclusivos para clientes cadastrados</p>
        </div>
        <a href="/app/catalogo"
          className="flex items-center gap-2 text-sm font-bold px-4 py-2 rounded-xl border border-amber-500/30 text-amber-400 hover:bg-amber-500/10 transition-colors">
          Ver catálogo completo →
        </a>
      </div>

      {/* Grid — first card large, rest normal */}
      <div className="grid grid-cols-2 md:grid-cols-3 gap-4">
        {promos.map((p, i) => (
          <div key={p.id} className={i === 0 ? 'col-span-2 md:col-span-1 md:row-span-1' : ''}>
            <PromoCard p={p} />
          </div>
        ))}
      </div>
    </section>
  )
}

// ── Raffle Preview Section ────────────────────────────────────────────────────

interface RaffleItem {
  id: number; titulo: string; descricao?: string
  preco_numero?: string | number; total_numeros?: number
  status: string; image_url?: string
}

function RafflePreviewSection() {
  const [raffles, setRaffles] = useState<RaffleItem[]>([])

  useEffect(() => {
    RaffleAPI.list().then(d =>
      setRaffles(d?.filter((r: RaffleItem) => r.status === 'active')?.slice(0, 3) || [])
    ).catch(() => {})
  }, [])

  if (!raffles.length) return null

  return (
    <section className="py-16 md:py-24 bg-slate-950/60">
      <div className="max-w-6xl mx-auto px-4 sm:px-6">
        {/* Header */}
        <div className="flex flex-wrap items-end justify-between gap-3 mb-8 md:mb-10">
          <div>
            <span className="text-xs font-black uppercase tracking-widest mb-2 block" style={{ color: '#06b6d4' }}>
              Participe agora
            </span>
            <h2 className="text-3xl md:text-4xl font-black text-white tracking-tighter">Sorteios Ativos</h2>
            <p className="text-slate-500 mt-1.5">Concorra a prêmios incríveis com números a partir de R$ 5,00</p>
          </div>
          <Link to="/raffle"
            className="hidden md:flex items-center gap-1.5 text-sm font-bold transition-colors hover:opacity-80"
            style={{ color: 'var(--primary)' }}>
            Ver todos <ArrowRight size={14} />
          </Link>
        </div>

        <div className="grid grid-cols-1 md:grid-cols-3 gap-5">
          {raffles.map(r => {
            const price = Number(r.preco_numero || 0)
            return (
              <Link key={r.id} to={`/raffle?id=${r.id}`}
                className="group relative bg-slate-900 border border-slate-800 rounded-3xl overflow-hidden hover:border-slate-600 hover:-translate-y-1.5 transition-all duration-300">
                {/* Banner / placeholder */}
                <div className="h-44 bg-gradient-to-br from-cyan-950/60 to-slate-900 relative overflow-hidden flex items-center justify-center">
                  {r.image_url ? (
                    <img src={r.image_url} alt={r.titulo} className="w-full h-full object-cover group-hover:scale-105 transition-transform duration-500" />
                  ) : (
                    <Ticket size={48} className="text-cyan-900 group-hover:text-cyan-800 transition-colors" />
                  )}
                  <div className="absolute inset-0 bg-gradient-to-t from-slate-900/80 to-transparent" />
                  {/* Active pill */}
                  <span className="absolute top-3 left-3 text-xs font-black px-2.5 py-1 rounded-full bg-emerald-500/15 text-emerald-400 border border-emerald-500/25 backdrop-blur-sm">
                    🟢 Ativo
                  </span>
                </div>

                <div className="p-5">
                  <h3 className="font-black text-white text-base leading-tight mb-1 truncate">{r.titulo}</h3>
                  {r.descricao && (
                    <p className="text-slate-500 text-xs line-clamp-2 mb-4">{r.descricao}</p>
                  )}
                  <div className="flex items-center justify-between mt-2">
                    <div>
                      <p className="text-xs text-slate-600 font-medium">Número por</p>
                      <p className="text-2xl font-black" style={{ color: 'var(--primary)' }}>
                        R$ {price.toFixed(2).replace('.', ',')}
                      </p>
                    </div>
                    <div className="flex items-center gap-1.5 text-xs font-black px-3 py-2 rounded-xl border border-slate-700 text-slate-400 group-hover:border-slate-500 transition-colors">
                      Participar <ArrowRight size={12} />
                    </div>
                  </div>
                </div>
              </Link>
            )
          })}
        </div>

        <div className="mt-6 text-center md:hidden">
          <Link to="/raffle"
            className="inline-flex items-center gap-1.5 text-sm font-bold transition-colors hover:opacity-80"
            style={{ color: 'var(--primary)' }}>
            Ver todos os sorteios <ArrowRight size={14} />
          </Link>
        </div>
      </div>
    </section>
  )
}

// ── Club Preview Section ──────────────────────────────────────────────────────

function ClubSection() {
  const [clubs, setClubs] = useState<any[]>([])

  useEffect(() => {
    ClubAPI.list().then(setClubs).catch(() => {})
  }, [])

  const clubIcons: Record<string, any>    = { odonto: Stethoscope, medico: HeartPulse }
  const clubColors: Record<string, string> = { odonto: '#06b6d4', medico: '#8b5cf6' }
  const clubTags: Record<string, string>   = { odonto: 'Saúde bucal', medico: 'Saúde geral' }

  if (!clubs.length) return null

  return (
    <section className="py-16 md:py-24 max-w-6xl mx-auto px-4 sm:px-6">
      <div className="mb-8 md:mb-10">
        <span className="text-xs font-black uppercase tracking-widest mb-2 block" style={{ color: '#8b5cf6' }}>
          Planos de saúde acessíveis
        </span>
        <h2 className="text-3xl md:text-4xl font-black text-white tracking-tighter">Clube de Benefícios</h2>
        <p className="text-slate-500 mt-1.5">Descontos em clínicas parceiras por uma mensalidade acessível</p>
      </div>
      <div className="grid grid-cols-1 md:grid-cols-2 gap-6">
        {clubs.map(c => {
          const Icon     = clubIcons[c.slug] || HeartPulse
          const color    = clubColors[c.slug] || '#06b6d4'
          const tag      = clubTags[c.slug]   || 'Benefícios'
          const minPrice = c.plans?.length
            ? Math.min(...c.plans.map((p: any) => Number(p.price_monthly)))
            : null

          return (
            <Link key={c.id} to={`/clube/${c.slug}`}
              className="relative bg-slate-900 border border-slate-800 rounded-3xl p-8 hover:border-slate-600 hover:-translate-y-1 transition-all overflow-hidden group">
              {/* Background glow */}
              <div className="absolute top-0 right-0 w-64 h-64 rounded-full blur-3xl opacity-[0.08] group-hover:opacity-[0.15] transition-opacity duration-500"
                style={{ background: color }} />

              <div className="relative z-10">
                <div className="flex items-start justify-between mb-5">
                  <div className="w-14 h-14 rounded-2xl flex items-center justify-center"
                    style={{ background: `${color}18`, border: `1px solid ${color}30`, color }}>
                    <Icon size={26} />
                  </div>
                  <span className="text-xs font-bold px-3 py-1.5 rounded-full border"
                    style={{ color, borderColor: `${color}40`, background: `${color}0f` }}>
                    {tag}
                  </span>
                </div>

                <h3 className="text-2xl font-black text-white mb-2">{c.name}</h3>
                {c.description && <p className="text-slate-400 text-sm mb-4 leading-relaxed">{c.description}</p>}

                {minPrice !== null && (
                  <div className="mb-5">
                    <p className="text-xs text-slate-600">A partir de</p>
                    <p className="text-3xl font-black text-white">
                      R$ {Number(minPrice).toFixed(2).replace('.', ',')}
                      <span className="text-sm font-normal text-slate-500">/mês</span>
                    </p>
                  </div>
                )}

                <div className="flex items-center gap-2 text-sm font-black" style={{ color }}>
                  Conhecer planos <ArrowRight size={14} />
                </div>
              </div>
            </Link>
          )
        })}
      </div>
    </section>
  )
}

// ── Vagas Section ─────────────────────────────────────────────────────────────

const WORK_MODE_COLORS_LANDING: Record<string, string> = {
  remoto: 'bg-emerald-500/15 text-emerald-400 border-emerald-500/20',
  hibrido: 'bg-blue-500/15 text-blue-400 border-blue-500/20',
  presencial: 'bg-amber-500/15 text-amber-400 border-amber-500/20',
}
const WORK_MODE_LABELS_LANDING: Record<string, string> = { remoto: 'Remoto', hibrido: 'Híbrido', presencial: 'Presencial' }

function VagasSection() {
  const [jobs, setJobs] = useState<any[]>([])
  const tenant = useTenantCtx()

  useEffect(() => {
    JobsAPI.list({ limit: 6 })
      .then(res => setJobs(res.jobs || []))
      .catch(() => {})
  }, [])

  if (!jobs.length) return null

  function fmtSalary(min: number | null, max: number | null, hide: boolean) {
    if (hide || (!min && !max)) return 'A combinar'
    const fmt = (v: number) => `R$ ${Number(v).toLocaleString('pt-BR', { maximumFractionDigits: 0 })}`
    if (min && max) return `${fmt(min)} – ${fmt(max)}`
    if (min)        return `A partir de ${fmt(min)}`
    return `Até ${fmt(max!)}`
  }

  function timeAgo(s: string) {
    const days = Math.floor((Date.now() - new Date(s).getTime()) / 86400000)
    if (days === 0) return 'Hoje'
    if (days === 1) return 'Ontem'
    if (days < 7) return `${days}d atrás`
    return `${Math.floor(days / 7)}sem atrás`
  }

  return (
    <section className="py-16 md:py-24 bg-slate-950/50">
      <div className="max-w-6xl mx-auto px-4 sm:px-6">
        {/* Header */}
        <div className="flex flex-wrap items-end justify-between gap-3 mb-8 md:mb-10">
          <div>
            <span className="text-xs font-black uppercase tracking-widest mb-2 block" style={{ color: tenant.primary_color }}>
              Oportunidades
            </span>
            <h2 className="text-3xl md:text-4xl font-black text-white tracking-tighter">Vagas de Emprego</h2>
            <p className="text-slate-500 mt-1.5">Encontre sua próxima oportunidade profissional</p>
          </div>
          <Link to="/vagas"
            className="hidden md:flex items-center gap-1.5 text-sm font-bold transition-colors hover:opacity-80"
            style={{ color: tenant.primary_color }}>
            Ver todas <ArrowRight size={14} />
          </Link>
        </div>

        {/* Grid */}
        <div className="grid grid-cols-1 md:grid-cols-2 xl:grid-cols-3 gap-4">
          {jobs.map(j => (
            <Link key={j.id} to={`/vagas/${j.id}`}
              className="group bg-slate-900 border border-slate-800 hover:border-slate-700 rounded-2xl p-5 transition-all hover:-translate-y-0.5">
              <div className="flex items-start justify-between gap-2 mb-3">
                <h3 className="font-black text-white text-sm leading-tight group-hover:text-amber-400 transition-colors">{j.title}</h3>
                <span className={`text-[10px] font-black px-2 py-0.5 rounded border shrink-0 ${WORK_MODE_COLORS_LANDING[j.work_mode] || 'bg-slate-700 text-slate-400 border-slate-600'}`}>
                  {WORK_MODE_LABELS_LANDING[j.work_mode] || j.work_mode}
                </span>
              </div>

              <div className="flex flex-wrap gap-x-3 gap-y-1 text-xs text-slate-500 mb-4">
                {j.location && <span className="flex items-center gap-1"><MapPin size={10} /> {j.location}</span>}
                <span className="flex items-center gap-1"><Clock size={10} /> {timeAgo(j.published_at)}</span>
                <span className="flex items-center gap-1"><Users size={10} /> {j.applicants_count}</span>
              </div>

              <div className="flex items-center justify-between">
                <p className="text-sm font-black" style={{ color: tenant.primary_color }}>
                  {fmtSalary(j.salary_min, j.salary_max, j.salary_hide)}
                </p>
                <span className="text-xs font-black text-slate-600 group-hover:text-slate-400 transition-colors">Ver →</span>
              </div>
            </Link>
          ))}
        </div>

        {/* Mobile see all */}
        <div className="mt-6 text-center md:hidden">
          <Link to="/vagas"
            className="inline-flex items-center gap-1.5 text-sm font-bold"
            style={{ color: tenant.primary_color }}>
            Ver todas as vagas <ArrowRight size={14} />
          </Link>
        </div>
      </div>
    </section>
  )
}

// ── Footer ────────────────────────────────────────────────────────────────────

function Footer() {
  const tenant = useTenantCtx()
  return (
    <footer className="border-t border-slate-900 py-10 mt-8">
      <div className="max-w-6xl mx-auto px-4 sm:px-6 flex flex-col md:flex-row items-center justify-between gap-4 md:gap-6">
        <div>
          <p className="font-black text-white text-lg">{tenant.name}</p>
          <p className="text-slate-600 text-sm mt-0.5">Promoções, sorteios e clube de benefícios</p>
        </div>
        <div className="flex gap-6 text-sm text-slate-600">
          {tenant.contact_email && (
            <a href={`mailto:${tenant.contact_email}`} className="hover:text-slate-300 transition-colors">
              {tenant.contact_email}
            </a>
          )}
          {tenant.contact_phone && (
            <a href={`tel:${tenant.contact_phone}`} className="hover:text-slate-300 transition-colors">
              {tenant.contact_phone}
            </a>
          )}
        </div>
        <p className="text-xs text-slate-700">© {new Date().getFullYear()} {tenant.name}</p>
      </div>
    </footer>
  )
}

// ── Page ──────────────────────────────────────────────────────────────────────

export default function LandingPage() {
  return (
    <div className="min-h-screen bg-black">
      <HeroSlider />
      <PromotionsSection />
      <RafflePreviewSection />
      <ClubSection />
      <VagasSection />
      <Footer />
    </div>
  )
}
