import './deck.css'

<div className="signal-slide">
  <div className="title-grid">
    <div>
      <span className="eyebrow">Street logic, decoded</span>
      <h1>Every green is a choice.</h1>
      <p className="signal-kicker">A traffic light does not control cars. It <strong>allocates time between people.</strong></p>
    </div>
    <div className="signal-stack" role="img" aria-label="A red traffic signal glowing against a dark street-inspired background">
      <div className="signal-lens red"></div>
      <div className="signal-lens amber"></div>
      <div className="signal-lens green"></div>
      <div className="signal-caption">STOP <small>someone else is spending the next second</small></div>
    </div>
  </div>
  <span className="tiny-source">A six-minute field guide · illustrative timings</span>
</div>

<Note>
Open with the familiar object, then change its meaning. A signal looks like a command—stop or go—but its deeper job is allocation. Every second assigned to one movement is unavailable to another. The numbers that follow are deliberately illustrative; the mental model is the point.
</Note>

---

<div className="signal-slide">
  <div className="cycle-layout">
    <div className="cycle-copy">
      <span className="eyebrow">01 · The budget</span>
      <h1>A cycle spends every second.</h1>
      <p className="signal-kicker">In this illustrative 90-second cycle, time is divided among movement, crossing, and clearance.</p>
      <Step>
        <div className="budget-rule">+5 seconds here <span>=</span> −5 seconds elsewhere</div>
      </Step>
    </div>
    <div className="cycle-ring-wrap" role="img" aria-label="An illustrative 90-second signal cycle divided into 42 seconds for one movement, 30 seconds for crossing traffic, and 18 seconds for pedestrian and safety clearance">
      <svg className="cycle-ring" viewBox="0 0 100 100" aria-hidden="true">
        <circle className="cycle-track" cx="50" cy="50" r="42" pathLength="100" />
        <circle className="cycle-go" cx="50" cy="50" r="42" pathLength="100" />
        <circle className="cycle-cross" cx="50" cy="50" r="42" pathLength="100" />
        <circle className="cycle-clear" cx="50" cy="50" r="42" pathLength="100" />
      </svg>
      <div className="cycle-center"><strong>90</strong><span>seconds total</span></div>
      <div className="cycle-label go">42 s <em>one movement</em></div>
      <div className="cycle-label cross">30 s <em>cross traffic</em></div>
      <div className="cycle-label clear">18 s <em>walk + clear</em></div>
    </div>
  </div>
  <span className="tiny-source">Illustrative allocation, not a real junction plan</span>
</div>

<Note>
Treat the cycle like a fixed municipal budget. The 42, 30, and 18 seconds are not a recommendation; they make the trade-off visible. Let the ring settle, then reveal the equation. Adding five seconds to a walk phase is not “adding delay” in the abstract. It is moving five seconds from one claimant to another.
</Note>

---

<div className="signal-slide delay-slide">
  <span className="eyebrow">02 · The hidden unit</span>
  <h1>Count waiting in people, not vehicles.</h1>
  <div className="delay-equation" aria-label="Illustrative comparison: thirty people in cars waiting ten seconds equals twelve people walking waiting twenty-five seconds; both total three hundred person-seconds">
    <div className="delay-card">
      <span className="mode">People in cars</span>
      <span className="math">30 × 10 s</span>
      <span className="total">300 person-seconds</span>
    </div>
    <div className="equals" aria-hidden="true">=</div>
    <div className="delay-card">
      <span className="mode">People walking</span>
      <span className="math">12 × 25 s</span>
      <span className="total">300 person-seconds</span>
    </div>
  </div>
  <Step>
    <div className="reveal-strip">Equal measured delay. Unequal visibility on a vehicle-first dashboard.</div>
  </Step>
  <span className="tiny-source">Illustrative arithmetic · person-seconds = people × waiting time</span>
</div>

<Note>
Pause before revealing the conclusion. Most familiar traffic metrics make vehicles highly visible and everyone else easier to miss. Person-seconds is not the only measure we need—accessibility, safety, and reliability matter too—but it corrects the unit of attention: the person, not the container.
</Note>

---

<div className="signal-slide wave-slide">
  <div className="wave-head">
    <div>
      <span className="eyebrow">03 · Coordination</span>
      <h1>A green wave rewards a chosen speed.</h1>
    </div>
    <p>Offset each signal so the next green arrives with the traveler—not before.</p>
  </div>
  <div className="wave-map" role="img" aria-label="Four coordinated intersections on one corridor, with a green diagonal path showing a traveler meeting successive green lights">
    <div className="wave-road"></div>
    <div className="junction j1"></div>
    <div className="junction j2"></div>
    <div className="junction j3"></div>
    <div className="junction j4"></div>
    <span className="junction-label jlabel1">A · now</span>
    <span className="junction-label jlabel2">B · +18 s</span>
    <span className="junction-label jlabel3">C · +36 s</span>
    <span className="junction-label jlabel4">D · +54 s</span>
    <div className="wave-flow" aria-hidden="true"></div>
    <div className="wave-car" aria-hidden="true"></div>
    <Step>
      <div className="speed-badge" aria-label="Illustrative target speed: 25 kilometers per hour"><strong>25</strong><small>KM/H TARGET</small></div>
    </Step>
  </div>
  <span className="tiny-source">Illustrative offsets and target speed</span>
</div>

<Note>
This is the constructive twist: signals can shape behavior, not just respond to it. First trace the green route across the four offsets; then reveal the target speed. A corridor can be coordinated so that traveling at a chosen speed brings a succession of greens. Racing ahead simply reaches the next red sooner. The speed and offsets here are illustrative.
</Note>

---

<div className="signal-slide metric-slide">
  <span className="eyebrow">04 · The decision</span>
  <h1>What we optimize becomes the street.</h1>
  <div className="metric-switch">
    <div className="metric-panel old">
      <span className="metric-label">Narrow score</span>
      <div className="metric-main">vehicle delay</div>
      <div className="metric-foot">Fast to measure. Easy to mistake for the whole public outcome.</div>
    </div>
    <div className="metric-arrow" aria-hidden="true">→</div>
    <div className="metric-panel new">
      <span className="metric-label">Human score</span>
      <div className="metric-main">time × people</div>
      <div className="metric-foot">Then test safety, access, reliability, and who bears the wait.</div>
    </div>
  </div>
  <Step>
    <div className="question-row" aria-label="Three questions for evaluating a signal plan">
      <div className="question-chip">Who receives time?</div>
      <div className="question-chip">Who waits longest?</div>
      <div className="question-chip">Whose delay counts?</div>
    </div>
  </Step>
</div>

<Note>
No single metric can design a good intersection. The point is to reject a hidden substitution: vehicle performance standing in for human performance. Start with person-time, then add the non-negotiables—safety and accessibility—and the lived outcomes, including reliability and unequal burdens.
</Note>

---

<div className="signal-slide close-slide">
  <div>
    <span className="eyebrow">Your next crossing</span>
    <h1>Ask who gets the next second.</h1>
    <p className="signal-kicker">Watch one familiar intersection for a single cycle. Run a tiny public-time audit.</p>
    <div className="audit-list">
      <div className="audit-item"><b>01</b><span>Notice who is present.</span></div>
      <div className="audit-item"><b>02</b><span>Count who moves—and who waits.</span></div>
      <div className="audit-item"><b>03</b><span>Name the choice the signal is making.</span></div>
    </div>
  </div>
  <div className="time-token" role="img" aria-label="A clock-like token representing one second of shared public time">
    <strong>public time</strong>
  </div>
</div>

<Note>
Close on observation, not expertise. The audience does not need a controller manual. They only need to notice allocation: who is there, who moves, who waits, and which trade-off has been normalized. Once a traffic light is seen as a public time budget, its choices become discussable.
</Note>