/* global React, window */
// Shampooch — shared components.

const { useState, useEffect, useRef } = React;
const D = window.SHAMPOOCH_DATA;

// ----- Routing helpers -----
function useHashRoute() {
  const [route, setRoute] = useState(() => window.location.hash.replace(/^#/, "") || "/");
  useEffect(() => {
    const onHash = () => {
      setRoute(window.location.hash.replace(/^#/, "") || "/");
      window.scrollTo({ top: 0, behavior: "instant" });
    };
    window.addEventListener("hashchange", onHash);
    return () => window.removeEventListener("hashchange", onHash);
  }, []);
  return route;
}
function go(path) { window.location.hash = path; }

// Trivial icon set (kept minimal — no decorative SVG)
function Icon({ name, size = 18 }) {
  const common = { width: size, height: size, viewBox: "0 0 24 24", fill: "none", stroke: "currentColor", strokeWidth: 2, strokeLinecap: "round", strokeLinejoin: "round" };
  switch (name) {
    case "wa": return (
      <svg {...common} fill="currentColor" stroke="none" viewBox="0 0 32 32">
        <path d="M16 .5C7.4.5.5 7.4.5 16c0 2.8.7 5.5 2.1 7.9L0 32l8.4-2.2A15.4 15.4 0 0 0 16 31.5c8.6 0 15.5-6.9 15.5-15.5S24.6.5 16 .5Zm0 28.3c-2.5 0-4.9-.7-7-2l-.5-.3-5 1.3 1.3-4.9-.3-.5a12.8 12.8 0 1 1 11.5 6.4Zm7.1-9.6c-.4-.2-2.3-1.1-2.6-1.2-.3-.1-.6-.2-.9.2-.3.4-1 1.2-1.2 1.4-.2.2-.5.3-.9.1-.4-.2-1.6-.6-3-1.9-1.1-1-1.9-2.2-2.1-2.6-.2-.4 0-.6.2-.8.2-.2.4-.5.6-.7.2-.2.3-.4.4-.7.1-.3 0-.5 0-.7-.1-.2-.9-2.2-1.3-3-.3-.8-.7-.7-.9-.7H10c-.2 0-.6.1-.9.5-.3.4-1.2 1.2-1.2 2.9 0 1.7 1.2 3.4 1.4 3.6.2.3 2.4 3.7 5.9 5.2 3.5 1.5 3.5 1 4.2 1 .6-.1 2.3-.9 2.6-1.8.3-.9.3-1.7.2-1.8 0-.2-.3-.3-.7-.5Z"/>
      </svg>
    );
    case "phone": return <svg {...common}><path d="M22 16.92v3a2 2 0 0 1-2.18 2 19.79 19.79 0 0 1-8.63-3.07 19.5 19.5 0 0 1-6-6 19.79 19.79 0 0 1-3.07-8.67A2 2 0 0 1 4.11 2h3a2 2 0 0 1 2 1.72 13 13 0 0 0 .7 2.81 2 2 0 0 1-.45 2.11L8.09 9.91a16 16 0 0 0 6 6l1.27-1.27a2 2 0 0 1 2.11-.45 13 13 0 0 0 2.81.7A2 2 0 0 1 22 16.92Z"/></svg>;
    case "arrow": return <svg {...common}><path d="M5 12h14M13 5l7 7-7 7"/></svg>;
    case "arrow-up": return <svg {...common}><path d="M7 17 17 7M7 7h10v10"/></svg>;
    case "check": return <svg {...common}><path d="M20 6 9 17l-5-5"/></svg>;
    case "menu": return <svg {...common}><path d="M3 12h18M3 6h18M3 18h18"/></svg>;
    case "close": return <svg {...common}><path d="M18 6 6 18M6 6l12 12"/></svg>;
    case "shield": return <svg {...common}><path d="M12 22s8-4 8-10V5l-8-3-8 3v7c0 6 8 10 8 10Z"/></svg>;
    case "sparkle": return <svg {...common}><path d="M12 2v6M12 16v6M2 12h6M16 12h6M5 5l4 4M15 15l4 4M5 19l4-4M15 9l4-4"/></svg>;
    case "map": return <svg {...common}><path d="M21 10c0 7-9 13-9 13s-9-6-9-13a9 9 0 0 1 18 0Z"/><circle cx="12" cy="10" r="3"/></svg>;
    case "clock": return <svg {...common}><circle cx="12" cy="12" r="10"/><path d="M12 6v6l4 2"/></svg>;
    case "mail": return <svg {...common}><path d="M4 4h16v16H4z"/><path d="m4 6 8 7 8-7"/></svg>;
    case "star": return <svg {...common} fill="currentColor"><path d="m12 2 3 7 7 1-5 5 1 7-6-3-6 3 1-7-5-5 7-1Z"/></svg>;
    case "paw": return <svg {...common} fill="currentColor" stroke="none"><circle cx="6" cy="10" r="2"/><circle cx="10" cy="5" r="2"/><circle cx="14" cy="5" r="2"/><circle cx="18" cy="10" r="2"/><path d="M8 18c0-3 2-5 4-5s4 2 4 5-2 3-4 3-4 0-4-3Z"/></svg>;
    case "ig": return <svg {...common}><rect x="3" y="3" width="18" height="18" rx="5"/><circle cx="12" cy="12" r="4"/><circle cx="17.5" cy="6.5" r="1" fill="currentColor"/></svg>;
    case "tiktok": return <svg {...common}><path d="M21 8.5a6 6 0 0 1-5-2v9a5.5 5.5 0 1 1-5.5-5.5"/></svg>;
    default: return null;
  }
}

// ----- Logo mark -----
function LogoMark() {
  return (
    <a href="#/" className="logo-mark" aria-label="Shampooch home">
      <span style={{ display: "inline-flex", gap: 4 }}>
        <span className="dot-pink" />
        <span className="dot-yellow" />
      </span>
      <span>Shampooch</span>
    </a>
  );
}

// ----- Nav -----
function Nav() {
  const route = useHashRoute();
  const [drawer, setDrawer] = useState(false);
  useEffect(() => { setDrawer(false); }, [route]);
  const isActive = (p) => route === p || (p !== "/" && route.startsWith(p));
  return (
    <div className="nav-wrap">
      <div className="shell nav">
        <LogoMark />
        <nav className="nav-links" aria-label="Primary">
          <a href="#/" className={isActive("/") && route === "/" ? "active" : ""}>Home</a>
          <div className="has-menu">
            <a href="#/services" className={isActive("/services") ? "active" : ""}>Services ▾</a>
            <div className="menu" role="menu">
              {D.services.map(s => (
                <a key={s.slug} href={`#/services/${s.slug}`}>
                  <strong>{s.name}</strong>
                  <small>{s.tagline}</small>
                </a>
              ))}
            </div>
          </div>
          <a href="#/about" className={isActive("/about") ? "active" : ""}>About</a>
          <a href="#/reviews" className={isActive("/reviews") ? "active" : ""}>Reviews</a>
          <a href="#/faq" className={isActive("/faq") ? "active" : ""}>FAQ</a>
          <a href="#/contact" className={isActive("/contact") ? "active" : ""}>Contact</a>
        </nav>
        <div style={{ display: "flex", gap: 10, marginLeft: "auto", alignItems: "center" }}>
          <a href={`https://wa.me/${D.contact.waNumber}?text=${encodeURIComponent("Hi Shampooch! I'd like to book.")}`}
             target="_blank" rel="noreferrer"
             className="btn btn-pink btn-sm" style={{ display: "none" }}
             ref={el => { if (el) el.style.display = window.innerWidth >= 960 ? "inline-flex" : "none"; }}>
            <Icon name="wa" size={16} /> Book on WhatsApp
          </a>
          <button className="hamburger" onClick={() => setDrawer(true)} aria-label="Open menu">
            <Icon name="menu" />
          </button>
        </div>
      </div>
      {drawer && (
        <div className={`mobile-drawer open`}>
          <div style={{ display: "flex", justifyContent: "space-between", alignItems: "center", marginBottom: 16 }}>
            <LogoMark />
            <button className="hamburger" onClick={() => setDrawer(false)} aria-label="Close menu"><Icon name="close" /></button>
          </div>
          <a href="#/">Home</a>
          <a href="#/services">Services</a>
          {D.services.map(s => <a key={s.slug} href={`#/services/${s.slug}`} style={{ paddingLeft: 16, fontSize: 18 }}>{s.name}</a>)}
          <a href="#/about">About</a>
          <a href="#/reviews">Reviews</a>
          <a href="#/faq">FAQ</a>
          <a href="#/contact">Contact</a>
          <a href="#/book" className="btn btn-pink" style={{ marginTop: 16, justifyContent: "center" }}>
            <Icon name="wa" /> Book on WhatsApp
          </a>
        </div>
      )}
    </div>
  );
}

// ----- WA button helper -----
function waLink(text) {
  return `https://wa.me/${D.contact.waNumber}?text=${encodeURIComponent(text)}`;
}

// ----- Trust strip (marquee) -----
function TrustStrip() {
  const items = [
    "Family-run · 20+ years caring for Dubai's dogs",
    "Vaccination-safe — booklet required",
    "Fluff-dried · no box dryers",
    "Tick control · Frontline available",
    "24/7 supervised boarding · staff sleep with the pack",
    "Advanced air-filtration · cameras · alarms",
    "Dogs only · 4 months +",
  ];
  return (
    <div className="trust-strip" role="region" aria-label="Trust & safety">
      <div className="marquee" aria-hidden="true">
        <div className="marquee-track">
          {[...items, ...items, ...items].map((t, i) => (
            <span key={i} style={{ display: "inline-flex", alignItems: "center", gap: 10 }}>
              <Icon name="paw" size={14} />
              <span style={{ color: "var(--cream)" }}>{t}</span>
            </span>
          ))}
        </div>
      </div>
    </div>
  );
}

// ----- Trust chips (inline) -----
function TrustChips({ items }) {
  return (
    <div className="row-wrap">
      {items.map((t, i) => (
        <span key={i} className="chip"><span className="dot" /> {t}</span>
      ))}
    </div>
  );
}

// ----- Service tile -----
function ServiceTile({ s, index }) {
  return (
    <a href={`#/services/${s.slug}`} className="svc-tile">
      <img src={`media/${s.tile}.webp`} alt={`${s.name} — ${s.tagline}`} loading="lazy" />
      <div className="overlay" />
      <div className="num">{s.num} · {s.tagline}</div>
      {s.badge && <span className="badge">{s.badge}</span>}
      <div className="meta">
        <h3>{s.name}</h3>
        <p>{s.short}</p>
      </div>
    </a>
  );
}

// ----- Big quote block -----
function VerifiedQuote() {
  const t = D.testimonial;
  return (
    <div className="card" style={{ padding: "40px 36px", maxWidth: 880, margin: "0 auto", background: "var(--paper)" }}>
      <div style={{ display: "flex", gap: 8, marginBottom: 14 }}>
        {[0,1,2,3,4].map(i => <Icon key={i} name="star" size={20} />)}
        <span className="verified-badge" style={{ marginLeft: 8 }}>
          <Icon name="check" size={12} /> Verified
        </span>
      </div>
      <p className="big-quote" style={{ margin: 0 }}>{t.body}</p>
      <div style={{ marginTop: 22, display: "flex", alignItems: "center", gap: 12 }}>
        <div style={{
          width: 44, height: 44, borderRadius: 999,
          background: "var(--pooch-pink)", color: "white",
          display: "inline-flex", alignItems: "center", justifyContent: "center",
          fontFamily: "var(--font-display)", fontWeight: 700,
        }}>MG</div>
        <div>
          <div style={{ fontWeight: 700 }}>{t.name}</div>
          <div style={{ color: "var(--slate)", fontSize: 14 }}>{t.role}</div>
        </div>
      </div>
    </div>
  );
}

// ----- Footer -----
function Footer() {
  return (
    <footer className="footer">
      <div className="shell">
        <div className="grid">
          <div>
            <div style={{ display: "flex", gap: 8, alignItems: "center", marginBottom: 14 }}>
              <span style={{ width: 10, height: 10, borderRadius: 999, background: "var(--pooch-pink)" }}/>
              <span style={{ width: 10, height: 10, borderRadius: 999, background: "var(--pooch-yellow)" }}/>
              <strong style={{ fontFamily: "var(--font-display)", fontSize: 22 }}>Shampooch</strong>
            </div>
            <p style={{ color: "rgba(251,245,236,0.7)", maxWidth: "32ch", margin: 0 }}>
              The place where good dogs go to get pampered.<br/>
              Family-run, premium dog care in Dubai for over 20 years.
            </p>
            <div style={{ marginTop: 22, display: "flex", gap: 10 }}>
              <a href={D.contact.instagram} target="_blank" rel="noreferrer" aria-label="Instagram" style={{ width: 40, height: 40, borderRadius: 999, background: "rgba(251,245,236,0.08)", display: "inline-flex", alignItems: "center", justifyContent: "center" }}><Icon name="ig" /></a>
              <a href={D.contact.tiktok} target="_blank" rel="noreferrer" aria-label="TikTok" style={{ width: 40, height: 40, borderRadius: 999, background: "rgba(251,245,236,0.08)", display: "inline-flex", alignItems: "center", justifyContent: "center" }}><Icon name="tiktok" /></a>
              <a href={waLink("Hi Shampooch!")} target="_blank" rel="noreferrer" aria-label="WhatsApp" style={{ width: 40, height: 40, borderRadius: 999, background: "#25D366", display: "inline-flex", alignItems: "center", justifyContent: "center", color: "white" }}><Icon name="wa" /></a>
            </div>
          </div>
          <div>
            <h5>Services</h5>
            <ul>
              {D.services.map(s => <li key={s.slug}><a href={`#/services/${s.slug}`}>{s.name}</a></li>)}
            </ul>
          </div>
          <div>
            <h5>Visit</h5>
            <ul>
              <li>674 Al Wasl Rd<br/>Jumeirah 3, Dubai</li>
              <li>{D.contact.hoursGeneral}</li>
              <li style={{ color: "rgba(251,245,236,0.55)", fontSize: 13 }}>{D.contact.hoursBoarding}</li>
            </ul>
          </div>
          <div>
            <h5>Contact</h5>
            <ul>
              <li><a href={waLink("Hi Shampooch!")} target="_blank" rel="noreferrer">WhatsApp · {D.contact.waDisplay}</a></li>
              <li><a href={`tel:${D.contact.landline}`}>Call · {D.contact.landlineDisplay}</a></li>
              <li><a href={`mailto:${D.contact.email}`}>{D.contact.email}</a></li>
              <li><a href="#/book">Book / get a quote</a></li>
              <li><a href="#/faq">FAQ</a></li>
            </ul>
          </div>
        </div>
        <div className="bottom">
          <span>© Shampooch UAE. Dogs only. Quotes by phone or WhatsApp.</span>
          <span>Made with floof in Dubai · <a href="#/" className="link">shampooch.ae</a></span>
        </div>
      </div>
    </footer>
  );
}

// ----- Floating WhatsApp + Mobile bar -----
function FloatingCTAs() {
  return (
    <>
      <a className="whatsapp-fab"
         href={waLink("Hi Shampooch! I'd like to book.")}
         target="_blank" rel="noreferrer" aria-label="Book on WhatsApp">
        <Icon name="wa" size={26} />
      </a>
      <div className="mobile-bar">
        <a href={`tel:${D.contact.landline}`} className="call"><Icon name="phone" size={16} /> Call</a>
        <a href={waLink("Hi Shampooch! I'd like to book.")} target="_blank" rel="noreferrer" className="wa"><Icon name="wa" size={16} /> WhatsApp</a>
        <a href="#/book" className="book"><Icon name="arrow" size={16} /> Book</a>
      </div>
    </>
  );
}

// ----- Page wrapper -----
function PageWrap({ children }) {
  return (
    <>
      <Nav />
      <main>{children}</main>
      <Footer />
      <FloatingCTAs />
    </>
  );
}

// expose
Object.assign(window, {
  Nav, Footer, FloatingCTAs, PageWrap, Icon, LogoMark, TrustStrip, TrustChips,
  ServiceTile, VerifiedQuote, useHashRoute, go, waLink,
});