/* global React, Glyph */
const { useState: useStateP } = React;

/* ===================== INICIO ===================== */
function PageInicio({ onNavigate }) {
  return (
    <>
      {/* ----- Hero ----- */}
      <section id="contenido" aria-labelledby="hero-title" className="relative">
        <div className="mx-auto max-w-[1400px] px-6 md:px-10 lg:px-14 pt-14 md:pt-20 pb-20 md:pb-28">
          <div className="grid grid-cols-12 gap-6 md:gap-10 lg:gap-14 items-end">
            <aside className="hidden lg:flex col-span-1 h-full items-start pt-2" aria-hidden="true">
              <span className="v-rl text-[10px] tracking-widest-2 uppercase text-mute fade-up">
                Atelier · Est. 2018 · Castellón / Valencia
              </span>
            </aside>

            <div className="col-span-12 lg:col-span-7 stagger">
              <p className="text-[11px] md:text-[12px] tracking-widest-2 uppercase text-mute mb-8 flex items-center gap-4">
                <span aria-hidden="true" className="inline-block w-10 h-px bg-mute"></span>
                Micropigmentación · Alta Costura
              </p>

              <h1 id="hero-title"
                  className="font-serif-display text-ink text-[44px] leading-[1.02] sm:text-[58px] md:text-[72px] lg:text-[84px] xl:text-[96px] tracking-[-0.015em]">
                Eleva tu <em className="italic font-light text-charcoal">belleza natural</em>
                <br className="hidden sm:block" />
                con la micropigmentación
                <br className="hidden sm:block" />
                de <span className="italic font-light">alta costura</span>.
              </h1>

              <p className="mt-8 md:mt-10 max-w-[58ch] text-[16px] md:text-[17px] leading-[1.7] text-charcoal">
                Expertas internacionales en técnicas avanzadas de
                <span className="text-ink"> labios</span>,
                <span className="text-ink"> cejas </span>y
                <span className="text-ink"> densificación capilar </span>
                en Castellón y Valencia. Un atelier privado donde la precisión clínica se encuentra con la sensibilidad artística.
              </p>

              <div className="mt-10 md:mt-12 flex flex-col sm:flex-row items-stretch sm:items-center gap-4">
                <button onClick={() => onNavigate("contacto")}
                   className="btn-primary inline-flex items-center justify-center gap-3 bg-ink text-ivory px-8 py-[18px] text-[12px] tracking-[0.22em] uppercase">
                  Reserva tu valoración
                  <svg width="16" height="10" viewBox="0 0 16 10" fill="none" aria-hidden="true">
                    <path d="M1 5h13M10 1l4 4-4 4" stroke="currentColor" strokeWidth="1.2" strokeLinecap="square"/>
                  </svg>
                </button>

                <button onClick={() => onNavigate("academia")}
                   className="btn-ghost inline-flex items-center justify-center gap-3 border border-ink text-ink bg-transparent px-8 py-[18px] text-[12px] tracking-[0.22em] uppercase">
                  Descubre la Academia
                </button>
              </div>

              <dl className="mt-14 md:mt-16 grid grid-cols-3 gap-6 md:gap-10 max-w-2xl border-t border-line/80 pt-8">
                <div>
                  <dt className="text-[10px] tracking-widest-2 uppercase text-mute mb-2">Trayectoria</dt>
                  <dd className="font-serif-display text-2xl md:text-3xl text-ink">+8 años</dd>
                </div>
                <div>
                  <dt className="text-[10px] tracking-widest-2 uppercase text-mute mb-2">Atelier</dt>
                  <dd className="font-serif-display text-2xl md:text-3xl text-ink">Castellón <span className="text-mute">·</span> Valencia</dd>
                </div>
                <div>
                  <dt className="text-[10px] tracking-widest-2 uppercase text-mute mb-2">Dirigido por</dt>
                  <dd className="font-serif-display text-2xl md:text-3xl text-ink italic">Bela &amp; Vivian</dd>
                </div>
              </dl>
            </div>

            <div className="col-span-12 lg:col-span-4 lg:col-start-9 fade-up delay-3">
              <figure className="relative">
                <div className="media-card aspect-[3/4] w-full hero-zoom">
                  <img src={window.siteMedia.heroBackground.image}
                       alt={window.siteMedia.heroBackground.alt}
                       loading="lazy"
                       onError={(e) => { e.currentTarget.style.display = "none"; }} />
                  <figcaption className="absolute inset-x-4 bottom-4 flex items-end justify-between gap-3 z-10">
                    <span className="placeholder-tag text-white/95">Editorial · Retrato</span>
                    <span className="placeholder-tag text-white/95 bg-white/15 backdrop-blur px-2 py-1 rounded-full border border-white/30">01 / 04</span>
                  </figcaption>
                </div>
                <div className="hidden md:block absolute -left-16 -bottom-12 w-40 h-52 media-card shadow-[0_30px_60px_-30px_rgba(22,22,22,0.4)]">
                  <img src={window.siteMedia.heroBackground.detail.image}
                       alt={window.siteMedia.heroBackground.detail.alt}
                       loading="lazy"
                       onError={(e) => { e.currentTarget.style.display = "none"; }} />
                  <figcaption className="absolute inset-x-3 bottom-3 z-10">
                    <span className="placeholder-tag text-white/95">Detalle · Pigmento</span>
                  </figcaption>
                </div>
              </figure>
            </div>
          </div>
        </div>
      </section>

      {/* ----- Gallery ----- */}
      <Gallery onNavigate={onNavigate} />

      {/* ----- WhyForYou ----- */}
      <section id="para-ti" aria-labelledby="por-ti-title" className="bg-ivory">
        <div className="mx-auto max-w-[1400px] px-6 md:px-10 lg:px-14 py-24 md:py-36">
          <div className="grid grid-cols-12 gap-6 md:gap-10 items-end stagger">
            <div className="col-span-12 md:col-span-7">
              <p className="text-[11px] tracking-widest-2 uppercase text-mute mb-8 flex items-center gap-4">
                <span aria-hidden="true" className="inline-block w-10 h-px bg-mute"></span>
                Para ti
              </p>
              <h2 id="por-ti-title"
                  className="font-serif-display text-ink text-[40px] sm:text-[52px] md:text-[64px] lg:text-[72px] leading-[1.04] tracking-[-0.015em]">
                Despierta cada mañana
                <br className="hidden sm:block" />
                con tu <em className="italic font-light">mejor versión</em>.
              </h2>
            </div>
            <div className="col-span-12 md:col-span-4 md:col-start-9">
              <p className="text-[15px] md:text-[16px] leading-[1.75] text-charcoal max-w-[42ch]">
                Cada tratamiento empieza con una valoración íntima en el atelier. Escuchamos, observamos y diseñamos un plan a medida — porque la mejor versión de ti no se copia, se descubre.
              </p>
            </div>
          </div>

          <ul className="mt-20 md:mt-24 grid grid-cols-1 md:grid-cols-3 gap-px bg-line/70 border border-line/70 stagger">
            {[
              { kind: "lift",    eyebrow: "Efecto Lifting", q: "¿Buscas un efecto lifting inmediato y natural?",
                a: "Rediseñamos la arquitectura del rostro a través del trazo. Cejas, mirada y labios trabajan en armonía para realzar tus rasgos sin artificios." },
              { kind: "diamond", eyebrow: "24 / 7 Impecable", q: "¿Cansada del maquillaje diario y buscas resultados duraderos?",
                a: "Despierta lista. Un acabado discreto que respeta tu piel y permanece intacto durante meses — del entrenamiento al evento, sin retoques." },
              { kind: "rings",   eyebrow: "Corrección & Neutralización", q: "¿Tienes trabajos antiguos que necesitas corregir o neutralizar?",
                a: "Especialistas en tonos rebeldes, asimetrías y migraciones. Devolvemos coherencia y color verdadero a micropigmentaciones previas." },
            ].map((it, i) => (
              <li key={i} className="bg-ivory p-8 md:p-10 lg:p-12 flex flex-col">
                <div className="flex items-start justify-between">
                  <span className="text-ink"><Glyph kind={it.kind} /></span>
                  <span className="text-[10px] tracking-widest-2 uppercase text-mute mt-2">0{i + 1}</span>
                </div>
                <p className="mt-10 text-[10px] tracking-widest-2 uppercase text-mute">{it.eyebrow}</p>
                <h3 className="mt-3 font-serif-display text-ink text-[24px] md:text-[28px] leading-[1.15] tracking-[-0.01em]">
                  {it.q}
                </h3>
                <p className="mt-5 text-[14.5px] leading-[1.7] text-charcoal">{it.a}</p>
                <button onClick={() => onNavigate("contacto")}
                   className="mt-10 inline-flex items-center gap-2 text-[11px] tracking-widest-2 uppercase text-ink nav-link self-start bg-transparent">
                  Hablemos
                  <svg width="14" height="10" viewBox="0 0 14 10" fill="none" aria-hidden="true">
                    <path d="M1 5h12M9 1l4 4-4 4" stroke="currentColor" strokeWidth="1.2" strokeLinecap="square"/>
                  </svg>
                </button>
              </li>
            ))}
          </ul>
        </div>
      </section>

      {/* ----- About ----- */}
      <section id="about" aria-labelledby="about-title" className="bg-ivory">
        <div className="mx-auto max-w-[1400px] px-6 md:px-10 lg:px-14 py-24 md:py-36">
          <div className="grid grid-cols-12 gap-6 md:gap-10 lg:gap-16 items-start">

            <div className="col-span-12 lg:col-span-6 relative fade-up">
              <p className="lg:hidden text-[11px] tracking-widest-2 uppercase text-mute mb-6 flex items-center gap-4">
                <span aria-hidden="true" className="inline-block w-10 h-px bg-mute"></span>
                Bela &amp; Vivian
              </p>

              <figure className="relative">
                <div className="media-card aspect-[4/5] w-full">
                  <img src={window.siteMedia.team.image}
                       alt={window.siteMedia.team.alt}
                       loading="lazy"
                       onError={(e) => { e.currentTarget.style.display = "none"; }} />
                  <figcaption className="absolute inset-x-4 bottom-4 flex items-end justify-between gap-3 z-10">
                    <span className="placeholder-tag text-white/95">Retrato · Atelier</span>
                    <span className="placeholder-tag text-white/95 bg-white/15 backdrop-blur px-2 py-1 rounded-full border border-white/30">02 / 04</span>
                  </figcaption>
                </div>
                <div className="hidden md:block absolute -right-8 -bottom-12 w-44 h-56 media-card shadow-[0_30px_60px_-30px_rgba(22,22,22,0.4)]">
                  <img src={window.siteMedia.team.detail.image}
                       alt={window.siteMedia.team.detail.alt}
                       loading="lazy"
                       onError={(e) => { e.currentTarget.style.display = "none"; }} />
                  <figcaption className="absolute inset-x-3 bottom-3 z-10">
                    <span className="placeholder-tag text-white/95">Manos · En cabina</span>
                  </figcaption>
                </div>
                <figcaption className="mt-5 flex items-center justify-between text-[11px] tracking-widest-2 uppercase text-mute">
                  <span>Bela &amp; Vivian — Directoras</span>
                  <span aria-hidden="true">02 / 04</span>
                </figcaption>
              </figure>
            </div>

            <div className="col-span-12 lg:col-span-6 lg:pl-6 stagger">
              <p className="hidden lg:flex text-[11px] tracking-widest-2 uppercase text-mute mb-8 items-center gap-4">
                <span aria-hidden="true" className="inline-block w-10 h-px bg-mute"></span>
                Bela &amp; Vivian
              </p>

              <h2 id="about-title"
                  className="font-serif-display text-ink text-[40px] sm:text-[52px] md:text-[60px] lg:text-[68px] leading-[1.04] tracking-[-0.015em]">
                Manos expertas,
                <br />
                <em className="italic font-light">resultados impecables</em>.
              </h2>

              <p className="text-[16px] md:text-[17px] leading-[1.75] text-charcoal max-w-[54ch]">
                Bela y Vivian dirigen un atelier reconocido como
                <span className="text-ink"> centro de referencia en la Comunidad Valenciana</span>.
                Una práctica obsesionada con el detalle: décadas de experiencia combinada, formación continua en las escuelas más exigentes del sector y un palmarés internacional que avala cada trazo.
              </p>

              <p className="text-[16px] md:text-[17px] leading-[1.75] text-charcoal max-w-[54ch]">
                Su firma — sutil, favorecedora y técnicamente irreprochable — ha sido galardonada en los principales campeonatos del mundo y certificada por organismos internacionales.
              </p>

              <div className="mt-4">
                <p className="text-[10px] tracking-widest-2 uppercase text-mute mb-5">
                  Premios &amp; certificaciones seleccionados
                </p>
                <dl className="divide-y divide-line/80 border-t border-line/80">
                  {[
                    { year: "2025", event: "PMU Beauty Dubai",   place: "Ganadoras"   },
                    { year: "2025", event: "PMU Beauty Arabia",  place: "Ganadoras"   },
                    { year: "2023", event: "New Generation",     place: "Ganadoras"   },
                    { year: "—",    event: "Certificación Internacional", place: "Master Artists" },
                  ].map((a, i) => (
                    <div key={i} className="grid grid-cols-12 gap-4 py-4 items-baseline">
                      <dt className="col-span-2 text-[12px] tracking-[0.18em] uppercase text-mute font-medium">{a.year}</dt>
                      <dd className="col-span-7 font-serif-display text-ink text-[20px] md:text-[22px] leading-[1.25]">{a.event}</dd>
                      <dd className="col-span-3 text-right text-[11px] tracking-widest-2 uppercase text-charcoal">{a.place}</dd>
                    </div>
                  ))}
                </dl>
              </div>

              <div className="flex flex-col sm:flex-row items-start sm:items-center justify-between gap-6 pt-8 border-t border-line/80">
                <div>
                  <p className="font-serif-display italic text-ink text-[28px] leading-none">Bela &amp; Vivian</p>
                  <p className="mt-2 text-[10px] tracking-widest-2 uppercase text-mute">Master Artists · Vibelami</p>
                </div>
                <button onClick={() => onNavigate("contacto")}
                   className="btn-ghost inline-flex items-center gap-3 border border-ink text-ink bg-transparent px-7 py-[16px] text-[11px] tracking-widest-2 uppercase">
                  Conoce el atelier
                  <svg width="14" height="10" viewBox="0 0 14 10" fill="none" aria-hidden="true">
                    <path d="M1 5h12M9 1l4 4-4 4" stroke="currentColor" strokeWidth="1.2" strokeLinecap="square"/>
                  </svg>
                </button>
              </div>
            </div>
          </div>
        </div>
      </section>

      <Faq onNavigate={onNavigate} />
    </>
  );
}

/* ===================== FAQ ===================== */
function FaqItem({ index, item, open, onToggle }) {
  const id = `faq-${index}`;
  return (
    <div className="border-b border-line/80">
      <h3>
        <button type="button" id={`${id}-trigger`}
                aria-expanded={open} aria-controls={`${id}-panel`} onClick={onToggle}
                className="w-full flex items-center justify-between gap-6 py-7 md:py-8 text-left group bg-transparent">
          <span className="flex items-baseline gap-5 md:gap-8">
            <span className="text-[11px] tracking-widest-2 uppercase text-mute pt-1 shrink-0">0{index + 1}</span>
            <span className="font-serif-display text-ink text-[22px] md:text-[28px] lg:text-[32px] leading-[1.15] tracking-[-0.01em]">
              {item.q}
            </span>
          </span>
          <span aria-hidden="true" className="shrink-0 inline-flex items-center justify-center w-10 h-10 border border-ink/80 relative">
            <span className="absolute w-3 h-px bg-ink"></span>
            <span className={"absolute w-3 h-px bg-ink transition-transform duration-300 " + (open ? "scale-x-0" : "rotate-90")}></span>
          </span>
        </button>
      </h3>
      <div id={`${id}-panel`} role="region" aria-labelledby={`${id}-trigger`}
           hidden={!open} className="pb-8 pl-0 md:pl-[64px] pr-0 md:pr-16">
        <p className="text-[15.5px] md:text-[16px] leading-[1.75] text-charcoal max-w-[62ch]">{item.a}</p>
      </div>
    </div>
  );
}

function Faq({ onNavigate }) {
  const items = [
    { q: "¿Duele el tratamiento?",
      a: "Utilizamos técnicas avanzadas y anestésicos tópicos de uso profesional que garantizan el máximo confort durante la sesión. La sensación más habitual es ligera presión o cosquilleo. Antes de empezar, hacemos una valoración para asegurar que estés totalmente cómoda." },
    { q: "¿Cuánto tiempo dura el resultado?",
      a: "Dependiendo del tratamiento y del tipo de piel, los resultados se mantienen perfectos entre 1 y 2 años. Programamos un retoque de mantenimiento para preservar la nitidez del trazo y el tono original a lo largo del tiempo." },
    { q: "¿Ofrecéis formación para principiantes?",
      a: "Sí. Nuestras formaciones intensivas — masterclasses de 3 días en grupo reducido — están diseñadas para marcar un antes y un después en tu carrera. Trabajamos con casos reales en cabina y mentorías personalizadas, tanto si partes desde cero como si ya ejerces." },
  ];
  const [openIdx, setOpenIdx] = useStateP(0);

  return (
    <section id="faq" aria-labelledby="faq-title" className="bg-cream">
      <div className="mx-auto max-w-[1400px] px-6 md:px-10 lg:px-14 py-24 md:py-36">
        <div className="grid grid-cols-12 gap-6 md:gap-10 lg:gap-16">
          <div className="col-span-12 lg:col-span-4 fade-up">
            <div className="lg:sticky lg:top-10">
              <p className="text-[11px] tracking-widest-2 uppercase text-mute mb-8 flex items-center gap-4">
                <span aria-hidden="true" className="inline-block w-10 h-px bg-mute"></span>
                Preguntas frecuentes
              </p>
              <h2 id="faq-title"
                  className="font-serif-display text-ink text-[40px] sm:text-[52px] md:text-[60px] leading-[1.04] tracking-[-0.015em]">
                Lo que se
                <br />
                <em className="italic font-light">pregunta antes</em>
                <br />
                de reservar.
              </h2>
              <p className="mt-8 text-[15px] md:text-[16px] leading-[1.75] text-charcoal max-w-[40ch]">
                Si te queda alguna duda después de leerlas, escríbenos directamente — preferimos resolverlo en persona.
              </p>
              <button onClick={() => onNavigate("contacto")}
                 className="mt-8 inline-flex items-center gap-2 text-[11px] tracking-widest-2 uppercase text-ink nav-link bg-transparent">
                Escríbenos
                <svg width="14" height="10" viewBox="0 0 14 10" fill="none" aria-hidden="true">
                  <path d="M1 5h12M9 1l4 4-4 4" stroke="currentColor" strokeWidth="1.2" strokeLinecap="square"/>
                </svg>
              </button>
            </div>
          </div>

          <div className="col-span-12 lg:col-span-8 border-t border-line/80 fade-up delay-2">
            {items.map((it, i) => (
              <FaqItem key={i} index={i} item={it} open={openIdx === i}
                       onToggle={() => setOpenIdx(openIdx === i ? -1 : i)} />
            ))}
          </div>
        </div>
      </div>
    </section>
  );
}

/* ===================== SERVICIOS ===================== */
function PageServicios({ onNavigate }) {
  const items = [
    { n: "01", family: "Cejas",     mediaKey: "cejas",      name: "VIBROWS & Powder Brows",
      tagline: "Hiperrealismo · Pelo a pelo & polvo",
      desc: "Diseños de cejas hiperrealistas adaptados a cada tipo de piel. Una estructura que enmarca la mirada y se integra con la expresión natural del rostro.",
      tag: "Editorial · Cejas",
      includes: ["Diseño y mapping facial", "Sesión principal", "Retoque de afianzamiento", "Guía de cuidados"]
    },
    { n: "02", family: "Labios",    mediaKey: "labios",     name: "Micropigmentación de Labios",
      tagline: "Volumen visual · Neutralización · Color 24/7",
      desc: "Volumen visual, neutralización de tonos y color perfecto las 24 horas. Un acabado jugoso, natural y favorecedor en cualquier luz.",
      tag: "Editorial · Labios",
      includes: ["Estudio de subtono", "Diseño y simetría", "Sesión principal + retoque", "Guía de cuidados"]
    },
    { n: "03", family: "Capilar",   mediaKey: "capilar",    name: "Densificación Capilar",
      tagline: "Tricopigmentación · Capa por capa",
      desc: "Tratamiento progresivo capa por capa para resultados naturales y estables. Cobertura de claros, líneas de implantación y zonas con poca densidad.",
      tag: "Editorial · Capilar",
      includes: ["Diagnóstico capilar", "Plan en 2–3 sesiones", "Pigmentos hipoalergénicos", "Seguimiento personalizado"]
    },
    { n: "04", family: "Correcciones", mediaKey: "correccion", name: "Corrección & Neutralización",
      tagline: "Trabajos previos · Migraciones · Asimetrías",
      desc: "Devolvemos coherencia y color verdadero a micropigmentaciones previas. Diagnóstico riguroso antes de proponer cualquier plan.",
      tag: "Editorial · Corrección",
      includes: ["Valoración del caso", "Plan personalizado", "Neutralización por capas", "Opción de remoción láser"]
    },
  ];

  return (
    <>
      {/* Hero of services */}
      <section className="bg-charcoal text-ivory on-dark" aria-labelledby="servicios-title">
        <div className="mx-auto max-w-[1400px] px-6 md:px-10 lg:px-14 pt-20 md:pt-28 pb-16 md:pb-24">
          <div className="grid grid-cols-12 gap-6 md:gap-10 items-end stagger">
            <div className="col-span-12 lg:col-span-8">
              <p className="text-[11px] tracking-widest-2 uppercase text-ivory/60 mb-8 flex items-center gap-4">
                <span aria-hidden="true" className="inline-block w-10 h-px bg-ivory/40"></span>
                Servicios exclusivos
              </p>
              <h1 id="servicios-title"
                  className="font-serif-display text-ivory text-[44px] sm:text-[60px] md:text-[76px] lg:text-[88px] leading-[1.02] tracking-[-0.015em]">
                Un atelier dedicado a la
                <br className="hidden md:block" />
                <em className="italic font-light">precisión de tu rostro</em>.
              </h1>
            </div>
            <div className="col-span-12 lg:col-span-4">
              <p className="text-[15px] md:text-[16px] leading-[1.75] text-ivory/80 max-w-[44ch]">
                Cada técnica se ejecuta con pigmentos de grado profesional, agujas estériles de un solo uso y un protocolo clínico revisado año tras año. Resultados pensados para durar.
              </p>
              <button onClick={() => onNavigate("contacto")}
                      className="mt-8 inline-flex items-center gap-3 bg-ivory text-ink px-7 py-[16px] text-[11px] tracking-widest-2 uppercase transition-colors hover:bg-cream">
                Reserva tu valoración
                <svg width="14" height="10" viewBox="0 0 14 10" fill="none" aria-hidden="true">
                  <path d="M1 5h12M9 1l4 4-4 4" stroke="currentColor" strokeWidth="1.2" strokeLinecap="square"/>
                </svg>
              </button>
            </div>
          </div>
        </div>
      </section>

      {/* Grid */}
      <section className="bg-charcoal text-ivory on-dark">
        <div className="mx-auto max-w-[1400px] px-6 md:px-10 lg:px-14 pb-24 md:pb-32">
          <ul className="grid grid-cols-1 sm:grid-cols-2 lg:grid-cols-4 gap-px bg-ivory/15 stagger">
            {items.map((s) => {
              const m = window.siteMedia.services[s.mediaKey] || {};
              return (
              <li key={s.n} className="bg-charcoal flex flex-col group float-card float-shadow">
                <div className="relative aspect-[3/4] w-full overflow-hidden bg-charcoal">
                  <img src={m.image} alt={m.alt || s.name} loading="lazy"
                       onError={(e) => { e.currentTarget.style.display = "none"; }}
                       className="absolute inset-0 w-full h-full object-cover transition-transform duration-700 ease-out group-hover:scale-105" />
                  <div aria-hidden="true" className="absolute inset-0 bg-gradient-to-t from-black/55 via-black/0 to-black/0"></div>
                  <div className="absolute inset-x-4 bottom-4 flex items-end justify-between z-10">
                    <span className="placeholder-tag text-white/95">{s.tag}</span>
                    <span className="placeholder-tag text-white/95 bg-white/10 backdrop-blur px-2 py-1 rounded-full border border-white/30">{s.n}</span>
                  </div>
                </div>
                <div className="p-6 md:p-7 flex flex-col flex-1">
                  <div className="flex items-baseline justify-between">
                    <span className="text-[10px] tracking-widest-2 uppercase text-ivory/55">{s.n}</span>
                    <span className="text-[10px] tracking-widest-2 uppercase text-ivory/55">{s.family}</span>
                  </div>
                  <h3 className="mt-5 font-serif-display text-ivory text-[24px] md:text-[26px] leading-[1.15] tracking-[-0.01em]">{s.name}</h3>
                  <p className="mt-3 text-[11px] tracking-widest-2 uppercase text-nude">{s.tagline}</p>
                  <p className="mt-5 text-[14px] leading-[1.7] text-ivory/80">{s.desc}</p>

                  <ul className="mt-6 space-y-2 text-[13px] text-ivory/75">
                    {s.includes.map((inc) => (
                      <li key={inc} className="flex gap-3"><span aria-hidden="true" className="text-nude">—</span>{inc}</li>
                    ))}
                  </ul>

                  <button onClick={() => onNavigate("contacto")}
                          className="mt-auto pt-8 inline-flex items-center gap-2 text-[11px] tracking-widest-2 uppercase text-ivory border-b border-ivory/40 pb-2 self-start hover:border-ivory transition-colors bg-transparent">
                    Reservar valoración
                    <svg width="14" height="10" viewBox="0 0 14 10" fill="none" aria-hidden="true">
                      <path d="M1 5h12M9 1l4 4-4 4" stroke="currentColor" strokeWidth="1.2" strokeLinecap="square"/>
                    </svg>
                  </button>
                </div>
              </li>
              );
            })}
          </ul>
        </div>
      </section>

      {/* ----- Gallery ----- */}
      <Gallery onNavigate={onNavigate} dark={true} />

      {/* Proceso */}
      <section className="bg-ivory">
        <div className="mx-auto max-w-[1400px] px-6 md:px-10 lg:px-14 py-24 md:py-36">
          <div className="grid grid-cols-12 gap-6 md:gap-10 items-end stagger">
            <div className="col-span-12 md:col-span-8">
              <p className="text-[11px] tracking-widest-2 uppercase text-mute mb-8 flex items-center gap-4">
                <span aria-hidden="true" className="inline-block w-10 h-px bg-mute"></span>
                Cómo trabajamos
              </p>
              <h2 className="font-serif-display text-ink text-[36px] sm:text-[48px] md:text-[58px] leading-[1.04] tracking-[-0.015em]">
                Cuatro pasos para una
                <br className="hidden md:block" />
                <em className="italic font-light">firma a tu medida</em>.
              </h2>
            </div>
          </div>

          <ol className="mt-16 grid grid-cols-1 md:grid-cols-2 lg:grid-cols-4 gap-px bg-line/70 border border-line/70 stagger">
            {[
              { t: "Valoración íntima", d: "Entrevistamos, observamos y mapeamos el rostro. Sin compromiso." },
              { t: "Diseño a medida",  d: "Plan, simulación de color y estructura aprobada contigo antes de empezar." },
              { t: "Sesión en cabina", d: "Anestesia tópica, pigmentos profesionales y técnica precisa." },
              { t: "Retoque & cuidado", d: "Cita de afianzamiento + guía completa de mantenimiento." },
            ].map((p, i) => (
              <li key={i} className="bg-ivory p-8 md:p-10 flex flex-col">
                <span className="font-serif-display text-ink text-[36px] md:text-[44px] leading-none">0{i + 1}</span>
                <h3 className="mt-6 font-serif-display text-ink text-[22px] md:text-[24px]">{p.t}</h3>
                <p className="mt-3 text-[14px] leading-[1.7] text-charcoal">{p.d}</p>
              </li>
            ))}
          </ol>
        </div>
      </section>
    </>
  );
}

/* ===================== ACADEMIA ===================== */
function PageAcademia({ onNavigate }) {
  return (
    <>
      <section className="bg-ivory" aria-labelledby="academia-title">
        <div className="mx-auto max-w-[1400px] px-6 md:px-10 lg:px-14 pt-14 md:pt-20 pb-16 md:pb-24">
          <div className="grid grid-cols-12 gap-6 md:gap-10 items-end">
            <div className="col-span-12 lg:col-span-7 stagger">
              <p className="text-[11px] tracking-widest-2 uppercase text-mute mb-8 flex items-center gap-4">
                <span aria-hidden="true" className="inline-block w-10 h-px bg-mute"></span>
                Academia · Masterclass
              </p>
              <h1 id="academia-title"
                  className="font-serif-display text-ink text-[44px] sm:text-[60px] md:text-[76px] lg:text-[88px] leading-[1.02] tracking-[-0.015em]">
                Forma tu mirada
                <br className="hidden sm:block" />
                <em className="italic font-light">profesional</em>.
              </h1>
              <p className="mt-8 max-w-[58ch] text-[16px] md:text-[17px] leading-[1.7] text-charcoal">
                Entrenamientos intensivos de <span className="text-ink">3 días</span> en grupo reducido donde no solo miras: <span className="text-ink">practicas en casos reales</span>, recibes mentoría personalizada y transformas tu nivel. Diseñados por Bela &amp; Vivian, premiadas internacionalmente.
              </p>
              <div className="mt-10 flex flex-col sm:flex-row gap-4">
                <button onClick={() => onNavigate("contacto")}
                   className="btn-primary inline-flex items-center justify-center gap-3 bg-ink text-ivory px-8 py-[18px] text-[12px] tracking-[0.22em] uppercase">
                  Solicita admisión
                  <svg width="16" height="10" viewBox="0 0 16 10" fill="none" aria-hidden="true">
                    <path d="M1 5h13M10 1l4 4-4 4" stroke="currentColor" strokeWidth="1.2" strokeLinecap="square"/>
                  </svg>
                </button>
                <button onClick={() => onNavigate("servicios")}
                   className="btn-ghost inline-flex items-center justify-center gap-3 border border-ink text-ink bg-transparent px-8 py-[18px] text-[12px] tracking-[0.22em] uppercase">
                  Ver servicios
                </button>
              </div>
            </div>

            <div className="col-span-12 lg:col-span-5 fade-up delay-3">
              <figure className="relative">
                <div className="media-card aspect-[4/5] w-full">
                  <img src={window.siteMedia.academy.cover.image}
                       alt={window.siteMedia.academy.cover.alt}
                       loading="lazy"
                       onError={(e) => { e.currentTarget.style.display = "none"; }} />
                  <figcaption className="absolute inset-x-4 bottom-4 flex items-end justify-between gap-3 z-10">
                    <span className="placeholder-tag text-white/95">Aula · Atelier</span>
                    <span className="placeholder-tag text-white/95 bg-white/15 backdrop-blur px-2 py-1 rounded-full border border-white/30">Masterclass</span>
                  </figcaption>
                </div>
                <figcaption className="mt-4 text-[11px] tracking-widest-2 uppercase text-mute flex items-center justify-between">
                  <span>Aula Vibelami · Castellón</span>
                  <span aria-hidden="true">— Masterclass</span>
                </figcaption>
              </figure>
            </div>
          </div>
        </div>
      </section>

      {/* Pilares */}
      <section className="bg-cream">
        <div className="mx-auto max-w-[1400px] px-6 md:px-10 lg:px-14 py-24 md:py-32">
          <div className="grid grid-cols-12 gap-6 md:gap-10 items-end stagger">
            <div className="col-span-12 md:col-span-7">
              <p className="text-[11px] tracking-widest-2 uppercase text-mute mb-8 flex items-center gap-4">
                <span aria-hidden="true" className="inline-block w-10 h-px bg-mute"></span>
                Pilares del programa
              </p>
              <h2 className="font-serif-display text-ink text-[40px] sm:text-[52px] md:text-[64px] leading-[1.04] tracking-[-0.015em]">
                Práctica, mentoría y
                <br className="hidden sm:block" />
                <em className="italic font-light">criterio artístico</em>.
              </h2>
            </div>
            <div className="col-span-12 md:col-span-4 md:col-start-9">
              <p className="text-[15px] leading-[1.75] text-charcoal max-w-[42ch]">
                3 jornadas, grupos de hasta 6 alumnas, una técnica por edición. Cada bloque combina teoría, demostración y cabina supervisada.
              </p>
            </div>
          </div>

          <ul className="mt-16 grid grid-cols-1 md:grid-cols-3 gap-px bg-line/70 border border-line/70 stagger">
            {[
              { t: "Teoría aplicada", d: "Anatomía facial, colorimetría, tipos de piel, normativa sanitaria y diseño." },
              { t: "Práctica en cabina",d: "Modelos reales supervisados desde el primer trazo hasta el retoque." },
              { t: "Mentoría 1:1",      d: "Acompañamiento personalizado y feedback técnico durante los 3 días." },
            ].map((p, i) => (
              <li key={i} className="bg-cream p-8 md:p-10 lg:p-12 flex flex-col">
                <span className="text-[10px] tracking-widest-2 uppercase text-mute">0{i + 1}</span>
                <h3 className="mt-6 font-serif-display text-ink text-[26px] md:text-[30px]">{p.t}</h3>
                <p className="mt-4 text-[14.5px] leading-[1.7] text-charcoal">{p.d}</p>
              </li>
            ))}
          </ul>
        </div>
      </section>

      {/* Aula · Reels reales */}
      <section className="bg-ivory">
        <div className="mx-auto max-w-[1400px] px-6 md:px-10 lg:px-14 py-20 md:py-28">
          <div className="grid grid-cols-12 gap-6 md:gap-10 items-end stagger">
            <div className="col-span-12 md:col-span-8">
              <p className="text-[11px] tracking-widest-2 uppercase text-mute mb-8 flex items-center gap-4">
                <span aria-hidden="true" className="inline-block w-10 h-px bg-mute"></span>
                El aula en movimiento
              </p>
              <h2 className="font-serif-display text-ink text-[36px] sm:text-[48px] md:text-[58px] leading-[1.04] tracking-[-0.015em]">
                Vibe del atelier,
                <br className="hidden md:block" />
                <em className="italic font-light">capturada en cabina</em>.
              </h2>
            </div>
            <div className="col-span-12 md:col-span-4">
              <p className="text-[15px] leading-[1.75] text-charcoal max-w-[40ch]">
                Demos en vivo, prácticas y mentoría 1:1. Esto es lo que vivirás durante los 3 días de formación.
              </p>
            </div>
          </div>
          <div className="mt-14 grid grid-cols-1 sm:grid-cols-2 lg:grid-cols-3 gap-4 md:gap-5 stagger">
            {window.siteMedia.academy.reels.map((r, i) => (
              <VideoSlot key={i} label={r.label} poster={r.poster} srcs={r.videoSources || []} aspect="aspect-[9/16]" />
            ))}
          </div>
        </div>
      </section>

      {/* Programa de 3 días */}
      <section className="bg-ivory">
        <div className="mx-auto max-w-[1400px] px-6 md:px-10 lg:px-14 py-24 md:py-32">
          <div className="grid grid-cols-12 gap-6 md:gap-10 lg:gap-16">
            <div className="col-span-12 lg:col-span-4 fade-up">
              <p className="text-[11px] tracking-widest-2 uppercase text-mute mb-8 flex items-center gap-4">
                <span aria-hidden="true" className="inline-block w-10 h-px bg-mute"></span>
                Programa · 3 días
              </p>
              <h2 className="font-serif-display text-ink text-[36px] sm:text-[44px] md:text-[52px] leading-[1.04] tracking-[-0.015em]">
                Lo que vivirás en
                <br />
                <em className="italic font-light">tres jornadas</em>.
              </h2>
              <p className="mt-6 text-[15px] leading-[1.75] text-charcoal max-w-[40ch]">
                Cada masterclass incluye material profesional, modelos, almuerzos en el atelier y certificado al finalizar.
              </p>
            </div>

            <ol className="col-span-12 lg:col-span-8 stagger">
              {[
                { d: "Día 01", t: "Fundamentos & diseño",      desc: "Teoría intensiva, anatomía, colorimetría y mapping facial. Práctica sobre piel sintética y dummies." },
                { d: "Día 02", t: "Cabina supervisada",        desc: "Modelos reales asignados por nivel. Demostración 1:1 con Bela o Vivian y feedback técnico inmediato." },
                { d: "Día 03", t: "Casos avanzados & retoque", desc: "Resolución de complicaciones, neutralización, retoque y construcción de portafolio profesional." },
              ].map((s, i) => (
                <li key={i} className="grid grid-cols-12 gap-4 md:gap-8 border-t border-line/80 py-8 items-baseline">
                  <span className="col-span-12 md:col-span-2 text-[11px] tracking-widest-2 uppercase text-mute">{s.d}</span>
                  <div className="col-span-12 md:col-span-10">
                    <h3 className="font-serif-display text-ink text-[28px] md:text-[34px] tracking-[-0.01em]">{s.t}</h3>
                    <p className="mt-3 text-[15px] leading-[1.75] text-charcoal max-w-[58ch]">{s.desc}</p>
                  </div>
                </li>
              ))}
            </ol>
          </div>
        </div>
      </section>

      {/* Para quién */}
      <section className="bg-ink text-ivory on-dark">
        <div className="mx-auto max-w-[1400px] px-6 md:px-10 lg:px-14 py-24 md:py-32">
          <div className="grid grid-cols-12 gap-6 md:gap-10 stagger">
            <div className="col-span-12 lg:col-span-5">
              <p className="text-[11px] tracking-widest-2 uppercase text-ivory/60 mb-8 flex items-center gap-4">
                <span aria-hidden="true" className="inline-block w-10 h-px bg-ivory/40"></span>
                ¿Para quién?
              </p>
              <h2 className="font-serif-display text-ivory text-[40px] sm:text-[52px] md:text-[60px] leading-[1.04] tracking-[-0.015em]">
                Tanto si empiezas
                <br />
                como si <em className="italic font-light">ya ejerces</em>.
              </h2>
            </div>
            <div className="col-span-12 lg:col-span-7 grid grid-cols-1 md:grid-cols-2 gap-px bg-ivory/15">
              {[
                { t: "Profesionales sin experiencia", d: "Comienza con base técnica, ética y artística desde el día uno." },
                { t: "Esteticistas en activo",        d: "Suma una técnica avanzada con cabina supervisada en directo." },
                { t: "Artistas PMU en formación",     d: "Acelera tu nivel con casos reales y un criterio de alta gama." },
                { t: "Centros & cabinas",             d: "Formaciones cerradas para equipos, con protocolo adaptado." },
              ].map((p, i) => (
                <div key={i} className="bg-ink p-7 md:p-8">
                  <p className="text-[10px] tracking-widest-2 uppercase text-ivory/55">0{i + 1}</p>
                  <h3 className="mt-4 font-serif-display text-ivory text-[22px] md:text-[24px]">{p.t}</h3>
                  <p className="mt-3 text-[13.5px] leading-[1.7] text-ivory/75">{p.d}</p>
                </div>
              ))}
            </div>
          </div>

          <div className="mt-16 flex flex-col sm:flex-row items-start sm:items-center justify-between gap-6 border-t border-ivory/20 pt-8">
            <p className="text-[11px] tracking-widest-2 uppercase text-ivory/60">
              Plazas limitadas · Selección por entrevista previa
            </p>
            <button onClick={() => onNavigate("contacto")}
                    className="inline-flex items-center gap-3 bg-ivory text-ink px-7 py-[16px] text-[11px] tracking-widest-2 uppercase transition-colors hover:bg-cream">
              Solicita tu admisión
              <svg width="14" height="10" viewBox="0 0 14 10" fill="none" aria-hidden="true">
                <path d="M1 5h12M9 1l4 4-4 4" stroke="currentColor" strokeWidth="1.2" strokeLinecap="square"/>
              </svg>
            </button>
          </div>
        </div>
      </section>
    </>
  );
}

/* ===================== CONTACTO (página dedicada) ===================== */
function PageContacto() {
  const [form, setForm] = useStateP({ nombre: "", telefono: "", servicio: "", mensaje: "", rgpd: false });
  const [sent, setSent] = useStateP(false);
  const [touched, setTouched] = useStateP(false);

  const handle = (k) => (e) => setForm({ ...form, [k]: e.target.type === "checkbox" ? e.target.checked : e.target.value });
  const required = form.nombre.trim() && form.telefono.trim() && form.servicio && form.rgpd;

  function submit(e) {
    e.preventDefault();
    setTouched(true);
    if (!required) return;
    setSent(true);
  }

  const fieldBase = "field relative";
  const inputBase = "w-full bg-transparent border-0 py-3 text-[15.5px] text-ink placeholder:text-mute/70 focus:outline-none";
  const labelBase = "block text-[10px] tracking-widest-2 uppercase text-mute mb-2";

  return (
    <>
      {/* Page header */}
      <section className="bg-ivory" aria-labelledby="contacto-title">
        <div className="mx-auto max-w-[1400px] px-6 md:px-10 lg:px-14 pt-14 md:pt-20 pb-12 md:pb-16">
          <div className="grid grid-cols-12 gap-6 md:gap-10 items-end stagger">
            <div className="col-span-12 lg:col-span-8">
              <p className="text-[11px] tracking-widest-2 uppercase text-mute mb-8 flex items-center gap-4">
                <span aria-hidden="true" className="inline-block w-10 h-px bg-mute"></span>
                Contacto
              </p>
              <h1 id="contacto-title"
                  className="font-serif-display text-ink text-[44px] sm:text-[60px] md:text-[76px] lg:text-[88px] leading-[1.02] tracking-[-0.015em] max-w-[18ch]">
                Reserva tu valoración.
                <br />
                <em className="italic font-light">Sin compromiso</em>.
              </h1>
            </div>
            <div className="col-span-12 lg:col-span-4">
              <p className="text-[15px] md:text-[16px] leading-[1.7] text-charcoal max-w-[42ch]">
                Cuéntanos qué buscas. Nuestro equipo se pondrá en contacto contigo en menos de <span className="text-ink">24h</span> para agendar tu cita personalizada.
              </p>
            </div>
          </div>
        </div>
      </section>

      {/* Form + info */}
      <section className="bg-ivory">
        <div className="mx-auto max-w-[1400px] px-6 md:px-10 lg:px-14 pb-24 md:pb-36">
          <div className="grid grid-cols-12 gap-y-16 gap-x-6 md:gap-x-10 lg:gap-x-16 items-start">

            {/* ---- Form (left) ---- */}
            <div className="col-span-12 lg:col-span-7 fade-up">
              {sent ? (
                <div role="status" aria-live="polite" className="border border-line/80 p-10 md:p-14 bg-cream/50 rounded-2xl">
                  <p className="text-[10px] tracking-widest-2 uppercase text-mute mb-4">Mensaje enviado</p>
                  <h2 className="font-serif-display text-ink text-[32px] md:text-[44px] leading-[1.1]">
                    Gracias, {form.nombre.split(" ")[0] || "hablamos pronto"}.
                  </h2>
                  <p className="mt-5 text-[15px] leading-[1.7] text-charcoal max-w-[48ch]">
                    Hemos recibido tu mensaje. Te escribiremos por WhatsApp o email en las próximas horas para coordinar tu cita.
                  </p>
                  <button type="button"
                          onClick={() => { setSent(false); setTouched(false); setForm({ nombre: "", telefono: "", servicio: "", mensaje: "", rgpd: false }); }}
                          className="mt-8 text-[11px] tracking-widest-2 uppercase text-ink nav-link bg-transparent">
                    Enviar otro mensaje
                  </button>
                </div>
              ) : (
                <form noValidate onSubmit={submit} className="grid grid-cols-1 sm:grid-cols-2 gap-x-10 gap-y-9">
                  <div className="sm:col-span-1">
                    <label htmlFor="c-nombre" className={labelBase}>Nombre *</label>
                    <div className={fieldBase}>
                      <input id="c-nombre" name="nombre" type="text" autoComplete="name" required
                             value={form.nombre} onChange={handle("nombre")}
                             aria-invalid={touched && !form.nombre.trim()}
                             placeholder="Tu nombre completo"
                             className={inputBase} />
                    </div>
                  </div>
                  <div className="sm:col-span-1">
                    <label htmlFor="c-tel" className={labelBase}>Teléfono *</label>
                    <div className={fieldBase}>
                      <input id="c-tel" name="telefono" type="tel" autoComplete="tel" required
                             value={form.telefono} onChange={handle("telefono")}
                             aria-invalid={touched && !form.telefono.trim()}
                             placeholder="+34 000 000 000"
                             className={inputBase} />
                    </div>
                  </div>

                  <div className="sm:col-span-2">
                    <label className={labelBase}>¿Qué servicio te interesa? *</label>
                    <div role="radiogroup" aria-label="Servicio" aria-required="true"
                         className="grid grid-cols-2 md:grid-cols-4 gap-2 md:gap-3 mt-1">
                      {[
                        { v: "cejas",    label: "Cejas"    },
                        { v: "labios",   label: "Labios"   },
                        { v: "capilar",  label: "Capilar"  },
                        { v: "academia", label: "Academia" },
                      ].map((opt) => (
                        <label key={opt.v}
                               className={"chip-radio cursor-pointer text-center py-3 px-4 border text-[12px] tracking-[0.18em] uppercase rounded-full transition-colors " +
                                 (form.servicio === opt.v
                                   ? "bg-ink text-ivory border-ink"
                                   : "bg-transparent text-ink border-ink/30 hover:border-ink")}>
                          <input type="radio" name="servicio" value={opt.v}
                                 checked={form.servicio === opt.v}
                                 onChange={handle("servicio")}
                                 className="sr-only" />
                          {opt.label}
                        </label>
                      ))}
                    </div>
                    {touched && !form.servicio && (
                      <p className="mt-2 text-[11px] text-ink">Selecciona un servicio.</p>
                    )}
                  </div>

                  <div className="sm:col-span-2">
                    <label htmlFor="c-mensaje" className={labelBase}>Mensaje</label>
                    <div className={fieldBase}>
                      <textarea id="c-mensaje" name="mensaje" rows="4"
                                value={form.mensaje} onChange={handle("mensaje")}
                                placeholder="Cuéntanos qué te gustaría conseguir o cualquier duda previa."
                                className={inputBase + " resize-none"} />
                    </div>
                  </div>

                  <div className="sm:col-span-2 flex items-start gap-3">
                    <input id="c-rgpd" name="rgpd" type="checkbox" required
                           checked={form.rgpd} onChange={handle("rgpd")}
                           aria-invalid={touched && !form.rgpd}
                           className="mt-[5px] w-4 h-4 accent-ink shrink-0" />
                    <label htmlFor="c-rgpd" className="text-[12px] leading-[1.6] text-charcoal">
                      He leído y acepto la{" "}
                      <a href="#privacidad" className="text-ink underline underline-offset-2 hover:no-underline">Política de Privacidad</a>{" "}
                      y autorizo el tratamiento de mis datos para gestionar mi solicitud. *
                    </label>
                  </div>

                  {touched && !required && (
                    <p role="alert" className="sm:col-span-2 text-[12px] text-ink bg-cream border border-line/80 px-4 py-3 rounded-md">
                      Revisa los campos marcados con * antes de enviar.
                    </p>
                  )}

                  <div className="sm:col-span-2 flex flex-col sm:flex-row items-stretch sm:items-center justify-between gap-4 pt-2">
                    <p className="text-[11px] tracking-widest-2 uppercase text-mute">
                      Respuesta en menos de 24h
                    </p>
                    <button type="submit"
                            className="btn-primary inline-flex items-center justify-center gap-3 bg-ink text-ivory px-8 py-[18px] text-[12px] tracking-[0.22em] uppercase">
                      Enviar mensaje
                      <svg width="16" height="10" viewBox="0 0 16 10" fill="none" aria-hidden="true">
                        <path d="M1 5h13M10 1l4 4-4 4" stroke="currentColor" strokeWidth="1.2" strokeLinecap="square"/>
                      </svg>
                    </button>
                  </div>
                </form>
              )}
            </div>

            {/* ---- Info (right) ---- */}
            <aside className="col-span-12 lg:col-span-5 lg:pl-8 fade-up delay-2">
              <div className="border border-line/80 rounded-2xl p-8 md:p-10 bg-cream/40">
                <p className="text-[11px] tracking-widest-2 uppercase text-mute">Atención 100 % personalizada</p>
                <p className="mt-4 font-serif-display text-ink text-[24px] md:text-[28px] leading-[1.25] tracking-[-0.01em]">
                  Cada cita comienza con una valoración íntima donde escuchamos, observamos y diseñamos un plan a tu medida.
                </p>
              </div>

              <dl className="mt-10 grid grid-cols-1 gap-8">
                <div className="border-t border-line/80 pt-6">
                  <dt className="text-[10px] tracking-widest-2 uppercase text-mute mb-3">Sede Castellón</dt>
                  <dd className="font-serif-display text-ink text-[24px] leading-[1.2]">Atelier Castellón</dd>
                  <dd className="mt-1 text-[14.5px] leading-[1.65] text-charcoal">
                    Av. del Mar, 00<br />12003 · Castellón de la Plana
                  </dd>
                  <dd className="mt-3 text-[12px] tracking-widest-2 uppercase">
                    <a href="tel:+34642606395" className="text-ink nav-link">+34 642 606 395</a>
                  </dd>
                </div>

                <div className="border-t border-line/80 pt-6">
                  <dt className="text-[10px] tracking-widest-2 uppercase text-mute mb-3">Sede Valencia</dt>
                  <dd className="font-serif-display text-ink text-[24px] leading-[1.2]">Atelier Valencia</dd>
                  <dd className="mt-1 text-[14.5px] leading-[1.65] text-charcoal">
                    C/ Colón, 00<br />46004 · Valencia
                  </dd>
                  <dd className="mt-3 text-[12px] tracking-widest-2 uppercase">
                    <a href="tel:+34642606395" className="text-ink nav-link">+34 642 606 395</a>
                  </dd>
                </div>

                <div className="grid grid-cols-2 gap-6 border-t border-line/80 pt-6">
                  <div>
                    <dt className="text-[10px] tracking-widest-2 uppercase text-mute mb-3">Horario</dt>
                    <dd className="text-[14.5px] leading-[1.65] text-charcoal">L – V<br />Por cita previa</dd>
                  </div>
                  <div>
                    <dt className="text-[10px] tracking-widest-2 uppercase text-mute mb-3">Email</dt>
                    <dd className="text-[14.5px] leading-[1.65]">
                      <a href="mailto:hola@vibelami.com" className="text-ink nav-link break-all">hola@vibelami.com</a>
                    </dd>
                  </div>
                </div>

                <div className="border-t border-line/80 pt-6">
                  <dt className="text-[10px] tracking-widest-2 uppercase text-mute mb-3">Síguenos</dt>
                  <dd className="text-[14.5px] leading-[1.65]">
                    <a href="https://instagram.com/vibelami" target="_blank" rel="noopener noreferrer"
                       className="text-ink nav-link">
                      Instagram · @vibelami
                    </a>
                  </dd>
                </div>
              </dl>
            </aside>
          </div>
        </div>
      </section>
    </>
  );
}




Object.assign(window, { PageInicio, PageServicios, PageAcademia, PageContacto, Faq, FaqItem });