/* global React */
// FIXiQ explainer — scenes 5–8 (screen, review, act/track, memory + close).
// Requires window.FX (scenes-a.jsx). Exposes window.FxScenesB.
(function () {
  const { Sprite, useSprite } = window;
  const { C, EZ, at, fadeUp, sceneFade, FxCaption, FxBrand } = window.FX;
  const clamp01 = (t) => Math.min(Math.max(t, 0), 1);

  // ============================ SCENE 5 — screen risk (46–56s)
  function FxRisk({ k, v, tone, lt, start }) {
    const tones = { warn: [C.ochre, C.ochreBg], hot: [C.brick, C.brickBg], ok: [C.em, C.em50], info: [C.slate5, '#EDF0F4'] };
    const t = tones[tone] || tones.info;
    return (
      <div style={{ display: 'flex', justifyContent: 'space-between', alignItems: 'center', padding: '10px 0', borderBottom: '1px solid #EDF0F4', fontFamily: C.sans, ...fadeUp(lt, start, 0.45, 10) }}>
        <span style={{ fontSize: 15.5, color: C.slate6, whiteSpace: 'nowrap' }}>{k}</span>
        <span style={{ fontSize: 12.5, fontWeight: 700, color: t[0], background: t[1], borderRadius: 3, padding: '4px 10px', whiteSpace: 'nowrap' }}>{v}</span>
      </div>
    );
  }
  function SceneScreen() {
    const { localTime: lt } = useSprite();
    const total = 19;
    return (
      <div style={{ position: 'absolute', inset: 0, background: C.paper, opacity: sceneFade(lt, total) }}>
        <div style={{ position: 'absolute', left: 64, top: 52 }}><FxBrand /></div>
        <div style={{ position: 'absolute', left: 360, top: 116, width: 560, ...fadeUp(lt, 0.3, 0.7, 26) }}>
          <div style={{ background: C.white, border: `1px solid ${C.slate2}`, borderRadius: 8, boxShadow: '0 8px 24px rgba(16,32,47,0.12)', padding: '18px 24px 8px' }}>
            <div style={{ display: 'flex', gap: 10, alignItems: 'center', marginBottom: 8, fontFamily: C.sans }}>
              <span style={{ fontFamily: C.mono, fontSize: 12, fontWeight: 600, color: C.em, background: C.em50, border: `1px solid ${C.em100}`, borderRadius: 3, padding: '2px 7px' }}>ISS-204</span>
              <span style={{ fontSize: 15.5, fontWeight: 700, color: C.navy, whiteSpace: 'nowrap' }}>Screening — urgency, risk, escalation</span>
            </div>
            <FxRisk k="Active water entry" v="Possible — confirm" tone="warn" lt={lt} start={1.2} />
            <FxRisk k="Repeat issue" v="Yes — 3rd report" tone="hot" lt={lt} start={1.8} />
            <FxRisk k="Safety concern" v="Review required" tone="warn" lt={lt} start={2.4} />
            <FxRisk k="Building envelope" v="Likely related" tone="info" lt={lt} start={3.0} />
            <FxRisk k="Board escalation" v="Likely" tone="info" lt={lt} start={3.6} />
            <FxRisk k="Manager review" v="Required" tone="ok" lt={lt} start={4.2} />
          </div>
        </div>
        <FxCaption lt={lt} step="SCREEN" text="Urgency, risk, and responsibility — organized." start={7} />
      </div>
    );
  }

  // ============================ SCENE 6 — manager review (56–69s)
  function SceneReview() {
    const { localTime: lt } = useSprite();
    const total = 16;
    // cursor path: appears 5.2s, moves to "Send vendor" 5.8–7.0, click 7.2
    const cp = EZ((lt - 5.8) / 1.2);
    const cx = 540 + (528 - 540) * cp, cy = 230 + (404 - 230) * cp;
    const clicked = lt >= 7.3;
    const btn = (label, primary, extra) => (
      <span style={{ fontFamily: C.sans, fontSize: 13.5, fontWeight: 600, padding: '9px 16px', borderRadius: 6, whiteSpace: 'nowrap',
        background: primary ? (clicked && label === 'Send vendor' ? '#18604E' : C.em) : C.white,
        color: primary ? C.white : C.navy, border: `1px solid ${primary ? C.em : '#B9C4D0'}`,
        transform: clicked && label === 'Send vendor' ? 'scale(0.97)' : 'none', ...extra }}>{label}</span>
    );
    return (
      <div style={{ position: 'absolute', inset: 0, background: C.paper, opacity: sceneFade(lt, total) }}>
        <div style={{ position: 'absolute', left: 64, top: 52 }}><FxBrand /></div>
        <div style={{ position: 'absolute', left: 280, top: 108, width: 720, ...fadeUp(lt, 0.3, 0.7, 26) }}>
          <div style={{ background: C.white, border: `1px solid ${C.slate2}`, borderRadius: 10, boxShadow: '0 8px 24px rgba(16,32,47,0.12)', overflow: 'hidden' }}>
            <div style={{ padding: '12px 22px', borderBottom: `1px solid ${C.slate2}`, background: '#FBFCFD', display: 'flex', alignItems: 'center', gap: 10, fontFamily: C.sans }}>
              <span style={{ fontSize: 14, fontWeight: 700, color: C.navy }}>Manager review — ISS-204</span>
              <span style={{ marginLeft: 'auto', fontSize: 11.5, fontWeight: 700, color: C.em, background: C.em50, borderRadius: 3, padding: '3px 9px' }}>Awaiting your decision</span>
            </div>
            <div style={{ display: 'grid', gridTemplateColumns: '1fr 1fr', gap: 0 }}>
              <div style={{ padding: '16px 22px', borderRight: `1px solid #EDF0F4`, fontFamily: C.sans }}>
                <div style={{ fontSize: 11, fontWeight: 700, letterSpacing: 1.2, textTransform: 'uppercase', color: C.slate4, marginBottom: 8, ...fadeUp(lt, 1.0) }}>What we know</div>
                {['Recurring ingress — same window head as 2021', 'Envelope flagged in reserve fund study', 'Vendor recommended review if it recurred', 'Photos on file · access after 4 pm'].map((x, i) => (
                  <div key={i} style={{ display: 'flex', gap: 8, fontSize: 13.5, color: C.slate6, lineHeight: 1.5, padding: '4px 0', ...fadeUp(lt, 1.3 + i * 0.4) }}>
                    <span style={{ color: C.em, fontWeight: 700 }}>—</span>{x}
                  </div>
                ))}
              </div>
              <div style={{ padding: '16px 22px', fontFamily: C.sans }}>
                <div style={{ fontSize: 11, fontWeight: 700, letterSpacing: 1.2, textTransform: 'uppercase', color: C.slate4, marginBottom: 8, ...fadeUp(lt, 3.0) }}>Suggested next steps</div>
                {['Confirm active entry with resident', 'Send vendor with prior history attached', 'Flag envelope context for the board'].map((x, i) => (
                  <div key={i} style={{ display: 'flex', gap: 8, fontSize: 13.5, color: C.slate6, lineHeight: 1.5, padding: '4px 0', ...fadeUp(lt, 3.3 + i * 0.4) }}>
                    <span style={{ fontFamily: C.mono, fontSize: 11, color: C.em, paddingTop: 2 }}>{i + 1}.</span>{x}
                  </div>
                ))}
              </div>
            </div>
            <div style={{ display: 'flex', gap: 10, padding: '14px 22px 18px', borderTop: `1px solid #EDF0F4`, ...fadeUp(lt, 4.6) }}>
              {btn('Request more info')}{btn('Send vendor', true)}{btn('Escalate to board')}
            </div>
          </div>
        </div>
        {/* cursor */}
        {lt >= 5.2 && lt < 9 && (
          <svg width="26" height="26" style={{ position: 'absolute', left: cx, top: cy, opacity: at(lt, 5.2, 0.3), filter: 'drop-shadow(0 1px 2px rgba(0,0,0,0.3))' }}>
            <path d="M3 2 L3 20 L8 15.5 L11.4 22.5 L14.3 21.1 L11 14.4 L17.5 14 Z" fill="#16202F" stroke="#fff" strokeWidth="1.4" />
          </svg>
        )}
        {clicked && lt < 8.4 && (
          <div style={{ position: 'absolute', left: cx - 14, top: cy - 14, width: 54, height: 54, borderRadius: 99, border: `2px solid ${C.em}`, opacity: 1 - EZ((lt - 7.3) / 0.9), transform: `scale(${0.4 + EZ((lt - 7.3) / 0.9)})` }}></div>
        )}
        <FxCaption lt={lt} step="REVIEW" text="Human-in-the-loop. The manager stays in control." start={8.2} />
      </div>
    );
  }

  // ============================ SCENE 7 — act & track (69–81s)
  function SceneTrack() {
    const { localTime: lt } = useSprite();
    const total = 22;
    const drafts = [
      ['To resident', '\u201CThank you \u2014 we\u2019ve received your report and are reviewing the issue history.\u201D', 0.8],
      ['To vendor — history attached', '“Please inspect the window head at Unit 36 — prior repair 2021 (REC-088) attached. Photos, cause assessment, recommendation requested.”', 1.9],
      ['To board — summary', '“Unit 36 — recurring water ingress; envelope context from RFS p.41 attached for review.”', 3.0],
    ];
    const steps = ['Reported', 'Vendor assigned', 'Inspected', 'Repair approved', 'Completed', 'Closed'];
    const doneCount = Math.floor(clamp01((lt - 5.2) / 3.6) * steps.length);
    return (
      <div style={{ position: 'absolute', inset: 0, background: C.paper, opacity: sceneFade(lt, total) }}>
        <div style={{ position: 'absolute', left: 64, top: 52 }}><FxBrand /></div>
        <div style={{ position: 'absolute', left: 110, top: 124, width: 520 }}>
          {drafts.map((d, i) => (
            <div key={i} style={{ background: C.white, border: `1px solid ${C.slate2}`, borderRadius: 8, padding: '13px 17px', marginBottom: 12, boxShadow: '0 2px 6px rgba(16,32,47,0.06)', fontFamily: C.sans, ...fadeUp(lt, d[2], 0.55, 18) }}>
              <div style={{ display: 'flex', gap: 8, alignItems: 'center', marginBottom: 5 }}>
                <span style={{ fontSize: 10.5, fontWeight: 700, letterSpacing: 1, textTransform: 'uppercase', color: C.em, whiteSpace: 'nowrap', flex: 'none' }}>{d[0]}</span>
                <span style={{ marginLeft: 'auto', fontSize: 10.5, color: C.slate4, fontFamily: C.mono, whiteSpace: 'nowrap' }}>draft — for your review</span>
              </div>
              <div style={{ fontSize: 13, color: C.slate6, lineHeight: 1.5 }}>{d[1]}</div>
            </div>
          ))}
        </div>
        {/* progress rail */}
        <div style={{ position: 'absolute', right: 100, top: 150, width: 380, ...fadeUp(lt, 4.6) }}>
          <div style={{ fontFamily: C.sans, fontSize: 11, fontWeight: 700, letterSpacing: 1.5, textTransform: 'uppercase', color: C.slate4, marginBottom: 16 }}>Issue timeline</div>
          {steps.map((s, i) => {
            const on = i < doneCount;
            return (
              <div key={s} style={{ display: 'flex', gap: 14, alignItems: 'center', paddingBottom: i < steps.length - 1 ? 22 : 0, position: 'relative' }}>
                {i < steps.length - 1 && <span style={{ position: 'absolute', left: 8, top: 20, width: 2, height: 22, background: i < doneCount - 1 ? C.em : C.slate2 }}></span>}
                <span style={{ width: 18, height: 18, borderRadius: 99, flex: 'none', background: on ? C.em : C.white, border: `2px solid ${on ? C.em : '#B9C4D0'}`, display: 'flex', alignItems: 'center', justifyContent: 'center' }}>
                  {on && <svg width="9" height="7" viewBox="0 0 11 9"><path d="M1 4.5L4 7.5L10 1.5" stroke="#fff" strokeWidth="2" fill="none" strokeLinecap="round" /></svg>}
                </span>
                <span style={{ fontFamily: C.sans, fontSize: 15, fontWeight: on ? 700 : 500, color: on ? C.navy : C.slate4 }}>{s}</span>
                {s === 'Inspected' && on && <span style={{ fontFamily: C.mono, fontSize: 10.5, color: C.slate4 }}>photos + cause noted</span>}
              </div>
            );
          })}
        </div>
        <FxCaption lt={lt} step="TRACK & REPORT" text="The work is logged, boards get clear summaries — the record grows." start={8.6} />
      </div>
    );
  }

  // ============================ SCENE 8 — memory + close (81–96s)
  function SceneMemory() {
    const { localTime: lt } = useSprite();
    const total = 27;
    const closing = lt >= 7.2;
    const rows = [
      ['ISS-204', 'Water ingress — Unit 36', 'Resolved · envelope review scheduled', 1.0],
      ['REC-088', '2021 leak repair', 'Linked — same window head', 1.5],
      ['BRD-021', 'Board decision', 'Envelope assessment approved', 2.0],
      ['VND-131', 'Vendor closeout', 'Photos, cause, invoice on file', 2.5],
    ];
    return (
      <div style={{ position: 'absolute', inset: 0, background: closing ? C.navy : C.paper, transition: 'background 600ms ease', opacity: sceneFade(lt, total, 0.8) }}>
        {!closing && (
          <div style={{ position: 'absolute', inset: 0, opacity: 1 - EZ((lt - 6.6) / 0.8) }}>
            <div style={{ position: 'absolute', left: 64, top: 52 }}><FxBrand /></div>
            <div style={{ position: 'absolute', left: 320, top: 120, transform: `scale(${1 + 0.02 * Math.sin(lt)})`, width: 640, opacity: at(lt, 0.3, 0.7) }}>
              <div style={{ background: C.white, border: `1px solid ${C.slate2}`, borderRadius: 10, boxShadow: '0 8px 24px rgba(16,32,47,0.12)', overflow: 'hidden' }}>
                <div style={{ padding: '13px 22px', borderBottom: `1px solid ${C.slate2}`, fontFamily: C.sans, display: 'flex', alignItems: 'center' }}>
                  <span style={{ fontSize: 14.5, fontWeight: 700, color: C.navy, whiteSpace: 'nowrap' }}>Crestview Manor — property memory</span>
                  <span style={{ marginLeft: 'auto', fontFamily: C.mono, fontSize: 11.5, color: C.em, whiteSpace: 'nowrap' }}>212 records · growing</span>
                </div>
                {rows.map((r, i) => (
                  <div key={i} style={{ display: 'flex', gap: 12, alignItems: 'baseline', padding: '11px 22px', borderBottom: i < rows.length - 1 ? '1px solid #EDF0F4' : 'none', fontFamily: C.sans, ...fadeUp(lt, r[3], 0.45, 10) }}>
                    <span style={{ fontFamily: C.mono, fontSize: 11.5, fontWeight: 600, color: C.em, width: 64, flex: 'none' }}>{r[0]}</span>
                    <span style={{ fontSize: 14, fontWeight: 600, color: C.navy, width: 210, flex: 'none', whiteSpace: 'nowrap' }}>{r[1]}</span>
                    <span style={{ fontSize: 12.5, color: C.slate5 }}>{r[2]}</span>
                  </div>
                ))}
              </div>
              <div style={{ textAlign: 'center', marginTop: 22, fontFamily: C.serif, fontSize: 24, fontWeight: 700, color: C.navy, ...fadeUp(lt, 3.6) }}>Every issue strengthens the property memory.</div>
              <div style={{ textAlign: 'center', marginTop: 8, fontFamily: C.sans, fontSize: 15.5, color: C.slate5, ...fadeUp(lt, 4.6) }}>The next time something similar happens, your team doesn't start from zero.</div>
            </div>
          </div>
        )}
        {closing && (
          <div style={{ position: 'absolute', inset: 0, display: 'flex', flexDirection: 'column', alignItems: 'center', justifyContent: 'center', gap: 0 }}>
            <div style={{ display: 'flex', alignItems: 'center', gap: 16, ...fadeUp(lt, 7.6, 0.8, 16) }}>
              <img src={(window.__resources && window.__resources.fixiqIcon) || '../assets/fixiq-icon.svg'} width="64" height="64" alt="" />
              <span style={{ fontFamily: C.sans, fontWeight: 800, fontSize: 58, letterSpacing: '-1px' }}>
                <span style={{ color: C.white }}>FIX</span><span style={{ color: C.em300 }}>iQ</span>
              </span>
            </div>
            <div style={{ fontFamily: C.serif, fontStyle: 'italic', fontSize: 25, color: '#E6ECF3', marginTop: 22, whiteSpace: 'nowrap', ...fadeUp(lt, 8.6) }}>Property intelligence for buildings with history.</div>
            <div style={{ width: 70, height: 3, background: C.gold, borderRadius: 2, margin: '26px 0', ...fadeUp(lt, 9.4) }}></div>
            <div style={{ fontFamily: C.sans, fontSize: 16.5, fontWeight: 700, color: C.white, background: C.em, borderRadius: 6, padding: '13px 30px', whiteSpace: 'nowrap', ...fadeUp(lt, 10.0) }}>Start a FIXiQ Pilot</div>
            <div style={{ fontFamily: C.sans, fontSize: 13, color: '#9FB0C2', marginTop: 16, ...fadeUp(lt, 10.6) }}>780-668-0164 · tylerd@lionsgatebuilders.ca · thelionsgategroup.ca/fixiq</div>
            <div style={{ fontFamily: C.sans, fontSize: 10.5, fontWeight: 700, letterSpacing: 2, textTransform: 'uppercase', color: C.gold, marginTop: 22, ...fadeUp(lt, 11.0) }}>A Lionsgate Group Division</div>
          </div>
        )}
      </div>
    );
  }

  window.FxScenesB = { SceneScreen, SceneReview, SceneTrack, SceneMemory };
})();