/* global React, lucide */
const { useState, useEffect, createContext, useContext } = React;

// ---------- Auth (mock, in-memory) ----------
const AuthCtx = createContext(null);
function AuthProvider({ children }) {
  const [user, setUser] = useState(() => {
    try { return JSON.parse(localStorage.getItem("mwg_user") || "null"); } catch { return null; }
  });
  const persist = (u) => { setUser(u); try { localStorage.setItem("mwg_user", JSON.stringify(u)); } catch {} };
  const signIn = (email) => persist({ email, handicap: null, name: email.split("@")[0], tier: "free" });
  const signUp = ({ name, email, handicap }) => persist({ name, email, handicap, tier: "free" });
  const signOut = () => { persist(null); };
  const upgradeMembership = () => setUser((u) => {
    if (!u) return u;
    const next = { ...u, tier: "member", memberSince: new Date().toISOString().slice(0, 10) };
    try { localStorage.setItem("mwg_user", JSON.stringify(next)); } catch {}
    return next;
  });
  const cancelMembership = () => setUser((u) => {
    if (!u) return u;
    const next = { ...u, tier: "free" }; delete next.memberSince;
    try { localStorage.setItem("mwg_user", JSON.stringify(next)); } catch {}
    return next;
  });
  return <AuthCtx.Provider value={{ user, signIn, signUp, signOut, upgradeMembership, cancelMembership }}>{children}</AuthCtx.Provider>;
}
const useAuth = () => useContext(AuthCtx);

// ---------- Header ----------
function SiteHeader({ active = "Coaching", onNav, onAuth, onUpgrade, home = "" }) {
  const links = [
    { label: "Coaching", hash: "#coaching" },
    { label: "Competitions", hash: "#competitions" },
    { label: "Waterberg Cup", hash: "waterberg-cup.html" },
    { label: "Training", hash: "#training" },
    { label: "Membership", hash: "#membership" },
  ];
  const { user, signOut } = useAuth();
  const [menuOpen, setMenuOpen] = useState(false);
  useEffect(() => {
    document.body.style.overflow = menuOpen ? "hidden" : "";
    return () => { document.body.style.overflow = ""; };
  }, [menuOpen]);
  const close = () => setMenuOpen(false);
  // On the homepage `home` is "" (in-page anchors); on a sub-page it is "index.html"
  // so section links jump back to the homepage. Non-anchor hrefs pass through.
  const hrefFor = (h) => (h.startsWith("#") ? home + h : h);
  const bookingHref = home + "#booking";
  return (
    <header className="site-header">
      <div className="container site-header__inner">
        <a className="brand" href={home || "#"} onClick={(e) => { if (!home) { e.preventDefault(); onNav?.("Coaching"); } close(); }}>
          <img src="assets/logo-wolf-black.png" alt="MWG"/>
          <span className="wm">Maritz Wessels</span>
        </a>
        <nav className="nav-links">
          {links.map((l) => (
            <a key={l.label} href={hrefFor(l.hash)} className={l.label === active ? "active" : ""}
              onClick={() => onNav?.(l.label)}>{l.label}</a>
          ))}
        </nav>
        <div className="site-header__actions">
          {user ? (
            <div className={"user-pill " + (user.tier === "member" ? "user-pill--member" : "")}>
              <i data-lucide={user.tier === "member" ? "shield-check" : "user"}></i>
              <span className="user-pill__name">{user.name}</span>
              {user.tier === "member" && <span className="user-pill__badge">Member</span>}
              <button className="user-pill__out" onClick={signOut} title="Sign out"><i data-lucide="log-out"></i></button>
            </div>
          ) : (
            <button className="btn btn--sm btn--outline btn--quiet" onClick={() => onAuth?.("sign-in")}>Sign in</button>
          )}
          {user && user.tier !== "member" && (
            <button className="btn btn--sm" onClick={() => onUpgrade?.()}>Become a member <span className="arrow">→</span></button>
          )}
          {(!user || user.tier === "member") && (
            <a className="btn btn--sm" href={bookingHref}>Book a lesson <span className="arrow">→</span></a>
          )}
        </div>
        <button className="site-header__menu" onClick={() => setMenuOpen((o) => !o)} aria-label={menuOpen ? "Close menu" : "Open menu"} aria-expanded={menuOpen}>
          <i data-lucide={menuOpen ? "x" : "menu"}></i>
        </button>
      </div>
      <div className={"mobile-menu " + (menuOpen ? "is-open" : "")} onClick={close}>
        <div className="mobile-menu__panel" onClick={(e) => e.stopPropagation()}>
          <nav className="mobile-menu__links">
            {links.map((l) => (
              <a key={l.label} href={hrefFor(l.hash)} className={l.label === active ? "active" : ""}
                onClick={() => { onNav?.(l.label); close(); }}>{l.label}</a>
            ))}
          </nav>
          <div className="mobile-menu__actions">
            {user ? (
              <>
                <div className={"user-pill " + (user.tier === "member" ? "user-pill--member" : "")}>
                  <i data-lucide={user.tier === "member" ? "shield-check" : "user"}></i>
                  <span className="user-pill__name">{user.name}</span>
                  {user.tier === "member" && <span className="user-pill__badge">Member</span>}
                </div>
                {user.tier !== "member" && (
                  <button className="btn btn--full" onClick={() => { onUpgrade?.(); close(); }}>Become a member <span className="arrow">→</span></button>
                )}
                <a className="btn btn--full btn--outline" href={bookingHref} onClick={close}>Book a lesson <span className="arrow">→</span></a>
                <button className="mobile-menu__signout" onClick={() => { signOut(); close(); }}>Sign out</button>
              </>
            ) : (
              <>
                <button className="btn btn--full" onClick={() => { onAuth?.("sign-in"); close(); }}>Sign in</button>
                <a className="btn btn--full btn--outline" href={bookingHref} onClick={close}>Book a lesson <span className="arrow">→</span></a>
              </>
            )}
          </div>
        </div>
      </div>
    </header>
  );
}

// ---------- Hero ----------
function Hero() {
  return (
    <section className="hero" data-screen-label="01 Hero">
      <div className="hero__bg"></div>
      <div className="hero__veil"></div>
      <div className="container hero__inner">
        <div className="hero__top">
          <div className="hero__eyebrow"><span className="bar"></span>Maritz Wessels Golf · PGA Professional</div>
          <div className="hero__location">Waterkloof Golf Club<br/>Pretoria, ZA</div>
        </div>
        <div>
          <h1 className="hero__headline">Coach.<br/>Train.<br/>Compete<em>.</em></h1>
          <div className="hero__bottom">
            <p className="hero__lead">
              One-on-one coaching from a PGA professional based in Pretoria. Range work at
              Waterkloof and Pretoria Country Club, studio sessions, and member-only video
              lessons — built around the round you actually play.
            </p>
            <div className="hero__actions">
              <a className="btn btn--ghost-white" href="#offerings">View lessons</a>
              <a className="btn" href="#booking">Book a lesson <span className="arrow">→</span></a>
            </div>
          </div>
        </div>
      </div>
    </section>
  );
}

// ---------- Offerings ----------
const offerings = [
  {
    n: "01", title: "Range training", price: "On request", unit: "60 / 90 MIN",
    desc: "Diagnostic and technical work at Waterkloof Golf Club or Pretoria Country Club. Late-afternoon slots from 16:00 onwards, weekdays.",
    bullets: ["Trackman launch data", "Slow-mo capture & markup", "WhatsApp recap within 24 h"],
  },
  {
    n: "02", title: "Studio training", price: "On request", unit: "BY APPOINTMENT", flag: "Most booked",
    desc: "One-on-one at the Studio19 indoor facility. All-weather, with launch monitor and full multi-angle video setup.",
    bullets: ["Studio launch monitor", "Multi-angle video review", "Practice plan to take away"],
  },
];
function Offerings() {
  return (
    <section className="section section--bone" id="offerings" data-screen-label="02 Offerings">
      <div className="container">
        <div className="section-head">
          <div>
            <div className="section-eyebrow"><span className="bar"></span>01 — Coaching</div>
            <h2 className="section-title">How we work<br/>together</h2>
          </div>
          <p className="section-lead">
            Two formats. The same approach throughout — diagnose what's actually moving the ball,
            then build a small set of drills you'll actually do between sessions.
          </p>
        </div>
        <div className="offerings">
          {offerings.map((o) => (
            <div className="offering" key={o.n}>
              {o.flag && <div className="offering__flag">{o.flag}</div>}
              <div className="offering__num">{o.n} / 02</div>
              <h3 className="offering__title">{o.title}</h3>
              <p className="offering__desc">{o.desc}</p>
              <ul className="offering__list">{o.bullets.map((b) => <li key={b}>{b}</li>)}</ul>
              <div className="offering__foot">
                <div className="offering__price-stack">
                  <div className="offering__price-label">For pricing</div>
                  <div className="offering__price-ways">
                    <i data-lucide="phone"></i>Call
                    <span className="sep">·</span>
                    <i data-lucide="message-square"></i>WhatsApp
                    <span className="sep">·</span>
                    <i data-lucide="mail"></i>Email
                  </div>
                </div>
                <a className="offering__cta" href="#booking">Enquire →</a>
              </div>
            </div>
          ))}
        </div>
      </div>
    </section>
  );
}

// ---------- About ----------
function About() {
  return (
    <section className="section" id="about" data-screen-label="03 About">
      <div className="container">
        <div className="section-head">
          <div>
            <div className="section-eyebrow"><span className="bar"></span>02 — About</div>
            <h2 className="section-title">The coach</h2>
          </div>
          <p className="section-lead">
            PGA professional based in Pretoria. Head coach of golf at Affies (Afrikaanse Hoër Seunskool).
            Plays out of Waterkloof Golf Club and Pretoria Country Club.
          </p>
        </div>
        <div className="about">
          <div className="about__portrait" role="img" aria-label="Maritz Wessels portrait">
            <div className="about__portrait-img"></div>
            <div className="about__portrait-ring"></div>
          </div>
          <div className="about__body">
            <div className="about__role">PGA Pro · Head coach, Affies golf</div>
            <h3 className="about__name">Maritz<br/>Wessels</h3>
            <p className="about__bio">
              I coach the way I play — simple swing thoughts, honest distances, and a process
              that holds up under pressure. Days are split between school sessions at Affies and
              one-on-one work at Waterkloof, Pretoria Country Club and the Studio19 indoor bay.
            </p>
            <div className="about__stats">
              <div className="about__stat"><div className="num">Affies</div><div className="lbl">Head golf coach</div></div>
              <div className="about__stat"><div className="num">2</div><div className="lbl">Home clubs · PTA</div></div>
              <div className="about__stat"><div className="num">2 200+</div><div className="lbl">Lessons taught</div></div>
            </div>
          </div>
        </div>
      </div>
    </section>
  );
}

// ---------- Training videos (paywall) ----------
const trainingVideos = [
  { id: "tv-takeaway",  tag: "Free preview", access: "free",   length: "4:12",  level: "Beginner",    title: "The slow-mo takeaway", excerpt: "The half-speed feel that fixes an open face by P2 — without thinking about hands.", img: "assets/golf-tee-shot.jpg", lead: true },
  { id: "tv-greens",    tag: "Members",      access: "member", length: "8:24",  level: "Intermediate", title: "Reading Highveld greens", excerpt: "Late-afternoon Pretoria greens look slower than they roll. Three reads to make before you stand over the putt.", img: "assets/golf-aerial.jpg" },
  { id: "tv-driver",    tag: "Members",      access: "member", length: "12:08", level: "All levels",   title: "Honest driver distances", excerpt: "Why your real number is 15 metres shorter than the launch monitor says — and why that matters on the tee.", img: "assets/maritz-swing-blue.jpg" },
  { id: "tv-bunker",    tag: "Members",      access: "member", length: "6:55",  level: "Intermediate", title: "Plugged-lie bunker shot", excerpt: "Steep, narrow stance, close the face — the 80/20 rule for getting out first time, every time.", img: "assets/maritz-swing-tee.jpg" },
  { id: "tv-warmup",    tag: "Free preview", access: "free",   length: "3:30",  level: "All levels",   title: "10-minute range warm-up", excerpt: "What I actually do in the ten minutes before a round. Three clubs, six balls, no rushing.", img: "assets/maritz-swing-autumn-1.jpg" },
  { id: "tv-pressure",  tag: "Members",      access: "member", length: "14:40", level: "Advanced",     level_meta: "PRACTICE NOTE", title: "Decision-making on a closing hole", excerpt: "How I picked the shot at 17 last weekend — and the two factors I let make the call for me.", img: "assets/maritz-swing-followthrough.jpg" },
];

function TrainingCard({ v, locked, onUnlock }) {
  return (
    <article className={"v-card" + (v.lead ? " v-card--lead" : "") + (locked ? " is-locked" : "")} key={v.id}>
      <div className="v-card__media" style={{ backgroundImage: `url(${v.img})` }}>
        <div className={"v-card__tag " + (v.access === "free" ? "v-card__tag--free" : "v-card__tag--member")}>{v.tag}</div>
        <div className="v-card__length"><i data-lucide="clock"></i>{v.length}</div>
        {locked ? (
          <div className="v-card__lock">
            <div className="v-card__lock-inner">
              <i data-lucide="lock"></i>
              <div className="v-card__lock-title">Members only</div>
              <button className="btn btn--sm" onClick={onUnlock}>Unlock with MWG <span className="arrow">→</span></button>
            </div>
          </div>
        ) : (
          <button className="v-card__play" aria-label="Play"><i data-lucide="play"></i></button>
        )}
      </div>
      <div className="v-card__meta">
        <span>{v.level_meta || v.level}</span><span>·</span><span>{v.length}</span>
      </div>
      <h3 className="v-card__title">{v.title}</h3>
      <p className="v-card__excerpt">{v.excerpt}</p>
      {locked ? (
        <span className="v-card__cta v-card__cta--locked">Members only</span>
      ) : (
        <a className="v-card__cta" href="#">Watch lesson →</a>
      )}
    </article>
  );
}

function Training({ onUpgradePrompt, onAuthPrompt }) {
  const { user } = useAuth();
  const isMember = user?.tier === "member";
  const handleUnlock = () => {
    if (!user) onAuthPrompt("sign-up");
    else onUpgradePrompt();
  };
  return (
    <section className="section section--bone" id="training" data-screen-label="05 Training">
      <div className="container">
        <div className="section-head">
          <div>
            <div className="section-eyebrow"><span className="bar"></span>05 — Training videos</div>
            <h2 className="section-title">Lessons<br/>on demand</h2>
          </div>
          <p className="section-lead">
            A growing library of short, technical videos drawn from the work I do at the studio and
            on the range. Some clips are free previews — the full library is included with
            <a className="inline-link" href="#membership">MWG Membership</a>.
          </p>
        </div>
        <div className="v-grid">
          {trainingVideos.map((v) => (
            <TrainingCard key={v.id} v={v} locked={v.access === "member" && !isMember} onUnlock={handleUnlock}/>
          ))}
        </div>
        {!isMember && (
          <div className="v-promo">
            <div>
              <div className="section-eyebrow"><span className="bar"></span>Unlock everything</div>
              <h3 className="v-promo__h">The full library<br/>is for members</h3>
              <p className="v-promo__p">In-depth lessons, monthly notes from the studio, downloadable practice plans and a private members feed. Cancel any time.</p>
            </div>
            <div className="v-promo__cta">
              <div className="v-promo__price">
                <span className="num">R 300</span>
                <span className="strike">R 350</span>
                <span className="unit">/ month</span>
              </div>
              <button className="btn" onClick={() => user ? onUpgradePrompt() : onAuthPrompt("sign-up")}>
                Become a member <span className="arrow">→</span>
              </button>
            </div>
          </div>
        )}
      </div>
    </section>
  );
}

// ---------- Membership ----------
const memberBenefits = [
  { icon: "play-circle",   k: "01", t: "Full training library", d: "Every video — fundamentals, drills, course management, short game. New content monthly." },
  { icon: "video",         k: "02", t: "Practice & playing notes", d: "How I'm thinking through competitive rounds, plus voice-over swing breakdowns from on-course play." },
  { icon: "message-square",k: "03", t: "Submit a swing", d: "Send a swing video each month and get a written review with two drills back within 7 days." },
  { icon: "file-text",     k: "04", t: "Practice plans", d: "Downloadable weekly plans, indexed by what you're working on — driver, short game, putting." },
  { icon: "calendar",      k: "05", t: "Member Q&A", d: "Monthly live Q&A on Zoom. Recordings posted to the library if you can't make it." },
  { icon: "ticket",        k: "06", t: "Early competition entry", d: "48-hour heads-up on competition slots before they open to the public list." },
];

function Membership({ onUpgradePrompt, onAuthPrompt }) {
  const { user, cancelMembership } = useAuth();
  const isMember = user?.tier === "member";
  return (
    <section className="section section--dark" id="membership" data-screen-label="06 Membership">
      <div className="container">
        <div className="section-head">
          <div>
            <div className="section-eyebrow"><span className="bar"></span>06 — Membership</div>
            <h2 className="section-title">MWG<br/>Membership</h2>
          </div>
          <p className="section-lead">
            One subscription, six benefits, no contracts. Built for golfers who want consistent
            coaching between in-person sessions — or who can't make it to Pretoria at all.
          </p>
        </div>
        <div className="m-grid">
          {memberBenefits.map((b) => (
            <div className="m-cell" key={b.k}>
              <div className="m-cell__icon"><i data-lucide={b.icon}></i></div>
              <div className="m-cell__num">{b.k}</div>
              <h3 className="m-cell__t">{b.t}</h3>
              <p className="m-cell__d">{b.d}</p>
            </div>
          ))}
        </div>
        <div className="m-pricing">
          <div className="m-pricing__left">
            <div className="m-pricing__plan">MWG Membership</div>
            <div className="m-pricing__price">
              <span className="num">R 300</span>
              <span className="m-pricing__strike">R 350</span>
              <span className="unit">/ month</span>
              <span className="m-pricing__or">Founding member price · save R 50 / month</span>
            </div>
            <ul className="m-pricing__list">
              <li>Full training video library</li>
              <li>Submit one swing review per month</li>
              <li>Monthly member Q&A</li>
              <li>Cancel any time</li>
            </ul>
          </div>
          <div className="m-pricing__right">
            {isMember ? (
              <div className="m-active">
                <div className="m-active__badge"><i data-lucide="check"></i>Active member</div>
                <div className="m-active__since">Since {user.memberSince}</div>
                <div className="m-active__actions">
                  <a className="btn btn--ghost-white" href="#training">Open library →</a>
                  <button className="m-active__cancel" onClick={cancelMembership}>Cancel membership</button>
                </div>
              </div>
            ) : (
              <>
                <button className="btn btn--lg" onClick={() => user ? onUpgradePrompt() : onAuthPrompt("sign-up")}>
                  Become a member <span className="arrow">→</span>
                </button>
                <div className="m-pricing__hint">
                  {user ? "Signed in — confirm in one step." : "You'll create an account first, then confirm."}
                </div>
              </>
            )}
          </div>
        </div>
      </div>
    </section>
  );
}

// ---------- Membership upgrade modal ----------
function MembershipModal({ open, onClose }) {
  const { user, upgradeMembership } = useAuth();
  const [billing, setBilling] = useState("monthly");
  useEffect(() => {
    if (!open) return;
    const onKey = (e) => { if (e.key === "Escape") onClose(); };
    document.addEventListener("keydown", onKey);
    return () => document.removeEventListener("keydown", onKey);
  }, [open, onClose]);
  if (!open) return null;
  const submit = (e) => { e.preventDefault(); upgradeMembership(); onClose(); };
  return (
    <div className="auth-scrim" onClick={onClose}>
      <div className="auth auth--wide" onClick={(e) => e.stopPropagation()} role="dialog" aria-modal="true">
        <button className="auth__close" onClick={onClose} aria-label="Close"><i data-lucide="x"></i></button>
        <div className="auth__brand">
          <img src="assets/logo-wolf-black.png" alt=""/>
          <span>Join MWG Membership</span>
        </div>
        <p className="auth__intro">Hi {user?.name || "there"} — confirm your plan and you'll have access to the full training library in 30 seconds.</p>
        <div className="upgrade__plans">
          <label className={"upgrade__plan " + (billing === "monthly" ? "is-on" : "")}>
            <span className="upgrade__plan-flag">Save R 50</span>
            <input type="radio" name="billing" checked={billing === "monthly"} onChange={() => setBilling("monthly")}/>
            <div className="upgrade__plan-h">Monthly</div>
            <div className="upgrade__plan-p">
              <span className="num">R 300</span>
              <span className="upgrade__plan-strike">R 350</span>
              <span>/ mo</span>
            </div>
            <div className="upgrade__plan-n">Founding member price</div>
          </label>
          <label className={"upgrade__plan " + (billing === "annual" ? "is-on" : "")}>
            <input type="radio" name="billing" checked={billing === "annual"} onChange={() => setBilling("annual")}/>
            <div className="upgrade__plan-h">Annual</div>
            <div className="upgrade__plan-p"><span className="num">R 3 000</span><span>/ yr</span></div>
            <div className="upgrade__plan-n">Two months free</div>
          </label>
        </div>
        <form className="auth__form" onSubmit={submit} style={{ marginTop: 12 }}>
          <div className="field">
            <div className="lbl">Card number</div>
            <input className="input input--light" placeholder="4242 4242 4242 4242" required/>
          </div>
          <div style={{ display: "grid", gridTemplateColumns: "1fr 1fr", gap: 14 }}>
            <div className="field">
              <div className="lbl">Expiry</div>
              <input className="input input--light" placeholder="MM / YY" required/>
            </div>
            <div className="field">
              <div className="lbl">CVC</div>
              <input className="input input--light" placeholder="•••" required/>
            </div>
          </div>
          <button type="submit" className="btn btn--full">
            Confirm {billing === "monthly" ? "R 300 / month" : "R 3 000 / year"} <span className="arrow">→</span>
          </button>
        </form>
        <div className="auth__foot">
          Demo only — no card is charged. Real billing would run through Stripe / Yoco.
        </div>
      </div>
    </div>
  );
}

// ---------- Journal removed (replaced by Training above) ----------

// ---------- Stats band (inside Booking section) ----------
function StatsBand() {
  return (
    <div className="stats-band">
      <div className="stats-band__cell"><div className="num">12</div><div className="lbl">Years coaching</div></div>
      <div className="stats-band__cell"><div className="num accent">+1.4</div><div className="lbl">Playing index</div></div>
      <div className="stats-band__cell"><div className="num">9.4<span style={{fontSize:"24px",color:"var(--fg-on-dark-3)"}}> / 10</span></div><div className="lbl">Avg. recap rating</div></div>
      <div className="stats-band__cell"><div className="num">24 h</div><div className="lbl">Recap turnaround</div></div>
    </div>
  );
}

// ---------- Booking ----------
function Booking() {
  const [sent, setSent] = useState(false);
  const [format, setFormat] = useState("Range");
  return (
    <section className="section section--dark" id="booking" data-screen-label="06 Booking">
      <div className="container">
        <div className="booking">
          <div className="booking__media" role="img" aria-label="Maritz swing follow-through"></div>
          <div className="booking__body">
            <div className="section-eyebrow"><span className="bar"></span>07 — Book a slot</div>
            <h2 className="booking__h">Slots open<br/>this week</h2>
          <p className="booking__lead">
            Two formats — range training from 16:00 on weekdays at Waterkloof or Pretoria Country
            Club, or studio sessions at Studio19 by appointment. Send a quick note and I'll come
            back with times.
          </p>
            <ul className="booking__slots">
              <li>
                <div className="booking__slot-k"><i data-lucide="map-pin"></i>Range</div>
                <div className="booking__slot-d">
                  <strong>Waterkloof · Pretoria CC</strong>
                  <span>Mon – Fri · from 16:00</span>
                </div>
              </li>
              <li>
                <div className="booking__slot-k"><i data-lucide="home"></i>Studio</div>
                <div className="booking__slot-d">
                  <strong>Studio19 indoor bay</strong>
                  <span>By appointment · weekdays</span>
                </div>
              </li>
            </ul>
            {sent ? (
              <div style={{ padding: "24px 28px", border: "1.5px solid var(--mwg-fairway)", color: "var(--mwg-white)", borderRadius: 4 }}>
                <div style={{ fontFamily: "var(--font-display)", fontWeight: 700, fontSize: 14, letterSpacing: "0.14em", textTransform: "uppercase", color: "var(--mwg-fairway)" }}>
                  ✓ Request sent
                </div>
                <div style={{ marginTop: 8, fontSize: 14, color: "var(--fg-on-dark-2)", fontWeight: 300 }}>
                  Thanks — I'll come back to you within 24 hours.
                </div>
              </div>
            ) : (
              <>
                <form className="booking__form" onSubmit={(e) => { e.preventDefault(); setSent(true); }}>
                  <div className="field">
                    <div className="lbl">Full name</div>
                    <input className="input" placeholder="—" defaultValue="" required/>
                  </div>
                  <div className="field">
                    <div className="lbl">Mobile</div>
                    <input className="input" placeholder="082 …" required/>
                  </div>
                  <div className="field field--full">
                    <div className="lbl">Format</div>
                    <div style={{ display: "flex", gap: 8, marginTop: 4 }}>
                      {["Range", "Studio"].map((f) => (
                        <button type="button" key={f} onClick={() => setFormat(f)}
                          style={{
                            padding: "8px 14px", height: 36,
                            background: format === f ? "var(--mwg-fairway)" : "transparent",
                            color: "var(--mwg-white)",
                            border: "1px solid " + (format === f ? "var(--mwg-fairway)" : "rgba(255,255,255,0.32)"),
                            borderRadius: 3,
                            fontFamily: "var(--font-display)", fontWeight: 700, fontSize: 11,
                            letterSpacing: "0.14em", textTransform: "uppercase",
                          }}>{f}</button>
                      ))}
                    </div>
                  </div>
                  <div className="field field--full">
                    <div className="lbl">Anything I should know</div>
                    <input className="input" placeholder="Handicap, what you're working on, dates you're free…"/>
                  </div>
                  <div className="field field--full booking__cta">
                    <button type="submit" className="btn">Send request <span className="arrow">→</span></button>
                    <span className="booking__hint">I reply within 24 h, usually same day.</span>
                  </div>
                </form>
                <div style={{ marginTop: 12 }}>
                  <StatsBand/>
                </div>
              </>
            )}
          </div>
        </div>
      </div>
    </section>
  );
}

// ---------- Footer ----------
function SiteFooter() {
  return (
    <footer className="site-footer">
      <div className="container">
        <div className="site-footer__top">
          <div className="site-footer__brand">
            <div className="brand-row">
              <img src="assets/logo-wolf-white.png" alt=""/>
              <div className="wm">Maritz Wessels<br/>Golf</div>
            </div>
            <p>One-on-one golf coaching from a PGA professional. Based in Pretoria. Head golf coach at Affies; plays out of Waterkloof Golf Club and Pretoria Country Club.</p>
          </div>
          <div className="fcol">
            <h4>Coaching</h4>
            <ul>
              <li><a href="#offerings">Range sessions</a></li>
              <li><a href="#offerings">Playing lessons</a></li>
              <li><a href="#offerings">Full-day intensives</a></li>
              <li><a href="#offerings">Junior programme</a></li>
            </ul>
          </div>
          <div className="fcol">
            <h4>Training</h4>
            <ul>
              <li><a href="#training">Video library</a></li>
              <li><a href="#training">Free previews</a></li>
              <li><a href="#membership">Membership</a></li>
            </ul>
          </div>
          <div className="fcol">
            <h4>Contact</h4>
            <ul>
              <li><a href="mailto:maritzwesselsgolf@gmail.com">maritzwesselsgolf@gmail.com</a></li>
              <li><a href="tel:+27821234567">+27 82 123 4567</a></li>
              <li><a href="#">Pretoria, ZA</a></li>
            </ul>
          </div>
        </div>
        <div className="site-footer__bottom">
          <span>© 2026 Maritz Wessels Golf</span>
          <div className="socials">
            <a href="#" aria-label="Instagram">
              <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="1.5" strokeLinecap="round" strokeLinejoin="round">
                <rect x="3" y="3" width="18" height="18" rx="5"/>
                <circle cx="12" cy="12" r="4"/>
                <circle cx="17.5" cy="6.5" r="1" fill="currentColor"/>
              </svg>
              Instagram
            </a>
            <a href="#" aria-label="WhatsApp">
              <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="1.5" strokeLinecap="round" strokeLinejoin="round">
                <path d="M21 11.5a8.38 8.38 0 0 1-1.05 4.08 8.5 8.5 0 0 1-7.45 4.42 8.38 8.38 0 0 1-4.08-1.05L3 21l1.05-5.42A8.38 8.38 0 0 1 3 11.5a8.5 8.5 0 0 1 4.42-7.45A8.38 8.38 0 0 1 11.5 3a8.5 8.5 0 0 1 8.5 8.5z"/>
                <path d="M9 9.5c0 .5.2 1.3.7 2.2 1 1.7 2.4 3.1 4.1 4.1.9.5 1.7.7 2.2.7.4 0 .9-.2 1.3-.6l.7-.7a.6.6 0 0 0 0-.9l-1.7-1a.6.6 0 0 0-.7.1l-.5.6c-.1.1-.3.2-.5.1a6.6 6.6 0 0 1-3.1-3.1c-.1-.2 0-.4.1-.5l.6-.5a.6.6 0 0 0 .1-.7l-1-1.7a.6.6 0 0 0-.9 0l-.7.7c-.4.4-.6.9-.6 1.3z" fill="currentColor" stroke="none"/>
              </svg>
              WhatsApp
            </a>
            <a href="mailto:maritzwesselsgolf@gmail.com" aria-label="Email">
              <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="1.5" strokeLinecap="round" strokeLinejoin="round">
                <rect x="3" y="5" width="18" height="14" rx="2"/>
                <path d="m3 7 9 6 9-6"/>
              </svg>
              Email
            </a>
          </div>
        </div>
      </div>
    </footer>
  );
}

// ---------- Auth modal ----------
const COACH_EMAIL = "maritzwesselsgolf@gmail.com";

function AuthModal({ open, mode: initialMode, onClose }) {
  const { signIn, signUp } = useAuth();
  const [mode, setMode] = useState(initialMode || "sign-in");
  const [form, setForm] = useState({ name: "", email: "", handicap: "", password: "" });
  useEffect(() => { setMode(initialMode || "sign-in"); }, [initialMode, open]);
  useEffect(() => {
    if (!open) return;
    const onKey = (e) => { if (e.key === "Escape") onClose(); };
    document.addEventListener("keydown", onKey);
    return () => document.removeEventListener("keydown", onKey);
  }, [open, onClose]);
  if (!open) return null;
  const setF = (k) => (e) => setForm((s) => ({ ...s, [k]: e.target.value }));
  const submit = (e) => {
    e.preventDefault();
    if (mode === "sign-in") signIn(form.email);
    else signUp({ name: form.name || form.email.split("@")[0], email: form.email, handicap: form.handicap });
    onClose();
  };
  return (
    <div className="auth-scrim" onClick={onClose}>
      <div className="auth" onClick={(e) => e.stopPropagation()} role="dialog" aria-modal="true">
        <button className="auth__close" onClick={onClose} aria-label="Close"><i data-lucide="x"></i></button>
        <div className="auth__brand">
          <img src="assets/logo-wolf-black.png" alt=""/>
          <span>Maritz Wessels Golf</span>
        </div>
        <div className="auth__tabs">
          <button className={"auth__tab " + (mode === "sign-in" ? "is-active" : "")} onClick={() => setMode("sign-in")}>Sign in</button>
          <button className={"auth__tab " + (mode === "sign-up" ? "is-active" : "")} onClick={() => setMode("sign-up")}>Create account</button>
        </div>
        <button type="button" className="auth__google" onClick={() => { signIn("you@gmail.com"); onClose(); }}>
          <svg className="gicon" viewBox="0 0 18 18" xmlns="http://www.w3.org/2000/svg" aria-hidden="true">
            <path fill="#4285F4" d="M17.64 9.2c0-.637-.057-1.251-.164-1.84H9v3.481h4.844a4.14 4.14 0 0 1-1.796 2.716v2.258h2.908c1.702-1.567 2.684-3.874 2.684-6.615z"/>
            <path fill="#34A853" d="M9 18c2.43 0 4.467-.806 5.956-2.18l-2.908-2.259c-.806.54-1.837.86-3.048.86-2.344 0-4.328-1.584-5.036-3.711H.957v2.332A8.997 8.997 0 0 0 9 18z"/>
            <path fill="#FBBC05" d="M3.964 10.71A5.41 5.41 0 0 1 3.682 9c0-.593.102-1.17.282-1.71V4.958H.957A8.996 8.996 0 0 0 0 9c0 1.452.348 2.827.957 4.042l3.007-2.332z"/>
            <path fill="#EA4335" d="M9 3.58c1.321 0 2.508.454 3.44 1.345l2.582-2.58C13.463.891 11.426 0 9 0A8.997 8.997 0 0 0 .957 4.958L3.964 7.29C4.672 5.163 6.656 3.58 9 3.58z"/>
          </svg>
          Continue with Google
        </button>
        <div className="auth__divider"><span>or with email</span></div>
        <form className="auth__form" onSubmit={submit}>
          {mode === "sign-up" && (
            <div className="field">
              <div className="lbl">Full name</div>
              <input className="input input--light" value={form.name} onChange={setF("name")} placeholder="Daniel Pretorius" required/>
            </div>
          )}
          <div className="field">
            <div className="lbl">Email</div>
            <input type="email" className="input input--light" value={form.email} onChange={setF("email")} placeholder="you@email.com" required/>
          </div>
          <div className="field">
            <div className="lbl">Password</div>
            <input type="password" className="input input--light" value={form.password} onChange={setF("password")} placeholder="••••••••" required/>
          </div>
          {mode === "sign-up" && (
            <div className="field">
              <div className="lbl">Handicap <span className="lbl__opt">(optional)</span></div>
              <input className="input input--light" value={form.handicap} onChange={setF("handicap")} placeholder="e.g. 12.4"/>
            </div>
          )}
          <button type="submit" className="btn btn--full">{mode === "sign-in" ? "Sign in" : "Create account"} <span className="arrow">→</span></button>
        </form>
        <div className="auth__foot">
          {mode === "sign-in" ? (
            <span>New here? <a onClick={() => setMode("sign-up")}>Create an account</a></span>
          ) : (
            <span>Already have an account? <a onClick={() => setMode("sign-in")}>Sign in</a></span>
          )}
        </div>
      </div>
    </div>
  );
}

// ---------- Competitions ----------
const WATERBERG_CUP = {
  id: "waterberg-cup-2026",
  name: "Waterberg Cup",
  venue: "Clarens Golf Club",
  region: "Clarens, Free State",
  date: "3 September 2026",
  format: "Pairs · Stableford",
  field: 64,
  fee: "R 5 500 / player",
  feeNote: "Excludes the Pro package",
  img: "assets/golf-aerial.jpg",
  status: "open",
  special:
    "Studio19 will be on-site for the event — launch-monitor bay, swing video and club " +
    "fitting access at the clubhouse.",
  highlights: [
    { icon: "home", t: "Stay in the chalets", d: "On-course chalet accommodation at Clarens Golf Club for the tour." },
    { icon: "briefcase", t: "Business networking", d: "A high-calibre networking event — golf alongside owners and decision-makers." },
    { icon: "gamepad-2", t: "Multiple game modes", d: "Several game formats in play across the tour, not just one round." },
    { icon: "trophy", t: "Two teams, one trophy", d: "The field splits into two sides that compete for the final trophy." },
    { icon: "ticket", t: "Limited seats", d: "Places are strictly limited — apply now to secure your spot." },
  ],
  note:
    "A long-standing golf tour, with Maritz as the resident pro. This year the Waterberg Cup " +
    "heads to Clarens Golf Club, in the Free State, on 3 September 2026 — competitive golf in " +
    "the Maluti foothills, with Studio19 on-site.",
};

// localStorage-backed applicant store (the production backend would replace this).
function loadApplicants() {
  try { return JSON.parse(localStorage.getItem("mwg_waterberg_applicants") || "[]"); } catch { return []; }
}
function saveApplicants(list) {
  try { localStorage.setItem("mwg_waterberg_applicants", JSON.stringify(list)); } catch {}
}

// ---------- Waterberg Cup application form modal ----------
const blankPerson = () => ({
  name: "", mobile: "", email: "", handicap: "", club: "",
  occupation: "", company: "", idnum: "", dietary: "", roomshare: "no",
});
const ROOM_OPTS = [{ v: "no", l: "Single" }, { v: "yes", l: "Share" }, { v: "unsure", l: "Unsure" }];

// Shared field set for one person — used for a solo applicant and each team member.
function PersonFields({ p, onField, onRoom, showPartner = false }) {
  const f = (k) => (e) => onField(k, e.target.value);
  return (
    <div className="wb-form__grid">
      <div className="field">
        <div className="lbl">Full name</div>
        <input className="input input--light" value={p.name} onChange={f("name")} placeholder="Daniel Pretorius" required/>
      </div>
      <div className="field">
        <div className="lbl">Mobile</div>
        <input className="input input--light" value={p.mobile} onChange={f("mobile")} placeholder="082 …" required/>
      </div>
      <div className="field">
        <div className="lbl">Email</div>
        <input type="email" className="input input--light" value={p.email} onChange={f("email")} placeholder="you@email.com" required/>
      </div>
      <div className="field">
        <div className="lbl">WHS handicap</div>
        <input className="input input--light" value={p.handicap} onChange={f("handicap")} placeholder="12.4" required/>
      </div>
      <div className="field">
        <div className="lbl">Home club</div>
        <input className="input input--light" value={p.club} onChange={f("club")} placeholder="Waterkloof, Pretoria CC, …" required/>
      </div>
      <div className="field">
        <div className="lbl">Occupation</div>
        <input className="input input--light" value={p.occupation} onChange={f("occupation")} placeholder="e.g. Director, Attorney, Founder" required/>
      </div>
      <div className="field">
        <div className="lbl">Company representing</div>
        <input className="input input--light" value={p.company} onChange={f("company")} placeholder="Company / organisation" required/>
      </div>
      <div className="field">
        <div className="lbl">ID / Passport number <span className="lbl__opt">(KYC)</span></div>
        <input className="input input--light" value={p.idnum} onChange={f("idnum")} placeholder="For verification" required/>
      </div>
      {showPartner && (
        <div className="field">
          <div className="lbl">Playing partner <span className="lbl__opt">(if known)</span></div>
          <input className="input input--light" value={p.partner || ""} onChange={f("partner")} placeholder="Or leave blank — I'll pair you"/>
        </div>
      )}
      <div className="field">
        <div className="lbl">Dietary requirements <span className="lbl__opt">(optional)</span></div>
        <input className="input input--light" value={p.dietary} onChange={f("dietary")} placeholder="Vegetarian, halaal, allergies …"/>
      </div>
      <div className="field">
        <div className="lbl">Sharing a room?</div>
        <div className="wb-radio">
          {ROOM_OPTS.map((o) => (
            <button type="button" key={o.v}
              className={"wb-radio__btn " + (p.roomshare === o.v ? "is-on" : "")}
              onClick={() => onRoom(o.v)}>{o.l}</button>
          ))}
        </div>
      </div>
    </div>
  );
}

function WaterbergEntryModal({ open, onClose, onSubmitted, prefill }) {
  const [mode, setMode] = useState("solo"); // "solo" | "team"
  const [solo, setSolo] = useState(() => ({ ...blankPerson(), partner: "" }));
  const [teamName, setTeamName] = useState("");
  const [members, setMembers] = useState(() => [blankPerson()]);
  const [notes, setNotes] = useState("");
  useEffect(() => {
    if (!open) return;
    setSolo((f) => ({
      ...f,
      name: prefill?.name || f.name,
      email: prefill?.email || f.email,
      handicap: prefill?.handicap || f.handicap,
    }));
    const onKey = (e) => { if (e.key === "Escape") onClose(); };
    document.addEventListener("keydown", onKey);
    return () => document.removeEventListener("keydown", onKey);
  }, [open, prefill, onClose]);
  if (!open) return null;

  const setSoloField = (k, v) => setSolo((s) => ({ ...s, [k]: v }));
  const setMemberField = (i) => (k, v) => setMembers((ms) => ms.map((m, j) => (j === i ? { ...m, [k]: v } : m)));
  const setMemberRoom = (i) => (v) => setMembers((ms) => ms.map((m, j) => (j === i ? { ...m, roomshare: v } : m)));
  const addMember = () => setMembers((ms) => (ms.length < 8 ? [...ms, blankPerson()] : ms));
  const removeMember = (i) => setMembers((ms) => (ms.length > 1 ? ms.filter((_, j) => j !== i) : ms));

  const submit = (e) => {
    e.preventDefault();
    const base = { id: "app-" + Date.now().toString(36), submittedAt: new Date().toISOString(), status: "pending" };
    const entry = mode === "team"
      ? { ...base, mode: "team", teamName, members, notes, name: teamName, email: members[0]?.email || "", mobile: members[0]?.mobile || "" }
      : { ...base, mode: "solo", ...solo, notes };
    const list = loadApplicants();
    list.unshift(entry);
    saveApplicants(list);
    onSubmitted?.(entry);
  };

  const personLines = (m, i) =>
    `  ${i + 1}) ${m.name} · ${m.email} · ${m.mobile} · hcp ${m.handicap} · ${m.occupation} @ ${m.company} · ID ${m.idnum} · ${m.club}${m.dietary ? ` · diet: ${m.dietary}` : ""} · room: ${m.roomshare}`;
  const bodyLines = mode === "team"
    ? [`Hi Maritz,`, ``, `We'd like to enter a team in the Waterberg Cup, ${WATERBERG_CUP.date}.`, ``,
       `Team: ${teamName}`, `Members (${members.length}):`, ...members.map(personLines), ``, `Notes: ${notes || "—"}`, ``, `— Sent via mwg.golf`]
    : [`Hi Maritz,`, ``, `I'd like to enter the Waterberg Cup, ${WATERBERG_CUP.date}.`, ``,
       `Name:       ${solo.name}`, `Email:      ${solo.email}`, `Mobile:     ${solo.mobile}`, `ID:         ${solo.idnum}`,
       `Occupation: ${solo.occupation}`, `Company:    ${solo.company}`, `Home club:  ${solo.club}`, `Handicap:   ${solo.handicap}`,
       `Partner:    ${solo.partner || "—"}`, `Dietary:    ${solo.dietary || "—"}`, `Roomshare:  ${solo.roomshare}`, ``, `Notes: ${notes || "—"}`, ``, `— Sent via mwg.golf`];
  const mailtoBody = encodeURIComponent(bodyLines.join("\n"));
  const mailtoSubject = encodeURIComponent("Waterberg Cup · " + (mode === "team" ? `team entry: ${teamName || "—"}` : `entry from ${solo.name || "—"}`));

  return (
    <div className="auth-scrim" onClick={onClose}>
      <div className="auth auth--wide wb-modal" onClick={(e) => e.stopPropagation()} role="dialog" aria-modal="true">
        <button className="auth__close" onClick={onClose} aria-label="Close"><i data-lucide="x"></i></button>
        <div className="auth__brand">
          <img src="assets/logo-wolf-black.png" alt=""/>
          <span>Waterberg Cup · Entry</span>
        </div>
        <p className="auth__intro">
          Apply for your place at the Waterberg Cup — Clarens Golf Club, {WATERBERG_CUP.date}.
          Enter on your own or build a team. Entries are reviewed and confirmed by reply within 24 hours.
        </p>
        <div className="field field--full" style={{ marginBottom: 18 }}>
          <div className="lbl">Entering as</div>
          <div className="wb-radio wb-mode">
            <button type="button" className={"wb-radio__btn " + (mode === "solo" ? "is-on" : "")} onClick={() => setMode("solo")}>Just me</button>
            <button type="button" className={"wb-radio__btn " + (mode === "team" ? "is-on" : "")} onClick={() => setMode("team")}>Enter a team</button>
          </div>
        </div>
        <form className="auth__form wb-form" onSubmit={submit}>
          {mode === "solo" ? (
            <PersonFields p={solo} onField={setSoloField} onRoom={(v) => setSoloField("roomshare", v)} showPartner/>
          ) : (
            <>
              <div className="field field--full">
                <div className="lbl">Team name</div>
                <input className="input input--light" value={teamName} onChange={(e) => setTeamName(e.target.value)} placeholder="e.g. Bushveld Bandits" required/>
              </div>
              {members.map((m, i) => (
                <div className="wb-member" key={i}>
                  <div className="wb-member__head">
                    <span className="wb-member__title">Member {i + 1}</span>
                    {members.length > 1 && (
                      <button type="button" className="wb-member__remove" onClick={() => removeMember(i)}>
                        <i data-lucide="trash-2"></i>Remove
                      </button>
                    )}
                  </div>
                  <PersonFields p={m} onField={setMemberField(i)} onRoom={setMemberRoom(i)}/>
                </div>
              ))}
              {members.length < 8 && (
                <button type="button" className="wb-member__add" onClick={addMember}>
                  <i data-lucide="plus"></i>Add another member
                </button>
              )}
            </>
          )}
          <div className="field field--full">
            <div className="lbl">Anything else I should know</div>
            <textarea className="input input--light wb-textarea" rows="3" value={notes} onChange={(e) => setNotes(e.target.value)} placeholder="Travel constraints, requested tee time, etc."/>
          </div>
          <div className="wb-form__actions">
            <button type="submit" className="btn">Submit {mode === "team" ? "team entry" : "application"} <span className="arrow">→</span></button>
            <a className="wb-form__mailto" href={`mailto:${COACH_EMAIL}?subject=${mailtoSubject}&body=${mailtoBody}`}>
              Or email it instead
            </a>
          </div>
        </form>
        <div className="auth__foot">
          Stored on the site for Maritz to review. Production build would also send to
          <b> {COACH_EMAIL}</b>.
        </div>
      </div>
    </div>
  );
}

// ---------- Applicants admin panel (coach only) ----------
function WaterbergApplicants({ open, onClose }) {
  const [list, setList] = useState(() => loadApplicants());
  const [openId, setOpenId] = useState(null);
  useEffect(() => {
    if (!open) return;
    setList(loadApplicants());
    const onKey = (e) => { if (e.key === "Escape") onClose(); };
    document.addEventListener("keydown", onKey);
    return () => document.removeEventListener("keydown", onKey);
  }, [open, onClose]);
  if (!open) return null;
  const setStatus = (id, status) => {
    const next = list.map((a) => a.id === id ? { ...a, status } : a);
    setList(next); saveApplicants(next);
  };
  const remove = (id) => {
    const next = list.filter((a) => a.id !== id);
    setList(next); saveApplicants(next);
  };
  const exportCSV = () => {
    const cols = ["submittedAt","status","type","teamName","name","email","mobile","idnum","occupation","company","club","handicap","dietary","roomshare","notes"];
    const esc = (v) => `"${String(v ?? "").replace(/"/g,'""')}"`;
    const rows = [cols.join(",")];
    list.forEach((a) => {
      if (a.mode === "team") {
        (a.members || []).forEach((m) => {
          rows.push(cols.map((c) => {
            if (c === "type") return esc("team");
            if (c === "teamName") return esc(a.teamName);
            if (c === "submittedAt" || c === "status" || c === "notes") return esc(a[c]);
            return esc(m[c]);
          }).join(","));
        });
      } else {
        rows.push(cols.map((c) => {
          if (c === "type") return esc("individual");
          if (c === "teamName") return esc("");
          return esc(a[c]);
        }).join(","));
      }
    });
    const blob = new Blob([rows.join("\n")], { type: "text/csv" });
    const url = URL.createObjectURL(blob);
    const a = document.createElement("a");
    a.href = url; a.download = "waterberg-cup-applicants.csv";
    document.body.appendChild(a); a.click(); a.remove();
    setTimeout(() => URL.revokeObjectURL(url), 1000);
  };

  return (
    <div className="auth-scrim" onClick={onClose}>
      <div className="wb-admin" onClick={(e) => e.stopPropagation()} role="dialog" aria-modal="true">
        <button className="auth__close" onClick={onClose} aria-label="Close"><i data-lucide="x"></i></button>
        <div className="wb-admin__head">
          <div>
            <div className="section-eyebrow"><span className="bar"></span>Admin · Waterberg Cup</div>
            <h3 className="wb-admin__h">Applicants <span className="wb-admin__count">{list.length}</span></h3>
          </div>
          <div className="wb-admin__actions">
            <button className="btn btn--sm btn--outline" onClick={exportCSV} disabled={!list.length}>
              <i data-lucide="download"></i>Export CSV
            </button>
          </div>
        </div>
        {list.length === 0 ? (
          <div className="wb-admin__empty">
            <i data-lucide="inbox"></i>
            <div>No applications yet.</div>
            <span>New entries land here as soon as a player submits the form.</span>
          </div>
        ) : (
          <ul className="wb-admin__list">
            {list.map((a) => {
              const isOpen = openId === a.id;
              return (
                <li key={a.id} className={"wb-row " + (isOpen ? "is-open " : "") + "wb-row--" + a.status}>
                  <button className="wb-row__head" onClick={() => setOpenId(isOpen ? null : a.id)}>
                    <span className={"wb-row__status wb-row__status--" + a.status}>
                      <span className="dot"></span>{a.status}
                    </span>
                    <span className="wb-row__name">{(a.mode === "team" ? a.teamName : a.name) || "—"}</span>
                    <span className="wb-row__meta">{a.mode === "team" ? `Team · ${a.members?.length || 0} players` : `${a.club || "—"} · hcp ${a.handicap || "—"}`}</span>
                    <span className="wb-row__date">{new Date(a.submittedAt).toLocaleDateString("en-ZA", { day: "2-digit", month: "short" })}</span>
                    <i data-lucide={isOpen ? "chevron-up" : "chevron-down"}></i>
                  </button>
                  {isOpen && (
                    <div className="wb-row__body">
                      {a.mode === "team" ? (
                        <div className="wb-row__team">
                          {(a.members || []).map((m, i) => (
                            <div className="wb-row__member" key={i}>
                              <div className="wb-row__member-h">Member {i + 1} — {m.name || "—"}</div>
                              <dl className="wb-row__dl">
                                <div><dt>Email</dt><dd><a href={`mailto:${m.email}`}>{m.email}</a></dd></div>
                                <div><dt>Mobile</dt><dd><a href={`tel:${m.mobile}`}>{m.mobile}</a></dd></div>
                                <div><dt>Occupation</dt><dd>{m.occupation || "—"}</dd></div>
                                <div><dt>Company</dt><dd>{m.company || "—"}</dd></div>
                                <div><dt>ID / passport</dt><dd>{m.idnum || "—"}</dd></div>
                                <div><dt>Club · hcp</dt><dd>{(m.club || "—")} · {(m.handicap || "—")}</dd></div>
                                <div><dt>Dietary</dt><dd>{m.dietary || "—"}</dd></div>
                                <div><dt>Room</dt><dd>{m.roomshare}</dd></div>
                              </dl>
                            </div>
                          ))}
                          <div className="wb-row__teammeta">Submitted {new Date(a.submittedAt).toLocaleString("en-ZA")}</div>
                        </div>
                      ) : (
                        <dl className="wb-row__dl">
                          <div><dt>Email</dt><dd><a href={`mailto:${a.email}`}>{a.email}</a></dd></div>
                          <div><dt>Mobile</dt><dd><a href={`tel:${a.mobile}`}>{a.mobile}</a></dd></div>
                          <div><dt>Occupation</dt><dd>{a.occupation || "—"}</dd></div>
                          <div><dt>Company</dt><dd>{a.company || "—"}</dd></div>
                          <div><dt>ID / passport</dt><dd>{a.idnum || "—"}</dd></div>
                          <div><dt>Partner</dt><dd>{a.partner || "—"}</dd></div>
                          <div><dt>Dietary</dt><dd>{a.dietary || "—"}</dd></div>
                          <div><dt>Room</dt><dd>{a.roomshare}</dd></div>
                          <div><dt>Submitted</dt><dd>{new Date(a.submittedAt).toLocaleString("en-ZA")}</dd></div>
                        </dl>
                      )}
                      {a.notes && <p className="wb-row__notes">"{a.notes}"</p>}
                      <div className="wb-row__actions">
                        <button className="wb-row__btn" onClick={() => setStatus(a.id, "confirmed")}>
                          <i data-lucide="check"></i>Confirm
                        </button>
                        <button className="wb-row__btn" onClick={() => setStatus(a.id, "waitlist")}>
                          <i data-lucide="clock"></i>Waitlist
                        </button>
                        <button className="wb-row__btn" onClick={() => setStatus(a.id, "pending")}>
                          <i data-lucide="rotate-ccw"></i>Pending
                        </button>
                        <a className="wb-row__btn" href={`mailto:${a.email}?subject=Waterberg%20Cup%20%C2%B7%20your%20entry`}>
                          <i data-lucide="mail"></i>Reply
                        </a>
                        <button className="wb-row__btn wb-row__btn--danger" onClick={() => remove(a.id)}>
                          <i data-lucide="trash-2"></i>Remove
                        </button>
                      </div>
                    </div>
                  )}
                </li>
              );
            })}
          </ul>
        )}
        <div className="wb-admin__foot">
          Stored in this browser for the demo. Production version: same view, backed by a real database
          + email notification to <b>{COACH_EMAIL}</b>.
        </div>
      </div>
    </div>
  );
}

function Competitions({ onAuthPrompt }) {
  const { user } = useAuth();
  const isCoach = (user?.email || "").toLowerCase() === COACH_EMAIL.toLowerCase();
  const [entryOpen, setEntryOpen] = useState(false);
  const [adminOpen, setAdminOpen] = useState(false);
  const [submittedEntry, setSubmittedEntry] = useState(null);
  const [count, setCount] = useState(() => loadApplicants().length);

  // Re-read count whenever modals close (cheap and reliable enough for a static demo).
  useEffect(() => {
    if (!entryOpen && !adminOpen) setCount(loadApplicants().length);
  }, [entryOpen, adminOpen]);

  const handleApplyClick = () => {
    setSubmittedEntry(null);
    setEntryOpen(true);
  };
  const handleSubmitted = (entry) => {
    setSubmittedEntry(entry);
    setEntryOpen(false);
    setCount(loadApplicants().length);
  };

  const c = WATERBERG_CUP;
  return (
    <section className="section" id="competitions" data-screen-label="04 Competitions">
      <div className="container">
        <div className="section-head">
          <div>
            <div className="section-eyebrow"><span className="bar"></span>04 — Competitions</div>
            <h2 className="section-title">The<br/>Waterberg Cup</h2>
          </div>
          <p className="section-lead">
            A long-standing golf tour, with Maritz as the resident pro. This year the Waterberg Cup
            heads to Clarens Golf Club in the Free State on 3 September 2026 — Studio19 on-site and
            competitive golf in the Maluti foothills. Fill in the form to apply; places are limited.
          </p>
        </div>

        <article className="comp comp--feature">
          <div className="comp__media" style={{ backgroundImage: `url(${c.img})` }}>
            <div className="comp__feature-tag">Waterberg Cup · 2026</div>
            <div className={"comp__status comp__status--" + c.status}>
              <span className="dot"></span>{c.status === "open" ? "Entries open" : "Closed"}
            </div>
          </div>
          <div className="comp__body">
            <div className="comp__meta">
              <span>{c.region}</span><span>·</span><span>{c.date}</span>
            </div>
            <h3 className="comp__name">{c.name}</h3>
            <div className="comp__venue">
              <i data-lucide="map-pin"></i>{c.venue}
            </div>
            <p className="comp__note">{c.note}</p>
            {c.special && (
              <div className="comp__special" style={{ display: "flex", gap: 10, alignItems: "flex-start", margin: "0 0 20px", padding: "12px 14px", border: "1px solid var(--mwg-fairway)", borderRadius: 4 }}>
                <i data-lucide="sparkles" style={{ color: "var(--mwg-fairway)", flexShrink: 0 }}></i>
                <span style={{ fontSize: 13, lineHeight: 1.5 }}>{c.special}</span>
              </div>
            )}
            <dl className="comp__specs">
              <div><dt>Format</dt><dd>{c.format}</dd></div>
              <div><dt>Field</dt><dd>{c.field} players</dd></div>
              <div><dt>Entry fee</dt><dd>{c.fee}{c.feeNote && <span style={{ display: "block", fontSize: 11, opacity: 0.6, marginTop: 2, fontWeight: 400 }}>{c.feeNote}</span>}</dd></div>
            </dl>
            <div className="comp__cta">
              {!submittedEntry ? (
                <>
                  <button className="btn" onClick={handleApplyClick}>
                    Apply to enter <span className="arrow">→</span>
                  </button>
                  <span className="comp__hint">Fill in the entry form · ~2 min</span>
                </>
              ) : (
                <div className="comp__sent">
                  <i data-lucide="check"></i>
                  <div>
                    <div className="comp__sent-h">Application received</div>
                    <div className="comp__sent-d">
                      Entries are reviewed and confirmed by reply to {submittedEntry.email} within 24 hours.
                    </div>
                  </div>
                </div>
              )}
            </div>
            {isCoach && (
              <div className="comp__admin">
                <div className="comp__admin-k">
                  <i data-lucide="shield-check"></i>Coach view
                </div>
                <button className="comp__admin-btn" onClick={() => setAdminOpen(true)}>
                  See applicants <span className="comp__admin-num">{count}</span> <span className="arrow">→</span>
                </button>
              </div>
            )}
          </div>
        </article>

        {c.highlights && (
          <div className="wb-tour">
            <div className="section-eyebrow wb-tour__eyebrow"><span className="bar"></span>On the tour</div>
            <div className="wb-tour__grid">
              {c.highlights.map((h) => (
                <div className="wb-tour__cell" key={h.t}>
                  <div className="wb-tour__icon"><i data-lucide={h.icon}></i></div>
                  <div className="wb-tour__t">{h.t}</div>
                  <div className="wb-tour__d">{h.d}</div>
                </div>
              ))}
            </div>
          </div>
        )}
      </div>

      <WaterbergEntryModal
        open={entryOpen}
        onClose={() => setEntryOpen(false)}
        onSubmitted={handleSubmitted}
        prefill={user ? { name: user.name, email: user.email, handicap: user.handicap } : null}
      />
      <WaterbergApplicants open={adminOpen} onClose={() => setAdminOpen(false)}/>
    </section>
  );
}

// ---------- Studio19 Ambassador ----------
function Ambassador() {
  return (
    <section className="section section--bone" id="ambassador" data-screen-label="04 Ambassador">
      <div className="container">
        <div className="section-head">
          <div>
            <div className="section-eyebrow"><span className="bar"></span>03 — Ambassador</div>
            <h2 className="section-title">Studio<em>19</em><br/>Ambassador</h2>
          </div>
          <p className="section-lead">
            Official MWG indoor home. Studio19 is Pretoria's performance bay — launch monitor,
            multi-angle video, and the fitting room next door. Where the work happens when the
            wind picks up.
          </p>
        </div>
        <div className="ambassador">
          <div className="ambassador__plate">
            <img src="assets/partner-studio19.png" alt="Studio19"/>
            <div className="ambassador__plate-meta">
              <span className="ambassador__plate-bar"></span>
              Performance studio · Pretoria
            </div>
          </div>
          <div className="ambassador__body">
            <ul className="ambassador__list">
              <li>
                <div className="ambassador__k">01</div>
                <div className="ambassador__cell">
                  <strong>Indoor coaching, any weather</strong>
                  <span>Full bay with launch monitor and high-speed video. Sessions run year-round, including the Highveld summer storms.</span>
                </div>
              </li>
              <li>
                <div className="ambassador__k">02</div>
                <div className="ambassador__cell">
                  <strong>Fitting &amp; equipment access</strong>
                  <span>Try driver and iron heads against your own numbers before you commit to a build.</span>
                </div>
              </li>
              <li>
                <div className="ambassador__k">03</div>
                <div className="ambassador__cell">
                  <strong>Affies winter programme</strong>
                  <span>Studio19 hosts the indoor portion of the Affies golf programme through the colder months.</span>
                </div>
              </li>
            </ul>
            <div className="ambassador__cta">
              <a className="btn" href="#booking">Book a studio session <span className="arrow">→</span></a>
              <span className="ambassador__hint">Weekdays · by appointment</span>
            </div>
          </div>
        </div>
      </div>
    </section>
  );
}

// ---------- Partners ----------
const partners = [
  { name: "LBP",         img: "assets/partner-lbp-white.webp", variant: "white" },
  { name: "Studio 19",   img: "assets/partner-studio19.png", variant: "white" },
  { name: "BMH Africa",  img: "assets/partner-bmh-africa.png", variant: "tile" },
];
function Partners() {
  return (
    <section className="partners" data-screen-label="07 Partners">
      <div className="container">
        <div className="partners__inner">
          <div className="partners__head">
            <div className="section-eyebrow"><span className="bar"></span>Partners</div>
            <h3 className="partners__h">Backed by</h3>
          </div>
          <ul className="partners__list">
            {partners.map((p) => (
              <li className={"partners__item partners__item--" + p.variant} key={p.name}>
                <img src={p.img} alt={p.name} title={p.name}/>
              </li>
            ))}
          </ul>
        </div>
      </div>
    </section>
  );
}

// ---------- Tweak defaults ----------
const TWEAK_DEFAULTS = /*EDITMODE-BEGIN*/{
  "sectionOrder": ["offerings", "about", "ambassador", "competitions", "training", "membership", "booking"]
}/*EDITMODE-END*/;

const SECTION_LABELS = {
  offerings: "Coaching",
  about: "About",
  ambassador: "Studio19 Ambassador",
  competitions: "Competitions",
  training: "Training videos",
  membership: "Membership",
  booking: "Booking",
};

// ---------- Section-order tweak control ----------
function SectionOrderControl({ value, onChange }) {
  const move = (i, dir) => {
    const j = i + dir;
    if (j < 0 || j >= value.length) return;
    const next = value.slice();
    [next[i], next[j]] = [next[j], next[i]];
    onChange(next);
  };
  const reset = () => onChange(TWEAK_DEFAULTS.sectionOrder.slice());
  return (
    <div style={{ display: "flex", flexDirection: "column", gap: 6, padding: "8px 12px 12px" }}>
      <div style={{ display: "flex", justifyContent: "space-between", alignItems: "center", marginBottom: 4 }}>
        <span style={{ fontFamily: "var(--font-display, inherit)", fontSize: 10, letterSpacing: "0.18em", textTransform: "uppercase", opacity: 0.6 }}>Drag-free reorder</span>
        <button type="button" onClick={reset}
          style={{ background: "transparent", border: 0, color: "inherit", cursor: "pointer", fontSize: 10, letterSpacing: "0.14em", textTransform: "uppercase", opacity: 0.55, padding: 0 }}>
          Reset
        </button>
      </div>
      {value.map((key, i) => (
        <div key={key}
          style={{
            display: "grid", gridTemplateColumns: "20px 1fr auto auto", alignItems: "center", gap: 8,
            padding: "8px 10px", border: "1px solid rgba(255,255,255,0.12)", borderRadius: 4,
            background: "rgba(255,255,255,0.03)",
            fontFamily: "var(--font-display, inherit)", fontSize: 11, letterSpacing: "0.04em",
          }}>
          <span style={{ opacity: 0.45, fontSize: 10, fontVariantNumeric: "tabular-nums" }}>{String(i + 1).padStart(2, "0")}</span>
          <span style={{ textTransform: "uppercase", letterSpacing: "0.06em" }}>{SECTION_LABELS[key]}</span>
          <button type="button" onClick={() => move(i, -1)} disabled={i === 0}
            style={{ width: 24, height: 24, background: "transparent", border: "1px solid rgba(255,255,255,0.18)", borderRadius: 3, color: "inherit", cursor: i === 0 ? "default" : "pointer", opacity: i === 0 ? 0.25 : 0.85, padding: 0, lineHeight: 1, fontSize: 12 }}>↑</button>
          <button type="button" onClick={() => move(i, +1)} disabled={i === value.length - 1}
            style={{ width: 24, height: 24, background: "transparent", border: "1px solid rgba(255,255,255,0.18)", borderRadius: 3, color: "inherit", cursor: i === value.length - 1 ? "default" : "pointer", opacity: i === value.length - 1 ? 0.25 : 0.85, padding: 0, lineHeight: 1, fontSize: 12 }}>↓</button>
        </div>
      ))}
    </div>
  );
}

// ---------- App ----------
function App() {
  const [active, setActive] = useState("Coaching");
  const [auth, setAuth] = useState({ open: false, mode: "sign-in" });
  const [upgradeOpen, setUpgradeOpen] = useState(false);
  const [t, setTweak] = useTweaks(TWEAK_DEFAULTS);
  useEffect(() => { if (window.lucide) window.lucide.createIcons(); });
  const openAuth = (mode) => setAuth({ open: true, mode });
  const closeAuth = () => setAuth((a) => ({ ...a, open: false }));
  const openUpgrade = () => setUpgradeOpen(true);
  const closeUpgrade = () => setUpgradeOpen(false);

  const renderers = {
    offerings:    () => <Offerings key="offerings"/>,
    about:        () => <About key="about"/>,
    ambassador:   () => <Ambassador key="ambassador"/>,
    competitions: () => <Competitions key="competitions" onAuthPrompt={openAuth}/>,
    training:     () => <Training key="training" onUpgradePrompt={openUpgrade} onAuthPrompt={openAuth}/>,
    membership:   () => <Membership key="membership" onUpgradePrompt={openUpgrade} onAuthPrompt={openAuth}/>,
    booking:      () => <Booking key="booking"/>,
  };
  // Sanity: keep any sections missing from the saved order at the end.
  const allKeys = Object.keys(renderers);
  const order = (t.sectionOrder || []).filter((k) => renderers[k]);
  for (const k of allKeys) if (!order.includes(k)) order.push(k);

  return (
    <AuthProvider>
      <SiteHeader active={active} onNav={setActive} onAuth={openAuth} onUpgrade={openUpgrade}/>
      <main>
        <Hero/>
        {order.map((k) => renderers[k]())}
      </main>
      <Partners/>
      <SiteFooter/>
      <AuthModal open={auth.open} mode={auth.mode} onClose={closeAuth}/>
      <MembershipModal open={upgradeOpen} onClose={closeUpgrade}/>
      <TweaksPanel title="Tweaks">
        <TweakSection label="Section order"/>
        <SectionOrderControl value={order} onChange={(v) => setTweak("sectionOrder", v)}/>
      </TweaksPanel>
    </AuthProvider>
  );
}

Object.assign(window, { App });