import React from "react";

export default function FashionWebsite() {
  return (
    <div className="font-sans bg-white text-gray-800">
      {/* Header */}
      <header className="bg-pink-500 text-white p-6 flex justify-between items-center">
        <div className="flex items-center gap-3">
          <div className="bg-white text-pink-500 font-bold px-3 py-1 rounded-2xl shadow">
            UHAUL
          </div>
          <span className="text-xl font-semibold">Moda para mujer</span>
        </div>
        <nav className="space-x-6">
          <a href="#inicio" className="hover:underline">Inicio</a>
          <a href="#productos" className="hover:underline">Productos</a>
          <a href="#contacto" className="hover:underline">Contacto</a>
        </nav>
      </header>

      {/* Hero */}
      <section id="inicio" className="relative h-[400px] flex items-center justify-center text-white">
        <img
          src="https://images.unsplash.com/photo-1490481651871-ab68de25d43d?q=80&w=1200"
          alt="Moda mujer"
          className="absolute inset-0 w-full h-full object-cover"
        />
        <div className="absolute inset-0 bg-black/40" />
        <div className="relative text-center">
          <h1 className="text-4xl md:text-5xl font-bold mb-4">
            Descubre tu estilo
          </h1>
          <p className="text-lg md:text-xl">
            Ropa moderna, elegante y cómoda para ti
          </p>
        </div>
      </section>

      {/* Productos */}
      <section id="productos" className="p-10 grid md:grid-cols-3 gap-8">
        {/* Producto 1 */}
        <div className="shadow-lg rounded-2xl overflow-hidden">
          <img
            src="https://images.unsplash.com/photo-1520975916090-3105956dac38?q=80&w=800"
            alt="Vestido elegante"
            className="h-64 w-full object-cover"
          />
          <div className="p-4">
            <h2 className="text-xl font-bold mb-2">Vestidos elegantes</h2>
            <p>Perfectos para ocasiones especiales con un toque sofisticado.</p>
          </div>
        </div>

        {/* Producto 2 */}
        <div className="shadow-lg rounded-2xl overflow-hidden">
          <img
            src="https://images.unsplash.com/photo-1512436991641-6745cdb1723f?q=80&w=800"
            alt="Ropa casual"
            className="h-64 w-full object-cover"
          />
          <div className="p-4">
            <h2 className="text-xl font-bold mb-2">Ropa casual</h2>
            <p>Comodidad y estilo para tu día a día.</p>
          </div>
        </div>

        {/* Producto 3 */}
        <div className="shadow-lg rounded-2xl overflow-hidden">
          <img
            src="https://images.unsplash.com/photo-1495121605193-b116b5b09a14?q=80&w=800"
            alt="Accesorios"
            className="h-64 w-full object-cover"
          />
          <div className="p-4">
            <h2 className="text-xl font-bold mb-2">Accesorios</h2>
            <p>Complementa tu outfit con los mejores detalles.</p>
          </div>
        </div>
      </section>

      {/* Colección destacada */}
      <section className="bg-gray-100 p-10 text-center">
        <h2 className="text-3xl font-bold mb-6">Nueva colección</h2>
        <div className="grid md:grid-cols-2 gap-6">
          <img
            src="https://images.unsplash.com/photo-1503342217505-b0a15ec3261c?q=80&w=1000"
            alt="Modelo moda"
            className="rounded-2xl shadow-lg w-full h-[300px] object-cover"
          />
          <img
            src="https://images.unsplash.com/photo-1483985988355-763728e1935b?q=80&w=1000"
            alt="Ropa moderna"
            className="rounded-2xl shadow-lg w-full h-[300px] object-cover"
          />
        </div>
      </section>

      {/* Contacto */}
      <section id="contacto" className="p-10 text-center">
        <h2 className="text-3xl font-bold mb-4">Contáctanos</h2>
        <p className="mb-6">Síguenos y descubre más estilos</p>
        <button className="bg-pink-500 text-white px-6 py-3 rounded-xl shadow-lg hover:bg-pink-600 transition">
          Ver catálogo
        </button>
      </section>

      {/* Footer */}
      <footer className="bg-black text-white text-center p-4">
        <p>© 2026 UHAUL Fashion - Todos los derechos reservados</p>
      </footer>
    </div>
  );
}