// Tiny IO-based reveal — no framer-motion runtime dependency
const Reveal = ({ children, delay = 0, className = '', y = 24 }) => {
  const ref = React.useRef(null);
  const [shown, setShown] = React.useState(false);
  React.useEffect(() => {
    if (!ref.current) return;
    const el = ref.current;
    const io = new IntersectionObserver(entries => {
      entries.forEach(e => {
        if (e.isIntersecting) { setShown(true); io.disconnect(); }
      });
    }, { rootMargin: '0px 0px -60px 0px', threshold: 0.05 });
    io.observe(el);
    return () => io.disconnect();
  }, []);
  const style = {
    transform: shown ? 'translateY(0)' : `translateY(${y}px)`,
    opacity: shown ? 1 : 0,
    transition: `opacity 700ms cubic-bezier(.2,.7,.2,1) ${delay}s, transform 700ms cubic-bezier(.2,.7,.2,1) ${delay}s`,
    willChange: 'transform, opacity'
  };
  return <div ref={ref} className={className} style={style}>{children}</div>;
};

const SectionLabel = ({ children, num }) => (
  <div className="flex items-center gap-3 text-[11px] uppercase tracking-[0.22em] text-white/55">
    {num && <span className="font-mono text-coral-400">{num}</span>}
    <span className="rule-coral w-8"></span>
    <span>{children}</span>
  </div>
);

/* ───────────────────── NAV ───────────────────── */

const Nav = () => {
  const [scrolled, setScrolled] = React.useState(false);
  const [open, setOpen] = React.useState(false);
  React.useEffect(() => {
    const on = () => setScrolled(window.scrollY > 20);
    window.addEventListener('scroll', on); on();
    return () => window.removeEventListener('scroll', on);
  }, []);
  return (
    <header className={`fixed top-0 inset-x-0 z-50 transition-all duration-500 ${scrolled ? 'py-2' : 'py-4'}`}>
      <div className="mx-auto max-w-7xl px-5 lg:px-8">
        <div className={`rounded-full flex items-center justify-between px-3 lg:px-4 transition-all duration-500 ${scrolled ? 'glass-strong py-1.5' : 'glass py-2'}`}>
          <a href="#" className="flex items-center gap-2.5 pl-2">
            <Logo size={24}/>
            <span className="text-[15px] font-medium tracking-tight">HotelApps</span>
          </a>
          <nav className="hidden md:flex items-center gap-1 text-[13px] text-white/65">
            {[['Plataforma','plataforma'],['Módulos','modulos'],['Precios','precios'],['Clientes','clientes'],['Recursos','recursos']].map(([l,h]) => (
              <a key={l} href={'#'+h} className="px-3 py-1.5 rounded-full hover:text-white hover:bg-white/5 transition-colors">{l}</a>
            ))}
          </nav>
          <div className="flex items-center gap-2">
            <a href="https://app.hotelapps.es/login" className="hidden md:inline text-[13px] text-white/70 hover:text-white px-3 py-1.5">Iniciar sesión</a>
            <a href="https://app.hotelapps.es/login" className="btn-coral px-3.5 py-1.5 rounded-full text-[13px] font-medium inline-flex items-center gap-1.5">
              Solicitar demo <IArrow size={13}/>
            </a>
            <button onClick={() => setOpen(o => !o)} className="md:hidden p-1.5 text-white/70">
              {open ? <IClose/> : <IMenu/>}
            </button>
          </div>
        </div>
        {open && (
          <div className="md:hidden mt-2 glass rounded-2xl p-3 flex flex-col gap-1">
            {[['Plataforma','#'],['Módulos','#modules'],['Precios','#pricing'],['Clientes','#'],['Recursos','#'],['Iniciar sesión','https://app.hotelapps.es/login']].map(([l, h]) => (
              <a key={l} href={h} className="px-3 py-2 text-white/75 text-sm">{l}</a>
            ))}
          </div>
        )}
      </div>
    </header>
  );
};

/* ───────────────────── HERO ───────────────────── */

const Hero = () => {
  return (
    <section className="relative pt-32 lg:pt-40 pb-24 overflow-hidden">
      {/* Background */}
      <div className="absolute inset-0 glow-coral pointer-events-none"></div>
      <div className="absolute inset-0 glow-cool pointer-events-none"></div>
      <div className="absolute inset-x-0 top-32 h-[600px] grid-overlay pointer-events-none opacity-50"></div>

      <div className="relative mx-auto max-w-7xl px-5 lg:px-8">
        <Reveal className="flex justify-center">
          <div className="chip inline-flex items-center gap-2 px-3 py-1 rounded-full text-[12px]">
            <span className="w-1.5 h-1.5 rounded-full bg-coral-400"></span>
            <span className="text-white/85">Hecho para hoteles independientes y boutique</span>
            <span className="mx-1 text-white/20">·</span>
            <span className="text-white/55">v3.4 disponible</span>
          </div>
        </Reveal>

        <Reveal delay={0.05}>
          <h1 className="mt-6 text-center mx-auto max-w-5xl text-[44px] leading-[1.05] sm:text-[64px] sm:leading-[1.02] lg:text-[84px] lg:leading-[0.98] font-medium tracking-tight">
            <span className="text-gradient-white">Gestiona tu hotel</span><br/>
            <span className="font-serif italic text-gradient-coral">sin papel, sin WhatsApp,</span><br/>
            <span className="text-gradient-white">sin caos.</span>
          </h1>
        </Reveal>

        <Reveal delay={0.12}>
          <p className="mt-7 mx-auto max-w-2xl text-center text-[16px] lg:text-[18px] text-white/65 leading-relaxed">
            Habitaciones, limpieza, tareas, incidencias y comunicación del equipo en una sola plataforma —
            para que cada turno empiece con claridad en lugar de un grupo de WhatsApp.
          </p>
        </Reveal>

        <Reveal delay={0.18}>
          <div className="mt-9 flex flex-col sm:flex-row items-center justify-center gap-3">
            <a href="https://app.hotelapps.es/login" className="btn-coral px-5 py-3 rounded-full text-[14px] font-medium inline-flex items-center gap-2">
              Solicitar demo (20 min) <IArrow size={15}/>
            </a>
            <a href="https://app.hotelapps.es/login" className="btn-ghost px-5 py-3 rounded-full text-[14px] font-medium inline-flex items-center gap-2">
              Prueba 14 días gratis
            </a>
            <div className="hidden lg:flex items-center gap-2 ml-3 text-[12px] text-white/45">
              <ICheck size={13} className="text-coral-400"/>
              <span>Sin tarjeta · Listo en menos de 1 hora</span>
            </div>
          </div>
        </Reveal>

        {/* Hero showpiece — scaled with zoom on mobile (mockup-zoom in <style>) */}
        <Reveal delay={0.25}>
          <div className="relative mt-16 lg:mt-20 mx-auto max-w-6xl mockup-zoom">
            {/* Halo behind laptop */}
            <div className="absolute -inset-x-10 -inset-y-10 -z-10"
                 style={{ background: 'radial-gradient(50% 50% at 50% 40%, rgba(226,117,89,0.20) 0%, rgba(0,0,0,0) 60%)' }}></div>

            <LaptopFrame>
              <DashboardApp/>
            </LaptopFrame>

            {/* Floating phone over the right edge */}
            <div className="absolute -right-2 lg:-right-12 -bottom-10 hidden md:block float-slow" style={{ transform: 'scale(0.55)', transformOrigin: 'bottom right' }}>
              <PhoneFrame><PhoneApp/></PhoneFrame>
            </div>

            {/* Floating badges */}
            <div className="absolute -top-6 -left-2 lg:-left-10 float-mid">
              <FloatingBadge tone="coral" icon={<IBroom size={14}/>} title="+42 habitaciones limpias hoy" sub="14% por encima del objetivo"/>
            </div>
            <div className="absolute top-1/3 -right-2 lg:-right-8 float-fast hidden lg:block">
              <FloatingBadge tone="cool" icon={<IClipboard size={14}/>} title="18 tareas pendientes" sub="6 de alta prioridad"/>
            </div>
            <div className="absolute -bottom-8 left-6 lg:left-20 float-slow">
              <FloatingBadge tone="green" icon={<ICheck size={14}/>} title="98% completado" sub="Score operativo · esta semana"/>
            </div>
          </div>
        </Reveal>

        {/* Trust strip */}
        <div className="mt-28 lg:mt-36">
          <div className="text-center text-[11px] uppercase tracking-[0.22em] text-white/35 mb-6">
            Operando en más de 240 hoteles independientes y boutique en España y Europa
          </div>
          <Marquee/>
        </div>
      </div>
    </section>
  );
};

const FloatingBadge = ({ icon, title, sub, tone = 'gold' }) => {
  const toneMap = {
    coral: { dot: '#e27559', glow: 'rgba(226,117,89,0.35)' },
    cool:  { dot: '#7aa0e6', glow: 'rgba(122,160,230,0.30)' },
    green: { dot: '#4ec97a', glow: 'rgba(78,201,122,0.30)' },
  };
  const t = toneMap[tone];
  return (
    <div className="glass-strong rounded-xl px-3.5 py-2.5 flex items-center gap-3 ring-soft"
         style={{ boxShadow: `0 0 0 1px rgba(255,255,255,0.08), 0 20px 40px -10px ${t.glow}` }}>
      <div className="w-8 h-8 rounded-lg grid place-items-center text-white"
           style={{ background: `linear-gradient(180deg, ${t.dot}40, ${t.dot}15)`, border: `1px solid ${t.dot}55` }}>
        {icon}
      </div>
      <div>
        <div className="text-[12.5px] font-medium text-white">{title}</div>
        <div className="text-[10.5px] text-white/55 mt-px">{sub}</div>
      </div>
    </div>
  );
};

const Marquee = () => {
  const hotels = [
    'BELVEDERE', 'CASA DEL LAGO', 'HÔTEL ÉCLAT', 'MARÉ BOUTIQUE',
    'SOLARIS RESORT', 'PALAZZO 47', 'NORTHCLIFF', 'VILLA SERENA',
    'OAKWOOD ESTATE', 'AMARA HOUSE', 'COSTA AZUL', 'KENSINGTON ROW'
  ];
  return (
    <div className="relative overflow-hidden" style={{ maskImage: 'linear-gradient(90deg, transparent, black 10%, black 90%, transparent)'}}>
      <div className="marquee-track flex gap-14 whitespace-nowrap font-serif text-white/45" style={{ width: 'max-content' }}>
        {[...hotels, ...hotels].map((h, i) => (
          <span key={i} className="text-[22px] tracking-[0.18em] italic">{h}</span>
        ))}
      </div>
    </div>
  );
};

/* ───────────────────── PROBLEM ───────────────────── */

const Problem = () => {
  const cards = [
    { i: IClipboard, t: 'Checklists en papel', d: 'Perdidas, arrugadas, fotografiadas mil veces y nunca archivadas.' },
    { i: IChat,      t: 'Grupos de WhatsApp', d: 'Mensajes críticos enterrados entre cumpleaños y memes.' },
    { i: IUsers,     t: 'Asignación manual',  d: 'Las supervisoras pierden la mañana copiando Excel a mano.' },
    { i: IChart,     t: 'Sin visibilidad',    d: 'Te enteras de lo que falló cuando el huésped escribe la reseña.' },
    { i: IBell,      t: 'Incidencias perdidas',d: 'Reportadas en el cambio de turno, olvidadas antes de comer.' },
    { i: IBolt,      t: 'Equipos desconectados',d: 'Recepción, limpieza y mantenimiento no comparten una sola pantalla.' },
  ];
  return (
    <section className="relative py-28 lg:py-36">
      <div className="absolute inset-0 pointer-events-none"
           style={{ background: 'radial-gradient(50% 60% at 50% 0%, rgba(230,120,90,0.06), transparent 70%)'}}></div>
      <div className="relative mx-auto max-w-7xl px-5 lg:px-8">
        <Reveal><SectionLabel num="01">El día a día actual</SectionLabel></Reveal>
        <Reveal delay={0.05}>
          <h2 className="mt-5 max-w-3xl text-[40px] lg:text-[64px] leading-[1.02] font-medium tracking-tight">
            <span className="text-gradient-white">Los hoteles aún funcionan con </span>
            <span className="font-serif italic text-gradient-coral">WhatsApp</span>
            <span className="text-gradient-white"> y papel.</span>
          </h2>
        </Reveal>
        <Reveal delay={0.1}>
          <p className="mt-5 max-w-xl text-white/55 text-[15px] leading-relaxed">
            Cada hotel que auditamos tenía seis herramientas para un mismo trabajo — y una sola persona aguantándolo todo en silencio.
          </p>
        </Reveal>

        <div className="mt-14 grid grid-cols-1 sm:grid-cols-2 lg:grid-cols-3 gap-3">
          {cards.map(({ i: I, t, d }, idx) => (
            <Reveal key={t} delay={idx * 0.04}>
              <div className="rounded-2xl p-6 h-full hairline lift" style={{ background: 'linear-gradient(180deg, rgba(255,255,255,0.025), rgba(255,255,255,0.005))'}}>
                <div className="w-10 h-10 rounded-xl grid place-items-center mb-5"
                     style={{ background: 'rgba(230,120,90,0.10)', border: '1px solid rgba(230,120,90,0.25)' }}>
                  <I size={18} className="text-[#e67a5a]"/>
                </div>
                <div className="text-[18px] font-medium text-white">{t}</div>
                <div className="text-[13.5px] text-white/55 mt-2 leading-relaxed">{d}</div>
                <div className="mt-5 pt-4 hairline-t flex items-center justify-between text-[11px] text-white/35">
                  <span className="font-mono">#{String(idx+1).padStart(2,'0')}</span>
                  <span>→ HotelApps lo resuelve</span>
                </div>
              </div>
            </Reveal>
          ))}
        </div>

        <Reveal delay={0.2}>
          <div className="mt-20 relative">
            <div className="rule-coral w-full"></div>
            <div className="text-center -mt-3">
              <span className="inline-flex items-center gap-3 px-5 py-2 rounded-full glass-strong">
                <Logo size={18}/>
                <span className="text-[14px] text-white/80">HotelApps <span className="text-white/45">centraliza las operaciones del hotel.</span></span>
                <IArrow size={14} className="text-coral-400"/>
              </span>
            </div>
          </div>
        </Reveal>
      </div>
    </section>
  );
};

/* ───────────────────── MODULES ───────────────────── */

const Modules = () => {
  const mods = [
    {
      i: IBroom, t: 'Limpieza', tag: 'Plantas · Equipos',
      d: 'Asignación automática de habitaciones por planta, perfil o estancia-vs-salida. Supervisión desde cualquier dispositivo.',
      bullets: ['Asignación inteligente', 'Planificación de limpieza', 'Checklists digitales', 'Control de calidad'],
      preview: <PreviewHousekeeping/>
    },
    {
      i: IWrench, t: 'Tareas e Incidencias', tag: 'Mantenimiento',
      d: 'Una ducha que gotea o una bombilla fundida se convierte en un ticket trazable, no en un recado verbal olvidado.',
      bullets: ['Tickets de mantenimiento', 'Reparaciones y seguimiento', 'Alertas por prioridad', 'Foto de evidencia'],
      preview: <PreviewIncident/>
    },
    {
      i: IChat, t: 'Comunicación', tag: 'Interna',
      d: 'Sustituye los grupos de WhatsApp por canales por planta, equipo y tema. Buscables. Auditables.',
      bullets: ['Chat interno', 'Notificaciones push', 'Anuncios fijados', 'Notas de cambio de turno'],
      preview: <PreviewChat/>
    },
    {
      i: ICoffee, t: 'Desayunos', tag: 'F&B',
      d: 'Marca asistencia con dos toques. Previsión de cubiertos para mañana. Deja de tirar huevos los jueves.',
      bullets: ['Control de asistencia', 'Preferencias del huésped', 'Previsión de cubiertos', 'Resumen diario'],
      preview: <PreviewBreakfast/>
    },
    {
      i: IChart, t: 'Analíticas', tag: 'KPIs',
      d: 'Tiempo de limpieza por habitación, respuesta por incidencia, ocupación vs. plantilla. Decisiones con datos, no con intuición.',
      bullets: ['KPIs operativos', 'Rendimiento del equipo', 'Tiempo por tarea', 'Informes a medida'],
      preview: <PreviewAnalytics/>
    },
    {
      i: ICalendar, t: 'Horarios', tag: 'Turnos',
      d: 'Monta el mes siguiente en una hora. El equipo ve sus turnos en el móvil. Los cambios pasan por una sola aprobación.',
      bullets: ['Planificación de turnos', 'Cuadrantes móviles', 'Solicitudes de vacaciones', 'Detección de huecos'],
      preview: <PreviewSchedule/>
    },
  ];
  return (
    <section id="modules" className="relative py-28 lg:py-36">
      <div className="absolute inset-0 pointer-events-none"
           style={{ background: 'radial-gradient(60% 60% at 50% 0%, rgba(226,117,89,0.07), transparent 70%)'}}></div>
      <div className="relative mx-auto max-w-7xl px-5 lg:px-8">
        <div className="flex flex-col lg:flex-row lg:items-end lg:justify-between gap-6">
          <div>
            <Reveal><SectionLabel num="02">Una plataforma · Seis módulos</SectionLabel></Reveal>
            <Reveal delay={0.05}>
              <h2 className="mt-5 max-w-3xl text-[40px] lg:text-[64px] leading-[1.02] font-medium tracking-tight">
                <span className="text-gradient-white">Todo lo que tu equipo </span>
                <span className="font-serif italic text-gradient-coral">necesita</span>
                <span className="text-gradient-white">, en un solo lugar.</span>
              </h2>
            </Reveal>
          </div>
          <Reveal delay={0.08}>
            <p className="text-white/55 text-[14px] max-w-sm leading-relaxed">
              Cada módulo funciona por sí solo, pero comparten habitaciones, huéspedes y plantilla — sin volver a introducir nada.
            </p>
          </Reveal>
        </div>

        <div className="mt-14 grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-3">
          {mods.map((m, i) => (
            <Reveal key={m.t} delay={i * 0.04}>
              <ModuleCard {...m}/>
            </Reveal>
          ))}
        </div>
      </div>
    </section>
  );
};

const ModuleCard = ({ i: I, t, tag, d, bullets, preview }) => (
  <div className="rounded-2xl overflow-hidden hairline lift group h-full flex flex-col"
       style={{ background: 'linear-gradient(180deg, rgba(255,255,255,0.03), rgba(255,255,255,0.005))' }}>
    {/* Preview area */}
    <div className="aspect-[16/9] relative overflow-hidden" style={{ background: 'linear-gradient(180deg, #14131a 0%, #0c0b10 100%)', borderBottom: '1px solid rgba(255,255,255,0.06)'}}>
      <div className="absolute inset-0 grid-overlay opacity-40"></div>
      <div className="absolute inset-0 p-3 flex items-stretch">{preview}</div>
      <div className="absolute top-2.5 right-2.5 px-2 py-0.5 rounded-full text-[9.5px] tracking-[0.16em] uppercase text-coral-300" style={{ background: 'rgba(226,117,89,0.10)', border: '1px solid rgba(226,117,89,0.25)'}}>{tag}</div>
    </div>
    <div className="p-5">
      <div className="flex items-center gap-2.5">
        <div className="w-9 h-9 rounded-lg grid place-items-center"
             style={{ background: 'linear-gradient(180deg, rgba(226,117,89,0.20), rgba(226,117,89,0.05))', border: '1px solid rgba(226,117,89,0.30)'}}>
          <I size={16} className="text-coral-300"/>
        </div>
        <h3 className="text-[19px] font-medium">{t}</h3>
        <IArrow size={14} className="ml-auto text-white/30 group-hover:text-coral-300 group-hover:translate-x-0.5 transition-all"/>
      </div>
      <p className="mt-3 text-[13.5px] text-white/55 leading-relaxed">{d}</p>
      <ul className="mt-4 pt-4 hairline-t grid grid-cols-2 gap-y-1.5 gap-x-3 text-[12px] text-white/65">
        {bullets.map(b => (
          <li key={b} className="flex items-center gap-1.5"><ICheck size={11} className="text-coral-400 shrink-0"/><span>{b}</span></li>
        ))}
      </ul>
    </div>
  </div>
);

/* Module previews — tiny diorama for each card */
function PreviewHousekeeping() {
  return (
    <div className="w-full self-end grid grid-cols-6 gap-1">
      {['clean','dirty','inprog','clean','inspect','clean','clean','out','dirty','clean','inprog','clean'].map((s, i) => (
        <RoomTile key={i} n={101+i} status={s}/>
      ))}
    </div>
  );
}
function PreviewIncident() {
  return (
    <div className="w-full self-stretch flex flex-col gap-1.5">
      {[
        ['ALTA','A/A averiado · Hab. 412','Sven · 12m','#e67a5a'],
        ['MED','Grifo gotea · Hab. 209','Anna · 28m','#e27559'],
        ['BAJA','Bombilla · pasillo 3','Marco · 1h','#7aa0e6'],
      ].map(([p, t, m, c], i) => (
        <div key={i} className="rounded-md px-2 py-1.5 flex items-center gap-2 hairline" style={{ background: 'rgba(255,255,255,0.025)'}}>
          <span className="text-[8.5px] font-mono px-1 py-0.5 rounded" style={{ color: c, border: `1px solid ${c}40`, background: `${c}10` }}>{p}</span>
          <div className="min-w-0 flex-1">
            <div className="text-[10.5px] text-white/85 truncate">{t}</div>
            <div className="text-[9px] text-white/45 truncate">{m}</div>
          </div>
          <IWrench size={10} className="text-white/40"/>
        </div>
      ))}
    </div>
  );
}
function PreviewChat() {
  return (
    <div className="w-full self-stretch flex flex-col gap-1 text-[10px]">
      <div className="text-[9px] uppercase tracking-[0.16em] text-white/40 mb-0.5"># operaciones</div>
      {[
        ['RP','Llegada VIP a las 16:30 🌸','#2a1f3a','#d0a8e6'],
        ['LM','506 lista en 35 min ✓','#1f3a2a','#a8e6c5'],
        ['SR','412 A/A reparado. Cerrado.','#3a2620','#f4c7b5'],
      ].map(([who, msg, bg, fg], i) => (
        <div key={i} className="flex items-start gap-1.5">
          <div className="w-4 h-4 rounded-full grid place-items-center text-[7px] font-medium shrink-0" style={{ background: bg, color: fg }}>{who}</div>
          <div className="rounded-md px-2 py-1 text-white/80 hairline" style={{ background: 'rgba(255,255,255,0.025)'}}>{msg}</div>
        </div>
      ))}
    </div>
  );
}
function PreviewBreakfast() {
  return (
    <div className="w-full self-stretch flex flex-col">
      <div className="flex items-center justify-between text-[10px] text-white/55">
        <span>Cubiertos hoy</span>
        <span className="font-mono text-white/80">68 / 92</span>
      </div>
      <div className="mt-1.5 h-2 rounded-full overflow-hidden" style={{ background: 'rgba(255,255,255,0.06)'}}>
        <div className="h-full" style={{ width: '74%', background: 'linear-gradient(90deg, #e27559, #f4c7b5)' }}></div>
      </div>
      <div className="mt-3 grid grid-cols-7 gap-1 text-[8.5px]">
        {['M','T','W','T','F','S','S'].map((d, i) => (
          <div key={i} className="flex flex-col items-center gap-0.5">
            <div className="w-full rounded-sm" style={{ height: [10,14,12,18,22,28,24][i], background: i === 4 ? '#e27559' : 'rgba(255,255,255,0.10)'}}></div>
            <span className="text-white/40">{d}</span>
          </div>
        ))}
      </div>
      <div className="mt-2 text-[9.5px] text-white/50">Previsión vie: <span className="text-coral-300">+18 cubiertos</span></div>
    </div>
  );
}
function PreviewAnalytics() {
  return (
    <div className="w-full self-stretch flex items-end gap-2">
      <div className="flex-1">
        <div className="text-[9.5px] text-white/45">Tiempo medio limpieza</div>
        <div className="text-[18px] font-medium">21<span className="text-[11px] text-white/45">m</span></div>
        <Sparkline data={[28,26,27,24,25,23,22,23,21,22,21,20]} color="#e27559" width={120} height={28}/>
      </div>
      <div className="flex-1">
        <div className="text-[9.5px] text-white/45">Tiempo de respuesta</div>
        <div className="text-[18px] font-medium">14<span className="text-[11px] text-white/45">m</span></div>
        <Sparkline data={[26,22,20,18,17,15,14,13,14,14,13,14]} color="#7aa0e6" width={120} height={28}/>
      </div>
    </div>
  );
}
function PreviewSchedule() {
  const days = ['L','M','X','J','V','S','D'];
  const grid = [
    [1,1,1,0,1,1,0],
    [1,0,1,1,1,1,1],
    [1,1,1,1,0,1,1],
    [0,1,1,1,1,0,1],
  ];
  const initials = ['LM','JK','RP','SR'];
  return (
    <div className="w-full self-stretch">
      <div className="grid grid-cols-[auto_repeat(7,1fr)] gap-1 text-[9px] text-white/45">
        <span></span>
        {days.map((d,i) => <span key={i} className="text-center">{d}</span>)}
        {grid.map((row, r) => (
          <React.Fragment key={r}>
            <span className="text-white/55">{initials[r]}</span>
            {row.map((c, i) => (
              <div key={i} className="aspect-square rounded-[3px]" style={{
                background: c ? (i === 2 ? 'rgba(226,117,89,0.6)' : 'rgba(226,117,89,0.20)') : 'rgba(255,255,255,0.04)',
                border: '1px solid rgba(255,255,255,0.05)'
              }}></div>
            ))}
          </React.Fragment>
        ))}
      </div>
    </div>
  );
}

/* ───────────────────── SCREENSHOTS ───────────────────── */

const Screens = () => {
  return (
    <section className="relative py-28 lg:py-36">
      <div className="mx-auto max-w-7xl px-5 lg:px-8">
        <div className="flex items-end justify-between gap-6 mb-14">
          <div>
            <Reveal><SectionLabel num="03">En el día a día</SectionLabel></Reveal>
            <Reveal delay={0.05}>
              <h2 className="mt-5 max-w-2xl text-[40px] lg:text-[60px] leading-[1.02] font-medium tracking-tight">
                <span className="text-gradient-white">Diseñado para </span>
                <span className="font-serif italic text-gradient-coral">cada pantalla</span>
                <span className="text-gradient-white"> del hotel.</span>
              </h2>
            </Reveal>
          </div>
        </div>

        <Reveal>
          <div className="relative rounded-3xl p-6 lg:p-12 overflow-hidden hairline"
               style={{ background: 'radial-gradient(80% 90% at 50% 0%, rgba(226,117,89,0.10), transparent 60%), linear-gradient(180deg, #0e0d12, #0a090d)'}}>
            <div className="absolute inset-0 grid-overlay opacity-40 pointer-events-none"></div>

            <div className="relative grid grid-cols-12 gap-6 lg:gap-10 items-center">
              <div className="col-span-12 lg:col-span-8">
                <div className="flex items-center gap-2 text-[11px] text-white/50">
                  <ILaptop size={13}/><span>Escritorio</span><span className="font-mono text-white/30">/panel</span>
                </div>
                <div className="mt-3 mockup-zoom">
                  <LaptopFrame><DashboardApp/></LaptopFrame>
                </div>
              </div>
              <div className="col-span-12 lg:col-span-4 flex flex-col gap-6 items-center lg:items-start">
                <div className="w-full">
                  <div className="flex items-center gap-2 text-[11px] text-white/50">
                    <ITablet size={13}/><span>Tablet</span><span className="font-mono text-white/30">/limpieza</span>
                  </div>
                  <div className="mt-3 mockup-zoom"><TabletFrame><TabletApp/></TabletFrame></div>
                </div>
              </div>
            </div>

            <div className="relative mt-10 grid grid-cols-12 gap-6 items-end">
              <div className="col-span-12 lg:col-span-5 lg:col-start-1">
                <div className="flex items-center gap-2 text-[11px] text-white/50 mb-3">
                  <IPhone size={13}/><span>Móvil</span><span className="font-mono text-white/30">/notificaciones</span>
                </div>
                <div className="flex items-end gap-4">
                  <PhoneFrame><PhoneApp/></PhoneFrame>
                  <div className="hidden md:block max-w-xs">
                    <div className="text-[14px] text-white/80 leading-relaxed">
                      Las camareras ven solo lo necesario: las habitaciones de hoy, alertas prioritarias y un toque para marcar como "hecho".
                    </div>
                    <div className="mt-4 flex flex-col gap-2 text-[12px] text-white/55">
                      <span className="flex items-center gap-2"><ICheck size={12} className="text-coral-400"/>Funciona sin conexión dentro de la habitación</span>
                      <span className="flex items-center gap-2"><ICheck size={12} className="text-coral-400"/>Disponible en 13 idiomas</span>
                      <span className="flex items-center gap-2"><ICheck size={12} className="text-coral-400"/>Sin formación previa</span>
                    </div>
                  </div>
                </div>
              </div>

              <div className="col-span-12 lg:col-span-7 lg:col-start-6 grid grid-cols-2 gap-4">
                <FloatingMetric label="Tiempo medio de limpieza" value="21m" delta="-32%" tone="green" data={[28,26,27,24,25,23,22,23,21,22,21,20]}/>
                <FloatingMetric label="Incidencias resueltas" value="2.4×" delta="más rápido" tone="coral" data={[2,3,3,4,5,5,6,7,7,8,9,9]}/>
                <FloatingMetric label="Coordinación manual" value="-40%" delta="vs. trimestre anterior" tone="cool" data={[8,7,7,6,6,5,5,4,4,3,3,3]}/>
                <FloatingMetric label="Flujos digitales" value="100%" delta="sin papel" tone="coral" data={[20,30,40,50,60,70,75,82,88,93,97,100]}/>
              </div>
            </div>
          </div>
        </Reveal>
      </div>
    </section>
  );
};

const FloatingMetric = ({ label, value, delta, tone = 'gold', data }) => {
  const map = {
    coral: '#e27559', cool: '#7aa0e6', green: '#4ec97a'
  };
  return (
    <div className="glass-strong rounded-xl p-4 flex items-center gap-4">
      <div className="flex-1">
        <div className="text-[10.5px] uppercase tracking-[0.14em] text-white/45">{label}</div>
        <div className="flex items-baseline gap-2 mt-1">
          <div className="text-[26px] font-medium text-white">{value}</div>
          <div className="text-[11px]" style={{ color: map[tone] }}>{delta}</div>
        </div>
      </div>
      <Sparkline data={data} color={map[tone]} width={80} height={36}/>
    </div>
  );
};

/* ───────────────────── BENEFITS ───────────────────── */

const Benefits = () => {
  return (
    <section className="relative py-28 lg:py-36">
      <div className="mx-auto max-w-7xl px-5 lg:px-8">
        <Reveal><SectionLabel num="04">Por qué cambian los equipos</SectionLabel></Reveal>
        <Reveal delay={0.05}>
          <h2 className="mt-5 max-w-3xl text-[40px] lg:text-[60px] leading-[1.02] font-medium tracking-tight">
            <span className="text-gradient-white">Menos coordinación. </span>
            <span className="font-serif italic text-gradient-coral">Más hospitalidad.</span>
          </h2>
        </Reveal>

        <div className="mt-14 grid grid-cols-1 lg:grid-cols-3 gap-3">
          {[
            { i: IBolt,   t: 'Reduce el tiempo operativo', d: 'Asigna habitaciones, enruta incidencias y resume el día — todo automático. Las supervisoras recuperan la mañana.', stat: '40%', label: 'menos coordinación manual' },
            { i: IUsers,  t: 'Mejora la coordinación', d: 'Un mapa de habitaciones compartido, una lista de tareas compartida, un chat compartido. Recepción y limpieza por fin ven el mismo hotel.', stat: '2×', label: 'más rápido en incidencias' },
            { i: IShield, t: 'Visibilidad total', d: 'Cada acción con su hora. Cada incidencia trazada. La propiedad ve la salud operativa sin una reunión diaria.', stat: '100%', label: 'flujos digitales y auditables' },
          ].map(({ i: I, t, d, stat, label }, idx) => (
            <Reveal key={t} delay={idx * 0.05}>
              <div className="rounded-2xl p-7 hairline lift h-full flex flex-col"
                   style={{ background: 'linear-gradient(180deg, rgba(255,255,255,0.03), rgba(255,255,255,0.005))' }}>
                <div className="w-11 h-11 rounded-xl grid place-items-center mb-5"
                     style={{ background: 'linear-gradient(180deg, rgba(226,117,89,0.18), rgba(226,117,89,0.04))', border: '1px solid rgba(226,117,89,0.30)'}}>
                  <I size={20} className="text-coral-300"/>
                </div>
                <div className="text-[20px] font-medium text-white">{t}</div>
                <p className="text-[14px] text-white/55 mt-3 leading-relaxed">{d}</p>
                <div className="mt-auto pt-7">
                  <div className="rule-coral mb-5"></div>
                  <div className="flex items-baseline gap-3">
                    <span className="text-[44px] font-serif italic text-gradient-coral leading-none">{stat}</span>
                    <span className="text-[12px] text-white/55 max-w-[140px]">{label}</span>
                  </div>
                </div>
              </div>
            </Reveal>
          ))}
        </div>
      </div>
    </section>
  );
};

/* ───────────────────── PRICING ───────────────────── */

const Pricing = () => {
  const [annual, setAnnual] = React.useState(true);
  const tiers = [
    {
      name: 'Starter', tag: 'Hasta 30 habitaciones',
      monthly: 79, annual: 63,
      d: 'Para hoteles boutique que quieren dejar atrás el papel y los grupos de WhatsApp.',
      f: ['Módulo de limpieza', 'Tareas e incidencias', 'Chat interno', 'App móvil para el equipo', '2 administradores', 'Soporte por email'],
      cta: 'Empezar prueba gratis', highlight: false
    },
    {
      name: 'Operations', tag: 'Hasta 90 habitaciones',
      monthly: 149, annual: 119,
      d: 'Nuestro plan más popular. Todo lo que un hotel independiente necesita para funcionar.',
      f: ['Todo lo de Starter', 'Módulo de desayunos y F&B', 'Horarios y turnos', 'Cuadros de mando', 'Administradores ilimitados', 'Alertas por WhatsApp y email', 'Soporte prioritario'],
      cta: 'Solicitar demo', highlight: true
    },
    {
      name: 'Enterprise', tag: 'Habitaciones ilimitadas',
      monthly: 249, annual: 199,
      d: 'Para grupos multi-hotel y resorts con flujos a medida.',
      f: ['Todo lo de Operations', 'Panel multi-propiedad', 'Checklists y flujos a medida', 'SSO y roles avanzados', 'API e integraciones', 'Customer Success dedicado', 'SLA 99,95% de uptime'],
      cta: 'Hablar con ventas', highlight: false
    }
  ];
  return (
    <section id="pricing" className="relative py-28 lg:py-36">
      <div className="mx-auto max-w-7xl px-5 lg:px-8">
        <div className="text-center">
          <Reveal className="flex justify-center"><SectionLabel num="05">Precios</SectionLabel></Reveal>
          <Reveal delay={0.05}>
            <h2 className="mt-5 mx-auto max-w-3xl text-[40px] lg:text-[60px] leading-[1.02] font-medium tracking-tight">
              <span className="text-gradient-white">Precio por hotel. </span>
              <span className="font-serif italic text-gradient-coral">No por dolor de cabeza.</span>
            </h2>
          </Reveal>
          <Reveal delay={0.1}>
            <div className="mt-9 inline-flex items-center gap-1 p-1 rounded-full glass">
              <button onClick={() => setAnnual(false)}
                className={`px-4 py-1.5 rounded-full text-[12.5px] transition-colors ${!annual ? 'bg-white/8 text-white' : 'text-white/55'}`}>Mensual</button>
              <button onClick={() => setAnnual(true)}
                className={`px-4 py-1.5 rounded-full text-[12.5px] transition-colors flex items-center gap-2 ${annual ? 'bg-white/8 text-white' : 'text-white/55'}`}>
                Anual <span className="text-[10px] px-1.5 py-0.5 rounded-full" style={{ background: 'rgba(226,117,89,0.18)', color: '#f4c7b5', border: '1px solid rgba(226,117,89,0.3)' }}>Ahorra 20%</span>
              </button>
            </div>
          </Reveal>
        </div>

        <div className="mt-14 grid grid-cols-1 lg:grid-cols-3 gap-3 lg:gap-4 items-stretch">
          {tiers.map((t, i) => (
            <Reveal key={t.name} delay={i * 0.06}>
              <PricingCard t={t} annual={annual}/>
            </Reveal>
          ))}
        </div>

        <Reveal delay={0.15}>
          <div className="mt-12 text-center text-[12.5px] text-white/45">
            Todos los planes incluyen usuarios ilimitados · Sin cuota de alta · Cancela cuando quieras
          </div>
        </Reveal>
      </div>
    </section>
  );
};

const PricingCard = ({ t, annual }) => {
  const price = annual ? t.annual : t.monthly;
  return (
    <div className={`relative rounded-2xl p-7 h-full flex flex-col ${t.highlight ? 'ring-1' : 'hairline'}`}
         style={{
           background: t.highlight
             ? 'linear-gradient(180deg, rgba(226,117,89,0.08) 0%, rgba(226,117,89,0.02) 50%, rgba(0,0,0,0) 100%), linear-gradient(180deg, #15131b, #0a090d)'
             : 'linear-gradient(180deg, rgba(255,255,255,0.025), rgba(255,255,255,0.005))',
           boxShadow: t.highlight ? '0 30px 70px -20px rgba(226,117,89,0.25), inset 0 0 0 1px rgba(226,117,89,0.35)' : undefined
         }}>
      {t.highlight && (
        <div className="absolute -top-3 left-1/2 -translate-x-1/2 px-3 py-1 rounded-full text-[10.5px] tracking-[0.18em] uppercase btn-coral">
          Más popular
        </div>
      )}
      <div className="flex items-center justify-between">
        <div>
          <div className="text-[20px] font-medium">{t.name}</div>
          <div className="text-[11.5px] text-white/45 mt-0.5">{t.tag}</div>
        </div>
        {t.highlight && <ISpark size={20} className="text-coral-300"/>}
      </div>
      <p className="mt-4 text-[13.5px] text-white/55 leading-relaxed min-h-[42px]">{t.d}</p>
      <div className="mt-7 flex items-baseline gap-1.5">
        <span className="text-[14px] text-white/55">€</span>
        <span className="text-[56px] leading-none font-medium tracking-tight">{price}</span>
        <span className="text-[12.5px] text-white/55">/mo</span>
      </div>
      <div className="text-[11px] text-white/40 mt-1">
        {annual ? `Facturado anualmente · €${price * 12}` : 'Facturado mensualmente'}
      </div>

      <a href="https://app.hotelapps.es/login" className={`mt-7 block text-center px-4 py-2.5 rounded-full text-[13px] font-medium transition-all
        ${t.highlight ? 'btn-coral' : 'btn-ghost'}`}>{t.cta}</a>

      <div className="rule-coral my-6"></div>

      <ul className="flex flex-col gap-2.5">
        {t.f.map((feature, i) => (
          <li key={i} className="flex items-start gap-2.5 text-[13px] text-white/75">
            <ICheck size={13} className={`mt-1 shrink-0 ${t.highlight ? 'text-coral-300' : 'text-white/45'}`}/>
            <span dangerouslySetInnerHTML={{ __html: feature }}/>
          </li>
        ))}
      </ul>
    </div>
  );
};

/* ───────────────────── TESTIMONIALS ───────────────────── */

const Testimonials = () => {
  const items = [
    {
      q: 'Mis supervisoras se pasaban la primera hora del turno revisando WhatsApp. Ahora entran, miran una pantalla y ya estamos limpiando habitaciones.',
      who: 'Sofia Marín',
      role: 'Directora de Operaciones · Hotel Belvedere, Madrid',
      meta: ['56 habitaciones', '14 meses con HotelApps']
    },
    {
      q: 'Reemplazamos cuatro checklists impresos y un archivador de mantenimiento por una sola app. Por fin el propietario se cree los números que le mandamos los lunes.',
      who: 'João Carvalho',
      role: 'Director General · Casa del Lago, Porto',
      meta: ['38 habitaciones', 'Sin papel desde 2024']
    },
    {
      q: 'Que las camareras puedan reportar una incidencia con una foto, en su idioma, ha transformado a nuestro equipo de mantenimiento.',
      who: 'Anneliese Roth',
      role: 'Hotel Manager · Hôtel Éclat, Lyon',
      meta: ['72 habitaciones', 'Tiempo de respuesta a la mitad']
    }
  ];
  return (
    <section className="relative py-28 lg:py-36">
      <div className="absolute inset-0 pointer-events-none"
           style={{ background: 'radial-gradient(60% 60% at 50% 0%, rgba(226,117,89,0.06), transparent 70%)' }}></div>
      <div className="relative mx-auto max-w-7xl px-5 lg:px-8">
        <div className="flex items-end justify-between gap-6 mb-14">
          <div>
            <Reveal><SectionLabel num="06">Hoteleros, hablando claro</SectionLabel></Reveal>
            <Reveal delay={0.05}>
              <h2 className="mt-5 max-w-3xl text-[40px] lg:text-[60px] leading-[1.02] font-medium tracking-tight">
                <span className="text-gradient-white">Lo aman los que </span>
                <span className="font-serif italic text-gradient-coral">están en el pase.</span>
              </h2>
            </Reveal>
          </div>
        </div>

        <div className="grid grid-cols-1 lg:grid-cols-3 gap-3">
          {items.map((t, i) => (
            <Reveal key={t.who} delay={i * 0.06}>
              <figure className="rounded-2xl p-7 h-full flex flex-col hairline"
                      style={{ background: 'linear-gradient(180deg, rgba(255,255,255,0.025), rgba(255,255,255,0.005))' }}>
                <div className="font-serif italic text-coral-300 text-[44px] leading-none -mb-3">"</div>
                <blockquote className="text-[16px] leading-relaxed text-white/85">
                  {t.q}
                </blockquote>
                <div className="rule-coral my-6 mt-auto"></div>
                <figcaption className="flex items-center gap-3">
                  <div className="w-10 h-10 rounded-full grid place-items-center text-[12px] font-medium"
                       style={{ background: '#2a1813', color: '#f4c7b5', border: '1px solid rgba(226,117,89,0.3)' }}>
                    {t.who.split(' ').map(x => x[0]).join('')}
                  </div>
                  <div>
                    <div className="text-[13.5px] font-medium text-white">{t.who}</div>
                    <div className="text-[11.5px] text-white/50">{t.role}</div>
                  </div>
                </figcaption>
                <div className="mt-4 flex gap-2 text-[10.5px] text-white/45">
                  {t.meta.map(m => <span key={m} className="chip px-2 py-0.5 rounded-full">{m}</span>)}
                </div>
              </figure>
            </Reveal>
          ))}
        </div>
      </div>
    </section>
  );
};

/* ───────────────────── FINAL CTA ───────────────────── */

const FinalCTA = () => (
  <section id="cta" className="relative py-28 lg:py-36">
    <div className="mx-auto max-w-7xl px-5 lg:px-8">
      <Reveal>
        <div className="relative overflow-hidden rounded-[28px] hairline"
             style={{ background: '#0a090d' }}>
          {/* "Luxury hotel" placeholder backdrop — composed, not a photo */}
          <div className="absolute inset-0 placeholder-stripe"></div>
          <div className="absolute inset-0"
               style={{
                 background:
                   'radial-gradient(60% 70% at 30% 30%, rgba(226,117,89,0.20), transparent 60%),' +
                   'radial-gradient(60% 80% at 80% 80%, rgba(40,30,20,0.6), transparent 60%),' +
                   'linear-gradient(180deg, rgba(8,7,10,0.4) 0%, rgba(8,7,10,0.85) 100%)'
               }}></div>
          <div className="absolute inset-0 grid-overlay opacity-25"></div>

          {/* Subtle architecture: arches */}
          <svg className="absolute inset-0 w-full h-full opacity-[0.07]" viewBox="0 0 1200 600" preserveAspectRatio="none">
            {[...Array(7)].map((_, i) => (
              <path key={i} d={`M ${100 + i*160} 600 L ${100 + i*160} 280 Q ${180 + i*160} 200, ${260 + i*160} 280 L ${260 + i*160} 600`} stroke="#e27559" strokeWidth="1.5" fill="none"/>
            ))}
          </svg>

          <div className="relative px-6 sm:px-12 lg:px-20 py-20 lg:py-28 text-center">
            <div className="flex justify-center mb-6">
              <span className="chip px-3 py-1 rounded-full text-[11px] tracking-[0.18em] uppercase text-coral-300">
                Hecho para hostelería
              </span>
            </div>
            <h2 className="mx-auto max-w-4xl text-[44px] sm:text-[64px] lg:text-[80px] leading-[1.0] font-medium tracking-tight">
              <span className="text-gradient-white">Unifica las operaciones de tu hotel </span>
              <span className="font-serif italic text-gradient-coral">en una sola plataforma.</span>
            </h2>
            <p className="mt-7 mx-auto max-w-xl text-[15.5px] text-white/65 leading-relaxed">
              La mayoría de hoteles arrancan en menos de una semana, sin desmontar lo que ya tienen. Trae tu PMS, tu equipo y tus checklists — del resto nos ocupamos nosotros.
            </p>
            <div className="mt-10 flex flex-col sm:flex-row justify-center gap-3">
              <a href="https://app.hotelapps.es/login" className="btn-coral px-6 py-3 rounded-full text-[14px] font-medium inline-flex items-center justify-center gap-2">
                Solicitar demo <IArrow size={15}/>
              </a>
              <a href="https://app.hotelapps.es/login" className="btn-ghost px-6 py-3 rounded-full text-[14px] font-medium inline-flex items-center justify-center gap-2">
                Hablar con ventas
              </a>
            </div>
            <div className="mt-10 flex flex-wrap items-center justify-center gap-x-8 gap-y-3 text-[12px] text-white/45">
              <span className="flex items-center gap-2"><ICheck size={12} className="text-coral-400"/>En producción en menos de 1 semana</span>
              <span className="flex items-center gap-2"><ICheck size={12} className="text-coral-400"/>Cumple RGPD · alojado en la UE</span>
              <span className="flex items-center gap-2"><ICheck size={12} className="text-coral-400"/>Onboarding y formación gratuitos</span>
            </div>
          </div>
        </div>
      </Reveal>
    </div>
  </section>
);

/* ───────────────────── FOOTER ───────────────────── */

const Footer = () => (
  <footer className="relative pt-16 pb-10 hairline-t">
    <div className="mx-auto max-w-7xl px-5 lg:px-8">
      <div className="grid grid-cols-2 lg:grid-cols-6 gap-10">
        <div className="col-span-2">
          <div className="flex items-center gap-2.5">
            <Logo size={26}/>
            <span className="text-[16px] font-medium tracking-tight">HotelApps</span>
          </div>
          <p className="mt-4 text-[13px] text-white/50 max-w-xs leading-relaxed">
            La plataforma operativa para hoteles independientes. Hecha con cariño en Madrid y Lisboa.
          </p>
          <div className="mt-5 flex gap-2">
            <span className="chip px-2.5 py-1 rounded-full text-[10.5px] flex items-center gap-1.5"><span className="w-1.5 h-1.5 rounded-full bg-emerald-400 pulse-dot"></span>Todos los sistemas operativos</span>
          </div>
        </div>
        {[
          ['Módulos', ['Limpieza','Tareas e Incidencias','Comunicación','Desayunos','Analíticas','Horarios']],
          ['Plataforma', ['Precios','Clientes','Integraciones','Seguridad','Changelog']],
          ['Empresa', ['Sobre nosotros','Empleo','Prensa','Contacto']],
          ['Recursos',['Centro de ayuda','Documentación API','LinkedIn','Privacidad','Términos']],
        ].map(([h, items]) => (
          <div key={h}>
            <div className="text-[11px] uppercase tracking-[0.18em] text-white/40">{h}</div>
            <ul className="mt-4 flex flex-col gap-2.5 text-[13px] text-white/70">
              {items.map(it => <li key={it}><a href="#" className="hover:text-white transition-colors">{it}</a></li>)}
            </ul>
          </div>
        ))}
      </div>
      <div className="rule-coral mt-14"></div>
      <div className="mt-6 flex flex-col sm:flex-row items-start sm:items-center justify-between gap-3 text-[12px] text-white/40">
        <div>© 2026 HotelApps. Todos los derechos reservados.</div>
        <div className="font-mono">v3.4 · build 2025-09-25</div>
      </div>
    </div>
  </footer>
);

Object.assign(window, { Nav, Hero, Problem, Modules, Screens, Benefits, Pricing, Testimonials, FinalCTA, Footer, Reveal });