// sections2.jsx — why-us, how-it-works, gallery, testimonials, footer
const { useState: useState2 } = React;

/* ---------- FOR THE NERVOUS ONES ---------- */
function WhyUs() {
  const chips = ["Short sessions", "Chin-scratch breaks", "No rushing, ever"];
  return (
    <section id="why" style={{ padding: "92px 0", background: "var(--card)" }}>
      <div className="wrap" style={{ display: "grid", gridTemplateColumns: "0.9fr 1.1fr", gap: 56, alignItems: "center" }} >
        <div className="why-media">
          <Reveal><PH img="https://images.pexels.com/photos/6816850/pexels-photo-6816850.jpeg?auto=compress&cs=tinysrgb&w=1600" label="calm dog being groomed" style={{ height: 250, borderRadius: "var(--radius)", marginBottom: 16 }} /></Reveal>
          <div style={{ display: "grid", gridTemplateColumns: "1fr 1fr", gap: 16 }}>
            <Reveal delay={90}><PH img="https://images.pexels.com/photos/8434641/pexels-photo-8434641.jpeg?auto=compress&cs=tinysrgb&w=1600" label="treat break" style={{ height: 180, borderRadius: "var(--radius)" }} /></Reveal>
            <Reveal delay={150}><PH img="https://images.pexels.com/photos/5731866/pexels-photo-5731866.jpeg?auto=compress&cs=tinysrgb&w=1600" label="happy + relaxed" style={{ height: 180, borderRadius: "var(--radius)" }} /></Reveal>
          </div>
        </div>
        <div>
          <Reveal><span className="eyebrow">For the nervous ones</span></Reveal>
          <Reveal delay={80}><h2 style={{ fontSize: "clamp(32px, 4.2vw, 50px)", marginTop: 16 }}>We take it slow.</h2></Reveal>
          <Reveal delay={140}>
            <p style={{ fontSize: 19, lineHeight: 1.62, color: "var(--ink-soft)", marginTop: 22, maxWidth: 520 }}>
              Anxious dog? Tell us when you book. We'll take it slow, work in short sessions, and break for chin scratches. The Yelp reviews aren't lying — we'd rather take an extra 10 minutes than rush a scared pup.
            </p>
          </Reveal>
          <Reveal delay={200}>
            <div style={{ display: "flex", flexWrap: "wrap", gap: 10, marginTop: 26 }}>
              {chips.map(c => (
                <span key={c} style={{ display: "inline-flex", alignItems: "center", gap: 9, fontSize: 13.5, fontWeight: 600, color: "var(--accent-ink)", background: "var(--paper)", border: "1px solid var(--line)", borderRadius: 999, padding: "8px 15px" }}>
                  <span style={{ width: 7, height: 7, borderRadius: 999, background: "var(--accent)" }}></span>{c}
                </span>
              ))}
            </div>
          </Reveal>
        </div>
      </div>
      <style>{`@media(max-width:880px){#why .wrap{grid-template-columns:1fr !important; gap:38px !important;}}`}</style>
    </section>
  );
}

/* ---------- HOW IT WORKS ---------- */
function HowItWorks({ onBook }) {
  const steps = [
    { n: "01", t: "Book online", d: "Pick a service, tell us about your dog, and choose a time that works for you." },
    { n: "02", t: "Drop off", d: "Bring them to the shop at 8980 Number 3 Rd, Unit 110 in Richmond." },
    { n: "03", t: "We groom — slowly", d: "One calm, unhurried session, with short breaks for nervous pups." },
    { n: "04", t: "Pick up a happy dog", d: "Collect a fresh, relaxed, good-smelling pup." },
  ];
  return (
    <section id="how" style={{ padding: "92px 0" }}>
      <div className="wrap">
        <Reveal style={{ textAlign: "center" }}>
          <span className="eyebrow" style={{ justifyContent: "center" }}>How it works</span>
          <h2 style={{ fontSize: "clamp(32px, 4.4vw, 54px)", marginTop: 16 }}>Four easy steps to a fresh pup.</h2>
        </Reveal>
        <div style={{ display: "grid", gridTemplateColumns: "repeat(4,1fr)", gap: 18, marginTop: 50 }} className="how-grid">
          {steps.map((s, i) => (
            <Reveal key={i} delay={i * 90}>
              <div style={{ borderTop: "2px solid var(--accent)", paddingTop: 20, height: "100%" }}>
                <span style={{ fontFamily: "var(--font-display)", fontSize: 40, color: "var(--accent)", display: "block", lineHeight: 1 }}>{s.n}</span>
                <h3 style={{ fontSize: 21, marginTop: 16 }}>{s.t}</h3>
                <p style={{ fontSize: 14.5, lineHeight: 1.55, color: "var(--ink-soft)", marginTop: 10 }}>{s.d}</p>
              </div>
            </Reveal>
          ))}
        </div>
        <Reveal delay={120} style={{ textAlign: "center", marginTop: 48 }}>
          <button className="btn btn-primary" style={{ padding: "16px 30px", fontSize: 16 }} onClick={() => onBook()}>Book a spot →</button>
        </Reveal>
      </div>
      <style>{`@media(max-width:880px){.how-grid{grid-template-columns:repeat(2,1fr) !important; gap:30px 18px !important;}}@media(max-width:520px){.how-grid{grid-template-columns:1fr !important;}}`}</style>
    </section>
  );
}

/* ---------- GALLERY ---------- */
function Gallery() {
  const shots = [
    { l: "doodle — before/after", h: 320, img: "https://images.pexels.com/photos/19145894/pexels-photo-19145894.jpeg?auto=compress&cs=tinysrgb&w=1200" }, { l: "shih tzu puppy cut", h: 320, img: "https://images.pexels.com/photos/12283472/pexels-photo-12283472.jpeg?auto=compress&cs=tinysrgb&w=1200" },
    { l: "golden de-shed", h: 320, img: "https://images.pexels.com/photos/1108099/pexels-photo-1108099.jpeg?auto=compress&cs=tinysrgb&w=1200" }, { l: "schnauzer tidy", h: 320, img: "https://images.pexels.com/photos/6816850/pexels-photo-6816850.jpeg?auto=compress&cs=tinysrgb&w=1200" },
    { l: "the bath", h: 320, img: "https://images.pexels.com/photos/19145882/pexels-photo-19145882.jpeg?auto=compress&cs=tinysrgb&w=1200" }, { l: "happy client + dog", h: 320, img: "https://images.pexels.com/photos/5731866/pexels-photo-5731866.jpeg?auto=compress&cs=tinysrgb&w=1200" },
  ];
  return (
    <section style={{ padding: "0 0 92px" }}>
      <div className="wrap">
        <Reveal>
          <div style={{ display: "flex", justifyContent: "space-between", alignItems: "flex-end", flexWrap: "wrap", gap: 14, marginBottom: 30 }}>
            <h2 style={{ fontSize: "clamp(30px, 4vw, 46px)" }}>Fresh out of the tub.</h2>
            <a href="#" style={{ fontSize: 13, fontFamily: "ui-monospace, Menlo, monospace", color: "var(--ink-soft)" }}>[ link your gallery / social ]</a>
          </div>
        </Reveal>
        <div style={{ display: "grid", gridTemplateColumns: "repeat(3,1fr)", gap: 14 }} className="gal-grid">
          {shots.map((s, i) => (
            <Reveal key={i} delay={(i % 3) * 70}><PH img={s.img} label={s.l} style={{ height: s.h, borderRadius: "var(--radius)" }} /></Reveal>
          ))}
        </div>
      </div>
      <style>{`@media(max-width:760px){.gal-grid{grid-template-columns:repeat(2,1fr) !important;}}`}</style>
    </section>
  );
}

/* ---------- REVIEWS ---------- */
function Testimonials() {
  return (
    <section id="reviews" style={{ padding: "92px 0", background: "var(--ink)", color: "var(--paper)" }}>
      <div className="wrap">
        <Reveal style={{ textAlign: "center" }}>
          <div style={{ display: "flex", gap: 4, justifyContent: "center", color: "var(--butter)", marginBottom: 16 }}>
            {[0,1,2,3,4].map(i => <span key={i}>{Icon.star({ ...iconProps, width: 22, height: 22, stroke: "none", fill: i < 4 ? "var(--butter)" : "color-mix(in srgb, var(--butter) 45%, transparent)" })}</span>)}
          </div>
          <h2 style={{ fontSize: "clamp(30px, 4vw, 50px)", color: "#fff" }}>4.6★ on 35 Google reviews.</h2>
          <p style={{ fontSize: 16.5, lineHeight: 1.55, color: "color-mix(in srgb, var(--paper) 68%, transparent)", marginTop: 14, maxWidth: 480, marginLeft: "auto", marginRight: "auto" }}>
            Richmond dog folks keep coming back. Drop your favourite real reviews into these cards before the pitch goes out.
          </p>
        </Reveal>
        <div style={{ display: "grid", gridTemplateColumns: "repeat(3,1fr)", gap: 18, marginTop: 50 }} className="rev-grid">
          {[0,1,2].map(i => (
            <Reveal key={i} delay={i * 90}>
              <div style={{ background: "color-mix(in srgb, var(--paper) 7%, transparent)", border: "1px dashed color-mix(in srgb, var(--paper) 28%, transparent)", borderRadius: "var(--radius)", padding: "28px 26px", height: "100%", display: "flex", flexDirection: "column", justifyContent: "center", minHeight: 180 }}>
                <span style={{ fontFamily: "ui-monospace, Menlo, monospace", fontSize: 12.5, letterSpacing: "0.02em", color: "color-mix(in srgb, var(--paper) 60%, transparent)", lineHeight: 1.5 }}>
                  [ paste a real Google review here — quote + reviewer first name ]
                </span>
              </div>
            </Reveal>
          ))}
        </div>
        <Reveal delay={120} style={{ textAlign: "center", marginTop: 40 }}>
          <a href="#" className="btn" style={{ background: "#fff", color: "var(--ink)", padding: "15px 26px", fontSize: 15.5 }}>Read all 35 reviews on Google →</a>
        </Reveal>
      </div>
      <style>{`@media(max-width:820px){.rev-grid{grid-template-columns:1fr !important; max-width:520px; margin-left:auto; margin-right:auto;}}`}</style>
    </section>
  );
}

/* ---------- VISIT / FOOTER ---------- */
function Footer({ onBook }) {
  return (
    <footer id="visit" style={{ background: "var(--bg)" }}>
      <div className="wrap" style={{ paddingTop: 92, paddingBottom: 40 }}>
        <div style={{ display: "grid", gridTemplateColumns: "1.1fr 0.9fr", gap: 50, alignItems: "center", background: "var(--accent)", borderRadius: "calc(var(--radius) + 8px)", padding: 0, overflow: "hidden" }} className="cta-block">
          <div style={{ padding: "54px 50px", color: "#fff" }}>
            <Reveal>
              <h2 style={{ fontSize: "clamp(32px, 4vw, 50px)", color: "#fff" }}>Ready to spoil your dog?</h2>
              <p style={{ fontSize: 17, lineHeight: 1.55, marginTop: 16, color: "rgba(255,255,255,0.9)", maxWidth: 420 }}>
                Book your spot online in under a minute — pick a service and a time that works.
              </p>
              <div style={{ display: "flex", gap: 12, marginTop: 28, flexWrap: "wrap" }}>
                <button className="btn" style={{ background: "#fff", color: "var(--accent-ink)", padding: "16px 28px", fontSize: 16 }} onClick={() => onBook()}>Book a spot →</button>
                <a href="tel:+16042717387" className="btn" style={{ background: "rgba(255,255,255,0.16)", color: "#fff", padding: "16px 26px", fontSize: 16, border: "1px solid rgba(255,255,255,0.4)" }}>Call (604) 271-7387</a>
              </div>
            </Reveal>
          </div>
          <iframe
            title="Map — My Dog House Grooming, 8980 Number 3 Rd, Richmond BC"
            src="https://maps.google.com/maps?q=8980+Number+3+Rd+Richmond+BC&output=embed&z=15"
            width="100%"
            height="100%"
            frameBorder="0"
            loading="lazy"
            allowFullScreen
            style={{ border: 0, display: "block", width: "100%", height: "100%", minHeight: 260 }}
          ></iframe>
        </div>

        <div style={{ display: "grid", gridTemplateColumns: "1.4fr 1fr 1fr 1fr", gap: 30, marginTop: 64 }} className="foot-grid">
          <div>
            <div style={{ display: "flex", alignItems: "center", gap: 11, marginBottom: 16 }}>
              <span style={{ width: 38, height: 38, borderRadius: 11, background: "var(--accent)", color: "#fff", display: "grid", placeItems: "center" }}>{Icon.paw({ ...iconProps, width: 22, height: 22, stroke: "#fff" })}</span>
              <span style={{ fontFamily: "var(--font-display)", fontSize: 19, fontWeight: 600 }}>My Dog House Grooming</span>
            </div>
            <p style={{ fontSize: 14.5, lineHeight: 1.6, color: "var(--ink-soft)", maxWidth: 300 }}>Small-batch, gentle dog grooming on Number 3 Rd in Richmond, BC.</p>
          </div>
          <div>
            <div className="foot-h">Visit</div>
            <p className="foot-l">8980 Number 3 Rd, Unit 110<br/>Richmond, BC V6Y 2E8</p>
            <a className="foot-l" href="https://www.google.com/maps/dir/?api=1&destination=8980%20Number%203%20Rd%2C%20Richmond%2C%20BC%20V6Y%202E8" target="_blank" rel="noopener" style={{ display: "inline-block", marginTop: 10, color: "var(--accent-ink)", fontWeight: 600 }}>Get directions →</a>
          </div>
          <div>
            <div className="foot-h">Hours</div>
            <p className="foot-l" style={{ fontFamily: "ui-monospace, Menlo, monospace", fontSize: 12.5 }}>[ add opening hours ]</p>
          </div>
          <div>
            <div className="foot-h">Get in touch</div>
            <p className="foot-l">(604) 271-7387<br/><span style={{ fontFamily: "ui-monospace, Menlo, monospace", fontSize: 12.5 }}>[ add email ]</span></p>
            <p className="foot-l" style={{ marginTop: 10, fontFamily: "ui-monospace, Menlo, monospace", fontSize: 12.5 }}>[ add social links ]</p>
          </div>
        </div>
        <div style={{ display: "flex", justifyContent: "space-between", flexWrap: "wrap", gap: 10, marginTop: 50, paddingTop: 24, borderTop: "1px solid var(--line)", fontSize: 13, color: "var(--ink-soft)" }}>
          <span>© 2026 My Dog House Grooming. Made with care in Richmond.</span>
          <span>Concept redesign — pitch preview</span>
        </div>
      </div>
      <style>{`
        .foot-h{font-weight:700;font-size:13px;letter-spacing:0.04em;text-transform:uppercase;margin-bottom:12px;}
        .foot-l{font-size:14.5px;line-height:1.6;color:var(--ink-soft);}
        @media(max-width:880px){.cta-block{grid-template-columns:1fr !important;} .cta-block .ph{min-height:200px !important;} .foot-grid{grid-template-columns:1fr 1fr !important; gap:30px 20px !important;}}
      `}</style>
    </footer>
  );
}

Object.assign(window, { WhyUs, HowItWorks, Gallery, Testimonials, Footer });