import { Inter } from "next/font/google";

const inter = Inter({ subsets: ["latin"] });

export default function GlobalCadenzaLanding() {
  return (
<div className={`min-h-screen ${inter.className}`}>
      {/* Design tokens (primer borrador) */}
      <style>{`
        :root {
          --gc-white: #FFFFFF;
          --gc-beige-50: #F6F0E8; /* fondo suave */
          --gc-beige-200: #E7D9C9; /* superficies */
          --gc-brown-600: #7A5C3E; /* acento */
          --gc-brown-900: #3E2A1F; /* texto principal */
        }
      `}</style>

      {/* Fondo general */}
      <div className="bg-[var(--gc-beige-50)] text-[var(--gc-brown-900)]">
        {/* Header simple temporal */}
        <header className="max-w-6xl mx-auto px-6 py-6 flex items-center justify-between">
          <div className="flex items-center gap-3">
            {/* Placeholder de logo (reemplazarás por el tuyo) */}
            <div className="w-9 h-9 rounded-full bg-[var(--gc-brown-600)]" />
            <span className="font-serif text-xl tracking-wide">Global Cadenza</span>
          </div>
          <nav className="hidden md:flex items-center gap-6 text-sm">
            <a className="hover:opacity-80" href="#como-funciona">Cómo funciona</a>
            <a className="hover:opacity-80" href="#escuelas">Escuelas</a>
            <a className="hover:opacity-80" href="#planes">Planes</a>
            <a className="hover:opacity-80" href="#acceso">Acceso</a>
          </nav>
        </header>

        {/* Hero */}
        <main className="max-w-6xl mx-auto px-6">
          <section className="grid md:grid-cols-2 gap-10 items-center py-12">
            <div>
              <motion.h1
                initial={{ opacity: 0, y: 10 }}
                animate={{ opacity: 1, y: 0 }}
                transition={{ duration: 0.5 }}
                className="font-serif text-4xl md:text-5xl leading-tight"
              >
                Estudia música en centros de élite, <span className="text-[var(--gc-brown-600)]">sin trámites</span>.
              </motion.h1>
              <p className="mt-4 text-base md:text-lg opacity-90">
                Nosotros gestionamos solicitudes, entrevistas, becas y residencia. Tú te concentras en lo importante: tu música.
              </p>
              <div className="mt-6 flex gap-3">
                <a
                  href="#empezar"
                  className="px-5 py-3 rounded-2xl bg-[var(--gc-brown-600)] text-[var(--gc-white)] hover:opacity-90 transition"
                >
                  Empieza ahora
                </a>
                <a
                  href="#como-funciona"
                  className="px-5 py-3 rounded-2xl bg-[var(--gc-beige-200)] text-[var(--gc-brown-900)] hover:opacity-90 transition"
                >
                  Cómo funciona
                </a>
              </div>
              <ul className="mt-6 grid grid-cols-1 sm:grid-cols-3 gap-3 text-sm">
                {[
                  {k: 'Gestión total', v: 'Solicitudes, entrevistas, becas, residencia'},
                  {k: 'Para 15–99 años', v: 'Estudiantes y profesionales'},
                  {k: 'En español', v: 'Desde el día uno'},
                ].map((item) => (
                  <li key={item.k} className="p-4 rounded-2xl bg-white/70 shadow-sm border border-[var(--gc-beige-200)]">
                    <div className="font-medium">{item.k}</div>
                    <div className="opacity-80 text-sm">{item.v}</div>
                  </li>
                ))}
              </ul>
            </div>

            <div className="relative">
              <div className="aspect-[4/3] rounded-3xl overflow-hidden shadow-md border border-[var(--gc-beige-200)] bg-white grid place-items-center">
                <div className="text-center p-6">
                  <div className="text-sm uppercase tracking-widest opacity-60">Preview</div>
                  <div className="font-serif text-2xl mt-2">Zona Estudiante GC</div>
                  <p className="mt-2 text-sm opacity-80">Perfil • Portfolio (vídeo/audio ≤ 10 min) • Matching con escuelas • Seguimiento</p>
                </div>
              </div>
            </div>
          </section>
        </main>

        {/* Paleta y tipografía (muestra rápida) */}
        <section className="max-w-6xl mx-auto px-6 pb-14" id="paleta">
          <h2 className="font-serif text-2xl mb-4">Paleta (borrador)</h2>
          <div className="grid sm:grid-cols-5 gap-4">
            {[
              { name: 'Blanco', var: '--gc-white' },
              { name: 'Beige 50', var: '--gc-beige-50' },
              { name: 'Beige 200', var: '--gc-beige-200' },
              { name: 'Marrón 600', var: '--gc-brown-600' },
              { name: 'Marrón 900', var: '--gc-brown-900' },
            ].map((c) => (
              <div key={c.var} className="rounded-2xl overflow-hidden border border-black/5">
                <div className="h-20" style={{ background: `var(${c.var})` }} />
                <div className="p-3 text-sm flex items-center justify-between">
                  <span>{c.name}</span>
                  <code className="opacity-70">var({c.var})</code>
                </div>
              </div>
            ))}
          </div>

          <div className="mt-8 grid md:grid-cols-2 gap-6">
            <div>
              <h3 className="font-serif text-xl">Ejemplo titular (serif elegante)</h3>
              <p className="opacity-80 mt-2">Texto de párrafo con sans legible. Este bloque sirve para validar contraste y jerarquía visual con la paleta propuesta.</p>
            </div>
            <div className="p-5 bg-white/70 rounded-2xl border border-[var(--gc-beige-200)]">
              <div className="text-sm uppercase tracking-widest opacity-60">Botones</div>
              <div className="mt-3 flex flex-wrap gap-3">
                <button className="px-4 py-2 rounded-xl bg-[var(--gc-brown-600)] text-[var(--gc-white)]">Primario</button>
                <button className="px-4 py-2 rounded-xl bg-[var(--gc-beige-200)]">Secundario</button>
                <button className="px-4 py-2 rounded-xl border border-[var(--gc-brown-600)]">Ghost</button>
              </div>
            </div>
          </div>
        </section>

        {/* Footer temporal */}
        <footer className="border-t border-[var(--gc-beige-200)]">
          <div className="max-w-6xl mx-auto px-6 py-8 text-sm flex flex-col md:flex-row gap-2 md:items-center md:justify-between">
            <div>© {new Date().getFullYear()} Global Cadenza</div>
            <div className="opacity-70">Términos · Privacidad · Contacto</div>
          </div>
        </footer>
      </div>
    </div>
  );
}