export default function Butler by PowerSellAppLandingPage() {
  const brand = {
    yellow: "#F2B705",
    orange: "#F24C0F",
    black: "#111111",
    cream: "#FFF8E8",
    gray: "#6B7280",
  };

  const features = [
    {
      title: "Solicitudes por voz y lenguaje natural",
      text: "El huésped solo habla como hablaría con una persona. Butler by PowerSellApp entiende la intención y transforma la solicitud en una acción clara.",
    },
    {
      title: "Clasificación inteligente por departamento",
      text: "Housekeeping, mantenimiento, room service o recepción: la IA deriva automáticamente cada requerimiento al equipo correcto.",
    },
    {
      title: "Menos carga para Recepción",
      text: "Reduce llamadas, evita cuellos de botella y mejora la velocidad de respuesta del hotel sin complicar la operación.",
    },
    {
      title: "Experiencia moderna para el huésped",
      text: "Disponible desde tablet, teléfono o canal digital del hotel, con una experiencia intuitiva, elegante y alineada a la marca.",
    },
  ];

  const steps = [
    "El huésped habla con Butler by PowerSellApp desde su habitación.",
    "La IA interpreta la necesidad en lenguaje natural.",
    "La solicitud se convierte en una orden estructurada.",
    "El departamento correcto la recibe y la atiende.",
  ];

  return (
    <div className="min-h-screen bg-white text-neutral-900">
      <header className="sticky top-0 z-40 border-b border-black/10 bg-white/90 backdrop-blur">
        <div className="mx-auto flex max-w-7xl items-center justify-between px-6 py-4 lg:px-8">
          <div className="flex items-center gap-3">
            <div
              className="flex h-11 w-11 items-center justify-center rounded-2xl shadow-sm"
              style={{ backgroundColor: brand.yellow }}
            >
              <span className="text-lg font-black text-black">B</span>
            </div>
            <div>
              <div className="text-lg font-extrabold tracking-tight">Butler by PowerSellApp</div>
              <div className="text-xs text-neutral-500">Asistente inteligente para hoteles</div>
            </div>
          </div>

          <nav className="hidden items-center gap-8 text-sm font-medium md:flex">
            <a href="#como-funciona" className="hover:text-black/70">Cómo funciona</a>
            <a href="#beneficios" className="hover:text-black/70">Beneficios</a>
            <a href="#video" className="hover:text-black/70">Video</a>
            <a href="#contacto" className="hover:text-black/70">Contacto</a>
          </nav>

          <a
            href="#contacto"
            className="rounded-xl px-4 py-2 text-sm font-semibold text-white shadow-sm transition hover:opacity-90"
            style={{ backgroundColor: brand.black }}
          >
            Solicitar piloto gratis
          </a>
        </div>
      </header>

      <section className="relative overflow-hidden">
        <div
          className="absolute inset-0 opacity-10"
          style={{
            background:
              `radial-gradient(circle at top left, ${brand.yellow} 0%, transparent 35%), radial-gradient(circle at bottom right, ${brand.orange} 0%, transparent 28%)`,
          }}
        />
        <div className="mx-auto grid max-w-7xl gap-12 px-6 py-16 lg:grid-cols-2 lg:px-8 lg:py-24">
          <div className="relative z-10 flex flex-col justify-center">
            <div
              className="mb-5 inline-flex w-fit items-center rounded-full border px-4 py-2 text-sm font-medium"
              style={{ borderColor: `${brand.yellow}`, backgroundColor: brand.cream }}
            >
              Startup hotelera con IA conversacional para pilotos de alto impacto
            </div>
            <h1 className="max-w-2xl text-4xl font-black tracking-tight sm:text-5xl lg:text-6xl">
              El huésped habla. <span style={{ color: brand.orange }}>Butler by PowerSellApp entiende</span>, clasifica y deriva la solicitud al área correcta.
            </h1>
            <p className="mt-6 max-w-xl text-lg leading-8 text-neutral-600">
              Butler by PowerSellApp es un asistente inteligente para hoteles que permite a los huéspedes solicitar servicios usando voz o lenguaje natural. La IA entiende la necesidad, la clasifica y la deriva al departamento correcto, reduciendo la carga operativa de Recepción y acelerando la atención. Estamos buscando hoteles para implementar pilotos gratuitos y validar resultados reales en operación.
            </p>

            <div className="mt-8 flex flex-wrap gap-4">
              <a
                href="#contacto"
                className="rounded-2xl px-6 py-3 text-sm font-bold text-white shadow-lg transition hover:-translate-y-0.5"
                style={{ backgroundColor: brand.black }}
              >
                Quiero un piloto gratuito
              </a>
              <a
                href="#video"
                className="rounded-2xl border px-6 py-3 text-sm font-bold transition hover:bg-neutral-50"
                style={{ borderColor: brand.black }}
              >
                Ver cómo funciona
              </a>
            </div>

            <div className="mt-10 grid gap-4 sm:grid-cols-3">
              {[
                "Menos llamadas a Recepción",
                "Órdenes estructuradas automáticamente",
                "Experiencia moderna y diferenciadora",
              ].map((item) => (
                <div key={item} className="rounded-2xl border border-black/10 bg-white p-4 shadow-sm">
                  <div className="text-sm font-semibold">{item}</div>
                </div>
              ))}
            </div>
          </div>

          <div className="relative z-10">
            <div className="rounded-[28px] border border-black/10 bg-white p-4 shadow-2xl">
              <div className="aspect-video overflow-hidden rounded-2xl bg-neutral-900">
                <div className="flex h-full w-full items-center justify-center bg-gradient-to-br from-neutral-950 via-neutral-800 to-neutral-700 text-center text-white">
                  <div className="px-6">
                    <div className="mx-auto mb-4 flex h-16 w-16 items-center justify-center rounded-full" style={{ backgroundColor: brand.yellow }}>
                      <div className="ml-1 h-0 w-0 border-y-[10px] border-l-[18px] border-y-transparent border-l-black" />
                    </div>
                    <p className="text-lg font-bold">Espacio listo para tu video demo</p>
                    <p className="mt-2 text-sm text-white/70">
                      Reemplaza este bloque por el video final o un embed de YouTube/Vimeo.
                    </p>
                  </div>
                </div>
              </div>
              <div className="px-2 pb-2 pt-4 text-sm text-neutral-500">
                Demo visual del huésped usando Butler by PowerSellApp desde su habitación.
              </div>
            </div>
          </div>
        </div>
      </section>

      <section id="como-funciona" className="mx-auto max-w-7xl px-6 py-8 lg:px-8 lg:py-16">
        <div className="mb-10 max-w-2xl">
          <div className="mb-3 text-sm font-bold uppercase tracking-[0.2em]" style={{ color: brand.orange }}>
            Cómo funciona
          </div>
          <h2 className="text-3xl font-black tracking-tight sm:text-4xl">Una experiencia simple para el huésped. Un flujo claro para la operación.</h2>
        </div>

        <div className="grid gap-6 md:grid-cols-2 lg:grid-cols-4">
          {steps.map((step, index) => (
            <div key={step} className="rounded-3xl border border-black/10 bg-white p-6 shadow-sm">
              <div
                className="mb-4 flex h-12 w-12 items-center justify-center rounded-2xl text-lg font-black"
                style={{ backgroundColor: index % 2 === 0 ? brand.yellow : brand.orange, color: index % 2 === 0 ? brand.black : 'white' }}
              >
                {index + 1}
              </div>
              <p className="text-base font-semibold leading-7">{step}</p>
            </div>
          ))}
        </div>
      </section>

      <section id="beneficios" className="bg-neutral-50 py-16">
        <div className="mx-auto max-w-7xl px-6 lg:px-8">
          <div className="mb-10 max-w-2xl">
            <div className="mb-3 text-sm font-bold uppercase tracking-[0.2em]" style={{ color: brand.orange }}>
              Beneficios clave
            </div>
            <h2 className="text-3xl font-black tracking-tight sm:text-4xl">Tecnología útil para hoteles que quieren innovar rápido, operar mejor y diferenciarse con una experiencia moderna para el huésped.</h2>
          </div>

          <div className="grid gap-6 md:grid-cols-2">
            {features.map((feature) => (
              <div key={feature.title} className="rounded-3xl bg-white p-7 shadow-sm ring-1 ring-black/5">
                <h3 className="text-xl font-extrabold tracking-tight">{feature.title}</h3>
                <p className="mt-3 text-neutral-600 leading-7">{feature.text}</p>
              </div>
            ))}
          </div>
        </div>
      </section>

      <section id="video" className="mx-auto max-w-7xl px-6 py-16 lg:px-8">
        <div className="grid gap-10 lg:grid-cols-[1.2fr_0.8fr] lg:items-center">
          <div className="rounded-[28px] border border-black/10 bg-white p-4 shadow-xl">
            <div className="aspect-video overflow-hidden rounded-2xl bg-black">
              <div className="flex h-full items-center justify-center bg-gradient-to-br from-black via-neutral-900 to-neutral-700 text-white">
                <div className="text-center">
                  <div className="mx-auto mb-4 h-16 w-16 rounded-full" style={{ backgroundColor: brand.yellow }} />
                  <p className="text-lg font-bold">Embed del video aquí</p>
                  <p className="mt-2 text-sm text-white/70">Acepta MP4, YouTube o Vimeo</p>
                </div>
              </div>
            </div>
          </div>

          <div>
            <div className="mb-3 text-sm font-bold uppercase tracking-[0.2em]" style={{ color: brand.orange }}>
              Demostración
            </div>
            <h2 className="text-3xl font-black tracking-tight sm:text-4xl">Muestra en segundos cómo un huésped interactúa con Butler by PowerSellApp y entiende por qué este piloto puede transformar la experiencia dentro de la habitación.</h2>
            <p className="mt-5 text-lg leading-8 text-neutral-600">
              Este espacio está pensado para mostrar la experiencia real: el huésped habla con la IA desde la habitación, Butler by PowerSellApp entiende la solicitud y el hotel responde de forma más rápida y ordenada.
            </p>
            <div className="mt-8 rounded-3xl border border-dashed p-5" style={{ borderColor: brand.yellow, backgroundColor: brand.cream }}>
              <p className="text-sm font-semibold text-neutral-700">
                Recomendación: usar un video MP4 corto de 30 a 60 segundos con subtítulos, enfoque visual en la interacción huésped-IA y una llamada a la acción al final para solicitar un piloto gratuito.
              </p>
            </div>
          </div>
        </div>
      </section>

      <section id="contacto" className="py-16" style={{ backgroundColor: brand.black }}>
        <div className="mx-auto grid max-w-7xl gap-8 px-6 lg:grid-cols-[0.9fr_1.1fr] lg:px-8">
          <div className="text-white">
            <div className="mb-3 text-sm font-bold uppercase tracking-[0.2em]" style={{ color: brand.yellow }}>
              Contacto
            </div>
            <h2 className="text-3xl font-black tracking-tight sm:text-4xl">Conversemos sobre un piloto gratuito en tu hotel.</h2>
            <p className="mt-5 max-w-lg text-white/75 leading-7">
              Si quieres conocer Butler by PowerSellApp, solicitar una demo o evaluar un piloto gratuito en tu hotel, déjanos tus datos y te contactaremos.
            </p>

            <div className="mt-8 space-y-4 text-sm text-white/85">
              <div className="rounded-2xl border border-white/10 bg-white/5 p-4">
                <div className="font-bold text-white">Correo</div>
                <div>tucorreo@butlerdemo.com</div>
              </div>
              <div className="rounded-2xl border border-white/10 bg-white/5 p-4">
                <div className="font-bold text-white">WhatsApp</div>
                <div>+593 00 000 0000</div>
              </div>
              <div className="rounded-2xl border border-white/10 bg-white/5 p-4">
                <div className="font-bold text-white">Ubicación</div>
                <div>Ecuador · Atención a hoteles en expansión regional</div>
              </div>
            </div>
          </div>

          <div className="rounded-[28px] bg-white p-6 shadow-2xl sm:p-8">
            <div className="grid gap-5 md:grid-cols-2">
              <div>
                <label className="mb-2 block text-sm font-semibold">Nombre</label>
                <input className="w-full rounded-2xl border border-black/10 px-4 py-3 outline-none ring-0 transition focus:border-black" placeholder="Tu nombre" />
              </div>
              <div>
                <label className="mb-2 block text-sm font-semibold">Hotel</label>
                <input className="w-full rounded-2xl border border-black/10 px-4 py-3 outline-none ring-0 transition focus:border-black" placeholder="Nombre del hotel" />
              </div>
              <div>
                <label className="mb-2 block text-sm font-semibold">Correo</label>
                <input className="w-full rounded-2xl border border-black/10 px-4 py-3 outline-none ring-0 transition focus:border-black" placeholder="correo@hotel.com" />
              </div>
              <div>
                <label className="mb-2 block text-sm font-semibold">Teléfono</label>
                <input className="w-full rounded-2xl border border-black/10 px-4 py-3 outline-none ring-0 transition focus:border-black" placeholder="Tu teléfono" />
              </div>
              <div className="md:col-span-2">
                <label className="mb-2 block text-sm font-semibold">Mensaje</label>
                <textarea className="min-h-[130px] w-full rounded-2xl border border-black/10 px-4 py-3 outline-none transition focus:border-black" placeholder="Cuéntanos qué te gustaría implementar en tu hotel" />
              </div>
            </div>

            <button
              className="mt-6 inline-flex rounded-2xl px-6 py-3 text-sm font-bold text-white shadow-lg transition hover:opacity-90"
              style={{ backgroundColor: brand.orange }}
            >
              Solicitar piloto gratuito
            </button>

            <p className="mt-4 text-xs leading-6 text-neutral-500">
              Nota: este formulario está listo a nivel visual. Se puede conectar a Formspree, WhatsApp, email, HubSpot o tu backend actual.
            </p>
          </div>
        </div>
      </section>

      <footer className="border-t border-black/10 bg-white">
        <div className="mx-auto flex max-w-7xl flex-col gap-4 px-6 py-8 text-sm text-neutral-500 md:flex-row md:items-center md:justify-between lg:px-8">
          <div>
            © 2026 Butler by PowerSellApp. IA conversacional para hoteles.
          </div>
          <div className="flex gap-6">
            <a href="#" className="hover:text-neutral-900">Privacidad</a>
            <a href="#" className="hover:text-neutral-900">Términos</a>
            <a href="#contacto" className="hover:text-neutral-900">Contacto</a>
          </div>
        </div>
      </footer>
    </div>
  );
}