import { Footer } from "@/components/footer";
import { NavBar } from "@/components/navbar";
import { Hero } from "@/components/hero";
import { Catalog } from "@/components/catalog";
import { Container } from "@/components/container";
import { Heading } from "@/components/heading";
import { ShieldCheck, Truck, CreditCard, Headphones } from "lucide-react";

export default function Home() {
  return (
    <main>
      <NavBar />
      <Hero />
      
      <section className="py-16 border-y bg-white">
        <Container>
          <div className="grid grid-cols-1 md:grid-cols-4 gap-8">
            <Feature icon={<ShieldCheck className="w-8 h-8 text-blue-600" />} title="Compra Segura" desc="Transacciones protegidas y transparencia total." />
            <Feature icon={<Truck className="w-8 h-8 text-blue-600" />} title="Envíos Rápidos" desc="Número de guía inmediato tras confirmar pago." />
            <Feature icon={<CreditCard className="w-8 h-8 text-blue-600" />} title="Múltiples Pagos" desc="Binance, Tarjeta, OXXO, ACH y más." />
            <Feature icon={<Headphones className="w-8 h-8 text-blue-600" />} title="Soporte 24/7" desc="Atención personalizada para mayoristas." />
          </div>
        </Container>
      </section>

      <Catalog />

      <section className="py-20">
        <Container>
          <div className="max-w-3xl mx-auto text-center">
            <Heading>¿Por qué confiar en nosotros?</Heading>
            <p className="mt-6 text-lg text-neutral-600 leading-relaxed">
              En <strong>EL PALACIO DE TENI</strong>, entendemos que tu inversión es lo más importante. 
              Somos líderes en la distribución de calzado por mayoreo, ofreciendo transparencia en cada paso. 
              Desde el momento de tu pago, nuestro sistema genera automáticamente tu orden y te mantenemos 
              informado hasta que la mercancía llegue a tu puerta.
            </p>
          </div>
        </Container>
      </section>
      <Footer />
    </main>
  );
}

function Feature({ icon, title, desc }: { icon: React.ReactNode, title: string, desc: string }) {
  return (
    <div className="flex flex-col items-center text-center p-4">
      <div className="mb-4">{icon}</div>
      <h3 className="font-bold text-lg mb-2">{title}</h3>
      <p className="text-sm text-neutral-500">{desc}</p>
    </div>
  );
}