// CLIENTS SECTION — who Rocketberry serves.
// Placeholder list — swap in real client logos/names later.

const CLIENTS = [
  { id: 'northwind', name: 'Northwind Industries',  sector: 'Manufacturing',  mono: 'NW', color: '#D6248C', blurb: 'Tier-1 supplier · 12-line stamping facility' },
  { id: 'velosys',   name: 'Velosys Logistics',     sector: 'Logistics',      mono: 'VL', color: '#A14BCC', blurb: 'Mid-market 3PL across 4 regional hubs' },
  { id: 'helio',     name: 'Helio Care',            sector: 'Healthcare',     mono: 'HC', color: '#7027A8', blurb: 'Regional hospital network · 12 facilities' },
  { id: 'atlas',     name: 'Atlas Retail Group',    sector: 'Retail',         mono: 'AR', color: '#1F2754', blurb: 'Multi-banner grocery · 220 stores' },
  { id: 'parallel',  name: 'Parallel Finance',      sector: 'Fintech',        mono: 'PF', color: '#D6248C', blurb: 'SMB lending platform · $1.4B AUM' },
  { id: 'solara',    name: 'Solara Education',      sector: 'EdTech',         mono: 'SE', color: '#A14BCC', blurb: 'Online higher-ed · 44k active learners' },
  { id: 'kinetic',   name: 'Kinetic Properties',    sector: 'Real Estate',    mono: 'KP', color: '#7027A8', blurb: 'Commercial owner · 8.2M sq ft portfolio' },
  { id: 'volta',     name: 'Volta Mobility',        sector: 'Automotive',     mono: 'VM', color: '#1F2754', blurb: 'Multi-state dealer group · 62 stores' },
];

const Clients = () => {
  return (
    <Section
      id="clients"
      eyebrow="Who we serve"
      title={<>Operators who launched AI<br/>with Rocketberry on board.</>}
      sub="From mid-market manufacturers to nation-scale retailers — these are the teams whose workflows we re-architected with AIDD."
      className="border-t border-token"
    >
      <div className="grid sm:grid-cols-2 lg:grid-cols-4 gap-4 md:gap-5"
           itemScope itemType="https://schema.org/ItemList">
        {CLIENTS.map((c, i) => (
          <article
            key={c.id}
            className="reveal card relative overflow-hidden p-6 transition-all hover:-translate-y-1 group"
            style={{transitionDelay: `${i*30}ms`}}
            itemScope itemType="https://schema.org/Organization"
            itemProp="itemListElement"
          >
            <meta itemProp="position" content={i+1}/>

            {/* Monogram badge */}
            <div className="flex items-start justify-between mb-7">
              <div
                className="w-14 h-14 rounded-xl flex items-center justify-center font-mono font-semibold text-[18px] tracking-tight border"
                style={{
                  background: `linear-gradient(135deg, ${c.color}14, ${c.color}06)`,
                  color: c.color,
                  borderColor: c.color + '30',
                }}
              >
                {c.mono}
              </div>
              <span className="font-mono text-[9.5px] tracking-[0.18em] uppercase text-muted">
                #{String(i+1).padStart(2,'0')}
              </span>
            </div>

            <div className="font-mono text-[10px] tracking-[0.18em] uppercase text-muted mb-1.5">
              {c.sector}
            </div>
            <h3 className="display text-[20px] leading-[1.2]" itemProp="name">{c.name}</h3>
            <p className="mt-2 text-[13px] text-muted leading-relaxed">{c.blurb}</p>

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

      {/* Strip stat below grid */}
      <div className="mt-10 flex flex-wrap items-center gap-3 justify-between pt-7 border-t border-token">
        <div className="flex items-center gap-3 text-[13px] text-muted">
          <span className="w-2 h-2 rounded-full bg-brand-magenta animate-pulse"/>
          Working with <span style={{color: 'var(--text)', fontWeight: 600}}>{CLIENTS.length}+ operators</span> across {new Set(CLIENTS.map(c => c.sector)).size} sectors.
        </div>
        <a href="#products" className="btn btn-ghost text-[13px]">
          See what we built <I.Arrow size={13}/>
        </a>
      </div>
    </Section>
  );
};

window.CLIENTS = CLIENTS;
window.Clients = Clients;