import { Hero } from "../components";

export const LandingScreen = () => {
  return (
    <main className="min-h-screen bg-white">
      <Hero />
      {/* Other sections */}
    </main>
  );
};

<section className="relative overflow-hidden pt-16 pb-20 md:pt-24 md:pb-32"
  style={{ background: "linear-gradient(180deg, #f0f6ff 0%, #ffffff 55%)" }}>
  
  {/* Dot pattern background */}
  <div className="absolute inset-0 z-0 opacity-[0.4]"
    style={{
      backgroundImage: "radial-gradient(#cbd5e1 1px, transparent 1px)",
      backgroundSize: "24px 24px",
    }}
  />

  <div className="container relative z-10 mx-auto px-4 text-center">
    {/* Badge */}
    <Reveal delay={100}>
      <div className="mb-8 flex justify-center">
        <div className="inline-flex items-center gap-2 rounded-full border border-blue-100 bg-white/80 px-4 py-1.5">
          <span className="flex h-2 w-2 rounded-full bg-blue-600 animate-pulse" />
          <span className="text-[13px] font-semibold text-blue-700">
            Nuevo: Integración con MercadoPago
          </span>
        </div>
      </div>
    </Reveal>

    {/* Headline */}
    <Reveal delay={300}>
      <h1 className="mx-auto mb-6 max-w-4xl text-[40px] font-black leading-[1.1] tracking-tighter text-zinc-900 md:text-[64px]">
        Automatizá la atención al cliente en WhatsApp con{" "}
        <span className="bg-gradient-to-r from-[#2563eb] via-[#3b82f6] to-[#60a5fa] bg-clip-text text-transparent">
          inteligencia artificial
        </span>
      </h1>
    </Reveal>

    {/* Subtitle */}
    <Reveal delay={500}>
      <p className="mx-auto mb-10 max-w-2xl text-[16px] leading-relaxed text-zinc-500 md:text-[18px]">
        Respondé consultas, agendá turnos y cerrá ventas automáticamente. Sin código, sin fricción —{" "}
        <span className="text-zinc-800 font-medium">activo en menos de 10 minutos.</span>
      </p>
    </Reveal>

    {/* CTAs */}
    <Reveal delay={700}>
      <div className="mb-12 flex flex-col items-center justify-center gap-4 sm:flex-row">
        <Button className="h-14 w-full rounded-2xl bg-[#2563eb] px-10 text-[16px] font-bold" asChild>
          <Link href={ROUTES.AUTH.REGISTER}>Comenzar prueba gratuita</Link>
        </Button>
        <Button variant="outline" className="h-14 w-full rounded-2xl" asChild>
          <Link href="/quickstart">Ver demostración</Link>
        </Button>
      </div>
      <div className="text-[14px] font-medium text-zinc-400">
        7 días gratis · Sin tarjeta de crédito · Cancelación en cualquier momento
      </div>
    </Reveal>

    {/* Statistics */}
    <div className="mt-20 grid grid-cols-2 gap-8 border-t border-zinc-100 pt-16 md:grid-cols-4">
      {stats.map((stat, i) => (
        <Reveal key={i} delay={900 + i * 100}>
          <div className="flex flex-col gap-1">
            <span className="text-3xl font-black text-zinc-900">{stat.label}</span>
            <span className="text-[13px] font-medium text-zinc-400">{stat.sub}</span>
          </div>
        </Reveal>
      ))}
    </div>
  </div>
</section>

const features = [
  {
    title: "IA conversacional",
    description: "Respuestas naturales entrenadas con la información de tu negocio.",
    icon: "💬",
  },
  {
    title: "Agenda automática",
    description: "El asistente gestiona turnos y citas directamente en la conversación.",
    icon: "📅",
  },
  {
    title: "CRM integrado",
    description: "Registro centralizado de contactos con historial completo.",
    icon: "👥",
  },
  {
    title: "Analytics en tiempo real",
    description: "Tasa de resolución y satisfacción en un solo panel.",
    icon: "📊",
  },
  {
    title: "Traspaso controlado",
    description: "Cuando la consulta requiere atención humana, el sistema transfiere con contexto.",
    icon: "🔄",
  },
  {
    title: "Respuesta inmediata",
    description: "Menos de dos segundos de latencia promedio, disponible 24/7.",
    icon: "⚡",
  },
];

const testimonials = [
  {
    quote: "Redujimos el 80% de los mensajes repetitivos. El equipo ahora se enfoca en tareas de mayor valor. El retorno fue evidente en el primer mes.",
    author: "María García",
    role: "Directora — Clínica Dental Norte",
    initials: "MG",
  },
  {
    quote: "En tres días el bot ya estaba respondiendo. Las reservas online subieron un 40% el primer mes sin ningún esfuerzo adicional del equipo.",
    author: "Juan Rodríguez",
    role: "Propietario — Restaurante El Molino",
    initials: "JR",
  },
  {
    quote: "Atendemos clientes a las 3am sin personal adicional. Calculamos que recuperamos la inversión en las primeras dos semanas de uso.",
    author: "Laura Pérez",
    role: "Socia — Inmobiliaria Palermo",
    initials: "LP",
  },
];

const faqs = [
  {
    value: "tech",
    q: "¿Se requiere conocimiento técnico?",
    a: "No. Todo se configura desde un panel visual guiado. No es necesario escribir código ni contar con un equipo de IT.",
  },
  {
    value: "whatsapp",
    q: "¿Puedo usar mi número de WhatsApp actual?",
    a: "Sí. Podés migrar tu número existente a la API oficial de Meta. El proceso es guiado y tarda menos de diez minutos.",
  },
  {
    value: "time",
    q: "¿Quanto tiempo lleva la configuración inicial?",
    a: "El promedio de nuestros clientes es de 8 minutos desde el registro hasta el bot activo respondiendo mensajes.",
  },
  {
    value: "commitment",
    q: "¿Hay compromiso de permanencia?",
    a: "No. La suscripción se puede cancelar en cualquier momento desde el panel, sin cargos adicionales ni gestiones externas.",
  },
];

import {
  Faq,
  Features,
  FinalCTA,
  Hero,
  Methodology,
  Testimonials,
} from "../components";

export const LandingScreen = () => {
  return (
    <main className="min-h-screen bg-white">
      <Hero />
      <Methodology />
      <Features />
      <Testimonials />
      <Faq />
      <FinalCTA />
    </main>
  );
};