/* Yogavibe, homepage sections (continued) */

/* ============ MARQUEE / VALUES ============ */
function ValueMarquee() {
  const items = ['Sunrise yoga', 'Surf lessons', 'Moroccan hammam', 'Horseback on the dunes', 'Pottery & cooking', 'Sea-salt swims', 'No phone hours', 'Real friendships'];
  const Star = () =>
  <svg viewBox="0 0 24 24" className="star" fill="currentColor">
      <path d="M12 2 L13.5 9.5 L21 11 L13.5 12.5 L12 21 L10.5 12.5 L3 11 L10.5 9.5 Z" />
    </svg>;

  return (
    <div className="marquee">
      <div className="marquee-track">
        {[...items, ...items].map((it, i) =>
        <span key={i} className="marquee-item">
            {it} <Star />
          </span>
        )}
      </div>
    </div>);

}

/* ============ INTRO / MANIFESTO ============ */
function Intro() {
  return (
    <section className="section">
      <div className="container intro-grid">
        <div className="intro-left">
          <div className="eyebrow">A note from us</div>
        </div>
        <div className="intro-right">
          <p className="intro-text">
            Yogavibe doesn't organize die-hard retreats. We <em>love</em> the practice - but we love the <em>place</em> just as much. Mornings are for breath and movement. Afternoons are for whatever the day asks for: a horse on the dunes, hands in clay, a long lunch, a quiet hour. Come exhausted. Leave as yourself again.
          </p>
          <div className="intro-sig">
            <div className="caption">Charlotte & the Yogavibe team</div>
          </div>
        </div>
      </div>
    </section>);

}

/* ============ FEATURED RETREAT ============ */
function FeaturedRetreat({ setPage }) {
  return (
    <section className="section featured">
      <div className="container">
        <div className="row between center" style={{ marginBottom: 56, flexWrap: 'wrap', gap: 16 }}>
          <div>
            <div className="eyebrow">Featured · Next departure</div>
            <h2 className="h1" style={{ marginTop: 16 }}>
              From Strength<br />to <em>Stillness.</em>
            </h2>
            <div className="caption" style={{ marginTop: 14, fontSize: 12, letterSpacing: '.14em' }}>
              Level up your Vinyasa & deepen your soul
            </div>
          </div>
          <div className="featured-meta-stack">
            <div><span className="caption">Dates</span><div className="body" style={{ color: 'var(--ink)' }}>07 to 11 Oct 2026</div></div>
            <div><span className="caption">From</span><div className="body" style={{ color: 'var(--ink)' }}>€1,050 / 4 nights</div></div>
            <div><span className="caption">Early bird</span><div className="body" style={{ color: 'var(--accent)' }}>Until 1 Jul</div></div>
          </div>
        </div>

        <div className="featured-grid">
          <div className="featured-img-main">
            <Placeholder coords="ESSAOUIRA · MORNING PRACTICE" label="Downward dog on the terrace" tag="01 / 12" src="uploads/ChatGPT Image 2 mei 2026, 18_09_09.png" pos="center" />
          </div>
          <div className="featured-img-secondary">
            <Placeholder coords="ESSAOUIRA · THE VILLA" label="Luxury villa, Morocco" tag="02 / 12" ratio={1} src="uploads/villa.png" pos="center" />
          </div>
          <div className="featured-img-tertiary">
            <Placeholder coords="ESSAOUIRA · THE PRACTICE" label="Yoga session in the riad" tag="03 / 12" ratio={1} src="uploads/ChatGPT Image 2 mei 2026, 16_13_54.png" pos="center" />
          </div>
          <div className="featured-text">
            <p className="body" style={{ fontSize: 17, lineHeight: 1.65, color: 'var(--ink)' }}>
              Five days where energetic <em>Rocket & Vinyasa</em> meets deep stillness. Mornings led by Sèlia (Rocket / Level-up Vinyasa, 90 min), days filled with adventures, evenings closed by Charlotte with <em>Yin & Soundbath</em>. Two teachers, one villa, the right kind of tired.
            </p>
            <ul className="featured-list">
              <li><span className="caption">01</span><span>Morning · 90 min Rocket Yoga or Level-up Vinyasa with Sèlia</span></li>
              <li><span className="caption">02</span><span>Evening · Yin session followed by a guided Soundbath with Charlotte</span></li>
              <li><span className="caption">03</span><span>Daily activity: surf lesson · hike · medina tour · hammam · aromatherapy workshop</span></li>
              <li><span className="caption">04</span><span>Four nights in our private Essaouira villa (twin or single)</span></li>
              <li><span className="caption">05</span><span>Brunch & dinner daily, drinks all day, fruit dates & mocktails in the afternoon</span></li>
            </ul>
            <div style={{ marginTop: 40, display: 'flex', gap: 12, flexWrap: 'wrap' }}>
              <button className="btn btn-primary" onClick={() => setPage('retreat-detail')}>
                <span className="dot"></span> See the full week
              </button>
              <button className="btn btn-ghost" onClick={() => setPage('retreat-detail')}>
                Reserve a spot →
              </button>
            </div>
          </div>
        </div>
      </div>
    </section>);

}

/* ============ INSIDE THE RIAD (video) ============ */
function InsideTheRiad() {
  const [playing, setPlaying] = React.useState(false);
  const VIDEO_ID = window.YOGAVIBE_CONFIG.integrations.youtube.riadTourId;
  const facts = [
  { k: '06', l: 'Bedrooms, twin or private' },
  { k: '01', l: 'Open courtyard with fountain' },
  { k: '∞', l: 'Pool · Atlas-foothill view' },
  { k: '03', l: 'Staff · chef, cleaning & security' }];

  return (
    <section className="section inside-riad">
      <div className="container">
        <div className="inside-head">
          <div className="eyebrow">Take the tour</div>
          <h2 className="h1" style={{ marginTop: 16, fontSize: 'clamp(64px, 7.5vw, 120px)' }}>
            Inside the<br /><em>Riad.</em>
          </h2>
          <p className="lead" style={{ maxWidth: 460, marginTop: 24 }}>A private modern stone villa on the edge of Essaouira, six bedrooms, an inner courtyard with a fountain, an infinity pool looking onto the Atlas foothills. Yours, just for the week.

          </p>
        </div>

        <div className="inside-video" onClick={() => setPlaying(true)}>
          {!playing &&
          <React.Fragment>
              <div className="inside-poster">
                <img src="images/riad-pool-infinity.jpg" alt="The riad pool" />
              </div>
              <button className="inside-play" type="button" aria-label="Play tour">
                <svg width="22" height="24" viewBox="0 0 22 24" fill="none" xmlns="http://www.w3.org/2000/svg">
                  <path d="M21 11.134a1 1 0 0 1 0 1.732L1.5 24.124a1 1 0 0 1-1.5-.866V.742a1 1 0 0 1 1.5-.866L21 11.134Z" fill="currentColor" />
                </svg>
                <span>Watch the tour · 2:14</span>
              </button>
              <div className="inside-meta">
                <span className="caption">FILM · 2026</span>
                <span className="caption">ESSAOUIRA · 31.5°N</span>
              </div>
            </React.Fragment>
          }
          {playing &&
          <iframe
            src={`https://www.youtube.com/embed/${VIDEO_ID}?autoplay=1&rel=0&modestbranding=1`}
            title="Inside the riad"
            frameBorder="0"
            allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture"
            allowFullScreen />

          }
        </div>

        <div className="inside-facts">
          {facts.map((f, i) =>
          <div key={i} className="inside-fact">
              <div className="inside-fact-k">{f.k}</div>
              <div className="caption">{f.l}</div>
            </div>
          )}
        </div>
      </div>
    </section>);

}

/* ============ UPCOMING RETREATS GRID ============ */
function UpcomingRetreats({ setPage, setBooking }) {
  const retreats = [
  {
    n: '01', loc: 'Essaouira, Morocco', dates: '07 to 11 Oct 2026',
    title: 'From Strength to Stillness', price: '€1,050', priceNum: 1050, spots: '8 of 12',
    tag: 'Featured · with Sèlia & Charlotte', accent: 'var(--accent)', img: 'uploads/ChatGPT Image 2 mei 2026, 17_00_54.png', pos: 'center',
    desc: 'Rocket Vinyasa mornings, Yin & Soundbath evenings. Two teachers, four nights, the right kind of tired.',
    stripeKey: 'retreat-strength-stillness',
    reserve: true
  },
  {
    n: '02', loc: 'Marrakesh, Morocco', dates: 'November 2026 · Dates TBA',
    title: '4-Day Luxury Reset', price: 'From €1,300', spots: 'Interest only',
    tag: 'Coming soon', accent: 'var(--accent-3)', img: 'uploads/894d31_cda75ba3813d441fbdd6fdba8488b828~mv2.avif', pos: 'center',
    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.',
    register: true
  },
  {
    n: '03', loc: 'Essaouira, Morocco', dates: 'March 2027 · Exact dates TBA',
    title: 'Winter Escape', price: 'Price TBA', spots: 'Registration open',
    tag: 'Register now', accent: 'var(--accent-2)', img: 'images/real-ocean-sunset.jpg', pos: 'center',
    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.',
    register: true
  },
  {
    n: '04', loc: 'Essaouira, Morocco', dates: 'May 2027 · Exact dates TBA',
    title: 'Spring Detox', price: 'Price TBA', spots: 'Registration open',
    tag: 'Register now', accent: 'var(--accent)', img: 'images/yoga-mats-sand.jpg', pos: 'center',
    desc: 'A fresh May retreat in Essaouira. Yoga, healthy food, ocean air, gentle reset rituals, and time to unwind in a relaxed coastal setting.',
    register: true
  }];


  return (
    <section className="section retreats-section">
      <div className="container">
        <div className="row between center" style={{ flexWrap: 'wrap', gap: 24, marginBottom: 64 }}>
          <div>
            <div className="eyebrow">Upcoming retreats</div>
            <h2 className="h1" style={{ marginTop: 16 }}>The <em>year</em> ahead.</h2>
          </div>
          <a className="link-arrow" onClick={() => setPage('retreats')}>
            View all retreats
            <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>
          </a>
        </div>

        <div className="retreats-grid">
          {retreats.map((r, i) =>
          <article key={i} className={`retreat-card${r.register ? ' retreat-card--coming-soon' : ''}`}
            onClick={r.register ? undefined : () => setPage('retreat-detail')}>
              <div className="retreat-card-img">
                <Placeholder coords={r.loc.toUpperCase()} label={`${r.title}, ${r.dates}`} tag={r.n} src={r.img} pos={r.pos} />
              </div>
              <div className="retreat-card-body">
                <div className="row between">
                  <span className="caption">{r.n} · {r.loc}</span>
                  <span className="retreat-tag" style={{ color: r.accent, borderColor: r.accent }}>{r.tag}</span>
                </div>
                <h3 className="h3" style={{ marginTop: 14 }}>{r.title}</h3>
                <p className="body" style={{ marginTop: 10, fontSize: 14 }}>{r.desc}</p>
                <div className="retreat-card-foot">
                  <div>
                    <div className="caption">Dates</div>
                    <div className="body" style={{ color: 'var(--ink)', marginTop: 2, fontSize: 14 }}>{r.dates}</div>
                  </div>
                  <div>
                    <div className="caption">From</div>
                    <div className="body" style={{ color: 'var(--ink)', marginTop: 2, fontSize: 14 }}>{r.price}</div>
                  </div>
                  <div>
                    <div className="caption">Status</div>
                    <div className="body" style={{ color: 'var(--ink)', marginTop: 2, fontSize: 14 }}>{r.spots}</div>
                  </div>
                </div>
                {r.reserve &&
                  <button
                    className="btn btn-ghost"
                    onClick={e => { e.stopPropagation(); setPage('retreat-detail'); }}
                    style={{ marginTop: 24 }}
                  >
                    See the full week →
                  </button>
                }
                {r.register &&
                  <a
                    className="btn btn-primary retreat-register-btn"
                    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%0AMy%20details%3A%0AName%3A%20%0AEmail%3A%20%0APhone%3A%20%0AAnything%20to%20add%3A%20`}
                    onClick={e => e.stopPropagation()}
                    style={{ marginTop: 24, display: 'inline-flex', alignItems: 'center', gap: 8, textDecoration: 'none' }}
                  >
                    <span className="dot"></span> Register interest
                  </a>
                }
              </div>
            </article>
          )}
        </div>
      </div>
    </section>);

}

Object.assign(window, { ValueMarquee, Intro, FeaturedRetreat, UpcomingRetreats, InsideTheRiad });