/* ============================================================
   MVH Mobile Detailing — shared component library
   Loaded as a global babel script. React is global.
   Exposes components + data on window.
   ============================================================ */

/* ---------- Brand constants ---------- */
const MVH = {
  phoneDisplay: '07311 796805',
  tel: '+447311796805',
  wa: '447311796805',
  email: 'j.m.stephens346@gmail.com',
  logo: MVH_THEME + '/assets/mvh-logo.png',
};
const waLink = (msg) => `https://wa.me/${MVH.wa}?text=${encodeURIComponent(msg || "Hi MVH, I'd like to book a detail.")}`;
/* Towns that have a dedicated SEO page */
const LOC_PAGES = ['cannock','hednesford','rugeley','stafford','lichfield','burntwood','sutton-coldfield','burton-upon-trent'];
const townHref = (name) => { const k = name.toLowerCase().replace(/ /g, '-'); return LOC_PAGES.includes(k) ? `mobile-car-detailing-${k}/` : '/services/'; };

/* ---------- Navigation links ---------- */
const NAV_LINKS = [
  { label: 'Services',     href: '/services/' },
  { label: 'Ceramic',      href: '/ceramic-coating/' },
  { label: 'Diagnostics',  href: '/diagnostics/' },
  { label: 'Gallery',      href: '/gallery/' },

  { label: 'About',        href: '/about/' },
  { label: 'Contact',      href: '/contact/' },
];

/* ---------- Service areas ---------- */
const AREAS = [
  'Hednesford', 'Cannock', 'Burntwood', 'Rugeley', 'Lichfield', 'Stafford',
  'Sutton Coldfield', 'Featherstone', 'Huntington', 'Pye Green', 'Burton upon Trent',
];

/* ---------- Service tiers ---------- */
const SERVICES = [
  {
    key: 'bronze', name: 'Bronze', tagline: 'Maintenance Detail', href: '/service-bronze/',
    cover: MVH_THEME + '/assets/cover-bronze.avif',
    blurb: 'Keep an already-cared-for vehicle pristine. Monthly bookings only.',
    time: '1 – 1.5 hrs', priceReg: '£45 – £55', priceLrg: '£55 – £65',
    includes: ['Safe wash & dry', 'Wheels cleaned', 'Tyre dressing', 'Vacuum', 'Dashboard wipe', 'Windows cleaned'],
  },
  {
    key: 'silver', name: 'Silver', tagline: 'Full Valet', href: '/service-silver/',
    cover: MVH_THEME + '/assets/cover-silver.avif',
    blurb: 'The best all-round package. Inside and out, restored to fresh.',
    time: '2 – 3 hrs', priceReg: '£70 – £120', priceLrg: '£100 – £150', popular: true,
    includes: ['Safe wash & dry', 'Wheels cleaned', 'Tyre dressing', 'Deep vacuum', 'Dashboard wipe', 'Windows cleaned', 'Door shuts cleaned', 'Seat & carpet spot clean', 'Plastic trim cleaned', 'Sealant protection'],
  },
  {
    key: 'gold', name: 'Gold', tagline: 'Enhancement Detail', href: '/service-gold/',
    cover: MVH_THEME + '/assets/cover-gold.png',
    blurb: 'Machine polish enhancement that brings back true depth and gloss.',
    time: '4 – 6 hrs', priceReg: '£150 – £300', priceLrg: '£220 – £400',
    includes: ['Everything in Silver', 'Clay mitt / bar treatment', 'Machine polish enhancement', 'Paint gloss boost', 'Wax sealant protection'],
  },
  {
    key: 'platinum', name: 'Platinum', tagline: 'Showroom Detail', href: '/service-platinum/',
    cover: MVH_THEME + '/assets/cover-platinum.avif',
    blurb: 'Our flagship. Multi-stage correction and protection, end to end.',
    time: 'Full day +', priceReg: '£350 +', priceLrg: '£450 +',
    includes: ['Multi-stage decontamination', 'Full 2-stage machine polish', 'Interior deep clean', 'Leather clean & condition', 'Engine bay detail', 'Long-lasting paint protection', 'Fabric roof treatment (if applicable)'],
  },
];

/* ---------- Diamond flagship tier ---------- */
const DIAMOND_SERVICE = {
  key: 'diamond', name: 'Diamond', tagline: 'Ultimate Detail', href: '/service-diamond/',
  cover: MVH_THEME + '/assets/cover-diamond.jpg',
  blurb: 'The ultimate paint correction, ceramic protection and total vehicle enhancement — MVH Detailing\'s most exclusive package.',
  time: 'Full day +', priceSmall: '£500 – £550', priceLarge: '£600 – £630',
  includes: [
    'Multi-stage decontamination', 'Full 2-stage machine polish', 'Interior deep clean',
    'Leather clean & condition', 'Engine bay detail', 'Long-lasting paint protection',
    'Fabric roof treatment (if applicable)', '2 year paintwork ceramic coating included',
    '2 year wheel face ceramic coating included',
  ],
};

/* ---------- Interior Reset standalone service ---------- */
const INTERIOR_RESET = {
  key: 'interior-reset', name: 'Interior Reset', tagline: 'Interior Reset Detail', href: '/service-interior-reset/',
  cover: MVH_THEME + '/assets/cover-interior.avif',
  blurb: 'A comprehensive interior restoration service designed to refresh, sanitise and rejuvenate your vehicle\'s cabin.',
  time: '2 – 4 hrs', priceMed: '£100 – £120', priceLrg: '£120 – £140', priceReg: '£100 – £120',
  includes: [
    'Full interior vacuum', 'Deep clean of carpets and mats',
    'Dashboard, centre console and trim cleaned', 'Door cards cleaned and dressed',
    'Air vents thoroughly cleaned', 'Cup holders and storage compartments cleaned',
    'Interior glass cleaned streak-free', 'Plastic and vinyl surfaces protected',
    'Light stain removal', 'Boot area vacuumed and cleaned',
  ],
  upgrades: [
    'Fabric seat shampoo and extraction', 'Leather clean and conditioning',
    'Pet hair removal', 'Heavy stain removal', 'Child seat deep clean',
  ],
};

const ADDONS = [
  { name: 'Ceramic coating — paintwork', price: '£150 – £250' },
  { name: 'Window coating', price: '£100 – £150' },
  { name: 'Wheel face ceramic coating', price: '£100 – £170' },
  { name: 'Pet hair removal', price: '£20 – £80' },
  { name: 'Mould removal', price: '£80 – £250+' },
  { name: 'Engine bay detail', price: '£40' },
  { name: 'Headlight restoration', price: '£60 – £100' },
  { name: 'Leather conditioning', price: '£30 – £35' },
  { name: 'Child seat clean', price: '£30' },
  { name: 'Soft top protection', price: '£50 – £60' },
  { name: 'Scratch reduction', price: '£50 – £300' },
];

/* ---------- Reviews ----------
   Real figures from the MVH Google Business Profile. The six invented
   "reviews" that shipped with the original design have been removed —
   the section links to Google instead of showing made-up testimonials. */
const MVHG = (typeof window !== 'undefined' && window.MVH_REVIEWS) ? window.MVH_REVIEWS : {};
/* Contact/booking form key (Web3Forms). Set in WordPress:
   Settings > MVH Google Reviews > Contact form access key. */
const FORM_KEY_FALLBACK = '2771599c-04cc-4eb5-a9cb-d1d5685429a1'; // Web3Forms access key (public by design — safe in page code)
const FORM_KEY = (typeof window !== 'undefined' && window.MVH_FORMKEY) ? window.MVH_FORMKEY : FORM_KEY_FALLBACK;
const REVIEW_STATS = { rating: MVHG.rating || '5.0', count: MVHG.count || 11 };
const GBP_URL = MVHG.url || 'https://search.google.com/local/reviews?placeid=ChIJ9dSKjtMnVo4RTJcwN5AZ7mo';
const REVIEWS = Array.isArray(MVHG.items) ? MVHG.items : [];

/* ============================================================
   ICONS
   ============================================================ */
function Icon({ name, size = 22, color = 'currentColor', stroke = 1.7, style }) {
  const p = { fill: 'none', stroke: color, strokeWidth: stroke, strokeLinecap: 'round', strokeLinejoin: 'round' };
  const paths = {
    phone: <path d="M22 16.92v3a2 2 0 0 1-2.18 2 19.8 19.8 0 0 1-8.63-3.07 19.5 19.5 0 0 1-6-6 19.8 19.8 0 0 1-3.07-8.67A2 2 0 0 1 4.11 2h3a2 2 0 0 1 2 1.72c.13.96.36 1.9.7 2.81a2 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-.45c.91.34 1.85.57 2.81.7A2 2 0 0 1 22 16.92z" {...p} />,
    whatsapp: <g><path d="M3 21l1.65-4.5A8.5 8.5 0 1 1 12 20a8.4 8.4 0 0 1-4.2-1.1L3 21z" {...p} /><path d="M8.5 9c0 4 2.5 6.5 6.5 6.5 0 0 1.2.05 1.5-1 .1-.4-.1-.6-.4-.8l-1.5-.8c-.3-.15-.5-.05-.7.2l-.4.5c-.15.2-.3.2-.5.1a5.2 5.2 0 0 1-2.5-2.5c-.1-.2-.1-.35.1-.5l.5-.4c.25-.2.35-.4.2-.7l-.8-1.5c-.2-.3-.4-.5-.8-.4C9.45 7.8 8.5 9 8.5 9z" fill={color} stroke="none" /></g>,
    star: <path d="M12 2l2.9 6.26L22 9.27l-5 4.87 1.18 6.88L12 17.77l-6.18 3.25L7 14.14 2 9.27l7.1-1.01L12 2z" fill={color} stroke="none" />,
    check: <polyline points="20 6 9 17 4 12" {...p} />,
    arrow: <g {...p}><line x1="5" y1="12" x2="19" y2="12" /><polyline points="13 6 19 12 13 18" /></g>,
    arrowUpRight: <g {...p}><line x1="7" y1="17" x2="17" y2="7" /><polyline points="7 7 17 7 17 17" /></g>,
    plus: <g {...p}><line x1="12" y1="5" x2="12" y2="19" /><line x1="5" y1="12" x2="19" y2="12" /></g>,
    menu: <g {...p}><line x1="3" y1="7" x2="21" y2="7" /><line x1="3" y1="12" x2="21" y2="12" /><line x1="3" y1="17" x2="21" y2="17" /></g>,
    close: <g {...p}><line x1="5" y1="5" x2="19" y2="19" /><line x1="19" y1="5" x2="5" y2="19" /></g>,
    pin: <g {...p}><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" /></g>,
    clock: <g {...p}><circle cx="12" cy="12" r="9" /><polyline points="12 7 12 12 15 14" /></g>,
    shield: <g {...p}><path d="M12 2l8 3v6c0 5-3.5 8.5-8 11-4.5-2.5-8-6-8-11V5l8-3z" /><polyline points="9 12 11 14 15 10" /></g>,
    sparkle: <g {...p}><path d="M12 3l1.6 4.8L18 9.4l-4.4 1.6L12 16l-1.6-5L6 9.4l4.4-1.6L12 3z" /></g>,
    car: <g {...p}><path d="M5 13l1.5-4.5A2 2 0 0 1 8.4 7h7.2a2 2 0 0 1 1.9 1.5L19 13" /><path d="M3 13h18v4a1 1 0 0 1-1 1h-1a1 1 0 0 1-1-1v-1H6v1a1 1 0 0 1-1 1H4a1 1 0 0 1-1-1v-4z" /><circle cx="7.5" cy="15.5" r="0.6" /><circle cx="16.5" cy="15.5" r="0.6" /></g>,
    droplet: <path d="M12 2.5s6 6.3 6 10.5a6 6 0 0 1-12 0c0-4.2 6-10.5 6-10.5z" {...p} />,
    mail: <g {...p}><rect x="3" y="5" width="18" height="14" rx="1.5" /><polyline points="3 7 12 13 21 7" /></g>,
    cart: <g {...p}><circle cx="9" cy="20" r="1.3" /><circle cx="18" cy="20" r="1.3" /><path d="M2 3h3l2.4 12.4a1.5 1.5 0 0 0 1.5 1.2h8.2a1.5 1.5 0 0 0 1.5-1.2L21 7H6" /></g>,
    award: <g {...p}><circle cx="12" cy="9" r="6" /><polyline points="9 14 8 22 12 19 16 22 15 14" /></g>,
  };
  return <svg width={size} height={size} viewBox="0 0 24 24" style={style}>{paths[name]}</svg>;
}

function Stars({ n = 5, size = 16 }) {
  return <span className="stars">{Array.from({ length: n }).map((_, i) => <Icon key={i} name="star" size={size} color="var(--lambo-gold)" />)}</span>;
}

/* ============================================================
   SCROLL REVEAL
   ============================================================ */
function Reveal({ children, delay = 0, as = 'div', className = '', style }) {
  const ref = React.useRef(null);
  React.useEffect(() => {
    const el = ref.current; if (!el) return;
    const io = new IntersectionObserver((entries) => {
      entries.forEach(e => { if (e.isIntersecting) { setTimeout(() => el.classList.add('in'), delay); io.unobserve(el); } });
    }, { threshold: 0.12, rootMargin: '0px 0px -8% 0px' });
    io.observe(el); return () => io.disconnect();
  }, [delay]);
  const Tag = as;
  return <Tag ref={ref} className={`reveal ${className}`} style={style}>{children}</Tag>;
}

/* ============================================================
   PRIMITIVES
   ============================================================ */
function Eyebrow({ children, center }) {
  return <div className={`eyebrow ${center ? 'eyebrow--center' : ''}`}>{children}</div>;
}
function Button({ children, variant = 'gold', size, href, onClick, block, icon, style, target }) {
  const cls = `btn btn--${variant}${size ? ' btn--' + size : ''}${block ? ' btn--block' : ''}`;
  const inner = <>{children}{icon && <Icon name={icon} size={17} />}</>;
  if (href) return <a className={cls} href={href} onClick={onClick} style={style} target={target}>{inner}</a>;
  return <button className={cls} onClick={onClick} style={style}>{inner}</button>;
}

/* ============================================================
   NAV
   ============================================================ */
function Nav({ active }) {
  const [scrolled, setScrolled] = React.useState(false);
  const [open, setOpen] = React.useState(false);
  React.useEffect(() => {
    const onScroll = () => setScrolled(window.scrollY > 24);
    onScroll(); window.addEventListener('scroll', onScroll, { passive: true });
    return () => window.removeEventListener('scroll', onScroll);
  }, []);
  React.useEffect(() => { document.body.style.overflow = open ? 'hidden' : ''; }, [open]);

  return (
    <>
      <header className={`nav ${scrolled ? 'nav--scrolled' : ''}`}>
        <a className="nav__logo" href="/" aria-label="MVH Mobile Detailing — home">
          <img src={MVH.logo} alt="MVH Mobile Detailing" />
        </a>
        <nav className="nav__links">
          {NAV_LINKS.map(l => (
            <a key={l.href} href={l.href} className={`nav__link ${active === l.label ? 'active' : ''}`}>{l.label}</a>
          ))}
        </nav>
        <div className="nav__right">
          <a className="nav__cta-desktop btn btn--gold btn--sm" href="/booking/">Book Now</a>
          <button className="nav__burger" aria-label="Open menu" onClick={() => setOpen(true)}>
            <span></span><span></span><span></span>
          </button>
        </div>
      </header>

      <div className={`menu ${open ? 'open' : ''}`}>
        <div className="menu__top">
          <img src={MVH.logo} alt="MVH" style={{ height: 42 }} />
          <button className="menu__close" aria-label="Close menu" onClick={() => setOpen(false)}><Icon name="close" size={28} /></button>
        </div>
        <nav className="menu__list">
          {[{ label: 'Home', href: '/' }, ...NAV_LINKS].map((l, i) => (
            <a key={l.href} className="menu__item" href={l.href}>
              <span className="num">0{i + 1}</span>
              <span className="lbl">{l.label}</span>
            </a>
          ))}
        </nav>
        <div style={{ display: 'grid', gridTemplateColumns: '1fr 1fr', gap: 12 }}>
          <Button href="/booking/" variant="gold" block>Book Now</Button>
          <Button href={`tel:${MVH.tel}`} variant="ghost" block icon="phone">Call</Button>
        </div>
      </div>
    </>
  );
}

/* ============================================================
   STICKY ACTION BAR + DESKTOP FLOATERS
   ============================================================ */
function StickyActions() {
  /* No point offering "Book Now" to someone already on the booking page —
     hide it there and let Call + WhatsApp share the bar evenly. */
  const onBookingPage = (() => {
    try {
      return /^\/booking\/?$/.test(window.location.pathname);
    } catch (err) {
      return false;
    }
  })();

  return (
    <>
      <div className="actionbar" style={onBookingPage ? { gridTemplateColumns: '1fr 1fr' } : undefined}>
        <a href={`tel:${MVH.tel}`}><Icon name="phone" size={19} />Call</a>
        <a className="wa" href={waLink()} target="_blank" rel="noreferrer"><Icon name="whatsapp" size={19} color="#fff" />WhatsApp</a>
        {!onBookingPage && <a className="book" href="/booking/"><Icon name="sparkle" size={19} color="#0a0a0a" />Book Now</a>}
      </div>
      <div className="floaters">
        <a className="floater floater--wa" href={waLink()} target="_blank" rel="noreferrer" aria-label="WhatsApp us"><Icon name="whatsapp" size={26} color="#fff" /></a>
        <a className="floater floater--call" href={`tel:${MVH.tel}`} aria-label="Call us"><Icon name="phone" size={22} color="var(--lambo-gold)" /></a>
      </div>
    </>
  );
}

/* ============================================================
   FOOTER
   ============================================================ */
function Footer() {
  return (
    <footer className="footer">
      <div className="shell">
        <div className="footer__grid">
          <div className="footer__brand">
            <img src={MVH.logo} alt="MVH Mobile Detailing" />
            <p style={{ color: 'var(--ash)', fontSize: 14, lineHeight: 1.6, maxWidth: 320, fontWeight: 300 }}>
              Premium mobile vehicle detailing, paint enhancement and ceramic coating — brought directly to your driveway across Staffordshire.
            </p>
            <div style={{ display: 'flex', gap: 12, marginTop: 22 }}>
              <a className="pill pill--gold" href={`tel:${MVH.tel}`}><Icon name="phone" size={13} />{MVH.phoneDisplay}</a>
            </div>
          </div>
          <div className="footer__col">
            <h4>Services</h4>
            {SERVICES.map(s => <a key={s.key} href={s.href}>{s.name} — {s.tagline}</a>)}
            <a href={DIAMOND_SERVICE.href}>{DIAMOND_SERVICE.name} — {DIAMOND_SERVICE.tagline}</a>
            <a href="/ceramic-coating/">Ceramic Coating</a>
          </div>
          <div className="footer__col">
            <h4>Explore</h4>
            <a href="/gallery/">Gallery</a>
            <a href="/shop/">Product Shop</a>
            <a href="/about/">About MVH</a>
            <a href="/booking/">Book Online</a>
            <a href="/contact/">Contact</a>
          </div>
          <div className="footer__col">
            <h4>Service Areas</h4>
            <div style={{ display: 'flex', flexWrap: 'wrap', gap: '0 14px' }}>
              {AREAS.slice(0, 8).map(a => (
                <a key={a} href={townHref(a)} style={{ marginBottom: 8 }}>{a}</a>
              ))}
            </div>
            <p style={{ marginTop: 8 }}>…and surrounding areas.</p>
          </div>
        </div>
        <div className="footer__bottom">
          <span>© {new Date().getFullYear()} MVH Mobile Detailing. All rights reserved.</span>
          <span style={{ display: 'flex', gap: 18 }}>
            <a href={`mailto:${MVH.email}`} style={{ color: 'var(--ash)' }}>{MVH.email}</a>
          </span>
        </div>
      </div>
    </footer>
  );
}

/* ============================================================
   FAQ
   ============================================================ */
function FAQ({ items }) {
  const [open, setOpen] = React.useState(0);
  return (
    <div className="faq">
      {items.map((it, i) => (
        <div key={i} className={`faq__item ${open === i ? 'open' : ''}`}>
          <button className="faq__q" onClick={() => setOpen(open === i ? -1 : i)}>
            <span>{it.q}</span><span className="ico">+</span>
          </button>
          <div className="faq__a" style={{ maxHeight: open === i ? 320 : 0 }}>
            <div>{it.a}</div>
          </div>
        </div>
      ))}
    </div>
  );
}

/* ============================================================
   REVIEWS SECTION
   ============================================================ */
function ReviewCard({ r }) {
  return (
    <div className="card" style={{ padding: '26px 24px', display: 'flex', flexDirection: 'column', gap: 14 }}>
      <div style={{ display: 'flex', alignItems: 'center', gap: 12 }}>
        <div style={{ width: 42, height: 42, borderRadius: '50%', background: 'var(--gold-metal)', color: '#1a1a1a',
          display: 'flex', alignItems: 'center', justifyContent: 'center', fontFamily: 'var(--font-display)', fontWeight: 700, fontSize: 18 }}>{r.initial}</div>
        <div style={{ flex: 1 }}>
          <div style={{ fontFamily: 'var(--font-display)', fontWeight: 600, fontSize: 15, letterSpacing: 0.3 }}>
            {r.url ? <a href={r.url} target="_blank" rel="noopener noreferrer" style={{ color: 'inherit' }}>{r.name}</a> : <span>{r.name}</span>}
          </div>
          <div style={{ fontSize: 12, color: 'var(--ash)' }}>{r.date}</div>
        </div>
        <svg width="20" height="20" viewBox="0 0 48 48" aria-label="Google"><path fill="#4285F4" d="M45.12 24.5c0-1.56-.14-3.06-.4-4.5H24v8.51h11.84c-.51 2.75-2.06 5.08-4.39 6.64v5.52h7.11c4.16-3.83 6.56-9.47 6.56-16.17z"/><path fill="#34A853" d="M24 46c5.94 0 10.92-1.97 14.56-5.33l-7.11-5.52c-1.97 1.32-4.49 2.1-7.45 2.1-5.73 0-10.58-3.87-12.31-9.07H4.34v5.7C7.96 41.07 15.4 46 24 46z"/><path fill="#FBBC05" d="M11.69 28.18C11.25 26.86 11 25.45 11 24s.25-2.86.69-4.18v-5.7H4.34A22 22 0 0 0 2 24c0 3.55.85 6.91 2.34 9.88l7.35-5.7z"/><path fill="#EA4335" d="M24 9.75c3.23 0 6.13 1.11 8.41 3.29l6.31-6.31C34.91 2.97 29.93 1 24 1 15.4 1 7.96 5.93 4.34 14.12l7.35 5.7c1.73-5.2 6.58-9.07 12.31-9.07z"/></svg>
      </div>
      <Stars />
      <p style={{ color: 'var(--smoke)', fontSize: 14.5, lineHeight: 1.6, fontWeight: 300, margin: 0 }}>"{r.text}"</p>
      {r.vehicle && <div style={{ marginTop: 'auto', paddingTop: 6, fontSize: 12, color: 'var(--ash)', display: 'flex', alignItems: 'center', gap: 7 }}>
        <Icon name="car" size={15} color="var(--lambo-gold-text)" /><span>{r.vehicle}</span>
      </div>}
    </div>
  );
}

function ReviewsSection() {
  return (
    <section className="section section--deep">
      <div className="shell">
        <div style={{ display: 'flex', flexWrap: 'wrap', alignItems: 'flex-end', justifyContent: 'space-between', gap: 24, marginBottom: 48 }}>
          <div>
            <Eyebrow>Verified Google Reviews</Eyebrow>
            <h2 className="display h-1" style={{ marginTop: 18 }}>Trusted across<br />Staffordshire</h2>
          </div>
          <Reveal className="card" style={{ padding: '22px 28px', display: 'flex', alignItems: 'center', gap: 20 }}>
            <div style={{ textAlign: 'center' }}>
              <div style={{ fontFamily: 'var(--font-display)', fontWeight: 700, fontSize: 46, lineHeight: 1, color: 'var(--lambo-gold-text)' }}>{REVIEW_STATS.rating}</div>
              <Stars />
            </div>
            <div style={{ borderLeft: '1px solid #2a2a2a', paddingLeft: 20 }}>
              <div style={{ display: 'flex', alignItems: 'center', gap: 8, marginBottom: 4 }}>
                <svg width="20" height="20" viewBox="0 0 48 48"><path fill="#4285F4" d="M45.12 24.5c0-1.56-.14-3.06-.4-4.5H24v8.51h11.84c-.51 2.75-2.06 5.08-4.39 6.64v5.52h7.11c4.16-3.83 6.56-9.47 6.56-16.17z"/><path fill="#34A853" d="M24 46c5.94 0 10.92-1.97 14.56-5.33l-7.11-5.52c-1.97 1.32-4.49 2.1-7.45 2.1-5.73 0-10.58-3.87-12.31-9.07H4.34v5.7C7.96 41.07 15.4 46 24 46z"/><path fill="#FBBC05" d="M11.69 28.18C11.25 26.86 11 25.45 11 24s.25-2.86.69-4.18v-5.7H4.34A22 22 0 0 0 2 24c0 3.55.85 6.91 2.34 9.88l7.35-5.7z"/><path fill="#EA4335" d="M24 9.75c3.23 0 6.13 1.11 8.41 3.29l6.31-6.31C34.91 2.97 29.93 1 24 1 15.4 1 7.96 5.93 4.34 14.12l7.35 5.7c1.73-5.2 6.58-9.07 12.31-9.07z"/></svg>
                <span style={{ fontFamily: 'var(--font-display)', fontWeight: 600, fontSize: 14, letterSpacing: 0.5 }}>Google Rating</span>
              </div>
              <div style={{ fontSize: 13, color: 'var(--ash)' }}>Based on {REVIEW_STATS.count} reviews</div>
            </div>
          </Reveal>
        </div>
        {REVIEWS.length > 0 && (
          <div className="grid grid-3">
            {REVIEWS.map((r, i) => <Reveal key={i} delay={i * 70}><ReviewCard r={r} /></Reveal>)}
          </div>
        )}
      </div>
    </section>
  );
}

/* ============================================================
   SERVICE AREAS SECTION
   ============================================================ */
function AreasSection() {
  return (
    <section className="section">
      <div className="shell">
        <div style={{ textAlign: 'center', marginBottom: 44 }}>
          <div style={{ display: 'flex', justifyContent: 'center' }}><Eyebrow center>Mobile · We Come To You</Eyebrow></div>
          <h2 className="display h-1" style={{ marginTop: 18 }}>Serving Staffordshire</h2>
          <p className="lede" style={{ margin: '16px auto 0' }}>Fully self-sufficient mobile detailing — we bring our own power and water. Tap your town for local pricing & availability.</p>
        </div>
        <div style={{ display: 'flex', flexWrap: 'wrap', gap: 12, justifyContent: 'center' }}>
          {AREAS.map(a => (
            <a key={a} href={townHref(a)} className="card" style={{ padding: '14px 20px', display: 'inline-flex', alignItems: 'center', gap: 9,
              fontFamily: 'var(--font-display)', fontWeight: 500, letterSpacing: 0.6, fontSize: 15 }}>
              <Icon name="pin" size={16} color="var(--lambo-gold)" />{a}
            </a>
          ))}
        </div>
      </div>
    </section>
  );
}

/* ============================================================
   CTA BAND
   ============================================================ */
function CTABand({ title = 'Ready for showroom results?', sub = 'Book your detail in under a minute, or message us on WhatsApp for a tailored quote.' }) {
  return (
    <section className="section section--tight" style={{ background: '#0a0a0a', borderTop: '1px solid #161616', borderBottom: '1px solid #161616' }}>
      <div className="shell" style={{ display: 'flex', flexWrap: 'wrap', alignItems: 'center', justifyContent: 'space-between', gap: 28 }}>
        <div>
          <div className="eyebrow">Enhance · Protect · Maintain</div>
          <h2 className="display h-2" style={{ marginTop: 14 }}>{title}</h2>
          <p className="muted" style={{ marginTop: 10, maxWidth: 52 + 'ch' }}>{sub}</p>
        </div>
        <div style={{ display: 'flex', gap: 12, flexWrap: 'wrap' }}>
          <Button href="/booking/" variant="gold" size="lg" icon="arrowUpRight">Book Now</Button>
          <Button href={waLink()} target="_blank" variant="ghost" size="lg" icon="whatsapp">Get A Quote</Button>
        </div>
      </div>
    </section>
  );
}

/* ============================================================
   BEFORE / AFTER SLIDER
   ============================================================ */
function BeforeAfter({ id, beforeLabel = 'Before', afterLabel = 'After', caption, height = 460 }) {
  const [pos, setPos] = React.useState(52);
  const ref = React.useRef(null);
  const dragging = React.useRef(false);
  const move = (clientX) => {
    const el = ref.current; if (!el) return;
    const r = el.getBoundingClientRect();
    let p = ((clientX - r.left) / r.width) * 100;
    p = Math.max(2, Math.min(98, p));
    setPos(p);
  };
  React.useEffect(() => {
    const up = () => (dragging.current = false);
    const mv = (e) => { if (dragging.current) move(e.touches ? e.touches[0].clientX : e.clientX); };
    window.addEventListener('mouseup', up); window.addEventListener('touchend', up);
    window.addEventListener('mousemove', mv); window.addEventListener('touchmove', mv, { passive: false });
    return () => { window.removeEventListener('mouseup', up); window.removeEventListener('touchend', up); window.removeEventListener('mousemove', mv); window.removeEventListener('touchmove', mv); };
  }, []);
  return (
    <div>
      <div ref={ref} style={{ position: 'relative', height, overflow: 'hidden', userSelect: 'none', cursor: 'ew-resize', background: '#141414', border: '1px solid #232323' }}
        onMouseDown={(e) => { dragging.current = true; move(e.clientX); }}
        onTouchStart={(e) => { dragging.current = true; move(e.touches[0].clientX); }}>
        {/* After (full) */}
        <image-slot id={id + '-after'} placeholder="Drop AFTER photo" shape="rect" style={{ position: 'absolute', inset: 0, width: '100%', height: '100%' }}></image-slot>
        <span style={{ position: 'absolute', right: 16, top: 16, zIndex: 5 }} className="pill pill--gold">{afterLabel}</span>
        {/* Before (clipped) */}
        <div style={{ position: 'absolute', inset: 0, width: pos + '%', overflow: 'hidden', borderRight: '2px solid var(--lambo-gold)' }}>
          <image-slot id={id + '-before'} placeholder="Drop BEFORE photo" shape="rect" style={{ position: 'absolute', top: 0, left: 0, height: '100%', width: (ref.current ? ref.current.getBoundingClientRect().width : 600) + 'px' }}></image-slot>
          <span style={{ position: 'absolute', left: 16, top: 16, zIndex: 5 }} className="pill">{beforeLabel}</span>
        </div>
        {/* handle */}
        <div style={{ position: 'absolute', top: 0, bottom: 0, left: pos + '%', transform: 'translateX(-50%)', width: 44, display: 'flex', alignItems: 'center', justifyContent: 'center', pointerEvents: 'none' }}>
          <div style={{ width: 2, height: '100%', background: 'var(--lambo-gold)', position: 'absolute' }}></div>
          <div style={{ width: 44, height: 44, borderRadius: '50%', background: 'var(--lambo-gold)', color: '#0a0a0a', display: 'flex', alignItems: 'center', justifyContent: 'center', boxShadow: '0 4px 16px rgba(0,0,0,0.5)' }}>
            <svg width="22" height="22" viewBox="0 0 24 24" fill="none" stroke="#0a0a0a" strokeWidth="2.2" strokeLinecap="round" strokeLinejoin="round"><polyline points="9 6 4 12 9 18"/><polyline points="15 6 20 12 15 18"/></svg>
          </div>
        </div>
      </div>
      {caption && <div style={{ marginTop: 14, color: 'var(--ash)', fontSize: 14, display: 'flex', alignItems: 'center', gap: 8 }}><Icon name="car" size={16} color="var(--lambo-gold-text)" /><span>{caption}</span></div>}
    </div>
  );
}

/* ============================================================
   SERVICE CARD
   ============================================================ */
function ServiceCard({ s, index }) {
  return (
    <a href={s.href} className="card" style={{ display: 'flex', flexDirection: 'column', padding: 0, overflow: 'hidden', minHeight: 380 }}>
      <div style={{ position: 'relative', height: 168, background: '#141414' }}>
        {s.cover
          ? <img src={s.cover} alt={s.name + ' detail'} style={{ position: 'absolute', inset: 0, width: '100%', height: '100%', objectFit: 'cover' }} />
          : <image-slot id={'svc-' + s.key} placeholder={s.name + ' photo'} shape="rect" style={{ position: 'absolute', inset: 0, width: '100%', height: '100%' }}></image-slot>
        }
        <div style={{ position: 'absolute', inset: 0, background: 'linear-gradient(180deg, rgba(0,0,0,0.1), rgba(0,0,0,0.85))', pointerEvents: 'none' }}></div>
        {s.popular && <span className="pill pill--gold" style={{ position: 'absolute', top: 14, right: 14 }}>Most Popular</span>}
        <div style={{ position: 'absolute', left: 18, bottom: 14 }}>
          <div style={{ fontFamily: 'var(--font-display)', fontSize: 11, letterSpacing: 2, textTransform: 'uppercase', color: 'var(--lambo-gold-text)' }}>{('0' + (index + 1))}</div>
          <div className="metal-gold" style={{ fontFamily: 'var(--font-display)', fontWeight: 700, fontSize: 28, textTransform: 'uppercase', lineHeight: 1 }}>{s.name}</div>
        </div>
      </div>
      <div style={{ padding: '22px 22px 24px', display: 'flex', flexDirection: 'column', flex: 1 }}>
        <div style={{ fontFamily: 'var(--font-display)', fontSize: 13, letterSpacing: 1.4, textTransform: 'uppercase', color: '#fff', marginBottom: 8 }}>{s.tagline}</div>
        <p style={{ color: 'var(--ash)', fontSize: 14, lineHeight: 1.55, fontWeight: 300, margin: '0 0 18px' }}>{s.blurb}</p>
        <div style={{ marginTop: 'auto', display: 'flex', alignItems: 'center', justifyContent: 'space-between', borderTop: '1px solid #222', paddingTop: 16 }}>
          <div>
            <div style={{ fontSize: 11, color: 'var(--ash)', textTransform: 'uppercase', letterSpacing: 1 }}>From</div>
            <div style={{ fontFamily: 'var(--font-display)', fontWeight: 600, fontSize: 20, color: 'var(--lambo-gold-text)' }}>{s.priceReg.split('–')[0].trim()}</div>
          </div>
          <span style={{ display: 'inline-flex', alignItems: 'center', gap: 7, fontFamily: 'var(--font-display)', fontSize: 12, letterSpacing: 1.2, textTransform: 'uppercase', color: '#fff' }}>
            Details <Icon name="arrowUpRight" size={15} color="var(--lambo-gold)" />
          </span>
        </div>
      </div>
    </a>
  );
}

/* ---------- JSON-LD schema injector ---------- */
function injectSchema(obj) {
  const s = document.createElement('script');
  s.type = 'application/ld+json';
  s.textContent = JSON.stringify(obj);
  document.head.appendChild(s);
}

/* ---------- expose globally ---------- */
Object.assign(window, {
  MVH, waLink, NAV_LINKS, AREAS, SERVICES, ADDONS, REVIEWS, REVIEW_STATS, GBP_URL, FORM_KEY,
  DIAMOND_SERVICE, INTERIOR_RESET,
  Icon, Stars, Reveal, Eyebrow, Button, Nav, StickyActions, Footer, FAQ, townHref, LOC_PAGES,
  ReviewCard, ReviewsSection, AreasSection, CTABand, injectSchema,
  BeforeAfter, ServiceCard,
});
