// Services grid — 6 cards, gradient border hover, enriched with technologies + recent engagement
const { Brain: SBrain, Bolt: SBolt, Code: SCode, Cloud: SCloud, Layers: SLayers, DB: SDB, ArrowUpRight: SArrowUpRight } = window.Icons;

function ServiceCard({ icon: IconC, title, body, kicker, tech, recent }) {
  return (
    <article className="card group" tabIndex={0}>
      <CardGlow />
      <div className="relative flex flex-col h-full gap-6">
        <div className="flex items-start justify-between">
          <div className="w-12 h-12 rounded-xl flex items-center justify-center"
               style={{background: 'var(--surface-2)', border: '1px solid var(--border)', color: 'var(--ink)'}}>
            <IconC size={20} stroke={1.5} />
          </div>
          <span className="font-mono text-[10px] tracking-[0.18em] uppercase pt-1.5" style={{color: 'var(--dim)'}}>
            {kicker}
          </span>
        </div>
        <div>
          <h3 className="font-display text-[20px] font-semibold tracking-tight mb-2.5" style={{color: 'var(--ink)'}}>
            {title}
          </h3>
          <p className="text-[14.5px] leading-[1.55]" style={{color: 'var(--muted)'}}>
            {body}
          </p>
        </div>

        {/* Tech chips */}
        <div className="flex flex-wrap gap-1.5">
          {tech.map(t => <span key={t} className="chip">{t}</span>)}
        </div>

        {/* Recent engagement footnote */}
        <div className="pt-5 mt-auto border-t" style={{borderColor: 'var(--border)'}}>
          <div className="font-mono text-[10px] uppercase tracking-[0.18em] mb-1.5" style={{color: 'var(--dim)'}}>
            Recent
          </div>
          <div className="flex items-start justify-between gap-3">
            <p className="text-[12.5px] leading-[1.5] italic" style={{color: 'var(--muted)'}}>
              {recent}
            </p>
            <a href="#contact" className="flex-shrink-0 inline-flex items-center gap-1 text-[12px] font-medium link-hover"
               style={{color: 'var(--ink)'}}>
              <SArrowUpRight size={13} />
            </a>
          </div>
        </div>
      </div>
    </article>
  );
}

function Services() {
  const services = [
    {
      kicker: '01',
      icon: SBrain,
      title: 'AI Strategy & Consulting',
      body: 'Executive workshops, opportunity mapping, and roadmaps that connect AI ambition to measurable P&L outcomes.',
      tech: ['Discovery', 'ROI Modeling', 'Vendor Eval'],
      recent: 'Mapped a 9-figure AI portfolio for a regional bank — 14 initiatives prioritized in 6 weeks.',
    },
    {
      kicker: '02',
      icon: SBolt,
      title: 'AI Implementation & Agents',
      body: 'Production agentic workflows, LLM applications, and assistant systems engineered for real workloads.',
      tech: ['LangGraph', 'OpenAI', 'Anthropic', 'Evals'],
      recent: 'Built a denial-appeal agent for a health insurer — 4.2 days to 11 hours, 62% manual to 8%.',
    },
    {
      kicker: '03',
      icon: SCode,
      title: 'Custom Software Development',
      body: 'Full-stack product engineering — TypeScript, Python, Go — built by senior teams from day one.',
      tech: ['Next.js', 'FastAPI', 'PostgreSQL', 'tRPC'],
      recent: 'Replatformed a logistics console — 9 microservices, type-safe end-to-end, shipped in 14 weeks.',
    },
    {
      kicker: '04',
      icon: SCloud,
      title: 'Cloud & Infrastructure',
      body: 'AWS, GCP, and hybrid platforms with IaC, observability, and security baked in from architecture.',
      tech: ['AWS', 'Terraform', 'Kubernetes', 'OTel'],
      recent: 'Cut a SaaS platform\'s cloud bill 41% while doubling burst capacity — three regions, zero downtime.',
    },
    {
      kicker: '05',
      icon: SLayers,
      title: 'Application Modernization',
      body: 'Legacy systems re-platformed into modular services — without halting the business that runs on them.',
      tech: ['Strangler Fig', 'Event Sourcing', 'CDC'],
      recent: 'Decomposed a 14-year monolith for a manufacturer — operating-system replacement, no outage.',
    },
    {
      kicker: '06',
      icon: SDB,
      title: 'Data & Analytics Platforms',
      body: 'Lakehouse, streaming, and feature stores — the data foundation every serious AI program needs.',
      tech: ['Snowflake', 'Databricks', 'dbt', 'Kafka'],
      recent: 'Stood up a lakehouse + feature store for a fintech — model time-to-prod from quarters to days.',
    },
  ];

  return (
    <section id="services" className="relative py-28 lg:py-36">
      <div className="max-w-[1280px] mx-auto px-6 lg:px-10">
        <div className="flex flex-col lg:flex-row lg:items-end lg:justify-between gap-8 mb-16 lg:mb-20">
          <div className="max-w-[680px]">
            <div className="reveal eyebrow mb-5">Services</div>
            <h2 className="reveal font-display text-[36px] sm:text-[44px] lg:text-[60px] leading-[1.0] tracking-[-0.04em] font-medium" data-delay="80">
              One partner across your
              <br />
              full <span className="serif-em" style={{color: 'var(--ink-warm)'}}>technology</span> stack.
            </h2>
          </div>
          <p className="reveal text-[15px] leading-[1.6] max-w-[380px]" style={{color: 'var(--muted)'}} data-delay="160">
            Six interlocking practices — software, cloud, data, and AI — delivered by senior engineers who
            have shipped the work before, not handed it off.
          </p>
        </div>

        <div className="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-5">
          {services.map((s, i) => (
            <div key={s.title} className="reveal" data-delay={80 + (i % 3) * 90}>
              <ServiceCard {...s} />
            </div>
          ))}
        </div>
      </div>
    </section>
  );
}

window.Services = Services;