/* global React, window */
// Shampooch — About, Reviews, FAQ, Contact, Book pages.
const Do = window.SHAMPOOCH_DATA;
const { useState: useStateO, useEffect: useEffectO } = React;

// ----- About -----
function AboutPage() {
  return (
    <window.PageWrap>
      <section className="page-hero">
        <div className="shell">
          <div className="crumbs"><a href="#/">Home</a><span>/</span><span>About</span></div>
          <div style={{ display: "grid", gridTemplateColumns: "1fr", gap: 40, marginTop: 22 }} className="abt-grid">
            <div>
              <span className="h-eyebrow">A family-run story</span>
              <h1 className="display">For over 20 years &mdash; one bath, one belly-rub at a time.</h1>
              <p className="lede" style={{ marginTop: 8 }}>
                Shampooch started in a single bright-pink van, parked outside Dubai villas, scrubbing the city&rsquo;s
                dogs one driveway at a time. The van&rsquo;s still here. The salon, the daycare, the boutique hotel
                and the retail line all grew up around it. The team didn&rsquo;t.
              </p>
              <p style={{ marginTop: 12, color: "var(--slate)" }}>
                We&rsquo;re still family. We still treat every dog like they live with us &mdash; because plenty of them
                practically do. Hairy, opinionated family.
              </p>
            </div>
            <div className="photo wide" style={{ aspectRatio: "5/4" }}>
              <img src="media/facility-dsc07857.webp" alt="Shampooch salon interior, pink-and-yellow walls" />
            </div>
          </div>
        </div>
        <style>{`@media (min-width: 880px) { .abt-grid { grid-template-columns: 1.1fr 1fr !important; gap: 56px !important; }}`}</style>
      </section>

      {/* Story strip */}
      <section className="section">
        <div className="shell">
          <div style={{ display: "grid", gridTemplateColumns: "1fr", gap: 28 }} className="abt-pillars">
            {[
              { num: "20+", label: "years caring for Dubai's dogs" },
              { num: "6", label: "in-house services, one location" },
              { num: "1", label: "very pink van where it all began" },
              { num: "0", label: "box dryers — ever" },
            ].map((stat) => (
              <div key={stat.label} style={{ background: "var(--cream-2)", padding: 28, borderRadius: 24 }}>
                <div style={{ fontFamily: "var(--font-display)", fontSize: "clamp(48px, 6vw, 84px)", fontWeight: 700, color: "var(--pooch-pink-deep)", lineHeight: 1 }}>{stat.num}</div>
                <div style={{ marginTop: 8, color: "var(--ink)", fontWeight: 600 }}>{stat.label}</div>
              </div>
            ))}
          </div>
        </div>
        <style>{`@media (min-width: 760px) { .abt-pillars { grid-template-columns: repeat(4, 1fr) !important; }}`}</style>
      </section>

      {/* Quote block + image */}
      <section className="section" style={{ background: "var(--ink)", color: "var(--cream)" }}>
        <div className="shell" style={{ display: "grid", gridTemplateColumns: "1fr", gap: 40 }} >
          <div>
            <p className="big-quote" style={{ color: "var(--cream)" }}>
              At Shampooch, dogs aren&rsquo;t customers. They&rsquo;re family. Hairy, opinionated family.
            </p>
            <div style={{ marginTop: 24, color: "rgba(251,245,236,0.7)" }}>&mdash; The Shampooch team</div>
          </div>
        </div>
      </section>

      {/* Photo collage */}
      <section className="section">
        <div className="shell">
          <div className="sec-head">
            <div className="left">
              <span className="h-eyebrow">Inside the salon</span>
              <h2 className="display">A working tour, no scheduled visit needed.</h2>
            </div>
          </div>
          <div className="gallery-grid">
            {["facility-dsc07240.webp", "facility-dsc08720.webp", "facility-dsc07496.webp", "facility-dsc08008.webp",
              "facility-dsc08532.webp", "facility-dsc08897.webp", "spotlight-grooming.webp", "facility-dsc07857.webp"].map(src => (
                <div className="photo square" key={src}><img src={`media/${src}`} alt="Inside Shampooch salon" loading="lazy" /></div>
              ))}
          </div>
        </div>
      </section>

      {/* Team placeholder */}
      <section className="section-tight">
        <div className="shell">
          <div className="card" style={{ padding: "36px 28px", display: "grid", gridTemplateColumns: "1fr", gap: 20, alignItems: "center" }}>
            <div>
              <span className="h-eyebrow">Meet the groomers</span>
              <h3 style={{ fontFamily: "var(--font-display)", fontSize: 28, margin: "6px 0 8px" }}>Coming soon — with consent.</h3>
              <p style={{ color: "var(--slate)", margin: 0, maxWidth: "60ch" }}>
                Our team has been here for years and they&rsquo;re the reason your dog comes home happy. We&rsquo;re
                gathering proper portraits and short bios &mdash; published only with each groomer&rsquo;s written
                consent. Want to come meet them in person? <a href="#/contact" className="link">Drop by the salon</a>.
              </p>
            </div>
          </div>
        </div>
      </section>
    </window.PageWrap>
  );
}

// ----- Reviews -----
function ReviewsPage() {
  return (
    <window.PageWrap>
      <section className="page-hero">
        <div className="shell">
          <div className="crumbs"><a href="#/">Home</a><span>/</span><span>Reviews & Trust</span></div>
          <span className="h-eyebrow" style={{ display: "block", marginTop: 14 }}>Reviews &amp; trust</span>
          <h1 className="display">Stars are nice. Standards are nicer.</h1>
          <p className="lede" style={{ marginTop: 8 }}>
            We&rsquo;ll wire up the live Google rating once we&rsquo;ve verified the count with the client &mdash; we&rsquo;d
            rather show you the actual safety policies your dog will benefit from.
          </p>
        </div>
      </section>

      <section className="section-tight">
        <div className="shell">
          <window.VerifiedQuote />
        </div>
      </section>

      <section className="section" style={{ background: "var(--cream-2)" }}>
        <div className="shell">
          <div className="sec-head">
            <div className="left">
              <span className="h-eyebrow">Our safety &amp; hygiene standards</span>
              <h2 className="display">Every dog. Every visit. Same checklist.</h2>
              <p className="lede" style={{ marginTop: 8 }}>
                These are the verifiable policies your dog will experience &mdash; not marketing copy.
              </p>
            </div>
          </div>
          <div className="safety-grid">
            {Do.safety.map(s => (
              <div className="safety-card" key={s.title}>
                <div className="icon-circle"><window.Icon name="shield" /></div>
                <h4>{s.title}</h4>
                <p>{s.body}</p>
              </div>
            ))}
          </div>
        </div>
      </section>

      <section className="section">
        <div className="shell">
          <div className="card" style={{ padding: 28, display: "grid", gridTemplateColumns: "1fr", gap: 18 }}>
            <div>
              <span className="h-eyebrow">Live Google reviews</span>
              <h3 style={{ fontFamily: "var(--font-display)", fontSize: 28, margin: "8px 0 8px" }}>Coming soon &mdash; properly.</h3>
              <p style={{ color: "var(--slate)", margin: 0, maxWidth: "60ch" }}>
                We&rsquo;re holding off on publishing a star count and review widget until we&rsquo;ve confirmed the
                exact Google rating from a single authoritative source. No fake numbers. Want to leave us a review?
                <a className="link" style={{ marginLeft: 6 }}
                   href={`https://www.google.com/maps/search/?api=1&query=${encodeURIComponent(Do.contact.mapsQuery)}`}
                   target="_blank" rel="noreferrer">
                  Find us on Google Maps
                </a>.
              </p>
            </div>
          </div>
        </div>
      </section>
    </window.PageWrap>
  );
}

// ----- FAQ -----
function FaqAccordion({ items }) {
  const [open, setOpen] = useStateO(0);
  return (
    <div>
      {items.map((it, i) => (
        <div key={i} className={`acc-item ${open === i ? "open" : ""}`}>
          <button className="acc-trigger" onClick={() => setOpen(open === i ? -1 : i)} aria-expanded={open === i}>
            <span>{it.q}</span>
            <span className="plus">+</span>
          </button>
          <div className="acc-body"><p style={{ margin: "0 60px 0 0" }}>{it.a}</p></div>
        </div>
      ))}
    </div>
  );
}

function FaqPage() {
  return (
    <window.PageWrap>
      <section className="page-hero">
        <div className="shell">
          <div className="crumbs"><a href="#/">Home</a><span>/</span><span>FAQ</span></div>
          <span className="h-eyebrow" style={{ display: "block", marginTop: 14 }}>Frequently Asked</span>
          <h1 className="display">Honest answers, no fluff dryer.</h1>
          <p className="lede" style={{ marginTop: 8 }}>
            Real questions from real pet parents &mdash; straight from our salon counter and the booking line.
          </p>
        </div>
      </section>

      <section className="section">
        <div className="shell" style={{ maxWidth: 900 }}>
          {Do.faqs.map((group, gi) => (
            <div key={group.group} style={{ marginBottom: 64 }}>
              <h2 className="display" style={{ fontSize: "clamp(24px, 3vw, 36px)", marginBottom: 8 }}>
                <span style={{
                  display: "inline-block", padding: "4px 14px", borderRadius: 999,
                  background: gi === 0 ? "var(--pooch-pink-soft)" : "var(--pooch-yellow-soft)",
                  color: gi === 0 ? "var(--pooch-pink-deep)" : "#6B4D00",
                  fontSize: 14, marginRight: 10, verticalAlign: "middle",
                }}>{group.group}</span>
              </h2>
              <FaqAccordion items={group.items} />
            </div>
          ))}
          <div className="card" style={{ padding: 28, marginTop: 24 }}>
            <h3 style={{ fontFamily: "var(--font-display)", fontSize: 22, margin: "0 0 6px" }}>Question we didn&rsquo;t answer?</h3>
            <p style={{ color: "var(--slate)", margin: "0 0 16px" }}>
              Easiest is WhatsApp &mdash; we usually reply within the hour during salon hours.
            </p>
            <div style={{ display: "flex", gap: 10, flexWrap: "wrap" }}>
              <a className="btn btn-pink" href={window.waLink("Hi Shampooch! I had a question…")} target="_blank" rel="noreferrer"><window.Icon name="wa" /> Ask on WhatsApp</a>
              <a className="btn btn-ghost" href={`mailto:${Do.contact.email}`}><window.Icon name="mail" /> Email us</a>
            </div>
          </div>
        </div>
      </section>
    </window.PageWrap>
  );
}

// ----- Contact -----
function ContactPage() {
  return (
    <window.PageWrap>
      <section className="page-hero">
        <div className="shell">
          <div className="crumbs"><a href="#/">Home</a><span>/</span><span>Contact</span></div>
          <div style={{ display: "grid", gridTemplateColumns: "1fr", gap: 40, marginTop: 14 }} className="contact-grid">
            <div>
              <span className="h-eyebrow">Visit · Call · WhatsApp</span>
              <h1 className="display">We&rsquo;re on Al Wasl Road &mdash; the pink-and-yellow shopfront, you can&rsquo;t miss it.</h1>
              <div style={{ display: "grid", gap: 22, marginTop: 28 }}>
                <ContactRow icon="map" title="Visit">
                  674 Al Wasl Rd, Jumeirah 3, Dubai<br/>
                  Ground floor &middot; on-site parking
                </ContactRow>
                <ContactRow icon="clock" title="Hours">
                  Salon &amp; tours · 8am – 6pm · 7 days a week<br/>
                  <span style={{ color: "var(--slate)" }}>Boarding desk · 7am – 7pm · check-out by noon</span>
                </ContactRow>
                <ContactRow icon="phone" title="Call">
                  <a href={`tel:${Do.contact.landline}`} className="link">{Do.contact.landlineDisplay}</a> &middot; bookings &amp; salon<br/>
                  <a href={`tel:+${Do.contact.waNumber}`} className="link">{Do.contact.waDisplay}</a> &middot; mobile / WhatsApp
                </ContactRow>
                <ContactRow icon="wa" title="WhatsApp">
                  <a className="link" href={window.waLink("Hi Shampooch!")} target="_blank" rel="noreferrer">{Do.contact.waDisplay}</a> — fastest way to book
                </ContactRow>
                <ContactRow icon="mail" title="Email">
                  <a href={`mailto:${Do.contact.email}`} className="link">{Do.contact.email}</a> · general<br/>
                  <a href={`mailto:${Do.contact.daycareEmail}`} className="link">{Do.contact.daycareEmail}</a> · daycare &amp; boarding records
                </ContactRow>
              </div>
              <div style={{ display: "flex", gap: 12, marginTop: 30, flexWrap: "wrap" }}>
                <a className="btn btn-pink btn-lg" href={window.waLink("Hi Shampooch! I'd like to book.")} target="_blank" rel="noreferrer"><window.Icon name="wa" /> WhatsApp</a>
                <a className="btn btn-ink btn-lg" href="#/book">Send a booking enquiry</a>
              </div>
            </div>
            <div>
              <div className="photo wide" style={{ aspectRatio: "4/5" }}>
                {/* Map iframe — Google Maps embedded by query (no API key) */}
                <iframe
                  title="Shampooch on Google Maps"
                  src={`https://www.google.com/maps?q=${encodeURIComponent(Do.contact.mapsQuery)}&output=embed`}
                  loading="lazy"
                  style={{ width: "100%", height: "100%", border: 0, display: "block" }}
                />
              </div>
            </div>
          </div>
        </div>
        <style>{`@media (min-width: 880px) { .contact-grid { grid-template-columns: 1fr 0.9fr !important; gap: 56px !important; }}`}</style>
      </section>
    </window.PageWrap>
  );
}

function ContactRow({ icon, title, children }) {
  return (
    <div style={{ display: "grid", gridTemplateColumns: "44px 1fr", gap: 16, alignItems: "start" }}>
      <span style={{
        width: 44, height: 44, borderRadius: 999, background: "var(--pooch-pink-soft)",
        color: "var(--pooch-pink-deep)",
        display: "inline-flex", alignItems: "center", justifyContent: "center",
      }}><window.Icon name={icon} /></span>
      <div>
        <div style={{ fontFamily: "var(--font-display)", fontWeight: 600, fontSize: 18, marginBottom: 2 }}>{title}</div>
        <div style={{ color: "var(--ink-2)", fontSize: 15, lineHeight: 1.55 }}>{children}</div>
      </div>
    </div>
  );
}

// ----- Book -----
function BookPage() {
  const [form, setForm] = useStateO({
    name: "", phone: "", email: "",
    dogName: "", breed: "", size: "Small",
    service: "Salon Grooming", pkg: "Full Grooming Package",
    date: "", message: "",
  });
  const [submitted, setSubmitted] = useStateO(false);

  const services = Do.services.map(s => s.name);
  const update = (k) => (e) => setForm(f => ({ ...f, [k]: e.target.value }));

  const buildWaText = () => {
    return [
      `Hi Shampooch! I'd like to book.`,
      `• Dog: ${form.dogName || "(name)"} · ${form.breed || "(breed)"} · ${form.size}`,
      `• Service: ${form.service}${form.pkg ? ` — ${form.pkg}` : ""}`,
      form.date ? `• Preferred date: ${form.date}` : null,
      `• Name: ${form.name || "(your name)"}`,
      form.phone ? `• Phone: ${form.phone}` : null,
      form.email ? `• Email: ${form.email}` : null,
      form.message ? `• Notes: ${form.message}` : null,
    ].filter(Boolean).join("\n");
  };

  const onSubmit = (e) => {
    e.preventDefault();
    setSubmitted(true);
    // Open WhatsApp with pre-filled text
    window.open(window.waLink(buildWaText()), "_blank");
    setTimeout(() => setSubmitted(false), 6000);
  };

  return (
    <window.PageWrap>
      <section className="page-hero" style={{ paddingBottom: 40 }}>
        <div className="shell">
          <div className="crumbs"><a href="#/">Home</a><span>/</span><span>Book / quote</span></div>
          <span className="h-eyebrow" style={{ display: "block", marginTop: 14 }}>Get a quote · No prices, no pressure</span>
          <h1 className="display">Tell us about your dog &mdash; we&rsquo;ll come back with a slot.</h1>
          <p className="lede" style={{ marginTop: 8 }}>
            We don&rsquo;t publish set prices because coat, breed and time taken all matter. Fill this in and we&rsquo;ll
            quote you on WhatsApp &mdash; usually within the hour during salon hours.
          </p>
        </div>
      </section>

      <section className="section" style={{ paddingTop: 12 }}>
        <div className="shell" style={{ display: "grid", gridTemplateColumns: "1fr", gap: 36 }} >
          <div className="book-form-wrap" style={{ display: "grid", gridTemplateColumns: "1fr", gap: 36 }}>
            <form onSubmit={onSubmit} className="card" style={{ padding: 28, display: "grid", gap: 16 }}>
              <div style={{ display: "grid", gridTemplateColumns: "1fr 1fr", gap: 14 }}>
                <div className="field"><label>Your name</label><input required value={form.name} onChange={update("name")} placeholder="Maria" /></div>
                <div className="field"><label>Phone</label><input required value={form.phone} onChange={update("phone")} placeholder="+971 50 ..." /></div>
              </div>
              <div className="field"><label>Email (optional)</label><input value={form.email} onChange={update("email")} placeholder="you@email.com" type="email" /></div>

              <h4 style={{ fontFamily: "var(--font-display)", fontSize: 18, margin: "12px 0 0" }}>Your dog</h4>
              <div style={{ display: "grid", gridTemplateColumns: "1fr 1fr 120px", gap: 14 }}>
                <div className="field"><label>Dog&rsquo;s name</label><input required value={form.dogName} onChange={update("dogName")} placeholder="Bowie" /></div>
                <div className="field"><label>Breed</label><input value={form.breed} onChange={update("breed")} placeholder="Cavoodle, etc." /></div>
                <div className="field"><label>Size</label>
                  <select value={form.size} onChange={update("size")}>
                    {["Toy", "Small", "Medium", "Large", "Giant"].map(s => <option key={s}>{s}</option>)}
                  </select>
                </div>
              </div>

              <h4 style={{ fontFamily: "var(--font-display)", fontSize: 18, margin: "12px 0 0" }}>What you need</h4>
              <div style={{ display: "grid", gridTemplateColumns: "1fr 1fr", gap: 14 }}>
                <div className="field"><label>Service</label>
                  <select value={form.service} onChange={update("service")}>
                    {services.map(s => <option key={s}>{s}</option>)}
                  </select>
                </div>
                <div className="field"><label>Package</label>
                  <select value={form.pkg} onChange={update("pkg")}>
                    <option>Basic Grooming Package</option>
                    <option>Full Grooming Package</option>
                    <option>Daycare day-pass</option>
                    <option>Boutique Hotel stay</option>
                    <option>Not sure — please advise</option>
                  </select>
                </div>
              </div>
              <div className="field"><label>Preferred date</label><input type="date" value={form.date} onChange={update("date")} /></div>
              <div className="field"><label>Anything we should know?</label><textarea value={form.message} onChange={update("message")} placeholder="Sensitive skin, prior ops, no-go zones, special asks…" /></div>

              <div style={{ display: "flex", gap: 10, flexWrap: "wrap", marginTop: 8 }}>
                <button className="btn btn-pink btn-lg" type="submit">
                  <window.Icon name="wa" /> Send via WhatsApp
                </button>
                <button type="button" className="btn btn-ghost btn-lg" onClick={() => {
                  setSubmitted(true);
                  setTimeout(() => setSubmitted(false), 4000);
                }}>
                  Email us instead <window.Icon name="mail" size={16} />
                </button>
              </div>
              <p style={{ margin: "10px 0 0", color: "var(--slate)", fontSize: 13 }}>
                We never publish prices &mdash; we&rsquo;ll come back with a personalised quote. Your details aren&rsquo;t
                stored on this site; the form opens WhatsApp pre-filled.
              </p>
            </form>

            <aside style={{ display: "grid", gap: 18 }}>
              <div className="card" style={{ padding: 24 }}>
                <span className="h-eyebrow">Faster ways in</span>
                <h3 style={{ fontFamily: "var(--font-display)", fontSize: 22, margin: "6px 0 16px" }}>If you know what you want…</h3>
                <div style={{ display: "grid", gap: 10 }}>
                  <a className="btn btn-pink" href={window.waLink("Hi Shampooch! I'd like to book.")} target="_blank" rel="noreferrer">
                    <window.Icon name="wa" /> WhatsApp · {Do.contact.waDisplay}
                  </a>
                  <a className="btn btn-ink" href={`tel:${Do.contact.landline}`}>
                    <window.Icon name="phone" /> Call · {Do.contact.landlineDisplay}
                  </a>
                </div>
              </div>
              <div className="card" style={{ padding: 24, background: "var(--cream-2)" }}>
                <strong>What happens next</strong>
                <ol style={{ paddingLeft: 18, color: "var(--ink-2)", lineHeight: 1.7, margin: "12px 0 0" }}>
                  <li>We reply on WhatsApp with a free quote.</li>
                  <li>You pick a slot &mdash; salon, van or boarding.</li>
                  <li>We send a confirmation + the vaccination checklist.</li>
                  <li>You drop off (or we pull up the van). Treats follow.</li>
                </ol>
              </div>
            </aside>
            <style>{`
              @media (min-width: 960px) {
                .book-form-wrap { grid-template-columns: 1.4fr 1fr !important; align-items: start; }
              }
              @media (max-width: 540px) {
                .book-form-wrap form > div[style*="grid-template-columns: 1fr 1fr"] { grid-template-columns: 1fr !important; }
                .book-form-wrap form > div[style*="120px"] { grid-template-columns: 1fr !important; }
              }
            `}</style>
          </div>
        </div>
      </section>

      {submitted && (
        <div className="toast"><window.Icon name="check" /> Opening WhatsApp with your enquiry…</div>
      )}
    </window.PageWrap>
  );
}

window.AboutPage = AboutPage;
window.ReviewsPage = ReviewsPage;
window.FaqPage = FaqPage;
window.ContactPage = ContactPage;
window.BookPage = BookPage;