/*
BENDITO CATERING — FREE DEPLOY VERSION

RECOMENDADO PARA PUBLICAR GRATIS:
1. Cloudflare Pages (RECOMENDADO)
2. Netlify
3. Vercel

CÓMO USAR:
- Guarda este archivo como: index.html
- Sube también:
  /images/logo-bendito.png
  /images/hero.jpg
  /images/gallery-1.jpg etc...

ESTRUCTURA:
/project
  index.html
  /images

LUEGO:
- Subes la carpeta a Cloudflare Pages
- Conectas benditocatering.com GRATIS
*/

export default function BenditoCateringWebsite() {
  const services = [
    {
      title: 'Wedding Experiences',
      description:
        'Diseñamos bodas gastronómicas elegantes, emocionales y completamente personalizadas.',
      image: '/images/wedding.jpg',
    },
    {
      title: 'Corporate Events',
      description:
        'Coffee breaks, marcas y eventos corporativos con estética premium y servicio impecable.',
      image: '/images/corporate.jpg',
    },
    {
      title: 'Private Celebrations',
      description:
        'Experiencias gastronómicas para celebraciones privadas donde cada detalle importa.',
      image: '/images/private.jpg',
    },
  ]

  const gallery = [
    '/images/gallery-1.jpg',
    '/images/gallery-2.jpg',
    '/images/gallery-3.jpg',
    '/images/gallery-4.jpg',
    '/images/gallery-5.jpg',
    '/images/gallery-6.jpg',
  ]

  return (
    <div className="bg-[#EFEBE6] text-[#1A171B] min-h-screen overflow-hidden">
      <header className="fixed top-0 left-0 w-full z-50 backdrop-blur-xl bg-[#EFEBE6]/80 border-b border-[#d7d0c8]">
        <div className="max-w-7xl mx-auto px-6 py-5 flex items-center justify-between">
          <div className="flex items-center gap-4">
            <img
              src="/images/logo-bendito.png"
              alt="Bendito Catering"
              className="w-20 object-contain"
            />

            <div>
              <h1 className="uppercase tracking-[0.35em] text-lg font-semibold">
                Bendito Catering
              </h1>
              <p className="uppercase tracking-[0.4em] text-xs text-[#B38B00] mt-1">
                Taste Of Heaven
              </p>
            </div>
          </div>

          <nav className="hidden md:flex items-center gap-10 uppercase tracking-[0.2em] text-xs">
            <a href="#about" className="hover:text-[#B38B00] transition-all">
              Nosotros
            </a>
            <a href="#services" className="hover:text-[#B38B00] transition-all">
              Servicios
            </a>
            <a href="#gallery" className="hover:text-[#B38B00] transition-all">
              Galería
            </a>
            <a href="#contact" className="hover:text-[#B38B00] transition-all">
              Contacto
            </a>
          </nav>
        </div>
      </header>

      <section className="relative h-screen flex items-center justify-center overflow-hidden">
        <img
          src="/images/hero.jpg"
          alt="Luxury Catering"
          className="absolute inset-0 w-full h-full object-cover scale-105"
        />

        <div className="absolute inset-0 bg-black/60"></div>

        <div className="relative z-10 text-center px-6 max-w-5xl">
          <p className="uppercase tracking-[0.45em] text-[#f2d46b] text-sm mb-8">
            Catering Experiences In Mallorca
          </p>

          <h1 className="text-white text-6xl md:text-8xl font-light leading-[0.95] mb-8">
            Taste
            <span className="italic text-[#f2d46b] block">of Heaven</span>
          </h1>

          <p className="text-[#f3f0eb] text-lg md:text-2xl leading-relaxed max-w-3xl mx-auto mb-12 font-light">
            Experiencias gastronómicas premium para bodas, marcas y eventos privados.
          </p>

          <div className="flex flex-col sm:flex-row justify-center gap-5">
            <a
              href="#contact"
              className="bg-[#B38B00] hover:bg-[#8f6f00] transition-all text-white uppercase tracking-[0.25em] text-xs px-10 py-5 rounded-full"
            >
              Solicitar propuesta
            </a>

            <a
              href="#gallery"
              className="border border-white/60 text-white hover:bg-white hover:text-black transition-all uppercase tracking-[0.25em] text-xs px-10 py-5 rounded-full"
            >
              Explorar galería
            </a>
          </div>
        </div>
      </section>

      <section id="about" className="py-32 px-6">
        <div className="max-w-7xl mx-auto grid lg:grid-cols-2 gap-20 items-center">
          <div>
            <p className="uppercase tracking-[0.35em] text-[#B38B00] text-sm mb-5">
              Nuestra historia
            </p>

            <h2 className="text-5xl md:text-6xl leading-tight font-light mb-10">
              Gastronomía,
              <span className="italic block text-[#B38B00]">estética y emoción.</span>
            </h2>

            <p className="text-[#5f5b56] text-lg leading-relaxed mb-8">
              Bendito Catering nació entre fogones, amigos y la pasión por crear experiencias memorables alrededor de la comida.
            </p>

            <p className="text-[#5f5b56] text-lg leading-relaxed mb-8">
              Hoy combinamos gastronomía contemporánea, servicio premium y una estética editorial inspirada en el Mediterráneo.
            </p>
          </div>

          <div className="relative">
            <img
              src="/images/about.jpg"
              alt="Bendito Catering"
              className="rounded-[2.5rem] w-full h-[750px] object-cover shadow-2xl"
            />

            <div className="absolute -bottom-10 -left-10 bg-[#1A171B] text-white p-10 rounded-[2rem] max-w-xs shadow-2xl">
              <p className="uppercase tracking-[0.3em] text-[#f2d46b] text-xs mb-4">
                Chef Driven Experience
              </p>

              <h3 className="text-2xl font-light leading-relaxed">
                Catering diseñado para crear momentos inolvidables.
              </h3>
            </div>
          </div>
        </div>
      </section>

      <section id="services" className="bg-white py-32 px-6">
        <div className="max-w-7xl mx-auto">
          <div className="text-center mb-20">
            <p className="uppercase tracking-[0.35em] text-[#B38B00] text-sm mb-5">
              Servicios
            </p>

            <h2 className="text-5xl md:text-6xl font-light leading-tight">
              Diseñado para celebrar bonito
            </h2>
          </div>

          <div className="grid lg:grid-cols-3 gap-8">
            {services.map((service, index) => (
              <div
                key={index}
                className="group overflow-hidden rounded-[2.5rem] bg-[#EFEBE6]"
              >
                <div className="overflow-hidden">
                  <img
                    src={service.image}
                    alt={service.title}
                    className="w-full h-[500px] object-cover group-hover:scale-105 transition duration-700"
                  />
                </div>

                <div className="p-10">
                  <h3 className="text-3xl font-light mb-5">
                    {service.title}
                  </h3>

                  <p className="text-[#5f5b56] leading-relaxed text-lg">
                    {service.description}
                  </p>
                </div>
              </div>
            ))}
          </div>
        </div>
      </section>

      <section id="gallery" className="py-32 px-6 bg-[#1A171B]">
        <div className="max-w-7xl mx-auto">
          <div className="text-center mb-20">
            <p className="uppercase tracking-[0.35em] text-[#f2d46b] text-sm mb-5">
              Gallery
            </p>

            <h2 className="text-white text-5xl md:text-6xl font-light leading-tight">
              Una experiencia visual y gastronómica
            </h2>
          </div>

          <div className="grid md:grid-cols-3 gap-6">
            {gallery.map((img, index) => (
              <div key={index} className="overflow-hidden rounded-[2rem]">
                <img
                  src={img}
                  alt="Gallery"
                  className="w-full h-[420px] object-cover hover:scale-105 transition duration-700"
                />
              </div>
            ))}
          </div>
        </div>
      </section>

      <section className="py-32 px-6 bg-[#EFEBE6] text-center">
        <div className="max-w-5xl mx-auto">
          <p className="uppercase tracking-[0.35em] text-[#B38B00] text-sm mb-5">
            Bendito Catering
          </p>

          <h2 className="text-5xl md:text-7xl font-light leading-tight mb-10">
            Hagamos que tu próximo evento
            <span className="italic block text-[#B38B00]">sea inolvidable.</span>
          </h2>

          <a
            href="#contact"
            className="inline-block bg-[#1A171B] hover:bg-black text-white transition-all uppercase tracking-[0.25em] text-xs px-12 py-5 rounded-full"
          >
            Reservar fecha
          </a>
        </div>
      </section>

      <section id="contact" className="bg-white py-32 px-6">
        <div className="max-w-4xl mx-auto text-center">
          <p className="uppercase tracking-[0.35em] text-[#B38B00] text-sm mb-5">
            Contacto
          </p>

          <h2 className="text-5xl md:text-6xl font-light mb-12">
            Cuéntanos tu evento
          </h2>

          <form
            action="https://formsubmit.co/hello@benditocatering.com"
            method="POST"
            className="grid gap-6 text-left"
          >
            <input
              type="text"
              name="name"
              placeholder="Nombre"
              required
              className="border border-[#d7d0c8] px-8 py-5 rounded-full outline-none text-lg"
            />

            <input
              type="email"
              name="email"
              placeholder="Correo electrónico"
              required
              className="border border-[#d7d0c8] px-8 py-5 rounded-full outline-none text-lg"
            />

            <textarea
              rows="6"
              name="message"
              placeholder="Cuéntanos sobre tu evento"
              required
              className="border border-[#d7d0c8] px-8 py-6 rounded-[2rem] outline-none text-lg"
            ></textarea>

            <button
              type="submit"
              className="bg-[#B38B00] hover:bg-[#8f6f00] transition-all text-white uppercase tracking-[0.25em] text-xs py-5 rounded-full"
            >
              Solicitar propuesta
            </button>
          </form>
        </div>
      </section>

      <footer className="bg-[#111111] text-[#d7d0c8] py-14 px-6">
        <div className="max-w-7xl mx-auto flex flex-col lg:flex-row justify-between gap-10 items-center">
          <div className="text-center lg:text-left">
            <h3 className="uppercase tracking-[0.35em] text-xl mb-3">
              Bendito Catering
            </h3>

            <p className="uppercase tracking-[0.3em] text-xs text-[#B38B00]">
              Taste Of Heaven
            </p>
          </div>

          <div className="flex gap-8 uppercase tracking-[0.25em] text-xs">
            <a href="https://instagram.com/benditocateringofficial">
              Instagram
            </a>
            <a href="mailto:hello@benditocatering.com">
              Email
            </a>
          </div>
        </div>
      </footer>
    </div>
  )
}