// Section components for Endeavor Fitness

const { useState, useEffect, useMemo, useRef } = React;

/* ============== Nav ============== */
function Nav({ onBook }) {
  return (
    <nav className="nav">
      <div className="nav-inner">
        <a href="#top" className="brand">
          <div className="brand-mark">E</div>
          <span>ENDEAVOR <span style={{fontFamily: "var(--serif)", fontStyle: "italic", fontWeight: 400, fontStretch: "100%", color: "var(--gold)", textTransform: "lowercase", letterSpacing: "0"}}>fitness</span></span>
        </a>
        <div className="nav-links">
          <a href="#programs">Programs</a>
          <a href="#schedule">Schedule</a>
          <a href="#about">About</a>
          <a href="#testimonials">Reviews</a>
          <a href="#faq">FAQ</a>
        </div>
        <button className="nav-cta" onClick={() => onBook()}>
          Book a session
          <span className="arrow">→</span>
        </button>
      </div>
    </nav>
  );
}

/* ============== Hero ============== */
function Hero({ onBook, variant }) {
  if (variant === "bg") {
    return (
      <section className="hero bg-photo" id="top">
        <div className="hero-bg" style={{backgroundImage: "linear-gradient(180deg, rgba(14,26,20,0.3) 0%, rgba(14,26,20,0.85) 100%), url('https://images.unsplash.com/photo-1571019613454-1cb2f99b2d8b?w=2000&q=80&auto=format&fit=crop')", backgroundSize: "cover", backgroundPosition: "center"}}>
          <div style={{display: "flex", justifyContent: "space-between", alignItems: "flex-start", flexWrap: "wrap", gap: 16}}>
            <span className="location-chip" style={{color: "rgba(241,236,226,0.7)"}}>
              <svg viewBox="0 0 16 16" fill="none" stroke="currentColor" strokeWidth="1.4">
                <path d="M8 14s5-4.5 5-9A5 5 0 1 0 3 5c0 4.5 5 9 5 9Z"/>
                <circle cx="8" cy="5" r="1.8"/>
              </svg>
              Cle Elum, WA · Cascade foothills
            </span>
            <span className="live-chip" style={{background: "transparent", color: "var(--cream)", borderColor: "rgba(241,236,226,0.3)"}}>
              <span className="live-dot"></span>
              Now booking summer 2026
            </span>
          </div>
          <h1 className="hero-headline">
            <div className="hero-headline-row"><span>ENJOY</span></div>
            <div className="hero-headline-row"><span>THE </span><span className="serif">journey</span></div>
          </h1>
          <span className="bg-label">[ outdoor training ]</span>
        </div>
      </section>
    );
  }
  if (variant === "split") {
    return (
      <section className="hero split" id="top">
        <div className="wrap">
          <div className="hero-top">
            <span className="location-chip">
              <svg viewBox="0 0 16 16" fill="none" stroke="currentColor" strokeWidth="1.4">
                <path d="M8 14s5-4.5 5-9A5 5 0 1 0 3 5c0 4.5 5 9 5 9Z"/>
                <circle cx="8" cy="5" r="1.8"/>
              </svg>
              Cle Elum, WA · Cascade foothills · Est. 2018
            </span>
            <span className="live-chip"><span className="live-dot"></span>Now booking summer 2026</span>
          </div>
          <div className="hero-grid">
            <div>
              <h1 className="hero-headline">
                <div className="hero-headline-row"><span>ENJOY</span></div>
                <div className="hero-headline-row"><span>THE</span></div>
                <div className="hero-headline-row"><span className="serif">journey</span><span>.</span></div>
              </h1>
              <p className="hero-tag" style={{marginTop: 32}}>
                Strength &amp; conditioning that meets you where you are — and pushes you somewhere new.
              </p>
              <div style={{display: "flex", gap: 12, marginTop: 32, flexWrap: "wrap"}}>
                <button className="book-btn" onClick={onBook}>Book a session →</button>
                <a href="#programs" className="book-btn outline">See programs</a>
              </div>
            </div>
            <div className="photo-slot photo-real" style={{height: "auto", backgroundImage: "url('https://images.unsplash.com/photo-1517344884509-a0c97ec11bcc?w=1200&q=80&auto=format&fit=crop')"}}>
              <span className="label">[ coaching · gym floor ]</span>
            </div>
          </div>
        </div>
      </section>
    );
  }

  // default
  return (
    <section className="hero" id="top">
      <div className="wrap">
        <div className="hero-top">
          <span className="location-chip">
            <svg viewBox="0 0 16 16" fill="none" stroke="currentColor" strokeWidth="1.4">
              <path d="M8 14s5-4.5 5-9A5 5 0 1 0 3 5c0 4.5 5 9 5 9Z"/>
              <circle cx="8" cy="5" r="1.8"/>
            </svg>
            Cle Elum, WA · Cascade foothills · Est. 2018
          </span>
          <span className="live-chip"><span className="live-dot"></span>Now booking summer 2026</span>
        </div>

        <h1 className="hero-headline">
          <div className="hero-headline-row"><span>ENJOY THE</span></div>
          <div className="hero-headline-row"><span className="serif">journey</span><span>.</span></div>
        </h1>

        <div className="hero-meta">
          <p className="hero-tag">
            Strength &amp; conditioning that meets you where you are — and pushes you somewhere new.
          </p>
          <p className="hero-sub">
            Group bootcamps, athlete development, and 1:1 coaching from Lacie — a trainer who actually adapts the program to you, not the other way around.
          </p>
          <div className="hero-stat">
            <span className="n">20<span style={{color: "var(--gold)"}}>+</span></span>
            <span className="l">Years coaching · since 2006</span>
          </div>
        </div>

        <div className="hero-photo">
          <div className="photo-slot photo-real" style={{backgroundImage: "url('https://images.unsplash.com/photo-1518611012118-696072aa579a?w=1200&q=80&auto=format&fit=crop')"}}>
            <span className="label">[ cascade foothills ]</span>
          </div>
          <div className="photo-slot photo-real" style={{backgroundImage: "url('https://images.unsplash.com/photo-1571019613454-1cb2f99b2d8b?w=1400&q=80&auto=format&fit=crop')"}}>
            <span className="label">[ group session ]</span>
          </div>
          <div className="photo-slot photo-real" style={{backgroundImage: "url('https://images.unsplash.com/photo-1534438327276-14e5300c3a48?w=1200&q=80&auto=format&fit=crop')"}}>
            <span className="label">[ kettlebell · close ]</span>
          </div>
        </div>
      </div>
    </section>
  );
}

/* ============== Brand marquee ============== */
function BrandMarquee() {
  const items = ["Strength", "Conditioning", "Mobility", "Speed", "Recovery", "Community", "Confidence", "Endurance"];
  const row = (
    <div className="item">
      {items.map((it, i) => (
        <React.Fragment key={i}>
          <span>{it}</span>
          {i < items.length - 1 && <span className="dot"></span>}
        </React.Fragment>
      ))}
    </div>
  );
  return (
    <div className="brand-marquee">
      <div className="brand-marquee-track">
        {row}{row}{row}
      </div>
    </div>
  );
}

/* ============== Programs ============== */
function Programs({ onBook }) {
  const [filter, setFilter] = useState("all");
  const filtered = useMemo(() => {
    if (filter === "all") return PROGRAMS;
    if (filter === "youth") return PROGRAMS.filter(p => p.tagClass === "youth");
    if (filter === "adult") return PROGRAMS.filter(p => p.tagClass === "adult");
    if (filter === "solo") return PROGRAMS.filter(p => p.tagClass === "solo");
    return PROGRAMS;
  }, [filter]);

  return (
    <section className="section" id="programs" data-screen-label="Programs">
      <div className="wrap">
        <div className="section-head">
          <div>
            <div className="section-num">§ 01 / Programs</div>
            <h2 className="section-h2">
              Train your<br/>
              <span className="serif">way.</span>
            </h2>
          </div>
          <p className="section-intro">
            Four programs, one approach: progress that's measured, coaching that's personal, and a room you actually want to show up to.
          </p>
        </div>

        <div className="programs-tabs">
          {[
            ["all", "All programs"],
            ["youth", "Youth athletes"],
            ["adult", "Adults"],
            ["solo", "1:1"],
          ].map(([id, label]) => (
            <button key={id} className={"tab" + (filter === id ? " active" : "")} onClick={() => setFilter(id)}>
              {label}
            </button>
          ))}
        </div>

        <div className="programs-grid">
          {filtered.map(p => (
            <ProgramCard key={p.id} program={p} onBook={() => onBook(p)} />
          ))}
        </div>
      </div>
    </section>
  );
}

function ProgramCard({ program, onBook }) {
  return (
    <article className="program">
      <div className="program-meta">
        <span className="num">{program.num}</span>
        <span className={"program-tag " + program.tagClass}>{program.tag}</span>
      </div>
      <div>
        <h3 className="program-title">{program.title}</h3>
        <div className="program-sub">{program.sub}</div>
      </div>
      <p className="program-desc">{program.desc}</p>
      <div className="program-when">
        {program.when.map((w, i) => <div key={i}>{w}</div>)}
      </div>
      <div className="program-actions">
        <button className="book-btn" onClick={onBook}>
          Reserve →
        </button>
      </div>
    </article>
  );
}

/* ============== Schedule grid ============== */
function Schedule({ onBook }) {
  const programById = (id) => PROGRAMS.find(p => p.id === id);

  return (
    <section className="section dark" id="schedule" data-screen-label="Schedule">
      <div className="wrap">
        <div className="section-head">
          <div>
            <div className="section-num" style={{color: "rgba(241,236,226,0.5)"}}>§ 02 / Weekly schedule</div>
            <h2 className="section-h2" style={{color: "var(--cream)"}}>
              This week,<br/>
              <span className="serif">in motion.</span>
            </h2>
          </div>
          <p className="section-intro">
            Tap any session to reserve. Group classes cap at 8 — what you see is what's open.
          </p>
        </div>

        <div className="schedule-wrap">
          <div className="schedule-head">
            <div className="cell">Time</div>
            {SCHEDULE.days.map(d => <div key={d} className="cell">{d}</div>)}
          </div>
          {SCHEDULE.times.map((t, ti) => (
            <div key={t} className="schedule-row">
              <div className="time">{t}</div>
              {SCHEDULE.days.map((d, di) => {
                const pid = SCHEDULE.grid[ti][di];
                const program = pid ? programById(pid) : null;
                if (!program) {
                  return (
                    <div key={d} className="slot empty">
                      <div className="slot-empty-mark"></div>
                    </div>
                  );
                }
                return (
                  <div key={d} className={"slot " + program.tagClass} onClick={() => onBook(program)}>
                    <div className="slot-program">{program.title}</div>
                    <div className="slot-tag">{program.tag}</div>
                  </div>
                );
              })}
            </div>
          ))}
        </div>

        <div className="schedule-legend">
          <div className="legend-item"><span className="dot" style={{background: "var(--gold)"}}></span>Youth athletes</div>
          <div className="legend-item"><span className="dot" style={{background: "var(--sage)"}}></span>Adult group</div>
          <div className="legend-item"><span className="dot" style={{background: "var(--cream)"}}></span>Precision · 1:1</div>
          <div className="legend-item" style={{marginLeft: "auto"}}>Updated weekly · {new Date().toLocaleDateString("en-US", {month: "long", day: "numeric"})}</div>
        </div>
      </div>
    </section>
  );
}

/* ============== About ============== */
function About() {
  return (
    <section className="section" id="about" data-screen-label="About">
      <div className="wrap">
        <div className="about-grid">
          <div className="about-photo photo-real" style={{backgroundImage: "url('https://static.wixstatic.com/media/d4400f_183cd688552546328cae322224082f23~mv2.jpeg/v1/fill/w_900,h_1125,al_c,q_85,enc_avif,quality_auto/d4400f_183cd688552546328cae322224082f23~mv2.jpeg')"}}>
            <div className="stamp">
              <span><span className="big">20</span>YRS<br/>COACHING</span>
            </div>
          </div>
          <div className="about-body">
            <div className="section-num">§ 03 / Meet your coach</div>
            <h3>
              Hi, I'm<br/>
              <span className="serif">Lacie.</span>
            </h3>
            <p>
              Getting in shape shouldn't feel like a punishment. It's an empowering choice anyone can make — and my job is to help you find the part of it you actually enjoy.
            </p>
            <p>
              I've spent the last two decades building programs alongside middle-schoolers, high-school athletes, weekend warriors, and folks who hadn't trained in a decade. Every program adapts. Every session is yours.
            </p>
            <blockquote className="about-quote">
              "There may be a sore muscle or two along the way — but the benefits are worth the challenge."
            </blockquote>
            <div className="creds">
              <div className="cred"><strong>NASM</strong>Certified PT</div>
              <div className="cred"><strong>USAW</strong>L1 Sports Performance</div>
              <div className="cred"><strong>FMS</strong>Movement Screen</div>
              <div className="cred"><strong>20+</strong>Years coaching</div>
            </div>
          </div>
        </div>
      </div>
    </section>
  );
}

/* ============== Testimonials ============== */
function Testimonials() {
  // duplicate for seamless loop
  const items = [...TESTIMONIALS, ...TESTIMONIALS];
  return (
    <section className="section dark" id="testimonials" data-screen-label="Reviews">
      <div className="wrap">
        <div className="section-head">
          <div>
            <div className="section-num" style={{color: "rgba(241,236,226,0.5)"}}>§ 04 / What people say</div>
            <h2 className="section-h2" style={{color: "var(--cream)"}}>
              Stronger than<br/>
              <span className="serif">yesterday.</span>
            </h2>
          </div>
          <p className="section-intro">
            Reviews from clients, athletes, and the parents who drive them here twice a week.
          </p>
        </div>
      </div>
      <div className="testimonials-marquee">
        <div className="marquee-track">
          {items.map((t, i) => (
            <article key={i} className="testimonial">
              <div className="quote-mark">"</div>
              <div className="stars">★ ★ ★ ★ ★</div>
              <p>{t.text}</p>
              <div className="author">
                <div className="author-avatar">{t.initial}</div>
                <div>
                  <div className="author-name">{t.name}</div>
                  <div className="author-role">{t.role}</div>
                </div>
              </div>
            </article>
          ))}
        </div>
      </div>
    </section>
  );
}

/* ============== FAQ ============== */
function FAQ() {
  const [open, setOpen] = useState(0);
  return (
    <section className="section" id="faq" data-screen-label="FAQ">
      <div className="wrap">
        <div className="section-head">
          <div>
            <div className="section-num">§ 05 / Common questions</div>
            <h2 className="section-h2">
              Before you<br/>
              <span className="serif">begin.</span>
            </h2>
          </div>
          <p className="section-intro">
            The things people ask before their first session. Can't find your answer? Reach out below — I usually reply same-day.
          </p>
        </div>

        <div className="faq-grid">
          {FAQS.map((item, i) => (
            <div key={i} className={"faq-item" + (open === i ? " open" : "")} onClick={() => setOpen(open === i ? -1 : i)}>
              <div className="faq-q">
                <span>{item.q}</span>
                <span className="plus">+</span>
              </div>
              <div className="faq-a">{item.a}</div>
            </div>
          ))}
        </div>
      </div>
    </section>
  );
}

/* ============== Contact ============== */
function Contact() {
  const [sent, setSent] = useState(false);
  return (
    <section className="section dark" id="contact" data-screen-label="Contact">
      <div className="wrap">
        <div className="contact-grid">
          <div>
            <div className="section-num" style={{color: "rgba(241,236,226,0.5)"}}>§ 06 / Get in touch</div>
            <h2 className="contact-h" style={{marginTop: 12, marginBottom: 24}}>
              Start your<br/>
              <span className="serif">journey.</span>
            </h2>
            <p style={{color: "rgba(241,236,226,0.7)", maxWidth: 460, marginBottom: 36}}>
              Tell me a little about your goals, and which program looks like a fit. I'll get back to you with next steps within 24 hours.
            </p>
            {sent ? (
              <div style={{padding: 32, border: "1px solid rgba(200,164,92,0.4)", borderRadius: 6, background: "rgba(200,164,92,0.06)"}}>
                <div style={{fontFamily: "var(--display)", fontStretch: "75%", fontWeight: 600, fontSize: 28, color: "var(--gold)", textTransform: "uppercase", marginBottom: 8}}>Thanks!</div>
                <p style={{color: "rgba(241,236,226,0.85)", margin: 0}}>Got it — I'll be in touch within 24 hours.</p>
              </div>
            ) : (
              <form className="contact-form" onSubmit={e => { e.preventDefault(); setSent(true); }}>
                <div className="field-row">
                  <div className="field">
                    <label>Name</label>
                    <input type="text" required defaultValue="" />
                  </div>
                  <div className="field">
                    <label>Email</label>
                    <input type="email" required defaultValue="" />
                  </div>
                </div>
                <div className="field">
                  <label>Program of interest</label>
                  <select defaultValue="">
                    <option value="">Not sure yet</option>
                    {PROGRAMS.map(p => <option key={p.id} value={p.id}>{p.title} — {p.sub}</option>)}
                  </select>
                </div>
                <div className="field">
                  <label>What's your goal?</label>
                  <textarea rows="2" defaultValue=""></textarea>
                </div>
                <button type="submit" className="submit-btn">Send message →</button>
              </form>
            )}
          </div>
          <div className="contact-info">
            <div className="info-block">
              <span className="info-label">Studio</span>
              <span className="info-value">Cle Elum, WA 98922</span>
              <span style={{color: "rgba(241,236,226,0.55)", fontSize: 14}}>By appointment · address shared with booking</span>
            </div>
            <div className="info-block">
              <span className="info-label">Email</span>
              <a href="mailto:lacie@endeavor.fitness" className="info-value">lacie@endeavor.fitness</a>
            </div>
            <div className="info-block">
              <span className="info-label">Hours</span>
              <span className="info-value">Mon–Thu · 6a–7p</span>
              <span style={{color: "rgba(241,236,226,0.55)", fontSize: 14}}>Fri by request · Sat outdoor sessions</span>
            </div>
            <div style={{marginTop: 12, padding: 24, border: "1px solid rgba(241,236,226,0.16)", borderRadius: 6}}>
              <div className="info-label" style={{marginBottom: 8}}>Outdoor season</div>
              <p style={{margin: 0, color: "rgba(241,236,226,0.75)", fontSize: 14, lineHeight: 1.55}}>
                June through September we move group sessions to the Coal Mines Trail and Bullfrog Flats. Bring sunscreen and trail shoes.
              </p>
            </div>
          </div>
        </div>
      </div>
    </section>
  );
}

/* ============== Footer ============== */
function Footer() {
  return (
    <footer className="footer">
      <div className="wrap">
        <div className="footer-grid">
          <div>
            <div className="footer-brand-mark">
              Endeavor<br/>
              <span className="serif">fitness.</span>
            </div>
            <div className="footer-tag">Enjoy the journey.</div>
          </div>
          <div className="footer-col">
            <h4>Programs</h4>
            <ul>
              <li><a href="#programs">Rising Stars</a></li>
              <li><a href="#programs">Fit Tribe</a></li>
              <li><a href="#programs">Next Level</a></li>
              <li><a href="#programs">Precision 1:1</a></li>
            </ul>
          </div>
          <div className="footer-col">
            <h4>Studio</h4>
            <ul>
              <li><a href="#about">About Lacie</a></li>
              <li><a href="#schedule">Schedule</a></li>
              <li><a href="#testimonials">Reviews</a></li>
              <li><a href="#faq">FAQ</a></li>
            </ul>
          </div>
          <div className="footer-col">
            <h4>Contact</h4>
            <ul>
              <li><a href="mailto:lacie@endeavor.fitness">lacie@endeavor.fitness</a></li>
              <li><a href="#">Instagram</a></li>
              <li><a href="#">Facebook</a></li>
            </ul>
          </div>
        </div>
        <div className="footer-bottom">
          <span>© 2026 Endeavor Fitness · Cle Elum, Washington</span>
          <span>Built with intention · 47.1953° N, 120.9395° W</span>
        </div>
      </div>
    </footer>
  );
}

/* ============== Booking modal ============== */
function BookingModal({ program, onClose }) {
  const [time, setTime] = useState(null);
  const [sent, setSent] = useState(false);

  useEffect(() => {
    const onKey = (e) => { if (e.key === "Escape") onClose(); };
    document.addEventListener("keydown", onKey);
    document.body.style.overflow = "hidden";
    return () => {
      document.removeEventListener("keydown", onKey);
      document.body.style.overflow = "";
    };
  }, [onClose]);

  const times = program?.when?.length
    ? program.when[0].split("   ").pop().split("·").map(s => s.trim()).filter(s => s.includes(":"))
    : ["By appointment"];
  const display = program?.when?.[0] || "On demand";

  return (
    <div className="modal-overlay" onClick={onClose}>
      <div className="modal" onClick={e => e.stopPropagation()}>
        <button className="modal-close" onClick={onClose} aria-label="Close">×</button>
        {sent ? (
          <div className="success">
            <div className="success-icon">✓</div>
            <h3>You're in.</h3>
            <p className="modal-sub">Confirmation on the way.</p>
            <p style={{color: "var(--ink-soft)", marginBottom: 0}}>
              I'll send confirmation + studio address to your inbox within the next few hours.
            </p>
            <button className="submit-btn" style={{marginTop: 24}} onClick={onClose}>Got it</button>
          </div>
        ) : (
          <>
            <h3>{program ? "Reserve · " + program.title : "Book a session"}</h3>
            <p className="modal-sub">{program?.sub || "Tell me a little about you."}</p>
            {program && (
              <div style={{marginBottom: 20, padding: 14, background: "var(--cream-2)", borderRadius: 4, fontSize: 13, lineHeight: 1.5, color: "var(--ink-soft)"}}>
                <strong style={{color: "var(--forest)", display: "block", marginBottom: 4, fontFamily: "var(--mono)", fontSize: 11, letterSpacing: "0.08em", textTransform: "uppercase"}}>Schedule</strong>
                {program.when.map((w, i) => <div key={i}>{w}</div>)}
              </div>
            )}
            <form className="modal-form" onSubmit={e => { e.preventDefault(); setSent(true); }}>
              <div className="field">
                <label>Name</label>
                <input type="text" required />
              </div>
              <div className="field">
                <label>Email</label>
                <input type="email" required />
              </div>
              <div className="field">
                <label>Preferred start</label>
                <div className="modal-times">
                  {["This week", "Next week", "In 2+ weeks"].map(t => (
                    <button type="button" key={t} className={"time-pill" + (time === t ? " active" : "")} onClick={() => setTime(t)}>{t}</button>
                  ))}
                </div>
              </div>
              <button type="submit" className="submit-btn">Confirm request →</button>
            </form>
          </>
        )}
      </div>
    </div>
  );
}

Object.assign(window, { Nav, Hero, BrandMarquee, Programs, Schedule, About, Testimonials, FAQ, Contact, Footer, BookingModal });