/**
 * @file Landing.tsx
 * @description Página de destino (Landing Page) da aplicação web.
 * Serve como vitrine promocional e porta de entrada (Login/Registo - Call to Actions).
 * Redireciona autonomamente utilizadores já autenticados para as suas áreas reservadas.
 */
import { Link, useNavigate } from 'react-router-dom';
import { Button } from '../components/ui/button';
import { Card } from '../components/ui/card';
import { ShopCard } from '../components/ShopCard';
import {
  Calendar, ShoppingBag, BarChart3, Sparkles,
  Users, Clock, Shield, TrendingUp, CheckCircle2,
  ArrowRight, Star, Quote, Scissors, MapPin,
  Zap, Smartphone, Globe
} from 'lucide-react';
import { useEffect } from 'react';
import { useApp } from '../context/AppContext';
import { mockShops } from '../data/mock';

export default function Landing() {
  const { user, shops } = useApp();
  const navigate = useNavigate();

  useEffect(() => {
    if (!user) return;
    const target = user.role === 'barbearia' ? '/painel' : '/explorar';
    navigate(target, { replace: true });
  }, [user, navigate]);

  const featuredShops = shops.slice(0, 3);

  return (
    <div className="space-y-12 sm:space-y-24 md:space-y-32 pb-12 sm:pb-24">
      {/* Hero Section - Midnight Luxury Style */}
      <section className="relative overflow-hidden rounded-2xl sm:rounded-[3rem] obsidian-gradient text-white px-4 py-10 sm:px-8 sm:py-20 md:px-16 md:py-32 shadow-[0_20px_50px_rgba(0,0,0,0.3)] border border-white/5">
        <div className="absolute inset-0 bg-[url('https://www.transparenttextures.com/patterns/carbon-fibre.png')] opacity-20 pointer-events-none"></div>
        <div className="absolute top-0 right-0 w-[500px] h-[500px] bg-indigo-500/10 rounded-full blur-[120px] -translate-y-1/2 translate-x-1/2"></div>
        <div className="absolute bottom-0 left-0 w-[500px] h-[500px] bg-slate-500/10 rounded-full blur-[120px] translate-y-1/2 -translate-x-1/2"></div>

        <div className="relative z-10 space-y-10 max-w-5xl">
          <div className="inline-flex items-center gap-2 px-4 py-2 bg-indigo-500/10 backdrop-blur-md rounded-full text-[10px] font-black uppercase tracking-[0.3em] w-fit border border-indigo-500/30 animate-fade-in text-indigo-300">
            <Sparkles size={14} className="animate-pulse" />
            <span>A Solução Completa para a Sua Barbearia</span>
          </div>

          <h1 className="text-3xl sm:text-5xl md:text-8xl font-black leading-[0.9] tracking-tighter text-balance uppercase italic">
            Gestão Simplificada da sua <br />
            <span className="text-indigo-400 italic">Barbearia</span>
          </h1>

          <p className="text-base sm:text-xl md:text-2xl text-slate-300 max-w-2xl leading-relaxed font-medium">
            Organize a sua barbearia com facilidade. 
            Simples, rápido e eficiente.
          </p>

          <div className="flex flex-wrap gap-3 sm:gap-6 pt-4 sm:pt-6">
            <Button asChild size="lg" className="h-12 sm:h-16 px-6 sm:px-10 bg-white text-slate-950 hover:bg-indigo-600 hover:text-white font-black uppercase tracking-widest text-[10px] sm:text-xs transition-all duration-300 rounded-xl sm:rounded-2xl shadow-2xl">
              <Link to="/explorar" className="flex items-center gap-3">
                Ver Barbearias
                <ArrowRight size={18} strokeWidth={3} />
              </Link>
            </Button>
            <Button asChild variant="outline" size="lg" className="h-12 sm:h-16 px-6 sm:px-10 bg-transparent text-white border-white/20 hover:bg-white/5 hover:border-white/40 font-black uppercase tracking-widest text-[10px] sm:text-xs rounded-xl sm:rounded-2xl backdrop-blur-sm">
              <Link to="/registo">Parceiro Profissional</Link>
            </Button>
          </div>

          {/* Stats Bar */}
          <div className="grid grid-cols-3 gap-4 sm:gap-10 pt-8 sm:pt-12 border-t border-white/10 max-w-2xl">
            <div className="space-y-1">
              <div className="text-2xl sm:text-4xl md:text-5xl font-black tracking-tighter italic">500+</div>
              <div className="text-[8px] sm:text-[10px] font-black text-slate-400 uppercase tracking-widest">Lojas Registadas</div>
            </div>
            <div className="space-y-1">
              <div className="text-2xl sm:text-4xl md:text-5xl font-black tracking-tighter italic">10K+</div>
              <div className="text-[8px] sm:text-[10px] font-black text-slate-400 uppercase tracking-widest">Cortes Marcados</div>
            </div>
            <div className="space-y-1">
              <div className="text-2xl sm:text-4xl md:text-5xl font-black tracking-tighter indigo-gradient bg-clip-text text-transparent italic">4.9</div>
              <div className="text-[8px] sm:text-[10px] font-black text-slate-400 uppercase tracking-widest">Média de Avaliação</div>
            </div>
          </div>
        </div>
      </section>


      {/* Features - Minimalist & Bold */}
      <section className="max-w-7xl mx-auto px-3 sm:px-6">
        <div className="text-center md:text-left mb-16 flex flex-col md:flex-row md:items-end justify-between gap-6">
          <div className="space-y-4">
            <h2 className="text-3xl sm:text-5xl md:text-6xl font-black text-slate-900 tracking-tighter uppercase italic pr-4 sm:pr-8 border-l-[8px] sm:border-l-[12px] border-indigo-600 pl-4 sm:pl-8">
              Tudo para o <br /> <span className="text-indigo-700">Seu Negócio</span>
            </h2>
            <p className="text-xl text-slate-500 font-medium max-w-xl">
              Tudo o que precisa para gerir e fazer crescer a sua barbearia.
            </p>
          </div>
        </div>

        <div className="grid md:grid-cols-2 lg:grid-cols-3 gap-4 sm:gap-10">
          {[
            {
              icon: Clock,
              title: 'Agenda Prática',
              desc: 'Gerencie os horários dos seus barbeiros e evite conflitos de agenda de forma automática.',
            },
            {
              icon: ShoppingBag,
              title: 'Venda de Produtos',
              desc: 'Venda pomadas, óleos e outros produtos diretamente aos seus clientes através da plataforma.',
            },
            {
              icon: BarChart3,
              title: 'Controle de Ganhos',
              desc: 'Saiba exatamente quanto a barbearia está faturando e quais os serviços mais procurados.',
            },
          ].map((feature) => (
            <Card key={feature.title} className="p-6 sm:p-10 space-y-4 sm:space-y-6 rounded-2xl sm:rounded-[2.5rem] transition-all duration-500 hover:-translate-y-2 group bg-white border-2 border-slate-50 shadow-sm hover:shadow-xl">
              <div className="w-16 h-16 rounded-2xl flex items-center justify-center bg-indigo-50 text-indigo-600 group-hover:bg-indigo-600 group-hover:text-white transition-colors duration-300">
                <feature.icon size={32} />
              </div>
              <div className="space-y-3">
                <h3 className="text-2xl font-black tracking-tight uppercase italic text-slate-900">{feature.title}</h3>
                <p className="text-sm leading-relaxed font-medium text-slate-600">{feature.desc}</p>
              </div>
            </Card>
          ))}
        </div>
      </section>

      {/* How it Works - Immersive */}
      <section className="bg-slate-950 py-12 sm:py-24 md:py-32 overflow-hidden relative">
        <div className="absolute top-0 left-0 w-full h-full bg-[radial-gradient(circle_at_center,_var(--tw-gradient-stops))] from-slate-900 via-slate-950 to-slate-950 opacity-50" />
        <div className="max-w-6xl mx-auto px-3 sm:px-6 relative z-10">
          <div className="text-center mb-10 sm:mb-20">
              <h2 className="text-3xl sm:text-5xl md:text-6xl font-black text-white tracking-tighter uppercase italic mb-4 sm:mb-6">
                Como <span className="text-indigo-400">Funciona</span>
              </h2>
              <div className="w-24 h-1 bg-indigo-500 mx-auto rounded-full shadow-[0_0_20px_rgba(99,102,241,0.5)]" />
          </div>

          <div className="grid md:grid-cols-3 gap-8 sm:gap-16 relative">
            {[
              { step: '01', title: 'Explorar', desc: 'Encontre as barbearias mais próximas e veja as fotos e avaliações reais.' },
              { step: '02', title: 'Agendar', desc: 'Escolha o seu barbeiro e o serviço. Marque o dia e hora que preferir.' },
              { step: '03', title: 'Cortar', desc: 'Apareça na barbearia à hora marcada e desfrute do serviço. Sem esperas.' },
            ].map((item, idx) => (
              <div key={item.step} className="text-center space-y-8 relative group">
                <div className="relative">
                   <div className="text-8xl font-black text-white/5 absolute -top-12 left-1/2 -translate-x-1/2 select-none group-hover:text-indigo-500/10 transition-colors duration-700">
                      {item.step}
                   </div>
                   <div className="w-20 h-20 mx-auto rounded-full obsidian-gradient border-2 border-white/10 flex items-center justify-center text-indigo-400 text-2xl font-black italic shadow-[0_0_30px_rgba(79,70,229,0.2)]">
                      {item.step}
                   </div>
                </div>
                <div className="space-y-4">
                   <h3 className="text-2xl font-black text-white uppercase italic tracking-widest">{item.title}</h3>
                   <p className="text-slate-400 font-medium leading-relaxed">{item.desc}</p>
                </div>
              </div>
            ))}
          </div>
        </div>
      </section>

      {/* Featured Shops - Premium Row */}
      <section className="max-w-7xl mx-auto px-3 sm:px-6">
        <div className="flex flex-col md:flex-row items-center justify-between mb-16 gap-6">
          <div className="space-y-2 text-center md:text-left">
            <h1 className="text-2xl sm:text-4xl md:text-5xl font-black text-slate-900 tracking-tighter uppercase italic">
              Descobrir <span className="text-indigo-600">Barbearias</span>
            </h1>
            <p className="text-slate-500 font-bold uppercase tracking-[0.2em] text-xs">As melhores barbearias do país</p>
          </div>
          <Button asChild variant="ghost" className="h-14 px-8 rounded-2xl bg-slate-50 border border-slate-100 font-black text-slate-900 uppercase tracking-widest text-xs hover:bg-slate-100 transition-all">
            <Link to="/explorar" className="flex items-center gap-2">
              Ver Catálogo Completo
              <ArrowRight size={16} />
            </Link>
          </Button>
        </div>

        <div className="grid sm:grid-cols-2 lg:grid-cols-3 gap-4 sm:gap-10">
          {featuredShops.map((shop) => (
            <ShopCard key={shop.id} shop={shop} />
          ))}
        </div>
      </section>

      {/* Final CTA - Immersive Dark */}
      <section className="px-3 sm:px-6">
        <div className="max-w-6xl mx-auto relative overflow-hidden rounded-2xl sm:rounded-[4rem] obsidian-gradient text-white px-4 py-12 sm:px-8 sm:py-20 md:px-20 md:py-24 shadow-2xl border border-white/5">
          <div className="absolute top-0 right-0 w-[400px] h-[400px] bg-indigo-500/10 rounded-full blur-[100px]" />
          <div className="absolute bottom-0 left-0 w-[400px] h-[400px] bg-slate-500/10 rounded-full blur-[100px]" />

          <div className="relative text-center space-y-12 max-w-3xl mx-auto">
            <h2 className="text-3xl sm:text-5xl md:text-7xl font-black tracking-tighter uppercase italic leading-[0.9]">
              Registe a <br /> sua <span className="text-indigo-400">Barbearia</span>
            </h2>
            <p className="text-xl text-slate-400 font-medium leading-relaxed">
              Centenas de profissionais já elevaram o seu negócio ao próximo nível. 
              A sua barbearia merece o melhor.
            </p>
            <div className="flex flex-wrap justify-center gap-6 pt-4">
              <Button asChild size="lg" className="h-12 sm:h-16 px-6 sm:px-10 bg-white text-slate-950 hover:bg-indigo-600 hover:text-white font-black uppercase tracking-widest text-[10px] sm:text-xs rounded-xl sm:rounded-2xl transition-all shadow-2xl">
                <Link to="/registo" className="flex items-center gap-3">
                  Criar Conta
                  <ArrowRight size={18} />
                </Link>
              </Button>
              <Button asChild variant="outline" size="lg" className="h-12 sm:h-16 px-6 sm:px-10 border-white/20 text-white font-black uppercase tracking-widest text-[10px] sm:text-xs rounded-xl sm:rounded-2xl hover:bg-white/5">
                <Link to="/explorar">Navegar agora</Link>
              </Button>
            </div>
          </div>
        </div>
      </section>
    </div>
  );
}





