// Additional sections matching kickboxinglakemary.com structure
// - Challenge6Week: dedicated 6-Week Fitness Challenge feature
// - StrategySession: free strategy session lead form
// - LocationMap: Lake Mary, FL location with map and hours

function Challenge6Week({ accent }) {
  return (
    <section className="ko-section ko-section-challenge" id="challenge">
      <div className="ko-container">
        <div className="ko-challenge-inner">
          <div className="ko-challenge-left">
            <div className="ko-mono ko-eyebrow">
              <span className="ko-eyebrow-bar" style={{ background: accent }} />
              §04 · ANNUAL EVENT
            </div>
            <div className="ko-challenge-numbermark">
              <span className="ko-challenge-bignum" style={{ WebkitTextStroke: `2px ${accent}`, color: 'transparent' }}>6</span>
              <div className="ko-challenge-numlabel">
                <div className="ko-mono" style={{ color: accent }}>WEEKS</div>
                <div className="ko-mono" style={{ opacity: 0.5 }}>TO RESULTS</div>
              </div>
            </div>
            <h2 className="ko-h2">
              KICK THE EXTRA<br />
              WEIGHT TO THE<br />
              <span style={{ color: accent, fontStyle: 'italic' }}>CURB</span>.
            </h2>
            <p className="ko-section-lead" style={{ marginTop: 16 }}>
              Our annual Lake Mary Fitness Challenge. After hundreds of clients,
              we've got it down to a science — fun, rewarding, and built around your life.
            </p>
          </div>
          <div className="ko-challenge-right">
            <div className="ko-challenge-card">
              <div className="ko-mono ko-challenge-card-h">WHAT'S INCLUDED</div>
              <ul className="ko-challenge-list">
                <li><span style={{ color: accent }}>01</span> Assigned accountability coach</li>
                <li><span style={{ color: accent }}>02</span> Personalized meal program</li>
                <li><span style={{ color: accent }}>03</span> Weekly InBody body composition scans</li>
                <li><span style={{ color: accent }}>04</span> Unlimited kickboxing classes</li>
                <li><span style={{ color: accent }}>05</span> Optional meal prep delivery</li>
                <li><span style={{ color: accent }}>06</span> 24/7 coach support</li>
              </ul>
              <div className="ko-challenge-results">
                <div className="ko-mono ko-challenge-card-h">REAL MEMBER RESULTS</div>
                <div className="ko-challenge-result-row">
                  <div>
                    <div className="ko-stat-num" style={{ color: accent }}>25<span style={{ fontSize: '0.5em' }}>LBS</span></div>
                    <div className="ko-mono ko-stat-lbl">DOWN IN 6 WEEKS</div>
                  </div>
                  <div>
                    <div className="ko-stat-num" style={{ color: accent }}>8<span style={{ fontSize: '0.5em' }}>%</span></div>
                    <div className="ko-mono ko-stat-lbl">BODY FAT LOST</div>
                  </div>
                  <div>
                    <div className="ko-stat-num" style={{ color: accent }}>3<span style={{ fontSize: '0.5em' }}>%</span></div>
                    <div className="ko-mono ko-stat-lbl">MUSCLE GAINED</div>
                  </div>
                </div>
              </div>
              <button className="ko-btn ko-btn-primary" style={{ background: accent, borderColor: accent, marginTop: 24, width: '100%', justifyContent: 'center' }}>
                <span>JOIN THE CHALLENGE</span>
                <svg width="18" height="18" viewBox="0 0 24 24" fill="none">
                  <path d="M5 12h14M13 5l7 7-7 7" stroke="currentColor" strokeWidth="2.5" strokeLinecap="square" />
                </svg>
              </button>
              <div className="ko-mono ko-challenge-bonus" style={{ color: accent }}>
                ★ FREE BONUS · 3 EASY TIPS ON TURNING FAT INTO MUSCLE
              </div>
            </div>
          </div>
        </div>
      </div>
    </section>
  );
}

function StrategySession({ accent }) {
  return (
    <section className="ko-section ko-section-strategy" id="strategy">
      <div className="ko-container">
        <div className="ko-strategy-grid">
          <div className="ko-strategy-left">
            <div className="ko-mono ko-eyebrow">
              <span className="ko-eyebrow-bar" style={{ background: accent }} />
              §07 · GET STARTED
            </div>
            <h2 className="ko-h2">
              ACCESS THE<br />
              SCHEDULE +<br />
              <span style={{ color: accent, fontStyle: 'italic' }}>FREE STRATEGY</span><br />
              SESSION.
            </h2>
            <p className="ko-section-lead" style={{ marginTop: 16 }}>
              Request more information today to find out how you can start your transformation.
              Sit down with us, map your goals, and walk out with a plan.
            </p>
            <div className="ko-strategy-bullets">
              <div className="ko-strategy-bullet">
                <span className="ko-mono ko-strategy-num" style={{ color: accent }}>01.</span>
                <div>
                  <div className="ko-strategy-bullet-h">No-pressure consult</div>
                  <div className="ko-strategy-bullet-d">Tour the gym, meet the team, ask anything.</div>
                </div>
              </div>
              <div className="ko-strategy-bullet">
                <span className="ko-mono ko-strategy-num" style={{ color: accent }}>02.</span>
                <div>
                  <div className="ko-strategy-bullet-h">Goal mapping</div>
                  <div className="ko-strategy-bullet-d">We sit down with you and map a personalized roadmap.</div>
                </div>
              </div>
              <div className="ko-strategy-bullet">
                <span className="ko-mono ko-strategy-num" style={{ color: accent }}>03.</span>
                <div>
                  <div className="ko-strategy-bullet-h">Free trial class</div>
                  <div className="ko-strategy-bullet-d">Try a real class on the house. Gloves provided.</div>
                </div>
              </div>
            </div>
          </div>

          <form className="ko-strategy-form" onSubmit={(e) => e.preventDefault()}>
            <div className="ko-mono ko-strategy-form-h">
              <span style={{ color: accent }}>●</span> REQUEST INFO
            </div>
            <div className="ko-strategy-form-title">Secure your spot.</div>

            <label className="ko-strategy-field">
              <span className="ko-mono">FIRST NAME</span>
              <input type="text" placeholder="Alex" />
            </label>
            <label className="ko-strategy-field">
              <span className="ko-mono">LAST NAME</span>
              <input type="text" placeholder="Smith" />
            </label>
            <label className="ko-strategy-field">
              <span className="ko-mono">EMAIL</span>
              <input type="email" placeholder="alex@email.com" />
            </label>
            <label className="ko-strategy-field">
              <span className="ko-mono">PHONE</span>
              <input type="tel" placeholder="(407) 000-0000" />
            </label>
            <label className="ko-strategy-field ko-strategy-field-full">
              <span className="ko-mono">WHAT'S YOUR GOAL?</span>
              <select defaultValue="">
                <option value="" disabled>Pick one...</option>
                <option>Lose weight</option>
                <option>Build strength</option>
                <option>Try kickboxing</option>
                <option>6-Week Challenge</option>
                <option>Personal training</option>
              </select>
            </label>

            <button type="submit" className="ko-btn ko-btn-primary ko-strategy-submit"
              style={{ background: accent, borderColor: accent }}>
              <span>CLAIM MY SPOT</span>
              <svg width="18" height="18" viewBox="0 0 24 24" fill="none">
                <path d="M5 12h14M13 5l7 7-7 7" stroke="currentColor" strokeWidth="2.5" strokeLinecap="square" />
              </svg>
            </button>

            <div className="ko-mono ko-strategy-fineprint">
              By opting in you consent to receive periodic text messages from Knockout Fitness.
              Standard rates may apply. Reply STOP to opt out.
            </div>
          </form>
        </div>
      </div>
    </section>
  );
}

function LocationMap({ accent }) {
  return (
    <section className="ko-section ko-section-location" id="location">
      <div className="ko-container">
        <div className="ko-section-head">
          <div className="ko-mono ko-eyebrow">
            <span className="ko-eyebrow-bar" style={{ background: accent }} />
            §09 · VISIT THE GYM
          </div>
          <h2 className="ko-h2">
            LAKE MARY, <span style={{ color: accent, fontStyle: 'italic' }}>FL</span>.
          </h2>
        </div>

        <div className="ko-location-grid">
          <div className="ko-location-info">
            <div className="ko-location-block">
              <div className="ko-mono ko-location-h">ADDRESS</div>
              <div className="ko-location-text">
                905 Williston Park Point<br />
                Suite #3<br />
                Lake Mary, FL 32746
              </div>
            </div>
            <div className="ko-location-block">
              <div className="ko-mono ko-location-h">CONTACT</div>
              <div className="ko-location-text">
                <a href="tel:4073221434">(407) 322-1434</a><br />
                <a href="mailto:knockoutfitnessfl@gmail.com">knockoutfitnessfl@gmail.com</a>
              </div>
            </div>
            <div className="ko-location-block">
              <div className="ko-mono ko-location-h">HOURS</div>
              <div className="ko-location-text ko-mono">
                MON–FRI · 06:00 – 20:00<br />
                SAT · 08:00 – 12:00<br />
                SUN · 10:00 – 13:00
              </div>
            </div>
            <div className="ko-location-block">
              <div className="ko-mono ko-location-h">FOLLOW</div>
              <div className="ko-location-text">
                <a>@kickboxfl</a> · Facebook<br />
                <a>kickboxinglakemary.com</a>
              </div>
            </div>
          </div>

          <div className="ko-location-map">
            <div className="ko-map-shell" aria-hidden>
              {/* Stylized map visualization */}
              <svg viewBox="0 0 600 480" preserveAspectRatio="xMidYMid slice" className="ko-map-svg">
                <defs>
                  <pattern id="ko-map-grid" width="40" height="40" patternUnits="userSpaceOnUse">
                    <path d="M 40 0 L 0 0 0 40" fill="none" stroke="currentColor" strokeWidth="0.5" opacity="0.15" />
                  </pattern>
                </defs>
                <rect width="600" height="480" fill="url(#ko-map-grid)" />
                {/* Roads */}
                <path d="M 0 180 L 600 200" stroke="currentColor" strokeWidth="2" opacity="0.35" />
                <path d="M 0 320 L 600 300" stroke="currentColor" strokeWidth="2" opacity="0.35" />
                <path d="M 200 0 L 220 480" stroke="currentColor" strokeWidth="2" opacity="0.35" />
                <path d="M 420 0 L 410 480" stroke="currentColor" strokeWidth="2" opacity="0.35" />
                <path d="M 0 90 L 600 60" stroke="currentColor" strokeWidth="1" opacity="0.2" />
                <path d="M 0 410 L 600 440" stroke="currentColor" strokeWidth="1" opacity="0.2" />
                <path d="M 100 0 L 110 480" stroke="currentColor" strokeWidth="1" opacity="0.2" />
                <path d="M 320 0 L 320 480" stroke="currentColor" strokeWidth="1" opacity="0.2" />
                <path d="M 530 0 L 540 480" stroke="currentColor" strokeWidth="1" opacity="0.2" />

                {/* I-4 highway label */}
                <text x="40" y="60" className="ko-map-label" fill="currentColor" opacity="0.45">I-4</text>
                <text x="40" y="76" className="ko-map-sublabel" fill="currentColor" opacity="0.35">INTERSTATE</text>
                <text x="220" y="170" className="ko-map-label" fill="currentColor" opacity="0.45">LAKE MARY BLVD</text>
                <text x="430" y="290" className="ko-map-label" fill="currentColor" opacity="0.45">RINEHART RD</text>

                {/* Marker */}
                <g transform="translate(300, 240)">
                  <circle cx="0" cy="0" r="60" fill={accent} opacity="0.08" />
                  <circle cx="0" cy="0" r="36" fill={accent} opacity="0.18" />
                  <circle cx="0" cy="0" r="14" fill={accent} />
                  <circle cx="0" cy="0" r="5" fill="#fff" />
                </g>

                {/* Marker label */}
                <g transform="translate(300, 168)">
                  <rect x="-90" y="-18" width="180" height="32" fill={accent} />
                  <text x="0" y="3" textAnchor="middle" className="ko-map-pin-label" fill="#fff">KNOCKOUT FITNESS</text>
                </g>
              </svg>

              <div className="ko-map-corner ko-mono">
                <div>28.7589° N</div>
                <div>81.3273° W</div>
              </div>

              <div className="ko-map-action">
                <button className="ko-btn ko-btn-ghost">GET DIRECTIONS →</button>
              </div>
            </div>
          </div>
        </div>
      </div>
    </section>
  );
}

window.Challenge6Week = Challenge6Week;
window.StrategySession = StrategySession;
window.LocationMap = LocationMap;

// === LOCATIONS GRID — sister-location browser ===
const LOCATIONS = [
  {
    city: 'LAKE MARY',
    state: 'FL',
    addr: '905 Williston Park Point, Suite #3',
    phone: '(407) 322-1434',
    status: 'open',
    distance: 'FLAGSHIP',
    note: 'Open since 2018. Owner-operated by Mike Friedman.',
  },
  {
    city: 'HEATHROW',
    state: 'FL',
    addr: 'Coming to International Pkwy',
    phone: '—',
    status: 'soon',
    distance: '~3 MI',
    note: 'Next on the map.',
  },
  {
    city: 'SANFORD',
    state: 'FL',
    addr: 'Downtown · TBA',
    phone: '—',
    status: 'soon',
    distance: '~7 MI',
    note: 'Scouting locations.',
  },
  {
    city: 'OVIEDO',
    state: 'FL',
    addr: 'Mitchell Hammock Rd · TBA',
    phone: '—',
    status: 'planned',
    distance: '~12 MI',
    note: 'On the roadmap.',
  },
  {
    city: 'LONGWOOD',
    state: 'FL',
    addr: 'Wekiva Springs · TBA',
    phone: '—',
    status: 'planned',
    distance: '~8 MI',
    note: 'On the roadmap.',
  },
  {
    city: 'WINTER PARK',
    state: 'FL',
    addr: 'Park Ave · TBA',
    phone: '—',
    status: 'interest',
    distance: '~15 MI',
    note: 'Member demand growing.',
  },
];

function Locations({ accent }) {
  const cities = [
    'LAKE MARY', 'HEATHROW', 'SANFORD', 'LONGWOOD',
    'OVIEDO', 'WINTER SPRINGS', 'CASSELBERRY', 'ALTAMONTE SPRINGS',
    'MAITLAND', 'APOPKA', 'DEBARY', 'DELTONA',
  ];

  return (
    <section className="ko-section ko-section-locations" id="locations">
      <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 }} />
              §11 · LOCATIONS
            </div>
            <h2 className="ko-h2">
              PROUDLY <span style={{ color: accent, fontStyle: 'italic' }}>SERVING</span><br />
              CENTRAL FLORIDA.
            </h2>
          </div>
          <p className="ko-section-lead ko-section-lead-right">
            One gym. One community. Members drive in from across Seminole County
            and beyond — because the right hour of training is worth the trip.
          </p>
        </div>

        <div className="ko-locations-layout">
          {/* Flagship card */}
          <a href="#location" className="ko-loc-flagship" style={{ borderColor: accent }}>
            <div className="ko-loc-flagship-top">
              <div className="ko-mono ko-loc-num">N°01 · FLAGSHIP</div>
              <div
                className="ko-mono ko-loc-status"
                style={{ color: accent, borderColor: accent }}
              >
                <span className="ko-loc-status-dot" style={{ background: accent }} />
                OPEN NOW
              </div>
            </div>

            <div className="ko-loc-flagship-city">
              <h3 className="ko-loc-city">LAKE MARY</h3>
              <span className="ko-loc-state ko-mono">FL · 32746</span>
            </div>

            <div className="ko-loc-flagship-body">
              <div className="ko-loc-addr">905 Williston Park Point, Suite #3</div>
              <div className="ko-mono ko-loc-phone">(407) 322-1434</div>
              <div className="ko-mono ko-loc-phone">MON–FRI · 9:00 AM – 6:00 PM</div>
              <div className="ko-loc-note">Owner-operated by Mike Friedman since 2018.</div>
            </div>

            <div className="ko-loc-foot">
              <span className="ko-mono ko-loc-distance">VOTED #1 · ORLANDO SENTINEL</span>
              <span className="ko-mono ko-loc-link" style={{ color: accent }}>VISIT GYM →</span>
            </div>
          </a>

          {/* Service area list */}
          <div className="ko-loc-areas">
            <div className="ko-mono ko-loc-areas-h">SERVICE AREA</div>
            <ul className="ko-loc-cities">
              {cities.map((c, i) => (
                <li key={c} className="ko-loc-city-row">
                  <span className="ko-mono ko-loc-city-idx">{String(i + 1).padStart(2, '0')}</span>
                  <a href="#strategy" className="ko-loc-city-link">
                    {c}
                    {c === 'LAKE MARY' && (
                      <span className="ko-loc-city-flag ko-mono" style={{ background: accent }}>HOME</span>
                    )}
                  </a>
                  <span className="ko-loc-city-rule" />
                  <span className="ko-mono ko-loc-city-state">FL</span>
                </li>
              ))}
            </ul>
            <div className="ko-mono ko-loc-areas-foot">
              + SURROUNDING SEMINOLE & ORANGE COUNTIES
            </div>
          </div>
        </div>
      </div>
    </section>
  );
}

window.Locations = Locations;