// Direction 1: "The Locker Room"
// Editorial sportswear. Black + gold with cream paper accents.
// Big italic display type. Story-forward.

const LockerRoomHome = () => {
  const cream = '#F5EFE3';
  const gold = '#F0A500';
  const ink = '#0D0D0D';
  const card = '#1A1A1A';
  const muted = '#999999';

  // Re-usable photo placeholder with monospace shoot direction
  const Photo = ({ note, h = 360, tone = 'dark', tall, full }) => (
    <div style={{
      position: 'relative',
      width: '100%',
      height: h,
      background: tone === 'dark'
        ? 'repeating-linear-gradient(135deg, #1f1f1f 0px, #1f1f1f 14px, #181818 14px, #181818 28px)'
        : 'repeating-linear-gradient(135deg, #e8e2d4 0px, #e8e2d4 14px, #ddd6c5 14px, #ddd6c5 28px)',
      overflow: 'hidden',
      borderRadius: 2,
    }}>
      <div style={{
        position: 'absolute',
        inset: 0,
        display: 'flex',
        alignItems: 'flex-end',
        padding: 18,
      }}>
        <div style={{
          fontFamily: 'ui-monospace, "SFMono-Regular", Menlo, Consolas, monospace',
          fontSize: 11,
          letterSpacing: '0.04em',
          color: tone === 'dark' ? '#bdbdbd' : '#5a5346',
          background: tone === 'dark' ? 'rgba(0,0,0,0.55)' : 'rgba(255,255,255,0.65)',
          padding: '6px 10px',
          maxWidth: '85%',
          lineHeight: 1.4,
        }}>
          {`// ${note}`}
        </div>
      </div>
    </div>
  );

  const Nav = () => (
    <nav style={{
      display: 'flex',
      alignItems: 'center',
      justifyContent: 'space-between',
      padding: '16px 56px',
      gap: 40,
      borderBottom: `1px solid #222`,
      position: 'sticky',
      top: 0,
      background: ink,
      zIndex: 50,
    }}>
      <a href="index.html" style={{ display: 'flex', alignItems: 'center', gap: 14, textDecoration: 'none', flexShrink: 0 }}>
        <img src="assets/logo-on-dark-tight.png" alt="Time to Train Athletics Foundation" style={{ height: 52, width: 'auto' }} />
      </a>
      <div style={{ display: 'flex', gap: 24, alignItems: 'center', flexWrap: 'wrap', justifyContent: 'flex-end' }}>
        {[
          ['About', 'about.html'],
          ['Programs', 'programs.html'],
          ['Events', 'events.html'],
          ['Impact', 'impact.html'],
          ['Sponsors', 'sponsors.html'],
          ['Contact', 'contact.html'],
        ].map(([label, href]) => (
          <a key={label} href={href} style={{
            color: '#fff', textDecoration: 'none',
            fontFamily: 'Montserrat, sans-serif', fontWeight: 600, fontSize: 13,
            letterSpacing: '0.06em', textTransform: 'uppercase',
          }}>{label}</a>
        ))}
        <a href="donate.html" style={{
          background: gold, color: ink, padding: '12px 22px',
          fontFamily: 'Montserrat, sans-serif', fontWeight: 700, fontSize: 13,
          letterSpacing: '0.08em', textTransform: 'uppercase',
          textDecoration: 'none',
        }}>Donate</a>
      </div>
    </nav>
  );

  // Hand-drawn underline (slightly imperfect bezier path)
  const Underline = ({ color = gold, width = '100%' }) => (
    <svg viewBox="0 0 400 14" preserveAspectRatio="none" style={{ width, height: 12, display: 'block' }}>
      <path d="M2 8 C 60 2, 130 12, 200 6 S 340 12, 398 4" stroke={color} strokeWidth="3" fill="none" strokeLinecap="round" />
    </svg>
  );

  return (
    <div style={{
      background: ink,
      color: '#fff',
      fontFamily: '"Open Sans", system-ui, sans-serif',
      minHeight: '100%',
      width: '100%',
    }}>
      <Nav />

      {/* HERO — full-bleed video background with text overlay */}
      <section style={{
        position: 'relative',
        minHeight: 720,
        display: 'flex',
        alignItems: 'center',
        overflow: 'hidden',
      }}>
        {/* Full-bleed video */}
        <video
          src="assets/homepage-1.mp4"
          poster="assets/homepage-1-poster.jpg"
          autoPlay muted loop playsInline
          style={{
            position: 'absolute', inset: 0,
            width: '100%', height: '100%',
            objectFit: 'cover', display: 'block',
            zIndex: 0,
          }}
        />
        {/* Dark overlay so text stays readable */}
        <div style={{
          position: 'absolute', inset: 0,
          background: 'linear-gradient(to right, rgba(13,13,13,0.88) 45%, rgba(13,13,13,0.3) 100%)',
          zIndex: 1,
        }} />
        {/* Text content */}
        <div style={{
          position: 'relative', zIndex: 2,
          padding: '100px 56px',
          maxWidth: 700,
        }}>
          <div style={{
            fontFamily: 'ui-monospace, Menlo, Consolas, monospace',
            color: gold, fontSize: 13, letterSpacing: '0.18em', textTransform: 'uppercase',
            marginBottom: 36,
          }}>
            ★ Orlando · Apopka · Winter Park · Altamonte Springs
          </div>
          <h1 style={{
            fontFamily: 'Montserrat, sans-serif',
            fontWeight: 800,
            fontSize: 104,
            lineHeight: 0.92,
            letterSpacing: '-0.025em',
            margin: 0,
            color: '#fff',
          }}>
            Every kid<br/>
            deserves<br/>
            <span style={{ fontStyle: 'italic', fontWeight: 700, color: gold }}>a chance</span><br/>
            to play.
          </h1>
          <p style={{
            marginTop: 38, marginBottom: 0,
            fontSize: 19, lineHeight: 1.55, color: '#dddddd',
            maxWidth: 520,
          }}>
            We&rsquo;re a Central Florida foundation building real access to sports
            and movement for youth ages 5 through 18. No matter the zip code.
            No matter what the family can afford.
          </p>
          <div style={{ display: 'flex', gap: 16, marginTop: 40, flexWrap: 'wrap' }}>
            <a href="#donate" style={{
              background: gold, color: ink, padding: '18px 32px',
              fontFamily: 'Montserrat, sans-serif', fontWeight: 700, fontSize: 14,
              letterSpacing: '0.1em', textTransform: 'uppercase', textDecoration: 'none',
            }}>Fund a Scholarship</a>
            <a href="#sponsors" style={{
              background: 'transparent', color: '#fff', padding: '18px 32px',
              border: '1px solid rgba(255,255,255,0.4)',
              fontFamily: 'Montserrat, sans-serif', fontWeight: 700, fontSize: 14,
              letterSpacing: '0.1em', textTransform: 'uppercase', textDecoration: 'none',
            }}>Become a Sponsor</a>
          </div>
        </div>
      </section>

      {/* RUNNING TICKER STRIP */}
      <style>{`
        @keyframes ttt-ticker {
          0%   { transform: translateX(0); }
          100% { transform: translateX(-50%); }
        }
        .ttt-ticker-inner {
          animation: ttt-ticker 22s linear infinite;
          display: flex;
          gap: 48px;
          white-space: nowrap;
          width: max-content;
        }
        .ttt-ticker-inner:hover { animation-play-state: paused; }
      `}</style>
      <div style={{
        background: gold, color: ink,
        padding: '13px 0', overflow: 'hidden',
        borderTop: `1px solid ${ink}`, borderBottom: `1px solid ${ink}`,
        marginTop: 80,
      }}>
        <div className="ttt-ticker-inner" style={{
          fontFamily: 'Montserrat, sans-serif', fontWeight: 800,
          fontSize: 13, letterSpacing: '0.14em', textTransform: 'uppercase',
        }}>
          {Array.from({length: 6}).map((_, i) => (
            <span key={i} style={{ display: 'flex', gap: 48, paddingLeft: i === 0 ? 56 : 0 }}>
              <span>Access First</span><span>★</span>
              <span>Movement Matters</span><span>★</span>
              <span>Show Up</span><span>★</span>
              <span>Do the Work</span><span>★</span>
              <span>Community Is the Mission</span><span>★</span>
            </span>
          ))}
        </div>
      </div>

      {/* FROM THE FOUNDER — headshot + letter format */}
      <section style={{ padding: '110px 56px', display: 'grid', gridTemplateColumns: '1fr 1fr 1.3fr', gap: 56, alignItems: 'start' }}>
        {/* Headshot */}
        <div>
          <img
            src="assets/founder/jonathon-thompson.jpg"
            alt="Jonathon Thompson, Founder"
            style={{ width: '100%', aspectRatio: '3/4', objectFit: 'cover', objectPosition: 'center top', display: 'block' }}
          />
        </div>

        {/* Headline + underline */}
        <div style={{ paddingTop: 8 }}>
          <div style={{
            fontFamily: 'ui-monospace, Menlo, Consolas, monospace',
            color: gold, fontSize: 12, letterSpacing: '0.18em', textTransform: 'uppercase',
            marginBottom: 18,
          }}>From the Founder</div>
          <h2 style={{
            fontFamily: 'Montserrat, sans-serif', fontWeight: 800, fontSize: 52,
            lineHeight: 0.98, letterSpacing: '-0.02em', margin: 0,
          }}>
            I came back<br/>
            for the kids<br/>
            <span style={{ fontStyle: 'italic', color: gold }}>I used to be.</span>
          </h2>
          <div style={{ marginTop: 26, width: 240 }}>
            <Underline />
          </div>
          <a href="founder.html" style={{
            display: 'inline-block', marginTop: 32,
            color: gold, textDecoration: 'none',
            fontFamily: 'Montserrat, sans-serif', fontWeight: 700, fontSize: 12,
            letterSpacing: '0.12em', textTransform: 'uppercase',
          }}>Meet Jonathon &rarr;</a>
        </div>

        {/* Letter card */}
        <div style={{
          background: cream, color: ink,
          padding: '48px 52px',
          fontFamily: 'Georgia, "Times New Roman", serif',
          fontSize: 18, lineHeight: 1.65,
        }}>
          <p style={{ marginTop: 0 }}>
            Jones High School. That&rsquo;s where I&rsquo;m from. Same Orlando neighborhoods we
            serve today. Basketball took me to Rider on a D-I scholarship, then overseas to
            the UK, Argentina, Uruguay, Hungary, the Czech Republic.
          </p>
          <p>
            Five countries. A lot of gyms. A lot of coaches who poured into me when they
            didn&rsquo;t have to.
          </p>
          <p>
            <strong>Time to Train Athletics Foundation is how I pay that back.</strong>
            We make sure kids in Central Florida who love a sport, or want to find one,
            never get told no because of cost or zip code.
          </p>
          <div style={{
            marginTop: 36, fontFamily: 'Montserrat, sans-serif',
            fontWeight: 700, fontSize: 13, letterSpacing: '0.1em', textTransform: 'uppercase',
          }}>
            Jonathon Thompson<br/>
            <span style={{ color: '#7a6f55', fontWeight: 600 }}>Co-Founder &amp; Director of Athletic Development</span>
          </div>
        </div>
      </section>

      {/* THE FOUR PROGRAMS */}
      <section style={{ padding: '60px 56px 110px' }}>
        <div style={{ display: 'flex', alignItems: 'baseline', justifyContent: 'space-between', marginBottom: 54 }}>
          <div>
            <div style={{
              fontFamily: 'ui-monospace, Menlo, Consolas, monospace',
              color: gold, fontSize: 12, letterSpacing: '0.18em', textTransform: 'uppercase',
              marginBottom: 14,
            }}>What we run</div>
            <h2 style={{
              fontFamily: 'Montserrat, sans-serif', fontWeight: 800, fontSize: 64,
              lineHeight: 1, letterSpacing: '-0.02em', margin: 0,
            }}>
              Four programs.<br/>
              <span style={{ fontStyle: 'italic', color: gold }}>One mission.</span>
            </h2>
          </div>
          <a href="programs.html" style={{ color: gold, textDecoration: 'none', fontFamily: 'Montserrat, sans-serif', fontWeight: 700, fontSize: 13, letterSpacing: '0.1em', textTransform: 'uppercase' }}>
            See all programs &rarr;
          </a>
        </div>

        <div style={{ display: 'grid', gridTemplateColumns: 'repeat(2, 1fr)', gap: 28 }}>
          {[
            {
              num: '01', name: 'Open Field',
              tag: 'Free monthly community fitness events',
              desc: 'Inclusive, drop-in events for any kid in Central Florida who wants to move. No registration fee. No skill level required.',
              href: 'programs.html#open-field',
              img: 'assets/programs/open-field.jpg',
            },
            {
              num: '02', name: 'Play Forward',
              tag: 'Youth sports scholarship fund',
              desc: 'Direct financial assistance to families so kids can join organized sports. Cleats, league fees, equipment, registration.',
              href: 'programs.html#play-forward',
              img: 'assets/programs/play-forward.jpg',
            },
            {
              num: '03', name: 'Active Roots',
              tag: 'School partnership program',
              desc: 'We work alongside Central Florida schools to bring resources, equipment, and movement programming directly into the classroom and onto the field.',
              href: 'programs.html#active-roots',
              img: 'assets/programs/active-roots.jpg',
            },
            {
              num: '04', name: 'The Training Ground',
              tag: 'Skills and conditioning clinic',
              desc: 'Multi-day skill development, teamwork, and confidence building for athletes ages 8–18.',
              href: 'programs.html#training-ground',
              img: 'assets/programs/training-ground.jpg',
              highlight: true,
            },
          ].map(p => (
            <div key={p.num} style={{
              background: p.highlight ? gold : card,
              color: p.highlight ? ink : '#fff',
              display: 'flex', flexDirection: 'column',
              overflow: 'hidden',
            }}>
              {p.img && (
                <img src={p.img} alt={p.name + ' program illustration'} style={{
                  width: '100%', height: '200px', objectFit: 'cover', display: 'block', flexShrink: 0,
                }} />
              )}
              <div style={{ padding: p.photo ? '24px 32px 32px' : '32px 32px 32px', display: 'flex', flexDirection: 'column', flex: 1 }}>
                <div style={{ fontFamily: 'ui-monospace, monospace', color: p.highlight ? '#7a5800' : gold, fontSize: 11, letterSpacing: '0.16em', marginBottom: 10 }}>{p.num}</div>
                <h3 style={{
                  fontFamily: 'Montserrat, sans-serif', fontWeight: 800,
                  fontSize: 34, letterSpacing: '-0.015em', margin: '0 0 8px',
                }}>{p.name}</h3>
                <div style={{
                  fontFamily: 'Montserrat, sans-serif', fontWeight: 600,
                  fontSize: 13, letterSpacing: '0.06em', textTransform: 'uppercase',
                  color: p.highlight ? '#5a3d00' : muted, marginBottom: 16,
                }}>{p.tag}</div>
                <p style={{ fontSize: 15, lineHeight: 1.6, margin: 0, color: p.highlight ? '#1a1a1a' : '#cfcfcf' }}>
                  {p.desc}
                </p>
                <a href={p.href} style={{
                  paddingTop: 24, marginTop: 'auto',
                  color: p.highlight ? ink : '#fff', textDecoration: 'none',
                  fontFamily: 'Montserrat, sans-serif', fontWeight: 700, fontSize: 12,
                  letterSpacing: '0.12em', textTransform: 'uppercase',
                  borderTop: p.highlight ? '1px solid rgba(0,0,0,0.2)' : '1px solid #2a2a2a',
                }}>Learn more &rarr;</a>
              </div>
            </div>
          ))}
        </div>
      </section>

      {/* QUOTE — looks like a screenshot from a real review */}
      <section style={{ padding: '20px 56px 110px' }}>
        <div style={{
          background: card,
          padding: '56px 56px',
          display: 'grid',
          gridTemplateColumns: '60px 1fr',
          gap: 36,
          position: 'relative',
        }}>
          <div style={{
            fontFamily: 'Georgia, serif',
            fontSize: 140, lineHeight: 0.7, color: gold,
            fontStyle: 'italic',
          }}>&ldquo;</div>
          <div>
            <p style={{
              fontFamily: 'Georgia, serif', fontSize: 26, lineHeight: 1.45,
              margin: 0, color: '#fff', fontStyle: 'italic',
            }}>
              My daughter has been training with Jon and I love seeing how much she&rsquo;s
              grown. Not only is she improving her skills and confidence, but she&rsquo;s also
              making great friends with other like-minded athletes who are all focused on
              getting better. Every session she comes home excited to show what she&rsquo;s
              learned.
            </p>
            <div style={{ display: 'flex', alignItems: 'center', gap: 14, marginTop: 32 }}>
              <div style={{ width: 44, height: 44, borderRadius: '50%', background: '#3a3a3a', display: 'grid', placeItems: 'center', fontFamily: 'Montserrat', fontWeight: 700, color: gold }}>GR</div>
              <div>
                <div style={{ fontFamily: 'Montserrat, sans-serif', fontWeight: 700, fontSize: 15 }}>Giselle Ross</div>
                <div style={{ fontSize: 12, color: muted, fontFamily: 'Montserrat, sans-serif' }}>Parent &middot; ★★★★★ on Google Reviews</div>
              </div>
            </div>
          </div>
        </div>
      </section>

      {/* SPONSORS — corporate-focused. Clean tier ladder. */}
      <section id="sponsors" style={{ padding: '0 56px 110px' }}>
        <div style={{ marginBottom: 54, maxWidth: 720 }}>
          <div style={{
            fontFamily: 'ui-monospace, Menlo, Consolas, monospace',
            color: gold, fontSize: 12, letterSpacing: '0.18em', textTransform: 'uppercase',
            marginBottom: 14,
          }}>For Companies</div>
          <h2 style={{
            fontFamily: 'Montserrat, sans-serif', fontWeight: 800, fontSize: 64,
            lineHeight: 1, letterSpacing: '-0.02em', margin: 0,
          }}>
            Get your team<br/>
            <span style={{ fontStyle: 'italic', color: gold }}>in the game.</span>
          </h2>
          <p style={{ marginTop: 22, fontSize: 18, lineHeight: 1.55, color: '#cccccc' }}>
            Five sponsorship levels. Real visibility. Hands-on employee engagement that
            doubles as CSR documentation. Tax-deductible. 501(c)(3) approved April 2026.
          </p>
        </div>

        <div style={{ display: 'grid', gridTemplateColumns: 'repeat(5, 1fr)', gap: 12 }}>
          {[
            { name: 'Title', amount: '$10,000+', funds: '~30 athletes', href: 'sponsors.html#title-tier', highlight: true },
            { name: 'Gold', amount: '$5,000', funds: '~20 athletes', href: 'sponsors.html#gold-tier' },
            { name: 'Silver', amount: '$2,500', funds: '~10 athletes', href: 'sponsors.html#silver-tier' },
            { name: 'Community', amount: '$500–1K', funds: '2–4 athletes', href: 'sponsors.html#community-tier' },
            { name: 'In-Kind', amount: 'Goods', funds: 'Event partner', href: 'sponsors.html#inkind-tier' },
          ].map(t => (
            <a key={t.name} href={t.href} style={{
              background: t.highlight ? gold : card,
              color: t.highlight ? ink : '#fff',
              padding: '32px 24px 28px',
              minHeight: 240,
              display: 'flex', flexDirection: 'column',
              borderTop: t.highlight ? 'none' : `3px solid ${gold}`,
              textDecoration: 'none',
            }}>
              <div style={{
                fontFamily: 'Montserrat, sans-serif', fontWeight: 800,
                fontSize: 11, letterSpacing: '0.18em', textTransform: 'uppercase',
                marginBottom: 16,
                color: t.highlight ? '#5a3d00' : muted,
              }}>{t.name} Sponsor</div>
              <div style={{
                fontFamily: 'Montserrat, sans-serif', fontWeight: 800,
                fontSize: 32, letterSpacing: '-0.015em',
                marginBottom: 6,
              }}>{t.amount}</div>
              <div style={{ fontSize: 13, lineHeight: 1.5, color: t.highlight ? '#3a2900' : '#bbb' }}>
                Funds {t.funds}
              </div>
              <div style={{
                marginTop: 'auto', paddingTop: 24,
                fontFamily: 'Montserrat, sans-serif', fontWeight: 700, fontSize: 11,
                letterSpacing: '0.12em', textTransform: 'uppercase',
                color: t.highlight ? ink : gold,
              }}>View benefits &rarr;</div>
            </a>
          ))}
        </div>

        <div style={{ marginTop: 42, display: 'flex', alignItems: 'center', gap: 24, flexWrap: 'wrap' }}>
          <div style={{
            padding: '14px 22px', border: `1px dashed #444`,
            fontFamily: 'ui-monospace, monospace', fontSize: 12, color: muted,
          }}>+ Your logo here</div>
        </div>
      </section>

      {/* DONATE BAND */}
      <section id="donate" style={{
        background: cream, color: ink,
        padding: '90px 56px',
        display: 'grid', gridTemplateColumns: '1fr 1fr', gap: 56,
      }}>
        <div>
          <div style={{
            fontFamily: 'ui-monospace, Menlo, Consolas, monospace',
            color: '#7a6f55', fontSize: 12, letterSpacing: '0.18em', textTransform: 'uppercase',
            marginBottom: 14,
          }}>04 — Give</div>
          <h2 style={{
            fontFamily: 'Montserrat, sans-serif', fontWeight: 800, fontSize: 60,
            lineHeight: 0.98, letterSpacing: '-0.02em', margin: 0, color: ink,
          }}>
            Put a kid<br/>
            <span style={{ fontStyle: 'italic', color: gold }}>on the field.</span>
          </h2>
          <p style={{ fontSize: 18, lineHeight: 1.55, marginTop: 22, color: '#3a3328' }}>
            Every dollar funds participation. Equipment. League fees. Camp passes.
            Real access for real kids in our community.
          </p>
          <div style={{
            fontFamily: 'ui-monospace, monospace', fontSize: 12,
            color: '#7a6f55', marginTop: 28,
          }}>
            501(c)(3) &middot; EIN available on request &middot; All gifts tax-deductible
          </div>
        </div>

        <div style={{
          background: ink, color: '#fff',
          padding: '40px 40px',
        }}>
          <div style={{ fontFamily: 'Montserrat, sans-serif', fontWeight: 700, fontSize: 14, letterSpacing: '0.1em', textTransform: 'uppercase', color: gold, marginBottom: 22 }}>
            Choose an amount
          </div>
          <div style={{ display: 'grid', gridTemplateColumns: 'repeat(3, 1fr)', gap: 10, marginBottom: 14 }}>
            {[
              { v: '$25', sub: 'Equipment for 1 kid' },
              { v: '$50', sub: 'Half a league fee' },
              { v: '$100', sub: 'A full season' },
            ].map((b, i) => (
              <button key={b.v} style={{
                background: i === 1 ? gold : 'transparent',
                color: i === 1 ? ink : '#fff',
                border: i === 1 ? 'none' : '1px solid #333',
                padding: '20px 14px',
                fontFamily: 'Montserrat, sans-serif', fontWeight: 800, fontSize: 22,
                letterSpacing: '-0.01em', cursor: 'pointer',
                textAlign: 'left',
              }}>
                <div>{b.v}</div>
                <div style={{ fontSize: 10, fontWeight: 600, letterSpacing: '0.08em', textTransform: 'uppercase', marginTop: 6, opacity: 0.8 }}>{b.sub}</div>
              </button>
            ))}
          </div>
          <input placeholder="Other amount" style={{
            width: '100%', boxSizing: 'border-box',
            background: 'transparent', border: '1px solid #333',
            padding: '16px 14px', color: '#fff',
            fontFamily: 'Montserrat, sans-serif', fontSize: 16,
            marginBottom: 14,
          }} />
          <div style={{ display: 'flex', alignItems: 'center', gap: 8, marginBottom: 18, fontSize: 12, color: muted }}>
            <input type="checkbox" /> Make this a monthly gift
          </div>
          <a href="https://www.zeffy.com/en-US/donation-form/play-forward-2026-program-fund"
            target="_blank" rel="noopener noreferrer"
            style={{
              display: 'block', width: '100%', boxSizing: 'border-box',
              background: gold, color: ink,
              padding: '20px', border: 'none', cursor: 'pointer',
              fontFamily: 'Montserrat, sans-serif', fontWeight: 800, fontSize: 14,
              letterSpacing: '0.12em', textTransform: 'uppercase',
              textDecoration: 'none', textAlign: 'center',
            }}>Donate Now</a>
        </div>
      </section>

      {/* FOOTER */}
      <footer style={{
        background: ink, padding: '60px 56px 28px',
        borderTop: `1px solid #222`,
      }}>
        <div style={{ display: 'grid', gridTemplateColumns: '1.6fr 1fr 1fr 1fr', gap: 40, marginBottom: 50 }}>
          <div>
            <img src="assets/logo-on-dark-tight.png" alt="" style={{ height: 72, width: 'auto', marginBottom: 18 }} />
            <p style={{ fontSize: 13, color: muted, lineHeight: 1.6, maxWidth: 320 }}>
              A Central Florida 501(c)(3) building real access to sports for youth ages 5
              through 18. Orlando, Apopka, Winter Park, Altamonte Springs.
            </p>
          </div>
          {[
            { title: 'Programs', links: [['Open Field', 'programs.html#open-field'], ['Play Forward', 'programs.html#play-forward'], ['Active Roots', 'programs.html#active-roots'], ['The Training Ground', 'programs.html#training-ground']] },
            { title: 'Get Involved', links: [['Donate', 'https://www.zeffy.com/en-US/donation-form/play-forward-2026-program-fund'], ['Sponsor', 'sponsors.html'], ['Volunteer', 'get-involved.html#volunteer'], ['Enroll a kid', 'get-involved.html#enroll']] },
            { title: 'Foundation', links: [['About', 'about.html'], ['Founder', 'founder.html'], ['News', 'news.html'], ['Contact', 'contact.html']] },
          ].map(col => (
            <div key={col.title}>
              <div style={{ fontFamily: 'Montserrat, sans-serif', fontWeight: 700, fontSize: 12, letterSpacing: '0.14em', textTransform: 'uppercase', color: gold, marginBottom: 16 }}>{col.title}</div>
              {col.links.map(([l, href]) => (
                <div key={l} style={{ fontSize: 14, marginBottom: 10 }}>
                  <a href={href} style={{ color: '#ddd', textDecoration: 'none' }}>{l}</a>
                </div>
              ))}
            </div>
          ))}
        </div>
        <div style={{ borderTop: '1px solid #222', paddingTop: 20, display: 'flex', justifyContent: 'space-between', fontSize: 12, color: muted, fontFamily: 'ui-monospace, monospace' }}>
          <div>© 2026 Time to Train Athletics Foundation, Inc. · Orlando, FL</div>
          <div>info@timetotrainfoundation.org</div>
        </div>
      </footer>
    </div>
  );
};

window.LockerRoomHome = LockerRoomHome;