/* Yogavibe, Custom Retreats (B2B) section + dedicated page */

function CustomRetreatsCTA({ setPage }) {
  const audiences = [
  {
    n: '01',
    tag: 'Companies & Teams',
    title: 'Staff focus weeks',
    desc: 'Off-sites that actually reset your team. Yoga, surf, and shared meals do more for culture than another quarterly all-hands.',
    img: 'uploads/ChatGPT Image 2 mei 2026, 16_21_57.png',
    pos: 'center'
  },
  {
    n: '02',
    tag: 'Friend groups',
    title: 'A trip you all keep talking about',
    desc: 'Birthdays, hen weeks, "we should travel more" reunions. We\'ll handle every detail. You bring the people.',
    img: 'uploads/ChatGPT Image 2 mei 2026, 17_56_56.png',
    pos: 'center'
  },
  {
    n: '03',
    tag: 'Yoga teachers',
    title: 'Run your own retreat',
    desc: 'Bring your students. We provide the location, food, transfers, and on-the-ground team. You teach.',
    img: 'uploads/ChatGPT Image 2 mei 2026, 16_33_57.png',
    pos: 'center'
  }];


  return (
    <section className="section custom-cta">
      <div className="container">
        <div className="custom-cta-head">
          <div>
            <div className="eyebrow">Design your own retreat</div>
            <h2 className="h-display" style={{ marginTop: 24, fontSize: 'clamp(48px, 7.5vw, 120px)' }}>
              Your group.<br /><em>Your week.</em><br />Our know-how.
            </h2>
          </div>
          <div className="custom-cta-side">
            <p className="lead" style={{ maxWidth: 420 }}>The most rewarding work we do is custom retreats built around your group, your goals, and your dates. Charlotte's background as a tour guide (Thomas Cook, TUI fly) means logistics get handled like a proper tour, not an afterthought.

            </p>
            <div style={{ marginTop: 32, display: 'flex', gap: 12, flexWrap: 'wrap' }}>
              <button className="btn btn-primary" onClick={() => setPage('custom')}>
                <span className="dot"></span> Start your enquiry
              </button>
              <button className="btn btn-ghost" onClick={() => setPage('custom')}>
                See how it works →
              </button>
            </div>
          </div>
        </div>

        <div className="custom-audiences">
          {audiences.map((a, i) =>
          <article key={i} className="custom-aud" onClick={() => setPage('custom')}>
              <div className="custom-aud-img">
                <Placeholder coords={a.tag.toUpperCase()} label={a.title} tag={a.n} src={a.img} pos={a.pos} ratio={4 / 5} />
              </div>
              <div className="custom-aud-body">
                <span className="caption">{a.n} · For {a.tag}</span>
                <h3 className="h3" style={{ marginTop: 12, fontSize: 28 }}>{a.title}</h3>
                <p className="body" style={{ marginTop: 12, fontSize: 14 }}>{a.desc}</p>
                <span className="link-arrow" style={{ marginTop: 20, display: 'inline-flex' }}>
                  Tell me more
                  <svg width="14" height="10" viewBox="0 0 14 10" fill="none"><path d="M1 5h12M9 1l4 4-4 4" stroke="currentColor" strokeWidth="1.2" /></svg>
                </span>
              </div>
            </article>
          )}
        </div>
      </div>
    </section>);

}

/* ============ DEDICATED CUSTOM RETREATS PAGE ============ */
function CustomRetreatPage({ setPage }) {
  usePageSEO(PAGE_SEO.custom);
  const [form, setForm] = React.useState({
    type: 'company', size: 10, dates: '', name: '', email: '', message: ''
  });
  const [sent, setSent] = React.useState(false);
  const [sending, setSending] = React.useState(false);

  const steps = [
  { n: '01', t: 'Tell us about your group', d: 'How many of you, what brought the idea up, and roughly when. Five-minute form, no commitment.' },
  { n: '02', t: 'We sketch a week', d: 'Within 48 hours, you get a draft itinerary, a transparent budget, and a few date options.' },
  { n: '03', t: 'We refine together', d: 'A 30-minute call with Charlotte. Adjust the rhythm, the activities, the accommodation level, all of it.' },
  { n: '04', t: 'You confirm with a deposit', d: '30% deposit secures the dates. We start the real planning. You start counting down.' },
  { n: '05', t: 'We handle everything', d: 'Transfers, dietary requirements, surf instructors, hammam bookings, that one person who needs a private room. All of it.' },
  { n: '06', t: 'You arrive', d: 'You step out of the airport. The rest happens.' }];


  const features = [
  ['Full takeover of the riad', '12–18 guests, all rooms, the rooftop, the courtyard, the kitchen.'],
  ['A custom-built schedule', 'Two daily classes, your styles. Activities chosen for your group.'],
  ['Everything handled', 'Transfers, food, dietary needs, instructors, materials, hammam bookings.'],
  ['Charlotte on the ground', 'Your dedicated host for the week. Tour-guide background, hospitality DNA.'],
  ['Real, transparent pricing', 'One per-person rate. No surprise add-ons. We send the spreadsheet.'],
  ['Add-ons à la carte', 'Private chef nights, surf packages, photo days, sound healing, all optional.']];


  return (
    <>
      <section className="section custom-hero" style={{ paddingTop: 160 }}>
        <div className="container">
          <button className="caption back-link" onClick={() => setPage('home')}>← Back to home</button>
          <div className="custom-hero-grid">
            <div>
              <div className="eyebrow" style={{ marginTop: 32 }}>For companies, friend groups & teachers</div>
              <h1 className="h-display" style={{ marginTop: 24 }}>
                Design<br /><em>your own</em><br />retreat.
              </h1>
              <p className="lead" style={{ marginTop: 36, maxWidth: 520 }}>Bring your team, your friends, or your students. We build the entire week around you that includes accommodation, food, classes, activities, transfers, and the small things you didn't think to ask for. From €950 per person, all in.

              </p>
              <div style={{ marginTop: 40, display: 'flex', gap: 12, flexWrap: 'wrap' }}>
                <a href="#enquiry" className="btn btn-primary">
                  <span className="dot"></span> Start your enquiry
                </a>
                <a href="#how" className="btn btn-ghost">How it works →</a>
              </div>
            </div>
            <div className="custom-hero-img">
              <Placeholder coords="ESSAOUIRA / GROUP" label="A group on the dunes" tag="GRP·01" src="uploads/ChatGPT Image 2 mei 2026, 20_30_37.png" pos="center" ratio={4 / 5} />
            </div>
          </div>
          <div className="custom-stats">
            <div><span className="caption">Groups hosted</span><div className="h2" style={{ marginTop: 8, fontSize: 56 }}>40+</div></div>
            <div><span className="caption">Group size</span><div className="h2" style={{ marginTop: 8, fontSize: 56 }}>6–18</div></div>
            <div><span className="caption">Avg. lead time</span><div className="h2" style={{ marginTop: 8, fontSize: 56 }}>3 mo</div></div>
            <div><span className="caption">From / person</span><div className="h2" style={{ marginTop: 8, fontSize: 56 }}>€950</div></div>
          </div>
        </div>
      </section>

      <section className="section custom-who">
        <div className="container">
          <div className="eyebrow">Who comes to us</div>
          <h2 className="h1" style={{ marginTop: 16 }}>Three kinds of <em>group.</em></h2>
          <div className="custom-who-grid" style={{ marginTop: 64 }}>
            <div className="custom-who-card">
              <span className="caption">01 / Companies & teams</span>
              <h3 className="h2" style={{ marginTop: 16 }}>The staff focus week.</h3>
              <p className="body" style={{ marginTop: 16, color: 'var(--ink)' }}>
                A real reset for your team. Used for incentives, leadership offsites, founder retreats, and end-of-quarter rewards. The kind of trip people actually remember.
              </p>
              <ul className="custom-list">
                <li>Dedicated workshop time built into the schedule</li>
                <li>Private dinners, branded welcome packs (optional)</li>
                <li>Invoicing, VAT receipts, single point of contact</li>
                <li>Group sizes 8–18, full riad takeover</li>
              </ul>
            </div>
            <div className="custom-who-card">
              <span className="caption">02 / Friend groups</span>
              <h3 className="h2" style={{ marginTop: 16 }}>The trip you've been talking about for years.</h3>
              <p className="body" style={{ marginTop: 16, color: 'var(--ink)' }}>
                Birthdays, hen weeks, "we should do this every year" reunions. We've hosted dozens. The format works.
              </p>
              <ul className="custom-list">
                <li>Mix of private + shared rooms, your call</li>
                <li>One person organises, we handle the herding</li>
                <li>Add a long lunch, a sunset boat, a private dinner</li>
                <li>Group sizes 6–14, easy split-billing</li>
              </ul>
            </div>
            <div className="custom-who-card">
              <span className="caption">03 / Yoga teachers</span>
              <h3 className="h2" style={{ marginTop: 16 }}>Bring your students. We do the rest.</h3>
              <p className="body" style={{ marginTop: 16, color: 'var(--ink)' }}>
                The retreat-organising side of running a studio is the hard part. We are the back office, location, food, transfers, photography, on-the-ground coordination.
              </p>
              <ul className="custom-list">
                <li>Teacher's room comped on groups of 10+</li>
                <li>White-label option, your branding, our infrastructure</li>
                <li>Marketing-ready photos & video included</li>
                <li>Transparent commission structure</li>
              </ul>
            </div>
          </div>
        </div>
      </section>

      <section id="how" className="section custom-process">
        <div className="container">
          <div className="row between" style={{ flexWrap: 'wrap', gap: 24, marginBottom: 56 }}>
            <div>
              <div className="eyebrow">How it works</div>
              <h2 className="h1" style={{ marginTop: 16 }}>From idea to <em>airport pickup.</em></h2>
            </div>
            <p className="lead" style={{ maxWidth: 380 }}>Six steps. Most groups confirm within 2 weeks of first email.</p>
          </div>
          <div className="process-grid">
            {steps.map((s, i) =>
            <div key={i} className="process-step">
                <div className="caption">{s.n}</div>
                <h3 className="h3" style={{ fontFamily: 'var(--font-display)', marginTop: 16 }}>{s.t}</h3>
                <p className="body" style={{ marginTop: 12, fontSize: 14 }}>{s.d}</p>
              </div>
            )}
          </div>
        </div>
      </section>

      <section className="section custom-features" style={{ background: 'var(--bg-alt)' }}>
        <div className="container">
          <div className="eyebrow">What's included</div>
          <h2 className="h1" style={{ marginTop: 16 }}>Everything,<br /><em>handled.</em></h2>
          <div className="features-grid" style={{ marginTop: 64 }}>
            {features.map(([t, d], i) =>
            <div key={i} className="feature-item">
                <div className="caption">{String(i + 1).padStart(2, '0')}</div>
                <h3 className="h3" style={{ fontFamily: 'var(--font-display)', fontSize: 24, marginTop: 8 }}>{t}</h3>
                <p className="body" style={{ marginTop: 8, fontSize: 14 }}>{d}</p>
              </div>
            )}
          </div>
        </div>
      </section>

      <section className="section">
        <div className="container">
          <div className="custom-quote-card">
            <div className="testi-stars" style={{ color: 'var(--accent)' }}>★ ★ ★ ★ ★</div>
            <blockquote className="h2" style={{ marginTop: 24, fontStyle: 'italic', maxWidth: 1100, fontWeight: 300 }}>
              "We brought our 14-person product team to Essaouira for a focus week. Charlotte handled everything from dietary requirements to a surprise birthday cake. The team came back genuinely closer."
            </blockquote>
            <div style={{ marginTop: 32, display: 'flex', justifyContent: 'space-between', flexWrap: 'wrap', gap: 16 }}>
              <div>
                <div className="h3" style={{ fontFamily: 'var(--font-display)' }}>Lien V.</div>
                <div className="caption" style={{ marginTop: 4 }}>Head of People · Brussels-based scaleup</div>
              </div>
              <div className="caption">Custom retreat · 6 nights · March 2025</div>
            </div>
          </div>
        </div>
      </section>

      <section id="enquiry" className="section custom-enquiry" style={{ background: 'var(--bg-deep)', color: 'var(--bg)' }}>
        <div className="container">
          <div className="enquiry-grid">
            <div>
              <div className="eyebrow" style={{ color: 'oklch(from var(--bg) l c h / 0.7)' }}>Start your enquiry</div>
              <h2 className="h1" style={{ marginTop: 16, color: 'var(--bg)' }}>Tell us<br /><em>about your group.</em></h2>
              <p className="lead" style={{ marginTop: 24, color: 'oklch(from var(--bg) l c h / 0.8)' }}>Five questions. Charlotte replies within 48 hours with a draft itinerary and budget - no obligation.

              </p>
              <div className="enquiry-direct">
                <div className="caption" style={{ color: 'oklch(from var(--bg) l c h / 0.6)' }}>Or reach Charlotte directly</div>
                <div style={{ marginTop: 8, fontSize: 18, color: 'var(--bg)' }}>{window.YOGAVIBE_CONFIG.contact.email}</div>
                <div style={{ marginTop: 4, fontSize: 18, color: 'var(--bg)' }}>{window.YOGAVIBE_CONFIG.contact.phone} · WhatsApp</div>
              </div>
            </div>
            <form className="enquiry-form" onSubmit={async (e) => {
                e.preventDefault();
                setSending(true);
                try {
                  await fetch(`https://formspree.io/f/${window.YOGAVIBE_CONFIG.integrations.formspreeFormId}`, {
                    method: 'POST',
                    headers: { 'Content-Type': 'application/json', 'Accept': 'application/json' },
                    body: JSON.stringify({
                      _subject: `Custom retreat enquiry — ${form.name}`,
                      'Group type': form.type,
                      'Group size': `${form.size} guests`,
                      'Dates': form.dates || '—',
                      'Name': form.name,
                      'Email': form.email,
                      'Message': form.message || '—',
                    }),
                  });
                } catch {}
                setSending(false);
                setSent(true);
              }}>
              {!sent ?
              <>
                  <div className="enquiry-field">
                    <label className="caption">Type of group</label>
                    <div className="enquiry-toggle">
                      {[['company', 'Company'], ['friends', 'Friends'], ['teacher', 'Yoga teacher'], ['other', 'Other']].map(([v, l]) =>
                    <button type="button" key={v} className={form.type === v ? 'active' : ''} onClick={() => setForm({ ...form, type: v })}>{l}</button>
                    )}
                    </div>
                  </div>
                  <div className="enquiry-field">
                    <label className="caption">Group size · {form.size} guests</label>
                    <input type="range" min="4" max="20" value={form.size} onChange={(e) => setForm({ ...form, size: e.target.value })} />
                  </div>
                  <div className="enquiry-field">
                    <label className="caption">Approximate dates</label>
                    <input type="text" placeholder="e.g. October 2026, 1 week" value={form.dates} onChange={(e) => setForm({ ...form, dates: e.target.value })} />
                  </div>
                  <div className="enquiry-field">
                    <label className="caption">Your name</label>
                    <input type="text" required value={form.name} onChange={(e) => setForm({ ...form, name: e.target.value })} />
                  </div>
                  <div className="enquiry-field">
                    <label className="caption">Email</label>
                    <input type="email" required value={form.email} onChange={(e) => setForm({ ...form, email: e.target.value })} />
                  </div>
                  <div className="enquiry-field">
                    <label className="caption">Anything else? (optional)</label>
                    <textarea rows="3" value={form.message} onChange={(e) => setForm({ ...form, message: e.target.value })} />
                  </div>
                  <button className="btn btn-primary" type="submit" disabled={sending} style={{ background: 'var(--accent)', borderColor: 'var(--accent)', width: '100%', justifyContent: 'center', marginTop: 12 }}>
                    <span className="dot"></span> {sending ? 'Sending…' : 'Send enquiry'}
                  </button>
                </> :

              <div className="enquiry-success">
                  <div className="h2" style={{ color: 'var(--bg)', fontStyle: 'italic' }}>Thank you ✿</div>
                  <p className="body" style={{ marginTop: 16, color: 'oklch(from var(--bg) l c h / 0.85)' }}>
                    Charlotte will write back within 48 hours with a draft itinerary and a transparent budget. Check your inbox.
                  </p>
                </div>
              }
            </form>
          </div>
        </div>
      </section>
    </>);

}

/* ============ WORKSHOPS PAGE ============ */
function WorkshopsPage({ setPage, setBooking }) {
  usePageSEO(PAGE_SEO.workshops);
  const list = [
  {
    n: '01', date: '28 May', day: 'THU', year: '2026', title: 'Reis naar de Stilte: Adem, Soundbath & EES',
    loc: 'Citta Holistic Haven, Antwerp', time: '19:00 to 21:00', price: '€75', priceNum: 75,
    tag: 'Breath · Soundbath · EES',
    stripeKey: 'workshop-reis-naar-de-stilte',
    desc: 'A unique combination of breathwork, healing sound, and advanced energy technology. 120 minutes guided through targeted breathing techniques to bring your nervous system to rest and effortlessly drop into deeper layers.',
    img: 'uploads/ChatGPT Image 22 apr 2026, 14_25_22.png',
    img16: 'uploads/ChatGPT Image 22 apr 2026, 14_27_13.png',
    gcalStart: '20260528T190000', gcalEnd: '20260528T210000',
    details: {
      intro: [
        'Step out of the hustle and into a space of deep rest.',
        'During this 120-minute experience, you are first guided through targeted breathing techniques that bring your nervous system to rest and pull you out of the constant doing mode. From there, you effortlessly drop into deeper layers.',
        'You are then carried by an immersive soundbath with carefully chosen frequencies that bring your mind into a meditative state. The sounds work on a deep level, helping you release tension while your body recovers.',
        'In the background, the Energy Enhancement System (EES) supports this process with subtle scalar fields and biophotons — helping the body return to balance and activate its natural self-healing capacity.',
        'In the stillness that arises, everything comes together. Body, breath and consciousness. An invitation to slow down, let go, and recharge from within.'
      ],
      forWhom: [
        ['Everyone', 'Accessible to all ages and experience levels.'],
        ['Busy minds', 'For those who can\'t find the off switch.'],
        ['Burn-out & Stress', 'For those craving a deep nervous system reset.'],
        ['Health seekers', 'For those who want to accelerate recovery.'],
        ['Spiritual travellers', 'For those who want to experience deep meditation and stillness.'],
        ['Innovation lovers', 'For those who want to feel the power of scalar energy.']
      ]
    }
  },
  {
    n: '02', date: '17 Oct', day: 'SAT', year: '2026', title: 'The Yoga Deep Dive @ CITTA',
    loc: 'Citta Holistic Haven, Antwerp', time: '10:00 to 17:00', price: '€225', priceNum: 225,
    tag: 'For the curious practitioner',
    stripeKey: 'workshop-deep-dive-citta',
    desc: "De teacher training die geen teacher training is. Ben jij het soort yogi dat na de les blijft hangen — vol vragen? Schrijf je in voor deze intensieve dag voor de nieuwsgierige beoefenaar. Begrijp je praktijk, voer ze niet zomaar uit.",
    img: 'uploads/ChatGPT Image 22 apr 2026, 15_29_20.png',
    img16: 'uploads/ChatGPT Image 22 apr 2026, 14_53_05.png',
    gcalStart: '20261017T100000', gcalEnd: '20261017T170000',
    details: {
      intro: [
        'Ben jij die yogi die altijd na de les blijft hangen met vragen? Die zich afvraagt waar de zonnegroet vandaan komt, waarom die ene houding soms zo blokkeert, of hoe je thuis eindelijk eens die mat uitrolt zonder een YouTube-video nodig te hebben?',
        'Vaak moet je een 200-urige docentenopleiding volgen om écht de diepte in te gaan. Maar wat als je helemaal geen ambitie hebt om les te geven? Wat als je gewoon je eigen practice wilt begrijpen, versterken en verrijken?',
        'Welkom bij The Yoga Deep Dive. Een intensieve dagopleiding speciaal ontworpen voor de nieuwsgierige beoefenaar.',
        'Bij deze Deep Dive komt een exclusieve, fysieke (of digitale) cursusbundel. Dit is geen simpele hand-out, maar een compleet werkboek dat je na de dag mee naar huis neemt.'
      ],
      sectionsLabel: 'Wat kan je verwachten?',
      sections: [
        { title: 'De Wortels (Filosofie & Geschiedenis)', body: 'We reizen van de oude Indiase tradities naar de moderne yoga van nu. Geen saaie stoffige kost, maar praktische wijsheid voor op je mat.' },
        { title: 'De Blauwdruk (Anatomie & Alignment)', body: 'Hoe werkt jouw lichaam in een pose? Leer de anatomische principes zodat je veilig en met meer gemak kunt bewegen.' },
        { title: 'De Creatie (Art of Sequencing)', body: 'Leer hoe je zelf een logische en fijne yogales opbouwt. Na deze dag weet je precies hoe je thuis een practice neerzet die past bij jouw energie van die dag.' },
        { title: 'De Onuitgesproken Regels (Yoga Etiquette)', body: "Wat is de gedragscode op en rond de mat? We bespreken de ethiek van yoga, de tradities in de studio en hoe je met respect voor de discipline (en je medeyogi's) je practice verdiept." }
      ],
      closing: 'Tussen de lessen door schuiven we aan voor een uitgebreide, holistische brunch in de rustgevende sfeer van Citta. Geen snelle hap, maar een voedzame maaltijd die je energie geeft voor de rest van de dag.'
    }
  },
  {
    n: '03', date: '22 Nov', day: 'SUN', year: '2026', title: 'The Yoga Deep Dive @ ADM',
    loc: 'Atelier Du Mon, Antwerp', time: '10:00 to 17:00', price: '€225', priceNum: 225,
    tag: 'For the curious practitioner',
    stripeKey: 'workshop-deep-dive-adm',
    desc: "Same deep-dive day, second location. A full day of knowledge, clarity and connection, explore the roots, understand the why, deepen your practice. Small group, lots of questions, no perfect poses.",
    img: 'uploads/ChatGPT Image 22 apr 2026, 15_29_20.png',
    img16: 'uploads/ChatGPT Image 22 apr 2026, 14_53_05.png',
    gcalStart: '20261122T100000', gcalEnd: '20261122T170000',
    details: {
      intro: [
        'Are you the kind of yogi who lingers after class, full of questions?',
        'Wondering where the sun salutation comes from, why a certain pose sometimes feels blocked, or how to finally roll out your mat at home without relying on a YouTube video? More often than not, going deeper means committing to a 200-hour teacher training.',
        'But what if you have no desire to teach?',
        "What if you simply want to understand, strengthen, and enrich your own practice? Welcome to The Yoga Deep Dive: an immersive one-day training designed for the curious practitioner.",
        "Alongside this Deep Dive workshop, you'll receive an exclusive physical (or digital) course bundle. Not a simple handout, but a comprehensive workbook to take home and continue exploring long after the day ends."
      ],
      sectionsLabel: 'What to expect:',
      sections: [
        { title: 'The Roots (Philosophy & History)', body: 'We trace the journey from ancient Indian traditions to modern-day yoga. Not abstract theory, but practical wisdom you can bring onto your mat.' },
        { title: 'The Blueprint (Anatomy & Alignment)', body: 'How does your body actually function in a pose? Learn the key anatomical principles so you can move with more ease, safety, and awareness.' },
        { title: 'The Creation (Art of Sequencing)', body: 'Discover how to build a yoga practice that flows naturally. By the end of the day, you\'ll know exactly how to create a session at home that matches your energy.' },
        { title: 'The Unspoken Rules (Yoga Etiquette)', body: 'What are the subtle codes of conduct on and around the mat? We explore the ethics, traditions, and studio culture that deepen your practice with respect and awareness.' }
      ],
      closing: 'Between sessions, we gather for an extensive, holistic brunch in the calm and welcoming atmosphere of Atelier Du Mon. Not a quick bite, but a nourishing meal designed to support your energy throughout the day.'
    }
  }];

  return (
    <>
      <section className="section workshops-hero" style={{ paddingTop: 160 }}>
        <div className="container">
          <div className="caption">Yogavibe / Workshops</div>
          <h1 className="h-display" style={{ marginTop: 24, maxWidth: 1100 }}>
            One-day deep<br /><em>dives.</em>
          </h1>
          <p className="lead" style={{ marginTop: 36, maxWidth: 520 }}>
            Between retreats, we host one-day workshops at home in Antwerp. Smaller, denser, slower. Bring questions.
          </p>
        </div>
      </section>

      <section className="section-tight">
        <div className="container">
          <div className="workshops-page-list">
            {list.map((w, i) =>
            <article key={i} className="workshop-card">
                <div className="workshop-card-img">
                  <Placeholder coords={w.loc.toUpperCase()} label={w.title} tag={w.n} src={w.img} pos="center" />
                </div>
                <div className="workshop-card-body">
                  <div className="caption">{w.n} · {w.day} {w.date} {w.year} · {w.time}</div>
                  <h2 className="h2" style={{ marginTop: 16 }}>{w.title}</h2>
                  <div className="caption" style={{ marginTop: 8, color: 'var(--accent)' }}>{w.loc} · {w.price}</div>
                  <p className="body" style={{ marginTop: 20, fontSize: 15, color: 'var(--ink)', maxWidth: '60ch' }}>{w.desc}</p>
                  <div style={{ marginTop: 28, display: 'flex', gap: 12, flexWrap: 'wrap' }}>
                    <button className="btn btn-primary" onClick={() => { setBooking({ type: 'workshop', stripeKey: w.stripeKey, title: w.title, loc: w.loc, date: w.date, day: w.day, year: w.year, time: w.time, price: w.price, priceNum: w.priceNum, img: w.img16 || w.img, details: w.details }); setPage('reservation'); }}><span className="dot"></span> Reserve your spot</button>
                    <a className="btn btn-ghost"
                      href={`https://calendar.google.com/calendar/render?action=TEMPLATE&text=${encodeURIComponent(w.title)}&dates=${w.gcalStart}/${w.gcalEnd}&details=${encodeURIComponent(w.desc)}&location=${encodeURIComponent(w.loc)}`}
                      target="_blank" rel="noopener noreferrer" style={{ textDecoration: 'none' }}>Add to calendar →</a>
                  </div>
                </div>
              </article>
            )}
          </div>
        </div>
      </section>
    </>);

}

/* ============ ABOUT PAGE (Charlotte's real bio) ============ */
function AboutPageFull({ setPage }) {
  usePageSEO(PAGE_SEO.about);
  return (
    <>
      <section className="section" style={{ paddingTop: 160 }}>
        <div className="container">
          <div className="caption">About Yogavibe</div>
          <h1 className="h-display" style={{ marginTop: 24, maxWidth: 1200 }}>
            Charlotte<br /><em>Schoeters.</em>
          </h1>
          <p className="lead" style={{ marginTop: 32, maxWidth: 540, fontStyle: 'italic', color: 'var(--accent)' }}>
            Yoga instructor, travel guide & foodie.
          </p>
        </div>
      </section>

      <section className="section-tight">
        <div className="container about-page-grid">
          <div>
            <Placeholder coords="ESSAOUIRA" label="Charlotte" tag="01" ratio={4 / 5} src="images/white-dress-rocks.png" pos="center 25%" />
            <div className="about-meta">
              <div><span className="caption">Born</span><div>Antwerp, Belgium</div></div>
              <div><span className="caption">Certified since</span><div>2015</div></div>
              <div><span className="caption">Tour guide for</span><div>Thomas Cook · TUI fly</div></div>
              <div><span className="caption">Yogavibe est.</span><div>2017</div></div>
            </div>
          </div>
          <div className="about-page-text">
            <p className="body" style={{ fontSize: 19, color: 'var(--ink)', lineHeight: 1.6 }}>
              Welcome to Yogavibe. I'm <em>Charlotte Schoeters</em>, born in Antwerp, Belgium, and certified yoga instructor since 2015. Also your guide to an extraordinary wellness journey. With a diverse repertoire of yoga styles and the experience of teaching in some of the world's most exquisite locations, I strive to offer more than just a yoga session: I provide a holistic experience designed to awaken your senses and rejuvenate your soul.
            </p>
            <p className="body" style={{ marginTop: 24, fontSize: 17 }}>
              Building on my background as a former tour guide with industry leaders like <em>Thomas Cook</em> and <em>TUI fly</em>, I married my love for yoga with my appetite for adventure. Yogavibe isn't just about practicing yoga, it's about immersive experiences that blend local culture, nutritious cuisine, and mindful moments of yoga and meditation.
            </p>
            <p className="body" style={{ marginTop: 24, fontSize: 17 }}>
              At Yogavibe I aim to cultivate an atmosphere that feels like a slice of paradise on Earth. A sanctuary where you can unplug from the daily grind and recharge every facet of your being, mind, body, and soul.
            </p>
            <p className="body" style={{ marginTop: 24, fontSize: 17 }}>
              So why wait? Dive into our upcoming adventures and feel free to reach out with any questions you may have. Your path to holistic wellness is just a click away.
            </p>
            <p className="h3" style={{ marginTop: 40, fontStyle: 'italic', color: 'var(--accent)', fontFamily: 'var(--font-display)' }}>
              Namasté,<br />Charlotte
            </p>
            <div style={{ marginTop: 48, display: 'flex', gap: 12, flexWrap: 'wrap' }}>
              <button className="btn btn-primary" onClick={() => setPage('retreats')}><span className="dot"></span> Browse retreats</button>
              <button className="btn btn-ghost" onClick={() => setPage('custom')}>Design your own →</button>
            </div>
          </div>
        </div>
      </section>

      <Gallery />
    </>);

}

Object.assign(window, { CustomRetreatsCTA, CustomRetreatPage, WorkshopsPage, AboutPageFull });