import { Button } from "@/components/ui/button";
import { Card, CardContent } from "@/components/ui/card";
import { CheckCircle, Upload, Image as ImageIcon, Truck } from "lucide-react";
import { motion } from "framer-motion";

export default function ImpresionesPage() {
  return (
    <div className="w-full">
      {/* Hero Section */}
      <section className="relative w-full h-[70vh] bg-cover bg-center flex items-center justify-center" style={{backgroundImage: "url('/hero-impresion.jpg')"}}>
        <div className="bg-black/50 w-full h-full absolute top-0 left-0" />
        <div className="relative z-10 text-center text-white max-w-2xl mx-auto px-4">
          <h1 className="text-4xl md:text-5xl font-bold mb-6">Impresiones Fine Art en Papel y Canvas</h1>
          <p className="text-lg mb-6">Pedí tus impresiones online con calidad profesional y envíos a todo el país</p>
          <Button size="lg" className="bg-emerald-600 hover:bg-emerald-700 text-white px-8 py-4 text-lg rounded-2xl shadow-lg">
            📸 Encargar mi impresión ahora
          </Button>
        </div>
      </section>

      {/* Beneficios rápidos */}
      <section className="grid md:grid-cols-3 gap-6 py-16 px-6 md:px-20 bg-gray-50 text-center">
        <div>
          <Truck className="mx-auto h-10 w-10 text-emerald-600 mb-4" />
          <h3 className="font-semibold text-lg">Envío a todo el país</h3>
          <p className="text-gray-600">Recibí tus fotos donde estés</p>
        </div>
        <div>
          <ImageIcon className="mx-auto h-10 w-10 text-emerald-600 mb-4" />
          <h3 className="font-semibold text-lg">Calidad Fine Art</h3>
          <p className="text-gray-600">Papeles y canvas de primera línea</p>
        </div>
        <div>
          <CheckCircle className="mx-auto h-10 w-10 text-emerald-600 mb-4" />
          <h3 className="font-semibold text-lg">Compra fácil</h3>
          <p className="text-gray-600">Subí tu foto en minutos</p>
        </div>
      </section>

      {/* Proceso paso a paso */}
      <section className="py-20 px-6 md:px-20 text-center">
        <h2 className="text-3xl font-bold mb-12">Así de fácil es imprimir tus fotos</h2>
        <div className="grid md:grid-cols-3 gap-12">
          <div className="p-6 bg-white rounded-2xl shadow-md">
            <Upload className="mx-auto h-12 w-12 text-emerald-600 mb-4" />
            <h3 className="font-semibold mb-2">1. Subí tu archivo</h3>
            <p className="text-gray-600">Cargá tu foto directamente desde la web</p>
          </div>
          <div className="p-6 bg-white rounded-2xl shadow-md">
            <ImageIcon className="mx-auto h-12 w-12 text-emerald-600 mb-4" />
            <h3 className="font-semibold mb-2">2. Elegí tamaño y papel</h3>
            <p className="text-gray-600">Mate, Brillo, Satin o Canvas Fine Art</p>
          </div>
          <div className="p-6 bg-white rounded-2xl shadow-md">
            <Truck className="mx-auto h-12 w-12 text-emerald-600 mb-4" />
            <h3 className="font-semibold mb-2">3. Recibí en tu casa</h3>
            <p className="text-gray-600">Enviamos a todo el país, rápido y seguro</p>
          </div>
        </div>
      </section>

      {/* Papeles */}
      <section className="bg-gray-100 py-20 px-6 md:px-20">
        <h2 className="text-3xl font-bold text-center mb-12">Papeles de primera calidad</h2>
        <div className="grid md:grid-cols-2 gap-10">
          <Card className="overflow-hidden">
            <img src="/canson.jpg" alt="Canson Fine Art" className="w-full h-64 object-cover" />
            <CardContent className="p-6">
              <h3 className="text-xl font-semibold mb-2">Canson Imaging & Infinity</h3>
              <p className="text-gray-600">Superficies Mate, Brillo o Satin en varios gramajes</p>
            </CardContent>
          </Card>
          <Card className="overflow-hidden">
            <img src="/schoeller.jpg" alt="Schoeller Fine Art" className="w-full h-64 object-cover" />
            <CardContent className="p-6">
              <h3 className="text-xl font-semibold mb-2">Schoeller Fine Art Papers</h3>
              <p className="text-gray-600">Acabados Ultra Glacier y Ultra Satin en diferentes gramajes</p>
            </CardContent>
          </Card>
        </div>
      </section>

      {/* Testimonios */}
      <section className="py-20 px-6 md:px-20 text-center">
        <h2 className="text-3xl font-bold mb-12">Lo que dicen nuestros clientes</h2>
        <div className="grid md:grid-cols-2 gap-8">
          <Card className="p-6 shadow-md rounded-2xl">
            <p className="italic text-gray-700 mb-4">“La calidad de impresión superó mis expectativas. Los colores son vibrantes y llegaron perfectamente embalados.”</p>
            <h4 className="font-semibold">— Mariana G.</h4>
          </Card>
          <Card className="p-6 shadow-md rounded-2xl">
            <p className="italic text-gray-700 mb-4">“Imprimí mis fotos en canvas y quedaron increíbles en el living. Muy recomendable el servicio.”</p>
            <h4 className="font-semibold">— Pablo R.</h4>
          </Card>
        </div>
      </section>

      {/* CTA final */}
      <section className="bg-emerald-600 text-white py-20 text-center">
        <h2 className="text-3xl font-bold mb-6">¿Listo para ver tus fotos en papel?</h2>
        <Button size="lg" className="bg-white text-emerald-700 hover:bg-gray-100 px-8 py-4 text-lg rounded-2xl shadow-lg">
          Encargar mi impresión hoy mismo
        </Button>
      </section>
    </div>
  );
}