/* global React, window */
// Shampooch — service hub + service detail pages.
const Ds = window.SHAMPOOCH_DATA;
const { useState: useStateSvc } = React;

function ServiceHubPage() {
  return (
    <window.PageWrap>
      <section className="page-hero">
        <div className="shell">
          <div className="crumbs"><a href="#/">Home</a><span>/</span><span>Services</span></div>
          <span className="h-eyebrow" style={{ display: "block", marginTop: 14 }}>All pet care services</span>
          <h1 className="display">One family. Six services. Dogs only.</h1>
          <p className="lede" style={{ marginTop: 8 }}>
            From a doorstep groom to a full staycation, everything we do is built around making your dog&rsquo;s day better
            &mdash; and yours a little easier.
          </p>
        </div>
      </section>
      <section className="section">
        <div className="shell">
          <div style={{ display: "grid", gridTemplateColumns: "repeat(auto-fit, minmax(260px, 1fr))", gap: 18 }}>
            {Ds.services.map((s, i) => <window.ServiceTile key={s.slug} s={s} index={i} />)}
          </div>
        </div>
      </section>
      <window.TrustStrip />
    </window.PageWrap>
  );
}

function ServiceDetail({ slug }) {
  const s = Ds.services.find(x => x.slug === slug);
  if (!s) return <NotFoundPage />;

  return (
    <window.PageWrap>
      {/* Page hero with image right */}
      <section className="page-hero" style={{ paddingBottom: 0 }}>
        <div className="shell">
          <div className="crumbs">
            <a href="#/">Home</a><span>/</span>
            <a href="#/services">Services</a><span>/</span>
            <span>{s.name}</span>
          </div>
          <div style={{ display: "grid", gridTemplateColumns: "1fr", gap: 40, alignItems: "end", marginTop: 22 }}
               className="svc-hero-grid">
            <div>
              <span className="h-eyebrow">{s.num} · Service</span>
              <h1 className="display">{s.name}</h1>
              <p style={{ fontFamily: "var(--font-display)", fontSize: "clamp(20px, 2vw, 26px)", color: "var(--pooch-pink-deep)", margin: "6px 0 18px", fontStyle: "italic" }}>
                {s.tagline}
              </p>
              <p className="lede">{s.short}</p>
              <div style={{ display: "flex", gap: 12, marginTop: 26, flexWrap: "wrap" }}>
                <a className="btn btn-pink btn-lg"
                   href={window.waLink(s.waText)} target="_blank" rel="noreferrer">
                  <window.Icon name="wa" /> Get a quote on WhatsApp
                </a>
                <a className="btn btn-ghost btn-lg" href="#/book">
                  Send an enquiry <window.Icon name="arrow" />
                </a>
              </div>
            </div>
            <div className="photo wide" style={{ borderRadius: "24px 24px 0 0", aspectRatio: "16/10" }}>
              <img src={`media/${s.hero}.webp`} alt={`${s.name} at Shampooch Dubai`} />
            </div>
          </div>
        </div>
        <style>{`
          @media (min-width: 880px) {
            .svc-hero-grid { grid-template-columns: 1fr 1.05fr !important; }
          }
        `}</style>
      </section>

      {/* What's included + requirements */}
      <section className="section">
        <div className="shell">
          <div style={{ display: "grid", gridTemplateColumns: "1fr", gap: 36 }} className="svc-detail-grid">
            <div>
              <span className="h-eyebrow">What&rsquo;s included</span>
              <h2 className="display" style={{ fontSize: "clamp(28px, 3.4vw, 44px)", marginTop: 10, marginBottom: 22 }}>
                Built for fuss, calibrated for fuss-free.
              </h2>
              <ul className="pretty-list">
                {s.includes.map((line, i) => (
                  <li key={i}>
                    <span className="check"><window.Icon name="check" size={14} /></span>
                    <span>{line}</span>
                  </li>
                ))}
              </ul>
              {s.times && (
                <div style={{ marginTop: 28, background: "var(--cream-2)", borderRadius: 16, padding: 20 }}>
                  <strong style={{ display: "block", marginBottom: 8 }}>Typical time</strong>
                  {s.times.map((t, i) => (
                    <div key={i} style={{ display: "flex", justifyContent: "space-between", padding: "6px 0", borderBottom: i < s.times.length - 1 ? "1px dashed var(--line-2)" : "none" }}>
                      <span>{t.what}</span>
                      <span style={{ fontVariantNumeric: "tabular-nums", color: "var(--slate)" }}>{t.time}</span>
                    </div>
                  ))}
                </div>
              )}
            </div>
            <div>
              <div className="card" style={{ padding: 28 }}>
                <div className="row" style={{ marginBottom: 14 }}>
                  <window.Icon name="shield" />
                  <h3 style={{ fontFamily: "var(--font-display)", margin: 0, fontSize: 22 }}>Before you book</h3>
                </div>
                {s.requires.length === 0 && <p style={{ color: "var(--slate)", margin: 0 }}>No specific requirements — just bring the curiosity.</p>}
                <ul className="pretty-list">
                  {s.requires.map((line, i) => (
                    <li key={i}>
                      <span className="check" style={{ background: "var(--pooch-pink-soft)", color: "var(--pooch-pink-deep)" }}>
                        <window.Icon name="check" size={14} />
                      </span>
                      <span>{line}</span>
                    </li>
                  ))}
                </ul>
                {s.security && (
                  <div style={{ marginTop: 22, paddingTop: 22, borderTop: "1px solid var(--line)" }}>
                    <strong style={{ display: "block", marginBottom: 8 }}>Security around the clock</strong>
                    <ul className="pretty-list">
                      {s.security.map((line, i) => (
                        <li key={i}>
                          <span className="check"><window.Icon name="check" size={14} /></span>
                          <span>{line}</span>
                        </li>
                      ))}
                    </ul>
                  </div>
                )}
              </div>
            </div>
          </div>
        </div>
        <style>{`
          @media (min-width: 880px) {
            .svc-detail-grid { grid-template-columns: 1.2fr 1fr !important; gap: 56px !important; }
          }
        `}</style>
      </section>

      {/* Packages */}
      <section className="section-tight" style={{ background: "var(--cream-2)" }}>
        <div className="shell">
          <div className="sec-head">
            <div className="left">
              <span className="h-eyebrow">Packages</span>
              <h2 className="display" style={{ fontSize: "clamp(28px, 3.6vw, 48px)" }}>
                Two ways in &mdash; both end in a fluffy dog.
              </h2>
              <p className="lede" style={{ marginTop: 8 }}>
                We deliberately don&rsquo;t publish set prices &mdash; coat, breed and time taken all matter. You&rsquo;ll
                get an accurate, no-pressure quote in under 5 minutes on WhatsApp.
              </p>
            </div>
          </div>
          <div className="pkg-grid">
            {s.packages.map((pkg, i) => (
              <div key={pkg} className={`pkg-card ${i === 1 ? "featured" : ""}`}>
                <span className="h-eyebrow" style={{ color: i === 1 ? "var(--pooch-yellow)" : undefined }}>Package {i + 1}</span>
                <h3 style={{ fontFamily: "var(--font-display)", fontSize: 26, margin: 0 }}>{pkg}</h3>
                {s.slug === "daycare" && i === 0 && (
                  <p style={{ margin: 0, color: i === 1 ? "rgba(255,255,255,0.7)" : "var(--slate)" }}>
                    First-time temperament evaluation <strong>Dhs. 100</strong> &mdash; redeemable against future daycare bookings.
                  </p>
                )}
                <p style={{ margin: 0, color: i === 1 ? "rgba(255,255,255,0.75)" : "var(--slate)" }}>
                  Includes everything in &ldquo;What&rsquo;s included&rdquo; above. Final price quoted after we meet your dog
                  &mdash; no surprises, no upsells.
                </p>
                <div className="quote-cta" style={{ display: "flex", gap: 10, flexWrap: "wrap" }}>
                  <a className={i === 1 ? "btn btn-yellow" : "btn btn-pink"}
                     href={window.waLink(`Hi Shampooch! I'd like the ${pkg} for ${s.name} — could you quote me?`)}
                     target="_blank" rel="noreferrer">
                    <window.Icon name="wa" /> Get a quote
                  </a>
                </div>
              </div>
            ))}
          </div>
          {s.pricedNote && (
            <p style={{ marginTop: 22, color: "var(--slate)", fontSize: 14, maxWidth: "70ch" }}>
              <strong style={{ color: "var(--ink)" }}>Note:</strong> {s.pricedNote}
            </p>
          )}
        </div>
      </section>

      {/* Related services */}
      <section className="section">
        <div className="shell">
          <h3 style={{ fontFamily: "var(--font-display)", fontSize: 28, marginTop: 0, marginBottom: 22 }}>Also at Shampooch</h3>
          <div style={{ display: "grid", gridTemplateColumns: "repeat(auto-fit, minmax(200px, 1fr))", gap: 14 }}>
            {Ds.services.filter(x => x.slug !== s.slug).slice(0, 4).map(x => (
              <window.ServiceTile key={x.slug} s={x} />
            ))}
          </div>
        </div>
      </section>
    </window.PageWrap>
  );
}

function NotFoundPage() {
  return (
    <window.PageWrap>
      <section className="page-hero" style={{ minHeight: "60vh" }}>
        <div className="shell" style={{ textAlign: "center" }}>
          <span className="h-eyebrow">404 · Lost the scent</span>
          <h1 className="display">This page took a different walk.</h1>
          <p className="lede" style={{ marginInline: "auto", marginTop: 10 }}>Let&rsquo;s get you back to a fluffier corner of the site.</p>
          <div style={{ display: "flex", gap: 12, justifyContent: "center", flexWrap: "wrap", marginTop: 22 }}>
            <a href="#/" className="btn btn-pink">Home</a>
            <a href="#/services" className="btn btn-ghost">Services</a>
            <a href="#/contact" className="btn btn-ghost">Contact</a>
          </div>
        </div>
      </section>
    </window.PageWrap>
  );
}

window.ServiceHubPage = ServiceHubPage;
window.ServiceDetail = ServiceDetail;
window.NotFoundPage = NotFoundPage;