// Vagoonya Mobile — Booking flow (calendar, guests, payment, success)

// ─── Date / Calendar sheet ──────────────────────────────
const BookingDateScreen = () => (
  <MobileScreen>
    <PushBar title="Tarih ve misafir" onBack={()=>{}}/>
    <div style={{ flex: 1, overflowY: 'auto', padding: '4px 20px 16px' }}>
      {/* Tabs */}
      <div style={{ display: 'flex', gap: 0, padding: 4, background: 'var(--surface-muted)', borderRadius: 'var(--r-pill)', marginBottom: 18 }}>
        <div style={{ flex: 1, padding: '8px 14px', borderRadius: 'var(--r-pill)', background: 'var(--surface-raised)', boxShadow: 'var(--sh-card)', textAlign: 'center', fontSize: 13, fontWeight: 700, color: 'var(--ink-strong)' }}>Tarih</div>
        <div style={{ flex: 1, padding: '8px 14px', textAlign: 'center', fontSize: 13, fontWeight: 600, color: 'var(--ink-dim)' }}>Misafirler</div>
      </div>

      {/* Month */}
      <div style={{ display: 'flex', justifyContent: 'space-between', alignItems: 'center', marginBottom: 12 }}>
        <button style={{ width: 32, height: 32, background: 'none', border: 0, color: 'var(--ink)', cursor: 'pointer' }}>
          <Icon name="chevron-left" size={20}/>
        </button>
        <div style={{ fontSize: 15, fontWeight: 700, color: 'var(--ink-strong)' }}>Mayıs 2026</div>
        <button style={{ width: 32, height: 32, background: 'none', border: 0, color: 'var(--ink)', cursor: 'pointer' }}>
          <Icon name="chevron-right" size={20}/>
        </button>
      </div>

      {/* Weekday header */}
      <div style={{ display: 'grid', gridTemplateColumns: 'repeat(7,1fr)', gap: 2, marginBottom: 6 }}>
        {['Pzt','Sal','Çar','Per','Cum','Cmt','Paz'].map(d => (
          <div key={d} style={{ fontSize: 11, fontWeight: 600, color: 'var(--ink-low)', textAlign: 'center', padding: '6px 0' }}>{d}</div>
        ))}
      </div>

      {/* Calendar grid — May 2026 starts Fri (3 empty before 1) */}
      <div style={{ display: 'grid', gridTemplateColumns: 'repeat(7,1fr)', gap: 2 }}>
        {[null,null,null,null].map((_,i)=><div key={'e'+i}/>)}
        {Array.from({length:31}).map((_,i)=>{
          const d = i+1;
          const isStart = d === 5;
          const isEnd = d === 8;
          const inRange = d > 5 && d < 8;
          const past = d < 4;
          const today = d === 4;
          return (
            <div key={d} style={{
              aspectRatio: '1', display: 'flex', alignItems: 'center', justifyContent: 'center',
              position: 'relative',
              background: inRange ? 'var(--brand-50)' : 'transparent',
              borderRadius: isStart ? '999px 0 0 999px' : isEnd ? '0 999px 999px 0' : 0,
            }}>
              <div style={{
                width: 36, height: 36, borderRadius: '50%',
                display: 'flex', alignItems: 'center', justifyContent: 'center',
                background: (isStart || isEnd) ? 'var(--brand-500)' : 'transparent',
                color: (isStart || isEnd) ? 'var(--on-brand)' :
                       past ? 'var(--ink-soft)' :
                       today ? 'var(--brand-600)' : 'var(--ink-strong)',
                fontWeight: (isStart || isEnd || today) ? 800 : 500,
                fontSize: 14,
                border: today && !isStart && !isEnd ? '1.5px solid var(--brand-500)' : 0,
                fontFamily: 'var(--font-mono)',
              }} className="tnum">{d}</div>
            </div>
          );
        })}
      </div>

      {/* Range summary */}
      <div style={{ marginTop: 22, padding: 14, background: 'var(--surface-muted)', borderRadius: 'var(--r-md)', display: 'flex', alignItems: 'center', gap: 12 }}>
        <div style={{ flex: 1 }}>
          <div style={{ fontSize: 11, color: 'var(--ink-low)', fontWeight: 600 }}>GİRİŞ</div>
          <div style={{ fontSize: 15, fontWeight: 700, color: 'var(--ink-strong)' }}>5 May, Sal</div>
        </div>
        <div style={{ width: 24, height: 1, background: 'var(--ink-soft)' }}/>
        <div style={{ flex: 1, textAlign: 'right' }}>
          <div style={{ fontSize: 11, color: 'var(--ink-low)', fontWeight: 600 }}>ÇIKIŞ</div>
          <div style={{ fontSize: 15, fontWeight: 700, color: 'var(--ink-strong)' }}>8 May, Cum</div>
        </div>
      </div>

      {/* Flexible toggle */}
      <div style={{ marginTop: 14, padding: 14, background: 'var(--surface-raised)', border: '1px solid var(--line)', borderRadius: 'var(--r-md)', display: 'flex', alignItems: 'center', gap: 12 }}>
        <Icon name="sparkles" size={18} color="var(--brand-500)"/>
        <div style={{ flex: 1, fontSize: 13, color: 'var(--ink)' }}>Esnek tarih · ±3 gün</div>
        <div style={{ width: 40, height: 24, borderRadius: 12, background: 'var(--brand-500)', position: 'relative' }}>
          <div style={{ position: 'absolute', right: 2, top: 2, width: 20, height: 20, borderRadius: '50%', background: '#fff', boxShadow: '0 1px 3px rgba(0,0,0,0.2)' }}/>
        </div>
      </div>
    </div>

    <div style={{ padding: '14px 16px 26px', borderTop: '1px solid var(--line-soft)', background: 'var(--surface-raised)', display: 'flex', gap: 10 }}>
      <Btn variant="ghost" size="lg">Sıfırla</Btn>
      <Btn variant="primary" size="lg" block>Devam · 3 gece</Btn>
    </div>
  </MobileScreen>
);

// ─── Guests & Add-ons ───────────────────────────────────
const BookingAddonsScreen = () => (
  <MobileScreen>
    <PushBar title="Misafir & ekstralar" onBack={()=>{}}/>
    {/* Stepper indicator */}
    <div style={{ padding: '4px 20px 14px', display: 'flex', alignItems: 'center', gap: 8 }}>
      {['Tarih','Misafir','Ödeme'].map((label,i)=>(
        <Fragment key={label}>
          <div style={{ display: 'flex', alignItems: 'center', gap: 6 }}>
            <div style={{
              width: 22, height: 22, borderRadius: '50%',
              background: i <= 1 ? 'var(--brand-500)' : 'var(--surface-muted)',
              color: i <= 1 ? '#fff' : 'var(--ink-low)',
              fontSize: 11, fontWeight: 800, display: 'flex', alignItems: 'center', justifyContent: 'center',
            }}>{i < 1 ? <Icon name="check" size={12}/> : i+1}</div>
            <div style={{ fontSize: 12, fontWeight: 700, color: i === 1 ? 'var(--ink-strong)' : 'var(--ink-low)' }}>{label}</div>
          </div>
          {i < 2 && <div style={{ flex: 1, height: 2, background: i < 1 ? 'var(--brand-500)' : 'var(--line)' }}/>}
        </Fragment>
      ))}
    </div>

    <div style={{ flex: 1, overflowY: 'auto', padding: '0 20px 16px' }}>
      {/* Guests section */}
      <h3 style={{ margin: '6px 0 12px', fontSize: 17, fontWeight: 700, color: 'var(--ink-strong)', letterSpacing: '-0.02em' }}>Misafirler</h3>
      <div className="card" style={{ padding: 4 }}>
        {[
          ['Yetişkin', '13 yaş ve üzeri', 2],
          ['Çocuk', '2 – 12 yaş', 1],
          ['Bebek', '0 – 2 yaş', 0],
        ].map(([title, sub, count], i, a) => (
          <div key={title} style={{ display: 'flex', alignItems: 'center', padding: '14px 14px', borderBottom: i === a.length - 1 ? 0 : '1px solid var(--line-soft)' }}>
            <div style={{ flex: 1 }}>
              <div style={{ fontSize: 14, fontWeight: 700, color: 'var(--ink-strong)' }}>{title}</div>
              <div style={{ fontSize: 12, color: 'var(--ink-dim)' }}>{sub}</div>
            </div>
            <Stepper value={count} onChange={()=>{}}/>
          </div>
        ))}
      </div>

      {/* Add-ons */}
      <h3 style={{ margin: '24px 0 12px', fontSize: 17, fontWeight: 700, color: 'var(--ink-strong)', letterSpacing: '-0.02em' }}>Ekstralar</h3>
      <div style={{ display: 'grid', gap: 10 }}>
        {[
          { title: 'Marina transfer', sub: 'Otelden alma & bırakma', price: 250, sel: true },
          { title: 'Şarap eşliği', sub: 'Yerel beyaz + meze tabağı', price: 480, sel: false },
          { title: 'Profesyonel fotoğraf', sub: '20 düzenlenmiş fotoğraf', price: 950, sel: false },
        ].map((a) => (
          <label key={a.title} style={{ display: 'flex', alignItems: 'center', gap: 12, padding: 14, background: 'var(--surface-raised)', border: `1.5px solid ${a.sel ? 'var(--brand-500)' : 'var(--line)'}`, borderRadius: 'var(--r-md)', cursor: 'pointer' }}>
            <div style={{ width: 22, height: 22, borderRadius: 6, border: `1.5px solid ${a.sel ? 'var(--brand-500)' : 'var(--line-strong)'}`, background: a.sel ? 'var(--brand-500)' : 'transparent', display: 'flex', alignItems: 'center', justifyContent: 'center', flexShrink: 0 }}>
              {a.sel && <Icon name="check" size={14} color="#fff"/>}
            </div>
            <div style={{ flex: 1 }}>
              <div style={{ fontSize: 14, fontWeight: 700, color: 'var(--ink-strong)' }}>{a.title}</div>
              <div style={{ fontSize: 12, color: 'var(--ink-dim)' }}>{a.sub}</div>
            </div>
            <div className="tnum" style={{ fontSize: 14, fontWeight: 700, color: 'var(--ink-strong)' }}>+₺{a.price}</div>
          </label>
        ))}
      </div>

      {/* Notes */}
      <h3 style={{ margin: '24px 0 10px', fontSize: 17, fontWeight: 700, color: 'var(--ink-strong)', letterSpacing: '-0.02em' }}>Tedarikçiye not</h3>
      <textarea placeholder="Alerji, yıldönümü, özel istek..." style={{ width: '100%', minHeight: 88, padding: 14, borderRadius: 'var(--r-md)', border: '1.5px solid var(--line)', background: 'var(--surface-raised)', fontFamily: 'inherit', fontSize: 14, resize: 'none', color: 'var(--ink)' }}/>
    </div>

    <div style={{ padding: '14px 16px 26px', borderTop: '1px solid var(--line-soft)', background: 'var(--surface-raised)', display: 'flex', alignItems: 'center', gap: 12 }}>
      <div style={{ flex: 1 }}>
        <div style={{ fontSize: 11, color: 'var(--ink-dim)' }}>3 misafir + 1 ekstra</div>
        <div className="tnum" style={{ fontSize: 18, fontWeight: 800, color: 'var(--ink-strong)' }}>₺3.850</div>
      </div>
      <Btn variant="primary" size="lg" iconRight="arrow-right">Ödeme</Btn>
    </div>
  </MobileScreen>
);

// ─── Payment ────────────────────────────────────────────
const BookingPaymentScreen = () => (
  <MobileScreen>
    <PushBar title="Ödeme" onBack={()=>{}} right={<div style={{ display: 'flex', alignItems: 'center', gap: 4, fontSize: 11, color: 'var(--success-deep)', fontWeight: 700 }}><Icon name="lock" size={12}/> Güvenli</div>}/>

    <div style={{ flex: 1, overflowY: 'auto', padding: '4px 20px 16px' }}>
      {/* Step indicator */}
      <div style={{ padding: '0 0 14px', display: 'flex', alignItems: 'center', gap: 8 }}>
        {['Tarih','Misafir','Ödeme'].map((label,i)=>(
          <Fragment key={label}>
            <div style={{ display: 'flex', alignItems: 'center', gap: 6 }}>
              <div style={{
                width: 22, height: 22, borderRadius: '50%',
                background: 'var(--brand-500)', color: '#fff',
                fontSize: 11, fontWeight: 800, display: 'flex', alignItems: 'center', justifyContent: 'center',
              }}>{i < 2 ? <Icon name="check" size={12}/> : 3}</div>
              <div style={{ fontSize: 12, fontWeight: 700, color: i === 2 ? 'var(--ink-strong)' : 'var(--ink-dim)' }}>{label}</div>
            </div>
            {i < 2 && <div style={{ flex: 1, height: 2, background: 'var(--brand-500)' }}/>}
          </Fragment>
        ))}
      </div>

      {/* Order summary */}
      <div className="card" style={{ padding: 14, display: 'flex', gap: 12, alignItems: 'center', marginBottom: 18 }}>
        <div style={{ width: 56, aspectRatio: '1', borderRadius: 'var(--r-sm)', background: `url(${PHOTO.boat}) center/cover`, flexShrink: 0 }}/>
        <div style={{ flex: 1 }}>
          <div style={{ fontSize: 13, fontWeight: 700, color: 'var(--ink-strong)', lineHeight: 1.3 }}>Bodrum mavi tur</div>
          <div style={{ fontSize: 11, color: 'var(--ink-dim)', marginTop: 2 }}>5 May · 3 misafir · 6 saat</div>
        </div>
      </div>

      {/* Lead guest */}
      <h3 style={{ margin: '0 0 12px', fontSize: 17, fontWeight: 700, color: 'var(--ink-strong)', letterSpacing: '-0.02em' }}>Lider misafir</h3>
      <div style={{ display: 'grid', gap: 10, gridTemplateColumns: '1fr 1fr', marginBottom: 22 }}>
        <Field label="Ad"><Input placeholder="Eren"/></Field>
        <Field label="Soyad"><Input placeholder="Kaplan"/></Field>
        <Field label="E-posta" style={{ gridColumn: '1/-1' }}><Input icon="mail" placeholder="ornek@vagoonya.com"/></Field>
        <Field label="Telefon" style={{ gridColumn: '1/-1' }}><Input icon="phone" placeholder="+90 5__"/></Field>
      </div>

      {/* Payment method tabs */}
      <h3 style={{ margin: '0 0 12px', fontSize: 17, fontWeight: 700, color: 'var(--ink-strong)', letterSpacing: '-0.02em' }}>Ödeme yöntemi</h3>
      <div style={{ display: 'grid', gridTemplateColumns: 'repeat(3,1fr)', gap: 8, marginBottom: 16 }}>
        {[
          ['card','Kart',true],
          ['apple-wallet','Apple Pay',false],
          ['wallet','Cüzdan',false],
        ].map(([icon, label, active]) => (
          <div key={label} style={{
            padding: '12px 8px', borderRadius: 'var(--r-md)', textAlign: 'center',
            border: `1.5px solid ${active ? 'var(--brand-500)' : 'var(--line)'}`,
            background: active ? 'var(--brand-50)' : 'var(--surface-raised)',
          }}>
            <Icon name={icon === 'card' ? 'tag' : icon} size={20} color={active ? 'var(--brand-600)' : 'var(--ink-dim)'} style={{ margin: '0 auto 4px' }}/>
            <div style={{ fontSize: 12, fontWeight: 700, color: active ? 'var(--brand-700)' : 'var(--ink)' }}>{label}</div>
          </div>
        ))}
      </div>

      {/* Card form */}
      <div style={{ display: 'grid', gap: 12, marginBottom: 18 }}>
        <Field label="Kart numarası"><Input placeholder="4242 4242 4242 4242"/></Field>
        <div style={{ display: 'grid', gridTemplateColumns: '1fr 1fr', gap: 10 }}>
          <Field label="Son kullanma"><Input placeholder="MM / YY"/></Field>
          <Field label="CVV"><Input placeholder="123"/></Field>
        </div>
        <Field label="Kart üzerindeki isim"><Input placeholder="EREN KAPLAN"/></Field>
        <label style={{ display: 'flex', alignItems: 'center', gap: 10, fontSize: 13, color: 'var(--ink)', marginTop: 4 }}>
          <div style={{ width: 22, height: 22, borderRadius: 6, background: 'var(--brand-500)', display: 'flex', alignItems: 'center', justifyContent: 'center' }}>
            <Icon name="check" size={14} color="#fff"/>
          </div>
          Bu kartı kaydet
        </label>
      </div>

      {/* Price breakdown */}
      <h3 style={{ margin: '0 0 12px', fontSize: 17, fontWeight: 700, color: 'var(--ink-strong)', letterSpacing: '-0.02em' }}>Fiyat özeti</h3>
      <div style={{ padding: 14, background: 'var(--surface-muted)', borderRadius: 'var(--r-md)', display: 'grid', gap: 8 }}>
        {[
          ['Yetişkin × 2', '₺2.400'],
          ['Çocuk × 1', '₺600'],
          ['Marina transfer', '₺250'],
          ['Hizmet bedeli', '₺120'],
          ['Vergi (%18)', '₺480'],
        ].map(([k,v])=>(
          <div key={k} style={{ display: 'flex', justifyContent: 'space-between', fontSize: 13, color: 'var(--ink)' }}>
            <span>{k}</span><span className="tnum">{v}</span>
          </div>
        ))}
        <div style={{ height: 1, background: 'var(--line)', margin: '4px 0' }}/>
        <div style={{ display: 'flex', justifyContent: 'space-between', alignItems: 'baseline' }}>
          <span style={{ fontSize: 14, fontWeight: 700, color: 'var(--ink-strong)' }}>Toplam</span>
          <span className="tnum" style={{ fontSize: 22, fontWeight: 800, color: 'var(--ink-strong)', letterSpacing: '-0.025em' }}>₺3.850</span>
        </div>
      </div>

      <p style={{ margin: '14px 0 0', fontSize: 11, color: 'var(--ink-dim)', lineHeight: 1.5 }}>
        Ödeme yaparak <strong style={{ color: 'var(--ink)' }}>Kullanım koşulları</strong> ve <strong style={{ color: 'var(--ink)' }}>iptal politikasını</strong> kabul ediyorsun. 7 gün öncesine kadar ücretsiz iptal.
      </p>
    </div>

    <div style={{ padding: '14px 16px 26px', borderTop: '1px solid var(--line-soft)', background: 'var(--surface-raised)' }}>
      <Btn variant="primary" size="lg" block icon="lock">Güvenli Öde · ₺3.850</Btn>
    </div>
  </MobileScreen>
);

// ─── Booking success ────────────────────────────────────
const BookingSuccessScreen = () => (
  <MobileScreen bg="var(--surface)">
    <div style={{ flex: 1, display: 'flex', flexDirection: 'column', alignItems: 'center', padding: '40px 24px 0', position: 'relative', overflow: 'hidden' }}>
      {/* Confetti */}
      <svg width="100%" height="240" style={{ position: 'absolute', top: 20, left: 0, opacity: 0.7 }}>
        {Array.from({length: 24}).map((_,i)=>{
          const x = (i * 37) % 360 + 10;
          const y = (i * 53) % 200 + 20;
          const c = ['#f45d34', '#ff9e78', '#2bd9a2', '#ffc24b', '#3b7be8'][i%5];
          return <rect key={i} x={x} y={y} width="6" height="10" rx="1" fill={c} transform={`rotate(${i*23} ${x+3} ${y+5})`}/>;
        })}
      </svg>

      <div style={{ width: 96, height: 96, borderRadius: '50%', background: 'var(--success-soft)', display: 'flex', alignItems: 'center', justifyContent: 'center', marginTop: 30, marginBottom: 24, position: 'relative', zIndex: 2 }}>
        <Icon name="check" size={56} color="var(--success-deep)" strokeWidth={3}/>
      </div>

      <h1 style={{ margin: 0, fontSize: 28, fontWeight: 800, letterSpacing: '-0.03em', color: 'var(--ink-strong)', textAlign: 'center' }}>Rezervasyon onaylandı</h1>
      <p style={{ margin: '10px 0 22px', fontSize: 15, color: 'var(--ink-dim)', textAlign: 'center', lineHeight: 1.5, maxWidth: 300 }}>
        E-biletini e-posta ile gönderdik. Cüzdana ekleyebilirsin, dilediğin zaman erişebilirsin.
      </p>

      {/* Ticket card with notch */}
      <div className="card" style={{ width: '100%', position: 'relative', padding: 18, marginBottom: 18 }}>
        {/* Notches */}
        <div style={{ position: 'absolute', left: -10, top: '50%', width: 20, height: 20, borderRadius: '50%', background: 'var(--surface)', transform: 'translateY(-50%)' }}/>
        <div style={{ position: 'absolute', right: -10, top: '50%', width: 20, height: 20, borderRadius: '50%', background: 'var(--surface)', transform: 'translateY(-50%)' }}/>

        <div style={{ display: 'flex', gap: 12, paddingBottom: 14 }}>
          <div style={{ width: 58, aspectRatio: '1', borderRadius: 'var(--r-sm)', background: `url(${PHOTO.boat}) center/cover`, flexShrink: 0 }}/>
          <div style={{ flex: 1 }}>
            <Pill tone="success" size="sm">Onaylandı</Pill>
            <div style={{ fontSize: 14, fontWeight: 700, color: 'var(--ink-strong)', marginTop: 4, lineHeight: 1.3 }}>Bodrum mavi tur</div>
            <div style={{ fontSize: 11, color: 'var(--ink-dim)' }}>5 May · 09:30 · 3 misafir</div>
          </div>
        </div>
        <div style={{ borderTop: '2px dashed var(--line-strong)', paddingTop: 14, display: 'grid', gridTemplateColumns: '1fr 1fr 1fr', gap: 12 }}>
          <div>
            <div style={{ fontSize: 10, color: 'var(--ink-low)', fontWeight: 700, letterSpacing: '0.04em' }}>NO</div>
            <div className="mono" style={{ fontSize: 12, fontWeight: 700, color: 'var(--ink-strong)', marginTop: 2 }}>VG-7K2L</div>
          </div>
          <div>
            <div style={{ fontSize: 10, color: 'var(--ink-low)', fontWeight: 700, letterSpacing: '0.04em' }}>TUTAR</div>
            <div className="tnum" style={{ fontSize: 12, fontWeight: 800, color: 'var(--ink-strong)', marginTop: 2 }}>₺3.850</div>
          </div>
          <div>
            <div style={{ fontSize: 10, color: 'var(--ink-low)', fontWeight: 700, letterSpacing: '0.04em' }}>DURUM</div>
            <div style={{ fontSize: 12, fontWeight: 800, color: 'var(--success-deep)', marginTop: 2 }}>Ödendi</div>
          </div>
        </div>
      </div>

      {/* Cüzdana ekle */}
      <button style={{ width: '100%', height: 52, borderRadius: 'var(--r-pill)', background: 'var(--ink-strong)', color: 'var(--on-dark)', border: 0, fontSize: 14, fontWeight: 700, display: 'flex', alignItems: 'center', justifyContent: 'center', gap: 8, marginBottom: 10, fontFamily: 'inherit', cursor: 'pointer' }}>
        <Icon name="apple-wallet" size={18}/> Apple Wallet'a Ekle
      </button>
    </div>

    <div style={{ padding: '12px 20px 26px', display: 'grid', gap: 10 }}>
      <Btn variant="primary" size="lg" block>Rezervasyonu Görüntüle</Btn>
      <Btn variant="ghost" size="lg" block>Anasayfa</Btn>
    </div>
  </MobileScreen>
);

Object.assign(window, { BookingDateScreen, BookingAddonsScreen, BookingPaymentScreen, BookingSuccessScreen });