// sections.jsx — nav, hero, trust, services, why-us, how-it-works, gallery, testimonials, footer
const { useState, useEffect, useRef } = React;

/* ---------- helpers ---------- */
function Reveal({ children, delay = 0, as: Tag = "div", className = "", style }) {
  const ref = useRef(null);
  const [seen, setSeen] = useState(false);
  useEffect(() => {
    const el = ref.current;
    if (!el) return;
    const reveal = () => setSeen(true);
    // Reveal anything already in (or near) the viewport on mount — the
    // observer alone can miss above-the-fold content in embedded previews.
    const vh = window.innerHeight || 800;
    if (el.getBoundingClientRect().top < vh * 0.95) { reveal(); return; }
    if (!("IntersectionObserver" in window)) { reveal(); return; }
    const io = new IntersectionObserver(
      ([e]) => { if (e.isIntersecting) { reveal(); io.disconnect(); } },
      { threshold: 0, rootMargin: "0px 0px -8% 0px" }
    );
    io.observe(el);
    return () => io.disconnect();
  }, []);
  return (
    <Tag ref={ref} className={`fade-up ${seen ? "in" : ""} ${className}`}
      style={{ transitionDelay: `${delay}ms`, ...style }}>
      {children}
    </Tag>
  );
}

function PH({ label, style, className = "", img }) {
  return <div className={`ph ${className}`} style={{ position: "relative", overflow: "hidden", ...style }}>
    {img && <img src={img} alt={label} loading="lazy" style={{ position: "absolute", inset: 0, width: "100%", height: "100%", objectFit: "cover" }} onError={(e) => { e.currentTarget.style.display = "none"; }} />}
    <span style={img ? { position: "relative", zIndex: 1 } : undefined}>{label}</span>
  </div>;
}

/* ---------- tiny line icons ---------- */
const Icon = {
  paw: (p) => (<svg viewBox="0 0 24 24" {...p}><circle cx="7" cy="9" r="2"/><circle cx="12" cy="6.5" r="2"/><circle cx="17" cy="9" r="2"/><path d="M12 11c-2.6 0-5 2.2-5 4.6 0 1.7 1.4 2.6 3 2.6.9 0 1.4-.4 2-.4s1.1.4 2 .4c1.6 0 3-.9 3-2.6 0-2.4-2.4-4.6-5-4.6Z" fill="currentColor" stroke="none"/></svg>),
  drop: (p) => (<svg viewBox="0 0 24 24" {...p}><path d="M12 3.5c3 3.6 5.5 6.4 5.5 9.6A5.5 5.5 0 0 1 12 18.6a5.5 5.5 0 0 1-5.5-5.5C6.5 9.9 9 7.1 12 3.5Z"/></svg>),
  scissors: (p) => (<svg viewBox="0 0 24 24" {...p}><circle cx="6.5" cy="7" r="2.4"/><circle cx="6.5" cy="17" r="2.4"/><path d="M8.6 8.6 19 17M8.6 15.4 19 7"/></svg>),
  sparkle: (p) => (<svg viewBox="0 0 24 24" {...p}><path d="M12 3c.7 4.2 1.8 5.3 6 6-4.2.7-5.3 1.8-6 6-.7-4.2-1.8-5.3-6-6 4.2-.7 5.3-1.8 6-6Z"/></svg>),
  star: (p) => (<svg viewBox="0 0 24 24" {...p}><path d="M12 3.5 14.3 9l5.7.5-4.3 3.8 1.3 5.7L12 16l-5 3 1.3-5.7L4 9.5 9.7 9 12 3.5Z" fill="currentColor" stroke="none"/></svg>),
  pin: (p) => (<svg viewBox="0 0 24 24" {...p}><path d="M12 21c4-4.5 6-7.6 6-10.6A6 6 0 0 0 6 10.4C6 13.4 8 16.5 12 21Z"/><circle cx="12" cy="10.2" r="2.2"/></svg>),
  clock: (p) => (<svg viewBox="0 0 24 24" {...p}><circle cx="12" cy="12" r="8.2"/><path d="M12 7.6V12l3 1.8"/></svg>),
  heart: (p) => (<svg viewBox="0 0 24 24" {...p}><path d="M12 19.5C6.5 15.5 4 12.7 4 9.6 4 7.3 5.8 5.6 8 5.6c1.4 0 2.7.7 4 2.3 1.3-1.6 2.6-2.3 4-2.3 2.2 0 4 1.7 4 4 0 3.1-2.5 5.9-8 9.9Z"/></svg>),
  shield: (p) => (<svg viewBox="0 0 24 24" {...p}><path d="M12 3.5 19 6v5.5c0 4.3-2.9 7-7 9-4.1-2-7-4.7-7-9V6l7-2.5Z"/></svg>),
  leaf: (p) => (<svg viewBox="0 0 24 24" {...p}><path d="M5 19c0-7 4.5-13 14-13 0 9.5-6 14-13 14M8 16c2.5-3 5-5 8-6.5"/></svg>),
};
const iconProps = { width: 24, height: 24, fill: "none", stroke: "currentColor", strokeWidth: 1.6, strokeLinecap: "round", strokeLinejoin: "round" };

/* ---------- NAV ---------- */
function Nav({ onBook }) {
  const [scrolled, setScrolled] = useState(false);
  const [open, setOpen] = useState(false);
  useEffect(() => {
    const f = () => setScrolled(window.scrollY > 24);
    f(); window.addEventListener("scroll", f, { passive: true });
    return () => window.removeEventListener("scroll", f);
  }, []);
  const links = [["Services", "#services"], ["Nervous dogs", "#why"], ["How it works", "#how"], ["Reviews", "#reviews"], ["Visit", "#visit"]];
  return (
    <header style={{
      position: "sticky", top: 0, zIndex: 50,
      background: scrolled ? "color-mix(in srgb, var(--bg) 86%, transparent)" : "transparent",
      backdropFilter: scrolled ? "blur(10px)" : "none",
      borderBottom: scrolled ? "1px solid var(--line)" : "1px solid transparent",
      transition: "background .3s, border-color .3s",
    }}>
      <div className="wrap" style={{ display: "flex", alignItems: "center", justifyContent: "space-between", height: 74 }}>
        <a href="#top" style={{ display: "flex", alignItems: "center", gap: 11 }}>
          <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={{ lineHeight: 1 }}>
            <span style={{ fontFamily: "var(--font-display)", fontSize: 19, fontWeight: 600, display: "block", letterSpacing: "-0.01em", whiteSpace: "nowrap" }}>My Dog House Grooming</span>
            <span style={{ fontSize: 10.5, letterSpacing: "0.22em", textTransform: "uppercase", color: "var(--ink-soft)" }}>Number 3 Rd · Richmond</span>
          </span>
        </a>
        <nav style={{ display: "flex", alignItems: "center", gap: 30 }} className="navlinks">
          {links.map(([t, h]) => (
            <a key={t} href={h} style={{ fontSize: 14.5, fontWeight: 500, color: "var(--ink-soft)" }}
              onMouseEnter={e => e.currentTarget.style.color = "var(--ink)"}
              onMouseLeave={e => e.currentTarget.style.color = "var(--ink-soft)"}>{t}</a>
          ))}
        </nav>
        <div style={{ display: "flex", alignItems: "center", gap: 12 }}>
          <a href="tel:+16042717387" className="phonelink" style={{ fontSize: 14.5, fontWeight: 600 }}>(604) 271-7387</a>
          <button className="btn btn-primary bookbtn-desktop" style={{ padding: "11px 20px" }} onClick={onBook}>Book a spot</button>
          <button className="hamburger" aria-label="Menu" aria-expanded={open} onClick={() => setOpen(o => !o)} style={{
            width: 46, height: 46, borderRadius: 12, border: "1.5px solid var(--line)", background: "var(--paper)",
            alignItems: "center", justifyContent: "center", padding: 0,
          }}>
            <span style={{ position: "relative", width: 20, height: 14, display: "block" }}>
              {[0, 1, 2].map(i => (
                <span key={i} style={{
                  position: "absolute", left: 0, width: 20, height: 2, borderRadius: 2, background: "var(--ink)",
                  transition: "transform .28s ease, opacity .2s ease, top .28s ease",
                  top: open ? 6 : i * 6,
                  transform: open ? (i === 0 ? "rotate(45deg)" : i === 2 ? "rotate(-45deg)" : "scaleX(0)") : "none",
                  opacity: open && i === 1 ? 0 : 1,
                }}></span>
              ))}
            </span>
          </button>
        </div>
      </div>

      <div className="mobile-menu" style={{
        maxHeight: open ? 460 : 0, overflow: "hidden", transition: "max-height .35s cubic-bezier(.4,0,.2,1)",
        background: "color-mix(in srgb, var(--bg) 96%, transparent)", backdropFilter: "blur(10px)",
        borderBottom: open ? "1px solid var(--line)" : "1px solid transparent",
      }}>
        <div className="wrap" style={{ display: "flex", flexDirection: "column", paddingTop: 8, paddingBottom: 16 }}>
          {links.map(([t, h]) => (
            <a key={t} href={h} onClick={() => setOpen(false)} style={{
              display: "flex", alignItems: "center", minHeight: 48, fontSize: 16.5, fontWeight: 600,
              color: "var(--ink)", borderBottom: "1px solid var(--line)",
            }}>{t}</a>
          ))}
          <a href="tel:+16042717387" style={{ display: "flex", alignItems: "center", minHeight: 48, fontSize: 16.5, fontWeight: 600, color: "var(--accent-ink)" }}>(604) 271-7387</a>
        </div>
      </div>

      <style>{`
        @media (max-width: 900px){ .navlinks{ display:none !important; } .phonelink{ display:none !important; } .bookbtn-desktop{ display:none !important; } .mobile-menu{ display:block !important; } }
      `}</style>
    </header>
  );
}

/* ---------- HERO ---------- */
function Hero({ onBook, layout }) {
  if (layout === "Centered") return <HeroCentered onBook={onBook} />;
  if (layout === "Editorial") return <HeroEditorial onBook={onBook} />;
  return <HeroSplit onBook={onBook} />;
}

function HeroTags() {
  const tags = [["pin", "8980 Number 3 Rd, Richmond"], ["heart", "No rush, gentle"], ["star", "4.6★ · 35 reviews"]];
  return (
    <div style={{ display: "flex", flexWrap: "wrap", gap: 10, marginTop: 30 }}>
      {tags.map(([ic, t]) => (
        <span key={t} style={{ display: "inline-flex", alignItems: "center", gap: 7, fontSize: 13.5, fontWeight: 500, color: "var(--ink-soft)", background: "var(--paper)", border: "1px solid var(--line)", borderRadius: 999, padding: "8px 14px" }}>
          <span style={{ color: "var(--accent)" }}>{Icon[ic]({ ...iconProps, width: 16, height: 16 })}</span>{t}
        </span>
      ))}
    </div>
  );
}

function HeroSplit({ onBook }) {
  return (
    <section id="top" style={{ paddingTop: 40, paddingBottom: 70 }}>
      <div className="wrap" style={{ display: "grid", gridTemplateColumns: "1.05fr 0.95fr", gap: 54, alignItems: "center" }} >
        <div>
          <Reveal><span className="eyebrow plain">🐾 PET GROOMING · RICHMOND · NUMBER 3 RD</span></Reveal>
          <Reveal delay={80}>
            <h1 style={{ fontSize: "clamp(44px, 5.6vw, 78px)", marginTop: 22 }}>
              Spa day,<br/><span style={{ color: "var(--sage)" }}>tails up.</span>
            </h1>
          </Reveal>
          <Reveal delay={160}>
            <p style={{ fontSize: 19, lineHeight: 1.55, color: "var(--ink-soft)", marginTop: 24, maxWidth: 480 }}>
              Gentle, no-rush grooming for nervous pups and divas alike. Small batch, big love. 4.6★ on Google reviews.
            </p>
          </Reveal>
          <Reveal delay={240}>
            <div style={{ display: "flex", gap: 13, marginTop: 32, flexWrap: "wrap" }}>
              <button className="btn btn-primary" style={{ padding: "16px 28px", fontSize: 16 }} onClick={onBook}>Book a spot →</button>
              <a href="#services" className="btn btn-ghost" style={{ padding: "16px 26px", fontSize: 16 }}>See services & pricing</a>
            </div>
          </Reveal>
          <Reveal delay={320}><HeroTags /></Reveal>
        </div>
        <Reveal delay={180}>
          <div style={{ position: "relative" }}>
            <PH img="https://images.pexels.com/photos/6568941/pexels-photo-6568941.jpeg?auto=compress&cs=tinysrgb&w=1600" label="hero — happy dog post-groom" style={{ height: 520, borderRadius: "var(--radius)" }} />
          </div>
        </Reveal>
      </div>
      <style>{`@media(max-width:880px){#top .wrap{grid-template-columns:1fr !important; gap:34px !important;}}`}</style>
    </section>
  );
}

function HeroCentered({ onBook }) {
  return (
    <section id="top" style={{ paddingTop: 56, paddingBottom: 0, textAlign: "center" }}>
      <div className="wrap" style={{ maxWidth: 880 }}>
        <Reveal><span className="eyebrow plain" style={{ justifyContent: "center" }}>🐾 PET GROOMING · RICHMOND · NUMBER 3 RD</span></Reveal>
        <Reveal delay={80}>
          <h1 style={{ fontSize: "clamp(46px, 7vw, 92px)", marginTop: 22 }}>
            Spa day,<br/><span style={{ color: "var(--sage)" }}>tails up.</span>
          </h1>
        </Reveal>
        <Reveal delay={160}>
          <p style={{ fontSize: 19.5, lineHeight: 1.55, color: "var(--ink-soft)", margin: "24px auto 0", maxWidth: 540 }}>
            Gentle, no-rush grooming for nervous pups and divas alike. Small batch, big love. 4.6★ on Google reviews.
          </p>
        </Reveal>
        <Reveal delay={240}>
          <div style={{ display: "flex", gap: 13, marginTop: 32, justifyContent: "center", flexWrap: "wrap" }}>
            <button className="btn btn-primary" style={{ padding: "16px 28px", fontSize: 16 }} onClick={onBook}>Book a spot →</button>
            <a href="#services" className="btn btn-ghost" style={{ padding: "16px 26px", fontSize: 16 }}>See services & pricing</a>
          </div>
        </Reveal>
      </div>
      <Reveal delay={300}>
        <div className="wrap" style={{ marginTop: 50 }}>
          <PH img="https://images.pexels.com/photos/6131161/pexels-photo-6131161.jpeg?auto=compress&cs=tinysrgb&w=1600" label="hero — wide shot of groom in progress" style={{ height: 460, borderRadius: "var(--radius)" }} />
        </div>
      </Reveal>
    </section>
  );
}

function HeroEditorial({ onBook }) {
  return (
    <section id="top" style={{ paddingTop: 36, paddingBottom: 64 }}>
      <div className="wrap">
        <Reveal>
          <div style={{ display: "flex", justifyContent: "space-between", alignItems: "flex-end", flexWrap: "wrap", gap: 20, borderBottom: "1px solid var(--line)", paddingBottom: 26 }}>
            <span className="eyebrow plain">🐾 PET GROOMING · RICHMOND · NUMBER 3 RD</span>
            <span style={{ fontSize: 13.5, color: "var(--ink-soft)", fontWeight: 500 }}>Small batch · No rush · 4.6★ on 35</span>
          </div>
        </Reveal>
        <Reveal delay={90}>
          <h1 style={{ fontSize: "clamp(52px, 9vw, 132px)", marginTop: 30, lineHeight: 0.96 }}>
            Spa day,<br/><span style={{ color: "var(--sage)" }}>tails up.</span>
          </h1>
        </Reveal>
        <div style={{ display: "grid", gridTemplateColumns: "1.4fr 1fr", gap: 40, marginTop: 38, alignItems: "end" }} className="ed-grid">
          <Reveal delay={170}><PH img="https://images.pexels.com/photos/19145879/pexels-photo-19145879.jpeg?auto=compress&cs=tinysrgb&w=1600" label="hero — full-bleed groom portrait" style={{ height: 440, borderRadius: "var(--radius)" }} /></Reveal>
          <Reveal delay={240}>
            <div>
              <p style={{ fontSize: 19, lineHeight: 1.55, color: "var(--ink-soft)" }}>
                Gentle, no-rush grooming for nervous pups and divas alike. Small batch, big love. 4.6★ on Google reviews.
              </p>
              <div style={{ display: "flex", gap: 13, marginTop: 26, flexWrap: "wrap" }}>
                <button className="btn btn-primary" style={{ padding: "16px 28px", fontSize: 16 }} onClick={onBook}>Book a spot →</button>
                <a href="#services" className="btn btn-ghost" style={{ padding: "16px 26px", fontSize: 16 }}>Services</a>
              </div>
            </div>
          </Reveal>
        </div>
      </div>
      <style>{`@media(max-width:820px){.ed-grid{grid-template-columns:1fr !important;}}`}</style>
    </section>
  );
}

/* ---------- TRUST STRIP ---------- */
function TrustStrip() {
  const items = [["4.6★", "on 35 Google reviews"], ["No rush", "short, gentle sessions"], ["Nail trims", "quick & gentle"], ["Number 3 Rd", "in Richmond, BC"]];
  return (
    <section style={{ background: "var(--ink)", color: "var(--paper)" }}>
      <div className="wrap" style={{ display: "grid", gridTemplateColumns: "repeat(4,1fr)", gap: 24, padding: "30px 28px" }}>
        {items.map(([n, l], i) => (
          <Reveal key={i} delay={i * 70} style={{ textAlign: "center" }}>
            <div style={{ fontFamily: "var(--font-display)", fontSize: 34, fontWeight: 500, color: "#fff" }}>{n}</div>
            <div style={{ fontSize: 13, color: "color-mix(in srgb, var(--paper) 65%, transparent)", marginTop: 4 }}>{l}</div>
          </Reveal>
        ))}
      </div>
      <style>{`@media(max-width:720px){section .wrap[style*="repeat(4"]{grid-template-columns:repeat(2,1fr) !important; gap:22px 16px !important;}}`}</style>
    </section>
  );
}

/* ---------- SERVICES ---------- */
const SERVICES = [
  { id: "full", icon: "scissors", name: "Full Groom", price: 75, from: true, dur: "2–3 hrs", desc: "Bath, blow-dry, full haircut to your dog's style, nails, ears, and a gentle finishing spritz." },
  { id: "bath", icon: "drop", name: "Bath + Tidy", price: 45, from: true, dur: "60–90 min", desc: "Deep clean, blow-out, brush-out, nail trim and a sanitary tidy. No full haircut." },
  { id: "nails", icon: "paw", name: "Nails Only", price: 15, from: false, dur: "15–20 min", desc: "Quick, calm nail trim and file with a paw-pad check. In and out, no fuss." },
];

function Services({ onBook }) {
  return (
    <section id="services" style={{ padding: "92px 0" }}>
      <div className="wrap">
        <div style={{ display: "flex", justifyContent: "space-between", alignItems: "flex-end", flexWrap: "wrap", gap: 18, marginBottom: 44 }}>
          <div>
            <Reveal><span className="eyebrow">Services & pricing</span></Reveal>
            <Reveal delay={80}><h2 style={{ fontSize: "clamp(34px, 4.4vw, 54px)", marginTop: 16 }}>Honest prices,<br/>no surprises.</h2></Reveal>
          </div>
          <Reveal delay={140}>
            <p style={{ maxWidth: 360, color: "var(--ink-soft)", fontSize: 16, lineHeight: 1.55 }}>
              Final price depends on coat & size — we'll confirm before any scissors come out. Prices shown are for small–medium dogs.
            </p>
          </Reveal>
        </div>
        <div style={{ display: "grid", gridTemplateColumns: "repeat(3,1fr)", gap: 18 }} className="svc-grid">
          {SERVICES.map((s, i) => (
            <Reveal key={s.id} delay={(i % 3) * 80}>
              <div className="svc-card" style={{
                background: "var(--paper)", border: "1px solid var(--line)", borderRadius: "var(--radius)",
                padding: "26px 24px 24px", height: "100%", display: "flex", flexDirection: "column",
                position: "relative", transition: "transform .25s ease, box-shadow .3s ease, border-color .25s",
              }}
                onMouseEnter={e => { e.currentTarget.style.transform = "translateY(-4px)"; e.currentTarget.style.boxShadow = "0 22px 44px -28px rgba(43,38,32,0.45)"; e.currentTarget.style.borderColor = "var(--accent)"; }}
                onMouseLeave={e => { e.currentTarget.style.transform = "none"; e.currentTarget.style.boxShadow = "none"; e.currentTarget.style.borderColor = "var(--line)"; }}>
                {s.popular && <span style={{ position: "absolute", top: 18, right: 18, fontSize: 11, fontWeight: 700, letterSpacing: "0.08em", textTransform: "uppercase", color: "#fff", background: "var(--accent)", padding: "5px 10px", borderRadius: 999 }}>Most booked</span>}
                <span style={{ width: 48, height: 48, borderRadius: 13, background: "var(--card)", color: "var(--accent)", display: "grid", placeItems: "center" }}>{Icon[s.icon](iconProps)}</span>
                <h3 style={{ fontSize: 24, marginTop: 20 }}>{s.name}</h3>
                <p style={{ fontSize: 14.5, lineHeight: 1.55, color: "var(--ink-soft)", marginTop: 10, flexGrow: 1 }}>{s.desc}</p>
                <div style={{ display: "flex", alignItems: "baseline", justifyContent: "space-between", marginTop: 20, paddingTop: 18, borderTop: "1px solid var(--line)" }}>
                  <span style={{ fontFamily: "var(--font-display)", fontSize: 27, fontWeight: 700 }}>{s.from ? "from " : ""}${s.price}</span>
                  <span style={{ fontSize: 13, color: "var(--ink-soft)", display: "inline-flex", alignItems: "center", gap: 6 }}>{Icon.clock({ ...iconProps, width: 15, height: 15 })}{s.dur}</span>
                </div>
                <button className="btn btn-ghost" style={{ marginTop: 18, justifyContent: "center", width: "100%" }} onClick={() => onBook(s.id)}>Book this</button>
              </div>
            </Reveal>
          ))}
        </div>
      </div>
      <style>{`@media(max-width:900px){.svc-grid{grid-template-columns:repeat(2,1fr) !important;}}@media(max-width:600px){.svc-grid{grid-template-columns:1fr !important;}}`}</style>
    </section>
  );
}

Object.assign(window, { Reveal, PH, Icon, iconProps, Nav, Hero, TrustStrip, Services, SERVICES });