// fichaje.eu — Landing page (v2 — bold, tilted hero, autoplay slider)

const Nav = () => (
  <nav style={{ borderBottom: '1px solid var(--slate-150)', background: 'rgba(255,255,255,0.85)', backdropFilter: 'blur(14px)', position: 'sticky', top: 0, zIndex: 30 }}>
    <div className="container-wide" style={{ display: 'flex', alignItems: 'center', height: 72, gap: 8 }}>
      <FichajeLogo size={28}/>
      <div style={{ flex: 1 }}/>
      {[
        { l: 'Inicio' },
        { l: 'Funciones', chev: true },
        { l: 'Recursos', chev: true },
        { l: 'Precios' },
        { l: 'Acerca de' },
        { l: 'Soporte', chev: true },
      ].map(item => (
        <a key={item.l} href="#" className="nav-link">
          {item.l}
          {item.chev && <IChevronDown size={14}/>}
        </a>
      ))}
      <div style={{ width: 12 }}/>
      <a href="/login" style={{ fontSize: 14, fontWeight: 600, color: 'var(--brand-600)' }}>Iniciar sesión</a>
      <a href="/signup" className="cta-primary" style={{ padding: '10px 18px', fontSize: 14 }}>Pruébalo gratis</a>
    </div>
  </nav>
);

const HeroApp = () => (
  <div className="hero-app-wrap">
    <div className="hero-app-frame">
      <div style={{ display: 'flex', height: 760, width: 1400, background: 'var(--paper)', overflow: 'hidden' }}>
        <Sidebar current="inicio" onNav={() => {}} role="employee"/>
        <div style={{ flex: 1, display: 'flex', flexDirection: 'column', minWidth: 0 }}>
          <Topbar role="employee" onRoleChange={() => {}} current="inicio" onNav={() => {}}/>
          <main style={{ flex: 1, overflow: 'hidden', padding: 24, background: 'var(--paper)' }}>
            <ScreenInicio onNav={() => {}}/>
          </main>
        </div>
      </div>
    </div>
  </div>
);

const Hero = () => (
  <section style={{ position: 'relative', overflow: 'hidden', paddingBottom: 60, paddingTop: 40 }}>
    {/* Gradient orbs */}
    <div className="orb orb-anim-1" style={{ top: -140, right: -120, width: 560, height: 560, background: 'radial-gradient(circle, rgba(59,130,246,0.32), transparent 70%)' }}/>
    <div className="orb orb-anim-2" style={{ top: 200, left: -120, width: 380, height: 380, background: 'radial-gradient(circle, rgba(16,185,129,0.22), transparent 70%)' }}/>
    <div className="orb orb-anim-3" style={{ bottom: -160, right: 200, width: 420, height: 420, background: 'radial-gradient(circle, rgba(139,92,246,0.22), transparent 70%)' }}/>

    <div className="container-wide" style={{ display: 'grid', gridTemplateColumns: '0.95fr 1.4fr', gap: 32, alignItems: 'center', paddingTop: 56, position: 'relative' }}>
      <div className="reveal" style={{ position: 'relative', zIndex: 3 }}>
        <div className="eyebrow"><ISparkle size={14}/> Software 100% en la nube</div>
        <h1 className="h-title" style={{ marginTop: 26, fontSize: 78 }}>
          Control horario<br/>y gestión de RRHH<br/><span className="accent">sin complicaciones</span>
        </h1>
        <p className="lead" style={{ marginTop: 28, fontSize: 19 }}>
          Solución completa y sencilla para digitalizar el control de jornada, gestionar personas y cumplir con la normativa laboral.
        </p>
        <div style={{ display: 'flex', gap: 12, marginTop: 36 }}>
          <a href="/signup" className="cta-primary" style={{ fontSize: 16, padding: '15px 26px' }}>Pruébalo gratis <IArrowRight size={16}/></a>
          <a href="#" className="cta-secondary" style={{ fontSize: 16, padding: '15px 26px' }}>Solicita una demo</a>
        </div>
        <div style={{ display: 'flex', gap: 26, marginTop: 26, fontSize: 13.5, color: 'var(--slate-500)' }}>
          <span style={{ display: 'inline-flex', alignItems: 'center', gap: 6 }}><ICheck size={15} style={{ color: 'var(--success-600)' }}/> Sin tarjeta de crédito</span>
          <span style={{ display: 'inline-flex', alignItems: 'center', gap: 6 }}><ICheck size={15} style={{ color: 'var(--success-600)' }}/> Cancelación en cualquier momento</span>
        </div>

        {/* Real plant image — decorativo, sin fondo */}
        <img src="/static/img/planta-hero.png" alt="Planta de oficina"
             style={{ marginTop: 32, width: 260, height: 260, objectFit: 'contain', display: 'block',
                      filter: 'drop-shadow(0 18px 18px rgba(15,23,42,.18))' }}/>
      </div>

      <div className="reveal-2 hero-stage" style={{ position: 'relative', marginLeft: -80, zIndex: 1 }}>
        <div className="hero-tilt">
          <HeroApp/>
        </div>

        {/* Floating accent badges over the app */}
        <div style={{
          position: 'absolute', top: '6%', right: '-2%',
          padding: '12px 18px', background: '#fff',
          borderRadius: 14, boxShadow: '0 18px 40px -12px rgba(15,23,42,.18), 0 4px 10px -4px rgba(15,23,42,.06)',
          display: 'flex', alignItems: 'center', gap: 10,
          animation: 'float 4s ease-in-out infinite',
          transform: 'rotate(2deg)',
          zIndex: 5,
        }}>
          <div style={{ width: 36, height: 36, borderRadius: 999, background: 'var(--success-50)', color: 'var(--success-600)', display: 'inline-flex', alignItems: 'center', justifyContent: 'center' }}><ICheck size={18}/></div>
          <div>
            <div style={{ fontSize: 11, color: 'var(--slate-500)', fontWeight: 600 }}>Fichaje registrado</div>
            <div className="mono" style={{ fontSize: 14, fontWeight: 700 }}>09:02 · Marc Vives</div>
          </div>
        </div>

        <div style={{
          position: 'absolute', bottom: '14%', left: '-2%',
          padding: '14px 20px', background: '#fff',
          borderRadius: 14, boxShadow: '0 18px 40px -12px rgba(15,23,42,.18), 0 4px 10px -4px rgba(15,23,42,.06)',
          display: 'flex', alignItems: 'center', gap: 12,
          animation: 'float 5s ease-in-out infinite .8s',
          transform: 'rotate(-3deg)',
          zIndex: 5,
        }}>
          <div style={{ width: 40, height: 40, borderRadius: 10, background: 'var(--brand-50)', color: 'var(--brand-600)', display: 'inline-flex', alignItems: 'center', justifyContent: 'center' }}><ICalendar size={20}/></div>
          <div>
            <div style={{ fontSize: 11, color: 'var(--slate-500)', fontWeight: 600 }}>Vacaciones aprobadas</div>
            <div style={{ fontSize: 14, fontWeight: 700 }}>11 – 22 agosto · 8 días</div>
          </div>
        </div>

        <div style={{
          position: 'absolute', top: '52%', right: '-3%',
          padding: '11px 16px', background: '#fff',
          borderRadius: 12, boxShadow: '0 14px 32px -10px rgba(15,23,42,.18)',
          display: 'flex', alignItems: 'center', gap: 8,
          animation: 'float 4.5s ease-in-out infinite .3s',
          zIndex: 5,
        }}>
          <span style={{ width: 9, height: 9, borderRadius: 999, background: 'var(--success-500)', animation: 'pulse-dot 2s ease-in-out infinite' }}/>
          <span style={{ fontSize: 13, fontWeight: 700, color: 'var(--ink)' }}>14 personas fichadas</span>
        </div>
      </div>
    </div>
  </section>
);

const FeaturesGrid = () => (
  <section style={{ padding: '40px 0 80px' }}>
    <div className="container-wide">
      <div style={{ textAlign: 'center', maxWidth: 780, margin: '0 auto' }}>
        <h2 className="section-title">Pensado para equipos<br/>que quieren crecer</h2>
      </div>
      <div style={{ display: 'grid', gridTemplateColumns: 'repeat(4, 1fr)', gap: 24, marginTop: 64 }}>
        {[
          { i: <IClock size={26}/>,    bg: 'linear-gradient(135deg, #ECFDF5, #D1FAE5)', iconBg: 'linear-gradient(135deg, #10B981, #059669)', shadow: 'rgba(16,185,129,.22)', t: 'Sencillo y eficaz',         d: 'Una interfaz intuitiva que ahorra tiempo y facilita el día a día de RRHH y empleados.',  cta: 'Descubre las funciones', ctaColor: '#059669' },
          { i: <IShield size={26}/>,   bg: 'linear-gradient(135deg, #EFF6FF, #DBEAFE)', iconBg: 'linear-gradient(135deg, #2563EB, #1E40AF)', shadow: 'rgba(30,64,175,.22)', t: 'Cumple y descansa tranquilo', d: 'Cumple la normativa vigente y evita sanciones. Auditorías y registros siempre listos.', cta: 'Seguridad y cumplimiento', ctaColor: '#1E40AF' },
          { i: <IUsers size={26}/>,    bg: 'linear-gradient(135deg, #FEF2F2, #FEE2E2)', iconBg: 'linear-gradient(135deg, #F43F5E, #BE123C)', shadow: 'rgba(244,63,94,.22)', t: 'Visibilidad total del equipo', d: 'Datos en tiempo real para tomar mejores decisiones y mejorar la productividad.', cta: 'Indicadores y reportes', ctaColor: '#BE123C' },
          { i: <ISettings size={26}/>, bg: 'linear-gradient(135deg, #F5F3FF, #EDE9FE)', iconBg: 'linear-gradient(135deg, #8B5CF6, #6D28D9)', shadow: 'rgba(139,92,246,.22)', t: 'Personalizable y a tu medida', d: 'Configura permisos, flujos y políticas según las necesidades de tu empresa.',         cta: 'Más sobre personalización', ctaColor: '#6D28D9' },
        ].map((f, i) => (
          <div key={i} className="raised-color" style={{
            '--shadow-color': f.shadow,
            padding: 32,
            background: f.bg,
            border: '1px solid rgba(255,255,255,0.6)',
            borderRadius: 20,
            position: 'relative',
            overflow: 'hidden',
          }}>
            <div style={{ position: 'absolute', top: -40, right: -40, width: 140, height: 140, borderRadius: '50%', background: f.iconBg, opacity: 0.08 }}/>
            <div style={{
              width: 56, height: 56, borderRadius: 16,
              background: f.iconBg, color: '#fff',
              display: 'inline-flex', alignItems: 'center', justifyContent: 'center',
              marginBottom: 22, boxShadow: `0 10px 20px -6px ${f.shadow}`,
              position: 'relative', zIndex: 1,
            }}>{f.i}</div>
            <div style={{ fontSize: 20, fontWeight: 800, marginBottom: 10, letterSpacing: '-0.015em', color: 'var(--ink)' }}>{f.t}</div>
            <div style={{ fontSize: 14, color: 'var(--slate-700)', lineHeight: 1.55 }}>{f.d}</div>
            <div style={{ marginTop: 20, fontSize: 14, color: f.ctaColor, fontWeight: 700, display: 'inline-flex', alignItems: 'center', gap: 4 }}>
              {f.cta} <IArrowRight size={14}/>
            </div>
          </div>
        ))}
      </div>
    </div>
  </section>
);

const ModulesSection = () => (
  <section style={{ padding: '60px 0 100px' }}>
    <div className="container" style={{ display: 'grid', gridTemplateColumns: '1fr 1.3fr', gap: 80, alignItems: 'flex-start' }}>
      <div style={{ position: 'sticky', top: 110 }}>
        <h2 style={{ fontSize: 46, lineHeight: 1.1, letterSpacing: '-0.03em', fontWeight: 800, color: 'var(--ink)', margin: 0 }}>
          Módulos diseñados<br/>para <span style={{ color: 'var(--brand-600)' }}>RRHH</span> y <span style={{ color: 'var(--brand-600)' }}>managers</span>
        </h2>
        <p className="lead" style={{ marginTop: 22 }}>
          Todo lo que necesitas en un solo lugar para gestionar personas y procesos clave de forma centralizada.
        </p>
        <a href="#" style={{ marginTop: 28, display: 'inline-flex', alignItems: 'center', gap: 8, fontSize: 15, fontWeight: 700, color: 'var(--brand-600)' }}>
          Explora los módulos <IArrowRight size={16}/>
        </a>
      </div>

      <div style={{ display: 'grid', gridTemplateColumns: '1fr 1fr', gap: 8 }}>
        {[
          { i: <IClock size={22}/>,    t: 'Control horario',     d: 'Registra y visualiza la jornada en tiempo real.' },
          { i: <ICheckSquare size={22}/>, t: 'Asignación de tareas', d: 'Organiza tareas y proyectos entre equipos.' },
          { i: <ICalendar size={22}/>, t: 'Vacaciones',          d: 'Solicitudes, aprobaciones y calendario de ausencias.' },
          { i: <IBriefcase size={22}/>, t: 'Turnos',             d: 'Planifica turnos y gestiona coberturas.' },
          { i: <IFile size={22}/>,     t: 'Documentos',          d: 'Centraliza y firma documentos laborales de forma segura.' },
          { i: <IUsers size={22}/>,    t: 'Organización',        d: 'Equipos, departamentos y estructura de la empresa.' },
        ].map((m, i) => (
          <div key={i} className="module-row raised" style={{ background: '#fff', border: '1px solid var(--slate-150)' }}>
            <div style={{
              width: 46, height: 46, borderRadius: 12,
              background: 'var(--brand-50)', color: 'var(--brand-600)',
              display: 'inline-flex', alignItems: 'center', justifyContent: 'center',
              flexShrink: 0,
            }}>{m.i}</div>
            <div>
              <div style={{ fontSize: 16, fontWeight: 700, marginBottom: 4, letterSpacing: '-0.01em' }}>{m.t}</div>
              <div style={{ fontSize: 13.5, color: 'var(--slate-600)', lineHeight: 1.5 }}>{m.d}</div>
            </div>
          </div>
        ))}
      </div>
    </div>
  </section>
);

const ScreenFrame = ({ children, role = 'employee', current = 'inicio' }) => (
  <div className="slide-frame-wrap">
    <div className="slide-frame" style={{ display: 'flex', height: 720, width: 1400, background: 'var(--paper)', overflow: 'hidden' }}>
      <Sidebar current={current} onNav={() => {}} role={role}/>
      <div style={{ flex: 1, display: 'flex', flexDirection: 'column', minWidth: 0 }}>
        <Topbar role={role} onRoleChange={() => {}} current={current} onNav={() => {}}/>
        <main style={{ flex: 1, overflow: 'hidden', padding: 24, background: 'var(--paper)' }}>{children}</main>
      </div>
    </div>
  </div>
);

const PANELS = [
  { id: 'inicio',     t: 'Dashboard del empleado',        s: 'Lo importante de tu día, en un vistazo.',                role: 'employee', current: 'inicio',       screen: () => <ScreenInicio onNav={() => {}}/> },
  { id: 'fichaje',    t: 'Fichaje con un solo clic',      s: 'Entrada, pausa, comida y salida con timeline visual.',   role: 'employee', current: 'fichaje',      screen: () => <ScreenFichaje/> },
  { id: 'cal',        t: 'Calendario y ausencias',        s: 'Planificación visual y control total de ausencias.',     role: 'employee', current: 'calendario',   screen: () => <ScreenCalendario/> },
  { id: 'org',        t: 'Gestión centralizada de personas', s: 'Todos los datos y métricas clave en tiempo real.',    role: 'admin',    current: 'organizacion', screen: () => <ScreenOrganizacion role="admin"/> },
  { id: 'config',     t: 'Configuración de empresa',      s: 'Personaliza la plataforma según tus necesidades.',       role: 'admin',    current: 'config',       screen: () => <ScreenConfig/> },
  { id: 'control',    t: 'Control horario para managers', s: 'Reporte editable día a día con auditoría de cambios.',   role: 'admin',    current: 'control',      screen: () => <ScreenControl/> },
  { id: 'protocolos', t: 'Cuadro de mando con métricas',  s: 'KPIs, gráficas y alertas para tomar decisiones.',        role: 'admin',    current: 'protocolos',   screen: () => <ScreenProtocolos/> },
  { id: 'docs',       t: 'Mis documentos y firma digital', s: 'Contratos, nóminas y políticas firmadas online.',       role: 'employee', current: 'misdocs',      screen: () => <ScreenMisDocs/> },
  { id: 'tareas',     t: 'Tareas del equipo',             s: 'Kanban integrado en RRHH para coordinar trabajo.',       role: 'employee', current: 'tareas',       screen: () => <ScreenTareas/> },
];

const PanelsSlider = () => {
  const trackRef = React.useRef(null);
  const [idx, setIdx] = React.useState(0);
  const [paused, setPaused] = React.useState(false);

  // Autoplay
  React.useEffect(() => {
    if (paused) return;
    const id = setInterval(() => {
      const el = trackRef.current;
      if (!el) return;
      const child = el.children[0];
      if (!child) return;
      const slideW = child.getBoundingClientRect().width + 32;
      const next = (idx + 1) % PANELS.length;
      el.scrollTo({ left: next * slideW, behavior: 'smooth' });
    }, 3000);
    return () => clearInterval(id);
  }, [idx, paused]);

  // Track current index from scroll
  React.useEffect(() => {
    const el = trackRef.current;
    if (!el) return;
    const onScroll = () => {
      const child = el.children[0];
      if (!child) return;
      const slideW = child.getBoundingClientRect().width + 32;
      setIdx(Math.round(el.scrollLeft / slideW));
    };
    el.addEventListener('scroll', onScroll);
    return () => el.removeEventListener('scroll', onScroll);
  }, []);

  const goTo = (i) => {
    const el = trackRef.current;
    if (!el) return;
    const child = el.children[0];
    if (!child) return;
    const slideW = child.getBoundingClientRect().width + 32;
    el.scrollTo({ left: i * slideW, behavior: 'smooth' });
  };

  const scroll = (dir) => {
    const next = (idx + dir + PANELS.length) % PANELS.length;
    goTo(next);
  };

  return (
    <section style={{ padding: '80px 0 60px', background: 'linear-gradient(180deg, #F4F6F9 0%, #EEF2F7 100%)' }} onMouseEnter={() => setPaused(true)} onMouseLeave={() => setPaused(false)}>
      <div className="container-wide">
        <h2 className="section-title" style={{ marginBottom: 8 }}>Todo lo que tu equipo necesita,<br/>en un solo lugar</h2>
        <p style={{ textAlign: 'center', color: 'var(--slate-500)', fontSize: 17, maxWidth: 640, margin: '18px auto 0' }}>
          Cada pantalla diseñada para que el día a día de RRHH y empleados sea más simple.
        </p>
      </div>

      <div className="slider-wrap">
        <button className="slider-btn" style={{ left: 'max(24px, calc((100vw - 1080px) / 2 - 70px))' }} onClick={() => scroll(-1)} aria-label="Anterior"><IChevronLeft size={22}/></button>
        <button className="slider-btn" style={{ right: 'max(24px, calc((100vw - 1080px) / 2 - 70px))' }} onClick={() => scroll(1)} aria-label="Siguiente"><IChevronRight size={22}/></button>

        <div ref={trackRef} className="slider-track" style={{ paddingLeft: 'max(60px, calc((100vw - 1080px) / 2))', paddingRight: 'max(60px, calc((100vw - 1080px) / 2))' }}>
          {PANELS.map((p) => (
            <div key={p.id} className="slide">
              <div className="slide-card">
                <ScreenFrame role={p.role} current={p.current}>{p.screen()}</ScreenFrame>
                <div className="slide-caption" style={{ textAlign: 'center' }}>
                  <div style={{ fontSize: 19, fontWeight: 700, letterSpacing: '-0.01em' }}>{p.t}</div>
                  <div style={{ fontSize: 14, color: 'var(--slate-500)', marginTop: 4 }}>{p.s}</div>
                </div>
              </div>
            </div>
          ))}
        </div>

        <div className="slider-dots">
          {PANELS.map((_, i) => (
            <div key={i} className={`slider-dot ${i === idx ? 'active' : ''}`} onClick={() => goTo(i)}/>
          ))}
        </div>
      </div>
    </section>
  );
};

const TrustSection = () => (
  <section className="section-tinted-3" style={{ padding: '120px 0' }}>
    <div className="container-wide" style={{ display: 'grid', gridTemplateColumns: '1.1fr 1.2fr 1fr', gap: 64, alignItems: 'center' }}>
      <div>
        <h2 style={{ fontSize: 46, lineHeight: 1.1, letterSpacing: '-0.03em', fontWeight: 800, color: 'var(--ink)', margin: 0 }}>
          Más claridad para RRHH.<br/>Más tiempo<br/>para <span style={{ color: 'var(--brand-600)' }}>lo importante</span>.
        </h2>
        <p className="lead" style={{ marginTop: 22 }}>
          Miles de empresas ya confían en fichaje.eu para simplificar su día a día.
        </p>
        <div style={{ marginTop: 30, display: 'flex', flexDirection: 'column', gap: 14 }}>
          {[
            'Cumple con la normativa laboral',
            'Ahorra tiempo en tareas repetitivas',
            'Mejora la experiencia del equipo',
            'Soporte cercano y en español',
          ].map(t => (
            <div key={t} style={{ display: 'flex', alignItems: 'center', gap: 12, fontSize: 15, color: 'var(--slate-700)' }}>
              <div style={{ width: 24, height: 24, borderRadius: 999, background: 'var(--success-50)', color: 'var(--success-600)', display: 'inline-flex', alignItems: 'center', justifyContent: 'center' }}><ICheck size={14}/></div>
              {t}
            </div>
          ))}
        </div>
      </div>

      <div style={{ position: 'relative', borderRadius: 22, overflow: 'hidden', boxShadow: '0 18px 44px -16px rgba(15,23,42,.22), 0 6px 14px -4px rgba(15,23,42,.08)' }}>
        <img src="/static/img/equipo-rrhh.jpg" alt="Equipo de RRHH trabajando juntos"
             style={{ width: '100%', aspectRatio: '4/3', objectFit: 'cover', display: 'block' }}/>
      </div>

      <div style={{ display: 'grid', gridTemplateColumns: '1fr 1fr', gap: 20 }}>
        {[
          { i: <IBuilding size={22}/>, v: '+1.000',  l: 'empresas activas' },
          { i: <IUsers size={22}/>,    v: '+25.000', l: 'usuarios' },
          { i: <IClock size={22}/>,    v: '99,9%',   l: 'disponibilidad' },
          { i: <IAward size={22}/>,    v: '+10 años', l: 'evolucionando juntos' },
        ].map((s, i) => (
          <div key={i} className="raised" style={{ padding: 24, background: '#fff', border: '1px solid var(--slate-150)', borderRadius: 16, textAlign: 'center' }}>
            <div style={{ display: 'inline-flex', width: 48, height: 48, borderRadius: 999, background: 'var(--success-50)', color: 'var(--success-600)', alignItems: 'center', justifyContent: 'center', marginBottom: 12 }}>{s.i}</div>
            <div style={{ fontSize: 28, fontWeight: 800, color: 'var(--success-600)', letterSpacing: '-0.02em' }}>{s.v}</div>
            <div style={{ fontSize: 13, color: 'var(--slate-500)', marginTop: 2 }}>{s.l}</div>
          </div>
        ))}
      </div>
    </div>
  </section>
);

const Pricing = () => (
  <section className="section-tinted-1" style={{ padding: '100px 0' }}>
    <div className="container">
      <h2 className="section-title">Elige el plan que mejor<br/>se adapta a tu empresa</h2>

      <div style={{ display: 'grid', gridTemplateColumns: '1fr 1fr 1.7fr', gap: 24, marginTop: 64 }}>
        <div className="pricing-card">
          <div style={{ fontSize: 20, fontWeight: 700 }}>Starter</div>
          <div style={{ fontSize: 14, color: 'var(--slate-500)', marginTop: 4 }}>Ideal para pequeñas empresas</div>
          <div style={{ marginTop: 24 }}>
            <span style={{ fontSize: 46, fontWeight: 800, letterSpacing: '-0.03em' }}>3,25 €</span>
          </div>
          <div style={{ fontSize: 13, color: 'var(--slate-500)' }}>por usuario / mes</div>
          <a href="/signup" style={{ display: 'block', textAlign: 'center', marginTop: 22, padding: '13px 16px', background: 'var(--brand-600)', color: '#fff', borderRadius: 12, fontWeight: 700, fontSize: 15 }}>Pruébalo gratis</a>
          <Divider style={{ margin: '24px 0' }}/>
          <ul style={{ listStyle: 'none', padding: 0, margin: 0, display: 'flex', flexDirection: 'column', gap: 12 }}>
            {['Control horario','Gestión de ausencias','Calendario y turnos','Soporte por email'].map(f => (
              <li key={f} style={{ display: 'flex', alignItems: 'center', gap: 10, fontSize: 14, color: 'var(--slate-700)' }}>
                <ICheck size={16} style={{ color: 'var(--success-600)' }}/>{f}
              </li>
            ))}
          </ul>
        </div>

        <div className="pricing-card popular">
          <div style={{ position: 'absolute', top: -14, left: '50%', transform: 'translateX(-50%)', padding: '5px 14px', background: 'var(--brand-600)', color: '#fff', fontSize: 11, fontWeight: 700, borderRadius: 999, textTransform: 'uppercase', letterSpacing: '.08em' }}>Más popular</div>
          <div style={{ fontSize: 20, fontWeight: 700 }}>Business</div>
          <div style={{ fontSize: 14, color: 'var(--slate-500)', marginTop: 4 }}>Para equipos en crecimiento</div>
          <div style={{ marginTop: 24 }}>
            <span style={{ fontSize: 46, fontWeight: 800, letterSpacing: '-0.03em', color: 'var(--brand-700)' }}>4,50 €</span>
          </div>
          <div style={{ fontSize: 13, color: 'var(--slate-500)' }}>por usuario / mes</div>
          <a href="/signup" style={{ display: 'block', textAlign: 'center', marginTop: 22, padding: '13px 16px', background: 'var(--brand-600)', color: '#fff', borderRadius: 12, fontWeight: 700, fontSize: 15 }}>Pruébalo gratis</a>
          <Divider style={{ margin: '24px 0' }}/>
          <ul style={{ listStyle: 'none', padding: 0, margin: 0, display: 'flex', flexDirection: 'column', gap: 12 }}>
            {['Todo lo del plan Starter','Informes avanzados','Permisos y roles','Integraciones básicas'].map(f => (
              <li key={f} style={{ display: 'flex', alignItems: 'center', gap: 10, fontSize: 14, color: 'var(--slate-700)' }}>
                <ICheck size={16} style={{ color: 'var(--success-600)' }}/>{f}
              </li>
            ))}
          </ul>
        </div>

        <div className="pricing-card promo">
          <div style={{ display: 'inline-flex', padding: '6px 16px', background: 'var(--brand-600)', color: '#fff', fontSize: 11, fontWeight: 700, borderRadius: 999, textTransform: 'uppercase', letterSpacing: '.08em', marginBottom: 16 }}>Promociones</div>
          <div style={{ display: 'grid', gridTemplateColumns: '1fr 1fr', gap: 18 }}>
            {[
              { t: 'Pack 50',  s: 'Hasta 50 usuarios',  p: '100 €', desc: 'Ahorra y gestiona hasta 50 usuarios.' },
              { t: 'Pack 100', s: 'Hasta 100 usuarios', p: '150 €', desc: 'Ahorra y gestiona hasta 100 usuarios.' },
            ].map(pk => (
              <div key={pk.t} className="raised" style={{ padding: 22, background: '#fff', border: '1px solid var(--slate-150)', borderRadius: 16, textAlign: 'center' }}>
                <div style={{ fontSize: 16, fontWeight: 700 }}>{pk.t}</div>
                <div style={{ fontSize: 12.5, color: 'var(--slate-500)', marginTop: 2 }}>{pk.s}</div>
                <div style={{ marginTop: 16, fontSize: 32, fontWeight: 800, letterSpacing: '-0.025em' }}>{pk.p}<span style={{ fontSize: 13, fontWeight: 500, color: 'var(--slate-500)' }}> /mes</span></div>
                <button style={{ marginTop: 16, width: '100%', padding: '10px 12px', background: 'var(--brand-600)', color: '#fff', borderRadius: 10, fontSize: 14, fontWeight: 700 }}>Contratar pack</button>
                <div style={{ fontSize: 12, color: 'var(--slate-500)', marginTop: 12, lineHeight: 1.5 }}>{pk.desc}</div>
              </div>
            ))}
          </div>
        </div>
      </div>
    </div>
  </section>
);

const CTABand = () => (
  <section style={{ padding: '100px 0', background: '#0B1220', position: 'relative', overflow: 'hidden' }}>
    {/* glow sutil para que el negro respire */}
    <div style={{ position: 'absolute', top: '-20%', left: '50%', transform: 'translateX(-50%)', width: 800, height: 800, borderRadius: '50%', background: 'radial-gradient(circle, rgba(37,99,235,0.18), transparent 60%)', pointerEvents: 'none' }}/>
    <div className="container" style={{ position: 'relative', zIndex: 1 }}>
      <div style={{
        padding: '40px 44px',
        background: 'linear-gradient(135deg, var(--brand-700) 0%, var(--brand-600) 50%, var(--brand-500) 100%)',
        borderRadius: 26,
        display: 'flex', alignItems: 'center', gap: 28,
        position: 'relative', overflow: 'hidden',
        boxShadow: '0 28px 70px -16px rgba(37,99,235,.55), 0 12px 28px -8px rgba(0,0,0,.5)',
      }}>
        <div style={{ position: 'absolute', top: -80, right: -40, width: 280, height: 280, borderRadius: '50%', background: 'radial-gradient(circle, rgba(255,255,255,0.22), transparent 70%)', pointerEvents: 'none' }}/>
        <div style={{
          width: 64, height: 64, borderRadius: 16,
          background: '#fff', color: 'var(--brand-600)',
          display: 'inline-flex', alignItems: 'center', justifyContent: 'center',
          flexShrink: 0, boxShadow: '0 12px 24px -8px rgba(0,0,0,.3)',
          zIndex: 1,
        }}><ICalendar size={30}/></div>
        <div style={{ flex: 1, zIndex: 1 }}>
          <div style={{ fontSize: 26, fontWeight: 800, color: '#fff', letterSpacing: '-0.025em', lineHeight: 1.2 }}>Comienza a transformar la gestión<br/>de tu equipo hoy mismo</div>
        </div>
        <a href="/signup" style={{
          zIndex: 1, display: 'inline-flex', alignItems: 'center', gap: 8,
          padding: '14px 24px', background: '#fff', color: 'var(--brand-700)',
          borderRadius: 12, fontWeight: 700, fontSize: 15,
          boxShadow: '0 8px 20px -6px rgba(0,0,0,.25)',
        }}>Pruébalo gratis</a>
        <a href="#" style={{
          zIndex: 1, display: 'inline-flex', alignItems: 'center', gap: 8,
          padding: '14px 24px', background: 'transparent', color: '#fff',
          borderRadius: 12, fontWeight: 700, fontSize: 15,
          border: '1px solid rgba(255,255,255,.45)',
        }}>Solicita una demo</a>
      </div>
    </div>
  </section>
);

const Footer = () => (
  <footer>
    <div className="container">
      <div style={{ display: 'grid', gridTemplateColumns: '1.8fr 1fr 1fr 1fr 1fr', gap: 48 }}>
        <div>
          <FichajeLogo size={26}/>
          <div style={{ fontSize: 12, color: 'var(--slate-500)', marginTop: 14 }}>© 2025 fichaje.eu</div>
          <div style={{ fontSize: 12, color: 'var(--slate-500)' }}>Todos los derechos reservados</div>
        </div>
        <div>
          <h4>Producto</h4>
          <ul>
            <li><a href="#">Funciones</a></li>
            <li><a href="#">Precios</a></li>
            <li><a href="#">Integraciones</a></li>
            <li><a href="#">Novedades</a></li>
          </ul>
        </div>
        <div>
          <h4>Recursos</h4>
          <ul>
            <li><a href="#">Blog</a></li>
            <li><a href="#">Guías y recursos</a></li>
            <li><a href="#">Ayuda</a></li>
            <li><a href="#">Centro de soporte</a></li>
          </ul>
        </div>
        <div>
          <h4>Empresa</h4>
          <ul>
            <li><a href="#">Acerca de</a></li>
            <li><a href="#">Contacto</a></li>
            <li><a href="#">Trabaja con nosotros</a></li>
            <li><a href="#">Partners</a></li>
          </ul>
        </div>
        <div>
          <h4>Legal</h4>
          <ul>
            <li><a href="#">Aviso legal</a></li>
            <li><a href="#">Política de privacidad</a></li>
            <li><a href="#">Condiciones del servicio</a></li>
          </ul>
          <div style={{ marginTop: 20, display: 'inline-flex', alignItems: 'center', gap: 6, fontSize: 13, color: 'var(--slate-700)' }}>
            <IGlobe size={14}/> Español <IChevronDown size={12}/>
          </div>
        </div>
      </div>
    </div>
  </footer>
);

const Landing = () => (
  <>
    <Nav/>
    <Hero/>
    <FeaturesGrid/>
    <ClockSection/>
    <ModulesSection/>
    <PanelsSlider/>
    <TrustSection/>
    <Pricing/>
    <CTABand/>
    <Footer/>
  </>
);

ReactDOM.createRoot(document.getElementById('root')).render(<Landing/>);
