// "How it works": a seven-step visual narrative of the enforcement pipeline.
// Each scene is an illustration rendered full-bleed in the viewport stage,
// with the bathymetric grid overlay on top and a single mono data string
// fading in over a legibility strip. The step pills, text bar, nav, and
// reduced-motion support carry over from the previous build; the geometric
// SVG scenes and their choreography are gone. No looping animations remain.
//
// Motion: the 0.5s scene crossfade and the delayed data-string fade both run
// on the brand easing; standard UI transitions use the brand duration tokens.
// Reduced motion disables all of it and shows the composed end state.

const PL_DS = window.ECPSDesignSystem_a74b4a;

const PL_SECTION = { padding: 'var(--ecps-section-y) 0', scrollMarginTop: 76 };
const PL_WRAP = { maxWidth: 'var(--ecps-max-width)', margin: '0 auto', padding: '0 var(--ecps-gutter)' };

// Token-based translucency, no hardcoded hex.
const PL_TID03 = 'color-mix(in srgb, var(--ecps-tidal) 3%, transparent)';
const PL_DT20 = 'color-mix(in srgb, var(--ecps-deep-tide) 20%, transparent)';
const PL_DT72 = 'color-mix(in srgb, var(--ecps-deep-tide) 72%, transparent)';
const PL_GRID = `repeating-linear-gradient(0deg, ${PL_TID03} 0 1px, transparent 1px 40px), repeating-linear-gradient(90deg, ${PL_TID03} 0 1px, transparent 1px 40px)`;

const PL_MONO = { fontFamily: 'var(--ecps-font-mono)' };
const PL_LABEL = { fontFamily: 'var(--ecps-font-label)', fontWeight: 700, textTransform: 'uppercase' };

const PL_STEPS = [
  {
    pill: 'Register', img: 'assets/pipeline-01-register.jpg',
    alt: 'Illustration of a park entrance station issuing a glowing permit wristband tag',
    data: 'TAG 4E7B · PERMIT #30041 · LINKED',
    headline: 'Every visit starts at the gate.',
    body: 'The visitor checks in at the entrance station and is issued a permit tag. Identity linked, zone access set. The tag is the thread the system pulls if anything happens.',
  },
  {
    pill: 'Detect', img: 'assets/pipeline-02-detect.jpg',
    alt: 'Illustration of zone cameras flagging a person throwing a rock at wireframe deer across a red exclusion line',
    data: 'BREACH · ZONE 7 · WILDLIFE EXCLUSION',
    headline: 'Harassing wildlife. Flagged instantly.',
    body: 'A visitor crosses into a wildlife exclusion zone and throws rocks at protected deer. The zone camera flags the act. The geofence tag confirms who was there. No ranger needs to be watching.',
  },
  {
    pill: 'Alert', img: 'assets/pipeline-03-alert.jpg',
    alt: 'Illustration of an automated dispatch reaching a ranger in the field',
    data: 'DISPATCH → RANGER M. TORRES · ZONE 7 · PRIORITY 1',
    headline: 'The ranger is already moving.',
    body: 'Coordinates, camera frame, and tag proximity dispatched automatically. The ranger is en route before any other visitor notices.',
  },
  {
    pill: 'Scan', img: 'assets/pipeline-04-scan.jpg',
    alt: 'Illustration of a handheld reader scanning a permit wristband tag over NFC',
    data: 'TAG 4E7B · PERMIT #30041 · VERIFIED',
    headline: 'Tap. Matched. No confrontation needed.',
    body: 'The ranger scans the permit tag. NFC resolves the tag to the permit, the permit to the visitor on file. No phone camera, no guesswork. Attribution is mechanical.',
  },
  {
    pill: 'Log', img: 'assets/pipeline-05-log.jpg',
    alt: 'Illustration of a case record assembling from camera, geofence, and tag evidence',
    data: 'CASE #1042 · EVIDENCE SEALED · 5 ARTIFACTS',
    headline: 'The record writes itself.',
    body: 'Camera footage, geofence log, tag scan, ranger ID. Timestamped, immutable, appealable from creation.',
  },
  {
    pill: 'Enforce', img: 'assets/pipeline-06-enforce.jpg',
    alt: 'Illustration of the rule engine issuing a confirmed fine and revoking a site permit',
    data: 'TIER 2 · CONFIRMED · FINE ISSUED · PERMIT REVOKED',
    headline: 'Tier 2. One tap. Done.',
    body: 'Wildlife harassment is a Tier 2 violation. The rule engine classifies and pre-fills the consequence. An officer confirms with one tap. Fine issued, site permit revoked.',
  },
  {
    pill: 'Record', img: 'assets/pipeline-07-record.jpg',
    alt: 'Illustration of a violation record propagating across a global network of protected sites',
    data: 'RECORD PROPAGATED · 14 SITES NOTIFIED · APPEAL WINDOW OPEN',
    headline: 'The system remembers.',
    body: 'The record travels. The next park, the next reserve, the next country: the violation is on file. Certainty of being caught changes behavior. Severity of punishment does not.',
  },
];

const PL_CSS = `
@keyframes pl-fadeup { from { opacity: 0; transform: translateY(8px); } to { opacity: 1; transform: translateY(0); } }
@keyframes pl-fadein { from { opacity: 0; } to { opacity: 1; } }

.pl-scene  { animation: pl-fadein .5s var(--ecps-ease) both; }
.pl-fadeup { animation: pl-fadeup var(--ecps-dur-slow) var(--ecps-ease) both; }
.pl-fadein { animation: pl-fadein var(--ecps-dur-base) var(--ecps-ease) both; }

.pl-btn { transition: background var(--ecps-dur-fast) var(--ecps-ease), border-color var(--ecps-dur-fast) var(--ecps-ease), color var(--ecps-dur-fast) var(--ecps-ease); }
.pl-pill { cursor: pointer; background: none; border: none; padding: 0; }

@media (prefers-reduced-motion: reduce) {
  .pl-scene, .pl-fadeup, .pl-fadein { animation: none !important; }
}
`;

function Pipeline() {
  const { compact, narrow } = window.useViewport();
  const [step, setStep] = React.useState(0);
  const s = PL_STEPS[step];
  const stageH = narrow ? 320 : compact ? 400 : 500;
  const go = (d) => setStep(p => Math.max(0, Math.min(PL_STEPS.length - 1, p + d)));
  const atStart = step === 0, atEnd = step === PL_STEPS.length - 1;

  // Warm all scene images once so stepping never flashes an empty stage.
  React.useEffect(() => {
    PL_STEPS.forEach(st => { const im = new Image(); im.src = st.img; });
  }, []);

  return (
    <section id="pipeline" style={{ ...PL_SECTION, background: 'var(--ecps-deep-tide)' }}>
      <style>{PL_CSS}</style>
      <div style={{ ...PL_WRAP, display: 'flex', flexDirection: 'column', gap: 32 }}>
        <PL_DS.SectionHeader onDark eyebrow="How it works" title="No bystander required." />

        {/* step pills */}
        <div style={{ display: 'flex', gap: narrow ? 14 : 28, flexWrap: 'wrap' }}>
          {PL_STEPS.map((st, i) => {
            const state = i === step ? 'active' : i < step ? 'done' : 'todo';
            const color = state === 'active' ? 'var(--ecps-tidal)' : state === 'done' ? 'var(--ecps-kelp)' : 'var(--ecps-text-on-dark-muted)';
            return (
              <button key={st.pill} className="pl-pill" onClick={() => setStep(i)} style={{ display: 'flex', flexDirection: 'column', gap: 6 }}>
                <span style={{ ...PL_LABEL, fontSize: 11.5, letterSpacing: '2.5px', color }}>{i + 1}. {st.pill}</span>
                <span style={{ height: 2, background: state === 'active' ? 'var(--ecps-tidal)' : state === 'done' ? 'var(--ecps-kelp)' : 'transparent', transformOrigin: 'left', transform: `scaleX(${state === 'todo' ? 0 : 1})`, transition: 'transform var(--ecps-dur-base) var(--ecps-ease)' }} />
              </button>
            );
          })}
        </div>

        {/* text bar: headline + body, above the stage */}
        <div key={`t${step}`} className="pl-fadein" style={{ display: 'flex', flexDirection: 'column', gap: 5, maxWidth: 620 }}>
          <div style={{ fontFamily: 'var(--ecps-font-display)', fontWeight: 500, fontSize: 16, color: 'var(--ecps-shell)' }}>{s.headline}</div>
          <div style={{ fontFamily: 'var(--ecps-font-display)', fontSize: 13, lineHeight: 1.6, color: 'var(--ecps-text-on-dark-muted)' }}>{s.body}</div>
        </div>

        {/* viewport stage: image, legibility gradient, grid overlay, data string */}
        <div style={{ position: 'relative', height: stageH, border: '1px solid var(--ecps-rule-on-dark)', background: 'var(--ecps-deep-tide)', overflow: 'hidden' }}>
          <div key={step} className="pl-scene" style={{ position: 'absolute', inset: 0 }}>
            <img src={s.img} alt={s.alt} style={{ position: 'absolute', inset: 0, width: '100%', height: '100%', objectFit: 'cover', borderRadius: 0, display: 'block' }} />
            <div style={{ position: 'absolute', left: 0, right: 0, bottom: 0, height: 80, background: `linear-gradient(to top, ${PL_DT20}, transparent)`, pointerEvents: 'none' }} />
            <div className="pl-fadeup" style={{ position: 'absolute', left: 14, bottom: 14, animationDelay: '500ms' }}>
              <span style={{ ...PL_MONO, fontSize: 11, letterSpacing: '1px', color: 'var(--ecps-tidal)', background: PL_DT72, padding: '6px 10px', display: 'inline-block' }}>{s.data}</span>
            </div>
          </div>
          <div style={{ position: 'absolute', inset: 0, backgroundImage: PL_GRID, pointerEvents: 'none' }} />
        </div>

        {/* nav */}
        <div style={{ display: 'flex', alignItems: 'center', justifyContent: 'space-between', paddingTop: 16, borderTop: '1px solid var(--ecps-rule-on-dark)' }}>
          <button className="pl-btn" onClick={() => go(-1)} disabled={atStart} style={{ ...PL_LABEL, fontSize: 11, letterSpacing: '1.5px', color: atStart ? 'var(--ecps-text-on-dark-muted)' : 'var(--ecps-shell)', background: 'none', border: '1px solid var(--ecps-rule-on-dark)', borderRadius: 0, padding: '9px 18px', cursor: atStart ? 'default' : 'pointer', opacity: atStart ? .4 : 1 }}>Prev</button>
          <span style={{ ...PL_MONO, fontSize: 11, letterSpacing: '2px', color: 'var(--ecps-text-on-dark-muted)' }}>{String(step + 1).padStart(2, '0')} / {String(PL_STEPS.length).padStart(2, '0')}</span>
          <button className="pl-btn" onClick={() => go(1)} disabled={atEnd} style={{ ...PL_LABEL, fontSize: 11, letterSpacing: '1.5px', color: atEnd ? 'var(--ecps-text-on-dark-muted)' : 'var(--ecps-deep-tide)', background: atEnd ? 'none' : 'var(--ecps-tidal)', border: '1px solid ' + (atEnd ? 'var(--ecps-rule-on-dark)' : 'var(--ecps-tidal)'), borderRadius: 0, padding: '9px 18px', cursor: atEnd ? 'default' : 'pointer', opacity: atEnd ? .4 : 1 }}>Next</button>
        </div>
      </div>
    </section>
  );
}
Object.assign(window, { Pipeline });