/* Yogavibe, Retreats listing & Retreat detail pages */

function RetreatsPage({ setPage }) {
  usePageSEO(PAGE_SEO.retreats);
  const [filter, setFilter] = React.useState('all');
  const all = [
    {
      n: '01', loc: 'Essaouira, Morocco', dates: '07 to 11 Oct 2026', year: '2026', area: 'essaouira',
      title: 'From Strength to Stillness', price: '€1,050', spots: '8 of 12 spots',
      tag: 'Open', accent: 'var(--accent)',
      desc: 'Rocket Vinyasa mornings, Yin & Soundbath evenings. Two teachers, four nights, the right kind of tired.',
      img: 'uploads/ChatGPT Image 2 mei 2026, 17_00_54.png', pos: 'center',
      status: 'reserve'
    },
    {
      n: '02', loc: 'Marrakesh, Morocco', dates: 'November 2026 · Dates TBA', year: '2026', area: 'marrakesh',
      title: '4-Day Luxury Reset', price: 'From €1,300', spots: 'Interest only',
      tag: 'Register now', accent: 'var(--accent-2)',
      desc: 'A high-end boutique escape for high-performing professionals who carry a lot and rarely pause. Deep rest, digital detox, nourishing rituals, and serene surroundings.',
      img: 'uploads/894d31_cda75ba3813d441fbdd6fdba8488b828~mv2.avif', pos: 'center',
      status: 'interest'
    },
    {
      n: '03', loc: 'Essaouira, Morocco', dates: 'March 2027 · Exact dates TBA', year: '2027', area: 'essaouira',
      title: 'Winter Escape', price: 'Price TBA', spots: 'Registration open',
      tag: 'Register now', accent: 'var(--accent-2)',
      desc: 'A calming March retreat by the ocean. Yoga, nourishing food, coastal walks, fresh sea air, and space to rest before life speeds up again.',
      img: 'images/real-ocean-sunset.jpg', pos: 'center',
      status: 'interest'
    },
    {
      n: '04', loc: 'Essaouira, Morocco', dates: 'May 2027 · Exact dates TBA', year: '2027', area: 'essaouira',
      title: 'Spring Detox', price: 'Price TBA', spots: 'Registration open',
      tag: 'Register now', accent: 'var(--accent-2)',
      desc: 'A fresh May retreat in Essaouira. Yoga, healthy food, ocean air, gentle reset rituals, and time to unwind in a relaxed coastal setting.',
      img: 'images/yoga-mats-sand.jpg', pos: 'center',
      status: 'interest'
    },
  ];
  const filtered = filter === 'all' ? all : all.filter(r => r.year === filter || r.area === filter);

  return (
    <>
      <section className="section retreats-hero">
        <div className="container">
          <div className="caption">Yogavibe / Retreats</div>
          <h1 className="h-display" style={{marginTop: 28, maxWidth: 1100}}>
            The year<br/><em>ahead.</em>
          </h1>
          <p className="lead" style={{marginTop: 36, maxWidth: 560}}>
            Every retreat is small (max 12 people), unhurried, and built around two daily practices and a different adventure each afternoon. Morocco in 2026 and 2027.
          </p>
        </div>
      </section>

      <div className="container retreats-filters">
        <div className="caption">Filter</div>
        <div className="filter-chips">
          {[
            { id: 'all', label: 'All' },
            { id: '2026', label: '2026' },
            { id: '2027', label: '2027' },
            { id: 'essaouira', label: 'Essaouira' },
            { id: 'marrakesh', label: 'Marrakesh' },
          ].map(f => (
            <button key={f.id} className={`chip ${filter === f.id ? 'active' : ''}`} onClick={() => setFilter(f.id)}>
              {f.label}
            </button>
          ))}
        </div>
        <div className="caption">{filtered.length} {filtered.length === 1 ? 'retreat' : 'retreats'}</div>
      </div>

      <section className="section-tight">
        <div className="container retreats-list-page">
          {filtered.map((r, i) => (
            <article key={i} className="retreat-row"
              onClick={r.status === 'reserve' ? () => setPage('retreat-detail') : undefined}
              style={{ cursor: r.status === 'reserve' ? 'pointer' : 'default' }}>
              <div className="retreat-row-img">
                <Placeholder coords={r.loc.toUpperCase()} label={r.title} tag={r.n} ratio={4/3} src={r.img} pos={r.pos} />
              </div>
              <div className="retreat-row-meta">
                <div className="caption">{r.n} · {r.loc}</div>
                <h2 className="h2" style={{ marginTop: 12 }}>{r.title}</h2>
                <p className="body" style={{ marginTop: 10, fontSize: 14, color: 'var(--ink-soft)', maxWidth: 420 }}>{r.desc}</p>
                <div className="retreat-row-tags" style={{ marginTop: 16 }}>
                  <span className="caption">{r.dates}</span>
                  <span className="dot-sep"></span>
                  <span className="caption">{r.price}</span>
                  <span className="dot-sep"></span>
                  <span className="caption" style={{ color: r.accent }}>{r.spots}</span>
                </div>
              </div>
              <div className="retreat-row-tag">
                <span className="retreat-tag" style={{ borderColor: r.accent, color: r.accent }}>{r.tag}</span>
                {r.status === 'reserve' && (
                  <button className="btn btn-ghost" style={{ marginTop: 16 }}
                    onClick={e => { e.stopPropagation(); setPage('retreat-detail'); }}>
                    See the full week →
                  </button>
                )}
                {r.status === 'interest' && (
                  <a className="btn btn-ghost" style={{ marginTop: 16, textDecoration: 'none' }}
                    href={`mailto:${window.YOGAVIBE_CONFIG.contact.email}?subject=Interest%3A%20${encodeURIComponent(r.title)}&body=Hi%20Charlotte%2C%0A%0AI%27d%20like%20to%20register%20my%20interest%20for%20the%20${encodeURIComponent(r.title)}%20retreat.%0A%0AName%3A%20%0AEmail%3A%20%0APhone%3A%20`}
                    onClick={e => e.stopPropagation()}>
                    Register interest →
                  </a>
                )}
              </div>
            </article>
          ))}
        </div>
      </section>

      <section className="section ccc-section">
        <div className="container">
          <div className="ccc-inner">
            <div className="ccc-left">
              <div className="eyebrow">Design your own retreat</div>
              <h2 className="h1" style={{ marginTop: 16 }}>Your group.<br /><em>Your week.</em></h2>
              <p className="body" style={{ marginTop: 20, color: 'var(--ink)', maxWidth: 360 }}>
                Custom retreats for companies, friend groups and yoga teachers. Full riad takeover, Charlotte handles every detail. From €950 per person.
              </p>
              <div style={{ marginTop: 28, 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 className="ccc-right">
              {[
                { n: '01', tag: 'Companies & Teams', desc: 'Off-sites that actually reset your team. Yoga, surf, and shared meals do more for culture than another all-hands.' },
                { n: '02', tag: 'Friend groups', desc: "Birthdays, hen weeks, reunions. We'll handle every detail. You bring the people." },
                { n: '03', tag: 'Yoga teachers', desc: 'Bring your students. We provide the location, food, transfers, and on-the-ground team. You teach.' },
              ].map((a, i) => (
                <div key={i} className="ccc-item" onClick={() => setPage('custom')}>
                  <span className="caption" style={{ color: 'var(--ink-soft)' }}>{a.n}</span>
                  <div>
                    <div className="caption" style={{ color: 'var(--ink)' }}>{a.tag}</div>
                    <p className="body" style={{ marginTop: 4, fontSize: 13 }}>{a.desc}</p>
                  </div>
                </div>
              ))}
            </div>
          </div>
        </div>
      </section>
    </>
  );
}

function RetreatDetailPage({ setPage, setBooking }) {
  usePageSEO(PAGE_SEO['retreat-detail']);
  const [tab, setTab] = React.useState('schedule');
  const [guests, setGuests] = React.useState(1);
  const [room, setRoom] = React.useState('twin');
  const days = [
    { d: 'Day 01', t: 'Wed 07 Oct', activities: ['Arrival, airport transfer (10:00)', 'Settle in, lunch by the pool', 'Welcome circle, gentle opening Yin with Charlotte', 'Dinner around one long table'] },
    { d: 'Day 02', t: 'Thu 08 Oct', activities: ['Rocket Yoga 90min with Sèlia', 'Long brunch', 'Surf lesson on the bay', 'Fruit dates & mocktails (16:00)', 'Dinner, Yin & Soundbath with Charlotte'] },
    { d: 'Day 03', t: 'Fri 09 Oct', activities: ['Level-up Vinyasa 90min with Sèlia', 'Brunch', 'Hike along the coast', 'Aromatherapy workshop', 'Dinner, Yin & Soundbath with Charlotte'] },
    { d: 'Day 04', t: 'Sat 10 Oct', activities: ['Rocket Yoga 90min with Sèlia', 'Brunch', 'Medina tour, Essaouira', 'Hammam session', 'Closing dinner, long Soundbath'] },
    { d: 'Day 05', t: 'Sun 11 Oct', activities: ['Final practice with Sèlia', 'Slow brunch', 'House check-out 12:30', 'Airport transfer for 14:00 flight'] },
  ];

  const total = (room === 'private' ? 1350 : 1050) * guests;

  return (
    <>
      <section className="detail-hero">
        <div className="detail-hero-inner">
          <div className="detail-hero-text">
            <button className="caption back-link" style={{ display: 'block' }} onClick={() => setPage('retreats')}>← All retreats</button>
            <div className="eyebrow" style={{ marginTop: 32, display: 'flex' }}>Featured · 8 of 12 spots</div>
            <h1 className="h-display" style={{marginTop: 24, fontSize: 'clamp(56px, 9vw, 140px)'}}>
              From Strength<br />to <em>Stillness.</em>
            </h1>
            <div className="caption" style={{marginTop: 18, fontSize: 12, letterSpacing:'.14em'}}>Level up your Vinyasa & deepen your soul</div>
            <div className="detail-meta-row">
              <div><div className="caption">Dates</div><div className="body" style={{color:'var(--ink)'}}>07 to 11 Oct 2026</div></div>
              <div><div className="caption">Length</div><div className="body" style={{color:'var(--ink)'}}>4 nights</div></div>
              <div><div className="caption">Group</div><div className="body" style={{color:'var(--ink)'}}>Max 12</div></div>
              <div><div className="caption">From</div><div className="body" style={{color:'var(--ink)'}}>€1,050</div></div>
            </div>
          </div>
          <div className="detail-hero-img">
            <Placeholder coords="ESSAOUIRA" label="From Strength to Stillness" tag="01 / 24" src="uploads/ChatGPT Image 2 mei 2026, 17_00_54.png" pos="center" />
          </div>
        </div>
      </section>

      <section className="section-tight">
        <div className="container detail-tabs">
          {['schedule', 'included', 'place', 'teacher'].map(t => (
            <button key={t} className={`detail-tab ${tab === t ? 'active' : ''}`} onClick={() => setTab(t)}>
              {t === 'schedule' && 'The week'}
              {t === 'included' && "What's included"}
              {t === 'place' && 'The place'}
              {t === 'teacher' && 'Your teacher'}
            </button>
          ))}
        </div>
      </section>

      <section className="section-tight">
        <div className="container detail-grid">
          <div className="detail-content">
            {tab === 'schedule' && (
              <div className="schedule-list">
                {days.map((day, i) => (
                  <div key={i} className="schedule-day">
                    <div className="schedule-day-head">
                      <div className="caption">{day.d}</div>
                      <div className="h3" style={{fontFamily:'var(--font-display)'}}>{day.t}</div>
                    </div>
                    <ul>
                      {day.activities.map((a, j) => (
                        <li key={j}>{a}</li>
                      ))}
                    </ul>
                  </div>
                ))}
              </div>
            )}
            {tab === 'included' && (
              <div className="included-grid">
                {[
                  ['Accommodation', '4 nights in our private Essaouira villa, twin or single room'],
                  ['Morning practice', '90min Rocket Yoga or Level-up Vinyasa with Sèlia'],
                  ['Evening practice', 'Yin session followed by guided Soundbath with Charlotte'],
                  ['Brunch & dinner', 'Healthy, fresh, drinks all day, fruit dates & mocktails'],
                  ['Surf lesson', 'One full lesson on the Essaouira bay'],
                  ['Hike & medina tour', 'Coastal hike, guided walk through the medina'],
                  ['Hammam session', 'Traditional Moroccan hammam, included'],
                  ['Aromatherapy workshop', 'Make your own blend, take it home'],
                ].map(([t, d], i) => (
                  <div key={i} className="included-item">
                    <span className="caption">{String(i + 1).padStart(2, '0')}</span>
                    <div>
                      <div className="h3" style={{fontFamily:'var(--font-display)', fontSize: 22}}>{t}</div>
                      <div className="body" style={{marginTop: 6, fontSize: 14}}>{d}</div>
                    </div>
                  </div>
                ))}
                <div className="included-item" style={{opacity: .55}}>
                  <span className="caption">,</span>
                  <div>
                    <div className="h3" style={{fontFamily:'var(--font-display)', fontSize: 22}}>Not included</div>
                    <div className="body" style={{marginTop: 6, fontSize: 14}}>Flights (Ryanair Charleroi to Essaouira, ~€120). Tourist tax (~€15pp, paid on arrival). Airport transfer (€15 each way, optional).</div>
                  </div>
                </div>
              </div>
            )}
            {tab === 'place' && (() => {
              const placeImages = [
                { src: 'images/riad-exterior-sunset.jpg', label: 'Stone walls at sunset' },
                { src: 'images/riad-atrium-fountain.jpg', label: 'Inner atrium with fountain' },
                { src: 'images/riad-pool-infinity.jpg', label: 'Infinity edge' },
                { src: 'images/riad-living-room.jpg', label: 'The long living room' },
                { src: 'images/riad-dining-tagine.jpg', label: 'Tagine on the table' },
                { src: 'images/riad-twin-beds-art.jpg', label: 'Twin room with art' },
                { src: 'images/riad-terrace-lounge.jpg', label: 'Outdoor lounge' },
                { src: 'images/riad-bedroom-curtains.jpg', label: 'Stone-walled suite' },
              ];
              const tags = ['P·01','P·02','P·03','P·04','P·05','P·06','P·07','P·08'];
              const coords = ['EXTERIOR','COURTYARD','POOL','LIVING','DINING','BEDROOM','TERRACE','BEDROOM'];
              return (
                <div className="place-content">
                  <h3 className="h2">Our private<br/><em>riad.</em></h3>
                  <p className="body" style={{marginTop: 24, fontSize: 17, color:'var(--ink)', maxWidth: 60+'ch'}}>
                    A modern stone villa on the edge of Essaouira, ours for the entire week. Eight bedrooms, an open central courtyard with a fountain, an infinity pool looking onto the Atlas foothills, and a long living room where the light moves all afternoon. Morning practice in the courtyard, afternoon Yin upstairs, dinners around one big table.
                  </p>
                  <div className="place-grid">
                    {placeImages.map((img, i) => (
                      <Placeholder key={i} coords={coords[i]} label={img.label} tag={tags[i]} src={img.src} pos="center"
                        group="riad-place" groupImages={placeImages} groupIndex={i} />
                    ))}
                  </div>
                </div>
              );
            })()}
            {tab === 'teacher' && (
              <div className="teacher-content teacher-pair">
                <div className="teacher-card">
                  <Placeholder coords="CHARLOTTE" label="Charlotte, evening Yin & Soundbath" tag="T·01" ratio={4/5} src="images/white-dress-rocks.png" pos="center 25%"/>
                  <div>
                    <div className="caption">Founder · evenings</div>
                    <h3 className="h2" style={{marginTop: 12}}>Charlotte<br/><em>Schoeters.</em></h3>
                    <p className="body" style={{marginTop: 24, fontSize: 17, color:'var(--ink)'}}>
                      Founder of Yogavibe, teaching since 2015. On this retreat she holds the evenings: Yin to soften what Rocket built up, then a long guided Soundbath to close the day.
                    </p>
                  </div>
                </div>
                <div className="teacher-card">
                  <Placeholder coords="SÈLIA" label="Sèlia, morning Rocket & Vinyasa" tag="T·02" ratio={4/5} src="images/selia-portrait.jpg" pos="center"/>
                  <div>
                    <div className="caption">Guest teacher · mornings</div>
                    <h3 className="h2" style={{marginTop: 12}}>Sèlia.</h3>
                    <p className="body" style={{marginTop: 24, fontSize: 17, color:'var(--ink)'}}>
                      Teaching since 2019, mainly Ashtanga, Rocket and Vinyasa. First trained at a 200-hour YTT in India. Each Rocket class is 90 minutes: shatkriyas and pranayama, then a structured but playful flow with strong, accessible postures, and room to adapt.
                    </p>
                    <div className="caption" style={{marginTop: 16}}>What is Rocket Yoga?</div>
                    <p className="body" style={{marginTop: 8, fontSize: 15, color:'var(--ink)'}}>
                      A dynamic, playful style derived from Ashtanga. Faster pace, strong focus on strength, flexibility and balance, with explicit permission to adapt every pose to your level.
                    </p>
                  </div>
                </div>
              </div>
            )}
          </div>

          <aside className="detail-booking">
            <div className="booking-card">
              <div className="caption">Book your spot</div>
              <div className="booking-price">
                <span className="h1" style={{fontSize: 56, fontFamily:'var(--font-display)'}}>€{total.toLocaleString()}</span>
                <span className="caption">/ {guests} {guests === 1 ? 'guest' : 'guests'}</span>
              </div>

              <div className="booking-row">
                <div className="caption">Room</div>
                <div className="booking-toggle">
                  <button className={room === 'twin' ? 'active' : ''} onClick={() => setRoom('twin')}>Twin · €1,050</button>
                  <button className={room === 'private' ? 'active' : ''} onClick={() => setRoom('private')}>Single · €1,350</button>
                </div>
              </div>

              <div className="booking-row">
                <div className="caption">Guests</div>
                <div className="booking-stepper">
                  <button onClick={() => setGuests(Math.max(1, guests - 1))}>−</button>
                  <span>{guests}</span>
                  <button onClick={() => setGuests(Math.min(4, guests + 1))}>+</button>
                </div>
              </div>

              <div className="booking-summary">
                <div className="row between"><span>Deposit (non-refundable)</span><span style={{color:'var(--accent)'}}>€500</span></div>
                <div className="row between"><span>Balance, due 45 days before</span><span>€{(total - 500).toLocaleString()}</span></div>
                <div className="caption" style={{marginTop: 14, color: 'var(--accent)'}}>★ Early-bird price, until 1 July (then €1,150 / €1,450)</div>
              </div>

              <button className="btn btn-primary" style={{width: '100%', justifyContent:'center', marginTop: 20}}
                onClick={() => { setBooking({ type: 'retreat', stripeKey: 'retreat-strength-stillness', title: 'From Strength to Stillness', loc: 'Essaouira, Morocco', dates: '07 to 11 Oct 2026', price: '€' + total.toLocaleString(), priceNum: total, img: 'uploads/ChatGPT Image 2 mei 2026, 17_00_54.png', pos: 'center' }); setPage('reservation'); }}>
                <span className="dot"></span> Reserve with deposit
              </button>
              <button className="btn btn-ghost" style={{width: '100%', justifyContent:'center', marginTop: 12}}
                onClick={() => window.location.href = `mailto:${window.YOGAVIBE_CONFIG.contact.email}?subject=Question%3A%20From%20Strength%20to%20Stillness`}>
                Have a question? Email us
              </button>

              <div className="booking-trust">
                <div className="caption">★ 4.9 · running since 2017</div>
                <div className="caption" style={{marginTop: 6}}>€500 deposit is non-refundable</div>
              </div>
            </div>
          </aside>
        </div>
      </section>
    </>
  );
}

function AboutPage({ setPage }) {
  usePageSEO(PAGE_SEO.about);
  return (
    <>
      <section className="section">
        <div className="container">
          <div className="caption">About Yogavibe</div>
          <h1 className="h-display" style={{marginTop: 24, maxWidth: 1100}}>
            We make<br/><em>retreats we'd</em><br/>want to go on.
          </h1>
        </div>
      </section>

      <section className="section-tight">
        <div className="container about-page-grid">
          <div>
            <Placeholder coords="ESSAOUIRA" label="Charlotte, lead teacher & founder" tag="01" ratio={4/5} src="images/white-dress-rocks.png" pos="center 25%" />
          </div>
          <div className="about-page-text">
            <p className="body" style={{fontSize: 18, color: 'var(--ink)'}}>
              Yogavibe started in 2017 with a single retreat in Essaouira and twelve very brave friends. Nine years on, we still run things the same way: small groups, two practices a day, real food, a different adventure every afternoon. We don't do "transformation". We do <em>rest</em>, <em>movement</em>, and <em>place</em>, and let the rest take care of itself.
            </p>
            <p className="body" style={{marginTop: 24}}>
              We're based in Antwerp; our retreats happen mostly in Morocco, where we've built a real working relationship with the riads, surf instructors, hammam, and pottery studios over the years. They're not vendors, they're part of the team. That continuity is most of why people come back year after year.
            </p>
          </div>
        </div>
      </section>
    </>
  );
}

function TermsPage({ setPage }) {
  usePageSEO(PAGE_SEO.terms);
  const clauses = [
    {
      n: '01', title: 'Voluntary participation & risk',
      body: 'Joining a Yogavibe retreat is entirely voluntary. Activities may include yoga, physical exercise, surf lessons, horseback riding, hikes, and international travel — all of which carry inherent risks. By booking, you accept personal responsibility for those risks. If you have any health concerns, we recommend consulting a doctor before participating.'
    },
    {
      n: '02', title: 'Medical disclosure',
      body: 'Before your retreat you must inform us of any medical conditions, injuries, medications, allergies, or other circumstances that may affect your participation. This information is kept confidential and used only to support your wellbeing on site. We will do our best to accommodate your needs where possible. If anything changes during the retreat, inform us immediately.'
    },
    {
      n: '03', title: 'Instructions and conduct',
      body: 'You agree to follow all reasonable instructions from Yogavibe staff and teachers — including those relating to safety, yoga technique, equipment, and general conduct. Instructors are trained to guide you safely; their guidance is there to protect everyone. If you have questions or concerns, ask. Failure to comply may result in dismissal from the retreat without refund.'
    },
    {
      n: '04', title: 'Travel to the retreat',
      body: "Getting to and from the retreat location is your responsibility. We don't arrange or cover the cost of international transport. We recommend arriving at least one day early to settle in. Non-arrival due to travel issues does not qualify for a refund."
    },
    {
      n: '05', title: 'Dismissal',
      body: 'We reserve the right to ask any participant to leave if their behaviour disrupts the retreat or compromises the safety or comfort of other guests or staff. This includes intoxication, disrespect, or persistent non-compliance with safety guidelines. No refund will be issued in the event of dismissal.'
    },
    {
      n: '06', title: 'Payments & cancellations',
      items: [
        'The €500 retreat deposit is non-refundable.',
        'The remaining balance is due 45 days before departure.',
        'Once paid in full, no part of the retreat fee is refundable.',
        'Fees cannot be transferred to another person or rescheduled without our prior written agreement.',
        'Workshop fees are paid in full and are non-refundable.'
      ]
    },
    {
      n: '07', title: 'Programme changes & cancellation by Yogavibe',
      body: 'We reserve the right to change the schedule, activities, or teachers where circumstances require — including weather, instructor availability, or events outside our control. We will notify you as soon as possible and provide alternatives where we can. In the rare event we cancel a retreat entirely, we will offer a full refund or the option to reschedule.'
    },
    {
      n: '08', title: 'Personal belongings',
      body: 'We are not responsible for personal items that are lost, stolen, or damaged during a retreat. Please take sensible precautions with valuables. We recommend travel insurance that covers personal possessions.'
    },
    {
      n: '09', title: 'Liability',
      body: 'Yogavibe and its instructors are not liable for any injury, illness, loss, or damage sustained during a retreat. You participate at your own risk. We strongly encourage you to hold travel and health insurance that covers activity-based holidays and medical treatment abroad.'
    },
    {
      n: '10', title: 'Photography & media',
      body: 'By joining a retreat, you grant Yogavibe permission to photograph and film activities for promotional use — including on our website, social media, and printed materials. We will not sell or share identifiable images of you with third parties. If you prefer not to appear in promotional content, let us know before arrival.'
    },
    {
      n: '11', title: 'Governing law',
      body: 'These terms are governed by Belgian law. Any disputes fall under the jurisdiction of the Belgian courts.'
    }
  ];

  return (
    <>
      <section className="section" style={{ paddingTop: 160 }}>
        <div className="container">
          <button className="caption back-link" onClick={() => setPage('home')}>← Back to home</button>
          <div style={{ maxWidth: 780, marginTop: 48 }}>
            <div className="eyebrow">Legal</div>
            <h1 className="h-display" style={{ marginTop: 24 }}>
              Terms &amp;<br /><em>Conditions.</em>
            </h1>
            <p className="body" style={{ marginTop: 28, color: 'var(--ink-soft)', fontSize: 14 }}>
              Yogavibe — SRI Group BV · BE 1037.052.239 · Last updated May 2026
            </p>
          </div>
        </div>
      </section>

      <section className="section-tight">
        <div className="container" style={{ maxWidth: 780 }}>
          {clauses.map((c, i) => (
            <div key={i} className="terms-clause">
              <div className="terms-clause-head">
                <span className="caption">{c.n}</span>
                <h2 className="h3" style={{ fontFamily: 'var(--font-display)', fontSize: 24 }}>{c.title}</h2>
              </div>
              {c.body && (
                <p className="body" style={{ marginTop: 16, fontSize: 15, lineHeight: 1.75 }}>{c.body}</p>
              )}
              {c.items && (
                <ul className="terms-list">
                  {c.items.map((item, j) => <li key={j}>{item}</li>)}
                </ul>
              )}
            </div>
          ))}

          <div className="terms-contact">
            <div className="caption">Questions about these terms?</div>
            <a href={`mailto:${window.YOGAVIBE_CONFIG.contact.email}`} className="body" style={{ marginTop: 8, display: 'block', color: 'var(--ink)' }}>{window.YOGAVIBE_CONFIG.contact.email}</a>
          </div>
        </div>
      </section>
    </>
  );
}

function PrivacyPage({ setPage }) {
  usePageSEO(PAGE_SEO.privacy);
  const sections = [
    {
      n: '01', title: 'Who we are',
      body: 'Yogavibe is a brand of SRI Group BV, a Belgian company registered under BE 1037.052.239, based in Antwerp. Charlotte Schoeters is the data controller. Contact: charlotte@yogavibe.eu · +32 499 200 701.'
    },
    {
      n: '02', title: 'What data we collect',
      items: [
        'Name, email address, phone number — provided when you book, enquire, or sign up for our newsletter.',
        'Dietary requirements and health information — only when you register for a retreat, and only what you choose to share.',
        'Payment data — processed entirely by Stripe. We never see or store your card details.',
        'Usage data — anonymous analytics (page views, session duration) via a privacy-friendly tool. No advertising trackers.',
        'Photos and video — taken during retreats, with your knowledge. You can opt out at any time.'
      ]
    },
    {
      n: '03', title: 'How we use your data',
      items: [
        'To confirm and manage your booking.',
        'To send pre-retreat information and post-retreat follow-up.',
        'To send our newsletter — only if you subscribed. Unsubscribe at any time.',
        'To improve our website and understand which pages are useful.',
        'To comply with legal obligations (invoicing, accounting).'
      ]
    },
    {
      n: '04', title: 'Legal basis (GDPR)',
      items: [
        'Contract — processing your booking and communicating about it.',
        'Legitimate interest — improving our services and website.',
        'Consent — newsletter emails. You can withdraw consent at any time.',
        'Legal obligation — invoicing and tax records.'
      ]
    },
    {
      n: '05', title: 'Who we share your data with',
      body: 'We do not sell your data. We share it only with the services needed to run Yogavibe: Stripe (payments), our email platform (newsletter), and the accommodation partner for your retreat. All processors are GDPR-compliant.'
    },
    {
      n: '06', title: 'How long we keep your data',
      items: [
        'Booking records — 7 years (Belgian accounting law).',
        'Newsletter subscriptions — until you unsubscribe.',
        'Enquiry emails — 2 years after last contact.',
        'Health information — deleted within 30 days of your retreat ending.'
      ]
    },
    {
      n: '07', title: 'Your rights',
      body: 'Under GDPR you have the right to access, correct, delete, or port your personal data, and to object to or restrict certain processing. To exercise any of these rights, email charlotte@yogavibe.eu. We will respond within 30 days. You also have the right to lodge a complaint with the Belgian Data Protection Authority (gegevensbeschermingsautoriteit.be).'
    },
    {
      n: '08', title: 'Cookies',
      body: 'We use only essential cookies (session state, preferences) and anonymous analytics. We do not use advertising, tracking, or third-party social cookies. No cookie banner is shown because no consent-requiring cookies are set.'
    },
    {
      n: '09', title: 'Changes to this policy',
      body: 'We may update this policy occasionally. The date at the top of the page reflects the most recent revision. Continued use of our website after an update constitutes acceptance of the revised policy.'
    }
  ];

  return (
    <>
      <section className="section" style={{ paddingTop: 160 }}>
        <div className="container">
          <button className="caption back-link" onClick={() => setPage('home')}>← Back to home</button>
          <div style={{ maxWidth: 780, marginTop: 48 }}>
            <div className="eyebrow">Legal</div>
            <h1 className="h-display" style={{ marginTop: 24 }}>
              Privacy<br /><em>Policy.</em>
            </h1>
            <p className="body" style={{ marginTop: 28, color: 'var(--ink-soft)', fontSize: 14 }}>
              Yogavibe — SRI Group BV · BE 1037.052.239 · Last updated May 2026
            </p>
          </div>
        </div>
      </section>

      <section className="section-tight">
        <div className="container" style={{ maxWidth: 780 }}>
          {sections.map((s, i) => (
            <div key={i} className="terms-clause">
              <div className="terms-clause-head">
                <span className="caption">{s.n}</span>
                <h2 className="h3" style={{ fontFamily: 'var(--font-display)', fontSize: 24 }}>{s.title}</h2>
              </div>
              {s.body && (
                <p className="body" style={{ marginTop: 16, fontSize: 15, lineHeight: 1.75 }}>{s.body}</p>
              )}
              {s.items && (
                <ul className="terms-list">
                  {s.items.map((item, j) => <li key={j}>{item}</li>)}
                </ul>
              )}
            </div>
          ))}

          <div className="terms-contact">
            <div className="caption">Privacy questions or data requests?</div>
            <a href={`mailto:${window.YOGAVIBE_CONFIG.contact.email}`} className="body" style={{ marginTop: 8, display: 'block', color: 'var(--ink)' }}>{window.YOGAVIBE_CONFIG.contact.email}</a>
          </div>
        </div>
      </section>
    </>
  );
}

Object.assign(window, { RetreatsPage, RetreatDetailPage, AboutPage, TermsPage, PrivacyPage });