/* PL1 — Contact + store entry page */

function ContactPage() {
  return (
    <>
      <SiteHeader active="contact" />

      {/* PAGE HEADER */}
      <section className="section" style={{paddingBlock:"var(--s-10) var(--s-7)"}}>
        <div className="container">
          <span className="eyebrow eyebrow--accent">Contact</span>
          <h1 className="section__title" style={{fontSize:"var(--t-display)", marginTop:"var(--s-3)", maxWidth:"14ch"}}>
            Real humans. <em>Real replies.</em>
          </h1>
          <p className="section__intro" style={{marginTop:"var(--s-5)", maxWidth:"56ch"}}>
            One inbox, two coaches checking it. Most enquiries get a reply same-day —
            for trials we&apos;ll usually offer a slot inside a week.
          </p>
        </div>
      </section>

      {/* FORM + INFO */}
      <section className="section" style={{paddingTop:0}}>
        <div className="container">
          <div className="contact">
            {/* FORM */}
            <form className="form-grid" onSubmit={(e) => e.preventDefault()}>
              <div className="field--row">
                <div className="field">
                  <label htmlFor="name">Keeper&apos;s name</label>
                  <input id="name" type="text" placeholder="e.g. Sam Taylor" />
                </div>
                <div className="field">
                  <label htmlFor="age">Age group</label>
                  <select id="age" defaultValue="">
                    <option value="" disabled>Select age band</option>
                    <option>U10 (9–10)</option>
                    <option>U11 / U12</option>
                    <option>U13 / U14</option>
                    <option>U15 / U16</option>
                    <option>U17 / U18</option>
                  </select>
                </div>
              </div>
              <div className="field--row">
                <div className="field">
                  <label htmlFor="parent">Parent / guardian name</label>
                  <input id="parent" type="text" placeholder="if keeper is under 18" />
                </div>
                <div className="field">
                  <label htmlFor="email">Email</label>
                  <input id="email" type="email" placeholder="you@email.com" />
                </div>
              </div>
              <div className="field">
                <label htmlFor="reason">I&apos;m interested in…</label>
                <select id="reason" defaultValue="trial">
                  <option value="trial">A trial session</option>
                  <option>1:1 coaching</option>
                  <option>Squad clinics</option>
                  <option>Residency week</option>
                  <option>Club / squad partnerships</option>
                  <option>Bursary application</option>
                  <option>Something else</option>
                </select>
              </div>
              <div className="field">
                <label htmlFor="message">Anything we should know?</label>
                <textarea id="message" rows="5" placeholder="Current club, recent matches, what you'd like to work on…"></textarea>
              </div>
              <div style={{display:"flex", alignItems:"center", justifyContent:"space-between", gap:"12px", flexWrap:"wrap", marginTop:"var(--s-3)"}}>
                <span style={{fontSize:"12px", color:"var(--fg-subtle)", maxWidth:"34ch"}}>
                  We&apos;ll reply from a real coach&apos;s inbox within 24 hours, Mon–Fri.
                </span>
                <button type="submit" className="btn btn--primary btn--lg">Send enquiry <ArrowGlyph /></button>
              </div>
            </form>

            {/* INFO */}
            <div className="contact-info">
              <div className="contact-row">
                <div className="contact-row__icon">@</div>
                <div>
                  <div className="contact-row__label">Email</div>
                  <div className="contact-row__value">hello@pl1academy.co</div>
                </div>
              </div>
              <div className="contact-row">
                <div className="contact-row__icon">☎</div>
                <div>
                  <div className="contact-row__label">Phone &amp; whatsapp</div>
                  <div className="contact-row__value">+44 {`{number}`}</div>
                </div>
              </div>
              <div className="contact-row">
                <div className="contact-row__icon">⌂</div>
                <div>
                  <div className="contact-row__label">Train at</div>
                  <div className="contact-row__value">{`{venue name}`}<br/>{`{street, city, postcode}`}</div>
                </div>
              </div>
              <div className="contact-row" style={{borderBottom:"none"}}>
                <div className="contact-row__icon">⏱</div>
                <div>
                  <div className="contact-row__label">Coaching hours</div>
                  <div className="contact-row__value" style={{fontSize:"15px", fontWeight:500, lineHeight:1.5}}>
                    Mon–Thu &nbsp;16:30 – 21:00<br/>
                    Sat &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;08:00 – 14:00<br/>
                    Sun &nbsp;&nbsp;&nbsp;&nbsp;by appointment
                  </div>
                </div>
              </div>

              <PhotoSlot caption="map / training venue" ratio="16/10" style={{marginTop:"var(--s-3)"}} />
            </div>
          </div>
        </div>
      </section>

      <Slash />

      {/* STORE ENTRY */}
      <section className="section">
        <div className="container">
          <div className="store-card">
            <div>
              <div className="store-card__eyebrow">Kit shop · launching {`{Q4 placeholder}`}</div>
              <h2 className="store-card__title">PL1 kit — built for keepers, sold by keepers.</h2>
              <p className="store-card__copy">
                Training jerseys, glove care kits, and the limited mark tee.
                Sign up to know first when the shop opens — and PL1 members get
                a 15% standing discount.
              </p>
              <div style={{display:"flex", gap:"12px", marginTop:"var(--s-6)", flexWrap:"wrap"}}>
                <a href="#" className="btn btn--primary">Notify me <ArrowGlyph /></a>
                <a href="#" className="btn btn--ghost" style={{borderColor:"rgba(250,250,247,0.3)", color:"var(--fg-on-inverse)"}}>Preview the range</a>
              </div>
            </div>
            <div className="store-card__visual">
              <img src="assets/pl1-logo.svg" alt="" />
            </div>
          </div>
        </div>
      </section>

      {/* FAQ teaser */}
      <section className="section" style={{paddingTop:"var(--s-8)"}}>
        <div className="container">
          <div className="section__head">
            <h2 className="section__title">Common questions.</h2>
            <p className="section__intro">A handful of things parents ask in week one. If yours isn&apos;t here, the form above will reach a coach faster than calling.</p>
          </div>
          <div style={{display:"grid", gridTemplateColumns:"1fr 1fr", gap:"var(--s-5)"}}>
            <FaqItem
              q="My child is brand new to goalkeeping. Are you the right place?"
              a="Yes — about a third of new starters arrive having played outfield until last season. Our intro pathway is designed for keepers who haven't yet specialised."
            />
            <FaqItem
              q="What do they need to bring?"
              a="Boots, shinpads, water, gloves if you have them — we have loaners. We provide everything else. No academy fees, no joining kit."
            />
            <FaqItem
              q="Can I watch the session?"
              a="Yes, every session, from a designated parents' line. We don't run closed sessions for under-16s — full transparency is a safeguarding principle."
            />
            <FaqItem
              q="What happens after a trial?"
              a="A coach calls you the following week to share what we saw and what we'd suggest. No high-pressure pitch — about a quarter of trialists don't sign on and that's fine."
            />
          </div>
        </div>
      </section>

      <SiteFooter />
    </>
  );
}

function FaqItem({ q, a }) {
  return (
    <div className="card" style={{padding:"var(--s-6)"}}>
      <h3 style={{fontSize:"var(--t-h4)", fontWeight:700, letterSpacing:"-0.005em"}}>{q}</h3>
      <p style={{marginTop:"var(--s-3)", color:"var(--fg-muted)", lineHeight:"var(--lh-loose)"}}>{a}</p>
    </div>
  );
}

Object.assign(window, { ContactPage, FaqItem });