Notes (optional)

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,
});

Thank you, {form.name.split(' ')[0]}

We'll call you back the same day.