// Facility tour, testimonials, about, FAQ, CTA, footer
function Facility({ accent }) {
  const tiles = [
    { src: 'https://images.unsplash.com/photo-1599058945522-28d584b6f0ff?w=1200&q=80', label: 'THE FLOOR', span: 'big', n: '01' },
    { src: 'https://images.unsplash.com/photo-1605296867724-fa87a8ef53fd?w=900&q=80', label: 'KICKBOXING BAGS', span: 'med', n: '02' },
    { src: 'https://images.unsplash.com/photo-1517344884509-a0c97ec11bcc?w=900&q=80', label: 'INBODY MACHINE', span: 'med', n: '03' },
    { src: 'https://images.unsplash.com/photo-1517836357463-d25dfeac3438?w=900&q=80', label: 'AIR FILTRATION', span: 'med', n: '04' },
    { src: 'https://images.unsplash.com/photo-1540497077202-7c8a3999166f?w=900&q=80', label: 'LOCKERS', span: 'med', n: '05' },
  ];

  return (
    <section className="ko-section" id="facility">
      <div className="ko-container">
        <div className="ko-section-head ko-section-head-row">
          <div>
            <div className="ko-mono ko-eyebrow">
              <span className="ko-eyebrow-bar" style={{ background: accent }} />
              §03 · THE GYM
            </div>
            <h2 className="ko-h2">
              CLEAN. LOUD.<br />
              <span style={{ color: accent, fontStyle: 'italic' }}>STATE-OF-THE-ART</span>.
            </h2>
          </div>
          <p className="ko-section-lead ko-section-lead-right">
            Lake Mary, FL. Disinfected between every class, professionally cleaned nightly,
            with a superb air filtration system. InBody body-comp tech included with every membership.
          </p>
        </div>

        <div className="ko-facility-grid">
          {tiles.map((t, i) => (
            <figure key={i} className={`ko-tile ko-tile-${t.span}`}>
              <img src={t.src} alt={t.label} onError={(e) => { e.target.style.opacity = 0; }} />
              <figcaption>
                <span className="ko-mono ko-tile-num" style={{ color: accent }}>{t.n}</span>
                <span className="ko-mono ko-tile-label">{t.label}</span>
              </figcaption>
            </figure>
          ))}
        </div>
      </div>
    </section>
  );
}

const TESTIMONIALS = [
  {
    quote: 'I\'ve lost 25lbs during my 6 week transformation challenge and I feel wonderful. The 9:30am class motivates me to get moving and ready for the day.',
    name: 'TRANSFORMATION MEMBER',
    detail: '6-Week Challenge · Lake Mary',
    img: 'https://images.unsplash.com/photo-1539571696357-5a69c17a67c6?w=400&q=80',
  },
  {
    quote: 'Knockout Fitness is the only general public fitness gym I\'ve seen with authentic martial arts culture and techniques. Fitness, community, and real results — the total package.',
    name: 'LONGTIME MEMBER',
    detail: '2+ Years · Lake Mary',
    img: 'https://images.unsplash.com/photo-1438761681033-6461ffad8d80?w=400&q=80',
  },
  {
    quote: 'An hour flies by in this fast-paced kickboxing class. You aren\'t just a number — they know and call you by your name. You feel healthier and happier every time you walk out the door.',
    name: 'GROUP CLASS REGULAR',
    detail: 'Member · Central FL',
    img: 'https://images.unsplash.com/photo-1500648767791-00dcc994a43e?w=400&q=80',
  },
];

function Testimonials({ accent }) {
  return (
    <section className="ko-section ko-section-tint" id="testimonials">
      <div className="ko-container">
        <div className="ko-section-head">
          <div className="ko-mono ko-eyebrow">
            <span className="ko-eyebrow-bar" style={{ background: accent }} />
            §07 · THE CORNER
          </div>
          <h2 className="ko-h2">
            FROM PEOPLE<br />WHO <span style={{ color: accent, fontStyle: 'italic' }}>SHOWED UP</span>.
          </h2>
        </div>

        <div className="ko-testimonials">
          {TESTIMONIALS.map((t, i) => (
            <figure key={i} className="ko-testimonial">
              <div className="ko-quote-mark" style={{ color: accent }}>"</div>
              <blockquote>{t.quote}</blockquote>
              <figcaption>
                <img src={t.img} alt={t.name} onError={(e) => { e.target.style.opacity = 0; }} />
                <div>
                  <div className="ko-testimonial-name">{t.name}</div>
                  <div className="ko-mono ko-testimonial-detail">{t.detail}</div>
                </div>
              </figcaption>
            </figure>
          ))}
        </div>
      </div>
    </section>
  );
}

function About({ accent }) {
  return (
    <section className="ko-section" id="about">
      <div className="ko-container ko-about">
        <div className="ko-about-left">
          <div className="ko-mono ko-eyebrow">
            <span className="ko-eyebrow-bar" style={{ background: accent }} />
            §08 · OUR STORY
          </div>
          <h2 className="ko-h2">
            EST. <span style={{ color: accent }}>2018</span>.<br />
            LAKE<br />
            MARY.
          </h2>
        </div>
        <div className="ko-about-right">
          <p className="ko-about-lead">
            Owner Mike Friedman opened Knockout Fitness in Lake Mary in 2018 with one simple idea:
            high-energy kickboxing classes for real people who want real results.
          </p>
          <p>
            We're conveniently located in Lake Mary, FL — serving all ages and fitness levels with
            the best fitness kickboxing classes in Central Florida. Our coaches are dedicated, educated,
            and here for the members. Beyond classes, you'll find an InBody machine accessible with
            membership, nutrition options, and a full support and accountability team.
          </p>
          <p>
            We're not just a gym. We're a community. As one member put it — "It's literally like one big family.
            After your first class everyone remembers your name."
          </p>
          <div className="ko-about-stats">
            <div><div className="ko-stat-num" style={{ color: accent }}>2018</div><div className="ko-mono ko-stat-lbl">FOUNDED</div></div>
            <div><div className="ko-stat-num" style={{ color: accent }}>357+</div><div className="ko-mono ko-stat-lbl">REVIEWS</div></div>
            <div><div className="ko-stat-num" style={{ color: accent }}>98%</div><div className="ko-mono ko-stat-lbl">RECOMMEND</div></div>
          </div>
        </div>
      </div>
    </section>
  );
}

const FAQS = [
  { q: 'I\'ve never thrown a punch. Is this for me?', a: 'Absolutely — our classes are accommodating to all fitness levels, and most members started exactly where you are. The coaches help you learn proper technique from day one. After your first class, everyone will know your name.' },
  { q: 'What makes Knockout different?', a: 'Authentic martial arts culture and technique paired with a fitness-first community. Beyond classes, every member gets access to our InBody body-composition machine, nutrition options, and an accountability team that follows up with you.' },
  { q: 'How does the 6-Week Challenge work?', a: 'It\'s our annual transformation program. Members consistently lose 8% body fat and 15-25 lbs in six weeks. You get an accountability coach, a personalized meal plan, weekly body-comp scans, and the option for prepared meals delivered to your door.' },
  { q: 'How clean is the gym?', a: 'Coaches disinfect everything between classes, a professional cleaner comes in every night, and we have a superb air filtration system so members can have peace of mind.' },
  { q: 'How many calories will I burn?', a: 'Members regularly burn over 800 calories per class. Workouts mix cardio, strength, and HIIT into varied formats — newbie-friendly, advanced-tested.' },
  { q: 'Where are you located?', a: 'We\'re at 905 Williston Park Point, Suite #3, Lake Mary, FL. Call (407) 322-1434 or email knockoutfitnessfl@gmail.com to book your free trial class.' },
];

function FAQ({ accent }) {
  const [open, setOpen] = React.useState(0);
  return (
    <section className="ko-section ko-section-light" id="faq">
      <div className="ko-container ko-faq">
        <div className="ko-faq-head">
          <div className="ko-mono ko-eyebrow">
            <span className="ko-eyebrow-bar" style={{ background: accent }} />
            §09 · QUESTIONS
          </div>
          <h2 className="ko-h2">
            BEFORE YOU<br /><span style={{ color: accent, fontStyle: 'italic' }}>STEP IN</span>.
          </h2>
          <p className="ko-section-lead">Email <a style={{ color: accent }}>hi@knockoutfitness.co</a> if we missed yours.</p>
        </div>
        <div className="ko-faq-list">
          {FAQS.map((f, i) => (
            <button
              key={i}
              className={`ko-faq-item ${open === i ? 'is-open' : ''}`}
              onClick={() => setOpen(open === i ? -1 : i)}
            >
              <div className="ko-faq-q-row">
                <span className="ko-mono ko-faq-num" style={{ color: accent }}>0{i + 1}</span>
                <span className="ko-faq-q">{f.q}</span>
                <span className="ko-faq-icon" style={{ color: accent }}>{open === i ? '−' : '+'}</span>
              </div>
              <div className="ko-faq-a-wrap">
                <p className="ko-faq-a">{f.a}</p>
              </div>
            </button>
          ))}
        </div>
      </div>
    </section>
  );
}

function CTA({ accent }) {
  return (
    <section className="ko-cta-section">
      <div className="ko-container ko-cta-inner">
        <div className="ko-mono ko-eyebrow ko-eyebrow-light">
          <span className="ko-eyebrow-bar" style={{ background: accent }} />
          §10 · GET STARTED
        </div>
        <h2 className="ko-cta-headline">
          STOP <span className="ko-strike">WAITING</span><br />
          FOR MONDAY.<br />
          <span style={{ color: accent, fontStyle: 'italic' }}>TRY A CLASS.</span>
        </h2>
        <p className="ko-cta-sub">
          Your first class is free. We'll set you up with gloves, walk you through the basics, and you'll see
          why our members keep coming back. No pressure — just real fitness, real fun.
        </p>
        <form className="ko-cta-form" onSubmit={(e) => e.preventDefault()}>
          <input className="ko-cta-input" placeholder="your.email@yes.com" type="email" />
          <button className="ko-btn ko-btn-primary" style={{ background: accent, borderColor: accent }}>
            CLAIM FREE TRIAL →
          </button>
        </form>
        <div className="ko-mono ko-cta-fineprint">
          OR CALL (407) 322-1434 · KNOCKOUTFITNESSFL@GMAIL.COM
        </div>
      </div>
    </section>
  );
}

function Footer({ accent }) {
  return (
    <footer className="ko-footer">
      <div className="ko-container">
        <div className="ko-footer-top">
          <div className="ko-footer-mark">
            <div className="ko-wordmark ko-wordmark-lg">KNOCKOUT<span style={{ color: accent }}>.</span></div>
            <div className="ko-mono ko-footer-tag">FITNESS · LAKE MARY · EST 2018</div>
          </div>
          <div className="ko-footer-cols">
            <div>
              <div className="ko-mono ko-footer-h">VISIT</div>
              <p>905 Williston Park Point<br />Suite #3<br />Lake Mary, FL 32746</p>
              <p className="ko-mono ko-footer-hours">CALL (407) 322-1434<br />FREE TRIAL CLASS AVAILABLE</p>
            </div>
            <div>
              <div className="ko-mono ko-footer-h">PROGRAMS</div>
              <ul>
                <li><a href="#classes">Fitness Kickboxing</a></li>
                <li><a href="#classes">Personal Training</a></li>
                <li><a href="#classes">6-Week Challenge</a></li>
                <li><a href="#pricing">Membership</a></li>
              </ul>
            </div>
            <div>
              <div className="ko-mono ko-footer-h">CONTACT</div>
              <ul>
                <li><a>knockoutfitnessfl@gmail.com</a></li>
                <li><a>(407) 322-1434</a></li>
                <li><a>kickboxinglakemary.com</a></li>
                <li><a>@kickboxfl</a></li>
              </ul>
            </div>
          </div>
        </div>
        <div className="ko-footer-rule" style={{ background: accent }} />
        <div className="ko-footer-massive">KNOCKOUT FITNESS</div>
        <div className="ko-footer-bottom">
          <span className="ko-mono">© 2026 KNOCKOUT FITNESS LLC</span>
          <span className="ko-mono">LAKE MARY, FL</span>
          <span className="ko-mono">[ TERMS · PRIVACY · TEXT TERMS ]</span>
        </div>
      </div>
    </footer>
  );
}

window.Facility = Facility;
window.Testimonials = Testimonials;
window.About = About;
window.FAQ = FAQ;
window.CTA = CTA;
window.Footer = Footer;