const Industries = () => {
  const list = [
    { artKey: 'Manufacturing', icon: 'Factory', title: 'Manufacturing',
      use: 'Predictive maintenance · defect vision · OEE optimization',
      stat: '+32% OEE', color: '#E63329' },
    { artKey: 'Healthcare', icon: 'Heart', title: 'Healthcare',
      use: 'Clinical doc summarization · prior-auth automation · triage',
      stat: '−68% admin time', color: '#14A04A' },
    { artKey: 'Retail', icon: 'Bag', title: 'Retail',
      use: 'Demand forecasting · planogram intelligence · loss prevention',
      stat: '+18% sell-through', color: '#1B7BD6' },
    { artKey: 'Logistics', icon: 'Truck', title: 'Transportation & Logistics',
      use: 'Route optimization · ETA prediction · freight document AI',
      stat: '−24% miles driven', color: '#F5C518' },
    { artKey: 'Hospitality', icon: 'Bed', title: 'Hospitality',
      use: 'Dynamic pricing · guest concierge agents · ops automation',
      stat: '+11% RevPAR', color: '#E63329' },
    { artKey: 'eCommerce', icon: 'Cart', title: 'eCommerce',
      use: 'Personalized merchandising · returns AI · catalog enrichment',
      stat: '+27% AOV', color: '#1B7BD6' },
    { artKey: 'RealEstate', icon: 'Building', title: 'Real Estate',
      use: 'Lease abstraction · tenant scoring · maintenance triage',
      stat: '−54% lease cycle', color: '#14A04A' },
    { artKey: 'Education', icon: 'Cap', title: 'Education',
      use: 'Adaptive learning · enrollment ops · plagiarism detection',
      stat: '+22% completion', color: '#F5C518' },
    { artKey: 'Automotive', icon: 'Car', title: 'Automotive',
      use: 'Dealer CRM AI · claims automation · supply chain forecasting',
      stat: '−41% claim time', color: '#E63329' },
  ];

  const [active, setActive] = useState(null);
  const [openIndustry, setOpenIndustry] = useState(null);

  return (
    <Section
      id="industries"
      eyebrow="Industries served"
      title="Built for the operators of nine sectors."
      sub="The AIDD spine adapts to your domain. Hover any sector to see the AI use-cases — click View Case Studies for real customer outcomes."
      className="border-t border-token"
    >
      <div className="grid sm:grid-cols-2 lg:grid-cols-3 gap-4 md:gap-5" itemScope itemType="https://schema.org/ItemList">
        {list.map((it, i) => {
          const IconCmp = I[it.icon];
          const Art = IndustryArt[it.artKey];
          const isActive = active === i;
          const csCount = (CaseStudies[it.artKey] || []).length;
          return (
            <article
              key={i}
              onMouseEnter={() => setActive(i)}
              onMouseLeave={() => setActive(null)}
              className="reveal card group relative overflow-hidden transition-all hover:-translate-y-1"
              style={{
                transitionDelay: `${i*40}ms`,
                boxShadow: isActive ? `0 20px 40px -20px ${it.color}55` : undefined,
              }}
              itemScope itemType="https://schema.org/Service"
              itemProp="itemListElement"
            >
              <meta itemProp="position" content={i+1}/>
              <meta itemProp="serviceType" content={`AI for ${it.title}`}/>

              <div className="relative h-[160px] overflow-hidden border-b border-token"
                   style={{ background: `linear-gradient(135deg, ${it.color}10 0%, transparent 100%)` }}>
                <div className="absolute inset-0 transition-transform duration-700 group-hover:scale-110">
                  <Art color={it.color}/>
                </div>
                <div className="absolute top-3 left-3 px-2 py-1 rounded-md font-mono text-[10px] tracking-[0.14em] uppercase backdrop-blur-sm"
                     style={{background: 'var(--surface)', color: it.color, border: `1px solid ${it.color}30`}}>
                  Sector · {String(i+1).padStart(2,'0')}
                </div>
                <div className="absolute top-3 right-3 px-2.5 py-1 rounded-md text-[11px] font-mono font-medium backdrop-blur-sm"
                     style={{background: it.color, color: '#fff'}}>
                  {it.stat}
                </div>
              </div>

              <div className="p-6">
                <div className="flex items-start gap-3 mb-3">
                  <div className="w-10 h-10 rounded-lg border border-token flex items-center justify-center flex-shrink-0"
                       style={{ color: it.color, background: `${it.color}0D` }}>
                    <IconCmp size={18}/>
                  </div>
                  <div className="flex-1 min-w-0">
                    <h3 className="display text-[20px] leading-[1.15]" itemProp="name">{it.title}</h3>
                  </div>
                </div>
                <p className="text-[13.5px] text-muted leading-relaxed" itemProp="description">{it.use}</p>
                <button
                  onClick={() => setOpenIndustry(it)}
                  className="mt-5 pt-4 border-t border-token w-full flex items-center justify-between cursor-pointer group/btn"
                >
                  <span className="text-[11px] font-mono uppercase tracking-[0.14em] text-muted group-hover/btn:text-[var(--text)] transition-colors">
                    View {csCount} case {csCount === 1 ? 'study' : 'studies'}
                  </span>
                  <span className="inline-flex items-center group-hover/btn:translate-x-0.5 transition-transform" style={{color: it.color}}>
                    <I.ArrowUR size={14}/>
                  </span>
                </button>
              </div>

              <div className="absolute inset-x-0 top-0 h-0.5 transition-opacity duration-300"
                   style={{
                     background: `linear-gradient(90deg, transparent, ${it.color}, transparent)`,
                     opacity: isActive ? 1 : 0,
                   }}/>
            </article>
          );
        })}
      </div>

      {openIndustry && (
        <CaseStudyLightbox
          industry={openIndustry}
          color={openIndustry.color}
          onClose={() => setOpenIndustry(null)}
        />
      )}
    </Section>
  );
};

window.Industries = Industries;