// Booking flow — multi-step, full state, validation, animated transitions
const { useState: useStateB, useMemo: useMemoB, useEffect: useEffectB } = React;

const EXPERTS = [
  { id: "sevgi", name: "Sevgi Taşan",  role: "Kurucu · Cilt Bakımı & Kalıcı Makyaj", years: 12 },
  { id: "elif",  name: "Elif Yılmaz",  role: "Medikal Estetisyen",                    years: 8  },
  { id: "duru",  name: "Duru Aksoy",   role: "Lash & Brow Uzmanı",                    years: 6  },
  { id: "naz",   name: "Naz Kaya",     role: "Makyaj & Saç Stilisti",                 years: 5  },
];
const TIME_SLOTS = ["10:00","10:30","11:00","11:30","12:00","13:00","13:30","14:00","14:30","15:00","15:30","16:00","16:30","17:00","17:30","18:00"];

function TR_MONTHS() { return ["Ocak","Şubat","Mart","Nisan","Mayıs","Haziran","Temmuz","Ağustos","Eylül","Ekim","Kasım","Aralık"]; }
function TR_DAYS()   { return ["Pzt","Sal","Çar","Per","Cum","Cmt","Paz"]; }

function StepDots({ step, total }) {
  return (
    <div className="bk-steps">
      {Array.from({ length: total }).map((_, i) => (
        <div key={i} className={`bk-step ${i+1 === step ? 'active' : ''} ${i+1 < step ? 'done' : ''}`}>
          <span className="n">{String(i+1).padStart(2,'0')}</span>
          <span className="lbl">{["Hizmet","Uzman","Tarih","Saat","Bilgiler","Onay"][i]}</span>
        </div>
      ))}
    </div>
  );
}

function Calendar({ value, onChange }) {
  const today = new Date(); today.setHours(0,0,0,0);
  const [view, setView] = useStateB(() => ({ y: today.getFullYear(), m: today.getMonth() }));
  const months = TR_MONTHS();
  const first = new Date(view.y, view.m, 1);
  const startDay = (first.getDay() + 6) % 7; // Mon=0
  const daysInMonth = new Date(view.y, view.m+1, 0).getDate();
  const cells = [];
  for (let i=0;i<startDay;i++) cells.push(null);
  for (let d=1; d<=daysInMonth; d++) cells.push(new Date(view.y, view.m, d));

  const go = (delta) => {
    let m = view.m + delta, y = view.y;
    if (m < 0) { m = 11; y -= 1; }
    if (m > 11) { m = 0; y += 1; }
    setView({ y, m });
  };

  return (
    <div className="cal">
      <div className="cal-head">
        <button type="button" onClick={() => go(-1)} aria-label="Önceki ay" data-cursor="hover">‹</button>
        <div className="cal-title">{months[view.m]} <span>{view.y}</span></div>
        <button type="button" onClick={() => go(1)} aria-label="Sonraki ay" data-cursor="hover">›</button>
      </div>
      <div className="cal-grid">
        {TR_DAYS().map(d => <div key={d} className="cal-dow">{d}</div>)}
        {cells.map((d, i) => {
          if (!d) return <div key={i} className="cal-blank" />;
          const past = d < today;
          const isSel = value && d.toDateString() === value.toDateString();
          const isWeekend = d.getDay() === 0;
          return (
            <button
              key={i}
              type="button"
              disabled={past || isWeekend}
              data-cursor="hover"
              className={`cal-day ${isSel ? 'sel' : ''} ${past ? 'past' : ''} ${isWeekend ? 'closed' : ''}`}
              onClick={() => onChange(d)}
            >
              <span>{d.getDate()}</span>
            </button>
          );
        })}
      </div>
      <div className="cal-legend">
        <span className="dot a" /> Müsait
        <span className="dot s" /> Seçili
        <span className="dot c" /> Kapalı
      </div>
    </div>
  );
}

function BookingSection() {
  const [step, setStep] = useStateB(1);
  const [data, setData] = useStateB({
    service: null, expert: null, date: null, time: null,
    name: "", phone: "", email: "", note: "",
  });
  const [errors, setErrors] = useStateB({});
  const [done, setDone] = useStateB(false);

  const update = (k, v) => setData(d => ({ ...d, [k]: v }));

  const canNext = useMemoB(() => {
    if (step === 1) return !!data.service;
    if (step === 2) return !!data.expert;
    if (step === 3) return !!data.date;
    if (step === 4) return !!data.time;
    if (step === 5) {
      const e = {};
      if (!data.name || data.name.trim().length < 2) e.name = "Lütfen ad soyad girin.";
      if (!data.phone || data.phone.replace(/\D/g,'').length < 10) e.phone = "Geçerli bir telefon numarası girin.";
      if (data.email && !/^\S+@\S+\.\S+$/.test(data.email)) e.email = "Geçerli bir e-posta girin.";
      return Object.keys(e).length === 0;
    }
    return true;
  }, [step, data]);

  const next = () => {
    if (step === 5) {
      const e = {};
      if (!data.name || data.name.trim().length < 2) e.name = "Lütfen ad soyad girin.";
      if (!data.phone || data.phone.replace(/\D/g,'').length < 10) e.phone = "Geçerli bir telefon numarası girin.";
      if (data.email && !/^\S+@\S+\.\S+$/.test(data.email)) e.email = "Geçerli bir e-posta girin.";
      setErrors(e);
      if (Object.keys(e).length) return;
    }
    if (step < 6) setStep(step + 1);
    else { setDone(true); }
  };
  const prev = () => step > 1 && setStep(step - 1);

  const fmtDate = (d) => d ? `${String(d.getDate()).padStart(2,'0')} ${TR_MONTHS()[d.getMonth()]} ${d.getFullYear()}` : '—';

  return (
    <div className="bk section-pad">
      <style>{`
        .bk { background: linear-gradient(180deg, var(--paper) 0%, var(--bg) 100%); position: relative; }
        .bk-head { display: grid; grid-template-columns: 1.2fr 1fr; gap: 60px; align-items: end; margin-bottom: 60px; }
        @media (max-width: 880px) { .bk-head { grid-template-columns: 1fr; gap: 24px; } }
        .bk-h {
          font-family: var(--serif); font-weight: 300;
          font-size: clamp(48px, 7vw, 110px);
          line-height: 0.95; letter-spacing: -0.02em;
          margin: 12px 0 0;
        }
        .bk-h em { font-style: italic; color: #5a4530; }

        .bk-card {
          background: var(--paper);
          border: 1px solid var(--line-soft);
          border-radius: 8px;
          padding: clamp(24px, 4vw, 48px);
          box-shadow: 0 50px 120px -60px rgba(26,20,16,0.3);
          position: relative;
          overflow: hidden;
        }
        .bk-card::before {
          content: ""; position: absolute; left: 0; right: 0; top: 0; height: 1px;
          background: linear-gradient(90deg, transparent, var(--gold) 50%, transparent);
          opacity: 0.6;
        }

        .bk-steps {
          display: flex; gap: 4px; margin-bottom: 36px;
          padding-bottom: 22px; border-bottom: 1px solid var(--line);
          overflow-x: auto;
        }
        .bk-step {
          flex: 1; min-width: 90px;
          display: flex; flex-direction: column; gap: 6px;
          padding: 10px 4px 10px 14px;
          border-left: 1px solid var(--line);
          opacity: 0.45;
          transition: opacity 400ms ease;
        }
        .bk-step.done { opacity: 0.85; }
        .bk-step.done .n::after { content: " ✓"; color: var(--gold); }
        .bk-step.active { opacity: 1; border-left-color: var(--gold); }
        .bk-step .n { font-family: var(--mono); font-size: 10px; letter-spacing: 0.18em; color: var(--muted); }
        .bk-step .lbl { font-family: var(--serif); font-size: 16px; font-weight: 400; }

        .bk-stage { position: relative; min-height: 380px; }
        .bk-pane {
          opacity: 0; transform: translateY(14px);
          transition: opacity 500ms cubic-bezier(.2,.8,.2,1), transform 500ms cubic-bezier(.2,.8,.2,1);
          position: absolute; inset: 0;
          pointer-events: none;
        }
        .bk-pane.in { opacity: 1; transform: none; pointer-events: auto; position: relative; }

        /* Service select grid */
        .bk-svc-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(220px, 1fr)); gap: 14px; }
        .bk-svc {
          text-align: left; padding: 22px; border: 1px solid var(--line); background: var(--bg);
          border-radius: 6px; cursor: none; font: inherit; color: inherit;
          display: grid; gap: 10px; min-height: 130px;
          transition: background 320ms ease, border-color 320ms ease, transform 320ms cubic-bezier(.2,.8,.2,1);
          position: relative; overflow: hidden;
        }
        .bk-svc:hover { transform: translateY(-2px); border-color: var(--ink-soft); }
        .bk-svc.sel { border-color: var(--ink); background: var(--ink); color: var(--paper); }
        .bk-svc.sel .bk-svc-meta { color: var(--gold-soft); }
        .bk-svc h4 { font-family: var(--serif); font-weight: 400; font-size: 22px; margin: 0; line-height: 1.05; }
        .bk-svc-num { font-family: var(--mono); font-size: 10px; letter-spacing: 0.24em; opacity: 0.7; }
        .bk-svc-meta { font-family: var(--mono); font-size: 10px; letter-spacing: 0.18em; color: var(--muted); text-transform: uppercase; }

        /* Expert grid */
        .bk-exp-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(240px, 1fr)); gap: 14px; }
        .bk-exp {
          padding: 22px; border: 1px solid var(--line); background: var(--bg); border-radius: 6px;
          cursor: none; font: inherit; color: inherit; text-align: left;
          display: grid; grid-template-columns: 56px 1fr; gap: 16px; align-items: center;
          transition: background 320ms ease, border-color 320ms ease, transform 320ms cubic-bezier(.2,.8,.2,1);
        }
        .bk-exp:hover { transform: translateY(-2px); border-color: var(--ink-soft); }
        .bk-exp.sel { border-color: var(--ink); background: var(--ink); color: var(--paper); }
        .bk-exp .av {
          width: 56px; height: 56px; border-radius: 50%; overflow: hidden;
          background: linear-gradient(135deg, var(--nude), var(--champ));
          display: grid; place-items: center;
          font-family: var(--serif); font-style: italic; font-size: 22px; color: var(--ink);
        }
        .bk-exp.sel .av { background: linear-gradient(135deg, var(--gold-soft), var(--gold)); }
        .bk-exp h4 { font-family: var(--serif); font-weight: 400; font-size: 18px; margin: 0 0 4px; }
        .bk-exp p { margin: 0; font-size: 12px; color: var(--muted); }
        .bk-exp.sel p { color: var(--gold-soft); }

        /* Calendar */
        .cal { max-width: 560px; }
        .cal-head { display: flex; align-items: center; justify-content: space-between; margin-bottom: 18px; }
        .cal-head button {
          background: none; border: 1px solid var(--line); width: 36px; height: 36px;
          border-radius: 50%; cursor: none; font: inherit; color: inherit;
          font-size: 18px; line-height: 1;
          transition: background 320ms ease, border-color 320ms ease;
        }
        .cal-head button:hover { background: var(--ink); color: var(--paper); border-color: var(--ink); }
        .cal-title { font-family: var(--serif); font-size: 22px; font-weight: 400; }
        .cal-title span { color: var(--muted); margin-left: 6px; }
        .cal-grid { display: grid; grid-template-columns: repeat(7, 1fr); gap: 4px; }
        .cal-dow {
          font-family: var(--mono); font-size: 10px; letter-spacing: 0.18em; text-transform: uppercase;
          color: var(--muted); text-align: center; padding: 8px 0;
        }
        .cal-day {
          aspect-ratio: 1/1;
          background: var(--bg); border: 1px solid transparent; border-radius: 50%;
          cursor: none; font: inherit; color: inherit;
          display: grid; place-items: center;
          transition: background 240ms ease, color 240ms ease, border-color 240ms ease, transform 240ms ease;
        }
        .cal-day:hover:not(:disabled) { background: var(--paper); border-color: var(--gold); transform: scale(1.05); }
        .cal-day.sel { background: var(--ink); color: var(--paper); border-color: var(--ink); }
        .cal-day.past { color: var(--muted); opacity: 0.35; cursor: not-allowed; }
        .cal-day.closed { color: var(--muted); opacity: 0.4; cursor: not-allowed; text-decoration: line-through; text-decoration-color: var(--muted); }
        .cal-blank { aspect-ratio: 1/1; }
        .cal-legend {
          display: flex; gap: 18px; margin-top: 16px;
          font-family: var(--mono); font-size: 10px; letter-spacing: 0.16em; text-transform: uppercase; color: var(--muted);
          align-items: center;
        }
        .cal-legend .dot { display: inline-block; width: 8px; height: 8px; border-radius: 50%; margin-right: 6px; vertical-align: middle; }
        .cal-legend .dot.a { background: var(--bg); border: 1px solid var(--line); }
        .cal-legend .dot.s { background: var(--ink); }
        .cal-legend .dot.c { background: transparent; border: 1px solid var(--muted); opacity: 0.5; }

        /* Time grid */
        .bk-time {
          display: grid; grid-template-columns: repeat(auto-fill, minmax(110px, 1fr));
          gap: 10px;
        }
        .bk-time button {
          padding: 16px 10px;
          background: var(--bg); border: 1px solid var(--line); border-radius: 6px;
          cursor: none; font: inherit; color: inherit;
          font-family: var(--mono); font-size: 14px; letter-spacing: 0.06em;
          transition: background 240ms ease, color 240ms ease, border-color 240ms ease;
        }
        .bk-time button:hover { border-color: var(--ink-soft); }
        .bk-time button.sel { background: var(--ink); color: var(--paper); border-color: var(--ink); }

        /* Form */
        .bk-form { display: grid; grid-template-columns: 1fr 1fr; gap: 18px; }
        @media (max-width: 640px) { .bk-form { grid-template-columns: 1fr; } }
        .bk-field { display: flex; flex-direction: column; gap: 6px; }
        .bk-field.full { grid-column: 1 / -1; }
        .bk-field label { font-family: var(--mono); font-size: 10px; letter-spacing: 0.2em; text-transform: uppercase; color: var(--muted); }
        .bk-field input, .bk-field textarea {
          background: var(--bg); border: 1px solid var(--line); border-bottom: 1px solid var(--ink-soft);
          padding: 14px 16px; font: inherit; color: inherit; border-radius: 4px;
          font-size: 15px;
          transition: border-color 320ms ease, background 320ms ease;
        }
        .bk-field input:focus, .bk-field textarea:focus { outline: none; border-color: var(--gold); background: var(--paper); }
        .bk-field.err input, .bk-field.err textarea { border-color: #b85a4a; }
        .bk-field .errmsg { font-family: var(--mono); font-size: 10px; letter-spacing: 0.1em; color: #b85a4a; }

        /* Confirm summary */
        .bk-summary {
          display: grid; grid-template-columns: 1fr 1fr; gap: 0;
          border: 1px solid var(--line); border-radius: 6px; overflow: hidden;
        }
        @media (max-width: 640px) { .bk-summary { grid-template-columns: 1fr; } }
        .bk-row {
          padding: 18px 22px;
          border-bottom: 1px solid var(--line);
          display: grid; grid-template-columns: 100px 1fr; gap: 16px; align-items: center;
        }
        .bk-row:nth-child(odd) { border-right: 1px solid var(--line); }
        @media (max-width: 640px) { .bk-row:nth-child(odd) { border-right: 0; } }
        .bk-row .k { font-family: var(--mono); font-size: 10px; letter-spacing: 0.2em; text-transform: uppercase; color: var(--muted); }
        .bk-row .v { font-family: var(--serif); font-size: 17px; font-weight: 400; }

        /* Nav */
        .bk-nav {
          display: flex; justify-content: space-between; gap: 12px; align-items: center;
          margin-top: 36px; padding-top: 24px; border-top: 1px solid var(--line);
        }
        .bk-nav .btn[disabled] { opacity: 0.35; cursor: not-allowed; }
        .bk-nav .meta { font-family: var(--mono); font-size: 10px; letter-spacing: 0.2em; color: var(--muted); text-transform: uppercase; }

        /* Success */
        .bk-success {
          padding: 50px 30px;
          text-align: center;
          display: flex; flex-direction: column; align-items: center; gap: 16px;
        }
        .bk-success .check {
          width: 72px; height: 72px; border-radius: 50%; border: 1px solid var(--gold);
          display: grid; place-items: center;
          animation: success-ring 1200ms cubic-bezier(.2,.8,.2,1);
        }
        @keyframes success-ring { from { transform: scale(0.6); opacity: 0; } to { transform: scale(1); opacity: 1; } }
        .bk-success .check svg { width: 32px; height: 32px; color: var(--gold); }
        .bk-success h3 { font-family: var(--serif); font-weight: 300; font-size: clamp(28px, 4vw, 44px); margin: 0; }
        .bk-success p { color: var(--ink-soft); max-width: 48ch; margin: 0; }
        .bk-success .ref {
          margin-top: 14px; padding: 10px 18px;
          font-family: var(--mono); font-size: 12px; letter-spacing: 0.16em;
          background: var(--bg); border: 1px solid var(--line); border-radius: 999px;
        }

        .bk-side {
          display: grid; gap: 14px;
        }
        .bk-side-card {
          padding: 22px; border: 1px solid var(--line); background: var(--paper);
          border-radius: 8px;
        }
        .bk-side-card h5 { font-family: var(--serif); font-weight: 400; font-size: 15px; margin: 0 0 10px; }
        .bk-side-card .row { display: flex; justify-content: space-between; padding: 8px 0; border-bottom: 1px dashed var(--line-soft); font-size: 13px; }
        .bk-side-card .row:last-child { border: 0; }
        .bk-side-card .k { color: var(--muted); font-family: var(--mono); font-size: 10px; letter-spacing: 0.18em; text-transform: uppercase; }
        .bk-side-card .v { font-family: var(--serif); font-size: 14px; }
        .bk-wa {
          display: flex; gap: 12px; align-items: center;
          padding: 16px 18px; background: #1c8d54; color: #fff; text-decoration: none;
          border-radius: 8px;
          font-size: 13px;
          transition: transform 320ms cubic-bezier(.2,.8,.2,1), box-shadow 320ms ease;
        }
        .bk-wa:hover { transform: translateY(-2px); box-shadow: 0 18px 40px -20px rgba(28,141,84,0.5); }
        .bk-wa svg { width: 22px; height: 22px; flex: none; }

        .bk-layout { display: grid; grid-template-columns: 1.6fr 0.9fr; gap: 24px; }
        @media (max-width: 1100px) { .bk-layout { grid-template-columns: 1fr; } }
      `}</style>

      <div className="container">
        <div className="bk-head">
          <div className="reveal">
            <div className="eyebrow">— Online Randevu</div>
            <h2 className="bk-h">
              Hemen <em>randevu</em><br/>oluşturun
            </h2>
          </div>
          <div className="reveal reveal-d1" style={{color: 'var(--muted)', fontSize: 14, lineHeight: 1.6, maxWidth: '44ch'}}>
            Altı kısa adımda, atelyemizdeki yerinizi ayırtın. Ekibimiz randevunuzu en kısa sürede onaylayacaktır.
          </div>
        </div>

        <div className="bk-layout reveal">
          <div className="bk-card">
            {!done && <StepDots step={step} total={6} />}

            {done ? (
              <div className="bk-success">
                <div className="check">
                  <svg viewBox="0 0 32 32" fill="none" stroke="currentColor" strokeWidth="1.5"><path d="M6 16l6 6 14-14"/></svg>
                </div>
                <h3>Randevu talebiniz alındı.</h3>
                <p>Randevu talebiniz başarıyla alınmıştır. Ekibimiz en kısa sürede sizinle iletişime geçecektir.</p>
                <div className="ref">REF · STBS-{Math.floor(100000 + Math.random()*899999)}</div>
                <div style={{display:'flex', gap: 12, marginTop: 18}}>
                  <button type="button" className="btn btn-ghost" onClick={() => { setDone(false); setStep(1); setData({service:null,expert:null,date:null,time:null,name:'',phone:'',email:'',note:''}); }} data-cursor="hover">Yeni Randevu</button>
                  <a href="#iletisim" className="btn" data-cursor="hover">Bize Ulaşın
                    <svg className="arrow" viewBox="0 0 14 14" fill="none" stroke="currentColor" strokeWidth="1.4"><path d="M2 7h10M8 3l4 4-4 4"/></svg>
                  </a>
                </div>
              </div>
            ) : (
              <div className="bk-stage" key={step}>
                {step === 1 && (
                  <div className="bk-pane in">
                    <div className="bk-svc-grid">
                      {SERVICES.map(s => (
                        <button key={s.id} type="button" className={`bk-svc ${data.service?.id === s.id ? 'sel' : ''}`} onClick={() => update('service', s)} data-cursor="hover">
                          <span className="bk-svc-num">{s.glyph}</span>
                          <h4>{s.name}</h4>
                          <span className="bk-svc-meta">{s.duration} · başlangıç {s.from}</span>
                        </button>
                      ))}
                    </div>
                  </div>
                )}
                {step === 2 && (
                  <div className="bk-pane in">
                    <div className="bk-exp-grid">
                      {EXPERTS.map(e => (
                        <button key={e.id} type="button" className={`bk-exp ${data.expert?.id === e.id ? 'sel' : ''}`} onClick={() => update('expert', e)} data-cursor="hover">
                          <div className="av">{e.name.split(' ').map(p => p[0]).join('')}</div>
                          <div>
                            <h4>{e.name}</h4>
                            <p>{e.role} · {e.years} yıl</p>
                          </div>
                        </button>
                      ))}
                    </div>
                  </div>
                )}
                {step === 3 && (
                  <div className="bk-pane in">
                    <Calendar value={data.date} onChange={(d) => update('date', d)} />
                  </div>
                )}
                {step === 4 && (
                  <div className="bk-pane in">
                    <div className="bk-time">
                      {TIME_SLOTS.map(t => (
                        <button key={t} type="button" className={data.time === t ? 'sel' : ''} onClick={() => update('time', t)} data-cursor="hover">{t}</button>
                      ))}
                    </div>
                  </div>
                )}
                {step === 5 && (
                  <div className="bk-pane in">
                    <div className="bk-form">
                      <div className={`bk-field ${errors.name ? 'err' : ''}`}>
                        <label>Ad Soyad</label>
                        <input value={data.name} onChange={e => update('name', e.target.value)} placeholder="Örn. Ayşe Yılmaz" />
                        {errors.name && <span className="errmsg">{errors.name}</span>}
                      </div>
                      <div className={`bk-field ${errors.phone ? 'err' : ''}`}>
                        <label>Telefon Numarası</label>
                        <input value={data.phone} onChange={e => update('phone', e.target.value)} placeholder="+90 5__ ___ __ __" />
                        {errors.phone && <span className="errmsg">{errors.phone}</span>}
                      </div>
                      <div className={`bk-field full ${errors.email ? 'err' : ''}`}>
                        <label>E-posta (opsiyonel)</label>
                        <input value={data.email} onChange={e => update('email', e.target.value)} placeholder="ornek@eposta.com" />
                        {errors.email && <span className="errmsg">{errors.email}</span>}
                      </div>
                      <div className="bk-field full">
                        <label>Notunuz (opsiyonel)</label>
                        <textarea value={data.note} onChange={e => update('note', e.target.value)} rows="3" placeholder="Cilt tipiniz, alerjileriniz veya özel istekleriniz hakkında bilgi verebilirsiniz." />
                      </div>
                    </div>
                  </div>
                )}
                {step === 6 && (
                  <div className="bk-pane in">
                    <div className="bk-summary">
                      <div className="bk-row"><span className="k">Hizmet</span><span className="v">{data.service?.name}</span></div>
                      <div className="bk-row"><span className="k">Uzman</span><span className="v">{data.expert?.name}</span></div>
                      <div className="bk-row"><span className="k">Tarih</span><span className="v">{fmtDate(data.date)}</span></div>
                      <div className="bk-row"><span className="k">Saat</span><span className="v">{data.time}</span></div>
                      <div className="bk-row"><span className="k">Ad Soyad</span><span className="v">{data.name}</span></div>
                      <div className="bk-row"><span className="k">Telefon</span><span className="v">{data.phone}</span></div>
                      {data.email && <div className="bk-row"><span className="k">E-posta</span><span className="v">{data.email}</span></div>}
                      {data.note && <div className="bk-row" style={{gridColumn: '1 / -1', borderRight: 0}}><span className="k">Not</span><span className="v" style={{fontStyle:'italic', fontSize: 14, color: 'var(--ink-soft)'}}>"{data.note}"</span></div>}
                    </div>
                  </div>
                )}
              </div>
            )}

            {!done && (
              <div className="bk-nav">
                <button type="button" className="btn btn-ghost" onClick={prev} disabled={step === 1} data-cursor="hover">← Geri</button>
                <span className="meta">Adım {step} / 6</span>
                <button type="button" className="btn btn-gold" onClick={next} disabled={!canNext} data-cursor="hover">
                  {step === 6 ? 'Randevuyu Onayla' : 'Devam Et'}
                  <svg className="arrow" viewBox="0 0 14 14" fill="none" stroke="currentColor" strokeWidth="1.4"><path d="M2 7h10M8 3l4 4-4 4"/></svg>
                </button>
              </div>
            )}
          </div>

          <div className="bk-side">
            <div className="bk-side-card">
              <h5>Randevu Özeti</h5>
              <div className="row"><span className="k">Hizmet</span><span className="v">{data.service?.name || '—'}</span></div>
              <div className="row"><span className="k">Uzman</span><span className="v">{data.expert?.name || '—'}</span></div>
              <div className="row"><span className="k">Tarih</span><span className="v">{fmtDate(data.date)}</span></div>
              <div className="row"><span className="k">Saat</span><span className="v">{data.time || '—'}</span></div>
              <div className="row"><span className="k">Tutar</span><span className="v">{data.service ? `${data.service.from}'den itibaren` : '—'}</span></div>
            </div>
            <a href="https://wa.me/905354691908" target="_blank" rel="noopener" className="bk-wa" data-cursor="hover">
              <svg viewBox="0 0 32 32" fill="currentColor"><path d="M16 3C9.4 3 4 8.4 4 15c0 2.4.7 4.7 2 6.7L4 29l7.5-2c1.9 1 4 1.6 6.2 1.6h.3c6.6 0 12-5.4 12-12S22.6 3 16 3z"/></svg>
              <div>
                <div style={{fontWeight: 500, marginBottom: 2}}>WhatsApp'tan Hızlı Randevu</div>
                <div style={{fontSize: 11, opacity: 0.85, fontFamily: 'var(--mono)', letterSpacing: '0.1em'}}>+90 535 469 19 08</div>
              </div>
            </a>
            <div className="bk-side-card">
              <h5>İptal & Değişiklik</h5>
              <p style={{margin: 0, fontSize: 12.5, color: 'var(--muted)', lineHeight: 1.6}}>
                Randevunuzu en geç 24 saat öncesinden iptal edebilir veya yeniden planlayabilirsiniz.
              </p>
            </div>
          </div>
        </div>
      </div>
    </div>
  );
}

window.BookingSection = BookingSection;
