/* global React */

const GALLERY = [
  {
    title: "The Keys",
    sub: "First-person · 3:12 · 2024",
    tags: ["Family", "Interview", "Archive"],
    note: "A grandson learns to drive in a car older than he is. Told entirely in hands and dashboards.",
    grad: "linear-gradient(160deg, #2a1d3d 0%, #7b3a5a 70%, #e8a178 100%)",
    shape: "car",
  },
  {
    title: "Between Shifts",
    sub: "Documentary · 4:40 · 2023",
    tags: ["Labor", "Verité", "Sound"],
    note: "A nurse's break room, recorded over four weeks. The story is what people say when no one is charting.",
    grad: "linear-gradient(160deg, #0f2a2e 0%, #2e7a62 65%, #d4e37a 100%)",
    shape: "cup",
  },
  {
    title: "The Second Language",
    sub: "Essay · 2:48 · 2025",
    tags: ["Memoir", "Diaspora"],
    note: "Three generations pronounce the same family name. None of them the same way.",
    grad: "linear-gradient(160deg, #1a2430 0%, #5f7aa0 60%, #c3d4e8 100%)",
    shape: "wave",
  },
  {
    title: "Corner Lot",
    sub: "Place-based · 3:55 · 2024",
    tags: ["Community", "Archive"],
    note: "Ninety years of a Brooklyn intersection, told through the signs that came and went.",
    grad: "linear-gradient(160deg, #3b1d1d 0%, #a64b38 60%, #f0c580 100%)",
    shape: "sign",
  },
  {
    title: "A Slow Recovery",
    sub: "Health · 4:10 · 2023",
    tags: ["Memoir", "Voice"],
    note: "The six months after surgery, counted in small tasks — and the one that mattered most.",
    grad: "linear-gradient(160deg, #2a2338 0%, #6b5a99 60%, #d3c0e8 100%)",
    shape: "calendar",
  },
  {
    title: "Night Shelving",
    sub: "Workplace · 2:20 · 2025",
    tags: ["Labor", "Verité"],
    note: "A closing librarian walks the stacks. The building narrates itself back to her.",
    grad: "linear-gradient(160deg, #1a2140 0%, #3f2540 60%, #a07298 100%)",
    shape: "book",
  },
];

function Thumb({ grad, shape }) {
  return (
    <div style={{width: "100%", height: "100%", background: grad, position: "relative", overflow: "hidden"}}>
      <svg viewBox="0 0 200 250" style={{position: "absolute", inset: 0, width: "100%", height: "100%"}} preserveAspectRatio="xMidYMid slice">
        {shape === "car" && (
          <g fill="none" stroke="#ffffff" strokeWidth="1.2" opacity="0.72">
            <path d="M40 170 Q100 140 160 170 L170 190 L30 190 Z"/>
            <circle cx="60" cy="200" r="12"/><circle cx="140" cy="200" r="12"/>
            <path d="M60 170 L80 150 L120 150 L140 170"/>
          </g>
        )}
        {shape === "cup" && (
          <g fill="none" stroke="#ffffff" strokeWidth="1.2" opacity="0.72">
            <path d="M70 100 L130 100 L125 200 L75 200 Z"/>
            <path d="M130 120 Q160 130 160 160 Q160 180 130 180"/>
            <path d="M90 80 Q100 70 95 60"/><path d="M110 80 Q120 70 115 60"/>
          </g>
        )}
        {shape === "wave" && (
          <g fill="none" stroke="#ffffff" strokeWidth="1.2" opacity="0.72">
            <path d="M20 120 Q60 90 100 120 T180 120"/>
            <path d="M20 140 Q60 110 100 140 T180 140"/>
            <path d="M20 160 Q60 130 100 160 T180 160"/>
          </g>
        )}
        {shape === "sign" && (
          <g fill="none" stroke="#ffffff" strokeWidth="1.2" opacity="0.72">
            <rect x="60" y="70" width="80" height="50"/>
            <path d="M100 120 L100 210"/>
            <rect x="72" y="140" width="56" height="18"/>
            <rect x="72" y="166" width="56" height="18"/>
          </g>
        )}
        {shape === "calendar" && (
          <g fill="none" stroke="#ffffff" strokeWidth="1.2" opacity="0.72">
            <rect x="50" y="70" width="100" height="110"/>
            <path d="M50 95 L150 95"/>
            <path d="M70 65 L70 80 M130 65 L130 80"/>
            <g strokeWidth="0.8">
              <path d="M70 115 L90 115 M100 115 L120 115 M130 115 L140 115"/>
              <path d="M70 135 L90 135 M100 135 L120 135 M130 135 L140 135"/>
              <path d="M70 155 L90 155 M100 155 L120 155 M130 155 L140 155"/>
            </g>
          </g>
        )}
        {shape === "book" && (
          <g fill="none" stroke="#ffffff" strokeWidth="1.2" opacity="0.72">
            <path d="M50 90 L50 190 L100 180 L150 190 L150 90 L100 80 Z"/>
            <path d="M100 80 L100 180"/>
            <path d="M60 110 L90 106 M110 106 L140 110"/>
            <path d="M60 130 L90 126 M110 126 L140 130"/>
          </g>
        )}
      </svg>
    </div>
  );
}

function Gallery() {
  return (
    <section className="sec" id="gallery">
      <div className="wrap">
        <window.SectionHead
          num="10"
          eyebrow="Examples"
          title="Six student pieces to study."
          lede="A range of forms — first-person essay, documentary verité, place-based, archive-heavy. Use these as critique artifacts before assigning the first draft. Students benchmark faster against specific, varied work than against a rubric."
        />
        <div className="gal-grid">
          {GALLERY.map((g) => (
            <div className="gal-card" key={g.title}>
              <div className="gal-thumb"><Thumb grad={g.grad} shape={g.shape} /></div>
              <div className="gal-meta">
                <h4 className="gal-title">{g.title}</h4>
                <div className="gal-sub">{g.sub}</div>
                <p style={{fontSize: 13.5, color: "var(--ink-dim)", lineHeight: 1.55, margin: "10px 0 0"}}>{g.note}</p>
                <div className="gal-tags">
                  {g.tags.map((t) => <span className="tag" key={t}>{t}</span>)}
                </div>
              </div>
            </div>
          ))}
        </div>
      </div>
    </section>
  );
}

window.Gallery = Gallery;