/* global React */
// ============================================================
// CASE STUDY — Sawa Energy. The flagship proof: the engagement that
// became the seed for Cothon. Animated outcome numbers + testimonial.
// ============================================================

function CaseStudy() {
  const [ref, seen] = useInView({ threshold: 0.3 });
  return (
    <Section id="work" py={104}>
      <Reveal>
        <div style={{textAlign:'center', maxWidth:720, margin:'0 auto 52px'}}>
          <Eyebrow color="var(--cothon-coral)" mark>Selected work</Eyebrow>
          <h2 style={{fontSize:'clamp(34px, 4.2vw, 56px)', fontWeight:600, letterSpacing:'-0.025em', lineHeight:1.05, margin:'16px 0 0'}}>
            Proof, not{' '}
            <span className="serif-italic" style={{color:'var(--cothon-sand)', fontWeight:400}}>promises.</span>
          </h2>
        </div>
      </Reveal>

      <Reveal delay={120}>
        <div ref={ref} className="case-card" style={{
          display:'grid', gridTemplateColumns:'1.1fr 0.9fr', gap:0,
          borderRadius:18, overflow:'hidden',
          border:'1px solid var(--cothon-navy-border)', background:'var(--cothon-navy-panel)',
        }}>
          {/* Left: narrative */}
          <div style={{padding:'40px 44px', borderRight:'1px solid var(--cothon-navy-border)'}}>
            <div style={{display:'flex', alignItems:'center', gap:12, marginBottom:24}}>
              <div style={{width:44, height:44, borderRadius:11, background:'linear-gradient(135deg, rgba(239,141,136,0.18), rgba(214,138,89,0.12))', border:'1px solid rgba(239,141,136,0.35)', display:'flex', alignItems:'center', justifyContent:'center'}}>
                <Zap size={20} color="var(--cothon-coral)"/>
              </div>
              <div>
                <div style={{fontSize:20, fontWeight:600, letterSpacing:'-0.01em'}}>Sawa Energy</div>
                <div style={{fontSize:12, color:'var(--cothon-sand)', fontFamily:'JetBrains Mono, monospace', marginTop:2}}>Renewable energy · East Africa</div>
              </div>
            </div>

            <p style={{fontSize:16, color:'var(--cothon-cream)', lineHeight:1.65, margin:'0 0 18px'}}>
              Sawa Energy was winning fewer projects than it should, not for lack of
              capability, but because assembling each proposal swallowed weeks of senior time.
            </p>
            <p style={{fontSize:15, color:'var(--cothon-sand)', lineHeight:1.65, margin:'0 0 28px'}}>
              We built AI-powered proposal tooling on their own knowledge base and past wins:
              opportunity triage, requirement extraction, and drafted responses their team
              reviewed and shipped. The result reshaped their sales operations, and proved a
              pattern every bidding company needs. That insight became Cothon.
            </p>

            <blockquote style={{
              margin:0, padding:'20px 22px', borderRadius:12,
              background:'rgba(13,43,82,0.5)', border:'1px solid var(--cothon-navy-border)',
              borderLeft:'2px solid var(--cothon-coral)',
            }}>
              <p style={{fontSize:15, color:'var(--cothon-cream)', lineHeight:1.6, margin:'0 0 14px', fontStyle:'italic'}}>
                &ldquo;Mir Consulting transformed our sales process with their AI solutions. We&rsquo;ve
                seen a 60% increase in proposal efficiency and can now handle triple the number
                of projects.&rdquo;
              </p>
              <div style={{display:'flex', alignItems:'center', gap:11}}>
                <div style={{width:32, height:32, borderRadius:9999, background:'linear-gradient(135deg,#EF8D88,#D68A59)', display:'flex', alignItems:'center', justifyContent:'center', fontSize:12, fontWeight:700, color:'var(--cothon-navy)'}}>JZ</div>
                <div>
                  <div style={{fontSize:13, fontWeight:600, color:'var(--cothon-cream)'}}>Jordan Zipkin</div>
                  <div style={{fontSize:11.5, color:'var(--cothon-sand)'}}>CIO, Sawa Energy</div>
                </div>
              </div>
            </blockquote>
          </div>

          {/* Right: outcome numbers */}
          <div style={{padding:'40px 40px', background:'rgba(13,43,82,0.4)', display:'flex', flexDirection:'column', justifyContent:'center', gap:8}}>
            <div style={{fontSize:11, color:'var(--cothon-sand)', fontFamily:'JetBrains Mono, monospace', letterSpacing:'0.14em', marginBottom:14}}>MEASURED OUTCOMES</div>
            {[
              { to:60, suffix:'%', label:'faster proposal turnaround', sub:'weeks compressed to days' },
              { to:3,  suffix:'x', label:'more projects pursued', sub:'same team, triple the throughput' },
              { to:85, suffix:'%', label:'of manual effort removed', sub:'reviewed, not written from scratch' },
            ].map((s, i) => (
              <div key={i} style={{padding:'18px 0', borderBottom: i<2 ? '1px solid var(--cothon-navy-border)' : 'none'}}>
                <div style={{display:'flex', alignItems:'baseline', gap:14}}>
                  <div style={{fontSize:52, fontWeight:700, letterSpacing:'-0.04em', lineHeight:0.9, fontVariantNumeric:'tabular-nums', minWidth:108, textAlign:'right'}}>
                    <Gradient>{seen ? <CountUp to={s.to} suffix={s.suffix} duration={1500} /> : `0${s.suffix}`}</Gradient>
                  </div>
                  <div>
                    <div style={{fontSize:14, fontWeight:500, color:'var(--cothon-cream)'}}>{s.label}</div>
                    <div style={{fontSize:12, color:'var(--cothon-sand)', marginTop:3}}>{s.sub}</div>
                  </div>
                </div>
              </div>
            ))}
          </div>
        </div>
      </Reveal>
    </Section>
  );
}

Object.assign(window, { CaseStudy });