/* global React, useReveal, CornerTicks, Ph */
const { useEffect: useEffectPl, useRef: useRefPl, useState: useStatePl } = React;

/* The six stations on The Line — the spine of the whole site */
const STATIONS = [
  { code: '01', label: 'Capture', name: 'Capture', tag: 'Catch every need',
    short: 'Needs caught the moment they happen',
    head: 'Catch the need the second it appears',
    body: 'Something spotted on the floor becomes a structured maintenance need in seconds — asset, location, severity, photo — captured complete and ready to move into the flow.',
    spec: ['Photo + voice intake', 'Asset & location auto-tag', 'Severity triage'] },
  { code: '02', label: 'Dispatch', name: 'Dispatch', tag: 'Sort into tasks',
    short: 'Needs categorized into real technician tasks',
    head: 'From a vague complaint to a precise task list',
    body: "Xaint reads the need, classifies it, and shapes it into the specific tasks the right technician should perform — routed, sequenced, and ready to start.",
    spec: ['Auto-categorization', 'Task breakdown', 'Skill-based routing'] },
  { code: '03', label: 'Knowledge', name: 'Knowledge', tag: 'Docs, wired in',
    short: 'Technical documentation, wired in',
    head: 'Your manuals, working on every task',
    body: 'Every task is linked to the relevant technical documentation — so the procedure, the part number, and the torque spec are on the screen the moment the technician opens the job.',
    spec: ['Doc linking', 'Procedure surfacing', 'Searchable knowledge base'] },
  { code: '04', label: 'Diagnose', name: 'Diagnose', tag: 'Grounded diagnosis',
    short: 'Grounded in your docs and your history',
    head: 'Diagnosis backed by your docs and your history',
    body: 'Xaint cross-references technical documentation with historical trends on the same asset class to surface the likely cause — a grounded, cited suggestion your team can act on with confidence.',
    spec: ['Doc + history cross-ref', 'Likely-cause ranking', 'Cited evidence'] },
  { code: '05', label: 'Schedule', name: 'Schedule', tag: 'Reads the meters',
    short: 'Preventive maintenance that reads the meters',
    head: 'Preventive maintenance that reads the meters',
    body: 'Smart multi-meter scheduling triggers the next service from real usage — runtime, cycles, distance, pressure — combined, so each service lands exactly when the equipment needs it.',
    spec: ['Multi-meter triggers', 'Usage-based intervals', 'Auto-generated PMs'] },
  { code: '06', label: 'Settle', name: 'Settle', tag: 'Close with an invoice',
    short: 'Customer, estimate and invoice — closed',
    head: 'Maintenance that pays for itself',
    body: 'Link the customer, auto-generate the estimate, and turn the completed job into an invoice — closing the commercial loop so every job is accounted for and contributes to revenue.',
    spec: ['Customer records', 'Auto estimates', 'One-tap invoicing'] },
];

/* ---------- Hero signal line (horizontal + vertical fallback) ---------- */
function SignalLine({ run = true }) {
  return (
    <div className="line-wrap">
      {/* horizontal */}
      <div className="signal" data-run={run ? '1' : '0'}>
        {STATIONS.map(s => (
          <div className="station" key={s.code}>
            <div className="node">
              <span className="ring" />
              <span className="code">{s.code}</span>
            </div>
            <div className="s-label">{s.label}</div>
            <div className="s-name">{s.tag}</div>
            <div className="s-desc">{s.short}</div>
          </div>
        ))}
      </div>

      {/* vertical (mobile) */}
      <div className="signal-v">
        {STATIONS.map(s => (
          <div className="sv-item" key={s.code}>
            <div className="sv-node">{s.code}</div>
            <div className="sv-label">{s.label}</div>
            <div className="sv-name">{s.head}</div>
            <div className="sv-desc">{s.short}</div>
          </div>
        ))}
      </div>

      <div className="loop-tail">
        <span className="seg" />
        <span>Loop closes · invoice funds the next capture</span>
        <span className="seg" />
      </div>
    </div>
  );
}

/* ---------- Deep station row (Platform page) ---------- */
function StationRow({ s, i }) {
  return (
    <div className="st-row reveal" style={{ '--rd': `${(i % 2) * 60}ms` }}>
      <div className="st-index">
        <span className="tick" />
        {s.code}
      </div>
      <div>
        <div className="s-label" style={{ marginTop: 0 }}>{s.label}</div>
        <h3 className="h-lg" style={{ marginTop: 10 }}>{s.head}</h3>
        <p className="lead" style={{ marginTop: 14, fontSize: '1.02rem', maxWidth: '46ch' }}>{s.body}</p>
        <div style={{ display: 'flex', flexWrap: 'wrap', gap: 8, marginTop: 22 }}>
          {s.spec.map(sp => (
            <span key={sp} className="mono" style={{ fontSize: '0.7rem', letterSpacing: '0.04em',
              color: 'var(--ink-2)', border: '1px solid var(--line)', borderRadius: 2,
              padding: '5px 10px', background: 'var(--bg-2)', display: 'inline-block',
              whiteSpace: 'nowrap' }}>{sp}</span>
          ))}
        </div>
      </div>
      <div className="st-visual blueprint">
        <CornerTicks color="var(--accent)" />
        <SchematicGlyph code={s.code} />
      </div>
    </div>
  );
}

/* Small abstract schematic per station — not a fake screenshot, a diagram */
function SchematicGlyph({ code }) {
  const c = 'var(--accent)';
  const l = 'var(--line-2)';
  const common = { position: 'absolute', inset: 0, width: '100%', height: '100%' };
  const glyphs = {
    '01': ( /* capture: converging signals into a node */
      <svg style={common} viewBox="0 0 200 150" fill="none" aria-hidden="true">
        <path d="M20 30 L90 75 M20 75 L90 75 M20 120 L90 75" stroke={l} strokeWidth="1.5" />
        <circle cx="90" cy="75" r="10" stroke={c} strokeWidth="2" />
        <path d="M100 75 L180 75" stroke={c} strokeWidth="2" strokeDasharray="5 5" />
        <circle cx="180" cy="75" r="4" fill={c} />
      </svg>
    ),
    '02': ( /* dispatch: one in, many tasks out */
      <svg style={common} viewBox="0 0 200 150" fill="none" aria-hidden="true">
        <path d="M20 75 L80 75" stroke={c} strokeWidth="2" />
        <circle cx="80" cy="75" r="9" stroke={c} strokeWidth="2" />
        <path d="M89 75 L150 35 M89 75 L150 75 M89 75 L150 115" stroke={l} strokeWidth="1.5" />
        {[35, 75, 115].map(y => <rect key={y} x="150" y={y - 8} width="30" height="16" stroke={c} strokeWidth="1.5" />)}
      </svg>
    ),
    '03': ( /* knowledge: stacked docs linked */
      <svg style={common} viewBox="0 0 200 150" fill="none" aria-hidden="true">
        {[0, 1, 2].map(i => <rect key={i} x={40 + i * 6} y={35 + i * 6} width="60" height="80" stroke={l} strokeWidth="1.5" fill="var(--bg)" />)}
        <path d="M52 60 H88 M52 74 H88 M52 88 H76" stroke={l} strokeWidth="1.5" />
        <path d="M118 75 L150 75" stroke={c} strokeWidth="2" strokeDasharray="4 4" />
        <circle cx="160" cy="75" r="10" stroke={c} strokeWidth="2" /><circle cx="160" cy="75" r="3" fill={c} />
      </svg>
    ),
    '04': ( /* diagnose: branching probability */
      <svg style={common} viewBox="0 0 200 150" fill="none" aria-hidden="true">
        <circle cx="40" cy="75" r="9" stroke={c} strokeWidth="2" />
        <path d="M49 75 L100 45 M49 75 L100 105" stroke={l} strokeWidth="1.5" />
        <path d="M100 45 L150 30 M100 45 L150 60" stroke={l} strokeWidth="1.5" />
        <circle cx="150" cy="30" r="6" fill={c} />
        <circle cx="150" cy="60" r="4" stroke={l} strokeWidth="1.5" />
        <circle cx="100" cy="105" r="4" stroke={l} strokeWidth="1.5" />
      </svg>
    ),
    '05': ( /* schedule: multiple meters → interval */
      <svg style={common} viewBox="0 0 200 150" fill="none" aria-hidden="true">
        {[40, 75, 110].map((y, i) => (
          <g key={y}>
            <circle cx="45" cy={y} r="11" stroke={l} strokeWidth="1.5" />
            <path d={`M45 ${y} L${45 + (i === 0 ? 7 : i === 1 ? 0 : -6)} ${y - 7}`} stroke={c} strokeWidth="2" />
          </g>
        ))}
        <path d="M62 40 L110 70 M62 75 L110 75 M62 110 L110 80" stroke={l} strokeWidth="1.5" />
        <rect x="120" y="60" width="55" height="30" stroke={c} strokeWidth="2" />
        <path d="M120 90 L175 90" stroke={c} strokeWidth="1" strokeDasharray="3 3" />
      </svg>
    ),
    '06': ( /* settle: job → invoice loop */
      <svg style={common} viewBox="0 0 200 150" fill="none" aria-hidden="true">
        <circle cx="50" cy="75" r="10" stroke={c} strokeWidth="2" />
        <path d="M60 75 L120 75" stroke={c} strokeWidth="2" />
        <rect x="120" y="48" width="46" height="58" stroke={c} strokeWidth="2" fill="var(--bg)" />
        <path d="M130 64 H156 M130 76 H156 M130 88 H146" stroke={l} strokeWidth="1.5" />
        <path d="M143 112 Q90 140 55 90" stroke={c} strokeWidth="1.5" strokeDasharray="4 4" />
        <path d="M55 90 l-4 8 l9 -2" stroke={c} strokeWidth="1.5" fill="none" />
      </svg>
    ),
  };
  return glyphs[code] || null;
}

Object.assign(window, { SignalLine, StationRow, SchematicGlyph, STATIONS });