/* global React */
const { useState, useEffect, useRef, useMemo } = React;

/* ---------- icons (24px) ---------- */
const Icon = {
  Arrow: ({size=14}) => (
    <svg width={size} height={size} viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="1.6" strokeLinecap="round" strokeLinejoin="round"><path d="M5 12h14M13 5l7 7-7 7"/></svg>
  ),
  ArrowUR: ({size=14}) => (
    <svg width={size} height={size} viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="1.6" strokeLinecap="round" strokeLinejoin="round"><path d="M7 17 17 7M9 7h8v8"/></svg>
  ),
  X: ({size=14}) => (
    <svg width={size} height={size} viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="1.6" strokeLinecap="round" strokeLinejoin="round"><path d="M6 6l12 12M18 6 6 18"/></svg>
  ),
  Whatsapp: ({size=22}) => (
    <svg width={size} height={size} viewBox="0 0 24 24" fill="currentColor"><path d="M17.5 14.4c-.3-.1-1.7-.8-1.9-.9-.3-.1-.5-.1-.7.1-.2.3-.8.9-.9 1.1-.2.2-.3.2-.6.1-.3-.2-1.3-.5-2.4-1.5-.9-.8-1.5-1.8-1.7-2.1-.2-.3 0-.5.1-.6.1-.1.3-.4.4-.5.1-.2.2-.3.3-.5.1-.2 0-.4 0-.5l-.9-2.1c-.2-.5-.5-.4-.7-.4h-.6c-.2 0-.5.1-.8.4-.3.3-1.1 1-1.1 2.5s1.1 2.9 1.3 3.1c.2.2 2.2 3.4 5.3 4.8.7.3 1.3.5 1.7.7.7.2 1.4.2 1.9.1.6-.1 1.7-.7 2-1.4.2-.7.2-1.2.2-1.4-.1-.1-.3-.2-.6-.3zM12.1 21.5h0c-1.7 0-3.5-.5-5-1.4l-.4-.2-3.7 1 1-3.6-.2-.4c-1-1.6-1.5-3.4-1.5-5.3 0-5.4 4.4-9.8 9.8-9.8 2.6 0 5.1 1 6.9 2.9 1.8 1.8 2.9 4.3 2.9 6.9.1 5.4-4.3 9.9-9.8 9.9zm8.4-18.2C18.2 1.1 15.3 0 12.1 0 5.5 0 .1 5.4.1 12c0 2.1.6 4.2 1.6 6L0 24l6.2-1.6c1.7.9 3.6 1.4 5.5 1.4h0c6.6 0 12-5.4 12-12 .1-3.2-1.1-6.2-3.3-8.5z"/></svg>
  ),
  Phone: ({size=18}) => (
    <svg width={size} height={size} viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="1.6" strokeLinecap="round" strokeLinejoin="round"><path d="M22 16.92v3a2 2 0 0 1-2.18 2 19.8 19.8 0 0 1-8.63-3.07 19.5 19.5 0 0 1-6-6 19.8 19.8 0 0 1-3.07-8.67A2 2 0 0 1 4.11 2h3a2 2 0 0 1 2 1.72 12.84 12.84 0 0 0 .7 2.81 2 2 0 0 1-.45 2.11L8.09 9.91a16 16 0 0 0 6 6l1.27-1.27a2 2 0 0 1 2.11-.45 12.84 12.84 0 0 0 2.81.7A2 2 0 0 1 22 16.92z"/></svg>
  ),
  Pin: ({size=18}) => (
    <svg width={size} height={size} viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="1.6" strokeLinecap="round" strokeLinejoin="round"><path d="M21 10c0 7-9 13-9 13s-9-6-9-13a9 9 0 0 1 18 0z"/><circle cx="12" cy="10" r="3"/></svg>
  ),
  Clock: ({size=18}) => (
    <svg width={size} height={size} viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="1.6" strokeLinecap="round" strokeLinejoin="round"><circle cx="12" cy="12" r="10"/><path d="M12 6v6l4 2"/></svg>
  ),
  Instagram: ({size=18}) => (
    <svg width={size} height={size} viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="1.6"><rect x="2" y="2" width="20" height="20" rx="5"/><path d="M16 11.37A4 4 0 1 1 12.63 8 4 4 0 0 1 16 11.37z"/><line x1="17.5" y1="6.5" x2="17.51" y2="6.5"/></svg>
  ),
  Sparkle: ({size=16}) => (
    <svg width={size} height={size} viewBox="0 0 24 24" fill="currentColor"><path d="M12 2 13.5 9 21 12l-7.5 3L12 22l-1.5-7L3 12l7.5-3L12 2z"/></svg>
  ),
  Star: ({size=14}) => (
    <svg width={size} height={size} viewBox="0 0 24 24" fill="currentColor"><path d="M12 2l3.09 6.26L22 9.27l-5 4.87 1.18 6.88L12 17.77l-6.18 3.25L7 14.14 2 9.27l6.91-1.01L12 2z"/></svg>
  ),
};

/* ---------- BURO. logo ---------- */
function Logo({ tone = "dark" }) {
  const color = tone === "light" ? "#F7F2EA" : "#2A241F";
  return (
    <span className="logo" style={{ color }}>
      <span>BURO</span>
      <span className="dot"></span>
      <span style={{ fontStyle: 'italic', fontWeight: 400, marginLeft: 2 }}>Beauty</span>
    </span>
  );
}

/* ---------- Nav ---------- */
function Nav({ page, setPage, lang, setLang, openBooking }) {
  const NAV = [
    ['home',       'Home',        'الرئيسية'],
    ['treatments', 'Treatments',  'العلاجات'],
    ['signature',  'Signature',   'التميز'],
    ['memberships','Memberships', 'العضويات'],
    ['cafe',       'Café',        'المقهى'],
    ['gallery',    'Gallery',     'المعرض'],
    ['about',      'About',       'من نحن'],
    ['contact',    'Contact',     'اتصل'],
  ];
  return (
    <nav className="nav">
      <div className="container-wide nav-inner">
        <div className="nav-links">
          {NAV.map(([key, en, ar]) => (
            <button
              key={key}
              className={"nav-link " + (page === key ? "active" : "")}
              onClick={() => setPage(key)}
            >
              {lang === 'ar' ? ar : en}
            </button>
          ))}
        </div>
        <button onClick={() => setPage('home')} style={{display:'flex'}}>
          <Logo />
        </button>
        <div className="nav-actions">
          <button
            className="lang-toggle"
            onClick={() => setLang(lang === 'en' ? 'ar' : 'en')}
            aria-label="Toggle language"
          >
            <span className={lang === 'en' ? 'on' : ''}>EN</span>
            <span className="sep">/</span>
            <span className={lang === 'ar' ? 'on' : ''}>AR</span>
          </button>
          <button className="btn btn-primary btn-sm" onClick={openBooking}>
            {lang === 'ar' ? 'احجز الآن' : 'Book Now'}
          </button>
        </div>
      </div>
    </nav>
  );
}

/* ---------- Sticky mobile book bar ---------- */
function BookBar({ openBooking, lang }) {
  return (
    <div className="book-bar">
      <div>
        <div className="lbl">{lang === 'ar' ? 'مفتوح حتى ٩م' : 'Open until 9pm'}</div>
        <div className="num">{lang === 'ar' ? '+٩٧١ ٥٦ ٦١٥ ٧١٣٥' : '+971 56 615 7135'}</div>
      </div>
      <div style={{display:'flex', gap:8}}>
        <a href="https://wa.me/971566157135?text=Hi%20Buro%20Beauty%2C%20I'd%20like%20to%20book%20a%20treatment"
           target="_blank" rel="noopener"
           className="btn btn-gold btn-sm" style={{height:44}}>
          <Icon.Whatsapp size={16}/>
        </a>
        <button className="btn btn-gold btn-sm" style={{height:44}} onClick={openBooking}>
          {lang === 'ar' ? 'احجز' : 'Book'}
        </button>
      </div>
    </div>
  );
}

/* ---------- WhatsApp FAB ---------- */
function Fab() {
  return (
    <a className="fab"
       href="https://wa.me/971566157135?text=Hi%20Buro%20Beauty%2C%20I'd%20like%20to%20book%20a%20treatment"
       target="_blank" rel="noopener" aria-label="WhatsApp">
      <Icon.Whatsapp />
    </a>
  );
}

/* ---------- Footer ---------- */
function Footer({ setPage, lang }) {
  return (
    <footer className="footer">
      <div className="container-wide">
        <div className="footer-grid">
          <div>
            <Logo tone="light" />
            <p style={{marginTop: 20, color: 'rgba(247,242,234,0.7)', fontSize: 14, maxWidth: '40ch', lineHeight: 1.6}}>
              Dubai's self-care sanctuary — Aesthetic Clinic, Salon &amp; Golf-View Café at Address Montgomerie, Emirates Hills.
            </p>
            <div style={{marginTop:24, display:'flex', gap:12}}>
              <a href="https://instagram.com/burobeauty_ae" target="_blank" rel="noopener" className="chip" style={{color:'inherit', background:'transparent', borderColor:'rgba(247,242,234,0.2)'}}>
                <Icon.Instagram size={14}/> @burobeauty_ae
              </a>
            </div>
          </div>
          <div>
            <h4>Visit</h4>
            <ul>
              <li>Address Montgomerie</li>
              <li>Emirates Hills, Dubai</li>
              <li>Daily, 10:00 – 21:00</li>
              <li><a href="tel:+971566157135">+971 56 615 7135</a></li>
            </ul>
          </div>
          <div>
            <h4>Experience</h4>
            <ul>
              <li><a onClick={() => setPage('treatments')}>Treatments</a></li>
              <li><a onClick={() => setPage('signature')}>Signature 4/6-Hand</a></li>
              <li><a onClick={() => setPage('cafe')}>Golf-View Café</a></li>
              <li><a onClick={() => setPage('memberships')}>Memberships</a></li>
            </ul>
          </div>
          <div>
            <h4>Studio</h4>
            <ul>
              <li><a onClick={() => setPage('about')}>About</a></li>
              <li><a onClick={() => setPage('gallery')}>Gallery</a></li>
              <li><a onClick={() => setPage('reviews')}>Reviews</a></li>
              <li><a onClick={() => setPage('contact')}>Contact</a></li>
            </ul>
          </div>
        </div>
        <div className="footer-bottom">
          <span>© 2026 Buro Beauty Clinic LLC. All rights reserved.</span>
          <span>EN · العربية · DHA-licensed aesthetic clinic</span>
        </div>
      </div>
    </footer>
  );
}

/* ---------- Booking modal ---------- */
const BOOKING_SERVICES = [
  { key: 'signature-6h', name: 'Signature 6-Hand Massage', meta: '90 min · 3 therapists · from AED 1,500*' },
  { key: 'signature-4h', name: 'Signature 4-Hand Massage', meta: '60 min · 2 therapists · from AED 950*' },
  { key: 'facial',       name: 'Skin & Signature Facial',  meta: '60 min · from AED 450*' },
  { key: 'injectable',   name: 'Aesthetic Consultation',  meta: '30 min · complimentary' },
  { key: 'hair',         name: 'Hair Cut & Style',         meta: '60 min · from AED 250*' },
  { key: 'nails',        name: 'Mani / Pedi',              meta: '45 min · from AED 120*' },
];

const BOOKING_DATES = (() => {
  const days = ['Sun','Mon','Tue','Wed','Thu','Fri','Sat'];
  const out = [];
  const today = new Date();
  for (let i = 0; i < 10; i++) {
    const d = new Date(today.getTime() + i*86400000);
    out.push({ dow: days[d.getDay()], d: d.getDate(), key: d.toISOString().slice(0,10) });
  }
  return out;
})();

const BOOKING_TIMES = ['10:00','10:30','11:00','11:30','12:00','13:00','14:00','14:30','15:30','16:00','17:00','18:00','18:30','19:30'];
const DISABLED_TIMES = new Set(['11:00','13:00','15:30','19:30']);

function BookingModal({ open, onClose }) {
  const [step, setStep] = useState(1);
  const [service, setService] = useState(null);
  const [date, setDate] = useState(null);
  const [time, setTime] = useState(null);
  const [name, setName] = useState('');
  const [phone, setPhone] = useState('');
  const [notes, setNotes] = useState('');
  const [confirmed, setConfirmed] = useState(false);

  useEffect(() => {
    if (open) {
      setStep(1); setService(null); setDate(null); setTime(null);
      setName(''); setPhone(''); setNotes(''); setConfirmed(false);
      document.body.style.overflow = 'hidden';
    } else {
      document.body.style.overflow = '';
    }
  }, [open]);

  if (!open) return null;

  const next = () => setStep(s => s + 1);
  const prev = () => setStep(s => s - 1);

  return (
    <div className="modal-backdrop" onClick={(e) => e.target.classList.contains('modal-backdrop') && onClose()}>
      <div className="modal">
        <div className="modal-aside" style={{backgroundImage: 'url(media/images/clinic-04-elegant-clinic-lobby.webp)'}}>
          <div className="tag">
            Reserve<br/><em style={{fontStyle:'italic', color:'var(--champagne)'}}>your moment</em>
          </div>
        </div>
        <div className="modal-body">
          <button className="modal-close" onClick={onClose}><Icon.X /></button>

          {!confirmed && (
            <>
              <div className="step-dots">
                <span className={step >= 1 ? (step > 1 ? 'done' : 'on') : ''}/>
                <span className={step >= 2 ? (step > 2 ? 'done' : 'on') : ''}/>
                <span className={step >= 3 ? (step > 3 ? 'done' : 'on') : ''}/>
                <span className={step >= 4 ? 'on' : ''}/>
              </div>
              <div className="eyebrow eyebrow-quiet">Step {step} of 4</div>

              {step === 1 && (
                <div>
                  <h3 style={{marginTop:6}}>Choose a treatment</h3>
                  <div className="opt-grid">
                    {BOOKING_SERVICES.map(s => (
                      <button key={s.key}
                        className={"opt " + (service?.key === s.key ? 'selected' : '')}
                        onClick={() => setService(s)}>
                        <div className="ttl">{s.name}</div>
                        <div className="sub">{s.meta}</div>
                      </button>
                    ))}
                  </div>
                  <p style={{fontSize:11, color:'rgba(42,36,31,0.5)', marginTop:14, fontStyle:'italic'}}>
                    *Indicative pricing — final price confirmed at consultation.
                  </p>
                  <div style={{display:'flex', justifyContent:'flex-end', marginTop:24}}>
                    <button className="btn btn-primary" disabled={!service} onClick={next}
                      style={{opacity: service ? 1 : 0.4, cursor: service ? 'pointer' : 'not-allowed'}}>
                      Continue <Icon.Arrow />
                    </button>
                  </div>
                </div>
              )}

              {step === 2 && (
                <div>
                  <h3 style={{marginTop:6}}>Select a date</h3>
                  <div className="date-grid">
                    {BOOKING_DATES.map(d => (
                      <button key={d.key}
                        className={"date-pill " + (date?.key === d.key ? 'selected' : '')}
                        onClick={() => setDate(d)}>
                        <div className="dow">{d.dow}</div>
                        <div className="d">{d.d}</div>
                      </button>
                    ))}
                  </div>
                  <div className="eyebrow eyebrow-quiet" style={{marginTop:24, marginBottom:0}}>Available times</div>
                  <div className="time-grid">
                    {BOOKING_TIMES.map(t => {
                      const disabled = DISABLED_TIMES.has(t);
                      return (
                        <button key={t}
                          className={"time-pill " + (time === t ? 'selected ' : '') + (disabled ? 'disabled' : '')}
                          onClick={() => !disabled && setTime(t)}>
                          {t}
                        </button>
                      );
                    })}
                  </div>
                  <div style={{display:'flex', justifyContent:'space-between', marginTop:24}}>
                    <button className="btn btn-ghost" onClick={prev}>Back</button>
                    <button className="btn btn-primary" disabled={!date || !time} onClick={next}
                      style={{opacity: (date && time) ? 1 : 0.4, cursor: (date && time) ? 'pointer' : 'not-allowed'}}>
                      Continue <Icon.Arrow />
                    </button>
                  </div>
                </div>
              )}

              {step === 3 && (
                <div>
                  <h3 style={{marginTop:6}}>Your details</h3>
                  <div style={{display:'grid', gap:16, marginTop:16}}>
                    <div>
                      <label className="label">Full name</label>
                      <input className="input" value={name} onChange={e=>setName(e.target.value)} placeholder="Aïcha Karim" />
                    </div>
                    <div>
                      <label className="label">Mobile / WhatsApp</label>
                      <input className="input" value={phone} onChange={e=>setPhone(e.target.value)} placeholder="+971 ..." />
                    </div>
                    <div>
                      <label className="label">Notes (optional)</label>
                      <textarea className="textarea" value={notes} onChange={e=>setNotes(e.target.value)} placeholder="Allergies, preferences, occasion…"/>
                    </div>
                  </div>
                  <div style={{display:'flex', justifyContent:'space-between', marginTop:24}}>
                    <button className="btn btn-ghost" onClick={prev}>Back</button>
                    <button className="btn btn-primary" disabled={!name || !phone} onClick={next}
                      style={{opacity: (name && phone) ? 1 : 0.4, cursor: (name && phone) ? 'pointer' : 'not-allowed'}}>
                      Review <Icon.Arrow />
                    </button>
                  </div>
                </div>
              )}

              {step === 4 && (
                <div>
                  <h3 style={{marginTop:6}}>Confirm your reservation</h3>
                  <div style={{marginTop:20, background:'var(--cream-card)', padding: 24, border:'1px solid var(--line-soft)'}}>
                    <div style={{display:'grid', gridTemplateColumns:'auto 1fr', gap:'12px 24px', fontSize:14}}>
                      <span style={{color:'rgba(42,36,31,0.5)'}}>Treatment</span><span>{service.name}</span>
                      <span style={{color:'rgba(42,36,31,0.5)'}}>When</span><span>{date.dow} {date.d} · {time}</span>
                      <span style={{color:'rgba(42,36,31,0.5)'}}>Guest</span><span>{name}</span>
                      <span style={{color:'rgba(42,36,31,0.5)'}}>Mobile</span><span>{phone}</span>
                    </div>
                  </div>
                  <p style={{fontSize:12, color:'rgba(42,36,31,0.55)', marginTop:14}}>
                    A concierge will WhatsApp you within 10 minutes to confirm. Free cancellation up to 24 hours prior.
                  </p>
                  <div style={{display:'flex', justifyContent:'space-between', marginTop:24}}>
                    <button className="btn btn-ghost" onClick={prev}>Back</button>
                    <button className="btn btn-gold" onClick={() => setConfirmed(true)}>
                      Confirm reservation
                    </button>
                  </div>
                </div>
              )}
            </>
          )}

          {confirmed && (
            <div style={{textAlign:'center', padding:'32px 0'}}>
              <div style={{width:64, height:64, border:'1px solid var(--champagne)', borderRadius:'50%', display:'grid', placeItems:'center', margin:'0 auto', color:'var(--champagne-deep)'}}>
                <Icon.Sparkle size={28} />
              </div>
              <h3 style={{marginTop:24}}>Reservation requested</h3>
              <p style={{marginTop:12, color:'rgba(42,36,31,0.65)', maxWidth: '36ch', margin:'12px auto 0'}}>
                Thank you, {name.split(' ')[0]}. We've sent your request to the concierge — expect a WhatsApp confirmation shortly.
              </p>
              <div style={{marginTop:32}}>
                <button className="btn btn-primary" onClick={onClose}>Close</button>
              </div>
            </div>
          )}
        </div>
      </div>
    </div>
  );
}

Object.assign(window, { Nav, Footer, Fab, BookBar, BookingModal, Logo, Icon });
