/* global React */
// ============================================================
// SERVICES — what Mir Consulting builds. The core of the practice.
// Three offerings, each a card with a small live/animated motif.
// ============================================================

function Services() {
  return (
    <Section id="services" py={104}>
      <div className="svc-head" style={{display:'grid', gridTemplateColumns:'1fr 1fr', gap:60, alignItems:'end', marginBottom:56}}>
        <Reveal>
          <Eyebrow color="var(--cothon-coral)" mark>What we do</Eyebrow>
          <h2 style={{fontSize:'clamp(34px, 4.4vw, 58px)', fontWeight:600, letterSpacing:'-0.025em', lineHeight:1.04, margin:'18px 0 0'}}>
            Three ways we put AI<br/>
            <span className="serif-italic" style={{color:'var(--cothon-sand)', fontWeight:400}}>to work for you.</span>
          </h2>
        </Reveal>
        <Reveal delay={120}>
          <p style={{fontSize:17, color:'var(--cothon-sand)', lineHeight:1.6, margin:0, maxWidth:480, justifySelf:'end'}}>
            We're a small, senior team. We embed with yours, find the workflows where
            AI actually pays off, and build them: model-agnostic, on your data, deployed
            where your work already happens.
          </p>
        </Reveal>
      </div>

      <div className="svc-grid" style={{display:'grid', gridTemplateColumns:'repeat(3, 1fr)', gap:18}}>
        <ServiceCard
          index="01" Icon={MessageSq} title="Custom AI chatbots"
          body="Model-agnostic assistants that integrate with GPT, Claude, Gemini, or your own models, trained on your data and deployed across the platforms your team and customers already use."
          points={['Works with any model', 'Trained on your knowledge base', 'Multi-platform deployment']}
          motif={<ServiceScene mode="chat"/>}
        />
        <ServiceCard
          index="02" Icon={Workflow} title="AI integration & automation"
          body="End-to-end AI transformation: workflow automation, process optimization, and custom internal tools that remove the busywork and drive measurable business value."
          points={['Workflow automation', 'Process optimization', 'Training & ongoing support']}
          motif={<ServiceScene mode="wire"/>}
        />
        <ServiceCard
          index="03" Icon={Layers} title="Custom AI products"
          body="When an internal tool deserves to be a product, we build it end-to-end: design, engineering, and ML. Cothon, our procurement intelligence platform, started exactly here."
          points={['Full design & engineering', 'Production ML systems', 'Built to scale to a product']}
          motif={<ServiceScene mode="build"/>}
          accent
        />
      </div>
    </Section>
  );
}

function ServiceCard({ index, Icon, title, body, points, motif, accent }) {
  const [hover, setHover] = React.useState(false);
  const [ref, seen] = useInView();
  return (
    <div ref={ref}
      onMouseEnter={() => setHover(true)} onMouseLeave={() => setHover(false)}
      style={{
        position:'relative', display:'flex', flexDirection:'column',
        background:'var(--cothon-navy-panel)',
        border:`1px solid ${hover ? 'rgba(239,141,136,0.45)' : 'var(--cothon-navy-border)'}`,
        borderRadius:16, overflow:'hidden',
        transform: seen ? (hover ? 'translateY(-4px)' : 'translateY(0)') : 'translateY(28px)',
        opacity: seen ? 1 : 0,
        transition:'transform 360ms var(--ease-out), opacity 600ms var(--ease-out), border-color 240ms',
        boxShadow: hover ? '0 30px 60px -30px rgba(0,0,0,0.6)' : 'none',
      }}>
      {/* Live motif header */}
      <div style={{position:'relative', height:150, borderBottom:'1px solid var(--cothon-navy-border)', overflow:'hidden', background:'rgba(13,43,82,0.5)'}}>
        {motif}
        <div style={{position:'absolute', top:14, left:16, display:'flex', alignItems:'center', justifyContent:'center', width:42, height:42, borderRadius:11, background:'var(--cothon-navy-panel)', border:`1px solid ${accent?'rgba(239,141,136,0.5)':'var(--cothon-navy-border)'}`, boxShadow:'0 0 0 4px rgba(13,43,82,0.9)', zIndex:2}}>
          <Icon size={20} color={accent?'var(--cothon-coral)':'var(--cothon-cream)'}/>
        </div>
        <div style={{position:'absolute', top:18, right:18, fontFamily:'JetBrains Mono, monospace', fontSize:11, color:'var(--cothon-sand)', letterSpacing:'0.14em', fontWeight:600, zIndex:2, background:'rgba(13,43,82,0.9)', padding:'2px 5px', borderRadius:5}}>{index}</div>
      </div>

      <div style={{padding:'22px 22px 24px', flex:1, display:'flex', flexDirection:'column'}}>
        <h3 style={{fontSize:21, fontWeight:600, letterSpacing:'-0.015em', margin:'0 0 10px'}}>{title}</h3>
        <p style={{fontSize:13.5, color:'var(--cothon-sand)', lineHeight:1.6, margin:'0 0 18px'}}>{body}</p>
        <div style={{display:'flex', flexDirection:'column', gap:9, marginTop:'auto'}}>
          {points.map(pt => (
            <div key={pt} style={{display:'flex', alignItems:'center', gap:10, fontSize:13, color:'var(--cothon-cream)'}}>
              <Check size={15} color="var(--cothon-mint)"/> {pt}
            </div>
          ))}
        </div>
      </div>
    </div>
  );
}

Object.assign(window, { Services });