const Solutions = () => {
  const items = [
    {
      artKey: 'Chatbots',
      icon: 'Chat',
      title: 'AI Chatbots & Conversational AI',
      desc: 'Voice and text agents that resolve customer requests, qualify leads, and operate inside your stack — not beside it.',
      tag: 'CX · Sales · Support',
      stat: '−71% ticket load',
      color: '#E63329',
    },
    {
      artKey: 'StartupOps',
      icon: 'Briefcase',
      title: 'Startup Management Systems',
      desc: 'AI-native CRM + Ops. Pipeline, billing, projects, and people in a single intelligent surface that learns your business.',
      tag: 'CRM · Ops',
      stat: '+34% pipeline',
      color: '#F5C518',
    },
    {
      artKey: 'Documents',
      icon: 'Doc',
      title: 'Smart Document Processing',
      desc: 'OCR + LLMs + workflow. Invoices, contracts, KYC, claims — extracted, validated, routed, posted. Untouched by hand.',
      tag: 'OCR · Automation',
      stat: '98.6% accuracy',
      color: '#14A04A',
    },
    {
      artKey: 'Workflow',
      icon: 'Flow',
      title: 'Business Workflow Automation',
      desc: 'No-code orchestration with AI in the loop. Triggers, agents, approvals, escalations across every department.',
      tag: 'Orchestration',
      stat: '14× cycle speed',
      color: '#1B7BD6',
    },
    {
      artKey: 'HRMS',
      icon: 'Users',
      title: 'HRMS — AI Employee Lifecycle',
      desc: 'Hire to retire. Resume parsing, onboarding flows, performance signals, retention prediction — with humans in command.',
      tag: 'People Ops',
      stat: '+22% retention',
      color: '#E63329',
    },
    {
      artKey: 'ERP',
      icon: 'Cube',
      title: 'AI-Enabled ERP',
      desc: 'Finance, inventory, operations — re-architected so forecasts, anomalies, and recommendations live inside the ledger.',
      tag: 'Finance · Inventory',
      stat: '−87% close time',
      color: '#1B7BD6',
    },
  ];

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

  return (
    <Section
      id="solutions"
      eyebrow="What we build"
      title="Six product families. One intelligence layer."
      sub="Every Webever solution shares the same AIDD spine: data → intelligence → automation → outcomes. Pick the surface — the engine is the same."
      className="border-t border-token"
    >
      <div className="grid md:grid-cols-2 lg:grid-cols-3 gap-4 md:gap-5" itemScope itemType="https://schema.org/ItemList">
        {items.map((it, i) => {
          const IconCmp = I[it.icon];
          const Art = SolutionArt[it.artKey];
          const isActive = active === i;
          return (
            <a
              key={i}
              href="#contact"
              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={it.title}/>

              {/* Media */}
              <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-105">
                  {Art ? <Art color={it.color}/> : null}
                </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`}}>
                  Product · {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>

              {/* Body */}
              <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.desc}</p>

                <div className="mt-5 pt-4 border-t border-token w-full flex items-center justify-between">
                  <span className="text-[11px] font-mono uppercase tracking-[0.14em] text-muted">
                    {it.tag}
                  </span>
                  <span className="inline-flex items-center gap-1 text-[12px] font-mono uppercase tracking-[0.14em] group-hover:translate-x-0.5 transition-transform"
                        style={{color: it.color}}>
                    Explore <I.ArrowUR size={14}/>
                  </span>
                </div>
              </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,
                   }}/>
            </a>
          );
        })}
      </div>
    </Section>
  );
};

window.Solutions = Solutions;