// BookUno Web — Customer landing hero phone (animated journey)
// Single big iPhone-realistic device cycling through 5 polished scenes:
// 1) Discover · 2) Results · 3) Storefront · 4) Pick time · 5) Confirmed.
// Floating UI accents pop in around the phone tied to specific scenes.

const { useState: useCJ, useEffect: useCJE, useRef: useCJR } = React;

function CustomerJourneyPhone() {
  const [phase, setPhase] = useCJ(0);
  const PHASES = 5;
  const DURATIONS = [2600, 2400, 2600, 2900, 3200];
  useCJE(() => {
    let cancelled = false;
    let i = 0;
    const tick = () => {
      if (cancelled) return;
      setPhase(i);
      setTimeout(() => { i = (i + 1) % PHASES; tick(); }, DURATIONS[i]);
    };
    tick();
    return () => { cancelled = true; };
  }, []);

  return (
    <div className="cjp-stage">

      {/* Phone */}
      <div className="cjp-phone">
        <div className="cjp-bezel">
          <div className="cjp-screen">
            <CJPScreenDiscover    active={phase === 0}/>
            <CJPScreenResults     active={phase === 1}/>
            <CJPScreenStorefront  active={phase === 2}/>
            <CJPScreenTime        active={phase === 3}/>
            <CJPScreenConfirmed   active={phase === 4}/>
          </div>
        </div>
        <CJPDots phase={phase} total={PHASES}/>
      </div>

      {/* Floating accents around the phone */}
      <CJPAccent visible={phase === 0 || phase === 1} side="left" top={70}>
        <div className="cjp-acc-icon" style={{ background: 'linear-gradient(135deg,#FFB4A2,#FF7B9C)' }}>
          <Ic.pin style={{ width: 14, height: 14, color: '#fff' }}/>
        </div>
        <div>
          <div className="cjp-acc-h">142 nearby</div>
          <div className="cjp-acc-s">Open now in Manchester</div>
        </div>
      </CJPAccent>

      <CJPAccent visible={phase === 1 || phase === 2} side="right" top={120}>
        <div className="cjp-acc-icon" style={{ background: 'linear-gradient(135deg,#A8E0FF,#7C5BFF)' }}>
          <Ic.star style={{ width: 14, height: 14, color: '#fff' }}/>
        </div>
        <div>
          <div className="cjp-acc-h">4.9 · 240 reviews</div>
          <div className="cjp-acc-s">"Best fade in town."</div>
        </div>
      </CJPAccent>

      <CJPAccent visible={phase === 2 || phase === 3} side="left" bottom={150}>
        <div className="cjp-acc-icon" style={{ background: 'linear-gradient(135deg,#C5F0CF,#3DA9FF)' }}>
          <Ic.zap style={{ width: 14, height: 14, color: '#fff' }}/>
        </div>
        <div>
          <div className="cjp-acc-h">Live availability</div>
          <div className="cjp-acc-s">Updated every minute</div>
        </div>
      </CJPAccent>

      <CJPAccent visible={phase === 4} side="right" bottom={180}>
        <div className="cjp-acc-icon" style={{ background: 'linear-gradient(135deg,#7B5BFF,#5550FF)' }}>
          <Ic.bell style={{ width: 14, height: 14, color: '#fff' }}/>
        </div>
        <div>
          <div className="cjp-acc-h">Reminder set</div>
          <div className="cjp-acc-s">Friday 1pm · SMS &amp; email</div>
        </div>
      </CJPAccent>

      <CJPAccent visible={phase === 4} side="left" top={200}>
        <div className="cjp-acc-icon" style={{ background: 'linear-gradient(135deg,#FFE4A8,#FF8E94)' }}>
          <Ic.cal style={{ width: 14, height: 14, color: '#fff' }}/>
        </div>
        <div>
          <div className="cjp-acc-h">Added to Calendar</div>
          <div className="cjp-acc-s">Auto-syncs · no copy/paste</div>
        </div>
      </CJPAccent>

    </div>
  );
}

/* ─── Helpers ──────────────────────────────────────────── */
function CJPAccent({ visible, side, top, bottom, children }) {
  const style = { [side]: -40 };
  if (top != null) style.top = top;
  if (bottom != null) style.bottom = bottom;
  return (
    <div className={`cjp-acc cjp-acc-${side} ${visible ? 'on' : ''}`} style={style}>
      {children}
    </div>
  );
}

function CJPDots({ phase, total }) {
  return (
    <div className="cjp-dots">
      {Array.from({ length: total }).map((_, i) => (
        <div key={i} className={`cjp-dot ${phase === i ? 'on' : ''}`}/>
      ))}
    </div>
  );
}

function CJPStatusBar({ dark = false }) {
  const col = dark ? '#fff' : '#15111F';
  return (
    <div className="cjp-status" style={{ color: col }}>
      <span>9:41</span>
      <span style={{ display: 'inline-flex', gap: 5, alignItems: 'center' }}>
        <svg width="15" height="10" viewBox="0 0 14 10"><rect x="0" y="6" width="2.4" height="3.4" rx="0.5" fill={col}/><rect x="3.6" y="4" width="2.4" height="5.4" rx="0.5" fill={col}/><rect x="7.2" y="2" width="2.4" height="7.4" rx="0.5" fill={col}/><rect x="10.8" y="0" width="2.4" height="9.4" rx="0.5" fill={col}/></svg>
        <svg width="22" height="11" viewBox="0 0 22 11"><rect x="0.5" y="0.5" width="18" height="10" rx="2.5" stroke={col} strokeOpacity={dark ? 0.6 : 0.45} fill="none"/><rect x="2" y="2" width="13" height="7" rx="1.2" fill={col}/></svg>
      </span>
    </div>
  );
}

/* ─── Screen 0 · Discover ─────────────────────────────── */
function CJPScreenDiscover({ active }) {
  return (
    <div className={`phone-screen ${active ? 'act' : ''}`}>
      <CJPStatusBar/>
      <div className="cjp-content">
        <div className="cjp-eyebrow">DISCOVER</div>
        <div className="cjp-h">Hi Sara,<br/><span className="cjp-h-pri">what are you booking?</span></div>
        <div className="cjp-sf">
          <Ic.search style={{ width: 18, height: 18, color: 'var(--pri)' }}/>
          {active && <span className="cjp-typing">Saturday haircut near me</span>}
        </div>
        <div className="cjp-cats">
          {['Hair','Beauty','Wellness','Trades','Cleaning'].map((t, i) => (
            <span key={t} className={`cjp-cat ${i === 0 ? 'on' : ''}`}>{t}</span>
          ))}
        </div>
        <div className="cjp-eyebrow" style={{ marginTop: 18 }}>POPULAR NEAR YOU</div>
        <div className="cjp-trend-grid">
          {[
            { id: 'barber',   t: 'Barbers',  c: '124 nearby' },
            { id: 'beauty',   t: 'Hair & Beauty', c: '89 nearby' },
            { id: 'wellness', t: 'Yoga',     c: '67 nearby' },
            { id: 'trades',   t: 'Trades',   c: '142 nearby' },
          ].map((it, i) => (
            <div key={it.id} className="cjp-trend" style={{ background: `linear-gradient(135deg, ${GRAD_PALETTES[i][0]}, ${GRAD_PALETTES[i][3]})` }}>
              {CATEGORY_IMAGES[it.id] && (
                <img src={CATEGORY_IMAGES[it.id]} alt="" loading="lazy" onError={(e) => { e.currentTarget.style.display = 'none'; }}/>
              )}
              <div className="cjp-trend-overlay"/>
              <div className="cjp-trend-meta">
                <div className="cjp-trend-t">{it.t}</div>
                <div className="cjp-trend-c">{it.c}</div>
              </div>
            </div>
          ))}
        </div>
      </div>
    </div>
  );
}

/* ─── Screen 1 · Results ──────────────────────────────── */
function CJPScreenResults({ active }) {
  return (
    <div className={`phone-screen ${active ? 'act' : ''}`}>
      <CJPStatusBar/>
      <div className="cjp-content">
        <div className="cjp-result-head">
          <div>
            <div className="cjp-eyebrow">RESULTS</div>
            <div className="cjp-h" style={{ fontSize: 22, marginTop: 2 }}>Haircut · <span style={{ color: 'var(--muted)' }}>184</span></div>
          </div>
          <button className="cjp-mapbtn"><Ic.pin style={{ width: 14, height: 14 }}/>Map</button>
        </div>
        <div className="cjp-filters">
          {['Sort: Best', '£', '★ 4.5+', 'Open now', 'Today'].map((t, i) => (
            <span key={t} className={`cjp-chip ${i === 0 ? 'on' : ''}`}>{t}</span>
          ))}
        </div>
        <div className="cjp-results">
          {[
            { n: 'Knot & Comb',  r: 4.9, p: '£18', dist: '0.4 mi', sel: true,  seed: 0, id: 'barber' },
            { n: 'The Cuttery',  r: 4.7, p: '£22', dist: '0.7 mi',             seed: 5, id: 'beauty' },
            { n: 'Sharp & Co.',  r: 4.8, p: '£20', dist: '0.9 mi',             seed: 3, id: 'wellness' },
          ].map((b) => (
            <div key={b.n} className={`cjp-result ${b.sel ? 'sel' : ''}`}>
              <div className="cjp-result-img" style={{ background: `linear-gradient(135deg, ${GRAD_PALETTES[b.seed][0]}, ${GRAD_PALETTES[b.seed][3]})` }}>
                {CATEGORY_IMAGES[b.id] && (
                  <img src={CATEGORY_IMAGES[b.id]} alt="" loading="lazy" onError={(e) => { e.currentTarget.style.display = 'none'; }}/>
                )}
              </div>
              <div className="cjp-result-info">
                <div className="cjp-result-name">{b.n}</div>
                <div className="cjp-result-meta">
                  <span style={{ display: 'inline-flex', alignItems: 'center', gap: 3 }}><Ic.star style={{ width: 11, height: 11, color: 'var(--amber)' }}/>{b.r}</span>
                  <span>·</span>
                  <span>{b.dist}</span>
                  <span>·</span>
                  <span>from {b.p}</span>
                </div>
                <div className="cjp-result-slot">Next: today 14:30</div>
              </div>
            </div>
          ))}
        </div>
      </div>
    </div>
  );
}

/* ─── Screen 2 · Storefront ───────────────────────────── */
function CJPScreenStorefront({ active }) {
  return (
    <div className={`phone-screen ${active ? 'act' : ''}`}>
      <div className="cjp-cover" style={{ background: `linear-gradient(135deg, ${GRAD_PALETTES[0][0]}, ${GRAD_PALETTES[0][3]})` }}>
        {CATEGORY_IMAGES.barber && (
          <img src={CATEGORY_IMAGES.barber} alt="" loading="lazy" onError={(e) => { e.currentTarget.style.display = 'none'; }}/>
        )}
        <div className="cjp-cover-fade"/>
        <CJPStatusBar dark/>
        <button className="cjp-cover-fav"><Ic.heart style={{ width: 16, height: 16 }}/></button>
        <div className="cjp-cover-meta">
          <div className="cjp-cover-name">Knot &amp; Comb</div>
          <div className="cjp-cover-sub">
            <span style={{ display: 'inline-flex', alignItems: 'center', gap: 4 }}><Ic.star style={{ width: 12, height: 12, color: 'var(--amber)' }}/>4.9</span>
            <span>·</span>
            <span>Barber · Manchester</span>
            <span>·</span>
            <span>0.4 mi</span>
          </div>
        </div>
      </div>
      <div className="cjp-content" style={{ paddingTop: 14 }}>
        <div className="cjp-eyebrow">CHOOSE A SERVICE</div>
        <div className="cjp-services">
          {[
            { n: 'Skin fade',     d: '45 min · with Mark', p: '£24', sel: true },
            { n: 'Classic cut',   d: '30 min · any stylist', p: '£18' },
            { n: 'Beard trim',    d: '15 min · with Mark', p: '£12' },
          ].map(s => (
            <div key={s.n} className={`cjp-svc ${s.sel ? 'sel' : ''}`}>
              <div>
                <div className="cjp-svc-name">{s.n}</div>
                <div className="cjp-svc-d">{s.d}</div>
              </div>
              <div className="cjp-svc-p">{s.p}</div>
            </div>
          ))}
        </div>
        <div className="cjp-cta">Choose a time →</div>
      </div>
    </div>
  );
}

/* ─── Screen 3 · Time picker ──────────────────────────── */
function CJPScreenTime({ active }) {
  return (
    <div className={`phone-screen ${active ? 'act' : ''}`}>
      <CJPStatusBar/>
      <div className="cjp-content">
        <div className="cjp-back">
          <Ic.arrow style={{ width: 16, height: 16, transform: 'rotate(180deg)' }}/>
          <span>Knot &amp; Comb · Skin fade</span>
        </div>
        <div className="cjp-eyebrow" style={{ marginTop: 10 }}>PICK A DAY</div>
        <div className="cjp-days">
          {['Sat 1','Sun 2','Mon 3','Tue 4','Wed 5','Thu 6'].map((d, i) => {
            const [dow, num] = d.split(' ');
            const sel = i === 0;
            return (
              <div key={d} className={`cjp-day ${sel ? 'sel' : ''}`}>
                <div className="cjp-day-dow">{dow}</div>
                <div className="cjp-day-num">{num}</div>
              </div>
            );
          })}
        </div>
        <div className="cjp-eyebrow" style={{ marginTop: 18 }}>AVAILABLE SLOTS · SAT 1 JUN</div>
        <div className="cjp-slots">
          {['09:30','10:00','11:30','12:00','13:30','14:30','15:30','16:30','17:00'].map((t) => {
            const sel = t === '14:30';
            return (
              <div key={t} className={`cjp-slot ${sel ? 'sel' : ''}`}>{t}</div>
            );
          })}
        </div>
        <div className="cjp-summary">
          <div>
            <div className="cjp-summary-h">Sat 1 Jun · 14:30</div>
            <div className="cjp-summary-s">Skin fade · 45 min</div>
          </div>
          <div className="cjp-summary-p">£24</div>
        </div>
        <div className="cjp-cta">Confirm booking →</div>
      </div>
    </div>
  );
}

/* ─── Screen 4 · Confirmed ─────────────────────────────── */
function CJPScreenConfirmed({ active }) {
  return (
    <div className={`phone-screen cjp-screen-confirmed ${active ? 'act' : ''}`}>
      <div className="blob" style={{ width: 260, height: 260, background: '#FF8FCB', top: 90, right: -60, opacity: 0.45 }}/>
      <div className="blob" style={{ width: 200, height: 200, background: '#A8D8FF', bottom: 40, left: -40, opacity: 0.35 }}/>
      <CJPStatusBar dark/>
      <div className="cjp-confirmed-content">
        <div className="cjp-eyebrow" style={{ color: 'rgba(255,255,255,0.85)' }}>YOU'RE BOOKED</div>
        <div className="cjp-confirmed-check">
          <div className="cjp-confirmed-check-ring"/>
          <Ic.check style={{ width: 48, height: 48, color: '#fff', position: 'relative' }}/>
        </div>
        <div className="cjp-confirmed-h">See you Saturday</div>
        <div className="cjp-confirmed-s">Sat 1 Jun · 14:30 · Knot &amp; Comb</div>

        <div className="cjp-confirmed-card">
          <div className="cjp-confirmed-date">
            <div className="cjp-confirmed-dow">SAT</div>
            <div className="cjp-confirmed-num">01</div>
          </div>
          <div className="cjp-confirmed-info">
            <div className="cjp-confirmed-svc">Skin fade · with Mark</div>
            <div className="cjp-confirmed-loc"><Ic.pin style={{ width: 11, height: 11 }}/> 4 Oxford Rd, Manchester</div>
          </div>
        </div>

        <div className="cjp-confirmed-actions">
          <span className="cjp-confirmed-btn primary">+ Calendar</span>
          <span className="cjp-confirmed-btn">Share</span>
          <span className="cjp-confirmed-btn">Directions</span>
        </div>
      </div>
    </div>
  );
}

/* ─── App download phone — animated mini phone for the
   "Carry your bookings in your pocket" section. Cycles 3 phases:
   home → notification slides in → notification tapped (detail). */
function AppDownloadPhone() {
  const [phase, setPhase] = useCJ(0);
  const PHASES = 3;
  const DURATIONS = [2400, 2400, 2800];
  useCJE(() => {
    let cancelled = false;
    let i = 0;
    const tick = () => {
      if (cancelled) return;
      setPhase(i);
      setTimeout(() => { i = (i + 1) % PHASES; tick(); }, DURATIONS[i]);
    };
    tick();
    return () => { cancelled = true; };
  }, []);

  return (
    <div className="adp-stage">
      <div className="adp-phone">
        <div className="adp-bezel">
          <div className="adp-screen">
            <div className="adp-status">
              <span>9:41</span>
              <span style={{ display: 'inline-flex', gap: 4, alignItems: 'center' }}>
                <svg width="14" height="9" viewBox="0 0 14 10"><rect x="0" y="6" width="2.4" height="3.4" rx="0.5" fill="#fff"/><rect x="3.6" y="4" width="2.4" height="5.4" rx="0.5" fill="#fff"/><rect x="7.2" y="2" width="2.4" height="7.4" rx="0.5" fill="#fff"/><rect x="10.8" y="0" width="2.4" height="9.4" rx="0.5" fill="#fff"/></svg>
                <svg width="20" height="10" viewBox="0 0 22 11"><rect x="0.5" y="0.5" width="18" height="10" rx="2.5" stroke="#fff" strokeOpacity="0.6" fill="none"/><rect x="2" y="2" width="13" height="7" rx="1.2" fill="#fff"/></svg>
              </span>
            </div>
            <div className="adp-home">
              <div className="adp-greeting">
                <div className="adp-gr-eyebrow">{new Date().toLocaleDateString('en-GB', { weekday: 'short', day: 'numeric', month: 'short' }).toUpperCase()}</div>
                <div className="adp-gr-h">Good morning,<br/>Sara ✨</div>
              </div>
              <div className="adp-up-eyebrow">UPCOMING</div>
              <div className="adp-up-card">
                {[
                  { dow: 'SAT', num: '01', svc: 'Skin fade',     loc: 'Knot & Comb · 14:30' },
                  { dow: 'SUN', num: '02', svc: 'Vinyasa flow',  loc: 'Stillpoint · 10:00' },
                  { dow: 'THU', num: '06', svc: 'Deep clean',    loc: 'Brightline · 13:00' },
                ].map((b, i) => (
                  <div key={i} className="adp-up-row">
                    <div className="adp-up-date">
                      <div className="adp-up-dow">{b.dow}</div>
                      <div className="adp-up-num">{b.num}</div>
                    </div>
                    <div className="adp-up-info">
                      <div className="adp-up-svc">{b.svc}</div>
                      <div className="adp-up-loc">{b.loc}</div>
                    </div>
                    <Ic.arrow style={{ width: 14, height: 14, color: 'rgba(255,255,255,0.65)' }}/>
                  </div>
                ))}
              </div>
              <div className="adp-fav-eyebrow">YOUR FAVOURITES</div>
              <div className="adp-favs">
                {['barber','wellness','cleaning','garden'].map((id, i) => (
                  <div key={id} className="adp-fav">
                    {CATEGORY_IMAGES[id] && (
                      <img src={CATEGORY_IMAGES[id]} alt="" loading="lazy" onError={(e) => { e.currentTarget.style.display = 'none'; }}/>
                    )}
                  </div>
                ))}
              </div>
            </div>

            <div className={`adp-notif ${phase >= 1 ? 'on' : ''} ${phase === 2 ? 'tapped' : ''}`}>
              <div className="adp-notif-icon">
                <Ic.bell style={{ width: 18, height: 18, color: '#fff' }}/>
              </div>
              <div className="adp-notif-body">
                <div className="adp-notif-h">Bookuno · just now</div>
                <div className="adp-notif-t">Reminder: Skin fade tomorrow at 14:30</div>
              </div>
            </div>

            <div className={`adp-detail ${phase === 2 ? 'on' : ''}`}>
              <div className="adp-detail-cover">
                {CATEGORY_IMAGES.barber && (
                  <img src={CATEGORY_IMAGES.barber} alt="" loading="lazy" onError={(e) => { e.currentTarget.style.display = 'none'; }}/>
                )}
                <div className="adp-detail-cover-fade"/>
                <div className="adp-detail-cover-meta">
                  <div className="adp-detail-name">Knot &amp; Comb</div>
                  <div className="adp-detail-sub">Skin fade · 45 min · with Mark</div>
                </div>
              </div>
              <div className="adp-detail-body">
                <div className="adp-detail-row">
                  <Ic.cal style={{ width: 14, height: 14, color: '#fff' }}/>
                  <span><b>Sat 1 Jun</b> · 14:30</span>
                </div>
                <div className="adp-detail-row">
                  <Ic.pin style={{ width: 14, height: 14, color: '#fff' }}/>
                  <span>4 Oxford Rd, Manchester</span>
                </div>
                <div className="adp-detail-actions">
                  <span className="adp-detail-btn primary">Directions</span>
                  <span className="adp-detail-btn">Reschedule</span>
                </div>
              </div>
            </div>

            <div className="adp-home-ind"/>
          </div>
        </div>
      </div>
    </div>
  );
}

Object.assign(window, { CustomerJourneyPhone, AppDownloadPhone });