// Soul MVNT — shared components

const { useState, useEffect, useRef } = React;

// ---------- Logo ----------
function Logo({ size = 20 }) {
  return (
    <a href="#" className="nav-logo" style={{ fontSize: size }} onClick={(e) => { e.preventDefault(); window.__nav && window.__nav("home"); }}>
      <span>SOUL</span>
      <span className="smile"></span>
      <span>MVNT</span>
    </a>
  );
}

// ---------- Nav ----------
function Nav({ route, onNav, cartCount, onOpenCart }) {
  const links = [
    ["home", "Home"],
    ["classes", "Classes"],
    ["schedule", "Schedule"],
    ["pricing", "Starter Pack"],
    ["trainers", "Trainers"],
    ["studio", "The Studio"],
    ["shop", "Shop"],
    ["faq", "FAQ"],
  ];
  return (
    <div className="nav-wrap">
      <nav className="nav container" aria-label="Main">
        <Logo />
        <div className="nav-links" role="tablist">
          {links.map(([k, l]) => (
            <button key={k} className={route === k ? "active" : ""} onClick={() => onNav(k)}>{l}</button>
          ))}
        </div>
        <div className="nav-cta">
          {cartCount > 0 && (
            <button className="cart-pill" onClick={onOpenCart}>
              Cart <span className="count">{cartCount}</span>
            </button>
          )}
          <button className="btn btn-sm btn-primary" onClick={() => onNav("pricing")}>
            Starter Pack <span className="arrow">→</span>
          </button>
        </div>
      </nav>
    </div>
  );
}

// ---------- Trust marquee ----------
function TrustStrip() {
  const items = [
    "IDA Design Awards 2025 — Bronze",
    "Dubai Design District",
    "Lagree on the Mega Pro",
    "Founder-led & community-driven",
    "Six official class formats",
    "AHI award-winning interior",
  ];
  const renderRow = (k) => (
    <span key={k}>
      {items.map((t, i) => (
        <React.Fragment key={i}>
          <span>{t}</span>
          <span className="sep"></span>
        </React.Fragment>
      ))}
    </span>
  );
  return (
    <div className="trust-strip">
      <div className="marquee">{renderRow(0)}{renderRow(1)}</div>
    </div>
  );
}

// ---------- Eyebrow ----------
function Eyebrow({ children }) {
  return <div className="eyebrow"><span className="dot"></span>{children}</div>;
}

// ---------- Section header ----------
function SectionHead({ eyebrow, title, lede, action }) {
  return (
    <div className="section-head">
      <div>
        {eyebrow && <Eyebrow>{eyebrow}</Eyebrow>}
        <h2 style={{ marginTop: 18 }} dangerouslySetInnerHTML={{ __html: title }} />
      </div>
      <div>
        {lede && <p className="lede">{lede}</p>}
        {action}
      </div>
    </div>
  );
}

// ---------- Format card ----------
function FormatCard({ format, onClick, feature }) {
  return (
    <div className={"format-card" + (feature ? " feature" : "")} onClick={onClick}>
      <div className="icon-wrap">
        {format.icon ? (
          <img src={format.icon} alt="" />
        ) : (
          <SoundHealingGlyph />
        )}
      </div>
      <div className="meta">
        <span className="chip">{format.intensity}</span>
        <span className="chip">{format.duration}</span>
      </div>
      <h3>{format.name}</h3>
      <div className="tag">"{format.tag}"</div>
      <p className="desc">{format.desc}</p>
      <span className="more">Book / Learn more <span>→</span></span>
    </div>
  );
}

// SVG glyph for Sound Healing placeholder (concentric rings)
function SoundHealingGlyph() {
  return (
    <svg viewBox="0 0 84 84" width="84" height="84" fill="none" stroke="currentColor" strokeWidth="1.5" style={{ color: "currentColor", opacity: 0.85 }}>
      <circle cx="42" cy="42" r="6" />
      <circle cx="42" cy="42" r="14" opacity="0.7" />
      <circle cx="42" cy="42" r="22" opacity="0.5" />
      <circle cx="42" cy="42" r="30" opacity="0.3" />
      <circle cx="42" cy="42" r="38" opacity="0.15" />
    </svg>
  );
}

// ---------- Class detail modal ----------
function FormatModal({ format, onClose, onBook }) {
  useEffect(() => {
    const onEsc = (e) => e.key === "Escape" && onClose();
    document.addEventListener("keydown", onEsc);
    document.body.style.overflow = "hidden";
    return () => {
      document.removeEventListener("keydown", onEsc);
      document.body.style.overflow = "";
    };
  }, []);
  return (
    <div className="modal-backdrop" onClick={onClose}>
      <div className="modal" onClick={(e) => e.stopPropagation()}>
        <button className="close" onClick={onClose}>×</button>
        <div className="modal-img"><img src={format.image} alt={format.name} /></div>
        <div className="modal-body">
          <Eyebrow>Class Format</Eyebrow>
          <h3 style={{ marginTop: 8 }}>{format.name}</h3>
          <div className="tag">"{format.tag}"</div>
          <p className="desc">{format.desc}</p>
          <div className="detail-row">
            <div>
              <div className="k">Intensity</div>
              <div className="v">{format.intensity}</div>
            </div>
            <div>
              <div className="k">Duration</div>
              <div className="v">{format.duration}</div>
            </div>
            <div>
              <div className="k">Level</div>
              <div className="v">{format.level}</div>
            </div>
          </div>
          <div style={{ fontSize: 13, color: "var(--muted)", lineHeight: 1.6, marginBottom: 26 }}>
            <strong style={{ color: "var(--ink)", fontWeight: 600 }}>First-timer note —</strong> {format.firstTimer}
          </div>
          {format.placeholder && (
            <div style={{ fontSize: 11, color: "var(--terracotta)", letterSpacing: "0.12em", textTransform: "uppercase", marginBottom: 18 }}>
              Copy with client to confirm
            </div>
          )}
          <div style={{ display: "flex", gap: 12, flexWrap: "wrap" }}>
            <button className="btn btn-primary" onClick={onBook}>Book a class <span className="arrow">→</span></button>
            <button className="btn btn-secondary">Get the Starter Pack</button>
          </div>
          <div style={{ fontSize: 11, color: "var(--muted)", letterSpacing: "0.06em", marginTop: 16 }}>
            Booking + memberships managed in the Soul MVNT app · iOS & Google Play
          </div>
        </div>
      </div>
    </div>
  );
}

// ---------- Booking confirmation ----------
function BookConfirmModal({ slot, onClose }) {
  useEffect(() => {
    const onEsc = (e) => e.key === "Escape" && onClose();
    document.addEventListener("keydown", onEsc);
    document.body.style.overflow = "hidden";
    return () => { document.removeEventListener("keydown", onEsc); document.body.style.overflow = ""; };
  }, []);
  return (
    <div className="modal-backdrop" onClick={onClose}>
      <div className="modal" style={{ maxWidth: 520 }} onClick={(e) => e.stopPropagation()}>
        <button className="close" onClick={onClose}>×</button>
        <div className="confirmed">
          <div className="check">✓</div>
          <Eyebrow>Spot reserved (preview)</Eyebrow>
          <h3 style={{ fontFamily: "var(--font-serif)", fontSize: 28, fontWeight: 400, margin: "10px 0 6px" }}>
            {slot.format}
          </h3>
          <div style={{ color: "var(--muted)", marginBottom: 18 }}>
            {slot.day} · {slot.time} · {slot.trainer}
          </div>
          <p style={{ fontSize: 13, color: "var(--muted)", maxWidth: 360, margin: "0 auto 24px", lineHeight: 1.6 }}>
            In the live experience, this opens the Soul MVNT app to confirm and pay from your active pack or membership.
          </p>
          <div style={{ display: "flex", gap: 10, justifyContent: "center", flexWrap: "wrap" }}>
            <button className="btn btn-primary" onClick={onClose}>Got it</button>
            <button className="btn btn-secondary">Add to calendar</button>
          </div>
        </div>
      </div>
    </div>
  );
}

// ---------- Cart drawer (simple modal) ----------
function CartModal({ items, onClose, onChange }) {
  useEffect(() => {
    document.body.style.overflow = "hidden";
    return () => { document.body.style.overflow = ""; };
  }, []);
  const subtotal = items.reduce((s, i) => s + i.price * i.qty, 0);
  return (
    <div className="modal-backdrop" onClick={onClose}>
      <div className="modal" style={{ maxWidth: 520 }} onClick={(e) => e.stopPropagation()}>
        <button className="close" onClick={onClose}>×</button>
        <div className="modal-body">
          <Eyebrow>Your bag</Eyebrow>
          <h3 style={{ marginTop: 8, marginBottom: 22 }}>Soul MVNT shop</h3>
          {items.length === 0 && (
            <p style={{ color: "var(--muted)" }}>Your bag is empty. Browse the activewear collection to add pieces.</p>
          )}
          {items.map((it) => (
            <div key={it.id} style={{ display: "grid", gridTemplateColumns: "60px 1fr auto", gap: 14, padding: "14px 0", borderBottom: "1px solid var(--line)", alignItems: "center" }}>
              <div style={{ width: 60, height: 75, background: "var(--bone)", borderRadius: 4, overflow: "hidden" }}>
                <img src={it.img} alt={it.name} style={{ width: "100%", height: "100%", objectFit: "cover" }} />
              </div>
              <div>
                <div style={{ fontSize: 14, fontWeight: 500 }}>{it.name}</div>
                <div style={{ fontSize: 11, letterSpacing: "0.12em", textTransform: "uppercase", color: "var(--muted)", margin: "4px 0 8px" }}>
                  {it.type}
                </div>
                <div style={{ display: "flex", gap: 8, alignItems: "center" }}>
                  <button className="btn btn-sm" style={{ padding: "4px 10px", border: "1px solid var(--line)", background: "transparent" }} onClick={() => onChange(it.id, -1)}>−</button>
                  <span style={{ fontSize: 13, minWidth: 22, textAlign: "center" }}>{it.qty}</span>
                  <button className="btn btn-sm" style={{ padding: "4px 10px", border: "1px solid var(--line)", background: "transparent" }} onClick={() => onChange(it.id, 1)}>+</button>
                </div>
              </div>
              <div style={{ fontFamily: "var(--font-serif)", fontSize: 18 }}>
                AED {it.price * it.qty}
              </div>
            </div>
          ))}
          {items.length > 0 && (
            <>
              <div style={{ display: "flex", justifyContent: "space-between", padding: "22px 0 8px", fontSize: 14 }}>
                <span>Subtotal</span>
                <span style={{ fontFamily: "var(--font-serif)", fontSize: 22 }}>AED {subtotal}</span>
              </div>
              <div style={{ fontSize: 11, color: "var(--muted)", marginBottom: 18 }}>
                Shipping and taxes calculated at Shopify checkout.
              </div>
              <button className="btn btn-primary" style={{ width: "100%", justifyContent: "center" }}>
                Checkout via Shopify <span className="arrow">→</span>
              </button>
            </>
          )}
        </div>
      </div>
    </div>
  );
}

// ---------- Trainer card ----------
function TrainerCard({ trainer }) {
  return (
    <div className="trainer">
      <div className="trainer-photo">
        {trainer.photo ? (
          <img src={trainer.photo} alt={trainer.name} />
        ) : (
          <div className="trainer-placeholder">{trainer.name[0]}</div>
        )}
      </div>
      <h4>{trainer.name}</h4>
      <div className="specialty">{trainer.specialty}</div>
    </div>
  );
}

// ---------- Footer ----------
function Footer({ onNav }) {
  return (
    <footer className="footer">
      <div className="container">
        <div className="footer-grid">
          <div>
            <div className="brand-mark">SOUL <span style={{ color: "var(--terracotta)" }}>~</span> MVNT</div>
            <p style={{ fontSize: 13, color: "rgba(248,243,234,0.7)", lineHeight: 1.6, margin: 0, maxWidth: 280 }}>
              Your haven for fitness & wellness in Dubai Design District. Lagree, Pilates, Yoga, Korean Recovery & Sound Healing — in an award-winning minimalist space.
            </p>
          </div>
          <div>
            <h5>Classes</h5>
            <ul>
              {FORMATS.map(f => (
                <li key={f.id}><a href="#" onClick={(e) => { e.preventDefault(); onNav("classes"); }}>{f.name}</a></li>
              ))}
            </ul>
          </div>
          <div>
            <h5>Studio</h5>
            <ul>
              <li><a href="#" onClick={(e) => { e.preventDefault(); onNav("schedule"); }}>Schedule</a></li>
              <li><a href="#" onClick={(e) => { e.preventDefault(); onNav("pricing"); }}>Starter Pack</a></li>
              <li><a href="#" onClick={(e) => { e.preventDefault(); onNav("trainers"); }}>Trainers</a></li>
              <li><a href="#" onClick={(e) => { e.preventDefault(); onNav("studio"); }}>The Space</a></li>
              <li><a href="#" onClick={(e) => { e.preventDefault(); onNav("faq"); }}>FAQ</a></li>
            </ul>
          </div>
          <div>
            <h5>Visit</h5>
            <ul>
              <li>Dubai Design District</li>
              <li>Building 8, Unit R06</li>
              <li>Dubai, UAE</li>
              <li><a href="tel:+971588335527">+971 58 833 5527</a></li>
              <li><a href="mailto:connect@soulmvnt.com">connect@soulmvnt.com</a></li>
            </ul>
          </div>
          <div>
            <h5>Follow</h5>
            <ul>
              <li><a href="https://instagram.com/soulmvnt" target="_blank" rel="noopener">@soulmvnt</a></li>
              <li><a href="#">App Store</a></li>
              <li><a href="#">Google Play</a></li>
              <li><a href="#" onClick={(e) => { e.preventDefault(); onNav("shop"); }}>Shop</a></li>
            </ul>
          </div>
        </div>
        <div className="copyright">
          <span>© 2026 Soul MVNT. All rights reserved.</span>
          <span style={{ display: "flex", gap: 18 }}>
            <a href="#" style={{ color: "inherit", textDecoration: "none" }}>Privacy</a>
            <a href="#" style={{ color: "inherit", textDecoration: "none" }}>Terms</a>
            <span>IDA Design Awards 2025 — Bronze</span>
          </span>
        </div>
      </div>
    </footer>
  );
}

// ---------- Whatsapp FAB ----------
function WhatsAppFab() {
  return (
    <a className="fab" href="https://wa.me/971588335527" target="_blank" rel="noopener" title="WhatsApp the team">
      <svg viewBox="0 0 24 24" width="26" height="26" fill="currentColor" aria-hidden="true">
        <path d="M17.6 14.3c-.3-.1-1.7-.8-2-.9-.3-.1-.4-.1-.6.1l-.9 1.1c-.2.2-.3.2-.6.1-.3-.1-1.2-.5-2.3-1.4-.9-.8-1.4-1.7-1.6-2-.2-.3 0-.4.1-.6.1-.1.3-.3.4-.5l.3-.5c.1-.2 0-.3 0-.5l-.8-1.9c-.2-.5-.4-.4-.6-.4h-.5c-.2 0-.5.1-.7.3-.3.3-1 1-1 2.4s1 2.8 1.2 3c.2.2 2 3.1 5 4.3.7.3 1.2.5 1.7.6.7.2 1.3.2 1.8.1.5-.1 1.7-.7 1.9-1.4.2-.7.2-1.2.2-1.4l-.5-.4z" />
        <path d="M12 2C6.5 2 2 6.5 2 12c0 1.7.4 3.3 1.3 4.8L2 22l5.3-1.4c1.4.8 3 1.2 4.7 1.2 5.5 0 10-4.5 10-10S17.5 2 12 2zm0 18.3c-1.5 0-3-.4-4.3-1.2l-.3-.2-3.1.8.8-3-.2-.3C4 15.1 3.6 13.6 3.6 12c0-4.6 3.8-8.4 8.4-8.4s8.4 3.8 8.4 8.4-3.8 8.3-8.4 8.3z" />
      </svg>
    </a>
  );
}

// ---------- Animated wave decoration ----------
function WaveDecor({ style }) {
  return (
    <svg viewBox="0 0 800 100" preserveAspectRatio="none" style={style} aria-hidden="true">
      <path d="M0,50 Q100,10 200,50 T400,50 T600,50 T800,50" fill="none" stroke="currentColor" strokeWidth="2" />
      <path d="M0,50 Q100,10 200,50 T400,50 T600,50 T800,50" fill="none" stroke="currentColor" strokeWidth="2" opacity="0.5" transform="translate(0,12)" />
    </svg>
  );
}

Object.assign(window, {
  Logo, Nav, TrustStrip, Eyebrow, SectionHead, FormatCard, FormatModal, BookConfirmModal,
  CartModal, TrainerCard, Footer, WhatsAppFab, WaveDecor, SoundHealingGlyph,
});