// /casos-de-uso — including Inmobiliario as priority

function CasosDeUso() {
  const sectors = [
    {
      id: 'inmobiliario', emoji:'🏘️', label: 'Inmobiliario',
      featured: true,
      summary: 'Para inmobiliarias, agentes independientes y desarrolladores.',
      pain: 'Tardar horas en contestar leads, publicar la misma propiedad en 5 portales, hacer fichas técnicas a mano.',
      result: 'Respuesta a leads en 30 seg, publicación multi-portal automática, ficha técnica con SEO por cada propiedad.',
      agents: ['Marketing', 'Atención', 'Investigación', 'Diseño Web', 'Analítica'],
      metric: '+1117% leads cualificados',
      caseSlug: 'caso-exito-inmobiliaria-norte-100-leads-mes',
    },
    {
      id: 'ecommerce',    emoji:'🛍️', label: 'E-commerce',
      summary: 'Tiendas online de cualquier vertical.',
      pain: 'Sin tiempo para redes, soporte saturado, productos sin descripciones SEO.',
      result: 'Posts diarios, soporte 24/7, fichas optimizadas para Google Shopping.',
      agents: ['Marketing','Atención','Inventario','Diseño Web'],
      metric: '+38% alcance orgánico',
    },
    {
      id: 'alimentos',    emoji:'🍕', label: 'Alimentos y Bebidas',
      summary: 'Restaurantes, dark kitchens y marcas D2C.',
      pain: 'Pedidos por WhatsApp sin orden, promos sin estrategia, repartos sin trackeo.',
      result: 'Pedidos cualificados, promos por horario, tracking automático al cliente.',
      agents: ['Marketing','Atención','Logística','Inventario'],
      metric: '+24% ticket promedio',
    },
    {
      id: 'tech',         emoji:'💻', label: 'Software y Tecnología',
      summary: 'SaaS, agencias, startups técnicas.',
      pain: 'No sale tiempo para SEO ni blog, leads sin nutrir, competencia sin trackear.',
      result: 'Blog semanal, lead nurturing por email, benchmark de competencia automatizado.',
      agents: ['Marketing','Investigación','Analítica','Atención'],
      metric: 'Top-3 en 14 keywords',
    },
    {
      id: 'belleza',      emoji:'💄', label: 'Belleza y Cuidado',
      summary: 'Cosmética, salones, marcas D2C.',
      pain: 'Recomendaciones genéricas, conversión baja, soporte saturado en lanzamientos.',
      result: 'Recomendaciones personalizadas por perfil, email con alta conversión, soporte 24/7.',
      agents: ['Marketing','Atención','Analítica'],
      metric: '+52% conversión email',
    },
    {
      id: 'educacion',    emoji:'📚', label: 'Educación y Cursos',
      summary: 'Edtech, formadores, academias.',
      pain: 'Estudiantes que no terminan cursos, leads que no se inscriben, marketing repetitivo.',
      result: 'Secuencias post-inscripción, recordatorios personalizados, contenido por cohorte.',
      agents: ['Marketing','Atención','Diseño Web','Analítica'],
      metric: 'Completion 31% → 58%',
    },
  ];

  const featured = sectors.find(s => s.featured);
  const rest = sectors.filter(s => !s.featured);

  return (
    <Layout active="casos-de-uso">
      <PageHero
        crumb={[{ label:'Inicio', href:'index.html' }, { label:'Casos de uso' }]}
        eyebrow="Casos de uso por industria"
        title="Para cualquier tipo de negocio. Adaptado al tuyo."
        subtitle="Tu Director General activa los colaboradores correctos según tu industria y configura sus prioridades. Estos son los sectores que mejor funcionan con AI Company hoy."
      />

      {/* Featured: Inmobiliario */}
      <section className="section" data-screen-label="Featured Inmobiliario">
        <div className="container">
          <div className="card" style={{
            padding: 0, borderRadius: 22, overflow:'hidden',
            display:'grid', gridTemplateColumns:'minmax(0, 1fr) minmax(0, 1.1fr)',
            border:'1.5px solid var(--brand-primary)',
            background:'linear-gradient(180deg, color-mix(in oklab, var(--brand-primary), white 96%), #fff)',
          }}>
            <div style={{ aspectRatio:'4/3', position:'relative' }}>
              <BlogCover kind="edificio"/>
              <div style={{
                position:'absolute', top: 20, left: 20,
                background:'var(--brand-accent)', color:'#fff',
                fontSize: 11, fontWeight: 700, padding:'4px 10px', borderRadius: 999,
                textTransform:'uppercase', letterSpacing:'.06em',
              }}>Industria destacada · 2026</div>
            </div>
            <div style={{ padding: 40, display:'flex', flexDirection:'column', justifyContent:'center', gap: 14 }}>
              <span style={{ fontSize: 13, fontWeight: 700, color:'var(--brand-secondary)', textTransform:'uppercase', letterSpacing:'.08em' }}>
                {featured.emoji} {featured.label}
              </span>
              <h2 style={{ fontSize: 32, lineHeight: 1.15, letterSpacing:'-0.02em' }}>
                Inmobiliarias autónomas: leads al instante, sin perder un solo cliente.
              </h2>
              <p style={{ fontSize: 15.5, color:'var(--ink-soft)', lineHeight: 1.55 }}>{featured.pain}</p>
              <p style={{ fontSize: 15.5, color:'var(--ink)' }}>
                <b style={{ color:'var(--brand-primary)' }}>Resultado:</b> {featured.result}
              </p>
              <div style={{ display:'flex', gap:8, flexWrap:'wrap', marginTop: 8 }}>
                {featured.agents.map(a => (
                  <span key={a} style={{
                    fontSize: 12, fontWeight: 600,
                    background:'color-mix(in oklab, var(--brand-primary), white 90%)',
                    color:'var(--brand-primary)',
                    padding:'4px 11px', borderRadius: 999,
                  }}>{a}</span>
                ))}
              </div>
              <div style={{
                marginTop: 6, display:'flex', alignItems:'center', gap: 14, paddingTop: 14,
                borderTop:'1px solid var(--line)',
              }}>
                <div>
                  <div style={{ fontSize: 11, color:'var(--ink-mute)', textTransform:'uppercase', letterSpacing:'.06em', fontWeight: 600 }}>Métrica típica</div>
                  <div style={{ fontSize: 22, fontWeight: 800, color:'var(--success)', letterSpacing:'-0.02em' }}>{featured.metric}</div>
                </div>
                <a href={'blog/' + featured.caseSlug + '.html'} className="btn btn-outline" style={{ marginLeft:'auto' }}>
                  Leer caso completo <Icon.arrow/>
                </a>
              </div>
            </div>
          </div>
        </div>
      </section>

      {/* Other sectors grid */}
      <section className="section hex-pattern subtle" data-screen-label="Other sectors">
        <div className="container">
          <h2 className="h-section" style={{ fontSize: 28, marginBottom: 28, textAlign:'center' }}>
            Otras industrias donde AI Company brilla.
          </h2>
          <div className="grid" style={{ gridTemplateColumns:'repeat(auto-fit, minmax(320px, 1fr))' }}>
            {rest.map(s => (
              <div key={s.id} className="card hoverable" style={{ display:'flex', flexDirection:'column', gap: 12 }}>
                <div style={{ fontSize: 36, lineHeight: 1 }}>{s.emoji}</div>
                <h3 style={{ fontSize: 20, letterSpacing:'-0.02em' }}>{s.label}</h3>
                <p style={{ fontSize: 14, color:'var(--ink-mute)', marginTop: -4 }}>{s.summary}</p>
                <div style={{ paddingTop: 10, borderTop:'1px solid var(--line)' }}>
                  <div style={{ fontSize: 11, color:'var(--ink-mute)', textTransform:'uppercase', letterSpacing:'.06em', fontWeight: 600, marginBottom: 6 }}>Resultado típico</div>
                  <p style={{ fontSize: 13.5, color:'var(--ink-soft)', lineHeight: 1.5 }}>{s.result}</p>
                </div>
                <div style={{ display:'flex', gap:6, flexWrap:'wrap', marginTop:'auto' }}>
                  {s.agents.map(a => (
                    <span key={a} style={{
                      fontSize: 11, fontWeight: 600,
                      background:'var(--bg-subtle)',
                      color:'var(--ink-soft)',
                      padding:'2px 9px', borderRadius: 999,
                    }}>{a}</span>
                  ))}
                </div>
                <div style={{
                  fontSize: 14, fontWeight: 700, color:'var(--success)',
                  paddingTop: 10, borderTop:'1px solid var(--line)',
                }}>{s.metric}</div>
              </div>
            ))}
          </div>
        </div>
      </section>

      <CTAFinal />
    </Layout>
  );
}

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