/* HOW IT WORKS — 4 steps */

const STEPS = [
{
  n: "01",
  title: "Firm defines the role",
  body: "Pick a template, add a job description or role capability, and customize it. Weight the competencies that matter most for the work, whether you're hiring someone new or evaluating someone on your team.",
  icon: "firm",
  tint: "bg-orange"
},
{
  n: "02",
  title: "Candidate enters the hub",
  body: "Users open cubicle, are guided through instructions and a short tutorial. They start the first job simulation task in under a minute.",
  icon: "hub",
  tint: "bg-blue"
},
{
  n: "03",
  title: "They run the scenarios",
  body: "Structured prompts. Real outputs. Each task is a tight simulation of the actual work, scored against detailed rubrics.",
  icon: "play",
  tint: "bg-lime"
},
{
  n: "04",
  title: "You get a scorecard",
  body: "Competency-level evidence with transcript excerpts. Compare candidates side-by-side. It's easy as that.",
  icon: "score",
  tint: "bg-cream"
}];


function StepIcon({ kind }) {
  // Pixel-ish SVG icons, thick strokes, no flourishes
  const common = { stroke: "#141414", strokeWidth: 3, strokeLinecap: "square", strokeLinejoin: "miter", fill: "none" };
  if (kind === "firm") return (
    <svg viewBox="0 0 64 64" className="w-14 h-14">
      <rect x="8" y="14" width="48" height="40" {...common} fill="#F4F1EA" />
      <rect x="14" y="20" width="10" height="10" fill="#141414" />
      <rect x="28" y="20" width="10" height="10" {...common} />
      <rect x="42" y="20" width="8" height="10" {...common} />
      <line x1="14" y1="38" x2="50" y2="38" {...common} />
      <line x1="14" y1="46" x2="42" y2="46" {...common} />
      <rect x="8" y="8" width="48" height="6" {...common} fill="#141414" />
    </svg>);

  if (kind === "hub") return (
    <svg viewBox="0 0 64 64" className="w-14 h-14">
      <rect x="26" y="26" width="12" height="12" fill="#141414" />
      <rect x="6" y="6" width="10" height="10" {...common} />
      <rect x="48" y="6" width="10" height="10" {...common} />
      <rect x="6" y="48" width="10" height="10" {...common} />
      <rect x="48" y="48" width="10" height="10" {...common} />
      <line x1="16" y1="16" x2="26" y2="26" {...common} strokeDasharray="3 3" />
      <line x1="48" y1="16" x2="38" y2="26" {...common} strokeDasharray="3 3" />
      <line x1="16" y1="48" x2="26" y2="38" {...common} strokeDasharray="3 3" />
      <line x1="48" y1="48" x2="38" y2="38" {...common} strokeDasharray="3 3" />
    </svg>);

  if (kind === "play") return (
    <svg viewBox="0 0 64 64" className="w-14 h-14">
      <rect x="6" y="10" width="52" height="40" {...common} fill="#F4F1EA" />
      <polygon points="26,20 26,40 44,30" fill="#141414" />
      <line x1="6" y1="54" x2="58" y2="54" {...common} />
      <line x1="18" y1="58" x2="46" y2="58" {...common} />
    </svg>);

  if (kind === "score") return (
    <svg viewBox="0 0 64 64" className="w-14 h-14">
      <rect x="10" y="8" width="44" height="48" {...common} fill="#F4F1EA" />
      <rect x="16" y="16" width="20" height="4" fill="#141414" />
      <rect x="16" y="26" width="32" height="4" fill="#2EC2DB" />
      <rect x="16" y="34" width="24" height="4" fill="#355E6E" />
      <rect x="16" y="42" width="28" height="4" fill="#111214" />
      <circle cx="46" cy="18" r="5" {...common} fill="#64B0C2" />
    </svg>);

  return null;
}

function How() {
  return (
    <section id="how" data-snap className="relative bg-cream-2 border-y-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>02 / HOW IT WORKS</span>
          <span>FOUR STEPS</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]">
            One hub. Job simulation tasks. <br />
            <span className="text-orange">Real simulations, real results.</span>
          </h2>
          <p className="lg:col-span-4 text-base md:text-lg text-ink-2 max-w-md">No take-homes. No four-round loops. Candidates/employees log in, perform, you both get a scorecard with an assessment of their skills.

          </p>
        </div>

        <div className="grid sm:grid-cols-2 lg:grid-cols-4 gap-0 border-2 border-ink bg-cream">
          {STEPS.map((s, i) =>
          <div key={s.n}
          className={`relative p-6 md:p-8 border-ink ${i < STEPS.length - 1 ? "lg:border-r-2" : ""} ${i < 2 ? "sm:border-b-2 lg:border-b-0" : ""} ${i % 2 === 0 ? "sm:border-r-2 lg:border-r-2" : "lg:border-r-2"} group hover:bg-cream-2 transition-colors min-h-[340px] flex flex-col`}>
              <div className="flex items-center justify-between mb-6">
                <span className={`font-mono text-xs border-2 border-ink px-2 py-0.5 ${s.tint}`}>STEP {s.n}</span>
                <StepIcon kind={s.icon} />
              </div>
              <h3 className="font-display font-bold text-2xl md:text-[28px] leading-tight mb-3">{s.title}</h3>
              <p className="text-sm md:text-base text-ink-2 leading-relaxed">{s.body}</p>
              {i === STEPS.length - 1 &&
              <div className="mt-auto pt-6 font-mono text-[10px] text-ink-2 opacity-60">
                END_OF_LOOP
              </div>
              }
            </div>
          )}
        </div>

        {/* inset stat bar */}
        <div className="mt-10 border-2 border-ink bg-ink text-cream grid sm:grid-cols-3 divide-x-2 divide-cream/20">
          {[
          { k: "~30 MIN", v: "Per candidate" },
          { k: "2×", v: "more accurate at predicting job performance than traditional case interviews (Sackett et al. 2022)" },
          { k: "0", v: "Memorized frameworks required" }].
          map((s, i) =>
          <div key={i} className="p-6 md:p-8">
              <div className="font-display font-bold text-4xl md:text-5xl">{s.k}</div>
              <div className="font-mono text-xs mt-2 opacity-70">{s.v}</div>
            </div>
          )}
        </div>
        <p className="font-mono text-[10px] mt-2 opacity-60"></p>
      </div>
    </section>);

}

window.How = How;