import React, { useCallback, useEffect, useMemo, useRef, useState } from 'react';
import { createRoot } from 'react-dom/client';
import gsap from 'gsap';
import { ScrollTrigger } from 'gsap/ScrollTrigger';
import {
  ArrowLeft, CalendarDays, Check, ChevronLeft, ChevronRight,
  Info, Minus, Plus, ShieldCheck, UtensilsCrossed, X, Waves, Clock,
  Ticket, Users, Tag, CreditCard, MapPin, AlertCircle
} from 'lucide-react';
import './styles.css';

import { DEMO_CARDS, MEALS } from './data/mockData';
import {
  cartBreakdown, getVisibleCards, groupTicketsBySection, mealBreakdown,
  money, offerKind, prettyDate, ticketAudience,
  toApiDate, todayInput, weekday
} from './data/utils';

gsap.registerPlugin(ScrollTrigger);

const STEP_LABELS = ['DATE & TICKETS', 'MEALS', 'REVIEW', 'PAYMENT'];
const NAV_LINKS = [
  'Monsoon Mania', 'Water Rides', 'Dry Rides', 'Visitors Guide',
  'Offers', 'Blogs', 'Group Bookings', 'Careers', 'Contact Us', 'Review Us'
];
const PRM = () => window.matchMedia('(prefers-reduced-motion: reduce)').matches;

function makeDates(n = 60) {
  const out = []; const base = new Date(todayInput());
  for (let i = 0; i < n; i++) { const d = new Date(base); d.setDate(base.getDate() + i); out.push(d.toISOString().slice(0, 10)); }
  return out;
}

// ─────────────────────────────────────────────────────────────
// RIPPLE ENGINE (unchanged)
// ─────────────────────────────────────────────────────────────
class RippleEngine {
  constructor(canvas) {
    this.canvas = canvas; this.ctx = canvas.getContext('2d');
    this.rings = []; this.running = false; this.raf = null;
    this._resize();
    this._ro = new ResizeObserver(() => this._resize());
    this._ro.observe(document.documentElement);
  }
  _resize() { this.canvas.width = window.innerWidth; this.canvas.height = window.innerHeight; }
  addRing(x, y, strength = 1) {
    this.rings.push({ x, y, r: 4, maxR: (100 + Math.random() * 80) * strength, opacity: 0.55 * strength, color: ['rgba(0,212,240,OP)', 'rgba(255,213,0,OP)', 'rgba(255,51,102,OP)'][Math.floor(Math.random() * 3)] });
    if (!this.running) this._start();
  }
  _start() {
    this.running = true;
    const tick = () => {
      const { ctx, canvas, rings } = this;
      ctx.clearRect(0, 0, canvas.width, canvas.height);
      for (let i = rings.length - 1; i >= 0; i--) {
        const ring = rings[i]; const alpha = ring.opacity * (1 - ring.r / ring.maxR);
        if (alpha < 0.005) { rings.splice(i, 1); continue; }
        ctx.beginPath(); ctx.arc(ring.x, ring.y, ring.r, 0, Math.PI * 2);
        ctx.strokeStyle = ring.color.replace('OP', alpha.toFixed(3)); ctx.lineWidth = 2.5; ctx.stroke();
        ring.r += 2.8;
      }
      if (rings.length === 0) { this.running = false; return; }
      this.raf = requestAnimationFrame(tick);
    };
    this.raf = requestAnimationFrame(tick);
  }
  destroy() { cancelAnimationFrame(this.raf); this._ro.disconnect(); }
}

let _rippleEngine = null;
function initRipple() { return; }
export function triggerRippleBurst(x, y) { return; }

// ─────────────────────────────────────────────────────────────
// SCENE BACKGROUND (mobile only)
// ─────────────────────────────────────────────────────────────
function SceneBackground({ mouseX, mouseY }) {
  const p = (factor) => ({ transform: `translate(${mouseX * factor}px, ${mouseY * factor}px)`, willChange: 'transform' });
  return (
    <div className="scene-bg" aria-hidden="true">
      <svg style={{ position: 'absolute', inset: 0, width: '100%', height: '100%' }} viewBox="0 0 1440 900" preserveAspectRatio="xMidYMax slice">
        <g style={p(0.008)}><circle cx="160" cy="160" r="85" fill="#FFD500" style={{ animation: 'pulse-sun 4s ease-in-out infinite', transformOrigin: '160px 160px' }} /><g style={{ animation: 'spin-cw 24s linear infinite', transformOrigin: '160px 160px' }}>{Array.from({ length: 12 }).map((_, i) => (<line key={i} x1="160" y1="65" x2="160" y2="44" stroke="#FFD500" strokeWidth="6" strokeLinecap="round" transform={`rotate(${i * 30}, 160, 160)`} opacity="0.55" />))}</g></g>
        <g style={p(0.018)} transform="translate(1160, 80)"><g style={{ animation: 'spin-cw 20s linear infinite', transformOrigin: '110px 110px' }}><circle cx="110" cy="110" r="100" fill="none" stroke="rgba(255,255,255,0.6)" strokeWidth="5" /><circle cx="110" cy="110" r="14" fill="rgba(0,40,85,0.8)" />{[0,45,90,135,180,225,270,315].map((deg, i) => { const rad = (deg - 90) * Math.PI / 180; const rx = 110 + 100 * Math.cos(rad), ry = 110 + 100 * Math.sin(rad); const colors = ['#FF3366','#FFD500','#00E5FF','#00E676','#FF3366','#FFD500','#00E5FF','#00E676']; return (<g key={deg}><line x1="110" y1="110" x2={rx} y2={ry} stroke="rgba(255,255,255,0.5)" strokeWidth="2.5" /><rect x={rx - 10} y={ry - 12} width="20" height="24" rx="5" fill={colors[i]} stroke="rgba(0,40,85,0.5)" strokeWidth="1.5" /></g>); })}</g><path d="M 80 300 L 110 110 L 140 300" fill="none" stroke="rgba(255,255,255,0.7)" strokeWidth="7" strokeLinecap="round" strokeLinejoin="round" /><line x1="60" y1="300" x2="160" y2="300" stroke="rgba(255,255,255,0.7)" strokeWidth="7" strokeLinecap="round" /></g>
        <g style={p(0.004)} opacity="0.4"><ellipse cx="600" cy="120" rx="90" ry="40" fill="white" /><ellipse cx="660" cy="100" rx="60" ry="35" fill="white" /><ellipse cx="550" cy="110" rx="55" ry="30" fill="white" /></g>
      </svg>
    </div>
  );
}

// ─────────────────────────────────────────────────────────────
// SPLASH BURST
// ─────────────────────────────────────────────────────────────
function triggerSplash(x, y) {
  if (PRM()) return;
  const container = document.getElementById('splash-container');
  if (!container) return;
  const colors = ['#00E5FF','#FFD500','#FF3366','#00E676','#00B8D9'];
  for (let i = 0; i < 10; i++) {
    const dot = document.createElement('div'); dot.className = 'splash-dot';
    dot.style.left = `${x}px`; dot.style.top = `${y}px`; dot.style.background = colors[i % colors.length];
    container.appendChild(dot);
    const ang = (Math.PI * 2 * i) / 10; const dist = 45 + Math.random() * 55;
    gsap.to(dot, { x: Math.cos(ang) * dist, y: Math.sin(ang) * dist, opacity: 0, scale: 0.2, duration: 0.65 + Math.random() * 0.3, ease: 'power2.out', onComplete: () => dot.remove() });
  }
}

// ─────────────────────────────────────────────────────────────
// ORIGINAL SITE NAVBAR
// ─────────────────────────────────────────────────────────────
function SiteNavbar({ onHomeClick }) {
  return (
    <header className="site-navbar">
      <div className="sn-brand" onClick={onHomeClick} role="button" tabIndex={0} aria-label="Wild Waters Home">
        <div className="sn-logo-badge">
          <img 
            src="/wild-water-logo.png" 
            alt="Wild Waters Logo" 
            className="sn-logo-img"
            onError={(e) => {
              e.target.style.display = 'none';
              const fallback = e.target.nextElementSibling;
              if (fallback) fallback.style.display = 'flex';
            }}
          />
          <div className="sn-logo-text" style={{ display: 'none', flexDirection: 'column' }}>
            <strong>WILD WATERS</strong>
            <span>AMUSEMENT &amp; WATER PARK</span>
          </div>
        </div>
      </div>
      <div className="sn-menu">
        {NAV_LINKS.map(link => (
          <a key={link} href="#" onClick={e => e.preventDefault()} className="sn-link">
            {link}
          </a>
        ))}
        <a href="#" onClick={e => e.preventDefault()} className="sn-link sn-link--location">
          <MapPin size={13} style={{ display: 'inline', marginRight: 4, verticalAlign: '-2px' }} /> Location
        </a>
      </div>
    </header>
  );
}

// ─────────────────────────────────────────────────────────────
// FERRIS WHEEL PROGRESS ICON (MATCHING ORIGINAL VIDEO RECORDING)
// ─────────────────────────────────────────────────────────────
function FerrisWheelIcon({ step }) {
  // Smoothly rotate 90 degrees per step progress
  const rotationAngle = (step - 1) * 90;

  return (
    <div className="ferris-wheel-wrap" title={`Step ${step} of 4: Booking Progress Ferris Wheel`}>
      <svg width="40" height="44" viewBox="0 0 80 88" fill="none" className="ferris-wheel-svg">
        {/* Stand Support Structure (Bottom legs and base bar) */}
        <line x1="32" y1="52" x2="28" y2="76" stroke="#002855" strokeWidth="3" strokeLinecap="round" />
        <line x1="48" y1="52" x2="52" y2="76" stroke="#002855" strokeWidth="3" strokeLinecap="round" />
        <line x1="22" y1="76" x2="58" y2="76" stroke="#002855" strokeWidth="3.5" strokeLinecap="round" />

        {/* Wheel Assembly (Rotates smoothly on step transition, paused while on slide) */}
        <g
          style={{
            transformOrigin: '40px 38px',
            transform: `rotate(${rotationAngle}deg)`,
            transition: 'transform 0.65s cubic-bezier(0.34, 1.56, 0.64, 1)'
          }}
        >
          {/* Outer Wheel Circle */}
          <circle cx="40" cy="38" r="26" stroke="#002855" strokeWidth="2" fill="none" />

          {/* 4 Main Spokes */}
          <line x1="40" y1="12" x2="40" y2="64" stroke="#002855" strokeWidth="1.5" />
          <line x1="14" y1="38" x2="66" y2="38" stroke="#002855" strokeWidth="1.5" />

          {/* Center Hub Dot */}
          <circle cx="40" cy="38" r="4.5" fill="#002855" />

          {/* 4 Circular Cabins (Dots) */}
          {[
            { angle: 270, stepIdx: 1, cx: 40, cy: 12 }, // Top (12 o'clock)
            { angle: 0,   stepIdx: 2, cx: 66, cy: 38 }, // Right (3 o'clock)
            { angle: 90,  stepIdx: 3, cx: 40, cy: 64 }, // Bottom (6 o'clock)
            { angle: 180, stepIdx: 4, cx: 14, cy: 38 }, // Left (9 o'clock)
          ].map((seat) => {
            const isDone = seat.stepIdx < step;
            const isActive = seat.stepIdx === step;

            let fillColor = '#FFFFFF';
            let strokeColor = '#002855';

            if (isDone) {
              fillColor = '#00C853'; // Vibrant Green for completed step (matching recording!)
              strokeColor = '#003816';
            } else if (isActive) {
              fillColor = '#E91E63'; // Pink / Magenta active seat dot (matching recording!)
              strokeColor = '#880e4f';
            } else {
              fillColor = '#FFFFFF'; // White seat for upcoming steps
              strokeColor = '#002855';
            }

            return (
              <circle
                key={seat.stepIdx}
                cx={seat.cx}
                cy={seat.cy}
                r="5.5"
                fill={fillColor}
                stroke={strokeColor}
                strokeWidth="2"
                style={{
                  transition: 'fill 0.4s ease, stroke 0.4s ease',
                  filter: isDone
                    ? 'drop-shadow(0 0 3px rgba(0,200,83,0.6))'
                    : isActive
                    ? 'drop-shadow(0 0 3px rgba(233,30,99,0.6))'
                    : 'none'
                }}
              />
            );
          })}
        </g>
      </svg>
    </div>
  );
}

// ─────────────────────────────────────────────────────────────
// WAVE PROGRESS NAV (FLOATING BELOW NAVBAR WITH FERRIS WHEEL)
// ─────────────────────────────────────────────────────────────
function WaveProgress({ step, onGoTo }) {
  return (
    <div className="floating-progress-container">
      <FerrisWheelIcon step={step} />
      <nav className="progress-nav" role="navigation" aria-label="Booking progress">
        <div className="wp-track">
          {STEP_LABELS.map((label, i) => {
            const s = i + 1, done = s < step, active = s === step;
            return (
              <React.Fragment key={s}>
                {i > 0 && (
                  <div className={`wp-connector ${s <= step ? 'done' : ''}`}>
                    <svg viewBox="0 0 60 8" preserveAspectRatio="none"><path d="M0 4 Q15 1 30 4 T60 4" fill="none" stroke={s <= step ? 'var(--c-primary)' : 'rgba(255,255,255,0.4)'} strokeWidth="2.5" strokeLinecap="round" /></svg>
                  </div>
                )}
                <button
                  className={`wp-step ${active ? 'active' : ''} ${done ? 'done' : ''}`}
                  onClick={() => done && onGoTo(s)}
                  aria-label={`Step ${s}: ${label}${done ? ' – click to go back' : active ? ' (current)' : ''}`}
                  aria-current={active ? 'step' : undefined}
                  tabIndex={done ? 0 : -1}
                >
                  <div className="wp-bubble">
                    {done ? <Check size={16} strokeWidth={3} /> : <span>{s}</span>}
                    {active && <div className="wp-ripple" />}
                  </div>
                  <div className="wp-label">{label}</div>
                </button>
              </React.Fragment>
            );
          })}
        </div>
      </nav>
    </div>
  );
}

// ─────────────────────────────────────────────────────────────
// TICKET THEMES
// ─────────────────────────────────────────────────────────────
const TICKET_IMAGES = {
  adult:    '/ticket-bg/adult-ticket.png',
  child:    '/ticket-bg/child-ticket.png',
  senior:   '/ticket-bg/senior_ticket.png',
  group:    '/ticket-bg/group-ticket.png',
  birthday: '/ticket-bg/birthday-ticket.png',
  defence:  '/ticket-bg/defence-ticket.png',
  student:  '/ticket-bg/student-ticket.png',
};

const TICKET_GRADIENTS = {
  adult:    'linear-gradient(135deg,#00c4e8 0%,#0062a0 100%)',
  child:    'linear-gradient(135deg,#ff9a00 0%,#ff3d77 100%)',
  senior:   'linear-gradient(135deg,#f7d488 0%,#00b8d9 100%)',
  group:    'linear-gradient(135deg,#00e5ff 0%,#00e676 100%)',
  birthday: 'linear-gradient(135deg,#ff3366 0%,#ffd500 100%)',
  defence:  'linear-gradient(135deg,#ff8f00 0%,#1b5e20 100%)',
  student:  'linear-gradient(135deg,#9c27b0 0%,#ffd500 100%)',
};

function getTicketThemeKey(card) {
  const kind = offerKind(card);
  if (kind === 'group') return 'group';
  if (kind === 'birthday') return 'birthday';
  if (kind === 'defence') return 'defence';
  if (kind === 'student') return 'student';
  const aud = ticketAudience(card);
  if (aud === 'child') return 'child';
  if (aud === 'senior') return 'senior';
  if (aud === 'adult') return 'adult';
  return 'group';
}

// ─────────────────────────────────────────────────────────────
// BOOKING SUMMARY CARD
// ─────────────────────────────────────────────────────────────
function BookingSummaryCard({ date, cart, meals, eligibleCards, bd, md, totalValRef, onUpdateCart, onEditCart, ctaButton }) {
  const hasItems = bd.lineItems.length > 0 || md.lineItems.length > 0;
  const grandTotal = bd.total + md.total;

  return (
    <div className="booking-summary-card">
      <div className="bsc-header">
        <div className="bsc-header-left">
          <Ticket size={14} />
          <span>YOUR BOOKING</span>
        </div>
        {onEditCart && (
          <button className="bsc-edit-cart-btn" onClick={onEditCart}>← Edit Cart</button>
        )}
      </div>
      <div className="bsc-date">{prettyDate(date)}</div>

      {!hasItems && (
        <div className="bsc-empty">
          <Ticket size={32} strokeWidth={1.5} style={{ opacity: 0.25, marginBottom: 10 }} />
          <p>Add tickets to see<br />your booking summary</p>
        </div>
      )}

      {bd.lineItems.length > 0 && (
        <div className="bsc-section">
          <div className="bsc-section-label">ENTRY TICKETS</div>
          {bd.lineItems.map((li, i) => (
            <div key={i} className="bsc-line">
              {onUpdateCart && (
                <button className="bsc-remove-top" onClick={() => onUpdateCart(li.cardId, -li.qty)} aria-label={`Remove ${li.label}`} title="Remove item">
                  <X size={12} strokeWidth={3} />
                </button>
              )}
              <div className="bsc-line-left">
                <div className="bsc-line-name">
                  {li.qty} × {li.label}
                </div>
                <div className="bsc-line-meta">
                  {li.entries > li.qty && <span className="bsc-meta-tag">{li.entries} entries</span>}
                  <span className="bsc-meta-tag">{li.audience?.toUpperCase() || 'ADULT'}</span>
                </div>
              </div>
              <div className="bsc-line-right">
                {li.savings > 0 && <span className="bsc-orig">{money(li.displayUnit)}</span>}
                <strong className="bsc-line-total">{money(li.total)}</strong>
              </div>
            </div>
          ))}
        </div>
      )}

      {md.lineItems.length > 0 && (
        <div className="bsc-section">
          <div className="bsc-section-label">MEALS</div>
          {md.lineItems.map((li, i) => (
            <div key={i} className="bsc-line">
              <div className="bsc-line-left">
                <div className="bsc-line-name">{li.qty} × {li.label}</div>
              </div>
              <strong className="bsc-line-total">{money(li.total)}</strong>
            </div>
          ))}
        </div>
      )}

      {hasItems && (
        <>
          {bd.savings > 0 && (
            <div className="bsc-savings-row">
              <span><Tag size={12} style={{ display:'inline', marginRight: 5 }} />YOU SAVE</span>
              <span className="bsc-savings-amt">{money(bd.savings)}</span>
            </div>
          )}
          <div className="bsc-total">
            <div className="bsc-total-label">
              <span>TOTAL PAYABLE</span>
              {bd.entries > 0 && <span className="bsc-total-entries">{bd.entries} park {bd.entries === 1 ? 'entry' : 'entries'}</span>}
            </div>
            <div ref={totalValRef} className="bsc-total-amt">{money(grandTotal)}</div>
          </div>
        </>
      )}

      {ctaButton && (
        <div className="bsc-cta-wrapper">
          {ctaButton}
        </div>
      )}
    </div>
  );
}

// ─────────────────────────────────────────────────────────────
// TICKET CARD
// ─────────────────────────────────────────────────────────────
function TicketCard({ card, qty, onAdd, onInc, onDec }) {
  const ref = useRef(null);
  const themeKey = getTicketThemeKey(card);
  const imgSrc = TICKET_IMAGES[themeKey];
  const gradient = TICKET_GRADIENTS[themeKey];
  const savings = Number(card.displayTicketAmount) - Number(card.ticketAmount);
  const hasSavings = savings > 0;
  const entries = Number(card.entryCount) > 1 ? card.entryCount : null;
  const audience = ticketAudience(card);

  const onMove = useCallback((e) => {
    if (PRM()) return;
    const el = ref.current; if (!el) return;
    const r = el.getBoundingClientRect();
    gsap.to(el, { rotateY: ((e.clientX - r.left) / r.width - 0.5) * 5, rotateX: -((e.clientY - r.top) / r.height - 0.5) * 3, duration: 0.3, ease: 'power2.out', transformPerspective: 900 });
  }, []);
  const onLeave = useCallback(() => {
    if (PRM()) return;
    gsap.to(ref.current, { rotateY: 0, rotateX: 0, duration: 0.5, ease: 'elastic.out(1,0.5)' });
  }, []);

  return (
    <div ref={ref} className={`ticket-card ${qty > 0 ? 'in-cart' : ''}`} onMouseMove={onMove} onMouseLeave={onLeave}
      style={{ '--tc-img': `url(${imgSrc})`, '--tc-grad': gradient }}>
      <div className="tc-bg-image" aria-hidden="true" />
      <div className="tc-content">
        <div className="tc-top-row">
          <div className="tc-badges">
            <span className="tc-subclass">{card.subclass || 'REGULAR'}</span>
            {hasSavings && <span className="tc-discount-badge">{Math.round((savings / Number(card.displayTicketAmount)) * 100)}% OFF</span>}
          </div>
          <div className="tc-price-wrap">
            {hasSavings && <span className="tc-orig-price">{money(Number(card.displayTicketAmount))}</span>}
            <strong className="tc-price">{money(card.ticketAmount)}</strong>
          </div>
        </div>
        <div className="tc-bottom-row">
          <div className="tc-info">
            <h4>{card.name}</h4>
            {card.description && <p>{card.description}</p>}
            <div className="tc-meta">
              <span className="meta-pill">{audience.toUpperCase()}</span>
              {entries && <span className="meta-pill">{entries} ENTRIES</span>}
            </div>
          </div>
          <div className="tc-action">
            {qty === 0
              ? <button className="btn-add" onClick={(e) => { triggerSplash(e.clientX, e.clientY); onAdd(); }} id={`add-${card.id}`}>
                  <Plus size={14} strokeWidth={3} /> ADD
                </button>
              : <div className="cart-stepper">
                  <button className="cs-btn" onClick={onDec} aria-label="Decrease"><Minus size={14} /></button>
                  <strong>{qty}</strong>
                  <button className="cs-btn" onClick={(e) => { triggerSplash(e.clientX, e.clientY); onInc(); }} aria-label="Increase"><Plus size={14} /></button>
                </div>
            }
          </div>
        </div>
      </div>
    </div>
  );
}

// ─────────────────────────────────────────────────────────────
// CALENDAR POPUP
// ─────────────────────────────────────────────────────────────
function CalendarPopup({ selectedDate, onSelect, onClose }) {
  const today = todayInput();
  const [viewMonth, setViewMonth] = useState(() => {
    const d = new Date(`${selectedDate}T12:00:00`);
    return { year: d.getFullYear(), month: d.getMonth() };
  });
  const daysInMonth = (year, month) => new Date(year, month + 1, 0).getDate();
  const firstDayOfMonth = (year, month) => new Date(year, month, 1).getDay();
  const prevMonth = () => setViewMonth(p => { const d = new Date(p.year, p.month - 1, 1); return { year: d.getFullYear(), month: d.getMonth() }; });
  const nextMonth = () => setViewMonth(p => { const d = new Date(p.year, p.month + 1, 1); return { year: d.getFullYear(), month: d.getMonth() }; });
  const { year, month } = viewMonth;
  const dim = daysInMonth(year, month);
  const firstDay = firstDayOfMonth(year, month);
  const monthName = new Date(year, month, 1).toLocaleString('default', { month: 'long', year: 'numeric' });
  const maxDate = new Date(today); maxDate.setMonth(maxDate.getMonth() + 2);
  const days = [];
  for (let i = 0; i < firstDay; i++) days.push(null);
  for (let d = 1; d <= dim; d++) days.push(d);

  return (
    <div className="calendar-popup" role="dialog" aria-label="Pick a date">
      <div className="cal-nav">
        <button className="cal-nav-btn" onClick={prevMonth} aria-label="Previous month"><ChevronLeft size={16} /></button>
        <span className="cal-month-label">{monthName}</span>
        <button className="cal-nav-btn" onClick={nextMonth} aria-label="Next month"><ChevronRight size={16} /></button>
      </div>
      <div className="cal-weekdays">{['Su','Mo','Tu','We','Th','Fr','Sa'].map(d => <div key={d} className="cal-wd">{d}</div>)}</div>
      <div className="cal-grid">
        {days.map((day, i) => {
          if (!day) return <div key={`e-${i}`} />;
          const mm = String(month + 1).padStart(2, '0'), dd = String(day).padStart(2, '0'), iso = `${year}-${mm}-${dd}`;
          const isPast = iso < today, isTooFar = new Date(`${iso}T12:00:00`) > maxDate, isSelected = iso === selectedDate, isToday = iso === today;
          return (
            <button key={iso} className={`cal-day ${isSelected ? 'selected' : ''} ${isToday ? 'today' : ''} ${isPast || isTooFar ? 'disabled' : ''}`}
              onClick={() => { if (!isPast && !isTooFar) { onSelect(iso); onClose(); } }}
              aria-pressed={isSelected} aria-disabled={isPast || isTooFar}>{day}</button>
          );
        })}
      </div>
    </div>
  );
}

// ─────────────────────────────────────────────────────────────
// STEP 1 — DATE & TICKETS
// ─────────────────────────────────────────────────────────────
function DateAndTicketsStep({ date, setDate, dates, loading, error, cart, updateCart, onNext, bd, md, totalValRef, eligibleCards }) {
  const [calOpen, setCalOpen] = useState(false);
  const calRef = useRef(null);
  const ticketListRef = useRef(null);
  const VISIBLE_DATES = 14;
  const visibleDates = dates.slice(0, VISIBLE_DATES);
  const grouped = useMemo(() => groupTicketsBySection(eligibleCards), [eligibleCards]);
  const hasCart = Object.keys(cart).length > 0;

  useEffect(() => {
    const handler = (e) => { if (calRef.current && !calRef.current.contains(e.target)) setCalOpen(false); };
    document.addEventListener('mousedown', handler);
    return () => document.removeEventListener('mousedown', handler);
  }, []);

  useEffect(() => {
    if (!ticketListRef.current || PRM()) return;
    const cards = ticketListRef.current.querySelectorAll('.ticket-card');
    if (!cards.length) return;
    gsap.fromTo(cards, { opacity: 0, y: 20 }, { opacity: 1, y: 0, stagger: 0.04, duration: 0.32, ease: 'power2.out' });
    return () => { ScrollTrigger.getAll().forEach(t => t.kill()); };
  }, [eligibleCards]);

  const sectionLabelClass = (section) => {
    const s = section.toLowerCase();
    if (s.includes('group') || s.includes('buy')) return 'group';
    if (s.includes('birthday')) return 'birthday';
    if (s.includes('defence') || s.includes('defense')) return 'defence';
    if (s.includes('student')) return 'student';
    return '';
  };

  return (
    <div className={`s1-layout ${hasCart ? 'has-cart' : 'no-cart'}`}>
      {/* LEFT: Eyecatcher branding panel */}
      <div className="s1-left">
        <span className="hero-eyebrow">PLAN YOUR WILD DAY</span>
        <h1 className="hero-title">WHEN<br />ARE WE<br /><em>RIDING?</em></h1>
        <div className="hero-date-badge">
          <div className="hdb-day">{date.split('-')[2]}</div>
          <div className="hdb-info">
            {weekday(date).toUpperCase()} · {new Date(`${date}T12:00:00`).toLocaleString('default', { month: 'short' }).toUpperCase()}<br />
            Selected park day
          </div>
        </div>
        <div className="s1-park-hours">
          <Clock size={16} color="#002855" />
          <div>
            <strong>WEEKDAY HOURS</strong><span>11 AM – 6 PM</span>
            <strong>WEEKEND HOURS</strong><span>11 AM – 7 PM</span>
          </div>
        </div>
        <div className="s1-park-tagline">
          <Waves size={16} color="#002855" />
          <span>50+ Water &amp; Dry Rides · Wave Pool · Rain Dance · Foam Party · Magic Show · 360° Dome</span>
        </div>
      </div>

      {/* MIDDLE: 2 Weeks Date Strip + Tickets List */}
      <div className="s1-middle">
        <div className="s1-middle-scroll">
          <div className="s1-section-header-row" ref={calRef}>
            <div className="s1-section-label">
              <CalendarDays size={18} /> PICK A PARK DAY (NEXT 2 WEEKS)
            </div>
            <button className="top-cal-btn" onClick={() => setCalOpen(p => !p)} aria-label="Open Calendar Picker">
              <CalendarDays size={14} /> Open Calendar
            </button>
            {calOpen && (
              <CalendarPopup selectedDate={date} onSelect={(d) => { setDate(d); }} onClose={() => setCalOpen(false)} />
            )}
          </div>

          <div className="s1-date-row">
            <div className="date-strip">
              {visibleDates.map(d => (
                <button key={d} className={`date-chip ${d === date ? 'selected' : ''}`}
                  onClick={() => setDate(d)} aria-pressed={d === date} aria-label={`${weekday(d)} ${d.split('-')[2]}`}>
                  <span className="dc-month">{new Date(`${d}T12:00:00`).toLocaleString('default', { month: 'short' })}</span>
                  <strong className="dc-num">{d.split('-')[2]}</strong>
                  <span className="dc-day">{weekday(d)}</span>
                </button>
              ))}
              <button className={`date-chip date-chip--more ${calOpen ? 'selected' : ''}`}
                onClick={() => setCalOpen(p => !p)} aria-label="More dates" aria-expanded={calOpen}>
                <span className="dc-month">MORE</span>
                <CalendarDays size={20} />
                <span className="dc-day">DATES</span>
              </button>
            </div>
          </div>

          {error && <div className="info-banner warning" style={{ marginBottom: 14 }}><Info size={18} /> {error}</div>}

          {loading
            ? <div className="loading-tickets"><div className="loading-spinner" /><p>Fetching tickets for {prettyDate(date)}…</p></div>
            : eligibleCards.length === 0
            ? <div className="no-tickets-box"><Ticket size={40} strokeWidth={1.2} style={{ opacity: 0.25, marginBottom: 12 }} /><h3>No tickets for this date</h3><p>Try selecting a different date above</p></div>
            : <div ref={ticketListRef}>
                {grouped.map(({ section, cards: sCards }) => (
                  <div key={section} className="ticket-section">
                    <div className={`ticket-section-header ${sectionLabelClass(section)}`}>{section}</div>
                    {sCards.map(card => (
                      <TicketCard key={card.id} card={card} qty={cart[card.id] || 0}
                        onAdd={() => updateCart(card.id, 1)}
                        onInc={() => updateCart(card.id, 1)}
                        onDec={() => updateCart(card.id, -1)}
                      />
                    ))}
                  </div>
                ))}
              </div>
          }
        </div>
      </div>

      {/* RIGHT / DETAILS PANEL */}
      {hasCart && (
        <div className="s1-right visible">
          <div className="s1-right-inner">
            <BookingSummaryCard
              date={date} cart={cart} meals={{}} eligibleCards={eligibleCards}
              bd={bd} md={{ total: 0, lineItems: [] }} totalValRef={totalValRef}
              onUpdateCart={updateCart}
              ctaButton={
                <button className="btn-primary btn-full" onClick={(e) => { triggerSplash(e.clientX, e.clientY); onNext(); }} id="btn-choose-meals">
                  CHOOSE YOUR MEALS <ChevronRight size={18} strokeWidth={3} />
                </button>
              }
            />
          </div>
        </div>
      )}
    </div>
  );
}

// ─────────────────────────────────────────────────────────────
// STEP 2 — MEALS (50-50 BALANCED SPLIT)
// ─────────────────────────────────────────────────────────────
function MealsStep({ date, cart, meals, updateMeal, onNext, onSkip, onBack, onEditCart, bd, md, totalValRef, eligibleCards }) {
  return (
    <div className="step-layout step-layout--meals">
      <div className="step-main">
        <button className="btn-back-link" onClick={onBack} id="btn-back-step2">
          <ArrowLeft size={14} /> BACK TO TICKETS
        </button>
        <div className="step-header">
          <span className="eyebrow">02 — FUEL UP FOR THE RIDES</span>
          <h1 className="page-title">ADD MEALS</h1>
        </div>

        <button className="btn-skip-meals" onClick={onSkip} id="btn-skip-meals">
          <UtensilsCrossed size={16} /> Skip Meals &amp; Continue to Review <ChevronRight size={16} strokeWidth={3} />
        </button>

        <div className="meals-grid">
          {MEALS.map(meal => {
            const qty = meals[meal.id] || 0;
            return (
              <div key={meal.id} className={`meal-card ${qty > 0 ? 'in-cart' : ''}`}>
                <div className="meal-card-img-wrap">
                  <img src={meal.image} alt={meal.name} className="meal-card-img"
                    onError={e => { e.target.parentElement.style.background = 'linear-gradient(135deg,#f97316,#ef4444)'; e.target.style.display = 'none'; }} />
                </div>
                <div className="meal-card-body">
                  <div className="meal-card-info">
                    <h3>{meal.name}</h3>
                    <p>{meal.description}</p>
                    {meal.note && <small>{meal.note}</small>}
                  </div>
                  <div className="meal-card-action">
                    <strong className="meal-price">{money(meal.price)}</strong>
                    {qty === 0
                      ? <button className="btn-add" onClick={(e) => { triggerSplash(e.clientX, e.clientY); updateMeal(meal.id, 1); }}><Plus size={14} strokeWidth={3} /> ADD</button>
                      : <div className="cart-stepper">
                          <button className="cs-btn" onClick={() => updateMeal(meal.id, -1)} aria-label="Decrease"><Minus size={14} /></button>
                          <strong>{qty}</strong>
                          <button className="cs-btn" onClick={(e) => { triggerSplash(e.clientX, e.clientY); updateMeal(meal.id, 1); }} aria-label="Increase"><Plus size={14} /></button>
                        </div>
                    }
                  </div>
                </div>
              </div>
            );
          })}
        </div>
      </div>

      <aside className="step-aside">
        <BookingSummaryCard
          date={date} cart={cart} meals={meals} eligibleCards={eligibleCards}
          bd={bd} md={md} totalValRef={totalValRef}
          onUpdateCart={null} onEditCart={onEditCart}
          ctaButton={
            <button className="btn-primary btn-full" onClick={(e) => { triggerSplash(e.clientX, e.clientY); onNext(); }} id="btn-review-booking">
              REVIEW BOOKING <ChevronRight size={18} strokeWidth={3} />
            </button>
          }
        />
      </aside>
    </div>
  );
}

// ─────────────────────────────────────────────────────────────
// STEP 3 — REVIEW (50-50 SPLIT & YELLOW STRIKE AMOUNTS)
// ─────────────────────────────────────────────────────────────
function ReviewStep({ date, cart, meals, eligibleCards, bd, md, totalValRef, onPay, onBack, onEditCart, paymentError, onClearError }) {
  const [personal, setPersonal] = useState({ name: '', email: '', mobile: '' });
  const [errors, setErrors] = useState({});
  const grandTotal = bd.total + md.total;

  const validate = () => {
    const e = {};
    if (!personal.name.trim()) e.name = true;
    if (!personal.email.trim() || !/\S+@\S+\.\S+/.test(personal.email)) e.email = true;
    if (!personal.mobile.trim() || !/^\d{10}$/.test(personal.mobile.replace(/\s/g, ''))) e.mobile = true;
    setErrors(e);
    return Object.keys(e).length === 0;
  };

  const handlePay = (e) => {
    if (!validate()) return;
    if (onClearError) onClearError();
    triggerSplash(e.clientX, e.clientY);
    onPay(personal);
  };

  return (
    <div className="step-layout step-layout--review">
      {/* LEFT: Customer Details Form (50%) */}
      <div className="step-main">
        <button className="btn-back-link" onClick={onBack} id="btn-back-step3">
          <ArrowLeft size={14} /> BACK TO MEALS
        </button>

        {paymentError && (
          <div className="info-banner warning" style={{ marginBottom: 16 }}>
            <AlertCircle size={22} color="#ff3366" style={{ flexShrink: 0 }} />
            <div>
              <strong style={{ display: 'block', fontSize: 13, color: '#ff3366', textTransform: 'uppercase', marginBottom: 2 }}>Payment Failed</strong>
              <span style={{ fontSize: 12, lineHeight: 1.5 }}>{paymentError}</span>
            </div>
          </div>
        )}

        <div className="step-header">
          <span className="eyebrow">03 — ALMOST THERE</span>
          <h1 className="page-title">YOUR DETAILS</h1>
          <p className="subtitle" style={{ marginTop: 4 }}>We'll send your tickets to this contact</p>
        </div>

        <div className="personal-form">
          <div className="form-field">
            <label htmlFor="pf-name">Full Name *</label>
            <input id="pf-name" type="text" placeholder="Your full name" value={personal.name}
              onChange={e => setPersonal(p => ({ ...p, name: e.target.value }))}
              className={errors.name ? 'error' : ''} />
            {errors.name && <span className="form-error">Please enter your name</span>}
          </div>
          <div className="form-field">
            <label htmlFor="pf-email">Email Address *</label>
            <input id="pf-email" type="email" placeholder="your@email.com" value={personal.email}
              onChange={e => setPersonal(p => ({ ...p, email: e.target.value }))}
              className={errors.email ? 'error' : ''} />
            {errors.email && <span className="form-error">Please enter a valid email</span>}
          </div>
          <div className="form-field">
            <label htmlFor="pf-mobile">Mobile Number *</label>
            <div className="mobile-input-wrap">
              <span className="mobile-prefix">+91</span>
              <input id="pf-mobile" type="tel" placeholder="10-digit number" value={personal.mobile}
                onChange={e => setPersonal(p => ({ ...p, mobile: e.target.value.replace(/\D/g, '').slice(0, 10) }))}
                className={errors.mobile ? 'error' : ''} maxLength={10} />
            </div>
            {errors.mobile && <span className="form-error">Please enter a valid 10-digit mobile</span>}
          </div>
        </div>

        <p className="form-consent">By continuing, I agree to the <a href="#" style={{ color: 'var(--c-primary)', fontWeight: 700 }}>Terms &amp; Conditions</a></p>

        <div className="info-banner" style={{ marginTop: 20 }}>
          <ShieldCheck size={20} aria-hidden="true" />
          <div>
            <p style={{ fontWeight: 800, marginBottom: 4 }}>Secure Payment · Instant Confirmation</p>
            <p style={{ fontSize: 12, lineHeight: 1.6 }}>Non-refundable · Non-transferable · No re-entry<br />Senior / Defence / Student tickets require valid Govt. ID at gate<br />Queries: +91-77997 38111</p>
          </div>
        </div>
      </div>

      {/* RIGHT: Detailed Review Summary Card (50%) */}
      <aside className="step-aside step-aside--review">
        <div className="review-summary-card">
          <div className="review-summary-header">
            <span className="review-summary-title">BOOKING SUMMARY</span>
            {onEditCart && <button className="bsc-edit-cart-btn" onClick={onEditCart}>← Edit Cart</button>}
          </div>

          <div className="review-info-row">
            <CalendarDays size={14} />
            <span>{prettyDate(date)}</span>
          </div>

          {bd.lineItems.length > 0 && (
            <div className="review-block">
              <div className="review-block-title">ENTRY TICKETS</div>
              {bd.lineItems.map((li, i) => (
                <div key={i} className="review-item review-item--detailed">
                  <div className="review-item-left">
                    <div className="review-item-name">{li.label}</div>
                    <div className="review-item-meta">
                      {li.qty} ticket{li.qty > 1 ? 's' : ''}
                      {li.entries > li.qty && ` · ${li.entries} entries`}
                      {` · ${li.qty} ${li.audience === 'child' ? 'child' : li.audience === 'senior' ? 'senior' : 'adult'}${li.qty > 1 ? 's' : ''}`}
                    </div>
                    <div className="review-item-inclusions">
                      ✓ Includes access to 50+ Water &amp; Dry Rides, Wave Pool, Rain Dance, Foam Party &amp; Dome Show.
                    </div>
                    {li.savings > 0 && (
                      <div className="review-item-savings">
                        <Tag size={10} /> Saved {money(li.savings)}
                      </div>
                    )}
                  </div>
                  <div className="review-item-amount">
                    {li.savings > 0 && <span className="review-orig-small">{money(li.displayUnit * li.qty)}</span>}
                    <strong className="review-item-total">{money(li.total)}</strong>
                  </div>
                </div>
              ))}
            </div>
          )}

          {md.lineItems.length > 0 && (
            <div className="review-block">
              <div className="review-block-title">MEALS</div>
              {md.lineItems.map((li, i) => (
                <div key={i} className="review-item">
                  <div className="review-item-left">
                    <div className="review-item-name">{li.label}</div>
                    <div className="review-item-meta">{li.qty} serving{li.qty > 1 ? 's' : ''}</div>
                  </div>
                  <strong className="review-item-amount">{money(li.total)}</strong>
                </div>
              ))}
            </div>
          )}

          <div className="review-totals">
            {bd.savings > 0 && (
              <div className="review-total-row review-total-savings">
                <span><Tag size={11} /> Total Savings</span>
                <span className="savings-val">−{money(bd.savings)}</span>
              </div>
            )}
            {bd.lineItems.some(li => li.tax > 0) && (
              <div className="review-total-row review-total-muted">
                <span>GST (included in ticket price)</span>
                <span>{money(bd.lineItems.reduce((s, li) => s + (li.tax || 0), 0))}</span>
              </div>
            )}
            {md.total > 0 && (
              <div className="review-total-row review-total-muted">
                <span>Meals (GST incl.)</span>
                <span>{money(md.total)}</span>
              </div>
            )}
            <div className="review-total-row review-total-grand">
              <span>TOTAL PAYABLE</span>
              <span ref={totalValRef}>{money(grandTotal)}</span>
            </div>
            <div className="review-people-count">
              <Users size={13} />
              <span>
                {bd.entries} {bd.entries === 1 ? 'person' : 'people'} entering the park
              </span>
            </div>
          </div>

          <div className="bsc-cta-wrapper">
            <button className="btn-primary btn-full" onClick={handlePay} id="btn-proceed-payment">
              <CreditCard size={18} /> PROCEED TO PAYMENT
            </button>
            <p className="ssl-note">&#128274; 256-bit SSL Encrypted · Instant Confirmation</p>
          </div>
        </div>
      </aside>
    </div>
  );
}

// ─────────────────────────────────────────────────────────────
// STEP 4 — PAYMENT + THANK YOU SCREEN
// ─────────────────────────────────────────────────────────────
function PaymentStep({ onBack, bd, md, onSimulateFail }) {
  const [paid, setPaid] = useState(false);
  const grandTotal = bd.total + md.total;

  if (paid) {
    return (
      <div className="thankyou-screen">
        <div className="ty-confetti" aria-hidden="true">
          {Array.from({ length: 24 }).map((_, i) => (
            <div key={i} className="ty-confetti-piece" style={{
              '--x': `${Math.random() * 100}%`,
              '--delay': `${Math.random() * 0.9}s`,
              '--color': ['#FFD500','#FF3366','#00E5FF','#00E676','#FF9800','#fff'][i % 6],
            }} />
          ))}
        </div>
        <div className="ty-card">
          <div className="ty-wave-icon">
            <svg width="68" height="68" viewBox="0 0 72 72" fill="none">
              <circle cx="36" cy="36" r="34" fill="#FFD500" stroke="#001835" strokeWidth="3"/>
              <polyline points="20,38 30,48 52,26" stroke="#001835" strokeWidth="5" strokeLinecap="round" strokeLinejoin="round"/>
            </svg>
          </div>
          <h1 className="ty-title">THANK YOU!</h1>
          <div className="ty-subtitle-badge">
            <p className="ty-subtitle">YOUR BOOKING IS CONFIRMED</p>
          </div>
          <p className="ty-desc">Get ready to ride wild at Wild Waters, Hyderabad!</p>
          <div className="ty-amount-box">
            <span className="ty-amount-label">You paid</span>
            <strong className="ty-amount-val">{money(grandTotal)}</strong>
          </div>
          <p className="ty-note">Your tickets will be sent to your registered email. Show them at the gate.</p>
          <div className="ty-actions">
            <button className="ty-home-btn" onClick={() => window.location.reload()} id="btn-go-home">
              BACK TO HOME
            </button>
          </div>
        </div>
      </div>
    );
  }

  return (
    <div className="payment-screen">
      <div className="payment-card-wrap">
        <button className="btn-back-payment" onClick={onBack} id="btn-back-payment">
          <ArrowLeft size={16} /> BACK TO REVIEW
        </button>
        <div className="payment-card">
          <CreditCard size={44} strokeWidth={1.5} style={{ marginBottom: 14, color: 'var(--c-primary)' }} />
          <h1 className="page-title">PAYMENT</h1>
          <p style={{ fontWeight: 700, marginTop: 8, fontSize: 15 }}>Amount: <strong>{money(grandTotal)}</strong></p>
          <p style={{ marginTop: 6, fontWeight: 600, opacity: 0.55, fontSize: 13 }}>Choose simulation action below:</p>

          <button className="btn-primary btn-full" style={{ marginTop: 20 }} onClick={() => setPaid(true)} id="btn-simulate-payment">
            SIMULATE PAYMENT SUCCESS
          </button>
          <button className="btn-fail-payment btn-full" style={{ marginTop: 10 }} onClick={onSimulateFail} id="btn-simulate-fail">
            SIMULATE PAYMENT FAILURE
          </button>
        </div>
      </div>
    </div>
  );
}

// ─────────────────────────────────────────────────────────────
// VIDEO PRELOADER & EFFECTS
// ─────────────────────────────────────────────────────────────
function VideoPreloader({ onReady }) {
  const [fade, setFade] = useState(false);
  useEffect(() => {
    if (PRM()) { onReady(); return; }
    const check = () => {
      const v = document.getElementById('ride-video');
      if (v && v.readyState >= 3) { setFade(true); setTimeout(onReady, 600); }
      else setTimeout(check, 100);
    };
    check();
  }, [onReady]);
  if (PRM()) return null;
  return (
    <div className="video-preloader" style={{ opacity: fade ? 0 : 1, pointerEvents: fade ? 'none' : 'auto' }}>
      <div className="vp-logo">WW</div>
      <div className="vp-spinner" />
      <div className="vp-text">Loading your ride…</div>
    </div>
  );
}

function WaterParticles({ active }) {
  if (PRM()) return null;
  const particles = Array.from({ length: 12 }).map((_, i) => {
    const angle = Math.random() * Math.PI * 2, distance = 100 + Math.random() * 200;
    return <div key={i} className="water-particle" style={{ '--tx': `${Math.cos(angle) * distance}px`, '--ty': `${Math.sin(angle) * distance}px`, left: '50%', top: '50%' }} />;
  });
  return <div className={`water-particles-container ${active ? 'water-particles-active' : ''}`}>{particles}</div>;
}

function MotionBlurOverlay() { return <div id="motion-blur-overlay" className="motion-blur-overlay" />; }

// ─────────────────────────────────────────────────────────────
// APP
// ─────────────────────────────────────────────────────────────
function App() {
  const [step, setStep]       = useState(1);
  const [date, setDate]       = useState(todayInput());
  const [cards, setCards]     = useState([]);
  const [loading, setLoading] = useState(false);
  const [error, setError]     = useState('');
  const [paymentError, setPaymentError] = useState('');
  const [cart, setCart]       = useState({});
  const [meals, setMeals]     = useState({});
  const [mouse, setMouse]     = useState({ x: 0, y: 0 });
  const [videoReady, setVideoReady] = useState(false);
  const [particlesActive, setParticlesActive] = useState(false);

  const containerRef = useRef(null);
  const totalValRef  = useRef(null);
  const prevTotal    = useRef(0);
  const stepTimes    = useMemo(() => ({ 1: 0.5, 2: 2.5, 3: 5.5, 4: 9.0 }), []);

  const dates         = useMemo(() => makeDates(60), []);
  const eligibleCards = useMemo(() => getVisibleCards(cards), [cards]);
  const bd            = useMemo(() => cartBreakdown(cart, eligibleCards), [cart, eligibleCards]);
  const md            = useMemo(() => mealBreakdown(meals, MEALS), [meals]);
  const grandTotal    = bd.total + md.total;
  const hasCart       = Object.keys(cart).length > 0;

  useEffect(() => { initRipple(); }, []);

  useEffect(() => {
    let tid;
    const h = (e) => { clearTimeout(tid); tid = setTimeout(() => setMouse({ x: e.clientX - window.innerWidth / 2, y: e.clientY - window.innerHeight / 2 }), 16); };
    window.addEventListener('mousemove', h, { passive: true });
    return () => window.removeEventListener('mousemove', h);
  }, []);

  useEffect(() => {
    let cancelled = false;
    setLoading(true); setError(''); setCart({}); setMeals({});
    fetch(`/api/price-cards?date=${encodeURIComponent(toApiDate(date))}`)
      .then(r => r.json().then(d => ({ ok: r.ok, d })))
      .then(({ ok, d }) => { if (!cancelled) { if (!ok) throw new Error(d.error || 'Error'); setCards(d.priceCards || []); } })
      .catch(e => { if (!cancelled) { setCards(DEMO_CARDS); setError(`${e.message}. Showing demo data.`); } })
      .finally(() => { if (!cancelled) setLoading(false); });
    return () => { cancelled = true; };
  }, [date]);

  useEffect(() => {
    if (!totalValRef.current || grandTotal === prevTotal.current || PRM()) return;
    prevTotal.current = grandTotal;
    gsap.fromTo(totalValRef.current, { scale: 1.18, color: '#00E5FF' }, { scale: 1, color: '#002855', duration: 0.5, ease: 'elastic.out(1,0.6)' });
  }, [grandTotal]);

  useEffect(() => {
    if (videoReady && !PRM() && window.innerWidth >= 1024) {
      gsap.to('#ride-video', { scale: 1.025, duration: 4, ease: 'sine.inOut', yoyo: true, repeat: -1 });
      const v = document.getElementById('ride-video');
      if (v) v.currentTime = stepTimes[step];
    }
  }, [videoReady, step, stepTimes]);

  const goTo = useCallback((next) => {
    if (next === step) return;
    if (PRM()) { setStep(next); window.scrollTo(0, 0); return; }
    const el = containerRef.current; if (!el) return;
    const isForward = next > step;
    if (isForward && window.innerWidth >= 1024) {
      const v = document.getElementById('ride-video');
      const targetTime = stepTimes[next];
      gsap.fromTo(el, { y: 0 }, { y: -3, duration: 0.08, yoyo: true, repeat: 1 });
      gsap.to(el, {
        opacity: 0, filter: 'blur(10px)', duration: 0.3, onComplete: () => {
          if (v) {
            const timeDiff = targetTime - v.currentTime;
            const animDuration = 1.4;
            if (timeDiff > 0) { v.playbackRate = timeDiff / animDuration; v.play().catch(() => {}); }
            gsap.to({}, {
              duration: animDuration,
              onUpdate: () => { if (v.currentTime >= targetTime) v.pause(); },
              onComplete: () => {
                v.pause(); v.currentTime = targetTime; v.playbackRate = 1;
                setStep(next); window.scrollTo(0, 0);
                gsap.fromTo(el, { opacity: 0, filter: 'blur(8px)', y: 12 }, { opacity: 1, filter: 'blur(0px)', y: 0, duration: 0.4, ease: 'power2.out' });
              }
            });
            gsap.to('#motion-blur-overlay', { opacity: 0.6, backdropFilter: 'blur(6px)', duration: 0.7, yoyo: true, repeat: 1, ease: 'power1.inOut' });
            setTimeout(() => setParticlesActive(true), 400);
            setTimeout(() => setParticlesActive(false), 1200);
          } else {
            setStep(next); window.scrollTo(0, 0);
            gsap.fromTo(el, { opacity: 0, y: 24 }, { opacity: 1, y: 0, duration: 0.32 });
          }
        }
      });
    } else {
      gsap.to(el, {
        opacity: 0, y: isForward ? -24 : 24, duration: 0.22, ease: 'power2.in', onComplete: () => {
          setStep(next); window.scrollTo(0, 0);
          if (window.innerWidth >= 1024) {
            const v = document.getElementById('ride-video');
            if (v) { v.pause(); v.currentTime = stepTimes[next]; }
          }
          gsap.fromTo(el, { opacity: 0, filter: 'blur(0px)', y: isForward ? 24 : -24 }, { opacity: 1, y: 0, duration: 0.32, ease: 'power2.out' });
        }
      });
    }
  }, [step, stepTimes]);

  const updateCart = (id, d) => setCart(p => { const n = Math.max(0, (p[id] || 0) + d); const c = { ...p }; if (n === 0) delete c[id]; else c[id] = n; return c; });
  const updateMeal = (id, d) => setMeals(p => { const n = Math.max(0, (p[id] || 0) + d); const c = { ...p }; if (n === 0) delete c[id]; else c[id] = n; return c; });

  const handleSimulatePaymentFail = () => {
    setPaymentError('Sorry, transaction failed! Payment was declined by bank. Please check your details and try again.');
    goTo(3);
  };

  const isThankyou = step === 4;

  return (
    <div className="app-canvas">
      {!videoReady && <VideoPreloader onReady={() => setVideoReady(true)} />}

      <div id="ride-video-wrap" style={{ position: 'fixed', inset: 0, zIndex: 0 }}>
        <video id="ride-video" src="/ride.mp4" preload="auto" muted playsInline style={{ width: '100%', height: '100%', objectFit: 'cover' }} />
      </div>
      <div className="ride-vignette" />
      <MotionBlurOverlay />
      <WaterParticles active={particlesActive} />
      <SceneBackground mouseX={mouse.x * 0.012} mouseY={mouse.y * 0.012} />
      <canvas id="ripple-canvas" aria-hidden="true" />
      <div id="splash-container" className="splash-container" aria-hidden="true" />

      {/* ORIGINAL SITE NAVBAR */}
      <SiteNavbar onHomeClick={() => goTo(1)} />

      {/* FLOATING WAVE PROGRESS BELOW NAVBAR WITH ROTATING FERRIS WHEEL */}
      <WaveProgress step={step} onGoTo={goTo} />

      <main className="main-content">
        <div className={`step-wrapper ${isThankyou ? 'step-wrapper--ty' : ''} ${step === 4 ? 'step-wrapper--step4' : ''} ${step === 1 ? (hasCart ? 's1-cart-open' : 's1-cart-empty') : ''}`} ref={containerRef}>

          {step === 1 && (
            <DateAndTicketsStep
              date={date} setDate={(d) => { setDate(d); setCart({}); setMeals({}); }}
              dates={dates} loading={loading} error={error}
              cart={cart} updateCart={updateCart} onNext={() => goTo(2)}
              bd={bd} md={md} totalValRef={totalValRef} eligibleCards={eligibleCards}
            />
          )}

          {step === 2 && (
            <MealsStep
              date={date} cart={cart} meals={meals} updateMeal={updateMeal}
              onNext={() => goTo(3)} onSkip={() => { setMeals({}); goTo(3); }}
              onBack={() => goTo(1)} onEditCart={() => goTo(1)}
              bd={bd} md={md} totalValRef={totalValRef} eligibleCards={eligibleCards}
            />
          )}

          {step === 3 && (
            <ReviewStep
              date={date} cart={cart} meals={meals} eligibleCards={eligibleCards}
              bd={bd} md={md} totalValRef={totalValRef}
              onPay={(p) => goTo(4)} onBack={() => goTo(2)} onEditCart={() => goTo(1)}
              paymentError={paymentError} onClearError={() => setPaymentError('')}
            />
          )}

          {step === 4 && (
            <PaymentStep onBack={() => goTo(3)} bd={bd} md={md} onSimulateFail={handleSimulatePaymentFail} />
          )}

        </div>
      </main>
    </div>
  );
}

createRoot(document.getElementById('root')).render(<App />);