/* Yogavibe, homepage sections part 2 */

/* ============ EXPERIENCE / DAY IN THE LIFE ============ */
function DayInLife() {
  const schedule = [
  { time: '07:30', label: 'Tea on the rooftop', detail: 'Mint, ginger, no rush.' },
  { time: '08:00', label: 'Morning yoga', detail: '90 min Vinyasa with Charlotte.' },
  { time: '10:00', label: 'Slow breakfast', detail: 'Msemen, fruit, fresh juice.' },
  { time: '11:30', label: 'Today\'s adventure', detail: 'Surf · horseback · hammam · pottery.' },
  { time: '14:00', label: 'Lunch in the riad', detail: 'Long, shared, vegetarian.' },
  { time: '15:00', label: 'Free time', detail: 'Relax at the pool, read a book, do nothing at all.' },
  { time: '19:00', label: 'Sunset Pilates or Yin', detail: '60 min, gentler than the morning.' },
  { time: '20:30', label: 'Dinner', detail: 'Tagine, wine, longer than expected.' }];

  return (
    <section className="section day-section">
      <div className="container">
        <div className="day-grid">
          <div className="day-text">
            <div className="eyebrow">A day in the life</div>
            <h2 className="h1" style={{ marginTop: 16 }}>Two practices.<br />One <em>real</em> day.</h2>
            <p className="lead" style={{ marginTop: 28 }}>We hold the rhythm. You do as much or as little as you like. The middle of the day is yours - wander the medina, nap, swim, write postcards. Or do nothing at all.

            </p>
            <div className="day-quote">
              <div className="caption">Day 04 · Essaouira</div>
              <blockquote className="h3" style={{ marginTop: 12, fontStyle: 'italic' }}>
                "I forgot what day it was on Wednesday. That was the point."
              </blockquote>
              <div className="caption" style={{ marginTop: 12 }}>Annick, Belgium</div>
            </div>
          </div>
          <div className="day-schedule">
            {schedule.map((s, i) =>
            <div key={i} className="day-row">
                <span className="day-time">{s.time}</span>
                <div className="day-row-body">
                  <div className="day-label">{s.label}</div>
                  <div className="day-detail">{s.detail}</div>
                </div>
                <span className="day-dot"></span>
              </div>
            )}
          </div>
        </div>
      </div>
    </section>);

}

/* ============ TESTIMONIAL CAROUSEL ============ */
function Testimonials() {
  const quotes = [
  { q: "My yoga-week in Essaouira was one of the most valuable experiences of the last years. Yoga-classes by Charlotte (the best), nice accommodation, very healthy food and lots of fun side activities.", a: "Annick de Herdt", l: "Belgium", r: "Essaouira" },
  { q: "An amazing wellness holiday with Charlotte in Phuket, also my first yoga class. She was the perfect guide for my introduction to yoga, and a definite highlight was the Thai cooking class.", a: "Xandra", l: "Netherlands", r: "Phuket" },
  { q: "I really enjoyed the week in the superb riad in Essaouira. Charlotte let me taste the best of everything, food, surf, hike, yoga. Nothing we asked was too much.", a: "Caroline Lafère", l: "Belgium", r: "Essaouira" },
  { q: "Charlotte introduced various yoga types to the class which was excellent for all the beginners. The experience was TOP, I recommend Yogavibe to anyone wanting a vacation in a beautiful setting.", a: "Susan Calhoun", l: "USA", r: "Essaouira" },
  { q: "Well-organized, great food, lovely accommodation and of course fantastic daily yoga courses with a nice group of co-travellers. I would go again anytime!", a: "M.L.", l: "Belgium", r: "Essaouira" }];


  const [i, setI] = React.useState(0);
  React.useEffect(() => {
    const t = setInterval(() => setI((prev) => (prev + 1) % quotes.length), 7000);
    return () => clearInterval(t);
  }, []);
  return (
    <section className="section testimonials" style={{ background: 'var(--bg-deep)', color: 'var(--bg)' }}>
      <div className="container">
        <div className="row between center" style={{ marginBottom: 64 }}>
          <div>
            <div className="eyebrow" style={{ color: 'oklch(from var(--bg) l c h / 0.6)' }}>What guests say</div>
            <h2 className="h1" style={{ marginTop: 16, color: 'var(--bg)' }}><br /><em>4.9 stars.</em></h2>
          </div>
          <div className="testi-nav">
            {quotes.map((_, idx) =>
            <button key={idx} className={`testi-dot ${idx === i ? 'active' : ''}`} onClick={() => setI(idx)}>{String(idx + 1).padStart(2, '0')}</button>
            )}
          </div>
        </div>
        <div className="testi-stage">
          {quotes.map((qq, idx) =>
          <div key={idx} className={`testi-slide ${idx === i ? 'active' : ''}`}>
              <div className="testi-stars">★ ★ ★ ★ ★</div>
              <blockquote className="testi-quote">"{qq.q}"</blockquote>
              <div className="testi-attr">
                <div>
                  <div className="testi-name">{qq.a}</div>
                  <div className="caption" style={{ color: 'oklch(from var(--bg) l c h / 0.55)', marginTop: 4 }}>{qq.l}</div>
                </div>
                <div className="caption" style={{ color: 'oklch(from var(--bg) l c h / 0.55)' }}>{qq.r}</div>
              </div>
            </div>
          )}
        </div>
      </div>
    </section>);

}

/* ============ ABOUT / TEACHERS ============ */
function AboutBlock({ setPage }) {
  return (
    <section className="section about-block">
      <div className="container">
        <div className="about-grid">
          <div className="about-img">
            <Placeholder coords="ESSAOUIRA" label="Charlotte by the rocks" tag="PORTRAIT" ratio={3 / 4} src="images/white-dress-rocks.png" pos="center 25%" />
          </div>
          <div className="about-text">
            <div className="eyebrow">Who runs this</div>
            <h2 className="h1" style={{ marginTop: 16 }}>Charlotte<br /><em>& Yogavibe.</em></h2>
            <p className="body" style={{ marginTop: 28, fontSize: 17, color: 'var(--ink)' }}>
              I started Yogavibe in 2017 because the retreats I was going on felt like bootcamps. I wanted something slower, with better food, real friendships, and time to just <em>be</em> somewhere - not just practice somewhere.
            </p>
            <p className="body" style={{ marginTop: 16 }}>
              Nine years on, the format hasn't changed much. Small groups, never more than 12. Two classes a day. A new adventure every afternoon. A long lunch. A longer dinner.
            </p>
            <div style={{ marginTop: 40 }}>
              <button className="btn btn-ghost" onClick={() => setPage('about')}>
                Read more about us →
              </button>
            </div>
            <div className="about-creds">
              <div><div className="caption">Trained in</div><div className="body" style={{ color: 'var(--ink)' }}>Costa Rica</div></div>
              <div><div className="caption">Teaching since</div><div className="body" style={{ color: 'var(--ink)' }}>2015</div></div>
              <div><div className="caption">Background</div><div className="body" style={{ color: 'var(--ink)' }}>Tour guide · Thomas Cook, TUI fly</div></div>
            </div>
          </div>
        </div>
      </div>
    </section>);

}

/* ============ WORKSHOPS STRIP ============ */
function Workshops({ setPage }) {
  const featured = [
  { date: '28 May', day: 'THU', title: 'Reis naar de Stilte', subtitle: 'Adem · Soundbath · EES', loc: 'Citta Holistic Haven, Antwerp', time: '19:00 to 21:00', price: '€75', img: 'uploads/ChatGPT Image 22 apr 2026, 14_27_13.png' },
  { date: '17 Oct', day: 'SAT', title: 'The Yoga Deep Dive', subtitle: 'For the curious practitioner', loc: 'Citta Holistic Haven, Antwerp', time: '10:00 to 17:00', price: '€225', img: 'uploads/ChatGPT Image 22 apr 2026, 14_53_05.png' }];

  return (
    <section className="section workshops-section">
      <div className="container">
        <div className="row between center" style={{ marginBottom: 48, flexWrap: 'wrap', gap: 16 }}>
          <div>
            <div className="eyebrow">Closer to home</div>
            <h2 className="h1" style={{ marginTop: 16 }}>Workshops in <em>Antwerp.</em></h2>
          </div>
          <a className="link-arrow" onClick={() => setPage && setPage('workshops')} style={{ cursor: 'pointer' }}>All workshops →</a>
        </div>
        <div className="workshops-featured">
          {featured.map((w, i) =>
          <article key={i} className="workshop-feat" onClick={() => setPage && setPage('workshops')}>
              <div className="workshop-feat-img">
                <img src={w.img} alt={w.title} />
              </div>
              <div className="workshop-feat-body">
                <div className="caption">{w.day} · {w.date} · {w.time}</div>
                <h3 className="h2" style={{ marginTop: 12, fontSize: 32 }}>{w.title}</h3>
                <div className="caption" style={{ marginTop: 8, color: 'var(--accent)' }}>{w.subtitle}</div>
                <div className="row between center" style={{ marginTop: 24, paddingTop: 20, borderTop: '1px solid var(--line)' }}>
                  <span className="caption">{w.loc}</span>
                  <span className="h3" style={{ fontFamily: 'var(--font-display)', fontSize: 22 }}>{w.price}</span>
                </div>
              </div>
            </article>
          )}
        </div>
      </div>
    </section>);

}

/* ============ GALLERY GRID ============ */
function Gallery() {
  const items = [
  { c: 'YOGA', l: 'Morning practice', t: 'G·01', s: 'wide', src: 'uploads/WhatsApp Image 2026-03-30 at 10.57.15.jpeg', pos: 'center' },
  { c: 'ESSAOUIRA', l: 'In the medina', t: 'G·02', s: 'tall', src: 'uploads/ChatGPT Image 2 mei 2026, 16_50_12.png', pos: 'center' },
  { c: 'BEACH', l: 'Afternoon at the ocean', t: 'G·03', s: 'tall', src: 'uploads/IMG-20230926-WA0041.jpg', pos: 'center' },
  { c: 'DAY 01', l: 'Arrival day vibes', t: 'G·04', s: 'wide', src: 'uploads/IMG-20230925-WA0002.jpg', pos: 'center' },
  { c: 'ESSAOUIRA', l: 'Sand dunes, free afternoon', t: 'G·05', s: 'tall', src: 'uploads/ChatGPT Image 2 mei 2026, 16_42_23.png', pos: 'center' },
  { c: 'MEDINA', l: 'Olives at the souk', t: 'G·06', s: 'wide', src: 'uploads/olives-food-market-essaouira-medina-morocco-fd564ed5.jpg', pos: 'center' },
  { c: 'DAY 04', l: 'Horseback on the beach', t: 'G·07', s: 'square', src: 'uploads/IMG-20231004-WA0036.jpg', pos: 'center' },
  { c: 'DAY 02', l: 'Morning light', t: 'G·08', s: 'square', src: 'uploads/IMG-20230925-WA0004.jpg', pos: 'center' },
  { c: 'DAY 03', l: 'Wandering the streets', t: 'G·09', s: 'square', src: 'uploads/IMG-20230927-WA0071.jpg', pos: 'center' },
  { c: 'DAY 07', l: 'Last evening together', t: 'G·10', s: 'square', src: 'uploads/IMG-20231001-WA0000.jpg', pos: 'center' }];

  const groupImages = items.map(it => ({ src: it.src, label: it.l }));

  return (
    <section className="section gallery-section">
      <div className="container">
        <div className="row between center" style={{ marginBottom: 56, flexWrap: 'wrap', gap: 16 }}>
          <div>
            <div className="eyebrow">From the camera roll</div>
            <h2 className="h1" style={{ marginTop: 16 }}>Real photos.<br /><em>Real days.</em></h2>
          </div>
          <p className="lead" style={{ maxWidth: 360 }}>Mostly taken by us, between classes. Nothing staged. The light just does that there.</p>
        </div>
        <div className="gallery-grid">
          {items.map((it, i) =>
          <div key={i} className={`gallery-item gallery-${it.s}`}>
              <Placeholder coords={it.c} label={it.l} tag={it.t} src={it.src} pos={it.pos}
                group="gallery" groupImages={groupImages} groupIndex={i} />
            </div>
          )}
        </div>
      </div>
    </section>);

}

/* ============ FAQ ============ */
function FAQ() {
  const [open, setOpen] = React.useState(0);
  const items = [
  { q: 'What is Yogavibe?', a: 'Yogavibe is a Belgian yoga-retreat company founded in 2017 by yoga instructor Charlotte Schoeters. We run small-group yoga retreats in Morocco (Essaouira and Marrakech), custom retreats for companies, friend groups and yoga teachers, and yoga / soundbath workshops in Antwerp. Maximum 12 guests, two daily classes, real food, no spiritual fluff.' },
  { q: 'Where does Yogavibe host retreats?', a: 'Primarily in Essaouira and Marrakech, Morocco, where we have long-term partnerships with private riads, surf instructors, hammams and pottery studios. We have also hosted retreats in Phuket, Thailand, and we design custom retreats elsewhere on request.' },
  { q: 'Are the retreats suitable for beginners?', a: 'Yes. Roughly half our guests are new-ish to yoga. Classes are taught at three levels in the same room (beginner, intermediate, deeper variations) so you choose your pace.' },
  { q: 'I\'m travelling solo. Will I feel comfortable?', a: 'About 60% of our guests come solo. Single rooms are available. Groups are small (max 12) so the feeling is intimate by day two. That\'s genuinely the most consistent thing guests tell us.' },
  { q: 'What\'s included in the price?', a: 'Accommodation (4 to 6 nights depending on the retreat), three daily meals, two daily yoga classes, one daily activity (rotating: surf, horseback, hammam, pottery, cooking, medina walk) and airport transfers. Flights are not included.' },
  { q: 'How much does a Yogavibe retreat cost?', a: 'Group retreats start from €1,050 per person for a 4-night Essaouira retreat in twin sharing. Single rooms are €1,350. Custom retreats start from €950 per person, all inclusive of accommodation, food, classes, activities and transfers.' },
  { q: 'Can I book a private retreat for my company or group of friends?', a: 'Yes, custom retreats are a core part of what we do. Full riad takeover for groups of 8 to 18, with a custom-built schedule. Charlotte\'s tour-guide background (Thomas Cook, TUI fly) means logistics are handled professionally. Email charlotte@yogavibe.eu.' },
  { q: 'Who is Charlotte Schoeters?', a: 'Charlotte is the founder and lead teacher of Yogavibe. Born in Antwerp, Belgium, certified yoga instructor since 2015 (trained in Costa Rica), with a background as a tour guide for Thomas Cook and TUI fly. She teaches Vinyasa, Yin, Pilates, breathwork and soundbath.' },
  { q: 'How challenging is the yoga?', a: 'Two classes a day: a stronger morning practice (typically Vinyasa or Rocket) and a gentler afternoon or evening session (Yin or Pilates). Most guests are intermediate. We teach to multiple levels in the same room and never push anyone past their edge.' },
  { q: 'What\'s the cancellation policy?', a: 'The €500 deposit is non-refundable. The balance is due 45 days before departure. Once paid in full, no part of the retreat fee is refundable; bookings can be transferred to another retreat within 12 months by agreement.' },
  { q: 'How do I get to the retreat?', a: 'For Essaouira retreats, fly into Marrakech (RAK) and we arrange the airport transfer (about 2.5 hours by road) or fly direct into Essaouira (ESU). Ryanair flies Charleroi to Essaouira from approximately €120 round-trip. Transfers are included in custom retreats and available as an add-on for group retreats.' },
  { q: 'Does Yogavibe offer gift cards?', a: 'Yes. Yogavibe gift cards are available in €50, €100, €150, €200 and €500 denominations. Digital delivery (free) or physical card by post (+€10). Redeemable on any retreat or workshop. Valid for 24 months from purchase.' }];

  return (
    <section className="section faq-section">
      <div className="container faq-grid">
        <div className="faq-left">
          <div className="eyebrow">Practical things</div>
          <h2 className="h1" style={{ marginTop: 16 }}>Questions,<br /><em>answered.</em></h2>
          <p className="lead" style={{ marginTop: 28 }}>If yours isn't here, write us, we read every email.</p>
          <button className="btn btn-ghost" style={{ marginTop: 32 }}>Email us →</button>
        </div>
        <div className="faq-list">
          {items.map((it, i) =>
          <div key={i} className={`faq-row ${open === i ? 'open' : ''}`} onClick={() => setOpen(open === i ? -1 : i)}>
              <div className="faq-q">
                <span className="caption">{String(i + 1).padStart(2, '0')}</span>
                <span className="h3" style={{ fontFamily: 'var(--font-display)' }}>{it.q}</span>
                <span className="faq-icon">{open === i ? '–' : '+'}</span>
              </div>
              {open === i && <div className="faq-a">{it.a}</div>}
            </div>
          )}
        </div>
      </div>
    </section>);

}

/* ============ NEWSLETTER + INSTAGRAM ============ */
const ML_ACCOUNT_ID = window.YOGAVIBE_CONFIG.integrations.mailerlite.accountId;
const ML_FORM_ID    = window.YOGAVIBE_CONFIG.integrations.mailerlite.formId;

function NewsletterStrip() {
  const [email, setEmail] = React.useState('');
  const [status, setStatus] = React.useState('idle'); // idle | loading | success | error

  const handleSubmit = async (e) => {
    e.preventDefault();
    setStatus('loading');
    try {
      const params = new URLSearchParams({ 'fields[email]': email, 'ml-submit': '1', 'anticsrf': 'true', 'ajax': '1' });
      const res = await fetch(
        `https://assets.mailerlite.com/jsonp/${ML_ACCOUNT_ID}/forms/${ML_FORM_ID}/subscribe`,
        { method: 'POST', body: params, headers: { 'Content-Type': 'application/x-www-form-urlencoded' } }
      );
      if (!res.ok) throw new Error('Network error');
      setStatus('success');
    } catch {
      setStatus('error');
    }
  };

  return (
    <section className="section newsletter-section">
      <div className="container">
        <div className="newsletter-card">
          <div className="newsletter-text">
            <div className="eyebrow">Stay close</div>
            <h2 className="h1" style={{ marginTop: 16 }}>One letter,<br /><em>once a month.</em></h2>
            <p className="lead" style={{ marginTop: 24 }}>New retreat dates, photos from the last one, a recipe or a reading. No spam, promise.</p>
          </div>
          <form className="newsletter-form" onSubmit={handleSubmit}>
            {status === 'success' ?
              <div className="newsletter-success">
                <div className="h3">You're in ✿</div>
                <div className="body" style={{ marginTop: 8 }}>First letter drops next month. Good to have you.</div>
              </div>
            : <>
                <input
                  type="email" required value={email}
                  onChange={(e) => setEmail(e.target.value)}
                  placeholder="your@email.com"
                  disabled={status === 'loading'} />
                <button className="btn btn-primary" type="submit" disabled={status === 'loading'}>
                  <span className="dot"></span> {status === 'loading' ? 'Subscribing…' : 'Subscribe'}
                </button>
                {status === 'error'
                  ? <div className="caption" style={{ marginTop: 12, color: 'var(--accent)' }}>Something went wrong — try again or email <a href={`mailto:${window.YOGAVIBE_CONFIG.contact.email}`}>{window.YOGAVIBE_CONFIG.contact.email}</a></div>
                  : <div className="caption" style={{ marginTop: 12 }}>~1 email per month · Unsubscribe anytime</div>
                }
              </>
            }
          </form>
        </div>
      </div>
    </section>);

}

/* ============ INSTAGRAM ============
   To go live: set BEHOLD_FEED_ID to your feed ID from https://behold.so
   (the value after /feeds/ in your dashboard URL). Leave null to use the
   static fallback at data/instagram.json. */
const BEHOLD_FEED_ID = window.YOGAVIBE_CONFIG.integrations.behold.feedId;

function normaliseBeholdPost(p) {
  // Behold's /feed/<id> returns posts with `sizes.medium.mediaUrl`, `permalink`,
  // `mediaType`, `prunedCaption`/`caption`, `timestamp`. Map to our shape.
  const sizes = p.sizes || {};
  const thumb =
    (sizes.medium && sizes.medium.mediaUrl) ||
    (sizes.large && sizes.large.mediaUrl) ||
    (sizes.small && sizes.small.mediaUrl) ||
    p.thumbnailUrl || p.mediaUrl;
  return {
    id: p.id,
    permalink: p.permalink,
    mediaType: p.mediaType,
    thumbnail: thumb,
    timestamp: p.timestamp,
    caption: p.prunedCaption || p.caption || ''
  };
}

function InstagramStrip() {
  const [data, setData] = React.useState(null);
  const [err, setErr] = React.useState(false);

  React.useEffect(() => {
    const live = BEHOLD_FEED_ID
      ? fetch(`https://feeds.behold.so/${BEHOLD_FEED_ID}`)
          .then((r) => r.ok ? r.json() : Promise.reject())
          .then((d) => ({
            username: d.username,
            followersCount: d.followersCount,
            posts: (d.posts || []).map(normaliseBeholdPost)
          }))
      : Promise.reject();

    live
      .catch(() =>
        fetch('data/instagram.json').then((r) => r.ok ? r.json() : Promise.reject())
      )
      .then((d) => setData(d))
      .catch(() => setErr(true));
  }, []);

  const fmt = (ts) => {
    try {
      const d = new Date(ts);
      return d.toLocaleDateString('en-GB', { day: '2-digit', month: 'short', year: 'numeric' });
    } catch (e) { return ''; }
  };

  const posts = (data && data.posts) ? data.posts.slice(0, 6) : [];
  const username = (data && data.username) ? data.username : 'yogavibe.eu';
  const followers = (data && data.followersCount) ? data.followersCount.toLocaleString() : null;

  return (
    <section className="section-tight insta-section">
      <div className="container">
        <div className="row between center" style={{ marginBottom: 32, flexWrap: 'wrap', gap: 16 }}>
          <div>
            <div className="eyebrow">@{username}, recent</div>
            {followers && <div className="caption" style={{ marginTop: 6 }}>{followers} followers · live feed</div>}
          </div>
          <a className="link-arrow" href={`https://instagram.com/${username}`} target="_blank" rel="noopener">Follow on Instagram →</a>
        </div>
        <div className="insta-grid">
          {err && (
            <div className="caption" style={{ gridColumn: '1 / -1', padding: 24, border: '1px solid var(--line)' }}>
              Couldn't load the feed. <a href={`https://instagram.com/${username}`} target="_blank" rel="noopener">Open Instagram →</a>
            </div>
          )}
          {!err && posts.length === 0 && Array.from({ length: 6 }).map((_, i) => (
            <div key={i} className="insta-item insta-skeleton" aria-hidden="true" />
          ))}
          {posts.map((p, i) => (
            <a key={p.id || i} className="insta-item" href={p.permalink} target="_blank" rel="noopener" aria-label={p.caption || 'Instagram post'}>
              <div className="insta-media">
                <img src={p.thumbnail} alt={p.caption || ''} loading="lazy" />
                {p.mediaType === 'VIDEO' && (
                  <span className="insta-badge" aria-label="Reel">
                    <svg width="14" height="14" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2.2"><polygon points="6 4 20 12 6 20 6 4" fill="currentColor" stroke="none"></polygon></svg>
                  </span>
                )}
                {p.mediaType === 'CAROUSEL_ALBUM' && (
                  <span className="insta-badge" aria-label="Carousel">
                    <svg width="14" height="14" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2"><rect x="7" y="7" width="13" height="13" rx="1.5"></rect><path d="M4 16V5a1 1 0 0 1 1-1h11"></path></svg>
                  </span>
                )}
              </div>
              <div className="insta-meta">
                <div className="insta-caption">{p.caption}</div>
                <div className="insta-date caption">{fmt(p.timestamp)}</div>
              </div>
            </a>
          ))}
        </div>
      </div>
    </section>);

}

/* ============ FOOTER ============ */
function Footer({ setPage }) {
  return (
    <footer className="footer">
      <div className="container">
        <div className="footer-top">
          <div className="footer-brand">
            <LogoMark size={40} />
            <div className="h1" style={{ fontSize: 'clamp(48px, 7vw, 96px)', marginTop: 24 }}>
              See you<br /><em>in Morocco.</em>
            </div>
          </div>
          <div className="footer-cols">
            <div>
              <div className="caption">Visit</div>
              <ul>
                <li><a style={{cursor:'pointer'}} onClick={() => setPage('retreats')}>All retreats</a></li>
                <li><a style={{cursor:'pointer'}} onClick={() => setPage('workshops')}>Workshops</a></li>
                <li><a style={{cursor:'pointer'}} onClick={() => setPage('giftcard')}>Gift cards</a></li>
                <li><a style={{cursor:'pointer'}} onClick={() => setPage('custom')}>Custom retreats</a></li>
              </ul>
            </div>
            <div>
              <div className="caption">Connect</div>
              <ul>
                <li><a href={window.YOGAVIBE_CONFIG.social.instagramUrl} target="_blank" rel="noopener">Instagram</a></li>
                <li><a href={window.YOGAVIBE_CONFIG.social.trustpilotUrl} target="_blank" rel="noopener">Trustpilot</a></li>
                <li><a href={window.YOGAVIBE_CONFIG.contact.whatsapp} target="_blank" rel="noopener">WhatsApp</a></li>
                <li><a href={`mailto:${window.YOGAVIBE_CONFIG.contact.email}`}>Email</a></li>
              </ul>
            </div>
            <div>
              <div className="caption">Contact</div>
              <ul>
                <li><a href={`tel:${window.YOGAVIBE_CONFIG.contact.phoneTel}`}>{window.YOGAVIBE_CONFIG.contact.phone}</a></li>
                <li><a href={`mailto:${window.YOGAVIBE_CONFIG.contact.email}`}>{window.YOGAVIBE_CONFIG.contact.email}</a></li>
                <li><span className="caption">Antwerp · Belgium</span></li>
                <li><span className="caption">Essaouira · Morocco</span></li>
              </ul>
            </div>
          </div>
        </div>
        <div className="footer-bottom">
          <div className="caption">© 2026 SRI GROUP BV | BE 1037.052.239</div>
          <div className="caption">YOGAVIBE | RETREATS & WORKSHOPS, EST. 2017</div>
          <div className="caption">
            <span style={{ cursor: 'pointer', textDecoration: 'underline', textUnderlineOffset: 3 }} onClick={() => setPage && setPage('terms')}>Terms</span>
            {' · '}
            <span style={{ cursor: 'pointer', textDecoration: 'underline', textUnderlineOffset: 3 }} onClick={() => setPage && setPage('privacy')}>Privacy</span>
          </div>
        </div>
      </div>
    </footer>);

}

Object.assign(window, { DayInLife, Testimonials, AboutBlock, Workshops, Gallery, FAQ, NewsletterStrip, InstagramStrip, Footer });