/* Players, News, About, Join, Sponsors, Footer */

function Players() {
  const players = [
    { num: "07", name: "Tom Patel", role: "Batter · Captain", rn: "612 runs", avg: "55.6", extra: "HS 128*" },
    { num: "11", name: "Jake Mitchell", role: "Fast Bowler", rn: "34 wkts", avg: "14.2", extra: "5/23" },
    { num: "23", name: "Liam O'Connor", role: "All-Rounder", rn: "389 runs", avg: "32.4", extra: "22 wkts" },
    { num: "04", name: "Ben Harris", role: "Wicket-Keeper", rn: "421 runs", avg: "38.3", extra: "28 dis." },
    { num: "18", name: "Sam Rogic", role: "Spin Bowler", rn: "26 wkts", avg: "16.8", extra: "4/18" },
    { num: "09", name: "Noah Whitfield", role: "Top Order", rn: "478 runs", avg: "43.4", extra: "HS 102" },
    { num: "14", name: "Ethan Ryan", role: "Middle Order", rn: "288 runs", avg: "28.8", extra: "HS 74" },
    { num: "02", name: "Dylan Caruso", role: "Opening Bat", rn: "501 runs", avg: "41.7", extra: "HS 112" },
  ];

  return (
    <section className="section-pad" id="players" style={{background:'var(--ink-2)', borderTop:'1px solid var(--line)', borderBottom:'1px solid var(--line)'}}>
      <div className="wrap">
        <div className="section-head">
          <div>
            <div className="section-index">§ 04 / PLAYERS</div>
            <h2>Meet the <span className="gold">Hornets</span>.</h2>
          </div>
          <p className="desc">1st XI roster · Season 25/26. Click any player for full stats, highlights, and match-by-match performance.</p>
        </div>

        <div className="players-grid">
          {players.map(p => (
            <div className="player-card" key={p.num}>
              <div className="placeholder"><span>PLAYER PHOTO · {p.name.toUpperCase()}</span></div>
              <div className="num-bg">{p.num}</div>
              <div className="info">
                <div className="role">{p.role}</div>
                <div className="nm">{p.name}</div>
                <div className="stats">
                  <span><b>{p.rn}</b></span>
                  <span>AVG <b>{p.avg}</b></span>
                  <span><b>{p.extra}</b></span>
                </div>
              </div>
            </div>
          ))}
        </div>
      </div>
    </section>
  );
}

function News() {
  const items = [
    { cat: "Match Report · 1st XI", title: "Hornets sting Gisborne by 87 runs to go top", excerpt: "Patel's unbeaten 102 and a Mitchell five-for sealed an emphatic win at Langama that puts Sunbury a game clear.", date: "18 APR 2026", featured: true },
    { cat: "Junior Cricket", title: "U15s book semi-final spot with six straight", excerpt: "Harris's young Hornets haven't lost since January and now face Kyneton in the preliminary final.", date: "16 APR 2026" },
    { cat: "Club News", title: "Woolworths Blasters rego now open", excerpt: "Seven-week program for 5–10 year olds kicks off 4 May. Bats, jerseys and Saturday smiles included.", date: "11 APR 2026" },
  ];

  return (
    <section className="section-pad" id="news">
      <div className="wrap">
        <div className="section-head">
          <div>
            <div className="section-index">§ 05 / NEWS</div>
            <h2>From the <span className="gold">Hive</span>.</h2>
          </div>
          <p className="desc">Match reports, milestones and behind-the-boundary stories. Published by the club, for the club.</p>
        </div>

        <div className="news-grid">
          {items.map((n, i) => (
            <div key={i} className={"news-card" + (n.featured ? " featured" : "")}>
              <div className="img"><span className="ph">ARTICLE IMAGERY</span></div>
              <div className="body">
                <div className="cat">{n.cat}</div>
                <h3>{n.title}</h3>
                <p className="excerpt">{n.excerpt}</p>
                <div className="date">{n.date} · 3 MIN READ</div>
              </div>
            </div>
          ))}
        </div>
      </div>
    </section>
  );
}

function About() {
  return (
    <section className="section-pad" id="about" style={{background:'var(--ink-2)', borderTop:'1px solid var(--line)', borderBottom:'1px solid var(--line)'}}>
      <div className="wrap">
        <div className="section-head">
          <div>
            <div className="section-index">§ 06 / ABOUT</div>
            <h2>Half a century<br/>of <span className="gold">black & gold</span>.</h2>
          </div>
        </div>

        <div className="about-grid">
          <div className="about-text">
            <p className="lead">
              The Sunbury United Cricket Club was founded in 1973, and since then has been one of the most successful cricket clubs within the Gisborne District Cricket Association.
            </p>
            <p>
              Our home is Langama Park on Mitchells Lane, which we share with the Sunbury United Soccer and Rugby clubs. Together we form one of Victoria's most vibrant community sporting precincts.
            </p>
            <p>
              Four senior teams. Eight junior teams — Under 11s, 13s, 15s and 17s. The Woolworths Junior Blasters and Master Blasters for 5–10 year olds. Around 155 Hornets every season, playing every Saturday from October through March.
            </p>
            <p style={{color:'var(--cream-dim)', fontSize:14, marginTop:30}}>
              A detailed history of the club is coming soon. Stay tuned — we've got 50+ years of stories to tell.
            </p>
          </div>
          <div className="about-stats">
            <div className="cell"><div className="n">1973</div><div className="l">Founded</div></div>
            <div className="cell"><div className="n">155+</div><div className="l">Members</div></div>
            <div className="cell"><div className="n">12</div><div className="l">Teams</div></div>
            <div className="cell"><div className="n">50+</div><div className="l">Years of Cricket</div></div>
            <div className="cell"><div className="n">4</div><div className="l">Senior Sides</div></div>
            <div className="cell"><div className="n">8</div><div className="l">Junior Sides</div></div>
          </div>
        </div>
      </div>
    </section>
  );
}

function Join() {
  const [submitted, setSubmitted] = React.useState(false);
  return (
    <section className="join" id="join">
      <div className="bg-text">JOIN THE HIVE</div>
      <div className="wrap join-inner">
        <div>
          <div className="eyebrow" style={{color:'var(--ink)'}}>§ 07 / JOIN</div>
          <h2>Pull on the black & gold.</h2>
          <p>
            Whether you're five or fifty-five, there's a Sunbury United side for you. Juniors, seniors, women, Blasters — rego is open now for the 26/27 season.
          </p>
          <div style={{display:'flex', gap:30, marginTop:30, flexWrap:'wrap'}}>
            <div><div style={{fontFamily:'JetBrains Mono', fontSize:10, letterSpacing:'0.18em', textTransform:'uppercase', opacity:0.7}}>Training</div><div style={{fontFamily:'Oswald', fontSize:20, textTransform:'uppercase', marginTop:4}}>Tue + Thu · 5:30pm</div></div>
            <div><div style={{fontFamily:'JetBrains Mono', fontSize:10, letterSpacing:'0.18em', textTransform:'uppercase', opacity:0.7}}>First Session</div><div style={{fontFamily:'Oswald', fontSize:20, textTransform:'uppercase', marginTop:4}}>Free. No Gear Needed.</div></div>
          </div>
        </div>
        <form className="join-form" onSubmit={(e) => { e.preventDefault(); setSubmitted(true); }}>
          <div className="warning-tape"></div>
          <h3>Register Your Interest</h3>
          {submitted ? (
            <div style={{padding:'20px 0', textAlign:'center'}}>
              <div style={{fontFamily:'Oswald', fontSize:40, color:'var(--gold)', lineHeight:1}}>WELCOME,<br/>HORNET.</div>
              <p style={{marginTop:14, color:'var(--cream-dim)', fontSize:14}}>We'll be in touch within 48 hours. Bring a water bottle.</p>
            </div>
          ) : (
            <>
              <div className="row"><label>Full Name</label><input type="text" defaultValue="" placeholder="Your name" required /></div>
              <div className="row"><label>Email</label><input type="email" placeholder="you@example.com" required /></div>
              <div className="row"><label>I'm Interested In</label>
                <select>
                  <option>Senior cricket (15+)</option>
                  <option>Junior cricket (U11 – U17)</option>
                  <option>Woolworths Blasters (5–10)</option>
                  <option>Volunteering / coaching</option>
                </select>
              </div>
              <button type="submit">Send it →</button>
            </>
          )}
        </form>
      </div>
    </section>
  );
}

function Sponsors() {
  return (
    <section className="sponsors">
      <div className="wrap">
        <div className="sponsor-head">
          <div className="label">§ 08 / SPONSORS</div>
          <h3>Powering the Hornets.</h3>
        </div>
        <div className="sponsor-row">
          <div className="sponsor-cell"><img src="assets/rosenthal.png" alt="Rosenthal" /></div>
          <div className="sponsor-cell"><img src="assets/langama.png" alt="Langama Park" /></div>
          <div className="sponsor-cell"><img src="assets/jem.png" alt="JEM Cricket" /></div>
        </div>
      </div>
    </section>
  );
}

function Footer() {
  return (
    <footer>
      <div className="wrap">
        <div className="footer-grid">
          <div className="footer-brand">
            <img src="assets/logo.png" alt="" />
            <div className="tag">Sunbury United<br/><span style={{color:'var(--gold)'}}>Cricket Club</span></div>
            <p>One of the Gisborne District's most successful cricket clubs. Est. 1973 at Langama Park, Sunbury, Victoria.</p>
          </div>
          <div className="footer-col">
            <h5>Club</h5>
            <a href="#fixtures">Fixtures</a>
            <a href="#teams">Teams</a>
            <a href="#ladder">Ladder</a>
            <a href="#players">Players</a>
            <a href="#news">News</a>
          </div>
          <div className="footer-col">
            <h5>Visit</h5>
            <p>Langama Park<br/>109 Mitchells Ln<br/>Sunbury VIC 3429</p>
          </div>
          <div className="footer-col">
            <h5>Contact</h5>
            <a href="tel:0397406511">03 9740 6511</a>
            <a href="mailto:sunburyunitedcricketclub@gmail.com">sunburyunitedcricketclub<br/>@gmail.com</a>
            <p>PO Box 676<br/>Sunbury VIC 3429</p>
          </div>
        </div>
        <div className="footer-bottom">
          <div>© 2026 SUNBURY UNITED CRICKET CLUB · EST 1973</div>
          <div>BLACK & GOLD · FEAR THE HORNETS</div>
        </div>
      </div>
    </footer>
  );
}

Object.assign(window, { Players, News, About, Join, Sponsors, Footer });