// Soul MVNT — page sections

const { useState: useStateP, useEffect: useEffectP } = React;

// ===== HOME =====
function HomePage({ onNav, onOpenFormat, palette }) {
  return (
    <>
      <Hero onNav={onNav} palette={palette} />
      <TrustStrip />
      <FormatsSection onOpenFormat={onOpenFormat} onNav={onNav} />
      <StudioStorySection onNav={onNav} />
      <FoundersSection onNav={onNav} />
      <LifestyleSection />
      <ScheduleTeaser onNav={onNav} />
      <ShopTeaser onNav={onNav} />
      <CommunitySection />
      <CtaBand onNav={onNav} />
    </>
  );
}

// ----- Hero -----
function Hero({ onNav, palette }) {
  return (
    <section className="hero">
      <div className="container">
        <div className="hero-grid">
          <div>
            <Eyebrow>Dubai Design District · est. d3 building 8</Eyebrow>
            <h1 className="hero-h1" style={{ marginTop: 20 }}>
              <span className="line">Your first</span>
              <span className="line">step to <em>join</em></span>
              <span className="line">the mvnt.</span>
            </h1>
            <p className="hero-sub">
              A haven for fitness & wellness in Dubai Design District — Lagree on the Mega Pro, Sculpt, Pilates Burn, Yoga, Korean Recovery and Sound Healing, inside an award-winning minimalist space.
            </p>
            <div className="hero-ctas">
              <button className="btn btn-lg btn-primary" onClick={() => onNav("pricing")}>
                Get the Starter Pack <span className="arrow">→</span>
              </button>
              <button className="btn btn-lg btn-secondary" onClick={() => onNav("schedule")}>
                Book a Class
              </button>
            </div>
            <div className="hero-meta">
              <div>
                <span className="k">6</span>
                <span className="l">Class formats</span>
              </div>
              <div>
                <span className="k">12</span>
                <span className="l">Instructors</span>
              </div>
              <div>
                <span className="k">2025</span>
                <span className="l">IDA Bronze</span>
              </div>
              <div>
                <span className="k">d3</span>
                <span className="l">Building 8 · R06</span>
              </div>
            </div>
          </div>
          <div className="hero-visual">
            <img src="media/studio-interior-01.webp" alt="Soul MVNT studio interior" />
            <div className="badge">
              <span className="num">B</span>
              <div className="t">
                IDA Design<br/>Awards 2025
              </div>
            </div>
          </div>
        </div>
      </div>
      <img className="hero-emblem" src="media/emblem-soulmvnt.webp" alt="" aria-hidden="true" />
    </section>
  );
}

// ----- Format grid section -----
function FormatsSection({ onOpenFormat, onNav }) {
  return (
    <section className="section container" id="formats">
      <SectionHead
        eyebrow="Six official formats"
        title={'Move with <em>purpose</em>.\nClasses tuned for every season.'}
        lede="From the high-intensity, low-impact Mega Pro to the stillness of Sound Healing — every format is designed to meet you where you are, and to take you further."
        action={
          <button className="btn btn-ghost" style={{ marginTop: 18 }} onClick={() => onNav("classes")}>
            View all classes <span className="arrow">→</span>
          </button>
        }
      />
      <div className="format-grid">
        {FORMATS.map((f, i) => (
          <FormatCard key={f.id} format={f} onClick={() => onOpenFormat(f)} feature={i === 0} />
        ))}
      </div>
    </section>
  );
}

// ----- Studio story -----
function StudioStorySection({ onNav }) {
  return (
    <section className="section" style={{ background: "var(--bone)" }} id="studio">
      <div className="container">
        <div className="split reverse">
          <div className="split-content">
            <Eyebrow>The Space</Eyebrow>
            <h2>An <em>award-winning</em> haven in d3.</h2>
            <p>
              Designed by Arch Home Interiors under Jessica Khouzami, our studio is an exercise in modern-minimalism: marble, micro-cement and burl wood; a mirrored Lagree room facing a softly-lit mat-Pilates zone; a kitchenette and juice bar with marbled counters.
            </p>
            <p>
              Calm enough to want to linger, considered enough to move you forward.
            </p>
            <div className="award-badge">
              <div className="award-medal">B</div>
              <div className="award-text">
                <strong>IDA Design Awards 2025 — Bronze</strong><br/>
                Cultural & Community Interior Design ·<br/>
                Wellness, Fitness & Sports Facilities
              </div>
            </div>
            <div style={{ marginTop: 28 }}>
              <button className="btn btn-secondary" onClick={() => onNav("studio")}>
                Tour the space <span className="arrow">→</span>
              </button>
            </div>
          </div>
          <div className="split-media">
            <img src="media/studio-interior-02.webp" alt="Soul MVNT studio interior, mat-Pilates zone" />
          </div>
        </div>
      </div>
    </section>
  );
}

// ----- Founders -----
function FoundersSection({ onNav }) {
  return (
    <section className="section container" id="founders">
      <SectionHead
        eyebrow="Founders"
        title={'Built by <em>two</em>.\nMoved by many.'}
        lede="Paloma Nassar and Sirine Bekdache opened Soul MVNT to put intentional, design-led movement at the centre of Dubai's daily life — for women and men, for the focused and the curious."
        action={
          <button className="btn btn-ghost" style={{ marginTop: 18 }} onClick={() => onNav("trainers")}>
            Meet the full team <span className="arrow">→</span>
          </button>
        }
      />
      <div className="founders-row">
        {TRAINERS_FEATURED.map((t) => (
          <div className="founder-card" key={t.name}>
            <div className="founder-photo">
              <img src={t.photo} alt={t.name} />
            </div>
            <h4>{t.name}</h4>
            <div className="role">{t.role} · {t.specialty}</div>
            <p>{t.bio}</p>
          </div>
        ))}
      </div>
      <div style={{ marginTop: 56, padding: 36, background: "var(--marble)", borderRadius: 6, border: "1px solid var(--line)", fontFamily: "var(--font-serif)", fontSize: 24, fontStyle: "italic", lineHeight: 1.4, color: "var(--ink)" }}>
        "If it's not shaking, it's not working."
        <div style={{ fontSize: 12, letterSpacing: "0.18em", textTransform: "uppercase", color: "var(--muted)", fontStyle: "normal", marginTop: 14, fontFamily: "var(--font-body)" }}>
          — Sebastien Lagree, founder of the Lagree Method
        </div>
      </div>
    </section>
  );
}

// ----- Lifestyle strip -----
function LifestyleSection() {
  const items = [
    { icon: "J", title: "Juice bar & bites", text: "Nourishing juices and gourmet bites — a slower transition out of class." },
    { icon: "A", title: "Amenities", text: "Showers, drying, and quiet changing rooms. Bring less, leave fresher." },
    { icon: "W", title: "Athleisure brand", text: "Our own line — designed in-studio, tested in-studio. Real AED prices." },
    { icon: "C", title: "Community", text: "A community of practitioners and friends, met around the front bar." },
  ];
  return (
    <section className="section-tight lifestyle">
      <div className="container">
        <SectionHead
          eyebrow="More than a studio"
          title={'A <em>lifestyle</em>, lived around movement.'}
          lede="Soul MVNT is the gym, the café meet-up, the after-class community, the wardrobe — held together by considered design."
        />
        <div className="lifestyle-grid">
          {items.map((it) => (
            <div className="life-item" key={it.title}>
              <div className="ico">{it.icon}</div>
              <h4>{it.title}</h4>
              <p>{it.text}</p>
            </div>
          ))}
        </div>
      </div>
    </section>
  );
}

// ----- Schedule teaser -----
function ScheduleTeaser({ onNav }) {
  return (
    <section className="section container">
      <SectionHead
        eyebrow="This week"
        title={'Today\'s <em>open</em> slots.'}
        lede="A live look at this week's bookings — full timetable updates daily in the Soul MVNT app."
        action={
          <button className="btn btn-ghost" style={{ marginTop: 18 }} onClick={() => onNav("schedule")}>
            Open full schedule <span className="arrow">→</span>
          </button>
        }
      />
      <ScheduleBlock previewOnly />
    </section>
  );
}

// ----- Schedule block (full or preview) -----
function ScheduleBlock({ previewOnly }) {
  const days = Object.keys(SCHEDULE);
  const [day, setDay] = useStateP(days[0]);
  const [book, setBook] = useStateP(null);
  const dates = [24, 25, 26, 27, 28, 29, 30]; // representative week
  const allSlots = SCHEDULE[day];
  const slots = previewOnly ? allSlots.slice(0, 4) : allSlots;

  return (
    <>
      <div className="schedule-wrap">
        <div className="schedule-tabs">
          {days.map((d, i) => (
            <button key={d} className={day === d ? "active" : ""} onClick={() => setDay(d)}>
              <span className="d">{dates[i]}</span>
              {d}
            </button>
          ))}
        </div>
        <div>
          {slots.map((s, i) => {
            const isFull = s.spots === 0;
            const isFew = s.spots > 0 && s.spots <= 2;
            return (
              <div className="slot" key={i}>
                <div className="time">
                  {s.time}
                  <span className="dur">{s.dur} min</span>
                </div>
                <div className="name">
                  <span className="form">{s.format}</span>
                  with {s.trainer}
                </div>
                <div className="trainer">Mega Pro · level all</div>
                <div className={"spots " + (isFull ? "full" : isFew ? "few" : "")}>
                  {isFull ? "Waitlist" : isFew ? `${s.spots} spot${s.spots > 1 ? 's' : ''} left` : `${s.spots} spots`}
                </div>
                <div>
                  <button disabled={isFull} onClick={() => setBook({ ...s, day })}>
                    {isFull ? "Join Waitlist" : "Book"}
                  </button>
                </div>
              </div>
            );
          })}
        </div>
      </div>
      <div style={{ fontSize: 12, color: "var(--muted)", marginTop: 16, lineHeight: 1.5 }}>
        Cancel ≥ 12 hours before class start to keep your credit. Class booking and packs are managed in the Soul MVNT app.
      </div>
      {book && <BookConfirmModal slot={book} onClose={() => setBook(null)} />}
    </>
  );
}

// ----- Shop teaser -----
function ShopTeaser({ onNav, onAddToCart }) {
  return (
    <section className="section-tight container">
      <SectionHead
        eyebrow="Shop"
        title={'Worn in-<em>studio</em>.\nMade for everywhere.'}
        lede="Soul MVNT's own athleisure line plus the Lagree UAE 2026 capsule — 98 records, real AED prices, Shopify checkout."
        action={
          <button className="btn btn-ghost" style={{ marginTop: 18 }} onClick={() => onNav("shop")}>
            Shop the full edit <span className="arrow">→</span>
          </button>
        }
      />
      <div className="shop-grid">
        {PRODUCTS.slice(0, 4).map((p) => (
          <ProductCard key={p.id} product={p} onAdd={(e) => { e.stopPropagation(); onAddToCart && onAddToCart(p); }} />
        ))}
      </div>
    </section>
  );
}

function ProductCard({ product, onAdd }) {
  return (
    <div className="product-card">
      <div className="img-wrap">
        <img src={product.img} alt={product.name} />
        {product.pill && <div className="pill">{product.pill}</div>}
        <button className="add-btn" onClick={onAdd} title="Add to bag">+</button>
      </div>
      <div className="name">{product.name}</div>
      <div className="type">{product.type}</div>
      <div className="price">AED {product.price}</div>
    </div>
  );
}

// ----- Community -----
function CommunitySection() {
  return (
    <section className="section-tight container">
      <SectionHead
        eyebrow="@soulmvnt"
        title={'A <em>community</em>, daily.'}
        lede="A glimpse from the floor, the front bar and the city. Tag #jointhemvnt to share yours."
      />
      <div className="community-grid">
        {COMMUNITY_TILES.map((src, i) => (
          <div className="community-tile" key={i}>
            <img src={src} alt="" />
            <div className="ig">@soulmvnt</div>
          </div>
        ))}
      </div>
    </section>
  );
}

// ----- CTA band -----
function CtaBand({ onNav }) {
  return (
    <section className="cta-band">
      <div className="container">
        <Eyebrow><span style={{ color: "rgba(248,243,234,0.5)" }}>Ready when you are</span></Eyebrow>
        <h2 style={{ marginTop: 18 }}>
          Your first step. <em>Take it.</em>
        </h2>
        <p>
          Start with the Soul MVNT Starter Pack — your easiest way into Lagree, Pilates, Yoga, Korean Recovery and Sound Healing.
        </p>
        <div className="btns">
          <button className="btn btn-lg btn-primary" onClick={() => onNav("pricing")}>
            Get the Starter Pack <span className="arrow">→</span>
          </button>
          <button className="btn btn-lg btn-secondary" onClick={() => onNav("schedule")}>
            Book a Class
          </button>
        </div>
        <div className="app-badges">
          <a className="app-badge" href="#"><span className="glyph"></span>App Store</a>
          <a className="app-badge" href="#"><span className="glyph">▶</span>Google Play</a>
        </div>
      </div>
    </section>
  );
}

// ===== CLASSES PAGE =====
function ClassesPage({ onOpenFormat }) {
  return (
    <section className="section container">
      <SectionHead
        eyebrow="Class formats"
        title={'Find your <em>format</em>.'}
        lede="Six official Soul MVNT formats — each with its own intensity, rhythm and reason. Tap any card for what to expect, plus first-timer notes."
      />
      <div className="format-grid">
        {FORMATS.map((f, i) => (
          <FormatCard key={f.id} format={f} onClick={() => onOpenFormat(f)} feature={i === 0} />
        ))}
      </div>
      <div style={{ marginTop: 80, display: "grid", gridTemplateColumns: "repeat(3, 1fr)", gap: 28 }}>
        <InfoBlock title="On the Mega Pro" body="Lagree on the Mega Pro is our hero room. Slow, deliberate, controlled — a low-impact reformer practice that strengthens deep stabilising muscles." />
        <InfoBlock title="First-timer: grip socks" body="Grip socks are mandatory for Lagree. We sell them on-site if you forget. Arrive 10 minutes early for a quick machine induction." />
        <InfoBlock title="Recover smart" body="Pair Korean Recovery with Lagree or Sculpt — it's restorative work with the RecoveRing that helps you train more, more often." />
      </div>
    </section>
  );
}

function InfoBlock({ title, body }) {
  return (
    <div style={{ borderTop: "1px solid var(--line)", paddingTop: 22 }}>
      <h4 style={{ fontFamily: "var(--font-serif)", fontSize: 22, fontWeight: 400, marginBottom: 10 }}>{title}</h4>
      <p style={{ fontSize: 14, color: "var(--muted)", lineHeight: 1.6, margin: 0 }}>{body}</p>
    </div>
  );
}

// ===== SCHEDULE PAGE =====
function SchedulePage() {
  return (
    <section className="section container">
      <SectionHead
        eyebrow="Schedule"
        title={'Book your <em>spot</em>.'}
        lede="Representative timetable across the week. Real-time spots, cancellations and the Starter Pack are managed in the Soul MVNT app."
      />
      <ScheduleBlock />
    </section>
  );
}

// ===== PRICING / STARTER PACK =====
function PricingPage({ onNav }) {
  return (
    <section className="section container">
      <SectionHead
        eyebrow="Starter Pack & memberships"
        title={'Your easiest way <em>in</em>.'}
        lede="The Starter Pack is our intro offer — designed to let you try the studio across formats. Pricing for ongoing packs and memberships is managed in the app; the numbers below are illustrative pending the client's final confirmation."
      />
      <div className="pricing-grid">
        <div className="price-card feature">
          <div className="tag">Most chosen — intro offer</div>
          <h3>The Starter Pack</h3>
          <p className="desc">A three-class intro across formats — Lagree, Pilates Burn and your pick of Sculpt, Yoga or Korean Recovery.</p>
          <div className="amount"><sup>AED</sup>299<span className="per"> / 3 classes</span></div>
          <ul className="line-list">
            <li>3 classes, any format (Lagree included)</li>
            <li>Use within 21 days of activation</li>
            <li>Full machine induction included</li>
            <li>10% off your first activewear order</li>
          </ul>
          <button className="btn btn-primary" style={{ background: "var(--terracotta)" }} onClick={() => onNav("schedule")}>
            Activate Starter Pack <span className="arrow">→</span>
          </button>
          <div className="small">Price illustrative — confirm with studio (app-managed).</div>
        </div>

        <div className="price-card">
          <div className="tag">Pay as you go</div>
          <h3>Single session</h3>
          <p className="desc">Drop into any class. Best for visiting members or one-off explorers.</p>
          <div className="amount"><sup>from AED</sup>129<span className="per"> / class</span></div>
          <ul className="line-list">
            <li>Any format, any time</li>
            <li>Book in-app, cancel ≥ 12 h</li>
            <li>Towel and water available</li>
          </ul>
          <button className="btn btn-secondary" onClick={() => onNav("schedule")}>Choose a class</button>
          <div className="small">"From Dhs 129" cited in press; confirm live with studio.</div>
        </div>

        <div className="price-card">
          <div className="tag">Multi-class</div>
          <h3>Class packs</h3>
          <p className="desc">5 / 10 / 20-class packs — savings scale with the pack.</p>
          <div className="amount"><sup>from AED</sup>595<span className="per"> / 5 pack</span></div>
          <ul className="line-list">
            <li>Mix any formats</li>
            <li>Larger packs save more per class</li>
            <li>Validity managed in the app</li>
          </ul>
          <button className="btn btn-secondary" onClick={() => onNav("schedule")}>Compare packs</button>
          <div className="small">Pack tiers app-managed — illustrative pricing.</div>
        </div>
      </div>

      <div style={{ marginTop: 60, background: "var(--marble)", border: "1px solid var(--line)", borderRadius: 6, padding: 36, display: "grid", gridTemplateColumns: "2fr 1fr", gap: 32, alignItems: "center" }}>
        <div>
          <Eyebrow>Members</Eyebrow>
          <h3 style={{ fontFamily: "var(--font-serif)", fontSize: 32, fontWeight: 400, margin: "10px 0 12px", letterSpacing: "-0.01em" }}>
            Monthly memberships, fully <span style={{ color: "var(--terracotta)", fontStyle: "italic" }}>flexible</span>.
          </h3>
          <p style={{ color: "var(--muted)", fontSize: 15, lineHeight: 1.6, margin: 0, maxWidth: 540 }}>
            Unlimited, 8 and 12-class monthly tiers. Pause anytime. Priority booking opens 7 days ahead for members.
          </p>
        </div>
        <div>
          <button className="btn btn-primary" style={{ width: "100%", justifyContent: "center" }}>
            See member tiers <span className="arrow">→</span>
          </button>
          <div style={{ fontSize: 11, color: "var(--muted)", letterSpacing: "0.06em", marginTop: 12, textAlign: "center" }}>
            Tiers + pricing live in the Soul MVNT app.
          </div>
        </div>
      </div>

      <div style={{ marginTop: 60, padding: 36, borderRadius: 6, background: "var(--noir)", color: "var(--ivory)", display: "grid", gridTemplateColumns: "1fr 1fr", gap: 32, alignItems: "center" }}>
        <div>
          <div className="eyebrow" style={{ color: "rgba(248,243,234,0.6)" }}><span className="dot"></span>The whole pack</div>
          <h3 style={{ fontFamily: "var(--font-serif)", fontSize: 36, fontWeight: 400, color: "var(--ivory)", margin: "10px 0 12px" }}>
            Private, group & corporate sessions.
          </h3>
          <p style={{ color: "rgba(248,243,234,0.7)", margin: 0, lineHeight: 1.6 }}>
            One-on-one Lagree, private parties on the Mega Pro, or whole-team wellness days for your company.
          </p>
        </div>
        <div style={{ display: "flex", flexDirection: "column", gap: 10 }}>
          <button className="btn btn-primary" style={{ background: "var(--terracotta)" }}>
            Enquire about private <span className="arrow">→</span>
          </button>
          <button className="btn btn-secondary" style={{ color: "var(--ivory)", borderColor: "var(--ivory)" }}>
            Corporate wellness
          </button>
        </div>
      </div>
    </section>
  );
}

// ===== TRAINERS =====
function TrainersPage() {
  return (
    <section className="section container">
      <SectionHead
        eyebrow="The team"
        title={'Twelve <em>practitioners</em>.\nOne shared rhythm.'}
        lede="Our founders teach. So does our team — a tight roster of certified Lagree, Pilates, Yoga and Recovery instructors."
      />
      <div className="founders-row" style={{ marginBottom: 80 }}>
        {TRAINERS_FEATURED.map((t) => (
          <div className="founder-card" key={t.name}>
            <div className="founder-photo"><img src={t.photo} alt={t.name} /></div>
            <h4>{t.name}</h4>
            <div className="role">{t.role} · {t.specialty}</div>
            <p>{t.bio}</p>
          </div>
        ))}
      </div>

      <h3 style={{ fontFamily: "var(--font-serif)", fontSize: 28, fontWeight: 400, margin: "0 0 28px" }}>
        The instructor team
      </h3>
      <div className="trainer-grid">
        {TEAM.map((t) => <TrainerCard trainer={t} key={t.name} />)}
      </div>
      <p style={{ fontSize: 12, color: "var(--muted)", letterSpacing: "0.04em", marginTop: 26 }}>
        Photos and full bios for the wider team — pending from client. Hanya & Lisa shown here.
      </p>

      <div style={{ marginTop: 80, padding: 40, borderRadius: 6, background: "var(--bone)", display: "grid", gridTemplateColumns: "1.4fr 1fr", gap: 32, alignItems: "center" }}>
        <div>
          <Eyebrow>Careers</Eyebrow>
          <h3 style={{ fontFamily: "var(--font-serif)", fontSize: 30, fontWeight: 400, margin: "10px 0 12px" }}>
            Teach with us.
          </h3>
          <p style={{ color: "var(--muted)", margin: 0, lineHeight: 1.6 }}>
            Lagree, Sculpt, Pilates, Yoga or Recovery — we hire considered practitioners who lead with breath, form and warmth.
          </p>
        </div>
        <div style={{ textAlign: "right" }}>
          <button className="btn btn-primary">Join the team <span className="arrow">→</span></button>
        </div>
      </div>
    </section>
  );
}

// ===== STUDIO =====
function StudioPage() {
  return (
    <>
      <section className="section container">
        <SectionHead
          eyebrow="The Studio"
          title={'A studio designed <em>around</em> stillness.'}
          lede="Modern-minimalist. Marble, micro-cement, burl wood. A mirrored Lagree room. A softly-lit mat zone. A juice bar with marbled counters. Designed by Arch Home Interiors."
        />
        <div className="split">
          <div className="split-media">
            <img src="media/studio-interior-01.webp" alt="Reception" />
          </div>
          <div className="split-content">
            <h3 style={{ fontFamily: "var(--font-serif)", fontSize: 36, fontWeight: 400, margin: "0 0 16px" }}>
              Reception, marble & calm.
            </h3>
            <p>Arrive into a muted reception and marble counter. The studio works hard to feel quiet — to slow you before you move.</p>
            <div className="award-badge">
              <div className="award-medal">B</div>
              <div className="award-text">
                <strong>IDA Design Awards 2025 — Bronze</strong><br/>
                Cultural & Community Interior Design ·<br/>
                Wellness, Fitness & Sports Facilities
              </div>
            </div>
          </div>
        </div>
      </section>

      <section className="section-tight" style={{ background: "var(--bone)" }}>
        <div className="container">
          <div className="split reverse">
            <div className="split-content">
              <h3 style={{ fontFamily: "var(--font-serif)", fontSize: 36, fontWeight: 400, margin: "0 0 16px" }}>
                The Lagree room — mirrored, deliberate.
              </h3>
              <p>Twelve Mega Pro reformers in a mirrored room. The hero space — for the high-intensity, low-impact work that the studio is built around.</p>
              <p style={{ fontSize: 13, marginTop: 12 }}>Designed by <strong>Arch Home Interiors / Jessica Khouzami</strong>, with materials chosen for their tactility: marble, micro-cement and burl wood.</p>
            </div>
            <div className="split-media">
              <img src="media/studio-interior-02.webp" alt="Lagree room" />
            </div>
          </div>
        </div>
      </section>

      <section className="section container">
        <div style={{ display: "grid", gridTemplateColumns: "repeat(3, 1fr)", gap: 12 }}>
          <div style={{ aspectRatio: "3/4", overflow: "hidden", borderRadius: 4 }}>
            <img src="media/studio-brand-01.webp" alt="" style={{ width: "100%", height: "100%", objectFit: "cover" }} />
          </div>
          <div style={{ aspectRatio: "3/4", overflow: "hidden", borderRadius: 4 }}>
            <img src="media/studio-brand-02.webp" alt="" style={{ width: "100%", height: "100%", objectFit: "cover" }} />
          </div>
          <div style={{ aspectRatio: "3/4", overflow: "hidden", borderRadius: 4 }}>
            <img src="media/studio-brand-03.webp" alt="" style={{ width: "100%", height: "100%", objectFit: "cover" }} />
          </div>
        </div>
        <div style={{ marginTop: 60, padding: 36, background: "var(--marble)", border: "1px solid var(--line)", borderRadius: 6 }}>
          <div style={{ display: "grid", gridTemplateColumns: "repeat(4, 1fr)", gap: 32 }}>
            <div>
              <div className="eyebrow" style={{ marginBottom: 10 }}><span className="dot"></span>Location</div>
              <p style={{ fontFamily: "var(--font-serif)", fontSize: 20, margin: 0 }}>Dubai Design District<br/>Building 8 · Unit R06</p>
            </div>
            <div>
              <div className="eyebrow" style={{ marginBottom: 10 }}><span className="dot"></span>Designed by</div>
              <p style={{ fontFamily: "var(--font-serif)", fontSize: 20, margin: 0 }}>Arch Home Interiors<br/>Jessica Khouzami</p>
            </div>
            <div>
              <div className="eyebrow" style={{ marginBottom: 10 }}><span className="dot"></span>Materials</div>
              <p style={{ fontFamily: "var(--font-serif)", fontSize: 20, margin: 0 }}>Marble · Micro-cement<br/>Burl wood</p>
            </div>
            <div>
              <div className="eyebrow" style={{ marginBottom: 10 }}><span className="dot"></span>Award</div>
              <p style={{ fontFamily: "var(--font-serif)", fontSize: 20, margin: 0 }}>IDA 2025 — Bronze<br/>Cultural & Community</p>
            </div>
          </div>
        </div>
      </section>
    </>
  );
}

// ===== SHOP =====
function ShopPage({ onAdd, cart }) {
  const [filter, setFilter] = useStateP("All");
  const products = filter === "All" ? PRODUCTS : PRODUCTS.filter(p => p.type === filter);
  return (
    <section className="section container">
      <SectionHead
        eyebrow="Shop"
        title={'Soul MVNT × <em>Lagree UAE</em> 2026.'}
        lede="Our own athleisure line plus the Lagree UAE capsule — 98 products, 254 variants, real AED prices. Native Shopify checkout."
        action={
          <div style={{ marginTop: 18, fontSize: 12, letterSpacing: "0.1em", textTransform: "uppercase", color: "var(--muted)" }}>
            Featured edit · full catalogue available
          </div>
        }
      />
      <div className="shop-filters">
        {SHOP_FILTERS.map(f => (
          <button key={f} className={filter === f ? "active" : ""} onClick={() => setFilter(f)}>
            {f}
          </button>
        ))}
      </div>
      <div className="shop-grid">
        {products.map(p => (
          <ProductCard key={p.id} product={p} onAdd={(e) => { e.stopPropagation(); onAdd(p); }} />
        ))}
      </div>

      <div style={{ marginTop: 80, padding: 36, background: "var(--bone)", borderRadius: 6, display: "grid", gridTemplateColumns: "1.4fr 1fr", gap: 28, alignItems: "center" }}>
        <div>
          <Eyebrow>Across the catalogue</Eyebrow>
          <h3 style={{ fontFamily: "var(--font-serif)", fontSize: 30, fontWeight: 400, margin: "10px 0 10px" }}>
            98 products. 254 variants. AED 10–900.
          </h3>
          <p style={{ color: "var(--muted)", margin: 0, lineHeight: 1.6 }}>
            From the Soul MVNT × Lagree UAE 2026 capsule to grip socks, signature totes and our jewellery line — explore the full collection.
          </p>
        </div>
        <div style={{ textAlign: "right" }}>
          <button className="btn btn-primary">Open the full shop <span className="arrow">→</span></button>
        </div>
      </div>
    </section>
  );
}

// ===== FAQ =====
function FaqPage() {
  const [open, setOpen] = useStateP(0);
  return (
    <section className="section container">
      <SectionHead
        eyebrow="FAQ"
        title={'Things <em>good</em> to know.'}
        lede="Verified policies from the studio — arrival, attire, cancellation, parking and more."
      />
      <div style={{ maxWidth: 880 }}>
        {FAQS.map((f, i) => (
          <div className={"faq-item" + (open === i ? " open" : "")} key={i}>
            <button className="faq-q" onClick={() => setOpen(open === i ? -1 : i)}>
              <span>{f.q}</span>
              <span className="plus">+</span>
            </button>
            <div className="faq-a">
              <div className="faq-a-inner">{f.a}</div>
            </div>
          </div>
        ))}
      </div>

      <div style={{ marginTop: 80, padding: 36, background: "var(--marble)", border: "1px solid var(--line)", borderRadius: 6, textAlign: "center" }}>
        <Eyebrow>Still have a question?</Eyebrow>
        <h3 style={{ fontFamily: "var(--font-serif)", fontSize: 30, fontWeight: 400, margin: "10px 0 18px" }}>
          WhatsApp the team — we'll reply quickly.
        </h3>
        <div style={{ display: "flex", gap: 12, justifyContent: "center", flexWrap: "wrap" }}>
          <a className="btn btn-primary" href="https://wa.me/971588335527">WhatsApp +971 58 833 5527</a>
          <a className="btn btn-secondary" href="mailto:connect@soulmvnt.com">Email the studio</a>
        </div>
      </div>
    </section>
  );
}

Object.assign(window, {
  HomePage, ClassesPage, SchedulePage, PricingPage, TrainersPage, StudioPage, ShopPage, FaqPage, ProductCard,
});