import React from 'react';
import { Helmet } from 'react-helmet';
import { Link } from 'react-router-dom';
import { motion } from 'framer-motion';
import { Baby, HeartHandshake, Scissors, Sparkles, ArrowRight, Truck, ShieldCheck, HandHeart } from 'lucide-react';
import Reveal from '@/components/Reveal';
import ProductsList from '@/components/ProductsList';

const categories = [
  {
    name: 'Bebés',
    description: 'Mantas, chalecos y sets de recién nacido en lanas hipoalergénicas.',
    icon: Baby,
    tint: 'bg-primary/15 text-primary',
  },
  {
    name: 'Adultos Mayores',
    description: 'Chales, gorros y abrigo liviano pensado para pieles sensibles.',
    icon: HeartHandshake,
    tint: 'bg-accent/20 text-accent-foreground',
  },
  {
    name: 'Tejidos a Mano',
    description: 'Piezas únicas tejidas a dos agujas y crochet, directo de nuestras manos.',
    icon: Scissors,
    tint: 'bg-secondary text-secondary-foreground',
  },
];

const HomePage = () => {
  return (
    <>
      <Helmet>
        <title>Caricia Tienda | Suavidad y cuidado para tu familia</title>
        <meta
          name="description"
          content="Tejidos artesanales y productos de bienestar para bebés y adultos mayores. Compra online mantas, chales, amigurumis y sets de recién nacido hechos a mano en Chile."
        />
      </Helmet>

      {/* Hero */}
      <section className="relative overflow-hidden">
        <div className="absolute -top-24 -right-24 w-96 h-96 oval-mask bg-primary/15 pointer-events-none" />
        <div className="absolute top-40 -left-32 w-72 h-72 oval-mask bg-accent/20 pointer-events-none" />
        <div className="max-w-6xl mx-auto px-4 sm:px-6 min-h-[80dvh] grid md:grid-cols-2 gap-12 items-center py-16">
          <motion.div
            initial={{ opacity: 0, y: 24 }}
            animate={{ opacity: 1, y: 0 }}
            transition={{ duration: 0.6, ease: 'easeOut' }}
          >
            <span className="inline-block text-xs font-semibold uppercase tracking-[0.25em] text-primary border border-primary/30 rounded-full px-4 py-1.5 mb-6">
              Hecho a mano en Chile
            </span>
            <h1 className="font-display text-5xl sm:text-6xl font-bold leading-[1.05] mb-6">
              Suavidad y cuidado para tu{' '}
              <span className="italic text-primary">familia</span>
            </h1>
            <p className="text-lg text-muted-foreground leading-relaxed max-w-md mb-8">
              Productos de bienestar y tejidos artesanales para bebés y adultos
              mayores. Cada pieza se teje con calma, cariño y materiales nobles.
            </p>
            <div className="flex flex-wrap gap-4">
              <Link
                to="/tienda"
                className="inline-flex items-center gap-2 rounded-full bg-primary text-primary-foreground px-7 py-3.5 font-semibold hover:opacity-90 active:scale-[0.98] transition"
              >
                Compra aquí <ArrowRight className="w-4 h-4" />
              </Link>
              <a
                href="#promociones"
                className="inline-flex items-center gap-2 rounded-full border border-foreground/20 px-7 py-3.5 font-semibold hover:border-primary hover:text-primary active:scale-[0.98] transition"
              >
                Ver promociones
              </a>
            </div>
          </motion.div>

          <motion.div
            initial={{ opacity: 0, scale: 0.94 }}
            animate={{ opacity: 1, scale: 1 }}
            transition={{ duration: 0.7, delay: 0.15, ease: 'easeOut' }}
            className="relative hidden md:flex items-center justify-center h-[420px]"
            aria-hidden="true"
          >
            <div className="absolute w-80 h-80 oval-mask bg-gradient-to-br from-primary/40 to-primary/10" />
            <div className="absolute w-80 h-80 oval-mask border-2 border-accent translate-x-16 translate-y-10" />
            <div className="absolute w-40 h-40 oval-mask bg-secondary -translate-x-32 translate-y-24" />
            <div className="relative z-10 text-center px-10">
              <HandHeart className="w-12 h-12 mx-auto mb-4 text-primary" />
              <p className="font-display text-2xl italic">Tejido con amor,</p>
              <p className="font-display text-2xl">pensado para abrazar.</p>
            </div>
          </motion.div>
        </div>
      </section>

      {/* Categorías */}
      <section className="border-t border-border bg-card/60">
        <div className="max-w-6xl mx-auto px-4 sm:px-6 py-20">
          <Reveal>
            <p className="text-xs font-semibold uppercase tracking-[0.25em] text-primary mb-3">
              Nuestras categorías
            </p>
            <h2 className="font-display text-4xl font-bold mb-12">
              Un rincón de calidez para cada etapa
            </h2>
          </Reveal>
          <div className="grid gap-6 md:grid-cols-3">
            {categories.map((cat, i) => (
              <Reveal key={cat.name} delay={i * 0.1}>
                <Link
                  to="/tienda"
                  className="group block bg-background border border-border rounded-3xl p-8 hover:border-primary/50 hover:shadow-lg hover:shadow-primary/10 hover:-translate-y-1 transition-all duration-300"
                >
                  <span className={`inline-flex w-16 h-16 oval-mask items-center justify-center mb-6 ${cat.tint}`}>
                    <cat.icon className="w-7 h-7" />
                  </span>
                  <h3 className="font-display text-2xl font-bold mb-2 group-hover:text-primary transition-colors">
                    {cat.name}
                  </h3>
                  <p className="text-sm text-muted-foreground leading-relaxed mb-4">
                    {cat.description}
                  </p>
                  <span className="inline-flex items-center gap-1.5 text-sm font-semibold text-primary">
                    Explorar <ArrowRight className="w-4 h-4 group-hover:translate-x-1 transition-transform" />
                  </span>
                </Link>
              </Reveal>
            ))}
          </div>
        </div>
      </section>

      {/* Promociones */}
      <section id="promociones" className="relative overflow-hidden">
        <div className="max-w-6xl mx-auto px-4 sm:px-6 py-20">
          <Reveal>
            <div className="relative rounded-3xl bg-foreground text-background p-10 md:p-14 overflow-hidden">
              <div className="absolute -top-16 -right-16 w-64 h-64 oval-mask bg-primary/30 pointer-events-none" />
              <div className="absolute -bottom-20 -left-10 w-56 h-56 oval-mask bg-accent/25 pointer-events-none" />
              <div className="relative z-10 md:max-w-xl">
                <span className="inline-flex items-center gap-2 text-xs font-semibold uppercase tracking-[0.25em] text-accent mb-4">
                  <Sparkles className="w-4 h-4" /> Promociones destacadas
                </span>
                <h2 className="font-display text-4xl md:text-5xl font-bold mb-4">
                  Colección Primavera
                </h2>
                <p className="text-background/70 text-lg leading-relaxed mb-8">
                  Renueva el abrigo de los que más quieres con descuentos de
                  temporada en mantas, chales y sets tejidos a mano.
                </p>
                <Link
                  to="/tienda"
                  className="inline-flex items-center gap-2 rounded-full bg-primary text-primary-foreground px-7 py-3.5 font-semibold hover:opacity-90 active:scale-[0.98] transition"
                >
                  Ver productos en oferta <ArrowRight className="w-4 h-4" />
                </Link>
              </div>
            </div>
          </Reveal>
        </div>
      </section>

      {/* Productos destacados */}
      <section className="border-t border-border">
        <div className="max-w-6xl mx-auto px-4 sm:px-6 py-20">
          <Reveal>
            <div className="flex flex-wrap items-end justify-between gap-4 mb-12">
              <div>
                <p className="text-xs font-semibold uppercase tracking-[0.25em] text-primary mb-3">
                  Tienda online
                </p>
                <h2 className="font-display text-4xl font-bold">Productos destacados</h2>
              </div>
              <Link
                to="/tienda"
                className="inline-flex items-center gap-1.5 text-sm font-semibold text-primary hover:gap-2.5 transition-all"
              >
                Ver todo el catálogo <ArrowRight className="w-4 h-4" />
              </Link>
            </div>
          </Reveal>
          <ProductsList />
        </div>
      </section>

      {/* Nosotros */}
      <section id="nosotros" className="border-t border-border bg-secondary/50">
        <div className="max-w-6xl mx-auto px-4 sm:px-6 py-20 grid md:grid-cols-2 gap-12 items-center">
          <Reveal>
            <p className="text-xs font-semibold uppercase tracking-[0.25em] text-primary mb-3">
              Nuestra historia
            </p>
            <h2 className="font-display text-4xl font-bold mb-6">
              Cada puntada cuenta una historia de cariño
            </h2>
            <p className="text-muted-foreground leading-relaxed mb-4">
              Caricia Tienda nació del deseo de entregar suavidad y bienestar a
              quienes más lo necesitan: los bebés que recién llegan al mundo y
              los adultos mayores que nos dieron todo.
            </p>
            <p className="text-muted-foreground leading-relaxed">
              Trabajamos con lanas nobles, fibras hipoalergénicas y un proceso
              completamente artesanal. Cada pedido se prepara a mano y se envía
              con el mismo cuidado con el que fue tejido.
            </p>
          </Reveal>
          <Reveal delay={0.15}>
            <div className="grid gap-4">
              {[
                { icon: Truck, title: 'Envíos a todo Chile', text: 'Despachamos tu pedido con seguimiento y empaque protegido.' },
                { icon: ShieldCheck, title: 'Compra segura', text: 'Paga en línea con total confianza a través de nuestro checkout protegido.' },
                { icon: HandHeart, title: 'Hecho a mano', text: 'Piezas únicas tejidas por artesanas, nunca producidas en serie.' },
              ].map((item) => (
                <div
                  key={item.title}
                  className="flex gap-4 bg-background border border-border rounded-2xl p-5"
                >
                  <span className="shrink-0 w-12 h-12 oval-mask bg-primary/15 text-primary flex items-center justify-center">
                    <item.icon className="w-5 h-5" />
                  </span>
                  <div>
                    <h3 className="font-semibold mb-1">{item.title}</h3>
                    <p className="text-sm text-muted-foreground">{item.text}</p>
                  </div>
                </div>
              ))}
            </div>
          </Reveal>
        </div>
      </section>
    </>
  );
};

export default HomePage;