// Page components — Home, Services, Team, Contact

const { SERVICES, TEAM, REVIEWS, HOURS, FUNDS, IMG } = window.SITE;

// ─── Home ───────────────────────────────────────────────────────────
function Home({ go, openBooking }) {
  return (
    <>
      <section className="hero">
        <div className="container">
          <div className="hero-grid">
            <div className="hero-copy">
              <span className="eyebrow">Independent · Kew East · Est. 1979</span>
              <h1>Excellence in sight, <span className="it">since</span> <span className="accent">1979</span>.</h1>
              <p className="lead">An independent family optometry practice on High Street. Forty-seven years of careful, considered eye care — from your first pair of glasses to managing complex ocular disease.</p>
              <div className="hero-cta">
                <button className="btn" onClick={openBooking}>Book online <span className="arrow">→</span></button>
                <a className="btn ghost" href="tel:+61398593962">Call 9859 3962</a>
              </div>
              <div className="hero-meta">
                <div><span className="num">47</span><div className="lbl">Years in Kew East</div></div>
                <div><span className="num">2</span><div className="lbl">Optometrists on-site</div></div>
                <div><span className="num">OCT</span><div className="lbl">Diagnostic imaging</div></div>
              </div>
            </div>
            <div className="hero-img-wrap">
              <img src={IMG.hero} alt="Curated frame collection on display at Bill Cutler Optometrists" />
              <div className="badge">
                <span className="num">★ 4.9</span>
                <span className="lbl">Google · 180+ reviews</span>
              </div>
            </div>
          </div>
        </div>
      </section>

      <section className="trust">
        <div className="container">
          <div className="row">
            <span className="label">Health funds with HICAPS on-the-spot</span>
            <div className="funds">
              {FUNDS.map(f => <span key={f} className="fund">{f}</span>)}
            </div>
          </div>
        </div>
      </section>

      <section className="section">
        <div className="container">
          <div className="section-head">
            <div>
              <span className="eyebrow accent">— Our services</span>
              <h2>Six services. One careful, considered approach.</h2>
            </div>
            <p className="lead">From a routine bulk-billed eye exam to specialty work in myopia control and dry eye therapy — everything we do is delivered in-house by Bill, Melissa, or our long-tenured dispensing team.</p>
          </div>

          <div className="svc-grid">
            {SERVICES.map(s => (
              <div key={s.num} className="svc-card" onClick={() => go("services")}>
                <span className="num">{s.num}</span>
                <h3>{s.title}</h3>
                <p>{s.short}</p>
                <span className="more">Learn more <span>→</span></span>
              </div>
            ))}
          </div>
        </div>
      </section>

      <section className="section" style={{ background: "var(--bg-alt)" }}>
        <div className="container">
          <div className="split">
            <div className="split-img">
              <img src={IMG.practice} alt="Inside the Bill Cutler Optometrists practice on High Street, Kew East" />
            </div>
            <div className="split-copy">
              <span className="eyebrow accent">— The practice</span>
              <h2 style={{ marginTop: 14 }}>A genuinely independent practice — by design, not by accident.</h2>
              <p className="lead">No corporate parent, no targets on frame sales, no rotating optometrist roster. The same two people you'll see today are the same two people you'll see in five years.</p>
              <div className="stat-row">
                <div className="stat">
                  <div className="num">1979</div>
                  <div className="lbl">Bill founded the practice on High Street, Kew East</div>
                </div>
                <div className="stat">
                  <div className="num">100%</div>
                  <div className="lbl">Independently owned and operated to this day</div>
                </div>
              </div>
            </div>
          </div>
        </div>
      </section>

      <section className="section">
        <div className="container">
          <div className="section-head">
            <div>
              <span className="eyebrow accent">— Meet the team</span>
              <h2>Two optometrists. Eighty years of combined practice.</h2>
            </div>
            <p className="lead">Bill leads diagnostic and complex prescription work. Melissa leads paediatric, myopia control and ocular disease. Both see patients across general optometry.</p>
          </div>
          <div className="team-grid">
            {TEAM.map(t => (
              <div key={t.name} className="team-card">
                <div className="photo"><img src={t.img} alt={t.name} /></div>
                <h3>{t.name}</h3>
                <div className="creds">{t.creds}</div>
                <p>{t.bio}</p>
                <div className="specialties">
                  {t.chips.map(c => <span key={c} className="chip">{c}</span>)}
                </div>
              </div>
            ))}
          </div>
          <div style={{ marginTop: 36 }}>
            <button className="link-arrow" onClick={() => go("team")}>Read full bios <span>→</span></button>
          </div>
        </div>
      </section>

      <section className="section reviews">
        <div className="container">
          <div className="section-head">
            <div>
              <span className="eyebrow accent">— Patients</span>
              <h2>Three generations of Kew East families.</h2>
            </div>
            <p className="lead">Pulled live from Google. We've been the local optometrist for some families since they were children themselves — and now we look after their children.</p>
          </div>
          <div className="review-grid">
            {REVIEWS.map((r, i) => (
              <div key={i} className="review">
                <div className="stars">{"★".repeat(r.stars)}</div>
                <p>"{r.text}"</p>
                <div className="who"><span>{r.who}</span><span>{r.when}</span></div>
              </div>
            ))}
          </div>
        </div>
      </section>

      <section className="cta-band">
        <div className="container">
          <div className="row">
            <div>
              <span className="eyebrow accent" style={{ color: "rgba(255,255,255,0.6)" }}>— Book today</span>
              <h2 style={{ marginTop: 14 }}>Most appointments available within a week.</h2>
              <p>Eye exams are bulk-billed under Medicare. We'll confirm your booking by phone within one business day.</p>
            </div>
            <div className="actions">
              <button className="btn" onClick={openBooking}>Book online <span className="arrow">→</span></button>
              <a className="btn ghost" href="tel:+61398593962">Call 9859 3962</a>
            </div>
          </div>
        </div>
      </section>
    </>
  );
}

// ─── Services ───────────────────────────────────────────────────────
function Services({ openBooking }) {
  return (
    <>
      <section className="page-head">
        <div className="container">
          <span className="eyebrow accent">— Services</span>
          <h1>Comprehensive eye care, delivered in-house.</h1>
          <p className="lead">Everything from routine vision correction to advanced diagnostic imaging and specialty disease management. No external referrals required for the majority of cases.</p>
        </div>
      </section>

      <div className="container">
        {SERVICES.map((s, i) => (
          <div key={s.num} className="svc-detail">
            <div>
              <div className="num">{s.num} / 06</div>
              <h2 style={{ marginTop: 10 }}>{s.title}</h2>
            </div>
            <div className="img"><img src={s.img} alt={s.title} /></div>
            <div className="body">
              {s.body.map((p, j) => <p key={j}>{p}</p>)}
              <ul>{s.bullets.map(b => <li key={b}>{b}</li>)}</ul>
              <button className="btn ghost" style={{ marginTop: 22 }} onClick={openBooking}>Book this service <span className="arrow">→</span></button>
            </div>
          </div>
        ))}
      </div>

      <section className="cta-band">
        <div className="container">
          <div className="row">
            <div>
              <h2>Not sure which appointment you need?</h2>
              <p>Call us — we'll figure it out together. Most patients just need a comprehensive eye exam to start.</p>
            </div>
            <div className="actions">
              <button className="btn" onClick={openBooking}>Book online <span className="arrow">→</span></button>
              <a className="btn ghost" href="tel:+61398593962">Call 9859 3962</a>
            </div>
          </div>
        </div>
      </section>
    </>
  );
}

// ─── Team ───────────────────────────────────────────────────────────
function Team({ openBooking }) {
  return (
    <>
      <section className="page-head">
        <div className="container">
          <span className="eyebrow accent">— The team</span>
          <h1>Two optometrists who've actually been here a while.</h1>
          <p className="lead">No rotating locum roster. The same people examine your eyes year after year — which matters more than you'd think for catching slow-moving disease early.</p>
        </div>
      </section>

      <div className="container" style={{ paddingTop: "clamp(48px, 6vw, 80px)", paddingBottom: "clamp(48px, 6vw, 80px)" }}>
        {TEAM.map((t, i) => (
          <div key={t.name} className="split" style={{ marginBottom: 80 }}>
            <div className="split-img" style={{ aspectRatio: "4/5" }}>
              <img src={t.img} alt={t.name} />
            </div>
            <div className="split-copy">
              <span className="eyebrow accent">— {i === 0 ? "Founder & Principal" : "Optometrist"}</span>
              <h2 style={{ marginTop: 14 }}>{t.name}</h2>
              <div style={{ fontFamily:"var(--font-mono)", fontSize:12, letterSpacing:"0.12em", color:"var(--ink-muted)", marginTop: 6, marginBottom: 22 }}>{t.creds}</div>
              <p className="lead" style={{ marginBottom: 16 }}>{t.bio}</p>
              <p style={{ color:"var(--ink-soft)", fontSize:15.5, lineHeight:1.6 }}>{t.bio2}</p>
              <div className="specialties" style={{ marginTop: 24 }}>
                {t.chips.map(c => <span key={c} className="chip">{c}</span>)}
              </div>
              <button className="btn" style={{ marginTop: 28 }} onClick={openBooking}>Book with {t.name.split(" ")[0]} <span className="arrow">→</span></button>
            </div>
          </div>
        ))}
      </div>
    </>
  );
}

// ─── Contact ────────────────────────────────────────────────────────
function Contact({ openBooking }) {
  return (
    <>
      <section className="page-head">
        <div className="container">
          <span className="eyebrow accent">— Visit us</span>
          <h1>678 High Street, Kew East.</h1>
          <p className="lead">On-street parking out the front, two doors down from the post office. Tram 109 stops on the corner. Wheelchair accessible.</p>
        </div>
      </section>

      <div className="container">
        <div className="contact-grid">
          <div className="contact-info">
            <div className="block">
              <div className="lbl">Address</div>
              <div className="val">678 High Street<br/>Kew East VIC 3102</div>
            </div>
            <div className="block">
              <div className="lbl">Phone</div>
              <div className="val"><a href="tel:+61398593962">(03) 9859 3962</a></div>
            </div>
            <div className="block">
              <div className="lbl">Email</div>
              <div className="val"><a href="mailto:info@cutleroptometrists.com.au">info@cutleroptometrists.com.au</a></div>
            </div>
            <div className="block">
              <div className="lbl">Trading hours</div>
              <div className="hours">
                {HOURS.map(([d, t]) => (
                  <div key={d} className="row">
                    <span>{d}</span>
                    <span className={t === "Closed" ? "closed" : ""}>{t}</span>
                  </div>
                ))}
              </div>
            </div>
            <button className="btn" onClick={openBooking}>Book an appointment <span className="arrow">→</span></button>
          </div>

          <div>
            <div className="map">
              <iframe
                title="Map of Bill Cutler Optometrists"
                src="https://www.openstreetmap.org/export/embed.html?bbox=145.0476%2C-37.8016%2C145.0576%2C-37.7956&layer=mapnik&marker=-37.7986%2C145.0526"
                loading="lazy"
              ></iframe>
            </div>
            <h3 style={{ marginTop: 36, fontSize: 24 }}>Send us a message</h3>
            <p style={{ color:"var(--ink-soft)", fontSize:15, marginTop: 8, marginBottom: 20 }}>For non-urgent enquiries. We'll get back to you within one business day.</p>
            <form className="contact-form" onSubmit={(e) => { e.preventDefault(); alert("Thanks! We'll be in touch within one business day."); }}>
              <div>
                <label>Name</label>
                <input required placeholder="Your name" />
              </div>
              <div>
                <label>Phone or email</label>
                <input required placeholder="0412 345 678" />
              </div>
              <div className="full">
                <label>Topic</label>
                <select>
                  <option>General enquiry</option>
                  <option>Health fund question</option>
                  <option>Repair / re-lens existing frames</option>
                  <option>Specialty / myopia / dry eye</option>
                </select>
              </div>
              <div className="full">
                <label>Message</label>
                <textarea required placeholder="How can we help?"></textarea>
              </div>
              <div className="full">
                <button type="submit" className="btn">Send message <span className="arrow">→</span></button>
              </div>
            </form>
          </div>
        </div>
      </div>
    </>
  );
}

window.PAGES = { Home, Services, Team, Contact };