export default function Home() {
  return (
    <div className="min-h-screen bg-white text-gray-900 font-sans">
      {/* Hero Section */}
      <section className="relative h-[90vh] flex items-center justify-center bg-cover bg-center" style={{ backgroundImage: "url('https://images.unsplash.com/photo-1507525428034-b723cf961d3e?auto=format&fit=crop&w=2100&q=80')"}}>
        <div className="bg-black/40 absolute inset-0" />
        <div className="relative z-10 text-center text-white px-6">
          <h1 className="text-4xl md:text-6xl font-bold mb-6">
            Convierte tu historia en un viaje de autor
          </h1>
          <p className="text-lg md:text-xl mb-8 max-w-2xl mx-auto">
            No vendemos destinos, diseñamos narrativas. Cada viaje es un guion único escrito para ti.
          </p>
          <button className="bg-white text-gray-900 px-6 py-3 rounded-2xl shadow-md font-medium hover:bg-gray-100 transition">
            Descubre tu historia
          </button>
        </div>
      </section>

      {/* Historias Section */}
      <section className="py-20 px-6 md:px-16 bg-gray-50">
        <h2 className="text-3xl font-semibold mb-10 text-center">Historias de autor</h2>
        <div className="grid md:grid-cols-3 gap-8">
          {[
            {
              title: "Sabores de Oaxaca",
              img: "https://images.unsplash.com/photo-1504674900247-0877df9cc836?auto=format&fit=crop&w=800&q=80",
              desc: "Un viaje gastronómico narrado entre mercados, cocinas y tradiciones vivas.",
            },
            {
              title: "Luz en Marrakech",
              img: "https://images.unsplash.com/photo-1500530855697-b586d89ba3ee?auto=format&fit=crop&w=800&q=80",
              desc: "Explora zocos, riads y atardeceres dorados en un capítulo vibrante.",
            },
            {
              title: "Exploración Patagónica",
              img: "https://images.unsplash.com/photo-1501785888041-af3ef285b470?auto=format&fit=crop&w=800&q=80",
              desc: "Glaciares, silencio y naturaleza en formato épico cinematográfico.",
            },
          ].map((story, i) => (
            <div key={i} className="rounded-2xl overflow-hidden shadow-lg bg-white">
              <img src={story.img} alt={story.title} className="h-56 w-full object-cover" />
              <div className="p-6">
                <h3 className="text-xl font-semibold mb-2">{story.title}</h3>
                <p className="text-gray-600 mb-4">{story.desc}</p>
                <button className="text-sm font-medium text-gray-900 underline hover:opacity-70">
                  Leer historia
                </button>
              </div>
            </div>
          ))}
        </div>
      </section>

      {/* Proceso Section */}
      <section className="py-20 px-6 md:px-16">
        <h2 className="text-3xl font-semibold mb-10 text-center">Cómo funciona</h2>
        <div className="grid md:grid-cols-4 gap-8">
          {[
            { step: "1", title: "Brief narrativo", desc: "Cuéntanos quién eres y qué te inspira." },
            { step: "2", title: "Treatment creativo", desc: "En 72h diseñamos un guion de viaje único." },
            { step: "3", title: "Producción boutique", desc: "Reservas, fixers locales y escenas vividas." },
            { step: "4", title: "Entrega final", desc: "Tu viaje como película. Un recuerdo tangible." },
          ].map((item, i) => (
            <div key={i} className="bg-gray-50 p-6 rounded-2xl shadow-md text-center">
              <div className="text-4xl font-bold text-gray-400 mb-4">{item.step}</div>
              <h3 className="text-xl font-semibold mb-2">{item.title}</h3>
              <p className="text-gray-600">{item.desc}</p>
            </div>
          ))}
        </div>
      </section>

      {/* CTA Section */}
      <section className="py-20 bg-gray-900 text-white text-center px-6">
        <h2 className="text-3xl font-semibold mb-6">¿Listo para escribir tu historia?</h2>
        <p className="max-w-xl mx-auto mb-8 text-lg">
          Da el primer paso con un brief inspiracional. En menos de 72h tendrás tu treatment personalizado.
        </p>
        <button className="bg-white text-gray-900 px-8 py-4 rounded-2xl shadow-md font-medium hover:bg-gray-100 transition">
          Comienza ahora
        </button>
      </section>

      {/* Footer */}
      <footer className="py-10 px-6 md:px-16 bg-gray-100 text-gray-600 text-center">
        <p>© 2025 Tu Marca. Todos los derechos reservados.</p>
      </footer>
    </div>
  );
}