// Selected Work — case study cards with rich custom-rendered thumbnails

const { ArrowUpRight: WArrowUR } = window.Icons;

// ──────────────────────────────────────────────────────────
// Per-case-study thumbnails (rendered as inline SVG)
// ──────────────────────────────────────────────────────────

function ThumbHealth() {
  return (
    <svg viewBox="0 0 480 300" className="w-full h-full" preserveAspectRatio="xMidYMid slice" aria-hidden="true">
      <defs>
        <linearGradient id="hbg" x1="0" x2="1" y1="0" y2="1">
          <stop offset="0%" stopColor="#0D0F14" />
          <stop offset="100%" stopColor="#1A1D26" />
        </linearGradient>
        <linearGradient id="hbar" x1="0" x2="1" y1="0" y2="0">
          <stop offset="0%" stopColor="#3B82F6" />
          <stop offset="100%" stopColor="#8B5CF6" />
        </linearGradient>
      </defs>
      <rect width="480" height="300" fill="url(#hbg)" />
      {/* Sparkline grid */}
      <g stroke="#1F2230" strokeWidth="0.5">
        {Array.from({ length: 6 }).map((_, i) => (
          <line key={i} x1="40" x2="440" y1={60 + i * 36} y2={60 + i * 36} />
        ))}
      </g>
      {/* Before bar (slow) */}
      <g>
        <text x="40" y="50" fill="#8A8F9C" fontFamily="JetBrains Mono" fontSize="9" letterSpacing="1.5">BEFORE · 4.2 DAYS</text>
        <rect x="40" y="58" width="380" height="8" rx="4" fill="#1F2230" />
        <rect x="40" y="58" width="340" height="8" rx="4" fill="#555863" opacity="0.6" />
      </g>
      {/* After bar (fast) */}
      <g>
        <text x="40" y="100" fill="#F5F4EE" fontFamily="JetBrains Mono" fontSize="9" letterSpacing="1.5">AFTER · 11 HOURS</text>
        <rect x="40" y="108" width="380" height="8" rx="4" fill="#1F2230" />
        <rect x="40" y="108" width="42" height="8" rx="4" fill="url(#hbar)" />
      </g>
      {/* Big delta */}
      <text x="40" y="200" fill="#F5F4EE" fontFamily="Inter" fontWeight="500" fontSize="56" letterSpacing="-2.5">−89%</text>
      <text x="40" y="230" fill="#8A8F9C" fontFamily="Inter" fontSize="13" letterSpacing="-0.2">cycle time, denial appeals</text>
      {/* Annotation node */}
      <g transform="translate(340, 180)">
        <circle r="32" fill="none" stroke="#8B5CF6" strokeWidth="1" opacity="0.4" />
        <circle r="20" fill="none" stroke="#8B5CF6" strokeWidth="1" opacity="0.7" />
        <circle r="6" fill="#8B5CF6" />
        <circle r="2" fill="#F5F4EE" />
      </g>
    </svg>
  );
}

function ThumbLogistics() {
  return (
    <svg viewBox="0 0 480 300" className="w-full h-full" preserveAspectRatio="xMidYMid slice" aria-hidden="true">
      <defs>
        <linearGradient id="lbg" x1="0" x2="1" y1="0" y2="1">
          <stop offset="0%" stopColor="#0D0F14" />
          <stop offset="100%" stopColor="#13151C" />
        </linearGradient>
        <radialGradient id="lglow">
          <stop offset="0%" stopColor="#22D3EE" stopOpacity="0.6" />
          <stop offset="100%" stopColor="#22D3EE" stopOpacity="0" />
        </radialGradient>
      </defs>
      <rect width="480" height="300" fill="url(#lbg)" />
      {/* World map abstract — dotted hex grid */}
      <g fill="#292C38">
        {Array.from({ length: 8 }).flatMap((_, row) =>
          Array.from({ length: 16 }).map((__, col) => {
            const x = 30 + col * 28 + (row % 2 ? 14 : 0);
            const y = 40 + row * 28;
            return <circle key={`${row}-${col}`} cx={x} cy={y} r="1.2" />;
          })
        )}
      </g>
      {/* Route lines */}
      <g stroke="#3B82F6" strokeWidth="1.2" fill="none" opacity="0.7">
        <path d="M 70 90 Q 180 50, 270 110" />
        <path d="M 270 110 Q 340 170, 420 130" />
        <path d="M 70 90 Q 130 200, 250 220" />
      </g>
      {/* Nodes */}
      {[[70,90], [270,110], [420,130], [250,220]].map(([x,y], i) => (
        <g key={i}>
          <circle cx={x} cy={y} r="20" fill="url(#lglow)" />
          <circle cx={x} cy={y} r="4" fill="#22D3EE" />
        </g>
      ))}
      {/* Stat */}
      <text x="30" y="270" fill="#F5F4EE" fontFamily="Inter" fontWeight="500" fontSize="22" letterSpacing="-0.8">9 microservices</text>
      <text x="30" y="288" fill="#8A8F9C" fontFamily="JetBrains Mono" fontSize="9" letterSpacing="1.5">TYPE-SAFE · 14 WEEKS</text>
    </svg>
  );
}

function ThumbFinance() {
  return (
    <svg viewBox="0 0 480 300" className="w-full h-full" preserveAspectRatio="xMidYMid slice" aria-hidden="true">
      <defs>
        <linearGradient id="fbg" x1="0" x2="0" y1="0" y2="1">
          <stop offset="0%" stopColor="#11100D" />
          <stop offset="100%" stopColor="#0D0F14" />
        </linearGradient>
        <linearGradient id="fline" x1="0" x2="1" y1="0" y2="0">
          <stop offset="0%" stopColor="#E9B872" stopOpacity="0" />
          <stop offset="20%" stopColor="#E9B872" />
          <stop offset="100%" stopColor="#8B5CF6" />
        </linearGradient>
      </defs>
      <rect width="480" height="300" fill="url(#fbg)" />
      {/* Grid */}
      <g stroke="#1F2230" strokeWidth="0.5">
        {Array.from({ length: 8 }).map((_, i) => (
          <line key={`v${i}`} x1={60 + i * 55} x2={60 + i * 55} y1="40" y2="240" />
        ))}
        {Array.from({ length: 5 }).map((_, i) => (
          <line key={`h${i}`} x1="60" x2="445" y1={40 + i * 50} y2={40 + i * 50} />
        ))}
      </g>
      {/* Climbing line */}
      <path d="M 60 220 L 115 200 L 170 210 L 225 170 L 280 160 L 335 110 L 390 90 L 445 50"
            stroke="url(#fline)" strokeWidth="2" fill="none" />
      {/* Area fill */}
      <path d="M 60 220 L 115 200 L 170 210 L 225 170 L 280 160 L 335 110 L 390 90 L 445 50 L 445 240 L 60 240 Z"
            fill="url(#fline)" opacity="0.10" />
      {/* End point */}
      <circle cx="445" cy="50" r="5" fill="#E9B872" />
      <circle cx="445" cy="50" r="12" fill="none" stroke="#E9B872" strokeWidth="1" opacity="0.4" />
      {/* Y axis labels */}
      <g fontFamily="JetBrains Mono" fontSize="8" fill="#555863" letterSpacing="1">
        <text x="30" y="50">3.0M</text>
        <text x="30" y="145">1.5M</text>
        <text x="30" y="240">0</text>
      </g>
      {/* Stat */}
      <text x="60" y="278" fill="#F5F4EE" fontFamily="Inter" fontWeight="500" fontSize="22" letterSpacing="-0.8">$2.8M ARR</text>
      <text x="180" y="278" fill="#8A8F9C" fontFamily="JetBrains Mono" fontSize="9" letterSpacing="1.5">UNLOCKED · 9 MONTHS</text>
    </svg>
  );
}

// ──────────────────────────────────────────────────────────
// Selected Work section
// ──────────────────────────────────────────────────────────
function SelectedWork() {
  const work = [
    {
      sector: 'Healthcare',
      kicker: 'Case 001',
      title: 'Denial-appeal agent for a regional health insurer',
      summary: 'A retrieval-augmented agent drafts evidence-cited appeal letters from denial codes, policy clauses, and patient records — then routes to an adjudicator for final review.',
      metrics: [
        { v: '4.2d → 11h', l: 'Cycle time' },
        { v: '62% → 8%', l: 'Manual touchpoints' },
        { v: '+34%', l: 'Approval rate' },
      ],
      tags: ['RAG', 'Agents', 'HIPAA'],
      thumb: ThumbHealth,
    },
    {
      sector: 'Logistics',
      kicker: 'Case 002',
      title: 'Replatformed logistics control tower',
      summary: 'A monolithic dispatch console decomposed into nine type-safe services. Same operators. Same workflows. New foundation — observable, modular, and ready for ML routing.',
      metrics: [
        { v: '9', l: 'Services shipped' },
        { v: '14 wks', l: 'Cutover window' },
        { v: '0', l: 'Downtime minutes' },
      ],
      tags: ['Next.js', 'tRPC', 'Postgres'],
      thumb: ThumbLogistics,
    },
    {
      sector: 'Financial Services',
      kicker: 'Case 003',
      title: 'AI underwriting copilot for a specialty lender',
      summary: 'An LLM-powered copilot reads applications, surfaces risk signals, and drafts memos against the lender\'s underwriting playbook — closing a 9-month ARR gap in one quarter.',
      metrics: [
        { v: '$2.8M', l: 'ARR unlocked' },
        { v: '3.1×', l: 'Apps per analyst' },
        { v: '94%', l: 'Memo retention' },
      ],
      tags: ['LLM', 'Evals', 'SOC 2'],
      thumb: ThumbFinance,
    },
  ];

  return (
    <section id="work" 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-14 lg:mb-20">
          <div className="max-w-[720px]">
            <div className="reveal eyebrow mb-5">Selected work</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">
              Engagements that <span className="serif-em" style={{color: 'var(--ink-warm)'}}>shipped</span>
              <br />
              — and stayed shipped.
            </h2>
          </div>
          <a href="#contact" className="reveal inline-flex items-center gap-2 link-hover font-mono text-[11px] uppercase tracking-[0.18em] pr-5" style={{color: 'var(--ink)'}} data-delay="160">
            Discuss your engagement <WArrowUR size={12} />
          </a>
        </div>

        <div className="grid grid-cols-1 lg:grid-cols-12 gap-6">
          {work.map((w, i) => {
            const Thumb = w.thumb;
            // Vary spans: first item full-width on lg, others half
            const span = i === 0 ? 'lg:col-span-12' : 'lg:col-span-6';
            const layout = i === 0 ? 'lg:grid lg:grid-cols-2' : '';
            return (
              <article key={w.kicker} className={`work-card reveal ${span}`} data-delay={i * 110}>
                <div className={`${layout}`}>
                  <div className={`work-thumb ${i === 0 ? '' : 'lg:aspect-[16/10]'}`}>
                    <Thumb />
                  </div>
                  <div className="p-7 lg:p-9 flex flex-col">
                    <div className="flex items-center gap-3 mb-5">
                      <span className="chip">{w.sector}</span>
                      <span className="font-mono text-[10px] uppercase tracking-[0.18em]" style={{color: 'var(--dim)'}}>
                        / {w.kicker}
                      </span>
                    </div>
                    <h3 className="font-display text-[22px] lg:text-[26px] font-semibold tracking-[-0.02em] leading-[1.2] mb-4"
                        style={{color: 'var(--ink)'}}>
                      {w.title}
                    </h3>
                    <p className="text-[14.5px] leading-[1.6] mb-7" style={{color: 'var(--muted)'}}>
                      {w.summary}
                    </p>
                    <div className="grid grid-cols-3 gap-4 pt-5 mt-auto border-t" style={{borderColor: 'var(--border)'}}>
                      {w.metrics.map(m => (
                        <div key={m.l}>
                          <div className="font-display text-[18px] lg:text-[22px] font-medium tracking-[-0.02em] leading-none mb-1.5"
                               style={{color: 'var(--ink)'}}>
                            {m.v}
                          </div>
                          <div className="font-mono text-[9.5px] uppercase tracking-[0.16em]" style={{color: 'var(--dim)'}}>
                            {m.l}
                          </div>
                        </div>
                      ))}
                    </div>
                  </div>
                </div>
              </article>
            );
          })}
        </div>

        <p className="reveal mt-10 text-[12.5px] italic max-w-[600px]" style={{color: 'var(--dim)'}} data-delay="100">
          * Engagements anonymized at client request. Detailed references available under NDA.
        </p>
      </div>
    </section>
  );
}

window.SelectedWork = SelectedWork;