import React from 'react';
import { motion } from 'motion/react';
import { Link } from 'react-router-dom';
import {
  ArrowRight,
  Check,
  ChevronDown,
  MessageSquare,
  ShieldCheck,
  Smartphone,
  Sparkles,
  TrendingUp,
  Wallet,
  Wrench,
  Zap,
  MonitorSmartphone,
  BadgeCheck,
  Rocket,
  Star
} from 'lucide-react';
import { PLANS } from '../constants';

// Helper component for domain-aware links
const AppLink: React.FC<{ to: string, className?: string, children: React.ReactNode }> = ({ to, className, children }) => {
  const isCustomDomain = window.location.hostname === 'usefixflow.com.br' || window.location.hostname === 'www.usefixflow.com.br';
  const href = isCustomDomain ? `https://app.usefixflow.com.br/#${to}` : to;

  if (isCustomDomain) {
    return (
      <a href={href} className={className}>
        {children}
      </a>
    );
  }

  return (
    <Link to={to} className={className}>
      {children}
    </Link>
  );
};

const faqs = [
  {
    q: 'Preciso instalar no computador?',
    a: 'Não. O Fix Flow roda direto no navegador, com acesso rápido e sem instalação complicada.',
  },
  {
    q: 'Funciona no celular?',
    a: 'Sim. A plataforma é mobile-first e pode ser usada no celular para acompanhar ordens, anexar fotos e operar no dia a dia.',
  },
  {
    q: 'Posso testar grátis?',
    a: 'Sim. Você pode começar pelo plano gratuito e conhecer a plataforma antes de evoluir.',
  },
  {
    q: 'Meus dados ficam seguros?',
    a: 'Sim. Seus dados ficam armazenados em nuvem, com foco em segurança, disponibilidade e continuidade da operação.',
  },
  {
    q: 'Dá para usar com mais de um técnico?',
    a: 'Sim. Os planos superiores permitem trabalhar com mais usuários e mais volume operacional.',
  },
  {
    q: 'O cliente acompanha o conserto?',
    a: 'Sim. O cliente pode receber atualizações e acompanhar o status da ordem de serviço por links compartilháveis.',
  },
];

const featureCards = [
  {
    icon: <Sparkles size={22} />,
    title: 'Laudos com IA',
    desc: 'Gere laudos técnicos mais claros, profissionais e prontos para enviar ao cliente em segundos.',
    color: 'text-fuchsia-500',
    bg: 'bg-fuchsia-500/10',
  },
  {
    icon: <TrendingUp size={22} />,
    title: 'Lucro real',
    desc: 'Acompanhe peças, mão de obra e caixa para entender melhor o resultado da sua operação.',
    color: 'text-emerald-500',
    bg: 'bg-emerald-500/10',
  },
  {
    icon: <MessageSquare size={22} />,
    title: 'WhatsApp rápido',
    desc: 'Envie orçamento, aprovação e atualização de status com poucos cliques.',
    color: 'text-blue-500',
    bg: 'bg-blue-500/10',
  },
  {
    icon: <Smartphone size={22} />,
    title: 'Mobile-first',
    desc: 'Use no celular e mantenha a assistência funcionando mesmo longe do computador.',
    color: 'text-cyan-500',
    bg: 'bg-cyan-500/10',
  },
  {
    icon: <ShieldCheck size={22} />,
    title: 'Dados em nuvem',
    desc: 'Sua operação continua protegida com armazenamento online e acesso de qualquer lugar.',
    color: 'text-rose-500',
    bg: 'bg-rose-500/10',
  },
  {
    icon: <Zap size={22} />,
    title: 'Fluxo veloz',
    desc: 'Abra O.S., registre informações e avance no atendimento sem burocracia.',
    color: 'text-amber-500',
    bg: 'bg-amber-500/10',
  },
];

export const Landing: React.FC = () => {
  return (
    <div className="min-h-screen bg-slate-50 dark:bg-slate-950 font-sans text-slate-900 dark:text-slate-100 overflow-x-hidden">
      {/* Header */}
      <header className="fixed top-0 inset-x-0 w-full bg-white/80 dark:bg-slate-900/80 backdrop-blur-md z-50 border-b border-slate-200 dark:border-slate-800 transition-colors">
        <div className="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8 py-4 flex items-center justify-between gap-4">
          <div className="flex items-center gap-3">
            <div className="w-10 h-10 bg-indigo-600 rounded-xl flex items-center justify-center rotate-3 shadow-lg">
              <span className="text-white font-black text-2xl">F</span>
            </div>
            <span className="font-black text-2xl tracking-tighter uppercase italic text-slate-900 dark:text-white">
              Fix Flow
            </span>
          </div>

          <nav className="hidden lg:flex items-center gap-8 text-sm font-bold text-slate-600 dark:text-slate-300 uppercase tracking-widest">
            <button 
              onClick={() => {
                document.getElementById('beneficios')?.scrollIntoView({ behavior: 'smooth' });
              }} 
              className="hover:text-indigo-600 dark:hover:text-indigo-400 transition-colors uppercase tracking-widest text-sm font-bold"
            >
              Benefícios
            </button>
            <button 
              onClick={() => {
                document.getElementById('planos')?.scrollIntoView({ behavior: 'smooth' });
              }} 
              className="hover:text-indigo-600 dark:hover:text-indigo-400 transition-colors uppercase tracking-widest text-sm font-bold"
            >
              Planos
            </button>
            <button 
              onClick={() => {
                document.getElementById('faq')?.scrollIntoView({ behavior: 'smooth' });
              }} 
              className="hover:text-indigo-600 dark:hover:text-indigo-400 transition-colors uppercase tracking-widest text-sm font-bold"
            >
              FAQ
            </button>
          </nav>

          <div className="flex items-center gap-3">
            <AppLink
              to="/login"
              className="hidden sm:inline-flex text-sm font-bold text-slate-600 dark:text-slate-300 hover:text-indigo-600 dark:hover:text-indigo-400 uppercase tracking-widest transition-colors"
            >
              Entrar
            </AppLink>
            <AppLink
              to="/login"
              className="px-5 py-2.5 bg-indigo-600 hover:bg-indigo-700 text-white text-sm font-black rounded-full uppercase tracking-widest shadow-lg shadow-indigo-600/30 transition-all hover:scale-105 active:scale-95"
            >
              Começar grátis
            </AppLink>
          </div>
        </div>
      </header>

      {/* Hero */}
      <section className="relative pt-32 pb-20 lg:pt-44 lg:pb-28 overflow-hidden">
        <div className="absolute top-[20%] left-1/2 -translate-x-1/2 w-[900px] h-[900px] bg-indigo-500/20 rounded-full blur-[140px] pointer-events-none -z-10"></div>
        <div className="absolute bottom-0 left-0 right-0 h-32 bg-gradient-to-b from-transparent to-slate-50 dark:to-slate-950 pointer-events-none"></div>

        <div className="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8 relative z-10">
          <motion.div
            initial={{ opacity: 0, y: 18 }}
            animate={{ opacity: 1, y: 0 }}
            transition={{ duration: 0.45 }}
            className="text-center"
          >
            <div className="inline-flex items-center gap-2 px-4 py-2 rounded-full bg-indigo-100 dark:bg-indigo-900/30 text-indigo-700 dark:text-indigo-300 font-bold text-xs uppercase tracking-widest mb-8 border border-indigo-200 dark:border-indigo-800">
              <Sparkles size={14} className="animate-pulse" />
              Plataforma para assistências técnicas que querem crescer
            </div>

            <h1 className="text-4xl md:text-6xl lg:text-7xl font-black tracking-tighter leading-[1.05] mb-6 max-w-5xl mx-auto">
              O sistema para assistências técnicas que querem
              <span className="text-transparent bg-clip-text bg-gradient-to-r from-indigo-600 via-violet-600 to-purple-600">
                {' '}mais lucro e menos retrabalho.
              </span>
            </h1>

            <p className="mt-4 text-lg md:text-xl text-slate-600 dark:text-slate-400 max-w-3xl mx-auto font-medium leading-relaxed">
              Cadastre ordens de serviço, gere laudos com IA, envie atualizações por WhatsApp
              e acompanhe peças, caixa e produtividade em um só lugar.
            </p>

            <div className="mt-6 flex flex-wrap items-center justify-center gap-3 text-sm font-semibold text-slate-500 dark:text-slate-400">
              <div className="inline-flex items-center gap-2 px-3 py-2 rounded-full bg-white dark:bg-slate-900 border border-slate-200 dark:border-slate-800">
                <Check size={16} className="text-emerald-500" />
                Sem instalação
              </div>
              <div className="inline-flex items-center gap-2 px-3 py-2 rounded-full bg-white dark:bg-slate-900 border border-slate-200 dark:border-slate-800">
                <Check size={16} className="text-emerald-500" />
                Funciona no navegador
              </div>
              <div className="inline-flex items-center gap-2 px-3 py-2 rounded-full bg-white dark:bg-slate-900 border border-slate-200 dark:border-slate-800">
                <Check size={16} className="text-emerald-500" />
                Use também no celular
              </div>
            </div>

            <div className="mt-10 flex flex-col sm:flex-row items-center justify-center gap-4">
              <AppLink
                to="/login"
                className="w-full sm:w-auto px-8 py-4 bg-indigo-600 hover:bg-indigo-700 text-white font-black rounded-full uppercase tracking-widest text-sm shadow-[0_20px_40px_-10px_rgba(79,70,229,0.5)] transition-all hover:-translate-y-1 flex items-center justify-center gap-2"
              >
                Começar grátis <ArrowRight size={18} />
              </AppLink>

              <a
                href="#beneficios"
                className="w-full sm:w-auto px-8 py-4 bg-white dark:bg-slate-900 border border-slate-200 dark:border-slate-800 hover:border-indigo-400 dark:hover:border-indigo-500 text-slate-800 dark:text-slate-100 font-black rounded-full uppercase tracking-widest text-sm transition-all hover:-translate-y-1 flex items-center justify-center gap-2"
              >
                Ver como funciona <ChevronDown size={18} />
              </a>
            </div>
          </motion.div>

          {/* Product mockup */}
          <motion.div
            initial={{ opacity: 0, y: 36 }}
            animate={{ opacity: 1, y: 0 }}
            transition={{ duration: 0.65, delay: 0.15 }}
            className="max-w-6xl mx-auto mt-16 lg:mt-24 relative"
          >
            <div className="relative rounded-[32px] bg-white dark:bg-slate-900 shadow-2xl border border-slate-200 dark:border-slate-800 overflow-hidden">
              <div className="absolute inset-x-0 top-0 h-12 border-b border-slate-200 dark:border-slate-800 flex items-center px-4 gap-2 bg-slate-50 dark:bg-slate-950">
                <div className="w-3 h-3 rounded-full bg-red-400"></div>
                <div className="w-3 h-3 rounded-full bg-amber-400"></div>
                <div className="w-3 h-3 rounded-full bg-emerald-400"></div>
              </div>

              <div className="pt-14 p-5 md:p-8 grid grid-cols-1 lg:grid-cols-[1.45fr_0.75fr] gap-6 bg-slate-100 dark:bg-slate-950">
                <div className="rounded-3xl bg-white dark:bg-slate-900 border border-slate-200 dark:border-slate-800 p-5 md:p-6 shadow-sm">
                  <div className="flex items-center justify-between mb-6 gap-4">
                    <div>
                      <div className="text-slate-500 dark:text-slate-400 text-xs uppercase tracking-[0.2em] font-bold">
                        Dashboard
                      </div>
                      <div className="text-slate-900 dark:text-white text-2xl font-black tracking-tight mt-1">
                        Visão geral da operação
                      </div>
                    </div>
                    <div className="hidden sm:flex items-center gap-2 px-3 py-2 rounded-xl bg-emerald-50 text-emerald-600 dark:bg-emerald-500/10 dark:text-emerald-400 border border-emerald-100 dark:border-emerald-500/20 text-sm font-bold">
                      <TrendingUp size={16} />
                      Lucro em alta
                    </div>
                  </div>

                  <div className="grid grid-cols-1 sm:grid-cols-3 gap-4 mb-4">
                    <div className="rounded-2xl bg-slate-50 dark:bg-slate-800 border border-slate-100 dark:border-slate-700 p-4">
                      <div className="text-slate-500 dark:text-slate-400 text-xs uppercase tracking-widest font-bold">Ordens de Serviço</div>
                      <div className="text-slate-900 dark:text-white text-3xl font-black mt-2">128</div>
                      <div className="text-emerald-600 dark:text-emerald-400 text-sm mt-2 font-medium">+18% este mês</div>
                    </div>
                    <div className="rounded-2xl bg-slate-50 dark:bg-slate-800 border border-slate-100 dark:border-slate-700 p-4">
                      <div className="text-slate-500 dark:text-slate-400 text-xs uppercase tracking-widest font-bold">Faturamento Estimado</div>
                      <div className="text-slate-900 dark:text-white text-3xl font-black mt-2">R$ 12.480</div>
                      <div className="text-indigo-600 dark:text-indigo-400 text-sm mt-2 font-medium">Mão de obra + Peças</div>
                    </div>
                    <div className="rounded-2xl bg-slate-50 dark:bg-slate-800 border border-slate-100 dark:border-slate-700 p-4">
                      <div className="text-slate-500 dark:text-slate-400 text-xs uppercase tracking-widest font-bold">Aparelhos na Bancada</div>
                      <div className="text-slate-900 dark:text-white text-3xl font-black mt-2">17</div>
                      <div className="text-amber-600 dark:text-amber-400 text-sm mt-2 font-medium">Em análise / reparo</div>
                    </div>
                  </div>

                  <div className="rounded-2xl bg-slate-50 dark:bg-slate-800 border border-slate-100 dark:border-slate-700 p-5">
                    <div className="flex items-center justify-between mb-4">
                      <div className="text-slate-900 dark:text-white font-bold">Fluxo da bancada</div>
                      <div className="text-slate-500 text-sm font-medium">Últimos 7 dias</div>
                    </div>
                    <div className="h-44 rounded-2xl bg-white dark:bg-slate-900 border border-slate-100 dark:border-slate-700 p-4 flex items-end gap-3">
                      {[35, 60, 52, 78, 64, 88, 95].map((value, i) => (
                        <div key={i} className="flex-1 rounded-t-xl bg-indigo-500 dark:bg-indigo-600" style={{ height: `${value}%` }} />
                      ))}
                    </div>
                  </div>
                </div>

                <div className="flex flex-col gap-4">
                  <div className="rounded-3xl bg-white dark:bg-slate-900 border border-slate-200 dark:border-slate-800 p-5 shadow-sm">
                    <div className="flex items-center gap-3 mb-4">
                      <div className="w-11 h-11 rounded-2xl bg-indigo-100 text-indigo-600 dark:bg-indigo-500/20 dark:text-indigo-400 flex items-center justify-center">
                        <Sparkles size={20} />
                      </div>
                      <div>
                        <div className="text-slate-900 dark:text-white font-bold">Laudo com IA</div>
                        <div className="text-slate-500 text-sm font-medium">Diagnóstico profissional em cliques</div>
                      </div>
                    </div>
                    <div className="rounded-2xl bg-slate-50 dark:bg-slate-800 border border-slate-100 dark:border-slate-700 p-4 text-sm text-slate-700 dark:text-slate-300 leading-relaxed font-medium">
                      "Aparelho apresenta falha intermitente na carga. Durante análise prévia, foi detectada possível oxidação na subplaca e necessidade de avaliação técnica do conector."
                    </div>
                  </div>

                  <div className="rounded-3xl bg-white dark:bg-slate-900 border border-slate-200 dark:border-slate-800 p-5 shadow-sm">
                    <div className="flex items-center gap-3 mb-4">
                      <div className="w-11 h-11 rounded-2xl bg-emerald-100 text-emerald-600 dark:bg-emerald-500/20 dark:text-emerald-400 flex items-center justify-center">
                        <MessageSquare size={20} />
                      </div>
                      <div>
                        <div className="text-slate-900 dark:text-white font-bold">Integração Ágil</div>
                        <div className="text-slate-500 text-sm font-medium">Aprovação por WhatsApp</div>
                      </div>
                    </div>
                    <div className="space-y-3">
                      <div className="ml-auto max-w-[85%] rounded-2xl rounded-br-md bg-emerald-500 text-white px-4 py-3 text-sm shadow-sm font-medium">
                        Seu aparelho está pronto para retirada ✅
                      </div>
                      <div className="max-w-[85%] rounded-2xl rounded-bl-md bg-slate-100 dark:bg-slate-800 text-slate-700 dark:text-slate-200 px-4 py-3 text-sm shadow-sm font-medium">
                        Perfeito, passo ainda hoje na loja. Muito obrigado!
                      </div>
                    </div>
                  </div>

                  <div className="rounded-3xl bg-white dark:bg-slate-900 border border-slate-200 dark:border-slate-800 p-5 shadow-sm">
                    <div className="flex items-center justify-between">
                      <div className="flex items-center gap-3">
                        <div className="w-11 h-11 rounded-2xl bg-amber-100 text-amber-600 dark:bg-amber-500/20 dark:text-amber-400 flex items-center justify-center">
                          <Check size={20} />
                        </div>
                        <div>
                          <div className="text-slate-900 dark:text-white font-bold">Checklist Integrado</div>
                          <div className="text-slate-500 text-sm font-medium">Segurança na entrada do aparelho</div>
                        </div>
                      </div>
                      <div className="text-amber-600 dark:text-amber-400 text-xs font-bold uppercase tracking-widest">
                        Proteção
                      </div>
                    </div>
                  </div>
                </div>
              </div>
            </div>
          </motion.div>
        </div>
      </section>

      {/* Context strip */}
      <section className="py-8 border-y border-slate-200 dark:border-slate-800 bg-white dark:bg-slate-900">
        <div className="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8">
          <p className="text-center text-sm md:text-base text-slate-600 dark:text-slate-400 font-semibold">
            Projetado para assistências de <span className="text-slate-900 dark:text-white">smartphones</span>,{' '}
            <span className="text-slate-900 dark:text-white">notebooks</span>,{' '}
            <span className="text-slate-900 dark:text-white">tablets</span> e{' '}
            <span className="text-slate-900 dark:text-white">eletrônicos</span> que precisam ganhar velocidade,
            organização e previsibilidade.
          </p>
        </div>
      </section>

      {/* Feature cards */}
      <section id="beneficios" className="py-24 bg-slate-50 dark:bg-slate-950">
        <div className="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8">
          <div className="text-center mb-16">
            <h2 className="text-3xl md:text-5xl font-black tracking-tight mb-4">
              Benefícios que fazem diferença na operação
            </h2>
            <p className="text-slate-600 dark:text-slate-400 max-w-2xl mx-auto text-lg">
              Menos papel, menos retrabalho e mais clareza para quem atende, diagnostica e fecha serviço.
            </p>
          </div>

          <div className="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-8">
            {featureCards.map((feature, idx) => (
              <div
                key={idx}
                className="p-8 rounded-3xl bg-white dark:bg-slate-900 border border-slate-200 dark:border-slate-800 hover:shadow-xl transition-all hover:-translate-y-1"
              >
                <div className={`w-14 h-14 ${feature.bg} ${feature.color} rounded-2xl flex items-center justify-center mb-6`}>
                  {feature.icon}
                </div>
                <h3 className="text-xl font-bold mb-3">{feature.title}</h3>
                <p className="text-slate-600 dark:text-slate-400 leading-relaxed">{feature.desc}</p>
              </div>
            ))}
          </div>
        </div>
      </section>

      {/* Alternating sections */}
      <section className="py-24 bg-white dark:bg-slate-900 border-y border-slate-200 dark:border-slate-800">
        <div className="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8 space-y-24">
          <div className="grid grid-cols-1 lg:grid-cols-2 gap-12 items-center">
            <div>
              <div className="inline-flex items-center gap-2 px-3 py-2 rounded-full bg-emerald-500/10 text-emerald-600 dark:text-emerald-400 text-xs uppercase tracking-widest font-black mb-5">
                <TrendingUp size={14} />
                Mais resultado
              </div>
              <h3 className="text-3xl md:text-4xl font-black tracking-tight mb-5">
                Entenda o lucro real da sua assistência
              </h3>
              <p className="text-lg text-slate-600 dark:text-slate-400 leading-relaxed mb-5">
                Não basta saber quanto entrou. O Fix Flow ajuda você a visualizar peças, mão de obra,
                vendas rápidas e fluxo financeiro com muito mais clareza.
              </p>
              <ul className="space-y-3 text-slate-700 dark:text-slate-300">
                <li className="flex items-start gap-3">
                  <Check size={18} className="text-emerald-500 mt-1 shrink-0" />
                  Veja melhor o retorno de cada serviço.
                </li>
                <li className="flex items-start gap-3">
                  <Check size={18} className="text-emerald-500 mt-1 shrink-0" />
                  Separe custo de peça e valor de mão de obra.
                </li>
                <li className="flex items-start gap-3">
                  <Check size={18} className="text-emerald-500 mt-1 shrink-0" />
                  Tenha visão operacional sem depender de planilhas espalhadas.
                </li>
              </ul>
            </div>

            <div className="rounded-[28px] border border-slate-200 dark:border-slate-800 bg-slate-50 dark:bg-slate-950 p-6 shadow-xl">
              <div className="grid grid-cols-2 gap-4">
                <div className="rounded-2xl bg-white dark:bg-slate-900 border border-slate-200 dark:border-slate-800 p-5">
                  <Wallet className="text-emerald-500 mb-4" size={24} />
                  <div className="text-sm text-slate-500 mb-2">Caixa do dia</div>
                  <div className="text-2xl font-black">R$ 2.840</div>
                </div>
                <div className="rounded-2xl bg-white dark:bg-slate-900 border border-slate-200 dark:border-slate-800 p-5">
                  <Wrench className="text-indigo-500 mb-4" size={24} />
                  <div className="text-sm text-slate-500 mb-2">Mão de obra</div>
                  <div className="text-2xl font-black">R$ 1.290</div>
                </div>
                <div className="col-span-2 rounded-2xl bg-white dark:bg-slate-900 border border-slate-200 dark:border-slate-800 p-5">
                  <div className="flex items-center justify-between mb-4">
                    <div className="font-bold">Resumo financeiro</div>
                    <div className="text-emerald-500 text-sm font-bold">Atualizado agora</div>
                  </div>
                  <div className="space-y-3 text-sm">
                    <div className="flex items-center justify-between">
                      <span className="text-slate-500">Peças</span>
                      <span className="font-bold">R$ 930</span>
                    </div>
                    <div className="flex items-center justify-between">
                      <span className="text-slate-500">Serviços</span>
                      <span className="font-bold">R$ 1.910</span>
                    </div>
                    <div className="flex items-center justify-between">
                      <span className="text-slate-500">Lucro estimado</span>
                      <span className="font-black text-emerald-500">R$ 1.580</span>
                    </div>
                  </div>
                </div>
              </div>
            </div>
          </div>

          <div className="grid grid-cols-1 lg:grid-cols-2 gap-12 items-center">
            <div className="order-2 lg:order-1 rounded-[28px] border border-slate-200 dark:border-slate-800 bg-slate-50 dark:bg-slate-950 p-6 shadow-xl">
              <div className="rounded-3xl bg-white dark:bg-slate-900 border border-slate-200 dark:border-slate-800 p-6">
                <div className="flex items-center gap-3 mb-5">
                  <div className="w-12 h-12 rounded-2xl bg-fuchsia-500/10 text-fuchsia-500 flex items-center justify-center">
                    <Sparkles size={22} />
                  </div>
                  <div>
                    <div className="font-black">Laudo técnico premium</div>
                    <div className="text-sm text-slate-500">Com apoio de inteligência artificial</div>
                  </div>
                </div>

                <div className="grid gap-4">
                  <div className="rounded-2xl border border-dashed border-slate-300 dark:border-slate-700 p-4 bg-slate-50 dark:bg-slate-950">
                    <div className="text-xs uppercase tracking-widest font-bold text-slate-500 mb-2">Antes</div>
                    <p className="text-sm text-slate-600 dark:text-slate-400">
                      cliente trouxe aparelho nao liga as vezes carrega as vez nao tem marca de oxidacao talvez seja conector ou ci
                    </p>
                  </div>

                  <div className="flex justify-center">
                    <div className="px-4 py-2 rounded-full bg-fuchsia-500/10 text-fuchsia-600 dark:text-fuchsia-400 text-xs uppercase tracking-widest font-black">
                      Transformado com IA
                    </div>
                  </div>

                  <div className="rounded-2xl border border-fuchsia-200 dark:border-fuchsia-900/50 p-4 bg-fuchsia-50 dark:bg-fuchsia-950/20">
                    <div className="text-xs uppercase tracking-widest font-bold text-fuchsia-600 dark:text-fuchsia-400 mb-2">
                      Depois
                    </div>
                    <p className="text-sm text-slate-700 dark:text-slate-300 leading-relaxed">
                      Aparelho apresenta falha intermitente de carga. Durante a análise, foi identificada necessidade
                      de inspeção no conjunto de alimentação, com possibilidade de reparo em conector ou circuito responsável.
                    </p>
                  </div>
                </div>
              </div>
            </div>

            <div className="order-1 lg:order-2">
              <div className="inline-flex items-center gap-2 px-3 py-2 rounded-full bg-fuchsia-500/10 text-fuchsia-600 dark:text-fuchsia-400 text-xs uppercase tracking-widest font-black mb-5">
                <BadgeCheck size={14} />
                Mais valor percebido
              </div>
              <h3 className="text-3xl md:text-4xl font-black tracking-tight mb-5">
                Transforme diagnósticos em laudos mais profissionais
              </h3>
              <p className="text-lg text-slate-600 dark:text-slate-400 leading-relaxed mb-5">
                A IA ajuda sua equipe a escrever melhor, padronizar a comunicação e explicar o problema de forma mais clara
                para o cliente.
              </p>
              <ul className="space-y-3 text-slate-700 dark:text-slate-300">
                <li className="flex items-start gap-3">
                  <Check size={18} className="text-fuchsia-500 mt-1 shrink-0" />
                  Reduza erros de escrita e retrabalho.
                </li>
                <li className="flex items-start gap-3">
                  <Check size={18} className="text-fuchsia-500 mt-1 shrink-0" />
                  Padronize laudos e aumente a credibilidade da assistência.
                </li>
                <li className="flex items-start gap-3">
                  <Check size={18} className="text-fuchsia-500 mt-1 shrink-0" />
                  Explique melhor o reparo e gere mais confiança na aprovação.
                </li>
              </ul>
            </div>
          </div>

          <div className="grid grid-cols-1 lg:grid-cols-2 gap-12 items-center">
            <div>
              <div className="inline-flex items-center gap-2 px-3 py-2 rounded-full bg-blue-500/10 text-blue-600 dark:text-blue-400 text-xs uppercase tracking-widest font-black mb-5">
                <MessageSquare size={14} />
                Atendimento ágil
              </div>
              <h3 className="text-3xl md:text-4xl font-black tracking-tight mb-5">
                Acelere aprovações com WhatsApp e rastreio
              </h3>
              <p className="text-lg text-slate-600 dark:text-slate-400 leading-relaxed mb-5">
                Atualize o cliente com poucos cliques, envie orçamento, status e acompanhamento do reparo sem depender
                de mensagens manuais toda hora.
              </p>
              <ul className="space-y-3 text-slate-700 dark:text-slate-300">
                <li className="flex items-start gap-3">
                  <Check size={18} className="text-blue-500 mt-1 shrink-0" />
                  Menos tempo respondendo manualmente.
                </li>
                <li className="flex items-start gap-3">
                  <Check size={18} className="text-blue-500 mt-1 shrink-0" />
                  Mais rapidez para aprovação de orçamento.
                </li>
                <li className="flex items-start gap-3">
                  <Check size={18} className="text-blue-500 mt-1 shrink-0" />
                  Mais transparência para o cliente acompanhar o processo.
                </li>
              </ul>
            </div>

            <div className="rounded-[28px] border border-slate-200 dark:border-slate-800 bg-slate-50 dark:bg-slate-950 p-6 shadow-xl">
              <div className="max-w-sm mx-auto rounded-[2rem] border-8 border-slate-200 dark:border-slate-800 bg-white dark:bg-slate-900 shadow-2xl overflow-hidden">
                <div className="h-6 bg-slate-100 dark:bg-slate-950"></div>
                <div className="p-4 bg-slate-50 dark:bg-slate-950 min-h-[520px]">
                  <div className="rounded-2xl bg-white dark:bg-slate-900 border border-slate-200 dark:border-slate-800 p-4 mb-4 shadow-sm">
                    <div className="text-xs uppercase tracking-widest text-indigo-600 dark:text-indigo-400 font-black mb-2">
                      Rastreio da Ordem
                    </div>
                    <div className="text-xl font-black text-slate-800 dark:text-white">OS #2481</div>
                    <div className="text-sm font-medium text-slate-500 mt-1">Samsung Galaxy A54</div>
                  </div>

                  <div className="space-y-3">
                    {[
                      ['Aparelho na loja', true],
                      ['Análise técnica', true],
                      ['Aguardando aprovação', true],
                      ['Reparo em andamento', true],
                      ['Pronto para retirada', true],
                    ].map(([label, active], idx) => (
                      <div
                        key={idx}
                        className={`rounded-2xl px-4 py-3 border ${
                          active
                            ? 'bg-emerald-50 dark:bg-emerald-500/10 border-emerald-200 dark:border-emerald-500/20 text-emerald-700 dark:text-emerald-400 font-bold'
                            : 'bg-white dark:bg-slate-900 border-slate-200 dark:border-slate-800 text-slate-500'
                        }`}
                      >
                        <div className="flex items-center gap-3">
                          <Check size={16} className={active ? '' : 'opacity-50'} />
                          <span>{label}</span>
                        </div>
                      </div>
                    ))}
                  </div>

                  <div className="mt-4 rounded-2xl bg-indigo-50 dark:bg-indigo-500/10 border border-indigo-100 dark:border-indigo-500/20 text-indigo-700 dark:text-indigo-300 p-4 text-sm font-medium leading-relaxed">
                    Seu aparelho foi finalizado e já está pronto para retirada.
                  </div>
                </div>
              </div>
            </div>
          </div>
        </div>
      </section>

      {/* Platform Evolution */}
      <section className="py-16 bg-gradient-to-r from-indigo-600 to-purple-700 text-white border-y border-indigo-800">
        <div className="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8">
          <div className="flex flex-col md:flex-row items-center justify-between gap-8">
            <div className="flex-1">
              <div className="inline-flex items-center gap-2 px-3 py-1.5 rounded-full bg-white/10 text-indigo-100 text-[10px] uppercase tracking-widest font-black mb-4">
                <Rocket size={14} className="text-white" />
                Sistema em constante evolução
              </div>
              <h2 className="text-3xl md:text-4xl font-black tracking-tight mb-4 text-white">
                O Fix Flow cresce com o seu negócio
              </h2>
              <p className="text-indigo-100 text-lg leading-relaxed max-w-2xl">
                Mais do que um sistema estático, nós estamos ativamente construindo e ouvindo nossos clientes todas as semanas. Ao iniciar, você fará parte de uma plataforma viva. Lançamos atualizações frequentemente e já estamos preparando para o futuro as novidades mais pedidas, como a futura integração para emissão de notas fiscais e novas ferramentas de IA!
              </p>
            </div>
            <div className="shrink-0 flex flex-col sm:flex-row gap-4">
              <div className="rounded-3xl bg-white/10 p-6 backdrop-blur border border-white/10 text-center flex flex-col justify-center">
                <div className="text-4xl font-black mb-1">Frequente</div>
                <div className="text-indigo-200 font-medium text-sm">Novas funcionalidades</div>
              </div>
              <div className="rounded-3xl bg-white/10 p-6 backdrop-blur border border-white/10 text-center flex flex-col justify-center">
                <div className="text-4xl font-black mb-1">Feedback</div>
                <div className="text-indigo-200 font-medium text-sm">Construído com você</div>
              </div>
            </div>
          </div>
        </div>
      </section>

      {/* Pricing */}
      <section id="planos" className="py-24 bg-slate-50 dark:bg-slate-950">
        <div className="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8">
          <div className="text-center mb-16">
            <h2 className="text-3xl md:text-5xl font-black tracking-tight mb-4">Planos para cada fase da assistência</h2>
            <p className="text-slate-600 dark:text-slate-400 max-w-2xl mx-auto text-lg">
              Comece grátis, valide a operação e evolua conforme sua equipe e volume crescem.
            </p>
          </div>

          <div className="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-4 gap-8 items-start">
            {Object.entries(PLANS).map(([key, plan]) => {
              const isPro = key === 'pro';
              
              return (
                <div
                  key={key}
                  className={`relative rounded-[2rem] border-2 p-8 flex flex-col transition-all duration-300 ${
                    isPro
                      ? 'bg-gradient-to-b from-indigo-900 to-slate-900 text-white border-indigo-500 shadow-2xl shadow-indigo-500/20 md:-translate-y-4'
                      : 'bg-white dark:bg-slate-900 border-slate-100 hover:border-slate-200 dark:border-slate-800'
                  }`}
                >
                  {isPro && (
                    <div className="absolute -top-4 left-1/2 -translate-x-1/2 bg-gradient-to-r from-indigo-500 to-purple-600 text-white px-5 py-1.5 rounded-full text-[10px] font-black uppercase tracking-widest shadow-lg shadow-indigo-500/30 flex items-center gap-1.5 whitespace-nowrap">
                      <Rocket size={14} /> Mais popular
                    </div>
                  )}

                  <div className="mb-8">
                    <div className={`text-xs uppercase tracking-widest font-black mb-3 ${isPro ? 'text-indigo-300' : 'text-indigo-600 dark:text-indigo-400'}`}>
                      {plan.name}
                    </div>
                    <div className="flex items-baseline gap-1 mt-3">
                      <h3 className="text-4xl font-black">{plan.monthlyPrice === 0 ? 'Grátis' : `R$ ${plan.monthlyPrice.toFixed(2).replace('.', ',')}`}</h3>
                      {plan.monthlyPrice > 0 && <span className={`text-sm font-bold ${isPro ? 'text-slate-400' : 'text-slate-500'}`}>/mês</span>}
                    </div>
                    <p className={`mt-4 text-sm font-medium ${isPro ? 'text-indigo-100/80' : 'text-slate-500 dark:text-slate-400'}`}>
                      {plan.subtitle}
                    </p>
                  </div>

                  <ul className="space-y-4 mb-8 flex-1">
                    {plan.features.map((item, featureIdx) => (
                      <li key={featureIdx} className="flex items-start gap-3">
                        <Check
                          size={18}
                          className={isPro ? 'text-indigo-400 mt-0.5 shrink-0' : 'text-emerald-500 mt-0.5 shrink-0'}
                        />
                        <span className={`text-sm font-medium leading-relaxed ${isPro ? 'text-slate-200' : 'text-slate-700 dark:text-slate-300'}`}>
                          {item}
                        </span>
                      </li>
                    ))}
                  </ul>

                  <AppLink
                    to="/login"
                    className={`w-full text-center px-6 py-4 rounded-xl font-black uppercase tracking-widest text-sm transition-all flex items-center justify-center gap-2 ${
                      isPro
                        ? 'bg-gradient-to-r from-indigo-500 to-purple-600 text-white shadow-lg shadow-indigo-500/30 hover:shadow-indigo-500/50 hover:scale-[1.02] active:scale-95'
                        : 'bg-slate-100 text-slate-800 hover:bg-slate-200 dark:bg-slate-800 dark:text-white dark:hover:bg-slate-700 active:scale-95'
                    }`}
                  >
                    Começar
                  </AppLink>
                </div>
              );
            })}
          </div>
        </div>
      </section>

      {/* Testimonials */}
      <section className="py-24 bg-white dark:bg-slate-900 border-y border-slate-200 dark:border-slate-800">
        <div className="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8">
          <div className="text-center mb-16">
            <h2 className="text-3xl md:text-5xl font-black tracking-tight mb-4">Quem usa sente a diferença no dia a dia</h2>
            <p className="text-slate-600 dark:text-slate-400 max-w-2xl mx-auto text-lg">
              Depoimentos de linguagem simples e focados em rotina costumam funcionar melhor do que frases genéricas.
            </p>
          </div>

          <div className="grid grid-cols-1 lg:grid-cols-3 gap-8">
            {[
              {
                text: 'Antes eu ficava perdido entre papel, WhatsApp e anotações. Agora consigo acompanhar melhor a bancada e responder o cliente muito mais rápido.',
                author: 'Assistência técnica beta',
              },
              {
                text: 'O laudo com IA ajuda bastante. A explicação fica mais profissional e o cliente entende melhor o que está sendo feito no aparelho.',
                author: 'Loja de smartphones beta',
              },
              {
                text: 'Gostei principalmente da visão de lucro e do fluxo mais rápido para abrir O.S. e acompanhar tudo sem enrolação.',
                author: 'Operação em fase de testes',
              },
            ].map((item, idx) => (
              <div key={idx} className="rounded-3xl p-8 bg-slate-50 dark:bg-slate-950 border border-slate-200 dark:border-slate-800">
                <p className="text-lg leading-relaxed text-slate-700 dark:text-slate-300">“{item.text}”</p>
                <div className="mt-6 text-sm font-black uppercase tracking-widest text-slate-500">
                  {item.author}
                </div>
              </div>
            ))}
          </div>
        </div>
      </section>

      {/* FAQ */}
      <section id="faq" className="py-24 bg-slate-50 dark:bg-slate-950">
        <div className="max-w-4xl mx-auto px-4 sm:px-6 lg:px-8">
          <div className="text-center mb-14">
            <h2 className="text-3xl md:text-5xl font-black tracking-tight mb-4">Perguntas frequentes</h2>
            <p className="text-slate-600 dark:text-slate-400 text-lg">
              Respostas objetivas para as dúvidas mais comuns antes de começar.
            </p>
          </div>

          <div className="space-y-4">
            {faqs.map((faq, idx) => (
              <div
                key={idx}
                className="rounded-2xl border border-slate-200 dark:border-slate-800 bg-white dark:bg-slate-900 p-6"
              >
                <h3 className="text-lg font-black mb-2">{faq.q}</h3>
                <p className="text-slate-600 dark:text-slate-400 leading-relaxed">{faq.a}</p>
              </div>
            ))}
          </div>
        </div>
      </section>

      {/* Final CTA */}
      <section className="py-24 relative overflow-hidden">
        <div
          className="absolute inset-0 bg-indigo-600"
          style={{
            backgroundImage:
              'radial-gradient(circle at 2px 2px, rgba(255,255,255,0.15) 1px, transparent 0)',
            backgroundSize: '40px 40px',
          }}
        ></div>

        <div className="max-w-4xl mx-auto px-4 relative z-10 text-center">
          <h2 className="text-4xl md:text-5xl font-black text-white mb-6 tracking-tighter">
            Organize sua assistência, acelere a bancada e profissionalize o atendimento.
          </h2>
          <p className="text-indigo-100 text-xl mb-10 font-medium">
            Comece agora e veja como o Fix Flow pode simplificar sua operação.
          </p>
          <div className="flex flex-col sm:flex-row items-center justify-center gap-4">
            <AppLink
              to="/login"
              className="px-10 py-5 bg-white text-indigo-700 font-black rounded-full uppercase tracking-widest shadow-2xl hover:bg-indigo-50 transition-all inline-flex items-center gap-2 hover:scale-105 active:scale-95 text-lg"
            >
              Começar grátis <ArrowRight size={18} />
            </AppLink>
            <a
              href="#planos"
              className="px-10 py-5 bg-white/10 border border-white/20 text-white font-black rounded-full uppercase tracking-widest hover:bg-white/15 transition-all text-lg"
            >
              Ver planos
            </a>
          </div>
        </div>
      </section>

      {/* Footer */}
      <footer className="bg-white dark:bg-slate-950 py-12 border-t border-slate-200 dark:border-slate-800">
        <div className="max-w-7xl mx-auto px-4 flex flex-col lg:flex-row items-center justify-between gap-8">
          <div className="flex items-center gap-3">
            <div className="w-9 h-9 bg-indigo-600 rounded-lg flex items-center justify-center rotate-3">
              <span className="text-white font-black text-xl">F</span>
            </div>
            <div>
              <div className="font-black text-xl tracking-tighter uppercase italic">Fix Flow</div>
              <div className="text-sm text-slate-500">Gestão para assistências técnicas</div>
            </div>
          </div>

          <div className="flex flex-wrap items-center justify-center gap-6 text-sm font-bold text-slate-500 uppercase tracking-widest">
            <AppLink to="/terms" className="hover:text-indigo-600 dark:hover:text-indigo-400 transition-colors">
              Termos de Uso
            </AppLink>
            <AppLink to="/privacy" className="hover:text-indigo-600 dark:hover:text-indigo-400 transition-colors">
              Política de Privacidade
            </AppLink>
            <a href="mailto:usefixflow@gmail.com" className="hover:text-indigo-600 dark:hover:text-indigo-400 transition-colors">
              usefixflow@gmail.com
            </a>
          </div>

          <div className="text-slate-500 font-bold text-xs uppercase tracking-widest text-center lg:text-right">
            &copy; {new Date().getFullYear()} Fix Flow Technologies. Todos os direitos reservados.
          </div>
        </div>
      </footer>
    </div>
  );
};