/* BLOG STRIP — inline preview on the main page, founders-card style */

const POSTS = [
{
  slug: "case-interview-broken",
  category: "RESEARCH",
  date: "APR 2026",
  readTime: "",
  title: "What cubicle measures, and the research it rests on.",
  excerpt: "A look at how we designed our AI skills assessment, what the underlying research says, and how it fits into existing hiring processes.",
  author: "Chris Ackerman",
  tint: "bg-blue",
  hs: "hs-orange",
  thumb: "scatter",
  href: "blog/what-cubicle-measures.html"
},
{
  slug: "why-we-left-consulting",
  category: "FOUNDER NOTE",
  date: "COMING SOON",
  readTime: "",
  title: "Why we left consulting to fix the AI skills gap.",
  excerpt: "Why three consultants left to build the assessment we wished existed when we were the ones evaluating talent.",
  author: "Prasiddhi Jain",
  tint: "bg-orange",
  hs: "hs-green",
  thumb: "checker",
  href: null
},
{
  slug: "ai-changing-workplace",
  category: "FIELD REPORT",
  date: "COMING SOON",
  readTime: "",
  title: "What clients are actually doing with AI at work.",
  excerpt: "Notes from the field on how teams are integrating AI into their day-to-day — what's working, what's theater, and what it means for the next generation of hires.",
  author: "Hamza Malik",
  tint: "bg-lime",
  hs: "hs-green",
  thumb: "workplace",
  href: null
}];


function Checker() {
  // 12×8 grid, dense alternating offset blocks — matches blog.html
  const rects = [];
  const pattern = [
  [0, 16, 40, 64, 88],
  [8, 32, 56, 80],
  [0, 24, 48, 72],
  [16, 40, 64, 88],
  [8, 32, 56, 80],
  [0, 24, 48, 72],
  [16, 40, 64, 88]];

  pattern.forEach((row, ri) => row.forEach((x) =>
  rects.push(<rect key={`${ri}-${x}`} x={x} y={ri * 8} width="8" height="8" fill="#141414" />)
  ));
  return <g>{rects}</g>;
}

function Scatter() {
  const dots = [
  [8, 48], [14, 44], [22, 50], [28, 40], [34, 46], [42, 38],
  [48, 44], [54, 36], [60, 30], [68, 40], [74, 32], [80, 24],
  [86, 34], [20, 34], [36, 28], [50, 22], [64, 18], [78, 14]];

  return (
    <g>
      {dots.map(([x, y], i) =>
      <rect key={i} x={x} y={y} width="2" height="2" fill="#FAFAF8" />
      )}
      <rect x="6" y="6" width="1" height="52" fill="#141414" />
      <rect x="6" y="56" width="84" height="1" fill="#141414" />
    </g>);

}

function Workplace() {
  // Pixel-art office: desk, monitor with AI chat bubble, chair, person silhouette
  // Drawn at 96×64 grid, 2px units. Ink (#141414) outlines, cream highlights.
  return (
    <g>
      {/* floor line */}
      <rect x="0" y="54" width="96" height="1" fill="#141414"/>
      <rect x="0" y="55" width="96" height="1" fill="#141414" opacity="0.25"/>

      {/* MONITOR (left) */}
      {/* screen */}
      <rect x="10" y="14" width="32" height="22" fill="#141414"/>
      <rect x="12" y="16" width="28" height="18" fill="#FAFAF8"/>
      {/* chat bubble lines on screen */}
      <rect x="15" y="19" width="10" height="2" fill="#141414"/>
      <rect x="15" y="23" width="18" height="2" fill="#141414"/>
      <rect x="15" y="27" width="14" height="2" fill="#141414"/>
      {/* blinking cursor block */}
      <rect x="31" y="27" width="2" height="2" fill="#3B6BFF"/>
      {/* AI sparkle / star top-right of screen */}
      <rect x="36" y="18" width="2" height="2" fill="#3B6BFF"/>
      <rect x="34" y="20" width="2" height="2" fill="#3B6BFF"/>
      <rect x="38" y="20" width="2" height="2" fill="#3B6BFF"/>
      <rect x="36" y="22" width="2" height="2" fill="#3B6BFF"/>
      {/* monitor stand */}
      <rect x="24" y="36" width="4" height="4" fill="#141414"/>
      <rect x="20" y="40" width="12" height="2" fill="#141414"/>

      {/* DESK */}
      <rect x="6" y="42" width="56" height="3" fill="#141414"/>
      <rect x="8" y="45" width="2" height="9" fill="#141414"/>
      <rect x="58" y="45" width="2" height="9" fill="#141414"/>

      {/* keyboard */}
      <rect x="16" y="42" width="20" height="1" fill="#FAFAF8" opacity="0.5"/>

      {/* COFFEE CUP on desk */}
      <rect x="48" y="38" width="6" height="4" fill="#141414"/>
      <rect x="54" y="39" width="2" height="2" fill="#141414"/>
      {/* steam */}
      <rect x="49" y="34" width="1" height="2" fill="#141414" opacity="0.5"/>
      <rect x="52" y="33" width="1" height="3" fill="#141414" opacity="0.5"/>

      {/* PERSON (right side, looking at monitor) */}
      {/* head */}
      <rect x="68" y="22" width="8" height="8" fill="#141414"/>
      <rect x="70" y="24" width="4" height="4" fill="#FAFAF8"/>
      {/* eye toward screen */}
      <rect x="68" y="26" width="2" height="2" fill="#141414"/>
      {/* body / shoulders */}
      <rect x="64" y="30" width="16" height="12" fill="#141414"/>
      <rect x="66" y="32" width="12" height="8" fill="#FAFAF8"/>
      {/* arm reaching toward keyboard */}
      <rect x="60" y="38" width="6" height="3" fill="#141414"/>

      {/* CHAIR back */}
      <rect x="82" y="30" width="3" height="14" fill="#141414"/>
      <rect x="80" y="44" width="6" height="2" fill="#141414"/>
      <rect x="82" y="46" width="2" height="8" fill="#141414"/>
    </g>);

}

function PostThumb({ tint, kind }) {
  return (
    <div className="relative w-full aspect-[16/9] border-2 border-ink overflow-hidden">
      <div className={`absolute inset-0 ${tint}`} />
      <svg viewBox="0 0 96 64" preserveAspectRatio="none" className="absolute inset-0 w-full h-full pixelated">
        {kind === "workplace" ? <Workplace /> : kind === "checker" ? <Checker /> : <Scatter />}
      </svg>
      <div className="absolute inset-0 opacity-20 pointer-events-none mix-blend-multiply" style={{
        backgroundImage: "repeating-linear-gradient(to bottom, #141414 0 1px, transparent 1px 5px)"
      }} />
    </div>);

}

function PostCard({ p }) {
  const isComingSoon = !p.href;
  const inner =
  <React.Fragment>
      <PostThumb tint={p.tint} kind={p.thumb} />
      <div className="mt-5">
        <div className="flex items-center justify-between font-mono text-[10px] text-ink-2">
          <span>{p.category}</span>
          {isComingSoon
            ? <span className="bg-ink text-cream px-2 py-0.5 tracking-wider">{p.date}</span>
            : <span>{p.date}</span>}
        </div>
        <h3 className={`font-display font-bold text-2xl md:text-[28px] mt-3 leading-tight tracking-tight ${isComingSoon ? "" : "group-hover:text-blue transition-colors"}`}>{p.title}</h3>
        <p className="mt-3 text-sm md:text-base text-ink-2 leading-relaxed">{p.excerpt}</p>
        <div className="mt-4 flex items-center justify-between">
          <span className="font-mono text-[11px] text-ink-2">by {p.author}</span>
          {isComingSoon
            ? <span className="font-mono text-[11px] text-ink-2 opacity-50">in progress</span>
            : <span className="font-mono text-[11px] text-blue group-hover:underline">read →</span>}
        </div>
      </div>
    </React.Fragment>;


  if (isComingSoon) {
    return (
      <article className={`block border-2 border-ink bg-cream p-5 ${p.hs} btn-chunky`}>
        {inner}
      </article>);
  }
  return (
    <a href={p.href} className={`group block border-2 border-ink bg-cream p-5 ${p.hs} btn-chunky no-underline`}>
      {inner}
    </a>);
}

function Blog() {
  return (
    <section id="blog" data-snap data-screen-label="06 Blog" className="relative bg-cream border-b-2 border-ink">
      <div className="max-w-[1400px] mx-auto px-5 md:px-8 py-20 md:py-28">
        <div className="flex items-center justify-between font-mono text-sm md:text-base mb-10" aria-hidden="true">
          <span>06 / FIELD NOTES</span>
          <span>BLOG · IN PROGRESS</span>
        </div>

        <div className="grid lg:grid-cols-12 gap-8 items-end mb-12">
          <h2 className="lg:col-span-8 font-display font-bold tracking-tight leading-[0.95] text-[44px] md:text-[72px] lg:text-[88px]">
            Field notes from <br />
            <span className="text-orange">the inside.</span>
          </h2>
          <p className="lg:col-span-4 text-base md:text-lg text-ink-2 max-w-md">
            Short essays on hiring, AI, and the work that actually matters once you get the job.
          </p>
        </div>

        <div className="grid sm:grid-cols-2 md:grid-cols-3 gap-8 md:gap-10">
          {POSTS.map((p) =>
          <PostCard key={p.slug} p={p} />
          )}
        </div>
      </div>
    </section>);

}

window.Blog = Blog;