// Booking flow — generic request form for BigRiverCamp activities
const { useState, useEffect, useMemo } = React;

// ── i18n helpers ─────────────────────────────────
function useLang() {
  const [lang, setLang] = useState(() => {
    try { return localStorage.getItem('brc-lang') || 'sv'; } catch { return 'sv'; }
  });
  useEffect(() => {
    const onStorage = () => {
      try { setLang(localStorage.getItem('brc-lang') || 'sv'); } catch {}
    };
    const obs = new MutationObserver(() => {
      const cur = document.documentElement.lang || 'sv';
      setLang(cur);
    });
    obs.observe(document.documentElement, { attributes: true, attributeFilter: ['lang'] });
    window.addEventListener('storage', onStorage);
    return () => { obs.disconnect(); window.removeEventListener('storage', onStorage); };
  }, []);
  return lang;
}
const T = (lang, sv, en) => (lang === 'en' ? en : sv);

// ── catalog ───────────────────────────────────────
// Every bookable activity on the site. `durations` are the lengths that
// activity is actually offered in (matches each activity page's own copy).
const ACTIVITIES = {
  fjallvandring: { sv: 'Fjällvandring', en: 'Mountain hiking', icon: '🥾', durations: [{ key: 'halvdag', sv: 'Halvdag', en: 'Half day' }, { key: 'heldag', sv: 'Heldag', en: 'Full day' }] },
  kajak:         { sv: 'Kajak', en: 'Kayak', icon: '🛶', durations: [{ key: 'timme', sv: '1 timme', en: '1 hour' }, { key: 'halvdag', sv: 'Halvdag', en: 'Half day' }, { key: 'heldag', sv: 'Heldag', en: 'Full day' }] },
  fyrhjuling:    { sv: 'Fyrhjuling', en: 'Quad bike', icon: '🏁', durations: [{ key: 'halvdag', sv: 'Halvdag', en: 'Half day' }, { key: 'heldag', sv: 'Heldag', en: 'Full day' }] },
  fiske:         { sv: 'Fiske', en: 'Fishing', icon: '🎣', durations: [{ key: 'halvdag', sv: 'Halvdag', en: 'Half day' }, { key: 'heldag', sv: 'Heldag', en: 'Full day' }] },
  segway:        { sv: 'Terräng-segway', en: 'Off-road segway', icon: '🛴', durations: [{ key: '60min', sv: '60 min', en: '60 min' }, { key: 'halvdag', sv: 'Halvdag', en: 'Half day' }] },
  freeride:      { sv: 'Freeride', en: 'Freeride', icon: '🏂', durations: [{ key: 'halvdag', sv: 'Halvdag', en: 'Half day' }, { key: 'heldag', sv: 'Heldag', en: 'Full day' }] },
  skoterturer:   { sv: 'Guidade skoterturer', en: 'Guided snowmobile tours', icon: '🛷', durations: [{ key: 'halvdag', sv: 'Halvdag', en: 'Half day' }, { key: 'heldag', sv: 'Heldag', en: 'Full day' }] },
  isdrifting:    { sv: 'Isdrifting', en: 'Ice drifting', icon: '🧊', durations: [{ key: '90min', sv: '90 min', en: '90 min' }, { key: 'halvdag', sv: 'Halvdag', en: 'Half day' }] },
  hundspann:     { sv: 'Hundspann', en: 'Dog sledding', icon: '🐕', durations: [{ key: 'halvdag', sv: 'Halvdag', en: 'Half day' }, { key: 'heldag', sv: 'Heldag', en: 'Full day' }] },
  bushcraft:     { sv: 'Bushcraft', en: 'Bushcraft', icon: '🔥', durations: [{ key: 'halvdag', sv: 'Halvdag', en: 'Half day' }, { key: 'heldag', sv: 'Heldag', en: 'Full day' }] },
  jakt:          { sv: 'Jakt', en: 'Hunting', icon: '🦌', durations: [{ key: 'forfragan', sv: 'På förfrågan', en: 'On request' }] },
  whisky:        { sv: 'Whiskyprovning', en: 'Whisky tasting', icon: '🥃', durations: [{ key: 'kvall', sv: 'Kväll', en: 'Evening' }] }
};
const LODGING = {
  none:  { sv: 'Nej, bara aktiviteten', en: 'No, just the activity' },
  rum:   { sv: 'Ja, rum på hotellet', en: 'Yes, a hotel room' },
  stuga: { sv: 'Ja, en stuga', en: 'Yes, a cabin' }
};
// Multi-night packages (see paket.html) — lodging, meals and spa already
// bundled in, so the flow skips duration/lodging steps for these.
const PACKAGES = {
  'fjallro-aventyr': { sv: 'Fjällro & Äventyr', en: 'Fjällro & Äventyr', icon: '🏔', nights: [2],
    subOptions: [
      { key: 'kajak', sv: 'Kajak på Lakavattnet', en: 'Kayak on Lakavattnet' },
      { key: 'vandring', sv: 'Guidad vandring på Stakafjället', en: 'Guided hike up Stakafjället' },
      { key: 'fyrhjuling', sv: 'Heldag på fyrhjuling', en: 'Full day on quad bike' }
    ] },
  'bushcraft':       { sv: 'Vildmark & Bushcraft', en: 'Vildmark & Bushcraft', icon: '🔥', nights: [3] },
  'norrsken':        { sv: 'Norrskensupplevelser', en: 'Northern lights experiences', icon: '✨', nights: [2, 3],
    subOptions: [
      { key: 'arctic-lights', sv: 'Arctic Lights (skoter)', en: 'Arctic Lights (snowmobile)' },
      { key: 'arctic-footsteps', sv: 'Arctic Footsteps (snöskor)', en: 'Arctic Footsteps (snowshoes)' },
      { key: 'lights-dinner', sv: 'Lights & Lapland Dinner', en: 'Lights & Lapland Dinner' }
    ] },
  'skogen-bordet':   { sv: 'Från Skogen till Bordet', en: 'From Forest to Table', icon: '🍄', nights: [1] },
  'jakt':            { sv: 'Jakt & Vila', en: 'Hunting & Rest', icon: '🦌', nights: [2, 3] },
  'bara-vi-tva':     { sv: 'Bara Vi Två', en: 'Just the Two of Us', icon: '🕯', nights: [2],
    subOptions: [
      { key: 'kajak', sv: 'Kajak', en: 'Kayak' },
      { key: 'vandring', sv: 'Vandring', en: 'Hiking' },
      { key: 'fyrhjuling', sv: 'Fyrhjuling', en: 'Quad bike' }
    ] }
};
const STEPS_ACTIVITY = [
  { id: 'val',       sv: 'Aktivitet', en: 'Activity' },
  { id: 'datum',     sv: 'Datum & längd', en: 'Dates & length' },
  { id: 'boende',    sv: 'Boende', en: 'Lodging' },
  { id: 'kontakt',   sv: 'Kontakt', en: 'Contact' }
];
const STEPS_PACKAGE = [
  { id: 'val',       sv: 'Paket', en: 'Package' },
  { id: 'datum',     sv: 'Datum', en: 'Dates' },
  { id: 'kontakt',   sv: 'Kontakt', en: 'Contact' }
];

// ── helpers ───────────────────────────────────────
function formatDate(iso, lang) {
  if (!iso) return '—';
  const d = new Date(iso);
  if (isNaN(d)) return iso;
  return d.toLocaleDateString(lang === 'en' ? 'en-GB' : 'sv-SE', { day: 'numeric', month: 'short', year: 'numeric' });
}
function todayISO(offsetDays = 0) {
  const d = new Date();
  d.setDate(d.getDate() + offsetDays);
  return d.toISOString().slice(0, 10);
}
function getQueryParam(name) {
  return new URLSearchParams(location.search).get(name);
}

// ── root ──────────────────────────────────────────
function Booking() {
  const lang = useLang();
  const [step, setStep] = useState(0);
  const [submitted, setSubmitted] = useState(false);

  const qActivity = getQueryParam('activity');
  const qPackage = getQueryParam('package');
  const initialActivity = qActivity && ACTIVITIES[qActivity] ? qActivity : '';
  const initialPackage = qPackage && PACKAGES[qPackage] ? qPackage : '';
  const initialType = initialPackage ? 'paket' : 'aktivitet';

  const [bookingType, setBookingType] = useState(initialType);
  const [data, setData] = useState(() => {
    const act = initialActivity ? ACTIVITIES[initialActivity] : null;
    const pkg = initialPackage ? PACKAGES[initialPackage] : null;
    return {
      activity: initialActivity,
      package: initialPackage,
      pkgOption: pkg && pkg.subOptions ? pkg.subOptions[0].key : '',
      date: todayISO(14),
      duration: act ? act.durations[0].key : '',
      nights: pkg ? pkg.nights[0] : '',
      guests: 2,
      lodging: 'none',
      name: '', email: '', phone: '', notes: ''
    };
  });
  const setField = (k, v) => setData((d) => ({ ...d, [k]: v }));
  const setActivity = (key) => {
    const act = ACTIVITIES[key];
    setData((d) => ({ ...d, activity: key, duration: act.durations[0].key }));
  };
  const setPackage = (key) => {
    const pkg = PACKAGES[key];
    setData((d) => ({ ...d, package: key, nights: pkg.nights[0], pkgOption: pkg.subOptions ? pkg.subOptions[0].key : '' }));
  };
  const switchType = (type) => {
    setBookingType(type);
    setStep(0);
  };

  const STEPS = bookingType === 'paket' ? STEPS_PACKAGE : STEPS_ACTIVITY;

  const errors = useMemo(() => {
    const e = {};
    if (step === 0) {
      if (bookingType === 'aktivitet' && !data.activity) e.activity = T(lang, 'Välj en aktivitet', 'Choose an activity');
      if (bookingType === 'paket' && !data.package) e.package = T(lang, 'Välj ett paket', 'Choose a package');
      const pkgSel = bookingType === 'paket' && data.package ? PACKAGES[data.package] : null;
      if (pkgSel && pkgSel.subOptions && !data.pkgOption) e.pkgOption = T(lang, 'Välj en variant', 'Choose a variant');
    }
    if (step === 1) {
      if (!data.date) e.date = T(lang, 'Välj ett datum', 'Choose a date');
      else if (data.date < todayISO(0)) e.date = T(lang, 'Datumet har redan passerat', 'That date has already passed');
      if (bookingType === 'aktivitet' && !data.duration) e.duration = T(lang, 'Välj längd', 'Choose a duration');
    }
    if (step === STEPS.length - 1) {
      if (!data.name.trim()) e.name = T(lang, 'Vi behöver ett namn', 'We need a name');
      if (!data.email.trim() || !/^\S+@\S+\.\S+$/.test(data.email)) e.email = T(lang, 'Ge oss en giltig e-post', 'Give us a valid email');
      if (!data.phone.trim()) e.phone = T(lang, 'Vi behöver ett telefonnummer', 'We need a phone number');
    }
    return e;
  }, [step, data, lang, bookingType, STEPS.length]);

  const canNext = Object.keys(errors).length === 0;

  const goNext = async () => {
    if (!canNext) return;
    if (step < STEPS.length - 1) {
	setStep(step + 1);
	return;
    }

    try {
      const payload = {
        bookingType,
        date: data.date,
        arrival: data.date, // Kompatibilitet med gamla fältnamn
        guests: data.guests,
        name: data.name.trim(),
        email: data.email.trim(),
        phone: data.phone.trim(),
        notes: data.notes.trim(),
        lang,
        // Aktivitetsspecifikt
        activity: bookingType === 'aktivitet' ? data.activity : null,
        duration: bookingType === 'aktivitet' ? data.duration : null,
        lodging: bookingType === 'aktivitet' ? data.lodging : null,
        room: bookingType === 'aktivitet' ? data.lodging : null, // Kompatibilitet
        // Paketspecifikt
        package: bookingType === 'paket' ? data.package : null,
        pkg: bookingType === 'paket' ? data.package : null, // Kompatibilitet
        pkgOption: bookingType === 'paket' ? data.pkgOption : null,
        nights: bookingType === 'paket' ? data.nights : null
      };

      const res = await fetch('https://media.vikingabacken.se/mediaapi/api/Brc/Booking', {
        method: 'POST',
        headers: { 'Content-Type': 'application/json' },
        body: JSON.stringify(payload)
      });

      if (!res.ok) {
        throw new Error(`Servern svarade med status ${res.status}`);
      }

      setSubmitted(true);
      window.scrollTo({ top: 0, behavior: 'smooth' });
    } catch (err) {
      console.error('Kunde inte skicka förfrågan:', err);
    }

    setSubmitted(true); 
    window.scrollTo({ top: 0, behavior: 'smooth' }); 
  };

  const goBack = () => step > 0 && setStep(step - 1);

  if (submitted) return <Confirmation lang={lang} data={data} bookingType={bookingType} />;

  return (
    <div className="booking-shell">
      <div className="booking-card">
        <div className="type-toggle">
          <button type="button" className={bookingType === 'aktivitet' ? 'is-active' : ''} onClick={() => switchType('aktivitet')}>
            {T(lang, 'En aktivitet', 'A single activity')}
            <span className="sub">{T(lang, 'Dagstur, ingen övernattning krav', 'Day trip, no lodging required')}</span>
          </button>
          <button type="button" className={bookingType === 'paket' ? 'is-active' : ''} onClick={() => switchType('paket')}>
            {T(lang, 'Ett paket', 'A package')}
            <span className="sub">{T(lang, 'Flera nätter, boende & mat ingår', 'Multiple nights, lodging & meals included')}</span>
          </button>
        </div>
        <div className="stepper">
          {STEPS.map((s, i) => (
            <button
              key={s.id}
              className={'step-pip' + (i === step ? ' is-active' : '') + (i < step ? ' is-done' : '')}
              onClick={() => i < step && setStep(i)}
              disabled={i > step}
            >
              <span className="num">{i < step ? '✓' : i + 1}</span>
              <span className="label">{T(lang, s.sv, s.en)}</span>
            </button>
          ))}
        </div>

        <div className="step-body">
          {step === 0 && bookingType === 'aktivitet' && <StepActivity lang={lang} data={data} setActivity={setActivity} errors={errors} />}
          {step === 0 && bookingType === 'paket' && <StepPackage lang={lang} data={data} setPackage={setPackage} setField={setField} errors={errors} />}
          {step === 1 && bookingType === 'aktivitet' && <StepDate lang={lang} data={data} setField={setField} errors={errors} />}
          {step === 1 && bookingType === 'paket' && <StepPackageDate lang={lang} data={data} setField={setField} errors={errors} />}
          {step === 2 && bookingType === 'aktivitet' && <StepLodging lang={lang} data={data} setField={setField} />}
          {step === STEPS.length - 1 && <StepContact lang={lang} data={data} setField={setField} errors={errors} />}
        </div>

        <div className="step-footer">
          <button className="btn btn-ghost" onClick={goBack} disabled={step === 0} style={{ visibility: step === 0 ? 'hidden' : 'visible' }}>
            {T(lang, '← Tillbaka', '← Back')}
          </button>
          <button className="btn btn-primary" onClick={goNext} disabled={!canNext}>
            {step === STEPS.length - 1
              ? T(lang, 'Skicka förfrågan', 'Submit request')
              : T(lang, 'Nästa steg →', 'Next step →')}
          </button>
        </div>
      </div>

      <Summary lang={lang} data={data} bookingType={bookingType} />
    </div>
  );
}

// ── steps ─────────────────────────────────────────
function StepActivity({ lang, data, setActivity, errors }) {
  return (
    <>
      <p className="step-eyebrow">{T(lang, 'Steg 1 av 4', 'Step 1 of 4')}</p>
      <h2>{T(lang, 'Vilken aktivitet vill ni boka?', 'Which activity would you like to book?')}</h2>
      <p className="step-lede">{T(lang, 'Välj den aktivitet ni är intresserade av — vi återkommer med tillgänglighet och pris.', 'Choose the activity you\u2019re interested in — we\u2019ll get back to you with availability and price.')}</p>
      <div className="pkg-choices activity-choices">
        {Object.entries(ACTIVITIES).map(([key, a]) => (
          <button
            key={key}
            type="button"
            className={'choice' + (data.activity === key ? ' is-selected' : '')}
            onClick={() => setActivity(key)}
          >
            <div className="icon">{a.icon}</div>
            <h4>{T(lang, a.sv, a.en)}</h4>
          </button>
        ))}
      </div>
      {errors.activity && <span className="field-error" style={{ marginTop: 12, display: 'block' }}>{errors.activity}</span>}
    </>
  );
}

function StepDate({ lang, data, setField, errors }) {
  const act = data.activity ? ACTIVITIES[data.activity] : null;
  return (
    <>
      <p className="step-eyebrow">{T(lang, 'Steg 2 av 4', 'Step 2 of 4')}</p>
      <h2>{T(lang, 'När, och hur länge?', 'When, and for how long?')}</h2>
      <p className="step-lede">{T(lang, 'Ange önskat datum och hur lång tid ni vill lägga på aktiviteten.', 'Tell us the date you\u2019d like, and how much time you want to spend on the activity.')}</p>
      <div className="field-row">
        <div className="field">
          <label>{T(lang, 'Datum', 'Date')}</label>
          <input type="date" value={data.date} min={todayISO(0)} onChange={(e) => setField('date', e.target.value)} />
          {errors.date && <span className="field-error">{errors.date}</span>}
        </div>
        <div className="field">
          <label>{T(lang, 'Antal gäster', 'Number of guests')}</label>
          <div className="guests-row">
            <div className="guests-stepper">
              <button type="button" onClick={() => setField('guests', Math.max(1, data.guests - 1))} aria-label="−">−</button>
              <span className="num">{data.guests}</span>
              <button type="button" onClick={() => setField('guests', Math.min(20, data.guests + 1))} aria-label="+">+</button>
            </div>
          </div>
        </div>
      </div>
      {act && (
        <div className="field">
          <label>{T(lang, 'Längd', 'Duration')}</label>
          <div className="room-pick duration-pick">
            {act.durations.map((d) => (
              <button
                key={d.key}
                type="button"
                className={'choice' + (data.duration === d.key ? ' is-selected' : '')}
                onClick={() => setField('duration', d.key)}
              >
                <h4>{T(lang, d.sv, d.en)}</h4>
              </button>
            ))}
          </div>
          {errors.duration && <span className="field-error">{errors.duration}</span>}
        </div>
      )}
    </>
  );
}

function StepPackage({ lang, data, setPackage, setField, errors }) {
  const pkg = data.package ? PACKAGES[data.package] : null;
  return (
    <>
      <p className="step-eyebrow">{T(lang, 'Steg 1 av 3', 'Step 1 of 3')}</p>
      <h2>{T(lang, 'Vilket paket vill ni boka?', 'Which package would you like to book?')}</h2>
      <p className="step-lede">{T(lang, 'Boende, mat och aktivitet ingår redan i paketet — vi återkommer med tillgänglighet och pris.', 'Lodging, meals and the activity are already bundled in — we\u2019ll get back to you with availability and price.')}</p>
      <div className="field">
        <label>{T(lang, 'Paket', 'Package')}</label>
        <select value={data.package} onChange={(e) => setPackage(e.target.value)}>
          <option value="" disabled>{T(lang, 'Välj ett paket …', 'Choose a package …')}</option>
          {Object.entries(PACKAGES).map(([key, p]) => (
            <option key={key} value={key}>{p.icon} {T(lang, p.sv, p.en)}</option>
          ))}
        </select>
      </div>
      {errors.package && <span className="field-error">{errors.package}</span>}

      {pkg && pkg.subOptions && (
        <div className="field" style={{ marginTop: 22 }}>
          <label>{T(lang, 'Välj äventyr/variant', 'Choose adventure/variant')}</label>
          <div className="room-pick duration-pick">
            {pkg.subOptions.map((o) => (
              <button key={o.key} type="button" className={'choice' + (data.pkgOption === o.key ? ' is-selected' : '')} onClick={() => setField('pkgOption', o.key)}>
                <h4>{T(lang, o.sv, o.en)}</h4>
              </button>
            ))}
          </div>
          {errors.pkgOption && <span className="field-error">{errors.pkgOption}</span>}
        </div>
      )}
    </>
  );
}

function StepPackageDate({ lang, data, setField, errors }) {
  const pkg = data.package ? PACKAGES[data.package] : null;
  return (
    <>
      <p className="step-eyebrow">{T(lang, 'Steg 2 av 3', 'Step 2 of 3')}</p>
      <h2>{T(lang, 'När vill ni komma?', 'When would you like to come?')}</h2>
      <p className="step-lede">{T(lang, 'Ange önskat ankomstdatum, antal nätter och gäster.', 'Tell us your preferred arrival date, number of nights and guests.')}</p>
      <div className="field-row">
        <div className="field">
          <label>{T(lang, 'Ankomst', 'Arrival')}</label>
          <input type="date" value={data.date} min={todayISO(0)} onChange={(e) => setField('date', e.target.value)} />
          {errors.date && <span className="field-error">{errors.date}</span>}
        </div>
        <div className="field">
          <label>{T(lang, 'Antal gäster', 'Number of guests')}</label>
          <div className="guests-row">
            <div className="guests-stepper">
              <button type="button" onClick={() => setField('guests', Math.max(1, data.guests - 1))} aria-label="−">−</button>
              <span className="num">{data.guests}</span>
              <button type="button" onClick={() => setField('guests', Math.min(20, data.guests + 1))} aria-label="+">+</button>
            </div>
          </div>
        </div>
      </div>
      {pkg && pkg.nights.length > 1 && (
        <div className="field">
          <label>{T(lang, 'Antal nätter', 'Number of nights')}</label>
          <div className="room-pick duration-pick">
            {pkg.nights.map((n) => (
              <button key={n} type="button" className={'choice' + (data.nights === n ? ' is-selected' : '')} onClick={() => setField('nights', n)}>
                <h4>{n} {T(lang, 'nätter', 'nights')}</h4>
              </button>
            ))}
          </div>
        </div>
      )}
      {pkg && pkg.nights.length === 1 && (
        <p style={{ fontStyle: 'italic', color: 'var(--stone)' }}>
          {T(lang, `Det här paketet är ${pkg.nights[0]} natt${pkg.nights[0] !== 1 ? 'er' : ''}.`, `This package is ${pkg.nights[0]} night${pkg.nights[0] !== 1 ? 's' : ''}.`)}
        </p>
      )}
    </>
  );
}

function StepLodging({ lang, data, setField }) {
  return (
    <>
      <p className="step-eyebrow">{T(lang, 'Steg 3 av 4', 'Step 3 of 4')}</p>
      <h2>{T(lang, 'Behöver ni boende också?', 'Do you need lodging too?')}</h2>
      <p className="step-lede">{T(lang, 'Om ni vill kombinera aktiviteten med en övernattning väljer ni det här — priset stämmer vi av i bekräftelsen.', 'If you\u2019d like to combine the activity with a stay, choose it here — we\u2019ll confirm pricing together with you.')}</p>
      <div className="room-pick lodging-pick">
        {Object.entries(LODGING).map(([key, l]) => (
          <button
            key={key}
            type="button"
            className={'choice' + (data.lodging === key ? ' is-selected' : '')}
            onClick={() => setField('lodging', key)}
          >
            <h4>{T(lang, l.sv, l.en)}</h4>
          </button>
        ))}
      </div>
    </>
  );
}

function StepContact({ lang, data, setField, errors }) {
  return (
    <>
      <p className="step-eyebrow">{T(lang, 'Steg 4 av 4', 'Step 4 of 4')}</p>
      <h2>{T(lang, 'Vart skickar vi bekräftelsen?', 'Where do we send the confirmation?')}</h2>
      <p className="step-lede">{T(lang, 'Vi gör vårt bästa för att bekräfta samma dag. Inget betalas innan dess.', 'We do our best to confirm the same day. Nothing is charged until then.')}</p>
      <div className="field-row">
        <div className="field">
          <label>{T(lang, 'Namn', 'Name')}</label>
          <input type="text" value={data.name} onChange={(e) => setField('name', e.target.value)} placeholder={T(lang, 'För- och efternamn', 'First and last name')} />
          {errors.name && <span className="field-error">{errors.name}</span>}
        </div>
        <div className="field">
          <label>{T(lang, 'E-post', 'Email')}</label>
          <input type="email" value={data.email} onChange={(e) => setField('email', e.target.value)} placeholder="namn@exempel.se" />
          {errors.email && <span className="field-error">{errors.email}</span>}
        </div>
      </div>
      <div className="field">
        <label>{T(lang, 'Telefon', 'Phone')}</label>
        <input type="tel" value={data.phone} onChange={(e) => setField('phone', e.target.value)} placeholder="+46 ..." />
        {errors.phone && <span className="field-error">{errors.phone}</span>}
      </div>
      <div className="field">
        <label>{T(lang, 'Något vi bör veta?', 'Anything we should know?')}</label>
        <textarea rows="4" value={data.notes} onChange={(e) => setField('notes', e.target.value)} placeholder={T(lang, 'Allergier, önskemål, frågor …', 'Allergies, wishes, questions …')}></textarea>
      </div>
    </>
  );
}

// ── summary sidebar ───────────────────────────────
function Summary({ lang, data, bookingType }) {
  const act = data.activity ? ACTIVITIES[data.activity] : null;
  const dur = act ? act.durations.find((d) => d.key === data.duration) : null;
  const pkg = data.package ? PACKAGES[data.package] : null;
  return (
    <div className="summary">
      <p className="summary-eyebrow">{T(lang, 'Din förfrågan', 'Your request')}</p>
      <h3>
        {bookingType === 'paket'
          ? (pkg ? T(lang, pkg.sv, pkg.en) : T(lang, 'Inget paket valt', 'No package chosen'))
          : (act ? T(lang, act.sv, act.en) : T(lang, 'Ingen aktivitet vald', 'No activity chosen'))}
      </h3>
      <p>{T(lang,
        'Vi återkommer med tillgänglighet och pris — inget bokas eller betalas här.',
        'We\u2019ll get back to you with availability and price — nothing is booked or charged here.')}</p>

      <div className="summary-row">
        <span className="lbl">{T(lang, 'Datum', 'Date')}</span>
        <span>{data.date ? formatDate(data.date, lang) : <em className="empty">—</em>}</span>
      </div>
      {bookingType === 'aktivitet' && (
        <div className="summary-row">
          <span className="lbl">{T(lang, 'Längd', 'Duration')}</span>
          <span>{dur ? T(lang, dur.sv, dur.en) : <em className="empty">—</em>}</span>
        </div>
      )}
      {bookingType === 'paket' && (
        <div className="summary-row">
          <span className="lbl">{T(lang, 'Nätter', 'Nights')}</span>
          <span>{data.nights || <em className="empty">—</em>}</span>
        </div>
      )}
      {bookingType === 'paket' && pkg && pkg.subOptions && (
        <div className="summary-row">
          <span className="lbl">{T(lang, 'Variant', 'Variant')}</span>
          <span>{(() => { const o = pkg.subOptions.find((o) => o.key === data.pkgOption); return o ? T(lang, o.sv, o.en) : <em className="empty">—</em>; })()}</span>
        </div>
      )}
      <div className="summary-row">
        <span className="lbl">{T(lang, 'Gäster', 'Guests')}</span>
        <span>{data.guests}</span>
      </div>
      {bookingType === 'aktivitet' && (
        <div className="summary-row">
          <span className="lbl">{T(lang, 'Boende', 'Lodging')}</span>
          <span>{T(lang, LODGING[data.lodging].sv, LODGING[data.lodging].en)}</span>
        </div>
      )}
    </div>
  );
}

// ── confirmation ──────────────────────────────────
function Confirmation({ lang, data, bookingType }) {
  const act = data.activity ? ACTIVITIES[data.activity] : null;
  const dur = act ? act.durations.find((d) => d.key === data.duration) : null;
  const pkg = data.package ? PACKAGES[data.package] : null;
  return (
    <div style={{ maxWidth: 720, margin: '40px auto 100px', padding: '0 30px' }}>
      <div className="booking-card confirm">
        <div className="confirm-mark">✓</div>
        <p className="step-eyebrow">{T(lang, 'Tack!', 'Thank you!')}</p>
        <h2>{T(lang, 'Förfrågan är skickad.', 'Your request is on its way.')}</h2>
        <p>{T(lang,
          `Vi gör vårt bästa för att mejla dig på ${data.email} samma dag för att bekräfta tillgänglighet och pris. Inget är betalat ännu.`,
          `We do our best to email you at ${data.email} the same day to confirm availability and price. Nothing has been charged.`)}</p>

        <div style={{ background: 'var(--paper)', borderRadius: 3, padding: 24, margin: '30px auto 0', textAlign: 'left', maxWidth: 460 }}>
          <p style={{ fontSize: '0.7rem', letterSpacing: '0.2em', textTransform: 'uppercase', color: 'var(--moss)', marginBottom: 14, fontWeight: 500 }}>
            {T(lang, 'Sammanfattning', 'Summary')}
          </p>
          <Row label={T(lang, 'Namn', 'Name')} value={data.name} />
          <Row label={bookingType === 'paket' ? T(lang, 'Paket', 'Package') : T(lang, 'Aktivitet', 'Activity')} value={bookingType === 'paket' ? (pkg && T(lang, pkg.sv, pkg.en)) : (act && T(lang, act.sv, act.en))} />
          <Row label={T(lang, 'Datum', 'Date')} value={formatDate(data.date, lang)} />
          {bookingType === 'aktivitet' && <Row label={T(lang, 'Längd', 'Duration')} value={dur && T(lang, dur.sv, dur.en)} />}
          {bookingType === 'paket' && <Row label={T(lang, 'Nätter', 'Nights')} value={data.nights} />}
          {bookingType === 'paket' && pkg && pkg.subOptions && <Row label={T(lang, 'Variant', 'Variant')} value={(() => { const o = pkg.subOptions.find((o) => o.key === data.pkgOption); return o && T(lang, o.sv, o.en); })()} />}
          <Row label={T(lang, 'Gäster', 'Guests')} value={data.guests} />
          {bookingType === 'aktivitet' && <Row label={T(lang, 'Boende', 'Lodging')} value={T(lang, LODGING[data.lodging].sv, LODGING[data.lodging].en)} />}
        </div>

        <div style={{ marginTop: 32 }}>
          <a href="index.html" className="btn btn-ghost">{T(lang, '← Tillbaka till start', '← Back to home')}</a>
        </div>
      </div>
    </div>
  );
}
function Row({ label, value }) {
  return (
    <div style={{ display: 'flex', justifyContent: 'space-between', padding: '8px 0', borderBottom: '1px dashed rgba(138,128,112,0.25)', fontSize: '0.92rem' }}>
      <span style={{ color: 'var(--stone)', fontSize: '0.78rem', letterSpacing: '0.1em', textTransform: 'uppercase' }}>{label}</span>
      <span style={{ color: 'var(--charcoal)' }}>{value || '—'}</span>
    </div>
  );
}

// ── mount ─────────────────────────────────────────
const root = ReactDOM.createRoot(document.getElementById('booking-root'));
root.render(<Booking />);