// Vehicle/Property and Transporter appointment pages, + booking modal

const VideoPlaceholder = ({ label, lang, youtubeId, startAt }) => {
  if (youtubeId) {
    const params = new URLSearchParams({ rel: '0', modestbranding: '1' });
    if (startAt) params.set('start', String(startAt));
    return (
      <div style={{
        position: 'relative', width: '100%', aspectRatio: '16 / 9',
        background: '#000', borderRadius: 6, overflow: 'hidden',
        border: '1px solid var(--border-2)',
        boxShadow: 'var(--shadow-2)',
      }}>
        <iframe
          src={`https://www.youtube.com/embed/${youtubeId}?${params.toString()}`}
          title={label}
          loading="lazy"
          allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture; web-share"
          allowFullScreen
          style={{ position: 'absolute', inset: 0, width: '100%', height: '100%', border: 0 }}
        />
      </div>
    );
  }
  return (
  <div style={{
    position: 'relative', width: '100%', aspectRatio: '16 / 9',
    background: 'linear-gradient(135deg, #0d1117 0%, #1a1f26 50%, #163672 100%)',
    borderRadius: 6, overflow: 'hidden',
    border: '1px solid var(--border-2)',
    boxShadow: 'var(--shadow-2)',
  }}>
    {/* motion streaks */}
    <svg viewBox="0 0 1280 720" preserveAspectRatio="none" style={{
      position: 'absolute', inset: 0, width: '100%', height: '100%', opacity: 0.18,
    }}>
      <g stroke="#7ea4dd" strokeWidth="1.5" fill="none">
        {Array.from({length: 14}, (_, i) => (
          <line key={i} x1={i * 90 - 200} y1={120 + i * 30} x2={i * 90 + 240} y2={120 + i * 30}/>
        ))}
      </g>
    </svg>
    <div style={{
      position: 'absolute', inset: 0, display: 'grid', placeItems: 'center',
    }}>
      <div style={{ textAlign: 'center' }}>
        <button style={{
          width: 96, height: 96, borderRadius: 999,
          background: 'var(--amber-400)',
          border: 'none', cursor: 'pointer',
          display: 'grid', placeItems: 'center',
          boxShadow: '0 12px 40px rgba(255,184,28,0.4)',
          transition: 'transform 200ms',
        }}
        onMouseEnter={e => e.currentTarget.style.transform = 'scale(1.06)'}
        onMouseLeave={e => e.currentTarget.style.transform = 'scale(1)'}>
          <Icon name="play" size={36} color="#0d1117"/>
        </button>
        <div style={{
          marginTop: 22,
          fontFamily: 'var(--font-display)', fontStyle: 'italic', fontWeight: 700,
          fontSize: 26, color: '#fff', textTransform: 'uppercase', letterSpacing: '-0.01em',
        }}>
          {label}
        </div>
        <div style={{
          marginTop: 6,
          fontSize: 12, fontWeight: 700, letterSpacing: '0.16em',
          color: 'rgba(255,255,255,0.55)', textTransform: 'uppercase',
        }}>
          {t('Video coming soon', lang)}
        </div>
      </div>
    </div>
    <div style={{
      position: 'absolute', bottom: 16, left: 16,
      fontFamily: 'var(--font-mono)', fontSize: 11,
      color: 'rgba(255,255,255,0.5)',
      letterSpacing: '0.08em',
    }}>
      00:00 / 02:30
    </div>
  </div>
  );
};

const RuleItem = ({ icon, children }) => (
  <li style={{
    display: 'flex', gap: 14, alignItems: 'flex-start',
    padding: '16px 0',
    borderBottom: '1px solid var(--border-1)',
  }}>
    <div style={{
      flexShrink: 0, width: 36, height: 36, borderRadius: 4,
      background: 'var(--blue-50)', display: 'grid', placeItems: 'center',
      border: '1px solid var(--blue-200)',
    }}>
      <Icon name={icon} size={18} color="var(--blue-700)"/>
    </div>
    <div style={{ fontSize: 16, lineHeight: 1.5, color: 'var(--fg-1)', paddingTop: 7 }}>
      {children}
    </div>
  </li>
);

const VehiclePage = ({ onNav, onBook, lang }) => (
  <main>
    <PageHero
      eyebrow={t('Step 2 · Redemption Appointment', lang)}
      title={<>{t('Vehicle / Property', lang)}<br/><span style={{ color: 'var(--amber-400)' }}>{t('Redemption', lang)}</span></>}
      subtitle={t('Watch the how-to video, review the rules, then book your appointment.', lang)}
      onBack={() => onNav('home')}
      lang={lang}
    />
    <Section padY={72}>
      <div style={{ display: 'grid', gridTemplateColumns: 'repeat(auto-fit, minmax(320px, 1fr))', gap: 56, alignItems: 'start' }}>
        <div>
          <Eyebrow>{t('How-to video', lang)}</Eyebrow>
          <h2 style={{ marginTop: 12, marginBottom: 20, fontSize: 28 }}>{t('Watch this first', lang)}</h2>
          <VideoPlaceholder label={t('Vehicle / property redemption — how to book', lang)} lang={lang} youtubeId="JXzv3pGrtzU" startAt={6}/>
        </div>
        <div>
          <Eyebrow>{t('Before your appointment', lang)}</Eyebrow>
          <h2 style={{ marginTop: 12, marginBottom: 8, fontSize: 28 }}>{t('Read the rules', lang)}</h2>
          <p style={{ marginBottom: 12, color: 'var(--fg-2)' }}>
            {t('Failure to follow these rules may result in your appointment being cancelled or extra charges.', lang)}
          </p>
          <ul style={{ listStyle: 'none', padding: 0, margin: 0 }}>
            <RuleItem icon="calendar"><strong>{t('Same-day appointments are not allowed.', lang)}</strong></RuleItem>
            <RuleItem icon="cash"><strong>{t('All JMAC locations are CASH only.', lang)}</strong> {t('Please bring exact change.', lang)}</RuleItem>
            <RuleItem icon="id"><strong>{t('Valid Photo ID is REQUIRED', lang)}</strong> {t("— driver's license or government-issued ID.", lang)}</RuleItem>
            <RuleItem icon="key">{t('If property appointment,', lang)} <strong>{t('please bring your keys', lang)}</strong> {t('to avoid extra charges from your lender.', lang)}</RuleItem>
          </ul>
        </div>
      </div>

      <div style={{
        marginTop: 56, padding: '40px 36px',
        background: 'var(--bg-subtle)', border: '1px solid var(--border-1)',
        borderRadius: 6, borderLeft: '4px solid var(--amber-400)',
        display: 'flex', alignItems: 'center', justifyContent: 'space-between', gap: 24,
        flexWrap: 'wrap',
      }}>
        <div>
          <div style={{
            fontFamily: 'var(--font-display)', fontStyle: 'italic', fontWeight: 800,
            fontSize: 'clamp(24px, 2.6vw, 34px)', textTransform: 'uppercase',
            color: 'var(--fg-1)', letterSpacing: '-0.01em',
          }}>
            {t("Ready? Let's book it.", lang)}
          </div>
          <div style={{ marginTop: 6, color: 'var(--fg-2)', fontSize: 15 }}>
            {t('Choose a date and time that works for you. Confirmation by email.', lang)}
          </div>
        </div>
        <Button variant="accent" size="lg" onClick={() => onBook('vehicle')}>
          {t('Book Appointment', lang)} <Icon name="arrow" size={16}/>
        </Button>
      </div>
    </Section>
  </main>
);

const TransporterPage = ({ onNav, onBook, lang }) => (
  <main>
    <PageHero
      eyebrow={t('Step 2 · Transporter Pickup', lang)}
      title={<>{t('Transporter', lang)}<br/><span style={{ color: 'var(--amber-400)' }}>{t('Appointment', lang)}</span></>}
      subtitle={t('Watch the how-to video, then book your pickup.', lang)}
      onBack={() => onNav('home')}
      lang={lang}
    />
    <Section padY={72}>
      <div style={{ maxWidth: 880, margin: '0 auto' }}>
        <div style={{ marginBottom: 32 }}>
          <Eyebrow>{t('How-to video', lang)}</Eyebrow>
          <h2 style={{ marginTop: 12, marginBottom: 20, fontSize: 28 }}>{t('Watch this first', lang)}</h2>
        </div>
        <VideoPlaceholder label={t('Transporter pickup — how to book', lang)} lang={lang} youtubeId="a8Ya9NJZRhQ"/>
        <div style={{
          marginTop: 48, padding: '40px 36px',
          background: 'var(--bg-subtle)', border: '1px solid var(--border-1)',
          borderRadius: 6, borderLeft: '4px solid var(--blue-700)',
          display: 'flex', alignItems: 'center', justifyContent: 'space-between', gap: 24,
          flexWrap: 'wrap',
        }}>
          <div>
            <div style={{
              fontFamily: 'var(--font-display)', fontStyle: 'italic', fontWeight: 800,
              fontSize: 'clamp(24px, 2.6vw, 34px)', textTransform: 'uppercase',
              color: 'var(--fg-1)', letterSpacing: '-0.01em',
            }}>
              {t('Schedule your pickup', lang)}
            </div>
            <div style={{ marginTop: 6, color: 'var(--fg-2)', fontSize: 15 }}>
              {t('Confirmation by email with yard address and gate code.', lang)}
            </div>
          </div>
          <Button variant="primary" size="lg" onClick={() => onBook('transporter')}>
            {t('Book Appointment', lang)} <Icon name="arrow" size={16}/>
          </Button>
        </div>
      </div>
    </Section>
  </main>
);

const PageHero = ({ eyebrow, title, subtitle, onBack, lang }) => (
  <section style={{
    background: 'var(--steel-900)', color: '#fff', position: 'relative', overflow: 'hidden',
  }}>
    <svg viewBox="0 0 1280 360" preserveAspectRatio="none" style={{
      position: 'absolute', inset: 0, width: '100%', height: '100%', opacity: 0.14, pointerEvents: 'none',
    }}>
      <g stroke="#7ea4dd" strokeWidth="1.5" fill="none">
        {Array.from({length: 12}, (_, i) => (
          <line key={i} x1={i * 100 - 100} y1={60 + i * 22} x2={i * 100 + 200} y2={60 + i * 22}/>
        ))}
      </g>
    </svg>
    <div style={{
      position: 'relative', maxWidth: 'var(--container-max)', margin: '0 auto',
      padding: '52px 28px 64px',
    }}>
      {onBack && (
        <a onClick={onBack} style={{
          display: 'inline-flex', alignItems: 'center', gap: 8, cursor: 'pointer',
          fontSize: 12, fontWeight: 700, letterSpacing: '0.12em',
          textTransform: 'uppercase', color: 'rgba(255,255,255,0.7)', marginBottom: 22,
        }}>
          <span style={{ transform: 'rotate(180deg)', display: 'inline-flex' }}>
            <Icon name="arrow" size={14}/>
          </span>
          {t('Back to home', lang)}
        </a>
      )}
      <div style={{
        fontSize: 11, fontWeight: 700, letterSpacing: '0.18em',
        textTransform: 'uppercase', color: 'var(--amber-400)', marginBottom: 14,
      }}>
        {eyebrow}
      </div>
      <h1 style={{
        fontFamily: 'var(--font-display)', fontStyle: 'italic', fontWeight: 800,
        fontSize: 'clamp(40px, 6vw, 76px)', lineHeight: 0.96,
        textTransform: 'uppercase', letterSpacing: '-0.015em',
        margin: 0, color: '#fff',
      }}>{title}</h1>
      {subtitle && (
        <p style={{ marginTop: 16, fontSize: 18, color: 'rgba(255,255,255,0.85)', maxWidth: 680 }}>
          {subtitle}
        </p>
      )}
    </div>
    <HazardStripe height={6}/>
  </section>
);

// Booking modal — calendar prototype (transporter only; vehicle redemption opens external scheduler)
const BookingModal = ({ kind, onClose, lang }) => {
  const [step, setStep] = React.useState(1);
  const [date, setDate] = React.useState(null);
  const [time, setTime] = React.useState(null);
  const [location, setLocation] = React.useState('Boston, MA');
  const [form, setForm] = React.useState({ name: '', email: '', phone: '', caseNum: '' });
  const [done, setDone] = React.useState(false);

  const isVehicle = kind === 'vehicle';
  const accent = isVehicle ? 'var(--amber-400)' : 'var(--blue-700)';
  const dateLocale = lang === 'es' ? 'es-US' : 'en-US';

  // Generate 14 upcoming days, skipping today (no same-day) and Sundays
  const today = new Date();
  const days = [];
  let d = new Date(today);
  d.setDate(d.getDate() + 1);
  while (days.length < 14) {
    if (d.getDay() !== 0) days.push(new Date(d));
    d.setDate(d.getDate() + 1);
  }
  const times = ['9:00 AM', '10:00 AM', '11:00 AM', '1:00 PM', '2:00 PM', '3:00 PM', '4:00 PM'];
  const locations = ['Boston, MA', 'Cape Cod, MA', 'Portland, ME', 'Atlanta, GA', 'Jacksonville, FL'];

  const submit = () => setDone(true);

  return (
    <div role="dialog" style={{
      position: 'fixed', inset: 0, zIndex: 100,
      background: 'rgba(13,17,23,0.7)', backdropFilter: 'blur(4px)',
      display: 'grid', placeItems: 'center', padding: 20,
    }} onClick={onClose}>
      <div onClick={e => e.stopPropagation()} style={{
        background: '#fff', borderRadius: 8, width: '100%', maxWidth: 720,
        maxHeight: '90vh', overflow: 'auto',
        boxShadow: 'var(--shadow-4)',
      }}>
        {/* header */}
        <div style={{
          padding: '18px 24px', borderBottom: '1px solid var(--border-1)',
          display: 'flex', alignItems: 'center', justifyContent: 'space-between',
          background: 'var(--steel-900)', color: '#fff',
          borderTopLeftRadius: 8, borderTopRightRadius: 8,
        }}>
          <div>
            <div style={{ fontSize: 11, fontWeight: 700, letterSpacing: '0.16em', textTransform: 'uppercase', color: accent }}>
              {isVehicle ? t('Vehicle / Property', lang) : t('Transporter', lang)} {t('· Booking', lang)}
            </div>
            <div style={{
              fontFamily: 'var(--font-display)', fontStyle: 'italic', fontWeight: 700,
              fontSize: 22, marginTop: 2, textTransform: 'uppercase',
            }}>
              {done ? t('Confirmed', lang) : step === 1 ? t('Select date & time', lang) : t('Your details', lang)}
            </div>
          </div>
          <button onClick={onClose} style={{
            background: 'transparent', border: 'none', color: '#fff', cursor: 'pointer', padding: 8,
          }}>
            <Icon name="x" size={20}/>
          </button>
        </div>

        {done ? (
          <div style={{ padding: '48px 32px', textAlign: 'center' }}>
            <div style={{
              width: 72, height: 72, borderRadius: 999, background: 'var(--success-500)',
              margin: '0 auto', display: 'grid', placeItems: 'center',
            }}>
              <Icon name="check" size={36} color="#fff" strokeWidth={2.5}/>
            </div>
            <h2 style={{ marginTop: 22, fontSize: 32 }}>{t("You're booked.", lang)}</h2>
            <p style={{ marginTop: 10, color: 'var(--fg-2)' }}>
              {t('Confirmation sent to', lang)} <strong>{form.email || (lang === 'es' ? 'su correo electrónico' : 'your email')}</strong>.
              {' '}{t('See you', lang)} {date?.toLocaleDateString(dateLocale, { weekday: 'long', month: 'long', day: 'numeric' })} {t('at', lang)} {time}.
            </p>
            <div style={{
              marginTop: 28, padding: 20, background: 'var(--bg-subtle)',
              borderRadius: 6, border: '1px solid var(--border-1)',
              fontFamily: 'var(--font-mono)', fontSize: 13, textAlign: 'left', maxWidth: 420, margin: '28px auto 0',
            }}>
              <div>CASE: <span style={{ fontWeight: 600 }}>JM-{Math.floor(Math.random() * 90000) + 10000}</span></div>
              <div>LOC: {location}</div>
              <div>WHEN: {date?.toLocaleDateString(dateLocale)} {time}</div>
              <div>TYPE: {isVehicle ? 'REDEMPTION' : 'TRANSPORTER PICKUP'}</div>
            </div>
            <Button variant="primary" size="lg" onClick={onClose} style={{ marginTop: 32 }}>
              {t('Done', lang)}
            </Button>
          </div>
        ) : step === 1 ? (
          <div style={{ padding: 28 }}>
            <div style={{ marginBottom: 20 }}>
              <label style={labelSt}>{t('Location', lang)}</label>
              <div style={{ display: 'flex', flexWrap: 'wrap', gap: 8, marginTop: 8 }}>
                {locations.map(l => (
                  <button key={l} onClick={() => setLocation(l)} style={{
                    padding: '8px 14px', borderRadius: 999, fontSize: 13, fontWeight: 600,
                    border: '1px solid ' + (location === l ? 'var(--blue-700)' : 'var(--border-2)'),
                    background: location === l ? 'var(--blue-700)' : '#fff',
                    color: location === l ? '#fff' : 'var(--fg-1)',
                    cursor: 'pointer',
                  }}>{l}</button>
                ))}
              </div>
            </div>
            <div>
              <label style={labelSt}>{t('Pick a date', lang)}</label>
              <div style={{
                marginTop: 10, display: 'grid',
                gridTemplateColumns: 'repeat(7, 1fr)', gap: 6,
              }}>
                {days.map((dd, i) => {
                  const sel = date && dd.toDateString() === date.toDateString();
                  return (
                    <button key={i} onClick={() => setDate(dd)} style={{
                      padding: '12px 4px', borderRadius: 4,
                      border: '1px solid ' + (sel ? 'var(--blue-700)' : 'var(--border-1)'),
                      background: sel ? 'var(--blue-700)' : '#fff',
                      color: sel ? '#fff' : 'var(--fg-1)',
                      cursor: 'pointer', textAlign: 'center',
                    }}>
                      <div style={{ fontSize: 10, fontWeight: 700, letterSpacing: '0.1em', textTransform: 'uppercase', opacity: 0.7 }}>
                        {dd.toLocaleDateString(dateLocale, { weekday: 'short' })}
                      </div>
                      <div style={{ fontSize: 18, fontWeight: 700, marginTop: 2 }}>{dd.getDate()}</div>
                    </button>
                  );
                })}
              </div>
            </div>
            <div style={{ marginTop: 20 }}>
              <label style={labelSt}>{t('Pick a time', lang)}</label>
              <div style={{ display: 'flex', flexWrap: 'wrap', gap: 8, marginTop: 10 }}>
                {times.map(tm => (
                  <button key={tm} onClick={() => setTime(tm)} style={{
                    padding: '10px 16px', borderRadius: 4, fontSize: 13, fontWeight: 600,
                    fontFamily: 'var(--font-mono)',
                    border: '1px solid ' + (time === tm ? 'var(--blue-700)' : 'var(--border-1)'),
                    background: time === tm ? 'var(--blue-700)' : '#fff',
                    color: time === tm ? '#fff' : 'var(--fg-1)',
                    cursor: 'pointer',
                  }}>{tm}</button>
                ))}
              </div>
            </div>
            <div style={{ marginTop: 28, display: 'flex', justifyContent: 'flex-end', gap: 10 }}>
              <Button variant="ghost" onClick={onClose}>{t('Cancel', lang)}</Button>
              <Button variant="primary" onClick={() => setStep(2)}
                      disabled={!date || !time}
                      style={!date || !time ? { opacity: 0.5, cursor: 'not-allowed' } : {}}>
                {t('Continue', lang)} <Icon name="arrow" size={14}/>
              </Button>
            </div>
          </div>
        ) : (
          <div style={{ padding: 28 }}>
            <div style={{
              padding: 14, marginBottom: 20, borderRadius: 4,
              background: 'var(--bg-subtle)', border: '1px solid var(--border-1)',
              fontFamily: 'var(--font-mono)', fontSize: 13,
            }}>
              {location} · {date?.toLocaleDateString(dateLocale)} · {time}
            </div>
            <div style={{ display: 'grid', gridTemplateColumns: '1fr 1fr', gap: 16 }}>
              <Field label={t('Full name', lang)} value={form.name} onChange={v => setForm({ ...form, name: v })}/>
              <Field label={t('Phone', lang)} value={form.phone} onChange={v => setForm({ ...form, phone: v })}/>
              <Field label={t('Email', lang)} value={form.email} onChange={v => setForm({ ...form, email: v })}/>
              <Field label={isVehicle ? t('Case # (if known)', lang) : t('Transport company', lang)} value={form.caseNum} onChange={v => setForm({ ...form, caseNum: v })}/>
            </div>
            {isVehicle && (
              <div style={{
                marginTop: 18, padding: 14, borderRadius: 4,
                background: '#fff7e0', border: '1px solid var(--amber-300)',
                fontSize: 13, color: 'var(--steel-800)',
                display: 'flex', gap: 10,
              }}>
                <Icon name="alert" size={18} color="var(--amber-500)"/>
                <span>{t('Reminder:', lang)} <strong>{t('cash only', lang)}</strong>, <strong>{t('photo ID', lang)}</strong>, {t('and bring', lang)} <strong>{t('keys', lang)}</strong> {t('if this is a property appointment.', lang)}</span>
              </div>
            )}
            <div style={{ marginTop: 28, display: 'flex', justifyContent: 'space-between', gap: 10 }}>
              <Button variant="ghost" onClick={() => setStep(1)}>{t('Back', lang)}</Button>
              <Button variant="accent" onClick={submit}>
                {t('Confirm booking', lang)} <Icon name="check" size={14}/>
              </Button>
            </div>
          </div>
        )}
      </div>
    </div>
  );
};

const labelSt = {
  fontSize: 11, fontWeight: 700, letterSpacing: '0.14em',
  textTransform: 'uppercase', color: 'var(--fg-3)',
};

const Field = ({ label, value, onChange, type = 'text', name, required }) => (
  <label style={{ display: 'flex', flexDirection: 'column', gap: 6, minWidth: 0 }}>
    <span style={labelSt}>{label}</span>
    <input type={type} name={name} required={required} value={value} onChange={e => onChange(e.target.value)} style={{
      padding: '11px 12px', border: '1px solid var(--border-2)', borderRadius: 4,
      fontFamily: 'var(--font-body)', fontSize: 14, outline: 'none',
      width: '100%', minWidth: 0, boxSizing: 'border-box',
    }}/>
  </label>
);

Object.assign(window, { VehiclePage, TransporterPage, BookingModal, PageHero });