// LeadForge — multi-step consultation booking flow.

const { useState, useEffect, useMemo } = React;

/* ───────────────────── Data ───────────────────── */

const INDUSTRIES = [
{ id: 'pt', label: 'Personal Trainer', icon: 'dumbbell' },
{ id: 'realestate', label: 'Real Estate', icon: 'home' },
{ id: 'dentist', label: 'Dentist / Clinic', icon: 'tooth' },
{ id: 'barber', label: 'Barbershop', icon: 'scissors' },
{ id: 'salon', label: 'Beauty Salon', icon: 'sparkle' },
{ id: 'restaurant', label: 'Restaurant', icon: 'fork' },
{ id: 'ecom', label: 'E-commerce', icon: 'bag' },
{ id: 'other', label: 'Other', icon: 'dots' }];


const SERVICES = [
{ id: 'website', title: 'Website Design', sub: 'New site or redesign', icon: 'window' },
{ id: 'chatbot', title: 'AI Chatbot', sub: 'Trained on your biz', icon: 'chat' },
{ id: 'whatsapp', title: 'WhatsApp Automation', sub: 'Reply 24/7', icon: 'wa' },
{ id: 'seo', title: 'SEO Optimization', sub: 'Rank locally', icon: 'search' },
{ id: 'booking', title: 'Booking System', sub: 'Calendar + deposits', icon: 'cal' },
{ id: 'maintain', title: 'Hosting & Care', sub: 'Updates + uptime', icon: 'settings' }];


const BUDGETS = [
{ id: 'starter', label: 'R5K', sub: 'Starter range' },
{ id: 'growth', label: 'R10–15K', sub: 'Growth range' },
{ id: 'premium', label: 'R20K+', sub: 'Premium range' }];


const TIMELINES = [
{ id: 'asap', label: 'ASAP', sub: 'Within 2 weeks' },
{ id: 'month', label: 'This month', sub: '2–4 weeks' },
{ id: 'quarter', label: 'This quarter', sub: '1–3 months' }];


const COMPANY_SIZES = [
'1 (just me)', '2–5', '6–20', '21–50', '50+'];


/* ───────────────────── Icons (small) ───────────────────── */

const Icon = ({ name, size = 18 }) => {
  const s = { width: size, height: size, viewBox: '0 0 24 24', fill: 'none', stroke: 'currentColor', strokeWidth: 1.6, strokeLinecap: 'round', strokeLinejoin: 'round' };
  switch (name) {
    case 'dumbbell':return <svg {...s}><path d="M5 12h2M17 12h2M9 8v8M15 8v8M9 12h6" /></svg>;
    case 'home':return <svg {...s}><path d="M3 11 12 4l9 7M5 10v10h14V10" /></svg>;
    case 'tooth':return <svg {...s}><path d="M8 4c-2.5 0-4 2-4 5 0 4 2 11 4 11 1 0 1.5-2 4-2s3 2 4 2c2 0 4-7 4-11 0-3-1.5-5-4-5-1.5 0-2 1-4 1s-2.5-1-4-1Z" /></svg>;
    case 'scissors':return <svg {...s}><circle cx="6" cy="7" r="2.5" /><circle cx="6" cy="17" r="2.5" /><path d="M20 5 8 16M8 8l12 11" /></svg>;
    case 'sparkle':return <svg {...s}><path d="M12 4l1.6 5L19 11l-5.4 1.6L12 18l-1.6-5.4L5 11l5.4-2z" /></svg>;
    case 'fork':return <svg {...s}><path d="M4 4v8a4 4 0 0 0 8 0V4M8 4v16M16 4c0 3 1 5 3 6v10" /></svg>;
    case 'bag':return <svg {...s}><path d="M5 8h14l-1 12H6L5 8Z" /><path d="M9 8V6a3 3 0 1 1 6 0v2" /></svg>;
    case 'dots':return <svg {...s}><circle cx="6" cy="12" r="1.4" fill="currentColor" /><circle cx="12" cy="12" r="1.4" fill="currentColor" /><circle cx="18" cy="12" r="1.4" fill="currentColor" /></svg>;
    case 'window':return <svg {...s}><rect x="3" y="4" width="18" height="14" rx="2" /><path d="M3 8h18" /></svg>;
    case 'chat':return <svg {...s}><path d="M5 5h14v10H8l-3 3Z" /></svg>;
    case 'wa':return <svg {...s}><path d="M4 12a8 8 0 1 1 3.5 6.6L4 20l1.4-3.5A8 8 0 0 1 4 12Z" /></svg>;
    case 'search':return <svg {...s}><circle cx="11" cy="11" r="6" /><path d="M20 20 16 16" /></svg>;
    case 'cal':return <svg {...s}><rect x="4" y="5" width="16" height="15" rx="2" /><path d="M4 10h16M9 3v4M15 3v4" /></svg>;
    case 'settings':return <svg {...s}><circle cx="12" cy="12" r="3" /><path d="M12 3v3M12 18v3M3 12h3M18 12h3M5.6 5.6l2.1 2.1M16.3 16.3l2.1 2.1M5.6 18.4l2.1-2.1M16.3 7.7l2.1-2.1" /></svg>;
    case 'check':return <svg {...s} strokeWidth="2"><path d="M5 12l4 4 10-10" /></svg>;
    case 'shield':return <svg {...s}><path d="M12 3 4 6v6c0 4.5 3 8 8 9 5-1 8-4.5 8-9V6l-8-3Z" /></svg>;
    case 'clock':return <svg {...s}><circle cx="12" cy="12" r="8" /><path d="M12 8v4l3 2" /></svg>;
    case 'lock':return <svg {...s}><rect x="5" y="11" width="14" height="9" rx="2" /><path d="M8 11V8a4 4 0 1 1 8 0v3" /></svg>;
    case 'arrowR':return <svg {...s}><path d="M5 12h14M13 6l6 6-6 6" /></svg>;
    case 'arrowL':return <svg {...s}><path d="M19 12H5M11 6l-6 6 6 6" /></svg>;
    case 'chevL':return <svg {...s}><path d="M14 6l-6 6 6 6" /></svg>;
    case 'chevR':return <svg {...s}><path d="M10 6l6 6-6 6" /></svg>;
    default:return null;
  }
};

/* ───────────────────── Validators ───────────────────── */

const validators = {
  about: (d) => {
    const errs = {};
    if (!d.fullName?.trim()) errs.fullName = 'Please enter your name.';
    if (!d.email?.trim()) errs.email = 'We need an email to reach you.';else
    if (!/^[^\s@]+@[^\s@]+\.[^\s@]+$/.test(d.email)) errs.email = 'That doesn\'t look like a valid email.';
    if (!d.phone?.trim()) errs.phone = 'Please add a phone number.';else
    if (d.phone.replace(/\D/g, '').length < 7) errs.phone = 'Phone number looks too short.';
    return errs;
  },
  business: (d) => {
    const errs = {};
    if (!d.businessName?.trim()) errs.businessName = 'What\'s your business called?';
    if (!d.industry) errs.industry = 'Pick the closest industry.';
    if (!d.companySize) errs.companySize = 'Pick a size.';
    return errs;
  },
  goals: (d) => {return {};},
  date: (d) => {
    const errs = {};
    if (!d.date) errs.date = 'Pick a date.';
    if (!d.time) errs.time = 'Pick a time slot.';
    return errs;
  },
  review: (d) => {
    const errs = {};
    if (!d.consent) errs.consent = 'Please agree to continue.';
    return errs;
  }
};

/* ───────────────────── Step components ───────────────────── */

function StepAbout({ data, set, errs }) {
  return (
    <>
      <div className="field-row">
        <div className="field">
          <label className="field-label" htmlFor="fullName">Full name</label>
          <input id="fullName" className={"input" + (errs.fullName ? ' invalid' : '')}
          value={data.fullName} onChange={(e) => set('fullName', e.target.value)}
          placeholder="Sarah Mokoena" autoComplete="name" />
          {errs.fullName && <span className="err">{errs.fullName}</span>}
        </div>
        <div className="field">
          <label className="field-label" htmlFor="email">Email</label>
          <input id="email" className={"input" + (errs.email ? ' invalid' : '')}
          type="email" value={data.email} onChange={(e) => set('email', e.target.value)}
          placeholder="you@business.co.za" autoComplete="email" />
          {errs.email && <span className="err">{errs.email}</span>}
        </div>
      </div>
      <div className="field-row">
        <div className="field">
          <label className="field-label" htmlFor="phone">Phone <span className="opt">we'll text you the confirmation</span></label>
          <div className={"input-with-prefix" + (errs.phone ? ' invalid' : '')}>
            <span className="prefix">+27</span>
            <input id="phone" className="input" type="tel"
            value={data.phone} onChange={(e) => set('phone', e.target.value)}
            placeholder="71 000 0000" autoComplete="tel" />
          </div>
          {errs.phone && <span className="err">{errs.phone}</span>}
        </div>
        <div className="field">
          <label className="field-label" htmlFor="role">Your role <span className="opt">optional</span></label>
          <input id="role" className="input"
          value={data.role} onChange={(e) => set('role', e.target.value)}
          placeholder="Owner, Manager, Marketing…" />
        </div>
      </div>
      <p className="field-hint">We'll only use this to reach out about your consultation. No marketing emails.</p>
    </>);

}

function StepBusiness({ data, set, errs }) {
  return (
    <>
      <div className="field-row">
        <div className="field">
          <label className="field-label" htmlFor="biz">Business name</label>
          <input id="biz" className={"input" + (errs.businessName ? ' invalid' : '')}
          value={data.businessName} onChange={(e) => set('businessName', e.target.value)}
          placeholder="e.g. Elite Cuts Barber Co." />
          {errs.businessName && <span className="err">{errs.businessName}</span>}
        </div>
        <div className="field">
          <label className="field-label" htmlFor="website">Current website <span className="opt">if any</span></label>
          <input id="website" className="input"
          value={data.website} onChange={(e) => set('website', e.target.value)}
          placeholder="https://" />
        </div>
      </div>
      <div className="field">
        <label className="field-label">Industry {errs.industry && <span className="err" style={{ margin: 0 }}>{errs.industry}</span>}</label>
        <div className="choice-grid choice-grid-4">
          {INDUSTRIES.map((i) =>
          <label key={i.id} className={"choice" + (data.industry === i.id ? ' selected' : '')}>
              <input type="radio" name="industry" checked={data.industry === i.id}
            onChange={() => set('industry', i.id)} />
              <span className="choice-icon"><Icon name={i.icon} size={16} /></span>
              <span className="choice-title">{i.label}</span>
              <span className="choice-check"><Icon name="check" size={11} /></span>
            </label>
          )}
        </div>
      </div>
      <div className="field">
        <label className="field-label" htmlFor="size">Company size</label>
        <select id="size" className={"select" + (errs.companySize ? ' invalid' : '')}
        value={data.companySize} onChange={(e) => set('companySize', e.target.value)}>
          <option value="">Choose…</option>
          {COMPANY_SIZES.map((s) => <option key={s} value={s}>{s} {s === '1 (just me)' ? '' : 'employees'}</option>)}
        </select>
        {errs.companySize && <span className="err">{errs.companySize}</span>}
      </div>
    </>);

}

function StepGoals({ data, set, toggle, errs }) {
  return (
    <>
      <div className="field">
        <label className="field-label" htmlFor="goals">Tell us about your goals <span className="opt"></span></label>
        <textarea id="goals" className="textarea" rows="6"
        value={data.goals} onChange={(e) => set('goals', e.target.value)}
        placeholder="What does success look like in 90 days? (e.g. 30 new bookings per month, 50% fewer no-shows…)"></textarea>
      </div>
    </>);

}

/* Calendar utilities */
const MONTHS = ['January', 'February', 'March', 'April', 'May', 'June', 'July', 'August', 'September', 'October', 'November', 'December'];
const DOW = ['Sun', 'Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat'];
const TIME_SLOTS = ['09:00', '09:30', '10:00', '10:30', '11:00', '13:00', '13:30', '14:00', '14:30', '15:00', '15:30', '16:00'];
// Deterministically "book out" some slots to feel real.
function isSlotBooked(date, time) {
  if (!date) return false;
  const seed = (date.getDate() * 31 + date.getMonth() * 7 + parseInt(time.split(':')[0]) * 11 + parseInt(time.split(':')[1])) % 7;
  return seed === 0;
}
function isPast(d) {
  const t = new Date();t.setHours(0, 0, 0, 0);
  return d < t;
}
function isWeekend(d) {return d.getDay() === 0 || d.getDay() === 6;}
function fmtDate(d) {
  if (!d) return '';
  return d.toLocaleDateString('en-GB', { weekday: 'long', day: 'numeric', month: 'long', year: 'numeric' });
}

function StepDate({ data, set, errs }) {
  const today = useMemo(() => {const t = new Date();t.setHours(0, 0, 0, 0);return t;}, []);
  const initialMonth = data.date ? new Date(data.date.getFullYear(), data.date.getMonth(), 1) : new Date(today.getFullYear(), today.getMonth(), 1);
  const [view, setView] = useState(initialMonth);

  const days = useMemo(() => {
    const year = view.getFullYear(),month = view.getMonth();
    const first = new Date(year, month, 1);
    const startOffset = first.getDay();
    const daysInMonth = new Date(year, month + 1, 0).getDate();
    const cells = [];
    for (let i = 0; i < startOffset; i++) cells.push(null);
    for (let d = 1; d <= daysInMonth; d++) cells.push(new Date(year, month, d));
    while (cells.length % 7 !== 0) cells.push(null);
    return cells;
  }, [view]);

  const canGoBack = view.getFullYear() > today.getFullYear() || view.getFullYear() === today.getFullYear() && view.getMonth() > today.getMonth();
  const maxView = new Date(today.getFullYear(), today.getMonth() + 3, 1);
  const canGoFwd = view < maxView;

  function pick(d) {
    if (!d || isPast(d) || isWeekend(d)) return;
    set('date', d);
    set('time', '');
  }

  const selectedDate = data.date;
  const slotsForDay = selectedDate ? TIME_SLOTS : [];

  return (
    <>
      <div className="cal-wrap">
        <div className="cal">
          <div className="cal-head">
            <span className="cal-title">{MONTHS[view.getMonth()]} {view.getFullYear()}</span>
            <div className="cal-nav">
              <button type="button" disabled={!canGoBack} onClick={() => setView(new Date(view.getFullYear(), view.getMonth() - 1, 1))} aria-label="Previous month"><Icon name="chevL" size={14} /></button>
              <button type="button" disabled={!canGoFwd} onClick={() => setView(new Date(view.getFullYear(), view.getMonth() + 1, 1))} aria-label="Next month"><Icon name="chevR" size={14} /></button>
            </div>
          </div>
          <div className="cal-dow">{DOW.map((d) => <span key={d}>{d}</span>)}</div>
          <div className="cal-grid">
            {days.map((d, i) => {
              if (!d) return <span key={i} className="cal-day is-empty" />;
              const disabled = isPast(d) || isWeekend(d);
              const isToday = d.getTime() === today.getTime();
              const isSelected = selectedDate && d.getTime() === selectedDate.getTime();
              return (
                <button key={i} type="button"
                className={"cal-day" + (isToday ? ' is-today' : '') + (isSelected ? ' is-selected' : '')}
                disabled={disabled}
                onClick={() => pick(d)}>
                  {d.getDate()}
                </button>);

            })}
          </div>
          {errs.date && <span className="err" style={{ marginTop: 8 }}>{errs.date}</span>}
        </div>
        <div className="slots">
          <div className="slots-head">
            <strong>{selectedDate ? fmtDate(selectedDate).split(',')[0] : 'Pick a date'}</strong>
            <span>30-min slots</span>
          </div>
          {selectedDate ?
          <div className="slots-list">
              {slotsForDay.map((t) => {
              const booked = isSlotBooked(selectedDate, t);
              const sel = data.time === t;
              return (
                <label key={t} className={"slot" + (sel ? ' selected' : '') + (booked ? ' is-disabled' : '')}>
                    <input type="radio" name="slot" checked={sel} onChange={() => !booked && set('time', t)} />
                    {t}
                  </label>);

            })}
            </div> :

          <div className="slot-empty">Select a weekday to see available times.</div>
          }
          {errs.time && <span className="err" style={{ marginTop: 4 }}>{errs.time}</span>}
          <span className="tz-note">Times shown in <strong>SAST</strong> (UTC+2). We'll send a calendar invite.</span>
        </div>
      </div>
    </>);

}

function StepReview({ data, set, goTo, errs }) {
  const industry = INDUSTRIES.find((i) => i.id === data.industry);
  const budget = BUDGETS.find((b) => b.id === data.budget);
  const timeline = TIMELINES.find((t) => t.id === data.timeline);
  const serviceLabels = (data.services || []).map((id) => SERVICES.find((s) => s.id === id)?.title).filter(Boolean);

  const items = [
  { label: 'Name', value: data.fullName, step: 0 },
  { label: 'Email', value: data.email, step: 0 },
  { label: 'Phone', value: data.phone ? '+27 ' + data.phone : '', step: 0 },
  { label: 'Business', value: data.businessName, step: 1 },
  { label: 'Industry', value: industry?.label, step: 1 },
  { label: 'Team', value: data.companySize, step: 1 },
  { label: 'Goals', value: data.goals, step: 2 },
  { label: 'Date', value: fmtDate(data.date), step: 3 },
  { label: 'Time', value: data.time ? data.time + ' SAST' : '', step: 3 }];


  return (
    <>
      <div className="review-grid">
        {items.map((it, i) =>
        <div key={i} className="review-item">
            <span className="review-label">{it.label}</span>
            <span className={"review-value" + (!it.value ? ' is-empty' : '')}>{it.value || '— not set —'}</span>
            <button type="button" className="review-edit" onClick={() => goTo(it.step)}>Edit</button>
          </div>
        )}
      </div>
      <div className="field">
        <label className="field-label" htmlFor="notes">Anything else we should know? <span className="opt">optional</span></label>
        <textarea id="notes" className="textarea" rows="3"
        value={data.notes} onChange={(e) => set('notes', e.target.value)}
        placeholder="Existing tools, brand guidelines, anything you want us to look at before the call."></textarea>
      </div>
      <label className="consent">
        <input type="checkbox" checked={!!data.consent} onChange={(e) => set('consent', e.target.checked)} />
        <span>
          I agree to be contacted about my consultation. LeadForge will only use my details for this purpose. See our <a href="#">privacy policy</a>.
        </span>
      </label>
      {errs.consent && <span className="err">{errs.consent}</span>}
    </>);

}

function Success({ data, reset }) {
  const industry = INDUSTRIES.find((i) => i.id === data.industry);
  return (
    <div className="success">
      <span className="success-icon"><Icon name="check" size={36} /></span>
      <h2>You're booked, {data.fullName.split(' ')[0]}.</h2>
      <p className="sub">A confirmation is on its way to <strong>{data.email}</strong>. We'll review your details and come prepared with ideas specific to {data.businessName || 'your business'}.</p>

      <div className="success-summary">
        <div className="row"><span className="label">When</span><span className="value">{fmtDate(data.date)}, {data.time} SAST</span></div>
        <div className="row"><span className="label">Where</span><span className="value">Google Meet (link in your inbox)</span></div>
        <div className="row"><span className="label">For</span><span className="value">{data.businessName}{industry ? ', ' + industry.label : ''}</span></div>
      </div>

      <ul className="success-next">
        <h4>What happens next</h4>
        <li><span className="num">1</span><div><strong>Confirmation in your inbox</strong><small>Includes a calendar invite and a short prep questionnaire.</small></div></li>
        <li><span className="num">2</span><div><strong>30-minute call</strong><small>We'll dig into your goals and map out the system.</small></div></li>
        <li><span className="num">3</span><div><strong>Proposal within 48 hours</strong><small>Fixed pricing, fixed timeline. No surprises.</small></div></li>
      </ul>

      <div className="success-actions">
        <a href="index.html" className="btn btn-primary">Back to site <Icon name="arrowR" size={14} /></a>
        <button type="button" className="btn btn-ghost" onClick={reset}>Book another</button>
      </div>
    </div>);

}

/* ───────────────────── Main app ───────────────────── */

const STEPS = [
{ id: 'about', name: 'About you', sub: 'Step 1', title: 'Let\'s start with the basics', subtitle: 'Just a few details so we can reach you.' },
{ id: 'business', name: 'Your business', sub: 'Step 2', title: 'Tell us about your business', subtitle: 'The more we know, the more useful our call will be.' },
{ id: 'goals', name: 'Goals & scope', sub: 'Step 3', title: 'Tell us about your goals', subtitle: "Tell us about your business, your goals, and what you'd like us to help you build\u2026" },
{ id: 'date', name: 'Pick a time', sub: 'Step 4', title: 'Choose a date & time', subtitle: 'Free 30-minute consultation. Weekdays only.' },
{ id: 'review', name: 'Review', sub: 'Step 5', title: 'Looks good?', subtitle: 'Take a quick look. You can edit anything before confirming.' }];


function BookingApp() {
  const [step, setStep] = useState(0);
  const [done, setDone] = useState(false);
  const [submitting, setSubmitting] = useState(false);
  const [errs, setErrs] = useState({});
  const [data, setData] = useState({
    fullName: '', email: '', phone: '', role: '',
    businessName: '', website: '', industry: '', companySize: '',
    services: [], budget: '', timeline: '', goals: '',
    date: null, time: '',
    notes: '', consent: false
  });

  const set = (k, v) => setData((d) => ({ ...d, [k]: v }));
  const toggle = (k, v) => setData((d) => {
    const arr = new Set(d[k] || []);
    if (arr.has(v)) arr.delete(v);else arr.add(v);
    return { ...d, [k]: Array.from(arr) };
  });

  const validate = () => {
    const stepId = STEPS[step].id;
    const e = validators[stepId] ? validators[stepId](data) : {};
    setErrs(e);
    return Object.keys(e).length === 0;
  };

  const next = () => {
    if (!validate()) return;
    if (step < STEPS.length - 1) setStep((s) => s + 1);else
    submit();
    window.scrollTo({ top: 0, behavior: 'smooth' });
  };
  const prev = () => {setErrs({});setStep((s) => Math.max(0, s - 1));window.scrollTo({ top: 0, behavior: 'smooth' });};
  const goTo = (i) => {setErrs({});setStep(i);};

  function submit() {
    setSubmitting(true);

    const payload = {
      to: 'supportleadforge@gmail.com',
      name: data.fullName,
      email: data.email,
      phone: data.phone,
      role: data.role,
      businessName: data.businessName,
      website: data.website,
      industry: data.industry,
      companySize: data.companySize,
      goals: data.goals,
      date: data.date ? data.date.toDateString() : '',
      time: data.time,
      notes: data.notes,
    };

    fetch('/api/submit-booking', {
      method: 'POST',
      headers: { 'Content-Type': 'application/json' },
      body: JSON.stringify(payload),
    })
      .catch(() => {/* fail silently — booking still shown as confirmed */})
      .finally(() => {
        setSubmitting(false);
        setDone(true);
        window.scrollTo({ top: 0, behavior: 'smooth' });
      });
  }

  function reset() {
    setStep(0);setDone(false);setErrs({});
    setData({ fullName: '', email: '', phone: '', role: '',
      businessName: '', website: '', industry: '', companySize: '',
      services: [], budget: '', timeline: '', goals: '',
      date: null, time: '', notes: '', consent: false });
    window.scrollTo({ top: 0, behavior: 'smooth' });
  }

  // re-validate live once user has tried submitting a step
  useEffect(() => {
    if (Object.keys(errs).length) {
      const stepId = STEPS[step].id;
      const e = validators[stepId] ? validators[stepId](data) : {};
      setErrs(e);
    }
    // eslint-disable-next-line
  }, [data]);

  const progressPct = done ? 100 : Math.round(step / STEPS.length * 100);
  const currentStep = STEPS[step];

  return (
    <div className="book-wrap">
      <aside className="book-rail">
        <div className="book-rail-head">
          <span className="kicker">Free consultation</span>
          <h1>Book a 30-minute call.</h1>
          <p>Tell us a little about your business and pick a time. We'll come prepared with ideas.</p>
        </div>
        <ol className="steps">
          {STEPS.map((s, i) => {
            const status = done ? 'is-done' : i < step ? 'is-done' : i === step ? 'is-current' : '';
            return (
              <li key={s.id} className={"step-row " + status} onClick={() => (i < step || done) && goTo(i)} style={{ cursor: i < step || done ? 'pointer' : 'default' }}>
                <span className="step-bubble">
                  <span>{i + 1}</span>
                  <Icon name="check" size={12} />
                </span>
                <span className="step-name">{s.name}</span>
                <span className="step-sub">{s.sub}</span>
              </li>);

          })}
        </ol>
        <ul className="rail-reassurance">
          <li><Icon name="clock" size={14} /><span>30 minutes, video or phone. Your choice.</span></li>
          <li><Icon name="shield" size={14} /><span>No obligation, no high-pressure sales.</span></li>
          <li><Icon name="lock" size={14} /><span>Your details stay private. We never share them.</span></li>
        </ul>
      </aside>

      <section className="book-panel" key={done ? 'done' : step}>
        {!done &&
        <>
            <div className="panel-progress">
              <span>Step {step + 1} of {STEPS.length}</span>
              <span>{progressPct}% complete</span>
            </div>
            <div className="panel-progress-bar"><div className="fill" style={{ width: progressPct + '%' }} /></div>

            <h2 className="panel-h">{currentStep.title}</h2>
            <p className="panel-sub">{currentStep.subtitle}</p>

            <div className="panel-body">
              {step === 0 && <StepAbout data={data} set={set} errs={errs} />}
              {step === 1 && <StepBusiness data={data} set={set} errs={errs} />}
              {step === 2 && <StepGoals data={data} set={set} toggle={toggle} errs={errs} />}
              {step === 3 && <StepDate data={data} set={set} errs={errs} />}
              {step === 4 && <StepReview data={data} set={set} goTo={goTo} errs={errs} />}
            </div>

            <div className="panel-foot">
              <span className="step-meta">{currentStep.sub} of 5</span>
              <div className="panel-foot-actions">
                {step > 0 &&
              <button type="button" className="btn btn-ghost" onClick={prev}>
                    <Icon name="arrowL" size={14} /> Back
                  </button>
              }
                <button type="button" className="btn btn-primary" onClick={next} disabled={submitting}>
                  {submitting ? 'Booking…' : step === STEPS.length - 1 ? 'Confirm booking' : 'Continue'}
                  {!submitting && <Icon name="arrowR" size={14} />}
                </button>
              </div>
            </div>
          </>
        }
        {done && <Success data={data} reset={reset} />}
      </section>
    </div>);

}

ReactDOM.createRoot(document.getElementById('book-app')).render(<BookingApp />);