/* Symphony — shared components */
// Note: React.useState/React.useEffect/React.useRef are accessed via React.* to avoid scope collisions across babel scripts

// ───────────── Icons (inline SVG, monoline) ─────────────
const Icon = {
  Star: (p)   => <svg width={p.s||14} height={p.s||14} 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>,
  Arrow: (p)  => <svg width={p.s||14} height={p.s||14} viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="1.5"><path d="M5 12h14M13 5l7 7-7 7"/></svg>,
  Check: (p)  => <svg width={p.s||16} height={p.s||16} viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2"><path d="M20 6L9 17l-5-5"/></svg>,
  Phone: (p)  => <svg width={p.s||18} height={p.s||18} viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="1.4"><path d="M22 16.92v3a2 2 0 0 1-2.18 2 19.79 19.79 0 0 1-8.63-3.07 19.5 19.5 0 0 1-6-6 19.79 19.79 0 0 1-3.07-8.67A2 2 0 0 1 4.11 2h3a2 2 0 0 1 2 1.72c.13.96.37 1.9.72 2.81a2 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-.45c.91.35 1.85.59 2.81.72A2 2 0 0 1 22 16.92z"/></svg>,
  WhatsApp: (p) => <svg width={p.s||28} height={p.s||28} 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.2-.2.3-.7.9-.9 1.1-.2.2-.3.2-.6.1-1.7-.8-2.8-1.5-3.9-3.4-.3-.5.3-.5.8-1.5.1-.2 0-.3 0-.5s-.7-1.7-1-2.3c-.3-.6-.5-.5-.7-.5h-.6c-.2 0-.5.1-.8.4s-1.1 1-1.1 2.5 1.1 2.9 1.3 3.1c.2.2 2.2 3.3 5.2 4.6 1.9.8 2.6.9 3.6.7.6-.1 1.7-.7 2-1.4.2-.7.2-1.2.2-1.4-.1-.2-.3-.2-.6-.4zM12 2C6.5 2 2 6.5 2 12c0 1.7.4 3.3 1.2 4.7L2 22l5.4-1.2C8.8 21.6 10.4 22 12 22c5.5 0 10-4.5 10-10S17.5 2 12 2z"/></svg>,
  Mail: (p)   => <svg width={p.s||18} height={p.s||18} viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="1.4"><path d="M4 4h16c1.1 0 2 .9 2 2v12c0 1.1-.9 2-2 2H4c-1.1 0-2-.9-2-2V6c0-1.1.9-2 2-2z"/><path d="M22 6l-10 7L2 6"/></svg>,
  Pin: (p)    => <svg width={p.s||18} height={p.s||18} viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="1.4"><path d="M21 10c0 7-9 13-9 13s-9-6-9-13a9 9 0 1 1 18 0z"/><circle cx="12" cy="10" r="3"/></svg>,
  Clock: (p)  => <svg width={p.s||18} height={p.s||18} viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="1.4"><circle cx="12" cy="12" r="10"/><path d="M12 6v6l4 2"/></svg>,
  Sparkle: (p)=> <svg width={p.s||18} height={p.s||18} viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="1.3"><path d="M12 3l1.6 4.4L18 9l-4.4 1.6L12 15l-1.6-4.4L6 9l4.4-1.6L12 3zM19 14l.8 2.2L22 17l-2.2.8L19 20l-.8-2.2L16 17l2.2-.8L19 14z"/></svg>,
  Shield: (p) => <svg width={p.s||18} height={p.s||18} viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="1.4"><path d="M12 22s8-4 8-10V5l-8-3-8 3v7c0 6 8 10 8 10z"/></svg>,
  Parking: (p)=> <svg width={p.s||18} height={p.s||18} viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="1.4"><rect x="3" y="3" width="18" height="18" rx="2"/><path d="M9 17V7h4a3 3 0 0 1 0 6H9"/></svg>,
  Laser: (p)  => <svg width={p.s||18} height={p.s||18} viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="1.4"><circle cx="12" cy="12" r="3"/><path d="M12 2v3M12 19v3M2 12h3M19 12h3M4.93 4.93l2.12 2.12M16.95 16.95l2.12 2.12M4.93 19.07l2.12-2.12M16.95 7.05l2.12-2.12"/></svg>,
};

// ───────────── Fresha rating badge ─────────────
function FreshaBadge({ compact }) {
  return (
    <a href="https://www.fresha.com/a/symphony-beauty-clinic-dubai-908-regal-tower-vv7el64y"
       target="_blank" rel="noopener" className="fresha-badge"
       style={{ textDecoration: 'none' }}>
      <span className="stars">★★★★★</span>
      <span><span className="num">4.9</span>{compact ? '' : ' · 908 reviews'}</span>
      <span className="src">Fresha</span>
    </a>
  );
}

// ───────────── Navbar ─────────────
function Navbar({ route, onNavigate }) {
  const links = [
    ['home',       'Home'],
    ['treatments', 'Treatments'],
    ['laser',      'Laser'],
    ['team',       'Team'],
    ['reviews',    'Reviews'],
    ['contact',    'Contact'],
  ];
  return (
    <nav className="nav">
      <div className="nav-inner">
        <a href="#home" className="nav-logo" onClick={(e) => { e.preventDefault(); onNavigate('home'); }}>
          <span className="nav-logo-mark">S</span>
          <span className="nav-logo-text">Symphony</span>
        </a>
        <div className="nav-links">
          {links.map(([k, label]) => (
            <a key={k} href={'#' + k}
               className={'nav-link' + (route === k ? ' active' : '')}
               onClick={(e) => { e.preventDefault(); onNavigate(k); }}>
              {label}
            </a>
          ))}
        </div>
        <div className="nav-cta">
          <a href="tel:+97142672368" className="nav-phone">+971 4 267 2368</a>
          <a href="#contact" className="btn btn-coral"
             onClick={(e) => { e.preventDefault(); onNavigate('contact'); }}>
            Book Consultation
          </a>
        </div>
      </div>
    </nav>
  );
}

// ───────────── WhatsApp floating ─────────────
function WhatsAppFab() {
  return (
    <a className="wa-fab" target="_blank" rel="noopener"
       href="https://wa.me/971585645788?text=Hi%20Symphony%20Clinic%2C%20I'd%20like%20to%20book%20a%20consultation"
       aria-label="WhatsApp Symphony">
      <Icon.WhatsApp s={28} />
      <span className="label">WhatsApp us</span>
    </a>
  );
}

// ───────────── Footer ─────────────
function Footer({ onNavigate }) {
  return (
    <footer className="footer">
      <div className="container">
        <div className="footer-grid">
          <div>
            <div className="footer-logo">
              <span className="nav-logo-mark">S</span>
              <span className="nav-logo-text">Symphony</span>
            </div>
            <p style={{ fontSize: 13.5, lineHeight: 1.6, maxWidth: '24rem', color: 'color-mix(in oklab, var(--blush) 80%, transparent)' }}>
              French-founded aesthetic clinic on the 9th floor of Regal Tower, Business Bay.
              DHA-certified, dermatologist-led, fluent in painless laser.
            </p>
            <div style={{ marginTop: '1.5rem' }}>
              <FreshaBadge />
            </div>
          </div>
          <div>
            <h4>Visit</h4>
            <p>908 Regal Tower<br/>9th Floor, Business Bay<br/>Dubai, UAE</p>
            <p style={{ marginTop: '1rem' }}>Free parking</p>
          </div>
          <div>
            <h4>Talk to us</h4>
            <ul>
              <li><a href="tel:+97142672368">+971 4 267 2368</a></li>
              <li><a href="https://wa.me/971585645788" target="_blank" rel="noopener">WhatsApp +971 58 564 5788</a></li>
              <li><a href="mailto:contact@symphonyclinic.ae">contact@symphonyclinic.ae</a></li>
            </ul>
          </div>
          <div>
            <h4>Explore</h4>
            <ul>
              <li><a href="#treatments" onClick={(e)=>{e.preventDefault();onNavigate('treatments');}}>All Treatments</a></li>
              <li><a href="#laser"      onClick={(e)=>{e.preventDefault();onNavigate('laser');}}>Laser Hair Removal</a></li>
              <li><a href="#team"       onClick={(e)=>{e.preventDefault();onNavigate('team');}}>Our Team</a></li>
              <li><a href="#reviews"    onClick={(e)=>{e.preventDefault();onNavigate('reviews');}}>Reviews</a></li>
              <li><a href="#contact"    onClick={(e)=>{e.preventDefault();onNavigate('contact');}}>Contact</a></li>
            </ul>
          </div>
        </div>
        <div className="footer-bottom">
          <span>© 2026 Symphony Beauty Clinic — DHA-Certified</span>
          <span>Designed in Dubai · Inspired by Paris</span>
        </div>
      </div>
    </footer>
  );
}

// ───────────── Booking form (consultation) ─────────────
function BookingForm({ compact, presetTreatment }) {
  const [form, setForm] = React.useState({
    name: "", phone: "", email: "",
    treatment: presetTreatment || "", date: "", notes: "",
  });
  const [errors, setErrors] = React.useState({});
  const [submitted, setSubmitted] = React.useState(false);

  const validate = () => {
    const e = {};
    if (!form.name.trim()) e.name = "Please enter your name";
    if (!form.phone.match(/^[+0-9 ()-]{7,}$/)) e.phone = "Add a contactable number";
    if (form.email && !form.email.match(/^[^\s@]+@[^\s@]+\.[^\s@]+$/)) e.email = "Check the email format";
    if (!form.treatment) e.treatment = "Pick a treatment area";
    return e;
  };

  const submit = (ev) => {
    ev.preventDefault();
    const e = validate();
    setErrors(e);
    if (Object.keys(e).length === 0) {
      setSubmitted(true);
    }
  };

  if (submitted) {
    return (
      <div className="booking-card">
        <div className="form-success">
          <div className="check"><Icon.Check s={28} /></div>
          <h3 className="display" style={{ fontSize: '1.75rem', marginBottom: '.5rem' }}>
            Thank you, <em>{form.name.split(' ')[0]}</em>
          </h3>
          <p style={{ color: 'var(--ink-soft)', maxWidth: '24rem', margin: '0 auto 1.5rem' }}>
            One of our team will reach out within a few hours to confirm your consultation.
            Prefer right now? <strong>WhatsApp</strong> or call us.
          </p>
          <div style={{ display: 'flex', gap: '.5rem', justifyContent: 'center', flexWrap: 'wrap' }}>
            <a className="btn btn-coral" href="https://wa.me/971585645788" target="_blank" rel="noopener">
              <Icon.WhatsApp s={14} /> WhatsApp now
            </a>
            <a className="btn btn-ghost" href="tel:+97142672368">
              <Icon.Phone s={14} /> Call clinic
            </a>
          </div>
        </div>
      </div>
    );
  }

  const f = (k, v) => setForm({ ...form, [k]: v });

  return (
    <form className="booking-card" onSubmit={submit} noValidate>
      {!compact && (
        <div style={{ marginBottom: '1.5rem' }}>
          <span className="eyebrow"><span className="rule"/>Book a Consultation</span>
          <h3 className="display" style={{ fontSize: '1.75rem', marginTop: '.5rem' }}>
            We'll call you back the same day.
          </h3>
        </div>
      )}

      <div className="field-row">
        <div className="field">
          <label>Full name</label>
          <input value={form.name} onChange={(e)=>f('name', e.target.value)} placeholder="Sarah Mokhtar" />
          {errors.name && <span className="field-error">{errors.name}</span>}
        </div>
        <div className="field">
          <label>Phone</label>
          <input value={form.phone} onChange={(e)=>f('phone', e.target.value)} placeholder="+971 50 …" />
          {errors.phone && <span className="field-error">{errors.phone}</span>}
        </div>
      </div>

      <div className="field">
        <label>Email <span style={{ textTransform: 'lowercase', letterSpacing: 0, color: 'var(--stone-light)' }}>(optional)</span></label>
        <input type="email" value={form.email} onChange={(e)=>f('email', e.target.value)} placeholder="you@example.com" />
        {errors.email && <span className="field-error">{errors.email}</span>}
      </div>

      <div className="field-row">
        <div className="field">
          <label>Treatment</label>
          <select value={form.treatment} onChange={(e)=>f('treatment', e.target.value)}>
            <option value="">Select an area…</option>
            <option>Laser Hair Removal</option>
            <option>Injectables (Botox / Fillers)</option>
            <option>HydraFacial &amp; Skin</option>
            <option>CoolSculpting / Body</option>
            <option>IV &amp; Wellness</option>
            <option>Dermatology</option>
            <option>Not sure yet</option>
          </select>
          {errors.treatment && <span className="field-error">{errors.treatment}</span>}
        </div>
        <div className="field">
          <label>Preferred date</label>
          <input type="date" value={form.date} onChange={(e)=>f('date', e.target.value)} />
        </div>
      </div>

      <div className="field">
        <label>Notes <span style={{ textTransform: 'lowercase', letterSpacing: 0, color: 'var(--stone-light)' }}>(optional)</span></label>
        <textarea rows="3" value={form.notes} onChange={(e)=>f('notes', e.target.value)}
                  placeholder="Tell us a little about your skin or goals." />
      </div>

      <button type="submit" className="btn btn-primary" style={{ width: '100%', justifyContent: 'center' }}>
        Request Consultation <Icon.Arrow s={14} />
      </button>

      <p style={{ fontSize: 11, textAlign: 'center', color: 'var(--stone)', marginTop: '1rem', lineHeight: 1.5 }}>
        We'll never share your details. By submitting you agree to be contacted by Symphony Clinic.
      </p>
    </form>
  );
}

// ───────────── Before/After slider ─────────────
function BeforeAfter({ before, after, label = "Botox · forehead", before_w, after_w }) {
  const ref = React.useRef(null);
  const [pos, setPos] = React.useState(50);
  const dragging = React.useRef(false);

  React.useEffect(() => {
    const move = (e) => {
      if (!dragging.current || !ref.current) return;
      const r = ref.current.getBoundingClientRect();
      const x = (e.touches ? e.touches[0].clientX : e.clientX) - r.left;
      setPos(Math.max(0, Math.min(100, (x / r.width) * 100)));
    };
    const up = () => { dragging.current = false; };
    window.addEventListener('mousemove', move);
    window.addEventListener('touchmove', move);
    window.addEventListener('mouseup', up);
    window.addEventListener('touchend', up);
    return () => {
      window.removeEventListener('mousemove', move);
      window.removeEventListener('touchmove', move);
      window.removeEventListener('mouseup', up);
      window.removeEventListener('touchend', up);
    };
  }, []);

  return (
    <div className="beforeafter"
         ref={ref}
         style={{ '--ba-pos': pos + '%' }}
         onMouseDown={() => { dragging.current = true; }}
         onTouchStart={() => { dragging.current = true; }}>
      <img src={before} alt="" />
      <img src={after} alt="" className="beforeafter-after" />
      <div className="beforeafter-handle" />
      <span className="beforeafter-tag before">Before</span>
      <span className="beforeafter-tag after">After</span>
    </div>
  );
}

// ───────────── Trust strip ─────────────
function TrustStrip() {
  const cells = [
    { icon: <Icon.Star s={22} />,   label: "Fresha",     value: "4.9 ★ · 908" },
    { icon: <Icon.Shield s={22} />, label: "Certified",  value: "DHA-Approved" },
    { icon: <Icon.Laser s={22} />,  label: "Device",     value: "Candela GentleMax Pro" },
    { icon: <Icon.Sparkle s={22} />,label: "Founded",    value: "French Aesthetics" },
    { icon: <Icon.Parking s={22} />,label: "On-site",    value: "Free Parking" },
  ];
  return (
    <section className="trust-strip">
      <div className="container">
        <div className="trust-row">
          {cells.map((c, i) => (
            <div className="trust-cell" key={i}>
              {c.icon}
              <div>
                <div className="label">{c.label}</div>
                <div className="value">{c.value}</div>
              </div>
            </div>
          ))}
        </div>
      </div>
    </section>
  );
}

// ───────────── Reviews carousel ─────────────
function ReviewsCarousel({ reviews }) {
  return (
    <div className="reviews">
      <div className="reviews-track">
        {reviews.map((r, i) => (
          <article className="review-card" key={i}>
            <div className="review-stars">{'★'.repeat(r.stars)}</div>
            <p className="review-quote">"{r.quote}"</p>
            <div className="review-meta">
              <div className="avatar">{r.name[0]}</div>
              <div className="info">
                <div className="name">{r.name}</div>
                <div className="src">{r.src} · {r.date}</div>
              </div>
            </div>
          </article>
        ))}
      </div>
    </div>
  );
}

// ───────────── Breadcrumbs ─────────────
function Crumbs({ trail, onNavigate }) {
  return (
    <div className="crumbs">
      {trail.map((t, i) => (
        <React.Fragment key={i}>
          {i > 0 && <span>/</span>}
          {t.route ? (
            <a href={'#' + t.route} onClick={(e)=>{e.preventDefault(); onNavigate(t.route);}}>{t.label}</a>
          ) : (
            <span style={{ color: 'var(--ink)', margin: 0 }}>{t.label}</span>
          )}
        </React.Fragment>
      ))}
    </div>
  );
}

Object.assign(window, {
  Icon, FreshaBadge, Navbar, WhatsAppFab, Footer,
  BookingForm, BeforeAfter, TrustStrip, ReviewsCarousel, Crumbs,
});
