export default function LandingPage() {
  const features = [
    {
      title: "Madera natural",
      text: "Materiales seleccionados con acabado cálido, resistente y visualmente limpio para integrarse en hogares modernos.",
      icon: "🌿",
    },
    {
      title: "Diseño cómodo",
      text: "Estructuras elevadas y estables que aportan descanso, soporte y una sensación de refugio para tu perro.",
      icon: "🐶",
    },
    {
      title: "Hecho con detalle",
      text: "Cada cama está pensada para durar, con líneas cuidadas y una fabricación orientada a calidad real.",
      icon: "🪵",
    },
  ];

  const benefits = [
    "Diseño decorativo que combina con tu hogar",
    "Mayor durabilidad que camas textiles comunes",
    "Superficie firme, estable y fácil de mantener",
    "Imagen natural y eco friendly para amantes de los animales",
  ];

  const products = [
    {
      name: "Modelo Nido",
      desc: "Minimalista, cálido y perfecto para espacios modernos.",
      size: "Pequeño / Mediano",
    },
    {
      name: "Modelo Bosque",
      desc: "Estructura robusta con presencia premium y acabado natural.",
      size: "Mediano / Grande",
    },
    {
      name: "Modelo Terra",
      desc: "Diseño elegante con aire artesanal y enfoque decorativo.",
      size: "Todas las tallas",
    },
  ];

  return (
    <div className="min-h-screen bg-[#f6f2e9] text-[#2c2a26]">
      <section className="relative overflow-hidden">
        <div className="absolute inset-0 bg-[radial-gradient(circle_at_top_right,_rgba(120,146,91,0.18),_transparent_35%),radial-gradient(circle_at_left,_rgba(201,177,132,0.18),_transparent_30%)]" />

        <div className="relative mx-auto max-w-7xl px-6 py-6 lg:px-10">
          <header className="flex items-center justify-between rounded-full border border-white/50 bg-white/60 px-5 py-3 shadow-sm backdrop-blur-md">
            <div className="text-lg font-semibold tracking-tight">WoodPaws</div>
            <nav className="hidden gap-8 text-sm md:flex">
              <a href="#beneficios" className="hover:opacity-70">Beneficios</a>
              <a href="#modelos" className="hover:opacity-70">Modelos</a>
              <a href="#proceso" className="hover:opacity-70">Proceso</a>
              <a href="#contacto" className="hover:opacity-70">Contacto</a>
            </nav>
            <a
              href="#contacto"
              className="rounded-full bg-[#6f8b57] px-4 py-2 text-sm font-medium text-white transition hover:scale-[1.02]"
            >
              Pedir información
            </a>
          </header>

          <div className="grid items-center gap-12 py-16 lg:grid-cols-2 lg:py-24">
            <div>
              <div className="mb-4 inline-flex rounded-full border border-[#92a97c]/30 bg-white/70 px-4 py-2 text-sm text-[#5c6d47] shadow-sm">
                Camas de madera para perros · Diseño natural
              </div>

              <h1 className="max-w-2xl text-4xl font-semibold leading-tight tracking-tight sm:text-5xl lg:text-6xl">
                Camas de madera para perros con diseño moderno y alma natural
              </h1>

              <p className="mt-6 max-w-xl text-lg leading-8 text-[#5c5a55]">
                Crea un espacio cómodo, elegante y duradero para tu perro con camas de madera que combinan bienestar, decoración y un estilo eco friendly.
              </p>

              <div className="mt-8 flex flex-wrap gap-4">
                <a
                  href="#modelos"
                  className="rounded-full bg-[#2f4a34] px-6 py-3 font-medium text-white shadow-lg shadow-[#2f4a34]/20 transition hover:-translate-y-0.5"
                >
                  Ver modelos
                </a>
                <a
                  href="#beneficios"
                  className="rounded-full border border-[#2f4a34]/15 bg-white/80 px-6 py-3 font-medium text-[#2f4a34] transition hover:bg-white"
                >
                  Descubrir ventajas
                </a>
              </div>

              <div className="mt-10 grid max-w-xl grid-cols-3 gap-4 text-sm">
                <div className="rounded-2xl bg-white/70 p-4 shadow-sm backdrop-blur-sm">
                  <div className="text-2xl font-semibold">100%</div>
                  <div className="mt-1 text-[#66615a]">Estilo natural</div>
                </div>
                <div className="rounded-2xl bg-white/70 p-4 shadow-sm backdrop-blur-sm">
                  <div className="text-2xl font-semibold">+Durable</div>
                  <div className="mt-1 text-[#66615a]">Uso diario</div>
                </div>
                <div className="rounded-2xl bg-white/70 p-4 shadow-sm backdrop-blur-sm">
                  <div className="text-2xl font-semibold">Hecho</div>
                  <div className="mt-1 text-[#66615a]">Con detalle</div>
                </div>
              </div>
            </div>

            <div className="relative">
              <div className="absolute -left-8 top-10 h-28 w-28 rounded-full bg-[#a8bf8f]/30 blur-3xl" />
              <div className="absolute -bottom-6 right-4 h-32 w-32 rounded-full bg-[#d6b27f]/30 blur-3xl" />

              <div className="relative rounded-[2rem] border border-white/40 bg-white/60 p-5 shadow-2xl backdrop-blur-md">
                <div className="grid gap-4">
                  <div className="rounded-[1.5rem] bg-[linear-gradient(135deg,#d9c4a1,#f2eadf,#b8c9a2)] p-8 shadow-inner">
                    <div className="flex min-h-[340px] flex-col justify-between rounded-[1.5rem] border border-white/40 bg-white/30 p-6 backdrop-blur-sm">
                      <div className="flex justify-between text-sm text-[#3e4b35]">
                        <span>Diseño premium</span>
                        <span>Eco style</span>
                      </div>

                      <div className="space-y-4">
                        <div className="h-5 w-28 rounded-full bg-[#6f8b57]/25" />
                        <div className="mx-auto flex h-44 w-full max-w-sm items-center justify-center rounded-[2rem] border border-[#6b5d47]/10 bg-[#f6f0e5] shadow-lg">
                          <div className="relative h-24 w-64 rounded-[1.75rem] bg-[#8b5e3c] shadow-xl">
                            <div className="absolute inset-x-5 top-4 h-14 rounded-[1.25rem] bg-[#eadfcb]" />
                            <div className="absolute -bottom-4 left-4 h-8 w-5 rounded-b-xl bg-[#6a4528]" />
                            <div className="absolute -bottom-4 right-4 h-8 w-5 rounded-b-xl bg-[#6a4528]" />
                            <div className="absolute -bottom-4 left-16 h-8 w-5 rounded-b-xl bg-[#6a4528]" />
                            <div className="absolute -bottom-4 right-16 h-8 w-5 rounded-b-xl bg-[#6a4528]" />
                          </div>
                        </div>
                        <p className="mx-auto max-w-xs text-center text-sm leading-6 text-[#4f4b46]">
                          Una cama que cuida el descanso de tu perro y también la estética de tu casa.
                        </p>
                      </div>

                      <div className="flex items-center justify-between rounded-2xl bg-white/70 px-4 py-3 text-sm shadow-sm">
                        <span>Acabados naturales</span>
                        <span className="font-semibold text-[#5e7449]">Hecho para durar</span>
                      </div>
                    </div>
                  </div>
                </div>
              </div>
            </div>
          </div>
        </div>
      </section>

      <section className="mx-auto max-w-7xl px-6 py-8 lg:px-10">
        <div className="grid gap-6 md:grid-cols-3">
          {features.map((item) => (
            <div
              key={item.title}
              className="rounded-[1.75rem] border border-[#e5ddd0] bg-white/80 p-7 shadow-sm transition hover:-translate-y-1 hover:shadow-xl"
            >
              <div className="mb-4 text-3xl">{item.icon}</div>
              <h3 className="text-xl font-semibold">{item.title}</h3>
              <p className="mt-3 leading-7 text-[#66615a]">{item.text}</p>
            </div>
          ))}
        </div>
      </section>

      <section id="beneficios" className="mx-auto max-w-7xl px-6 py-20 lg:px-10">
        <div className="grid items-center gap-12 lg:grid-cols-2">
          <div>
            <p className="text-sm font-semibold uppercase tracking-[0.2em] text-[#70845b]">Por qué elegirlas</p>
            <h2 className="mt-4 text-3xl font-semibold tracking-tight sm:text-4xl">
              Descanso para tu perro. Diseño para tu espacio.
            </h2>
            <p className="mt-6 max-w-xl text-lg leading-8 text-[#615d57]">
              No es solo una cama. Es una pieza funcional que mejora el confort de tu mascota y aporta un estilo cálido, limpio y natural a tu hogar.
            </p>

            <div className="mt-8 space-y-4">
              {benefits.map((benefit) => (
                <div
                  key={benefit}
                  className="flex items-start gap-3 rounded-2xl bg-white/80 p-4 shadow-sm"
                >
                  <div className="mt-1 flex h-6 w-6 items-center justify-center rounded-full bg-[#6f8b57] text-sm text-white">
                    ✓
                  </div>
                  <p className="text-[#494640]">{benefit}</p>
                </div>
              ))}
            </div>
          </div>

          <div className="rounded-[2rem] border border-[#e7dece] bg-white/80 p-8 shadow-xl">
            <div className="mb-6 flex items-center justify-between">
              <h3 className="text-2xl font-semibold">Esencia eco friendly</h3>
              <span className="rounded-full bg-[#edf3e7] px-3 py-1 text-sm text-[#5f7748]">Natural</span>
            </div>

            <div className="space-y-5 text-[#605b55] leading-7">
              <p>
                La madera transmite calidez, resistencia y conexión con materiales nobles. En una cama para perros, eso se traduce en una pieza más estable, más decorativa y con una presencia más cuidada.
              </p>
              <p>
                El enfoque eco friendly no depende solo del estilo visual. También comunica durabilidad, menor reemplazo y una elección más consciente frente a productos desechables de corta vida útil.
              </p>
              <p>
                El resultado es simple: una cama bonita, funcional y alineada con hogares que valoran diseño, orden y materiales con carácter.
              </p>
            </div>
          </div>
        </div>
      </section>

      <section id="modelos" className="bg-white/50 py-20">
        <div className="mx-auto max-w-7xl px-6 lg:px-10">
          <div className="max-w-2xl">
            <p className="text-sm font-semibold uppercase tracking-[0.2em] text-[#70845b]">Colección</p>
            <h2 className="mt-4 text-3xl font-semibold tracking-tight sm:text-4xl">
              Modelos con estilo natural y presencia premium
            </h2>
          </div>

          <div className="mt-12 grid gap-6 lg:grid-cols-3">
            {products.map((product) => (
              <div
                key={product.name}
                className="overflow-hidden rounded-[2rem] border border-[#ebe3d7] bg-[#fcfaf6] shadow-sm transition hover:-translate-y-1 hover:shadow-xl"
              >
                <div className="h-56 bg-[linear-gradient(135deg,#d7c19a,#eee4d3,#a9b990)] p-6">
                  <div className="flex h-full items-end rounded-[1.5rem] border border-white/30 bg-white/20 p-5 backdrop-blur-sm">
                    <div className="w-full rounded-[1.5rem] bg-[#8c603d] p-4 shadow-lg">
                      <div className="h-16 rounded-[1rem] bg-[#e9dcc8]" />
                      <div className="mt-3 flex justify-between px-1">
                        <div className="h-6 w-4 rounded-b-lg bg-[#694528]" />
                        <div className="h-6 w-4 rounded-b-lg bg-[#694528]" />
                        <div className="h-6 w-4 rounded-b-lg bg-[#694528]" />
                        <div className="h-6 w-4 rounded-b-lg bg-[#694528]" />
                      </div>
                    </div>
                  </div>
                </div>

                <div className="p-6">
                  <div className="flex items-center justify-between gap-4">
                    <h3 className="text-2xl font-semibold">{product.name}</h3>
                    <span className="rounded-full bg-[#eef3e8] px-3 py-1 text-xs font-medium text-[#60774a]">
                      {product.size}
                    </span>
                  </div>
                  <p className="mt-4 leading-7 text-[#66615a]">{product.desc}</p>
                  <a
                    href="#contacto"
                    className="mt-6 inline-block rounded-full border border-[#2f4a34]/15 px-5 py-2.5 font-medium text-[#2f4a34] transition hover:bg-[#2f4a34] hover:text-white"
                  >
                    Consultar este modelo
                  </a>
                </div>
              </div>
            ))}
          </div>
        </div>
      </section>

      <section id="proceso" className="mx-auto max-w-7xl px-6 py-20 lg:px-10">
        <div className="rounded-[2.25rem] bg-[#2f4a34] px-8 py-12 text-white shadow-2xl lg:px-12">
          <div className="max-w-3xl">
            <p className="text-sm font-semibold uppercase tracking-[0.2em] text-[#cad8bf]">Proceso</p>
            <h2 className="mt-4 text-3xl font-semibold tracking-tight sm:text-4xl">
              Diseño simple, fabricación cuidada, resultado duradero
            </h2>
          </div>

          <div className="mt-10 grid gap-6 md:grid-cols-3">
            <div className="rounded-[1.75rem] bg-white/10 p-6 backdrop-blur-sm">
              <div className="text-sm text-[#cad8bf]">01</div>
              <h3 className="mt-3 text-xl font-semibold">Seleccionamos materiales</h3>
              <p className="mt-3 leading-7 text-[#edf3e7]">
                Elegimos acabados y estructuras con imagen cálida, firmeza y funcionalidad.
              </p>
            </div>
            <div className="rounded-[1.75rem] bg-white/10 p-6 backdrop-blur-sm">
              <div className="text-sm text-[#cad8bf]">02</div>
              <h3 className="mt-3 text-xl font-semibold">Creamos cada modelo</h3>
              <p className="mt-3 leading-7 text-[#edf3e7]">
                Diseñamos camas con estética actual, comodidad para el perro y valor decorativo.
              </p>
            </div>
            <div className="rounded-[1.75rem] bg-white/10 p-6 backdrop-blur-sm">
              <div className="text-sm text-[#cad8bf]">03</div>
              <h3 className="mt-3 text-xl font-semibold">Entregamos una pieza útil</h3>
              <p className="mt-3 leading-7 text-[#edf3e7]">
                El objetivo no es vender una cama más. Es ofrecer una pieza que de verdad quieras tener en casa.
              </p>
            </div>
          </div>
        </div>
      </section>

      <section id="contacto" className="pb-20">
        <div className="mx-auto max-w-5xl px-6 lg:px-10">
          <div className="rounded-[2.25rem] border border-[#e9dece] bg-white/85 p-8 shadow-xl backdrop-blur-sm lg:p-12">
            <div className="grid gap-10 lg:grid-cols-2 lg:items-center">
              <div>
                <p className="text-sm font-semibold uppercase tracking-[0.2em] text-[#70845b]">Contacto</p>
                <h2 className="mt-4 text-3xl font-semibold tracking-tight sm:text-4xl">
                  Dale a tu perro un descanso con estilo
                </h2>
                <p className="mt-5 max-w-lg text-lg leading-8 text-[#67625b]">
                  Solicita información, consulta medidas o pide un modelo adaptado a tu espacio. La madera, cuando está bien diseñada, también puede ser el lugar favorito de tu perro.
                </p>
              </div>

              <form className="grid gap-4">
                <input
                  type="text"
                  placeholder="Nombre"
                  className="rounded-2xl border border-[#ddd3c4] bg-[#fcfaf7] px-5 py-4 outline-none transition focus:border-[#6f8b57]"
                />
                <input
                  type="email"
                  placeholder="Correo electrónico"
                  className="rounded-2xl border border-[#ddd3c4] bg-[#fcfaf7] px-5 py-4 outline-none transition focus:border-[#6f8b57]"
                />
                <textarea
                  placeholder="Cuéntanos qué tipo de cama buscas"
                  rows={5}
                  className="rounded-2xl border border-[#ddd3c4] bg-[#fcfaf7] px-5 py-4 outline-none transition focus:border-[#6f8b57]"
                />
                <button
                  type="button"
                  className="rounded-2xl bg-[#6f8b57] px-6 py-4 font-medium text-white shadow-lg shadow-[#6f8b57]/20 transition hover:-translate-y-0.5"
                >
                  Quiero más información
                </button>
              </form>
            </div>
          </div>
        </div>
      </section>
    </div>
  );
}