// Reusable Sector landing page — receives sector data as prop
function SectorPage({ sector }) {
  const otherSectors = (window.AFER_SECTORS || []).filter((s) => s.slug !== sector.slug).slice(0, 4);
  return (
    <div data-screen-label={`Sector — ${sector.name}`}>
      <Header active="sectores" />

      {/* HERO */}
      <Section pad="80px 0 60px" bg="linear-gradient(180deg, #FBFCFD 0%, var(--surface-warm) 100%)">
        <div style={{ display: 'grid', gridTemplateColumns: '1fr 1fr', gap: 64, alignItems: 'center' }} className="afer-hero-grid">
          <div>
            <div style={{ display: 'inline-flex', alignItems: 'center', gap: 10, padding: '6px 14px', background: '#fff', border: '1px solid var(--border-default)', borderRadius: 999, fontSize: 13, fontWeight: 600, color: sector.accent, marginBottom: 24 }}>
              <Icon name={sector.icon} size={16} color={sector.accent} />
              {sector.name}
            </div>
            <h1 style={{ fontSize: 'clamp(36px, 4.4vw, 54px)', letterSpacing: '-0.025em', lineHeight: 1.05, margin: '0 0 20px' }}>
              {sector.h1}
            </h1>
            <p style={{ fontSize: 18, color: 'var(--fg-default)', lineHeight: 1.55, margin: '0 0 28px', maxWidth: 520 }}>
              {sector.intro}
            </p>
            <div style={{ display: 'flex', gap: 12, flexWrap: 'wrap' }}>
              <Button variant="primary" size="lg" onClick={openCalendly}>Solicita una demo <Icon name="arrow" size={16} color="#fff" /></Button>
              <Button variant="secondary" size="lg" href="/sign-up/">Empieza 7 días gratis</Button>
            </div>
            <div style={{ marginTop: 24, fontSize: 13, color: 'var(--fg-muted)' }}>
              <strong style={{ color: sector.accent }}>{sector.stats}</strong> ya confían en Afer
            </div>
          </div>
          <div style={{ background: '#fff', border: '1px solid var(--border-default)', borderRadius: 16, padding: 24, boxShadow: 'var(--shadow-md)' }}>
            <div style={{ fontSize: 12, fontWeight: 600, color: 'var(--fg-muted)', marginBottom: 16, letterSpacing: '0.04em' }}>RETOS DEL SECTOR</div>
            <div style={{ display: 'flex', flexDirection: 'column', gap: 16 }}>
              {sector.pains.map((p, i) =>
              <div key={i} style={{ display: 'flex', gap: 12, alignItems: 'flex-start' }}>
                  <div style={{ width: 28, height: 28, borderRadius: 8, background: 'var(--danger-soft)', color: 'var(--danger-strong)', display: 'flex', alignItems: 'center', justifyContent: 'center', flexShrink: 0, fontSize: 14, fontWeight: 700 }}>✕</div>
                  <div>
                    <div style={{ fontWeight: 600, fontSize: 14, marginBottom: 4 }}>{p.title}</div>
                    <div style={{ fontSize: 13, color: 'var(--fg-muted)', lineHeight: 1.5 }}>{p.desc}</div>
                  </div>
                </div>
              )}
            </div>
          </div>
        </div>
        <style>{`@media (max-width: 920px) { .afer-hero-grid { grid-template-columns: 1fr !important; } }`}</style>
      </Section>

      {/* SOLUCIONES */}
      <Section pad="100px 0" bg="#fff">
        <div style={{ textAlign: 'center', maxWidth: 720, margin: '0 auto 56px' }}>
          <Eyebrow>CÓMO TE AYUDA AFER</Eyebrow>
          <h2 style={{ fontSize: 'clamp(32px, 3.5vw, 44px)', letterSpacing: '-0.02em', lineHeight: 1.1, margin: '0 0 16px' }}>
            La solución diseñada para {sector.name.toLowerCase()}
          </h2>
          <p style={{ fontSize: 17, color: 'var(--fg-muted)', lineHeight: 1.55 }}>
            No es un software genérico adaptado a tu sector. Está hecho desde cero para resolver los problemas reales del día a día.
          </p>
        </div>
        <div style={{ display: 'grid', gridTemplateColumns: 'repeat(2, 1fr)', gap: 20 }} className="afer-sol-grid">
          {sector.solutions.map((s, i) =>
          <Reveal key={i} delay={i * 80}>
              <div style={{ background: '#fff', border: '1px solid var(--border-default)', borderRadius: 14, padding: 28, height: '100%' }}>
                <div style={{ width: 48, height: 48, borderRadius: 12, background: sector.accent + '14', color: sector.accent, display: 'flex', alignItems: 'center', justifyContent: 'center', marginBottom: 16 }}>
                  <Icon name={s.icon} size={24} color={sector.accent} />
                </div>
                <h3 style={{ fontSize: 18, margin: '0 0 8px', letterSpacing: '-0.01em' }}>{s.title}</h3>
                <p style={{ fontSize: 14, color: 'var(--fg-muted)', lineHeight: 1.55, margin: 0 }}>{s.desc}</p>
              </div>
            </Reveal>
          )}
        </div>
        <style>{`@media (max-width: 720px) { .afer-sol-grid { grid-template-columns: 1fr !important; } }`}</style>
      </Section>

      {/* TESTIMONIO */}
      <Section pad="80px 0" bg="var(--surface-warm)">
        <div style={{ maxWidth: 820, margin: '0 auto', textAlign: 'center' }}>
          <Icon name="quote" size={36} color={sector.accent} />
          <p style={{ fontSize: 24, lineHeight: 1.45, letterSpacing: '-0.01em', margin: '20px 0 28px', color: 'var(--fg-strong)' }}>
            "{sector.testimonial.quote}"
          </p>
          <div style={{ fontWeight: 600, color: 'var(--fg-strong)' }}>{sector.testimonial.author}</div>
          {sector.testimonial.role ? <div style={{ fontSize: 14, color: 'var(--fg-muted)', marginTop: 4 }}>{sector.testimonial.role}</div> : null}
        </div>
      </Section>

      {/* TRES EJES */}
      <Section pad="100px 0" bg="#fff">
        <div style={{ textAlign: 'center', maxWidth: 720, margin: '0 auto 56px' }}>
          <Eyebrow>TODO EN UNA PLATAFORMA</Eyebrow>
          <h2 style={{ fontSize: 'clamp(28px, 3vw, 38px)', letterSpacing: '-0.02em', margin: '0 0 16px' }}>
            Facturación, control horario e IA
          </h2>
          <p style={{ fontSize: 16, color: 'var(--fg-muted)', lineHeight: 1.55 }}>
            Los tres ejes principales de Afer, conectados entre sí. Sin integraciones, sin saltos entre apps.
          </p>
        </div>
        <div style={{ display: 'grid', gridTemplateColumns: 'repeat(3, 1fr)', gap: 20 }} className="afer-axes-grid">
          {[
          { href: '/software-facturacion-cloud/', icon: 'file', title: 'Facturación', desc: 'Verifactu listo. Presupuestos, albaranes y facturas en minutos.', color: '#1B3FA0' },
          { href: '/software-control-horario/', icon: 'clock', title: 'Control horario', desc: 'Fichajes desde móvil, vacaciones y nómina conectada.', color: '#3D6CF5' },
          { href: '/erp-con-ia/', icon: 'sparkle', title: 'Inteligencia artificial', desc: 'OCR, conciliación bancaria y predicciones.', color: '#7C4FE3' }].
          map((a) =>
          <a key={a.href} href={a.href} style={{
            display: 'block', textDecoration: 'none', color: 'inherit',
            background: '#fff', border: '1px solid var(--border-default)', borderRadius: 14, padding: 28,
            transition: 'all 200ms cubic-bezier(0.2,0.8,0.2,1)'
          }}
          onMouseEnter={(e) => {e.currentTarget.style.borderColor = a.color;e.currentTarget.style.transform = 'translateY(-3px)';e.currentTarget.style.boxShadow = '0 12px 32px rgba(15,23,42,0.08)';}}
          onMouseLeave={(e) => {e.currentTarget.style.borderColor = 'var(--border-default)';e.currentTarget.style.transform = 'translateY(0)';e.currentTarget.style.boxShadow = 'none';}}>
              <div style={{ width: 44, height: 44, borderRadius: 10, background: a.color + '14', color: a.color, display: 'flex', alignItems: 'center', justifyContent: 'center', marginBottom: 16 }}>
                <Icon name={a.icon} size={22} color={a.color} />
              </div>
              <h3 style={{ fontSize: 18, margin: '0 0 6px' }}>{a.title}</h3>
              <p style={{ fontSize: 14, color: 'var(--fg-muted)', lineHeight: 1.5, margin: 0 }}>{a.desc}</p>
              <div style={{ marginTop: 16, fontSize: 13, fontWeight: 600, color: a.color }}>Saber más →</div>
            </a>
          )}
        </div>
        <style>{`@media (max-width: 920px) { .afer-axes-grid { grid-template-columns: 1fr !important; } }`}</style>
      </Section>

      {/* OTROS SECTORES */}
      <Section pad="80px 0" bg="var(--surface-warm)">
        <div style={{ textAlign: 'center', maxWidth: 720, margin: '0 auto 40px' }}>
          <Eyebrow>OTROS SECTORES</Eyebrow>
          <h2 style={{ fontSize: 28, letterSpacing: '-0.02em', margin: 0 }}>También para tu actividad</h2>
        </div>
        <div style={{ display: 'grid', gridTemplateColumns: 'repeat(4, 1fr)', gap: 16 }} className="afer-other-grid">
          {otherSectors.map((s) =>
          <a key={s.slug} href={`sector-${s.slug}.html`} style={{
            display: 'block', textDecoration: 'none', color: 'inherit',
            background: '#fff', border: '1px solid var(--border-default)', borderRadius: 12, padding: 20,
            transition: 'all 180ms'
          }}
          onMouseEnter={(e) => {e.currentTarget.style.borderColor = 'var(--brand-accent)';e.currentTarget.style.transform = 'translateY(-2px)';}}
          onMouseLeave={(e) => {e.currentTarget.style.borderColor = 'var(--border-default)';e.currentTarget.style.transform = 'translateY(0)';}}>
              <div style={{ width: 36, height: 36, borderRadius: 8, background: 'var(--brand-primary-soft)', color: 'var(--brand-primary)', display: 'flex', alignItems: 'center', justifyContent: 'center', marginBottom: 12 }}>
                <Icon name={s.icon} size={18} color="var(--brand-primary)" />
              </div>
              <div style={{ fontWeight: 600, fontSize: 15, marginBottom: 4 }}>{s.name}</div>
              <div style={{ fontSize: 12, color: 'var(--fg-muted)' }}>{s.stats}</div>
            </a>
          )}
        </div>
        <div style={{ textAlign: 'center', marginTop: 32 }}>
          <a href="/sectores/" style={{ color: 'var(--brand-accent)', fontWeight: 600, textDecoration: 'none', fontSize: 15 }}>Ver todos los sectores →</a>
        </div>
        <style>{`@media (max-width: 920px) { .afer-other-grid { grid-template-columns: repeat(2, 1fr) !important; } }`}</style>
      </Section>

      {/* CTA FINAL */}
      <Section pad="100px 0" bg="#fff">
        <div style={{ background: 'var(--brand-primary)', borderRadius: 24, padding: 64, textAlign: 'center', color: '#fff' }}>
          <h2 style={{ fontSize: 'clamp(28px, 3.2vw, 40px)', letterSpacing: '-0.02em', margin: '0 0 16px', color: '#fff' }}>
            Empieza con Afer hoy
          </h2>
          <p style={{ fontSize: 17, color: 'rgba(255,255,255,0.85)', margin: '0 0 28px', maxWidth: 520, marginLeft: 'auto', marginRight: 'auto' }}>
            7 días gratis · Sin compromiso · Sin tarjeta de crédito
          </p>
          <div style={{ display: 'flex', gap: 12, justifyContent: 'center', flexWrap: 'wrap' }}>
            <a href="/sign-up/" style={{ padding: '14px 28px', background: '#fff', color: 'var(--brand-primary)', borderRadius: 10, fontWeight: 600, fontSize: 15, textDecoration: 'none' }}>
              Empezar ahora <Icon name="arrow" size={16} color="var(--brand-primary)" />
            </a>
            <a href="#" onClick={openCalendly} style={{ padding: '14px 28px', background: 'rgba(255,255,255,0.1)', color: '#fff', borderRadius: 10, border: '1px solid rgba(255,255,255,0.25)', fontWeight: 600, fontSize: 15, textDecoration: 'none' }}>
              Solicitar demo
            </a>
          </div>
        </div>
      </Section>

      <Footer />
    </div>);

}

window.SectorPage = SectorPage;