/* global React, window */
// Shampooch — Home page.
const { useState: useStateHome, useEffect: useEffectHome } = React;
const Dh = window.SHAMPOOCH_DATA;

function HomeHero() {
  return (
    <section className="hero" style={{ position: "relative", overflow: "hidden" }}>
      <div className="shell">
        <div className="grid">
          <div>
            <span className="h-eyebrow">Premium dog care · Dubai · Since 20+ years</span>
            <h1 className="display">
              The place where <span className="pink">good dogs</span> go to get <span className="underline">pampered</span>.
            </h1>
            <p className="lede" style={{ marginBottom: 28 }}>
              Mobile grooming in our signature pink &amp; yellow vans, a custom-built salon, supervised daycare, a boutique
              hotel for staycations, and our own all-natural retail line. One family, six services, dogs only.
            </p>
            <div className="cta-row">
              <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" /> Book on WhatsApp
              </a>
              <a className="btn btn-ghost btn-lg" href={`tel:${Dh.contact.landline}`}>
                <window.Icon name="phone" /> Call {Dh.contact.landlineDisplay}
              </a>
            </div>
            <div className="meta-row">
              <span className="chip"><span className="dot" /> Family-run</span>
              <span className="chip"><span className="dot" /> Vaccination-safe</span>
              <span className="chip"><span className="dot" /> Fluff-dried · no box dryers</span>
              <span className="chip"><span className="dot" /> 24/7 supervised boarding</span>
            </div>
          </div>
          <div>
            <div className="hero-collage">
              <span className="sticker-float sticker sticker-pink">Hi, I&rsquo;m Bowie ✌︎</span>
              <div className="a photo">
                <img src="media/facility-dsc08008.webp" alt="A freshly-fluff-dried poodle on the grooming table" />
              </div>
              <div className="b photo">
                <img src="media/gallery-pooch-9694.webp" alt="A happy pug pack on a yellow bench in the salon" />
              </div>
            </div>
          </div>
        </div>
      </div>
      {/* decorative ribbon */}
      <div className="ribbon" style={{ width: "60%", left: "-10%", top: 24 }} aria-hidden="true" />
    </section>
  );
}

function HomeServices() {
  return (
    <section className="section" id="services">
      <div className="shell">
        <div className="sec-head">
          <div className="left">
            <span className="h-eyebrow">What we do</span>
            <h2 className="display">Six ways we take care of your dog.</h2>
          </div>
          <div className="lede" style={{ maxWidth: 360, fontSize: 15 }}>
            Pricing isn&rsquo;t one-size-fits-all — coat, breed and time taken all matter. Tap any service for what&rsquo;s
            included, then ask us for a free quote.
          </div>
        </div>
        <div style={{ display: "grid", gridTemplateColumns: "repeat(auto-fit, minmax(220px, 1fr))", gap: 18 }}>
          {Dh.services.map((s, i) => <window.ServiceTile key={s.slug} s={s} index={i} />)}
        </div>
      </div>
    </section>
  );
}

function HomeVanBand() {
  return (
    <section className="van-band" aria-label="Mobile grooming highlight">
      <span className="bubble" style={{ width: 220, height: 220, top: -60, right: 80 }} />
      <span className="bubble" style={{ width: 120, height: 120, bottom: 30, left: "30%" }} />
      <span className="bubble" style={{ width: 80, height: 80, top: 80, left: 40 }} />
      <div className="shell">
        <div className="inner">
          <div>
            <span className="chip chip-yellow" style={{ marginBottom: 14 }}><window.Icon name="sparkle" size={14} /> Signature service</span>
            <h2 className="display">The spa comes to you — in a very pink van.</h2>
            <p style={{ fontSize: 18, opacity: 0.92, maxWidth: "44ch", marginTop: 12 }}>
              Fully-equipped mobile grooming in our pink &amp; yellow vans. Same groomers, same all-natural shampoos,
              same fluff-dry &mdash; just parked at your door. Pre-book early; demand is high.
            </p>
            <div style={{ display: "flex", gap: 12, marginTop: 26, flexWrap: "wrap" }}>
              <a className="btn btn-yellow btn-lg"
                 href={window.waLink("Hi Shampooch! I'd like to book Mobile Grooming.")}
                 target="_blank" rel="noreferrer">
                <window.Icon name="wa" /> Get a mobile quote
              </a>
              <a className="btn btn-ghost btn-lg"
                 href="#/services/mobile-grooming"
                 style={{ color: "white", borderColor: "rgba(255,255,255,0.6)" }}>
                How it works <window.Icon name="arrow" />
              </a>
            </div>
          </div>
          <div className="photo wide" style={{ aspectRatio: "4/3" }}>
            <img src="media/mobile-grooming-van.webp" alt="Shampooch pink and yellow mobile grooming van" />
          </div>
        </div>
      </div>
    </section>
  );
}

function HomeSafety() {
  return (
    <section className="section">
      <div className="shell">
        <div className="sec-head">
          <div className="left">
            <span className="h-eyebrow">Our safety & hygiene standards</span>
            <h2 className="display">Trust is a checklist, not a vibe.</h2>
            <p className="lede" style={{ marginTop: 16 }}>
              Premium care isn&rsquo;t a promise — it&rsquo;s a set of policies. Here&rsquo;s exactly what we require of
              every dog (and ourselves) before they walk in the door.
            </p>
          </div>
          <a href="#/reviews" className="link">See all safety credentials <window.Icon name="arrow" size={14} /></a>
        </div>
        <div className="safety-grid">
          {Dh.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>
  );
}

function HomeGallery() {
  return (
    <section className="section" style={{ background: "var(--cream-2)" }}>
      <div className="shell">
        <div className="sec-head">
          <div className="left">
            <span className="h-eyebrow">Our home — the pack at play</span>
            <h2 className="display">A look around the salon.</h2>
            <p className="lede" style={{ marginTop: 12 }}>
              Real photos of our facility, our team, and the dogs who treat reception like their own living room.
            </p>
          </div>
          <a href="#/about" className="link">More about us <window.Icon name="arrow" size={14} /></a>
        </div>
        <div className="gallery-grid">
          {Dh.galleryPhotos.slice(0, 8).map((g, i) => (
            <div className="photo square" key={g.src} style={i === 2 || i === 5 ? { gridRow: "span 1" } : {}}>
              <img src={`media/${g.src}`} alt={`Shampooch ${g.tag.toLowerCase()} photo`} loading="lazy" />
            </div>
          ))}
        </div>
      </div>
    </section>
  );
}

function HomeReview() {
  return (
    <section className="section">
      <div className="shell">
        <div className="sec-head" style={{ justifyContent: "center", textAlign: "center" }}>
          <div className="left" style={{ marginInline: "auto" }}>
            <span className="h-eyebrow">Our reviews</span>
            <h2 className="display">What happy pooches &amp; their hoomans say.</h2>
          </div>
        </div>
        <window.VerifiedQuote />
        <p style={{ textAlign: "center", color: "var(--slate)", fontSize: 13, marginTop: 18 }}>
          Live Google reviews coming soon — we&rsquo;re wiring this up properly, not faking a star count.
        </p>
      </div>
    </section>
  );
}

function HomeCTA() {
  return (
    <section className="section-tight" style={{
      background: "var(--ink)",
      color: "var(--cream)",
      position: "relative",
      overflow: "hidden",
    }}>
      <div className="shell" style={{ position: "relative", zIndex: 1 }}>
        <div style={{
          display: "grid",
          gridTemplateColumns: "1fr",
          gap: 28,
          alignItems: "center",
        }}>
          <div>
            <h2 className="display" style={{ color: "var(--cream)", fontSize: "clamp(36px, 5vw, 64px)", maxWidth: "20ch" }}>
              Ready to book? <span style={{ color: "var(--pooch-yellow)" }}>It&rsquo;s a quick chat away.</span>
            </h2>
            <p style={{ maxWidth: "46ch", color: "rgba(251,245,236,0.7)", marginTop: 14, fontSize: 18 }}>
              Tell us your dog&rsquo;s name, breed, and what you need. We&rsquo;ll come back with a free quote and an open slot.
            </p>
            <div style={{ display: "flex", gap: 12, marginTop: 26, 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" /> Book on WhatsApp
              </a>
              <a className="btn btn-yellow btn-lg" href="#/book">
                Send a booking enquiry <window.Icon name="arrow" />
              </a>
            </div>
          </div>
        </div>
      </div>
      {/* Floating bones / dots */}
      <span style={{ position: "absolute", top: 30, right: -30, width: 220, height: 220, background: "var(--pooch-pink)", borderRadius: 999, opacity: 0.3, filter: "blur(40px)" }} />
      <span style={{ position: "absolute", bottom: -30, left: "30%", width: 160, height: 160, background: "var(--pooch-yellow)", borderRadius: 999, opacity: 0.25, filter: "blur(50px)" }} />
    </section>
  );
}

function HomeInsta() {
  return (
    <section className="section-tight" style={{ background: "var(--cream)" }}>
      <div className="shell">
        <div style={{
          display: "flex", flexWrap: "wrap", justifyContent: "space-between",
          alignItems: "center", gap: 16, marginBottom: 28,
        }}>
          <div>
            <span className="h-eyebrow">Follow the pack</span>
            <h3 style={{ fontFamily: "var(--font-display)", fontSize: 28, margin: "6px 0 0" }}>@shampoochuae</h3>
          </div>
          <a className="btn btn-ghost" href={Dh.contact.instagram} target="_blank" rel="noreferrer">
            <window.Icon name="ig" /> Follow on Instagram
          </a>
        </div>
        <div className="gallery-grid">
          {Dh.galleryPhotos.slice(4, 12).map((g) => (
            <a href={Dh.contact.instagram} target="_blank" rel="noreferrer" className="photo square" key={g.src}>
              <img src={`media/${g.src}`} alt="Instagram preview" loading="lazy" />
            </a>
          ))}
        </div>
      </div>
    </section>
  );
}

function HomePage() {
  return (
    <window.PageWrap>
      <HomeHero />
      <window.TrustStrip />
      <HomeServices />
      <HomeVanBand />
      <HomeSafety />
      <HomeGallery />
      <HomeReview />
      <HomeInsta />
      <HomeCTA />
    </window.PageWrap>
  );
}

window.HomePage = HomePage;