// All landing-page sections except hero. Exposed via window.* at bottom.

function PromoBar({ onClose }) {
  return (
    <div className="promo">
      ✨ Try your first class on us
      <button className="close" onClick={onClose} aria-label="close">✕</button>
    </div>
  );
}

function Nav() {
  return (
    <nav className="nav">
      <div className="wrap nav-inner">
        <a href="#" className="logo">one<span>pass</span> kids</a>
        <div className="nav-links">
          <a href="#categories">Find classes & camps</a>
          <a href="Classes.html">Book classes</a>
          <a href="Signup.html">Plans</a>
          <a href="#how">How OnePass Credits work</a>
          <a href="Partners.html">For studios</a>
          <a href="#">Log in</a>
          <a className="btn btn-primary btn-sm" href="Waitlist.html">Join the Waitlist</a>
        </div>
      </div>
    </nav>
  );
}

const HERO_COPY = {
  adventure: {
    h1: "One pass for every adventure.",
    sub: "OnePass Kids gives your family access to thousands of classes, camps and weekend events — from gymnastics and ballet to coding and pottery. One subscription. Endless things to try."
  },
  curiosity: {
    h1: "Raise a kid who can't wait for Saturday.",
    sub: "Browse local classes, camps and one-off workshops. Use OnePass Credits to book what your kid wants this week — and try something completely different next week."
  },
  simple: {
    h1: "Kids' classes, on one simple pass.",
    sub: "Skip the dozen-different memberships. Buy OnePass Credits once, spend them anywhere on the OnePass Kids network."
  }
};

function Hero({ heroCopy }) {
  const copy = HERO_COPY[heroCopy] || HERO_COPY.adventure;
  return (
    <section className="hero">
      <HeroCollage />
      <div className="hero-card">
        <h1>{copy.h1}</h1>
        <p className="lede">{copy.sub}</p>
        <div className="hero-ctas">
          <a className="btn btn-primary" href="Waitlist.html">Join the Waitlist</a>
          <p className="hero-cta-note">Be first to explore with OnePass Kids.</p>
          <a className="btn btn-outline" href="#">Tell me more about OnePass Kids</a>
          <a className="btn btn-ghost" style={{ marginTop: 12 }} href="#">Browse classes & camps</a>
        </div>
        <p className="hero-disclaimer">
          Open to South Florida families. We'll email you the moment your area goes live.
        </p>
      </div>
    </section>
  );
}

function HowItWorks() {
  const steps = [
    {
      img: "assets/hero/outdoor.jpg",
      title: "Browse local classes",
      body: "Filter by age, neighborhood, time and category. From toddler music to teen robotics."
    },
    {
      img: "assets/hero/gymnastics.jpg",
      title: "Spend your OnePass Credits",
      body: "Activities cost between 2 and 16 OnePass Credits depending on length. You decide what's worth it."
    },
    {
      img: "assets/hero/art.jpg",
      title: "Try something new",
      body: "No long-term commitments at any one studio. Skate one week, sculpt the next."
    },
  ];
  return (
    <section className="section" id="how">
      <div className="wrap">
        <div className="section-head">
          <p className="eyebrow">How it works</p>
          <h2>Sports. Arts. STEM.<br />Why pick just one?</h2>
        </div>
        <div className="how-grid">
          {steps.map((s, i) => (
            <div className="how-item" key={i}>
              <div className="how-circle" style={{ backgroundImage: `url(${s.img})` }} role="img" aria-label={s.title} />
              <h3>{s.title}</h3>
              <p>{s.body}</p>
            </div>
          ))}
        </div>
        <div className="how-cta">
          <a className="btn btn-primary" href="Signup.html">Start your free trial</a>
        </div>
      </div>
    </section>
  );
}

function Categories() {
  const cats = [
    { name: "Sports & movement", color: "#0A5BFF", icon: "⚽" },
    { name: "Music & performance", color: "#b23a2f", icon: "🎻" },
    { name: "Art & making", color: "#d97a3a", icon: "🎨" },
    { name: "STEM & coding", color: "#2d5a3d", icon: "🤖" },
    { name: "Outdoor & nature", color: "#5b6f4a", icon: "🌲" },
    { name: "Day & overnight camps", color: "#7b3f6b", icon: "⛺" },
  ];
  return (
    <section className="section" id="categories" style={{ background: "var(--bg-warm)" }}>
      <div className="wrap">
        <div className="section-head">
          <p className="eyebrow">Categories</p>
          <h2>Anything they want to be<br/>this week.</h2>
        </div>
        <div className="cats-grid">
          {cats.map((c, i) => (
            <a className="cat cat-block" key={i} style={{ background: c.color }}>
              <div className="cat-icon">{c.icon}</div>
              <div className="cat-content">
                <h3>{c.name}</h3>
              </div>
            </a>
          ))}
        </div>
      </div>
    </section>
  );
}

function Gift() {
  return (
    <section className="section">
      <div className="wrap">
        <div className="gift">
          <div className="gift-text">
            <p className="eyebrow" style={{ color: "rgba(255,255,255,.85)" }}>Gifting</p>
            <h2>Give the gift<br/>of a new hobby<br/>this year.</h2>
            <p style={{ opacity: .9, marginBottom: 32, maxWidth: 380 }}>
              Send OnePass Credits to family and friends. They pick the classes they like.
            </p>
            <a className="btn btn-white" href="#">Gift OnePass Kids</a>
          </div>
          <div className="gift-img" style={{ backgroundImage: "url('assets/hero/giftcard.jpg')" }} role="img" aria-label="OnePass Kids gift card" />
        </div>
      </div>
    </section>
  );
}

function Plans() {
  const plans = [
    {
      id: "starter",
      name: "Starter",
      sub: "For curious first-timers",
      price: "$69",
      per: "/mo",
      credits: "10 OnePass Credits per month",
      features: [],
      cta: "Start",
    },
    {
      id: "family",
      name: "Family",
      sub: "Our most popular",
      price: "$129",
      per: "/mo",
      credits: "20 OnePass Credits per month",
      features: [],
      cta: "Choose Family",
      featured: true,
    },
    {
      id: "adventure",
      name: "Adventure",
      sub: "For very busy weeks",
      price: "$179",
      per: "/mo",
      credits: "30 OnePass Credits per month",
      features: [],
      cta: "Choose Adventure",
    },
    {
      id: "ultimate",
      name: "Ultimate",
      sub: "Every day, every kid",
      price: "$279",
      per: "/mo",
      credits: "50 OnePass Credits per month",
      features: [],
      cta: "Choose Ultimate",
    },
  ];
  return (
    <section className="section" id="plans">
      <div className="wrap">
        <div className="section-head">
          <p className="eyebrow">Plans</p>
          <h2>Pick a pack of OnePass Credits.<br/>Spend them anywhere.</h2>
          <p style={{ color: "var(--ink-soft)", marginTop: 16 }}>
            Most classes cost 2–5 OnePass Credits. Camps and intensives cost more.
            All plans pause and cancel anytime.
          </p>
        </div>
        <div className="plans-grid">
          {plans.map((p, i) => (
            <div className={`plan ${p.featured ? "featured" : ""}`} key={i}>
              <div className="plan-name">{p.name}</div>
              <div className="plan-sub">{p.sub}</div>
              <div className="plan-price">{p.price}<span className="per">{p.per}</span></div>
              <div className="plan-credits">{p.credits}</div>
              <ul>
                {p.features.map((f, j) => <li key={j}>{f}</li>)}
              </ul>
              <a className={`btn ${p.featured ? "btn-primary" : "btn-outline"}`} href={`Signup.html?plan=${p.id}`}>{p.cta}</a>
            </div>
          ))}
        </div>
        <p style={{ textAlign: "center", marginTop: 32, color: "var(--ink-soft)", fontSize: 14 }}>
          Prefer to buy one-off? <a href="#" style={{ color: "var(--brand)", textDecoration: "underline" }}>Get a 10-OnePass-Credit pack for $79</a>
        </p>
      </div>
    </section>
  );
}

function Partners() {
  return (
    <section className="section">
      <div className="wrap">
        <div className="partners partners-solo">
          <div>
            <p className="eyebrow" style={{ color: "rgba(255,255,255,.85)" }}>For studios & instructors</p>
            <h2>List your studio<br/>on OnePass Kids.</h2>
            <p>
              Fill empty seats during off-peak hours. Get discovered by
              new families in your neighborhood. Get paid in cash —
              we handle the OnePass Credits.
            </p>
            <a className="btn btn-white" href="Partners.html">List your studio</a>
          </div>
        </div>
      </div>
    </section>
  );
}

function Testimonials() {
  const quotes = [
    {
      stars: "★★★★★",
      q: "We've found three new things our daughter loves that we never would have signed up for otherwise. Worth every OnePass Credit.",
      who: "Maya R., mom of 1",
      initials: "MR"
    },
    {
      stars: "★★★★★",
      q: "I stopped paying for four separate after-school programs. OnePass Kids replaced all of them and gave us more options.",
      who: "Daniel P., dad of 2",
      initials: "DP"
    },
    {
      stars: "★★★★★",
      q: "My son used his trial OnePass Credits on a pottery class and asked to go back the next week. He's six. I'm thrilled.",
      who: "Aisha K., mom of 2",
      initials: "AK"
    },
  ];
  return (
    <section className="section" style={{ background: "var(--bg-cream)" }}>
      <div className="wrap">
        <div className="section-head">
          <p className="eyebrow">Parents on OnePass Kids</p>
          <h2>Less juggling.<br/>More trying things.</h2>
        </div>
        <div className="test-grid">
          {quotes.map((t, i) => (
            <div className="testimonial" key={i}>
              <div className="stars">{t.stars}</div>
              <blockquote>"{t.q}"</blockquote>
              <div className="author">
                <div className="avatar">{t.initials}</div>
                <div>{t.who}</div>
              </div>
            </div>
          ))}
        </div>
      </div>
    </section>
  );
}

function FAQ() {
  const items = [
    {
      q: "How are OnePass Credit values decided?",
      a: "Each studio sets the OnePass Credit cost of its classes based on length, instructor, and demand. A typical 45-min class is 4–6 OnePass Credits; a half-day camp might be 16–24 OnePass Credits. The cost is always visible before you book."
    },
    {
      q: "Can I use one plan for multiple kids?",
      a: "Yes. The Family and Adventure plans cover multiple kids on one shared OnePass Credit pool, so you can pick how to split them month to month."
    },
    {
      q: "What happens to unused OnePass Credits?",
      a: "Unused OnePass Credits don't expire — they roll over to the next month. Pause or cancel your plan anytime and your balance stays put."
    },
    {
      q: "Where is OnePass Kids available?",
      a: "We're currently live across South Florida — from Palm Beach down through Broward and Miami-Dade. New neighborhoods and partner studios are being added every month. Enter your zip code on signup to see what's near you."
    },
  ];
  const [open, setOpen] = React.useState(0);
  return (
    <section className="section">
      <div className="wrap">
        <div className="section-head">
          <p className="eyebrow">Frequently asked</p>
          <h2>Questions parents ask first.</h2>
        </div>
        <div className="faq">
          {items.map((it, i) => (
            <div className={`faq-item ${open === i ? "open" : ""}`} key={i}>
              <div className="faq-q" onClick={() => setOpen(open === i ? -1 : i)}>
                <span>{it.q}</span>
                <span className="faq-toggle"></span>
              </div>
              <div className="faq-a">{it.a}</div>
            </div>
          ))}
        </div>
      </div>
    </section>
  );
}

function Footer() {
  return (
    <footer>
      <div className="wrap">
        <div className="footer-grid">
          <div className="footer-brand">
            <a href="#" className="logo">one<span style={{ color: "#7aa6ff" }}>pass</span> kids</a>
            <p>One pass for every adventure. Discover, book and pay for kids' classes, camps and events with OnePass Credits.</p>
          </div>
          <div>
            <h4>Families</h4>
            <ul>
              <li><a href="#">How it works</a></li>
              <li><a href="Classes.html">Book classes</a></li>
              <li><a href="Signup.html">Plans</a></li>
              <li><a href="#">Gift OnePass Kids</a></li>
              <li><a href="#">Refer a friend</a></li>
            </ul>
          </div>
          <div>
            <h4>Studios</h4>
            <ul>
              <li><a href="Partners.html">List your studio</a></li>
              <li><a href="#">How payouts work</a></li>
              <li><a href="#">Studio app</a></li>
              <li><a href="#">Partner stories</a></li>
            </ul>
          </div>
          <div>
            <h4>Company</h4>
            <ul>
              <li><a href="#">About</a></li>
              <li><a href="#">Press</a></li>
              <li><a href="#">Careers</a></li>
              <li><a href="#">Contact</a></li>
            </ul>
          </div>
          <div>
            <h4>Support</h4>
            <ul>
              <li><a href="#">Help center</a></li>
              <li><a href="#">Safety & vetting</a></li>
              <li><a href="#">Terms</a></li>
              <li><a href="Privacy.html">Privacy</a></li>
            </ul>
          </div>
        </div>
        <div className="footer-bottom">
          <div>© 2026 OnePass Kids, Inc.</div>
          <div>Made for parents who don't want to commit to ballet forever.</div>
        </div>
      </div>
    </footer>
  );
}

Object.assign(window, {
  PromoBar, Nav, Hero, HowItWorks, Categories, Gift, Plans, Partners, Testimonials, FAQ, Footer
});