/* ============================================================
   MVH — Service detail page builder + Services hub + Add-ons
   Depends on site.jsx (loaded first). React global.
   ============================================================ */

/* Per-service extra content keyed by service key */
const SERVICE_DETAIL = {
  bronze: {
    intro: 'A regular reset that keeps an already-cared-for vehicle looking its best. Available on a monthly maintenance plan only.',
    benefits: [
      ['Always presentable', 'Your vehicle stays clean, fresh and pristine between bigger details.'],
      ['Protects your finish', 'Frequent safe washing prevents contaminant build-up that dulls paint.'],
      ['Effortless & mobile', 'A quick, convenient visit to your home or workplace — no queues, no hassle.'],
    ],
    process: ['Pre-rinse & safe wash', 'Wheels & tyres cleaned', 'Dry & dress', 'Interior vacuum & wipe', 'Glass & final check'],
  },
  silver: {
    intro: 'Our best all-round package. A thorough inside-and-out valet that brings the whole vehicle back to fresh.',
    benefits: [
      ['Inside & out', 'A complete clean covering paint, wheels, glass, trim and a deep interior refresh.'],
      ['Sealed & protected', 'A sealant layer adds gloss and helps your paint stay cleaner for longer.'],
      ['Best value', 'The package most customers choose — the perfect balance of result and price.'],
    ],
    process: ['Pre-wash & decontaminate', 'Safe contact wash', 'Wheels, tyres & shuts', 'Interior deep clean', 'Sealant protection & inspection'],
  },
  gold: {
    intro: 'A true enhancement detail. We machine-polish the paintwork to remove swirls and restore depth, then lock it in with protection.',
    benefits: [
      ['Removes swirls & marring', 'A single-stage machine polish dramatically improves clarity and gloss.'],
      ['Showroom depth', 'Paint is decontaminated, clayed and refined for a deep, wet-look finish.'],
      ['Lasting protection', 'A durable wax sealant protects the freshly enhanced finish for months.'],
    ],
    process: ['Pre-wash & full decontamination', 'Clay treatment', 'Machine polish enhancement', 'Paint gloss boost', 'Wax sealant & final inspection'],
  },
  platinum: {
    intro: 'Our showroom detail. Full 2-stage machine polish, deep interior restoration and long-lasting protection — the complete transformation.',
    benefits: [
      ['Full 2-stage polish', 'A thorough two-stage machine polish removes deeper defects for maximum clarity and gloss.'],
      ['Concours interior', 'Leather cleaned & conditioned, engine bay detailed, every surface restored.'],
      ['Years of protection', 'Finished with long-lasting paint protection for a finish that endures.'],
    ],
    process: ['Strip wash & multi-stage decontamination', 'Full 2-stage machine polish', 'Interior deep clean & leather care', 'Engine bay detail', 'Long-lasting protection & QC'],
  },
  diamond: {
    intro: 'The ultimate paint correction, ceramic protection and total vehicle enhancement — MVH Detailing\'s most exclusive package. 2 year ceramic coating on paintwork and wheel faces included.',
    benefits: [
      ['Full 2-stage correction', 'A meticulous two-stage machine polish eliminates swirls, haze and defects for flawless clarity.'],
      ['2 Year ceramic protection included', 'Both 2 year paintwork and 2 year wheel face ceramic coatings are included as standard — hydrophobic, self-cleaning protection that lasts.'],
      ['Total transformation', 'Engine bay, interior deep clean, leather care, fabric roof treatment — every surface addressed to the highest standard.'],
    ],
    process: ['Multi-stage decontamination & clay', 'Full 2-stage machine polish', 'Interior deep clean & leather conditioning', 'Engine bay detail & fabric roof treatment', '2 year paintwork ceramic coating application', '2 year wheel face ceramic coating & final QC'],
  },
  'interior-reset': {
    intro: 'A comprehensive interior restoration service designed to refresh, sanitise and rejuvenate your vehicle\'s cabin. The premium interior refresh for a cleaner, healthier and revitalised interior.',
    benefits: [
      ['Total cabin refresh', 'Every surface vacuumed, wiped, cleaned and dressed — from dashboard to boot.'],
      ['Healthier environment', 'Sanitised surfaces, clean air vents and fresh fabrics make the cabin feel brand new.'],
      ['Flexible upgrades', 'Add fabric shampooing, leather conditioning, pet hair removal or heavy stain treatment as needed.'],
    ],
    process: ['Full interior vacuum & loose debris removal', 'Dashboard, console, trim & door card cleaning', 'Air vents, cup holders & compartments detailed', 'Carpet & mat deep clean', 'Glass cleaned streak-free & surfaces protected', 'Boot area cleaned & final inspection'],
  },
};

const SERVICE_FAQ = (s) => {
  const priceLabel = s.priceReg ? `a regular vehicle is ${s.priceReg} and a large vehicle is ${s.priceLrg}` : (s.priceMed ? `a medium vehicle is ${s.priceMed} and a large vehicle is ${s.priceLrg}` : `a small vehicle is ${s.priceSmall} and a large vehicle is ${s.priceLarge}`);
  return [
    { q: `How much does the ${s.name} detail cost?`, a: `Pricing is based on the size and condition of your vehicle. As a guide, ${priceLabel}. Send us a few photos on WhatsApp for an exact, no-obligation quote.` },
    { q: `How long does the ${s.name} ${s.tagline.toLowerCase()} take?`, a: `Typically ${s.time}. The exact time depends on the size and condition of your vehicle and any add-ons selected.` },
    { q: 'Do I need to provide anything?', a: 'No — MVH is fully mobile and self-sufficient. We bring our own power and water. We just need reasonable access to your vehicle on a driveway or off-road space.' },
    { q: 'Which areas do you cover?', a: 'We cover Cannock, Hednesford, Rugeley, Lichfield, Stafford, Burntwood, Sutton Coldfield, Burton upon Trent and surrounding Staffordshire areas.' },
  ];
};

function PriceTile({ label, price }) {
  return (
    <div style={{ flex: 1, minWidth: 180, padding: '24px 26px', border: '1px solid #232323', background: 'var(--charcoal)' }}>
      <div style={{ fontSize: 12, letterSpacing: 1.4, textTransform: 'uppercase', color: 'var(--ash)', fontFamily: 'var(--font-display)' }}>{label}</div>
      <div className="metal-gold" style={{ fontFamily: 'var(--font-display)', fontWeight: 700, fontSize: 'clamp(30px,4vw,40px)', marginTop: 6 }}>{price}</div>
    </div>
  );
}

function AddOnsSection({ note = true }) {
  return (
    <section className="section section--deep" data-screen-label="Add-ons">
      <div className="shell">
        <div style={{ textAlign: 'center', marginBottom: 14 }}>
          <div style={{ display: 'flex', justifyContent: 'center' }}><Eyebrow center>Tailor Your Detail</Eyebrow></div>
          <h2 className="display h-1" style={{ marginTop: 18 }}>Add-ons & extras</h2>
          <p className="lede" style={{ margin: '16px auto 0' }}>Enhance any package with the finishing touches your vehicle needs.</p>
        </div>
        <div style={{ maxWidth: 820, margin: '40px auto 0' }}>
          {ADDONS.map((a, i) => (
            <div key={i} style={{ display: 'flex', alignItems: 'center', justifyContent: 'space-between', gap: 18, padding: '18px 4px', borderBottom: '1px solid #1d1d1d' }}>
              <span style={{ display: 'flex', alignItems: 'center', gap: 14 }}>
                <Icon name="plus" size={18} color="var(--lambo-gold)" />
                <span style={{ fontFamily: 'var(--font-display)', fontWeight: 500, fontSize: 'clamp(15px,2vw,17px)', letterSpacing: 0.3 }}>{a.name}</span>
              </span>
              <span style={{ fontFamily: 'var(--font-display)', fontWeight: 600, color: 'var(--lambo-gold-text)', whiteSpace: 'nowrap', fontSize: 16 }}>{a.price}</span>
            </div>
          ))}
        </div>
        {note && (
          <p style={{ textAlign: 'center', color: 'var(--ash)', fontSize: 13, marginTop: 22 }}>
            Ceramic coatings are available as an add-on to <a href="/ceramic-coating/" className="gold-text">Gold &amp; Platinum</a> packages. Prices vary with severity & vehicle size.
          </p>
        )}
      </div>
    </section>
  );
}

/* ============================================================
   DIAMOND DETAIL PAGE (standalone — different data shape)
   ============================================================ */
function DiamondDetailPage() {
  const s = DIAMOND_SERVICE;
  const d = SERVICE_DETAIL.diamond;
  const faqs = SERVICE_FAQ(s);

  React.useEffect(() => {
    injectSchema({
      '@context': 'https://schema.org', '@type': 'Service',
      serviceType: 'Diamond Ultimate Detail', provider: { '@type': 'AutoDetailing', name: 'MVH Mobile Detailing', telephone: '+447311796805' },
      areaServed: AREAS, description: d.intro,
      offers: { '@type': 'Offer', priceCurrency: 'GBP', priceSpecification: { '@type': 'PriceSpecification', minPrice: '500' } }
    });
    injectSchema({
      '@context': 'https://schema.org', '@type': 'FAQPage',
      mainEntity: faqs.map(f => ({ '@type': 'Question', name: f.q, acceptedAnswer: { '@type': 'Answer', text: f.a } }))
    });
  }, []);

  return (
    <div>
      <Nav active="Services" />

      {/* Hero */}
      <section style={{ position: 'relative', minHeight: '78vh', display: 'flex', alignItems: 'flex-end', overflow: 'hidden' }} data-screen-label="Diamond Hero">
        {DIAMOND_SERVICE.cover
          ? <img src={DIAMOND_SERVICE.cover} alt="Diamond Detail" style={{ position: 'absolute', inset: 0, width: '100%', height: '100%', objectFit: 'cover' }} />
          : <image-slot id="diamond-hero" placeholder="Premium vehicle — Diamond Detail showcase" 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.7) 0%, rgba(0,0,0,0.3) 40%, rgba(0,0,0,0.92) 100%)' }}></div>
        <div style={{ position: 'absolute', top: -120, right: -120, width: 400, height: 400, borderRadius: '50%', background: 'radial-gradient(circle, rgba(212,175,55,0.08) 0%, transparent 70%)', pointerEvents: 'none' }}></div>
        <div className="shell" style={{ position: 'relative', zIndex: 3, paddingBottom: 56, paddingTop: 130 }}>
          <div style={{ display: 'flex', alignItems: 'center', gap: 10, marginBottom: 18, fontSize: 12, color: 'var(--ash)', fontFamily: 'var(--font-display)', letterSpacing: 1, textTransform: 'uppercase' }}>
            <a href="/services/" className="muted">Services</a><span>/</span><span className="gold-text">Diamond</span>
          </div>
          <div className="reveal in" style={{ maxWidth: 720 }}>
            <div style={{ display: 'inline-flex', alignItems: 'center', gap: 10, padding: '8px 18px', border: '1px solid rgba(212,175,55,0.35)', background: 'rgba(212,175,55,0.06)', marginBottom: 18 }}>
              <Icon name="sparkle" size={14} color="var(--lambo-gold)" />
              <span style={{ fontFamily: 'var(--font-display)', fontSize: 10, letterSpacing: 2, textTransform: 'uppercase', color: 'var(--lambo-gold-text)', fontWeight: 600 }}>Most Exclusive Package</span>
            </div>
            <h1 className="display" style={{ fontSize: 'clamp(52px,9vw,108px)', lineHeight: 0.92 }}>
              <span className="metal-gold">Diamond</span>
            </h1>
            <p className="lede" style={{ marginTop: 18, fontSize: 'clamp(16px,1.7vw,20px)' }}>{d.intro}</p>
            <div style={{ display: 'flex', gap: 26, marginTop: 26, flexWrap: 'wrap', alignItems: 'center' }}>
              <span style={{ display: 'flex', alignItems: 'center', gap: 9, color: 'var(--smoke)' }}><Icon name="clock" size={18} color="var(--lambo-gold)" /><b style={{ fontFamily: 'var(--font-display)' }}>{s.time}</b></span>
              <span style={{ display: 'flex', alignItems: 'center', gap: 9, color: 'var(--smoke)' }}><Icon name="car" size={18} color="var(--lambo-gold)" />From <b className="gold-text" style={{ fontFamily: 'var(--font-display)' }}>£500</b></span>
              <span className="pill pill--gold">Ceramic Included</span>
            </div>
            <div style={{ display: 'flex', gap: 14, marginTop: 30, flexWrap: 'wrap' }}>
              <Button href="/booking/" variant="gold" size="lg" icon="arrowUpRight">Book Diamond Detail</Button>
              <Button href={waLink("Hi MVH, I'd like a quote for the Diamond Detail.")} target="_blank" variant="ghost" size="lg" icon="whatsapp">Get A Quote</Button>
            </div>
          </div>
        </div>
      </section>

      {/* Benefits */}
      <section className="section" data-screen-label="Diamond Benefits">
        <div className="shell">
          <div className="grid grid-3">
            {d.benefits.map((b, i) => (
              <Reveal key={i} delay={i * 80} className="card" style={{ padding: '32px 26px', borderColor: 'rgba(212,175,55,0.2)' }}>
                <div style={{ fontFamily: 'var(--font-display)', fontSize: 13, color: 'var(--lambo-gold-text)', letterSpacing: 2 }}>{('0' + (i + 1))}</div>
                <h3 className="display" style={{ fontSize: 21, textTransform: 'uppercase', marginTop: 10 }}>{b[0]}</h3>
                <p style={{ color: 'var(--ash)', fontSize: 14.5, lineHeight: 1.6, marginTop: 12, fontWeight: 300 }}>{b[1]}</p>
              </Reveal>
            ))}
          </div>
        </div>
      </section>

      {/* What's included + Process */}
      <section className="section section--deep" data-screen-label="Diamond Included">
        <div className="shell">
          <div className="grid" style={{ gridTemplateColumns: '1fr 1fr', gap: 56 }} id="diamond-inc-grid">
            <Reveal>
              <Eyebrow>What's Included</Eyebrow>
              <h2 className="display h-2" style={{ marginTop: 16 }}>The complete package</h2>
              <ul style={{ listStyle: 'none', padding: 0, margin: '26px 0 0', display: 'grid', gap: 0 }}>
                {s.includes.map((it, i) => (
                  <li key={i} style={{ display: 'flex', gap: 14, alignItems: 'center', padding: '14px 0', borderBottom: '1px solid #1d1d1d', fontWeight: 300, color: 'var(--smoke)' }}>
                    <Icon name="check" size={20} color="var(--lambo-gold)" style={{ flexShrink: 0 }} />{it}
                  </li>
                ))}
              </ul>
            </Reveal>
            <Reveal delay={120}>
              <Eyebrow>The Process</Eyebrow>
              <h2 className="display h-2" style={{ marginTop: 16 }}>How we work</h2>
              <div style={{ marginTop: 26 }}>
                {d.process.map((p, i) => (
                  <div key={i} style={{ display: 'flex', gap: 18, paddingBottom: i === d.process.length - 1 ? 0 : 26, position: 'relative' }}>
                    <div style={{ display: 'flex', flexDirection: 'column', alignItems: 'center' }}>
                      <div style={{ width: 38, height: 38, flexShrink: 0, borderRadius: '50%', border: '1px solid var(--lambo-gold)', color: 'var(--lambo-gold-text)', display: 'flex', alignItems: 'center', justifyContent: 'center', fontFamily: 'var(--font-display)', fontWeight: 600 }}>{i + 1}</div>
                      {i !== d.process.length - 1 && <div style={{ width: 1, flex: 1, background: '#262626', marginTop: 4 }}></div>}
                    </div>
                    <div style={{ paddingTop: 7, fontFamily: 'var(--font-display)', fontSize: 17, letterSpacing: 0.3 }}>{p}</div>
                  </div>
                ))}
              </div>
            </Reveal>
          </div>
        </div>
        <style>{`@media (max-width: 860px){ #diamond-inc-grid{grid-template-columns:1fr!important;gap:44px!important} }`}</style>
      </section>

      {/* Pricing */}
      <section className="section" data-screen-label="Diamond Pricing">
        <div className="shell" style={{ maxWidth: 920 }}>
          <div style={{ textAlign: 'center', marginBottom: 14 }}>
            <div style={{ display: 'flex', justifyContent: 'center' }}><Eyebrow center>Transparent Pricing</Eyebrow></div>
            <h2 className="display h-1" style={{ marginTop: 18 }}>Diamond pricing</h2>
            <p className="lede" style={{ margin: '16px auto 0' }}>2 year ceramic coating on paintwork and 2 year wheel face coating included. Final price depends on size and condition.</p>
          </div>
          <div style={{ display: 'flex', gap: 16, marginTop: 36, flexWrap: 'wrap' }}>
            <PriceTile label="Small vehicle" price={s.priceSmall} />
            <PriceTile label="Large vehicle" price={s.priceLarge} />
            <div style={{ flex: 1, minWidth: 200, padding: '24px 26px', background: 'var(--gold-metal)', color: '#161616', display: 'flex', flexDirection: 'column', justifyContent: 'space-between' }}>
              <div style={{ fontFamily: 'var(--font-display)', fontWeight: 600, fontSize: 18, textTransform: 'uppercase', letterSpacing: 0.5 }}>Not sure?<br />Send photos.</div>
              <a href={waLink('Hi MVH, please can I get a quote for the Diamond Detail?')} target="_blank" rel="noreferrer" style={{ marginTop: 16, display: 'inline-flex', alignItems: 'center', gap: 8, fontFamily: 'var(--font-display)', fontWeight: 700, textTransform: 'uppercase', fontSize: 13, letterSpacing: 1 }}>WhatsApp a quote <svg width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="#161616" strokeWidth="2" strokeLinecap="round" strokeLinejoin="round"><line x1="7" y1="17" x2="17" y2="7"/><polyline points="7 7 17 7 17 17"/></svg></a>
            </div>
          </div>
        </div>
      </section>

      <AddOnsSection note={false} />

      {/* FAQ */}
      <section className="section" data-screen-label="Diamond FAQ">
        <div className="shell" style={{ maxWidth: 880 }}>
          <div style={{ textAlign: 'center', marginBottom: 30 }}>
            <div style={{ display: 'flex', justifyContent: 'center' }}><Eyebrow center>Diamond · FAQ</Eyebrow></div>
            <h2 className="display h-1" style={{ marginTop: 18 }}>Questions answered</h2>
          </div>
          <FAQ items={faqs} />
        </div>
      </section>

      {/* Other services */}
      <section className="section section--deep" data-screen-label="Other services">
        <div className="shell">
          <div style={{ marginBottom: 36 }}><Eyebrow>Compare</Eyebrow><h2 className="display h-2" style={{ marginTop: 14 }}>Other packages</h2></div>
          <div className="grid grid-4">
            {SERVICES.map((o) => <ServiceCard key={o.key} s={o} index={SERVICES.findIndex(x => x.key === o.key)} />)}
          </div>
        </div>
      </section>

      <CTABand title="Book your Diamond detail" />
      <Footer />
      <StickyActions />
    </div>
  );
}

/* ============================================================
   INTERIOR RESET DETAIL PAGE
   ============================================================ */
function InteriorResetDetailPage() {
  const s = INTERIOR_RESET;
  const d = SERVICE_DETAIL['interior-reset'];
  const faqs = SERVICE_FAQ(s);

  React.useEffect(() => {
    injectSchema({
      '@context': 'https://schema.org', '@type': 'Service',
      serviceType: 'Interior Reset Detail', provider: { '@type': 'AutoDetailing', name: 'MVH Mobile Detailing', telephone: '+447311796805' },
      areaServed: AREAS, description: d.intro,
      offers: { '@type': 'Offer', priceCurrency: 'GBP', priceSpecification: { '@type': 'PriceSpecification', minPrice: '100' } }
    });
    injectSchema({
      '@context': 'https://schema.org', '@type': 'FAQPage',
      mainEntity: faqs.map(f => ({ '@type': 'Question', name: f.q, acceptedAnswer: { '@type': 'Answer', text: f.a } }))
    });
  }, []);

  return (
    <div>
      <Nav active="Services" />

      {/* Hero */}
      <section style={{ position: 'relative', minHeight: '74vh', display: 'flex', alignItems: 'flex-end', overflow: 'hidden' }} data-screen-label="Interior Reset Hero">
        {INTERIOR_RESET.cover
          ? <img src={INTERIOR_RESET.cover} alt="Interior Reset Detail" style={{ position: 'absolute', inset: 0, width: '100%', height: '100%', objectFit: 'cover' }} />
          : <image-slot id="interior-reset-page-hero" placeholder="Interior detail — dashboard / cabin shot" 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.7) 0%, rgba(0,0,0,0.35) 40%, rgba(0,0,0,0.92) 100%)' }}></div>
        <div className="shell" style={{ position: 'relative', zIndex: 3, paddingBottom: 56, paddingTop: 130 }}>
          <div style={{ display: 'flex', alignItems: 'center', gap: 10, marginBottom: 18, fontSize: 12, color: 'var(--ash)', fontFamily: 'var(--font-display)', letterSpacing: 1, textTransform: 'uppercase' }}>
            <a href="/services/" className="muted">Services</a><span>/</span><span className="gold-text">Interior Reset</span>
          </div>
          <div className="reveal in" style={{ maxWidth: 720 }}>
            <Eyebrow>Standalone Service</Eyebrow>
            <h1 className="display" style={{ marginTop: 18, fontSize: 'clamp(46px,8vw,96px)', lineHeight: 0.92 }}>
              <span className="metal-gold">Interior</span><br />Reset
            </h1>
            <p className="lede" style={{ marginTop: 18, fontSize: 'clamp(16px,1.7vw,20px)' }}>{d.intro}</p>
            <div style={{ display: 'flex', gap: 26, marginTop: 26, flexWrap: 'wrap', alignItems: 'center' }}>
              <span style={{ display: 'flex', alignItems: 'center', gap: 9, color: 'var(--smoke)' }}><Icon name="clock" size={18} color="var(--lambo-gold)" /><b style={{ fontFamily: 'var(--font-display)' }}>{s.time}</b></span>
              <span style={{ display: 'flex', alignItems: 'center', gap: 9, color: 'var(--smoke)' }}><Icon name="car" size={18} color="var(--lambo-gold)" />From <b className="gold-text" style={{ fontFamily: 'var(--font-display)' }}>£100</b></span>
            </div>
            <div style={{ display: 'flex', gap: 14, marginTop: 30, flexWrap: 'wrap' }}>
              <Button href="/booking/" variant="gold" size="lg" icon="arrowUpRight">Book Interior Reset</Button>
              <Button href={waLink("Hi MVH, I'd like a quote for the Interior Reset Detail.")} target="_blank" variant="ghost" size="lg" icon="whatsapp">Get A Quote</Button>
            </div>
          </div>
        </div>
      </section>

      {/* Benefits */}
      <section className="section" data-screen-label="Interior Benefits">
        <div className="shell">
          <div className="grid grid-3">
            {d.benefits.map((b, i) => (
              <Reveal key={i} delay={i * 80} className="card" style={{ padding: '32px 26px' }}>
                <div style={{ fontFamily: 'var(--font-display)', fontSize: 13, color: 'var(--lambo-gold-text)', letterSpacing: 2 }}>{('0' + (i + 1))}</div>
                <h3 className="display" style={{ fontSize: 21, textTransform: 'uppercase', marginTop: 10 }}>{b[0]}</h3>
                <p style={{ color: 'var(--ash)', fontSize: 14.5, lineHeight: 1.6, marginTop: 12, fontWeight: 300 }}>{b[1]}</p>
              </Reveal>
            ))}
          </div>
        </div>
      </section>

      {/* What's included + Optional Upgrades */}
      <section className="section section--deep" data-screen-label="Interior Included">
        <div className="shell">
          <div className="grid" style={{ gridTemplateColumns: '1fr 1fr', gap: 56 }} id="interior-inc-grid">
            <Reveal>
              <Eyebrow>What's Included</Eyebrow>
              <h2 className="display h-2" style={{ marginTop: 16 }}>Every surface refreshed</h2>
              <ul style={{ listStyle: 'none', padding: 0, margin: '26px 0 0', display: 'grid', gap: 0 }}>
                {s.includes.map((it, i) => (
                  <li key={i} style={{ display: 'flex', gap: 14, alignItems: 'center', padding: '14px 0', borderBottom: '1px solid #1d1d1d', fontWeight: 300, color: 'var(--smoke)' }}>
                    <Icon name="check" size={20} color="var(--lambo-gold)" style={{ flexShrink: 0 }} />{it}
                  </li>
                ))}
              </ul>
            </Reveal>
            <div>
              <Reveal delay={80}>
                <Eyebrow>Optional Upgrades</Eyebrow>
                <h2 className="display h-2" style={{ marginTop: 16 }}>Tailor to your needs</h2>
                <ul style={{ listStyle: 'none', padding: 0, margin: '26px 0 0', display: 'grid', gap: 0 }}>
                  {s.upgrades.map((it, i) => (
                    <li key={i} style={{ display: 'flex', gap: 14, alignItems: 'center', padding: '14px 0', borderBottom: '1px solid #1d1d1d', fontWeight: 300, color: 'var(--smoke)' }}>
                      <Icon name="plus" size={20} color="var(--lambo-gold)" style={{ flexShrink: 0 }} />{it}
                    </li>
                  ))}
                </ul>
              </Reveal>
              <Reveal delay={160}>
                <Eyebrow style={{ marginTop: 40 }}>The Process</Eyebrow>
                <h2 className="display h-2" style={{ marginTop: 16 }}>How we work</h2>
                <div style={{ marginTop: 26 }}>
                  {d.process.map((p, i) => (
                    <div key={i} style={{ display: 'flex', gap: 18, paddingBottom: i === d.process.length - 1 ? 0 : 26, position: 'relative' }}>
                      <div style={{ display: 'flex', flexDirection: 'column', alignItems: 'center' }}>
                        <div style={{ width: 38, height: 38, flexShrink: 0, borderRadius: '50%', border: '1px solid var(--lambo-gold)', color: 'var(--lambo-gold-text)', display: 'flex', alignItems: 'center', justifyContent: 'center', fontFamily: 'var(--font-display)', fontWeight: 600 }}>{i + 1}</div>
                        {i !== d.process.length - 1 && <div style={{ width: 1, flex: 1, background: '#262626', marginTop: 4 }}></div>}
                      </div>
                      <div style={{ paddingTop: 7, fontFamily: 'var(--font-display)', fontSize: 17, letterSpacing: 0.3 }}>{p}</div>
                    </div>
                  ))}
                </div>
              </Reveal>
            </div>
          </div>
        </div>
        <style>{`@media (max-width: 860px){ #interior-inc-grid{grid-template-columns:1fr!important;gap:44px!important} }`}</style>
      </section>

      {/* Pricing */}
      <section className="section" data-screen-label="Interior Pricing">
        <div className="shell" style={{ maxWidth: 920 }}>
          <div style={{ textAlign: 'center', marginBottom: 14 }}>
            <div style={{ display: 'flex', justifyContent: 'center' }}><Eyebrow center>Transparent Pricing</Eyebrow></div>
            <h2 className="display h-1" style={{ marginTop: 18 }}>Interior Reset pricing</h2>
            <p className="lede" style={{ margin: '16px auto 0' }}>Final price depends on the size and condition of your vehicle. Here's the guide range.</p>
          </div>
          <div style={{ display: 'flex', gap: 16, marginTop: 36, flexWrap: 'wrap' }}>
            <PriceTile label="Medium vehicle" price={s.priceMed} />
            <PriceTile label="Large / SUV" price={s.priceLrg} />
            <div style={{ flex: 1, minWidth: 200, padding: '24px 26px', background: 'var(--gold-metal)', color: '#161616', display: 'flex', flexDirection: 'column', justifyContent: 'space-between' }}>
              <div style={{ fontFamily: 'var(--font-display)', fontWeight: 600, fontSize: 18, textTransform: 'uppercase', letterSpacing: 0.5 }}>Not sure?<br />Send photos.</div>
              <a href={waLink('Hi MVH, please can I get a quote for the Interior Reset Detail?')} target="_blank" rel="noreferrer" style={{ marginTop: 16, display: 'inline-flex', alignItems: 'center', gap: 8, fontFamily: 'var(--font-display)', fontWeight: 700, textTransform: 'uppercase', fontSize: 13, letterSpacing: 1 }}>WhatsApp a quote <svg width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="#161616" strokeWidth="2" strokeLinecap="round" strokeLinejoin="round"><line x1="7" y1="17" x2="17" y2="7"/><polyline points="7 7 17 7 17 17"/></svg></a>
            </div>
          </div>
        </div>
      </section>

      {/* FAQ */}
      <section className="section section--deep" data-screen-label="Interior FAQ">
        <div className="shell" style={{ maxWidth: 880 }}>
          <div style={{ textAlign: 'center', marginBottom: 30 }}>
            <div style={{ display: 'flex', justifyContent: 'center' }}><Eyebrow center>Interior Reset · FAQ</Eyebrow></div>
            <h2 className="display h-1" style={{ marginTop: 18 }}>Questions answered</h2>
          </div>
          <FAQ items={faqs} />
        </div>
      </section>

      {/* Other services */}
      <section className="section" data-screen-label="Other services">
        <div className="shell">
          <div style={{ marginBottom: 36 }}><Eyebrow>Compare</Eyebrow><h2 className="display h-2" style={{ marginTop: 14 }}>Our detailing packages</h2></div>
          <div className="grid grid-4">
            {SERVICES.map((o) => <ServiceCard key={o.key} s={o} index={SERVICES.findIndex(x => x.key === o.key)} />)}
          </div>
        </div>
      </section>

      <CTABand title="Book your Interior Reset" />
      <Footer />
      <StickyActions />
    </div>
  );
}

function ServiceDetailPage({ serviceKey }) {
  const s = SERVICES.find(x => x.key === serviceKey);
  const d = SERVICE_DETAIL[serviceKey];
  const faqs = SERVICE_FAQ(s);
  const idx = SERVICES.findIndex(x => x.key === serviceKey);
  const others = SERVICES.filter(x => x.key !== serviceKey);

  React.useEffect(() => {
    injectSchema({
      '@context': 'https://schema.org', '@type': 'Service',
      serviceType: `${s.name} ${s.tagline}`, provider: { '@type': 'AutoDetailing', name: 'MVH Mobile Detailing', telephone: '+447311796805' },
      areaServed: AREAS, description: d.intro,
      offers: { '@type': 'Offer', priceCurrency: 'GBP', priceSpecification: { '@type': 'PriceSpecification', minPrice: s.priceReg.replace(/[^0-9]/g, '').slice(0, s.priceReg.indexOf('–') > -1 ? 2 : 3) } }
    });
    injectSchema({
      '@context': 'https://schema.org', '@type': 'FAQPage',
      mainEntity: faqs.map(f => ({ '@type': 'Question', name: f.q, acceptedAnswer: { '@type': 'Answer', text: f.a } }))
    });
  }, []);

  return (
    <div>
      <Nav active="Services" />

      {/* Hero */}
      <section style={{ position: 'relative', minHeight: '74vh', display: 'flex', alignItems: 'flex-end', overflow: 'hidden' }} data-screen-label="Service Hero">
        {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-hero-' + s.key} placeholder={s.name + ' detail 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.7) 0%, rgba(0,0,0,0.35) 40%, rgba(0,0,0,0.92) 100%)' }}></div>
        <div className="shell" style={{ position: 'relative', zIndex: 3, paddingBottom: 56, paddingTop: 130 }}>
          <div style={{ display: 'flex', alignItems: 'center', gap: 10, marginBottom: 18, fontSize: 12, color: 'var(--ash)', fontFamily: 'var(--font-display)', letterSpacing: 1, textTransform: 'uppercase' }}>
            <a href="/services/" className="muted">Services</a><span>/</span><span className="gold-text">{s.name}</span>
          </div>
          <div className="reveal in" style={{ maxWidth: 720 }}>
            <Eyebrow>{('0' + (idx + 1))} · {s.tagline}</Eyebrow>
            <h1 className="display" style={{ marginTop: 18, fontSize: 'clamp(52px,9vw,108px)', lineHeight: 0.92 }}>
              <span className="metal-gold">{s.name}</span>
            </h1>
            <p className="lede" style={{ marginTop: 18, fontSize: 'clamp(16px,1.7vw,20px)' }}>{d.intro}</p>
            <div style={{ display: 'flex', gap: 26, marginTop: 26, flexWrap: 'wrap', alignItems: 'center' }}>
              <span style={{ display: 'flex', alignItems: 'center', gap: 9, color: 'var(--smoke)' }}><Icon name="clock" size={18} color="var(--lambo-gold)" /><b style={{ fontFamily: 'var(--font-display)' }}>{s.time}</b></span>
              <span style={{ display: 'flex', alignItems: 'center', gap: 9, color: 'var(--smoke)' }}><Icon name="car" size={18} color="var(--lambo-gold)" />From <b className="gold-text" style={{ fontFamily: 'var(--font-display)' }}>{s.priceReg.split('–')[0].trim()}</b></span>
            </div>
            <div style={{ display: 'flex', gap: 14, marginTop: 30, flexWrap: 'wrap' }}>
              <Button href="/booking/" variant="gold" size="lg" icon="arrowUpRight">Book This Detail</Button>
              <Button href={waLink(`Hi MVH, I'd like a quote for the ${s.name} ${s.tagline}.`)} target="_blank" variant="ghost" size="lg" icon="whatsapp">Get A Quote</Button>
            </div>
          </div>
        </div>
      </section>

      {/* Benefits */}
      <section className="section" data-screen-label="Benefits">
        <div className="shell">
          <div className="grid grid-3">
            {d.benefits.map((b, i) => (
              <Reveal key={i} delay={i * 80} className="card" style={{ padding: '32px 26px' }}>
                <div style={{ fontFamily: 'var(--font-display)', fontSize: 13, color: 'var(--lambo-gold-text)', letterSpacing: 2 }}>{('0' + (i + 1))}</div>
                <h3 className="display" style={{ fontSize: 21, textTransform: 'uppercase', marginTop: 10 }}>{b[0]}</h3>
                <p style={{ color: 'var(--ash)', fontSize: 14.5, lineHeight: 1.6, marginTop: 12, fontWeight: 300 }}>{b[1]}</p>
              </Reveal>
            ))}
          </div>
        </div>
      </section>

      {/* What's included + Process */}
      <section className="section section--deep" data-screen-label="Included">
        <div className="shell">
          <div className="grid" style={{ gridTemplateColumns: '1fr 1fr', gap: 56 }}>
            <Reveal>
              <Eyebrow>What's Included</Eyebrow>
              <h2 className="display h-2" style={{ marginTop: 16 }}>Every detail covered</h2>
              <ul style={{ listStyle: 'none', padding: 0, margin: '26px 0 0', display: 'grid', gap: 0 }}>
                {s.includes.map((it, i) => (
                  <li key={i} style={{ display: 'flex', gap: 14, alignItems: 'center', padding: '14px 0', borderBottom: '1px solid #1d1d1d', fontWeight: 300, color: 'var(--smoke)' }}>
                    <Icon name="check" size={20} color="var(--lambo-gold)" style={{ flexShrink: 0 }} />{it}
                  </li>
                ))}
              </ul>
            </Reveal>
            <Reveal delay={120}>
              <Eyebrow>The Process</Eyebrow>
              <h2 className="display h-2" style={{ marginTop: 16 }}>How we work</h2>
              <div style={{ marginTop: 26 }}>
                {d.process.map((p, i) => (
                  <div key={i} style={{ display: 'flex', gap: 18, paddingBottom: i === d.process.length - 1 ? 0 : 26, position: 'relative' }}>
                    <div style={{ display: 'flex', flexDirection: 'column', alignItems: 'center' }}>
                      <div style={{ width: 38, height: 38, flexShrink: 0, borderRadius: '50%', border: '1px solid var(--lambo-gold)', color: 'var(--lambo-gold-text)', display: 'flex', alignItems: 'center', justifyContent: 'center', fontFamily: 'var(--font-display)', fontWeight: 600 }}>{i + 1}</div>
                      {i !== d.process.length - 1 && <div style={{ width: 1, flex: 1, background: '#262626', marginTop: 4 }}></div>}
                    </div>
                    <div style={{ paddingTop: 7, fontFamily: 'var(--font-display)', fontSize: 17, letterSpacing: 0.3 }}>{p}</div>
                  </div>
                ))}
              </div>
            </Reveal>
          </div>
        </div>
        <style>{`@media (max-width: 860px){ #root section[data-screen-label="Included"] .grid{grid-template-columns:1fr!important;gap:44px!important} }`}</style>
      </section>

      {/* Pricing */}
      <section className="section" data-screen-label="Pricing">
        <div className="shell" style={{ maxWidth: 920 }}>
          <div style={{ textAlign: 'center', marginBottom: 14 }}>
            <div style={{ display: 'flex', justifyContent: 'center' }}><Eyebrow center>Transparent Pricing</Eyebrow></div>
            <h2 className="display h-1" style={{ marginTop: 18 }}>{s.name} pricing</h2>
            <p className="lede" style={{ margin: '16px auto 0' }}>Final price depends on the size and condition of your vehicle. Here's the guide range.</p>
          </div>
          <div style={{ display: 'flex', gap: 16, marginTop: 36, flexWrap: 'wrap' }}>
            <PriceTile label="Regular vehicle" price={s.priceReg} />
            <PriceTile label="Large vehicle" price={s.priceLrg} />
            <div style={{ flex: 1, minWidth: 200, padding: '24px 26px', background: 'var(--gold-metal)', color: '#161616', display: 'flex', flexDirection: 'column', justifyContent: 'space-between' }}>
              <div style={{ fontFamily: 'var(--font-display)', fontWeight: 600, fontSize: 18, textTransform: 'uppercase', letterSpacing: 0.5 }}>Not sure?<br />Send photos.</div>
              <a href={waLink(`Hi MVH, please can I get a quote for the ${s.name} detail?`)} target="_blank" rel="noreferrer" style={{ marginTop: 16, display: 'inline-flex', alignItems: 'center', gap: 8, fontFamily: 'var(--font-display)', fontWeight: 700, textTransform: 'uppercase', fontSize: 13, letterSpacing: 1 }}>WhatsApp a quote <svg width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="#161616" strokeWidth="2" strokeLinecap="round" strokeLinejoin="round"><line x1="7" y1="17" x2="17" y2="7"/><polyline points="7 7 17 7 17 17"/></svg></a>
            </div>
          </div>
        </div>
      </section>

      <AddOnsSection />

      {/* FAQ */}
      <section className="section" data-screen-label="Service FAQ">
        <div className="shell" style={{ maxWidth: 880 }}>
          <div style={{ textAlign: 'center', marginBottom: 30 }}>
            <div style={{ display: 'flex', justifyContent: 'center' }}><Eyebrow center>{s.name} · FAQ</Eyebrow></div>
            <h2 className="display h-1" style={{ marginTop: 18 }}>Questions answered</h2>
          </div>
          <FAQ items={faqs} />
        </div>
      </section>

      {/* Other services */}
      <section className="section section--deep" data-screen-label="Other services">
        <div className="shell">
          <div style={{ marginBottom: 36 }}><Eyebrow>Compare</Eyebrow><h2 className="display h-2" style={{ marginTop: 14 }}>Other packages</h2></div>
          <div className="grid grid-3">
            {others.map((o) => <ServiceCard key={o.key} s={o} index={SERVICES.findIndex(x => x.key === o.key)} />)}
          </div>
        </div>
      </section>

      <CTABand title={`Book your ${s.name} detail`} />
      <Footer />
      <StickyActions />
    </div>
  );
}

/* ---------- Services hub ---------- */
function ServicesHub() {
  React.useEffect(() => {
    injectSchema({
      '@context': 'https://schema.org', '@type': 'Service',
      serviceType: 'Interior Reset Detail', provider: { '@type': 'AutoDetailing', name: 'MVH Mobile Detailing', telephone: '+447311796805' },
      areaServed: AREAS, description: INTERIOR_RESET.blurb,
      offers: { '@type': 'Offer', priceCurrency: 'GBP', priceSpecification: { '@type': 'PriceSpecification', minPrice: '100' } }
    });
  }, []);

  return (
    <div>
      <Nav active="Services" />
      <section style={{ position: 'relative', paddingTop: 150, paddingBottom: 60, borderBottom: '1px solid #161616', overflow: 'hidden' }} data-screen-label="Services Hero">
        <div className="shell">
          <Eyebrow>Our Detailing Menu</Eyebrow>
          <h1 className="display h-hero" style={{ marginTop: 18 }}>Services</h1>
          <p className="lede" style={{ marginTop: 18 }}>Five core packages, ceramic coating, a dedicated interior service and a full menu of add-ons. Every service is delivered to your driveway, anywhere across Staffordshire.</p>
        </div>
      </section>

      <section className="section" data-screen-label="All Services">
        <div className="shell">
          <div className="grid grid-4">
            {SERVICES.map((s, i) => <Reveal key={s.key} delay={i * 70}><ServiceCard s={s} index={i} /></Reveal>)}
          </div>

          {/* Diamond — flagship full-width section */}
          <Reveal>
            <div style={{ marginTop: 36, border: '1px solid rgba(212,175,55,0.3)', background: '#0a0a0a', position: 'relative', overflow: 'hidden' }}>
              <div style={{ position: 'absolute', top: -80, right: -80, width: 300, height: 300, borderRadius: '50%', background: 'radial-gradient(circle, rgba(212,175,55,0.06) 0%, transparent 70%)', pointerEvents: 'none' }}></div>
              <div className="grid" style={{ gridTemplateColumns: '1fr 1.2fr', gap: 0 }} id="svc-diamond-grid">
                <div style={{ position: 'relative', minHeight: 380, background: '#111' }}>
                  {DIAMOND_SERVICE.cover
                    ? <img src={DIAMOND_SERVICE.cover} alt="Diamond Detail" style={{ position: 'absolute', inset: 0, width: '100%', height: '100%', objectFit: 'cover' }} />
                    : <image-slot id="svc-diamond-hub" placeholder="Diamond Detail — premium showcase" shape="rect" style={{ position: 'absolute', inset: 0, width: '100%', height: '100%' }}></image-slot>
                  }
                  <div style={{ position: 'absolute', inset: 0, background: 'linear-gradient(90deg, transparent 60%, rgba(10,10,10,0.95) 100%)', pointerEvents: 'none' }}></div>
                  <div style={{ position: 'absolute', top: 20, left: 20 }}>
                    <div style={{ display: 'inline-flex', alignItems: 'center', gap: 8, padding: '7px 14px', border: '1px solid rgba(212,175,55,0.35)', background: 'rgba(0,0,0,0.6)' }}>
                      <Icon name="sparkle" size={13} color="var(--lambo-gold)" />
                      <span style={{ fontFamily: 'var(--font-display)', fontSize: 10, letterSpacing: 2, textTransform: 'uppercase', color: 'var(--lambo-gold-text)', fontWeight: 600 }}>Most Exclusive</span>
                    </div>
                  </div>
                </div>
                <div style={{ padding: 'clamp(28px, 4vw, 44px)' }}>
                  <Eyebrow>05 · Flagship Package</Eyebrow>
                  <h3 className="display" style={{ fontSize: 'clamp(32px, 4vw, 48px)', textTransform: 'uppercase', marginTop: 12 }}>
                    <span className="metal-gold">Diamond Detail</span>
                  </h3>
                  <p style={{ color: 'var(--ash)', fontSize: 15, lineHeight: 1.6, marginTop: 14, maxWidth: 520, fontWeight: 300 }}>{DIAMOND_SERVICE.blurb}</p>
                  <ul style={{ listStyle: 'none', padding: 0, margin: '20px 0 0', display: 'grid', gridTemplateColumns: '1fr 1fr', gap: '6px 18px' }} id="diamond-hub-list">
                    {DIAMOND_SERVICE.includes.slice(0, 6).map((it, i) => (
                      <li key={i} style={{ display: 'flex', gap: 10, alignItems: 'center', fontSize: 13.5, color: 'var(--smoke)', fontWeight: 300 }}>
                        <Icon name="check" size={16} color="var(--lambo-gold)" style={{ flexShrink: 0 }} />{it}
                      </li>
                    ))}
                  </ul>
                  <div style={{ display: 'flex', gap: 20, marginTop: 22, alignItems: 'center', flexWrap: 'wrap' }}>
                    <div>
                      <div style={{ fontSize: 11, color: 'var(--ash)', textTransform: 'uppercase', letterSpacing: 1, fontFamily: 'var(--font-display)' }}>From</div>
                      <div className="metal-gold" style={{ fontFamily: 'var(--font-display)', fontWeight: 700, fontSize: 28 }}>£500</div>
                    </div>
                    <span className="pill pill--gold">Ceramic Included</span>
                    <span style={{ display: 'flex', alignItems: 'center', gap: 7, color: 'var(--ash)', fontSize: 13 }}><Icon name="clock" size={15} color="var(--lambo-gold)" />{DIAMOND_SERVICE.time}</span>
                  </div>
                  <div style={{ display: 'flex', gap: 12, marginTop: 24, flexWrap: 'wrap' }}>
                    <Button href="/service-diamond/" variant="gold" icon="arrowUpRight">View Diamond Detail</Button>
                    <Button href={waLink("Hi MVH, I'd like a quote for the Diamond Detail.")} target="_blank" variant="ghost" icon="whatsapp">Get A Quote</Button>
                  </div>
                </div>
              </div>
            </div>
          </Reveal>

          {/* Ceramic banner */}
          <div style={{ marginTop: 28 }}>
            <a href="/ceramic-coating/" className="card" style={{ display: 'flex', alignItems: 'center', gap: 24, padding: 0, overflow: 'hidden' }}>
              <div style={{ position: 'relative', width: 280, minWidth: 180, alignSelf: 'stretch', background: '#141414' }}>
                <img src={MVH_THEME + "/assets/cover-ceramic.png"} alt="Ceramic coating" style={{ position: 'absolute', inset: 0, width: '100%', height: '100%', objectFit: 'cover' }} />
              </div>
              <div style={{ padding: '28px 28px 28px 0', flex: 1 }}>
                <span className="pill pill--gold">Premium Add-on</span>
                <h3 className="display" style={{ fontSize: 28, textTransform: 'uppercase', marginTop: 12 }}>Ceramic Coating</h3>
                <p style={{ color: 'var(--ash)', fontSize: 14.5, lineHeight: 1.6, marginTop: 10, maxWidth: 560, fontWeight: 300 }}>Years of lasting protection and a deep, self-cleaning gloss. Available on paintwork, glass and wheel faces as an add-on to Gold &amp; Platinum, or included with Diamond.</p>
                <span style={{ display: 'inline-flex', alignItems: 'center', gap: 8, marginTop: 16, fontFamily: 'var(--font-display)', fontSize: 13, letterSpacing: 1, textTransform: 'uppercase', color: 'var(--lambo-gold-text)' }}>Explore Ceramic <Icon name="arrowUpRight" size={15} color="var(--lambo-gold)" /></span>
              </div>
            </a>
          </div>
        </div>
      </section>

      {/* Interior Reset — card style matching other packages */}
      <section className="section" style={{ borderTop: '1px solid #161616' }} data-screen-label="Interior Reset Detail">
        <div className="shell">
          <div style={{ marginBottom: 40 }}>
            <Eyebrow>Standalone Service</Eyebrow>
            <h2 className="display h-1" style={{ marginTop: 16 }}>Interior Specialist</h2>
            <p className="lede" style={{ marginTop: 14 }}>A dedicated interior service for daily drivers, family vehicles and anyone wanting a professional cabin refresh.</p>
          </div>
          <div className="grid" style={{ gridTemplateColumns: '1fr 1fr', gap: 28 }} id="interior-reset-grid">
            <Reveal>
              <a href={INTERIOR_RESET.href} className="card" style={{ display: 'flex', flexDirection: 'column', padding: 0, overflow: 'hidden', minHeight: 420 }}>
                <div style={{ position: 'relative', height: 200, background: '#141414' }}>
                  {INTERIOR_RESET.cover
                    ? <img src={INTERIOR_RESET.cover} alt="Interior Reset" style={{ position: 'absolute', inset: 0, width: '100%', height: '100%', objectFit: 'cover' }} />
                    : <image-slot id="svc-interior-reset" placeholder="Interior detail 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>
                  <div style={{ position: 'absolute', left: 18, bottom: 14 }}>
                    <div className="metal-gold" style={{ fontFamily: 'var(--font-display)', fontWeight: 700, fontSize: 28, textTransform: 'uppercase', lineHeight: 1 }}>Interior Reset</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 }}>{INTERIOR_RESET.tagline}</div>
                  <p style={{ color: 'var(--ash)', fontSize: 14, lineHeight: 1.55, fontWeight: 300, margin: '0 0 18px' }}>{INTERIOR_RESET.blurb}</p>
                  <ul style={{ listStyle: 'none', padding: 0, margin: '0 0 18px', display: 'grid', gap: 6 }}>
                    {INTERIOR_RESET.includes.slice(0, 5).map((it, i) => (
                      <li key={i} style={{ display: 'flex', gap: 9, alignItems: 'center', fontSize: 13, color: 'var(--smoke)', fontWeight: 300 }}>
                        <Icon name="check" size={15} color="var(--lambo-gold)" style={{ flexShrink: 0 }} />{it}
                      </li>
                    ))}
                    <li style={{ fontSize: 13, color: 'var(--lambo-gold-text)', fontWeight: 400, paddingLeft: 24 }}>+ {INTERIOR_RESET.includes.length - 5} more included</li>
                  </ul>
                  <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)' }}>£100</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>
            </Reveal>
            <Reveal delay={80}>
              <div className="card" style={{ padding: '28px 26px', height: '100%', display: 'flex', flexDirection: 'column' }}>
                <h3 style={{ fontFamily: 'var(--font-display)', fontSize: 13, letterSpacing: 1.6, textTransform: 'uppercase', color: 'var(--lambo-gold-text)', marginBottom: 18 }}>Optional Upgrades</h3>
                <ul style={{ listStyle: 'none', padding: 0, margin: 0, display: 'grid', gap: 0, flex: 1 }}>
                  {INTERIOR_RESET.upgrades.map((it, i) => (
                    <li key={i} style={{ display: 'flex', gap: 12, alignItems: 'center', padding: '13px 0', borderBottom: '1px solid #1d1d1d', fontWeight: 300, color: 'var(--smoke)', fontSize: 15 }}>
                      <Icon name="plus" size={18} color="var(--lambo-gold)" style={{ flexShrink: 0 }} />{it}
                    </li>
                  ))}
                </ul>
                <div style={{ display: 'flex', gap: 14, marginTop: 24, flexWrap: 'wrap', alignItems: 'center' }}>
                  <div style={{ display: 'flex', alignItems: 'center', gap: 8, color: 'var(--ash)', fontSize: 13 }}>
                    <Icon name="clock" size={16} color="var(--lambo-gold)" />{INTERIOR_RESET.time}
                  </div>
                  <div style={{ width: 1, height: 18, background: '#2a2a2a' }}></div>
                  <div style={{ display: 'flex', gap: 8, alignItems: 'baseline' }}>
                    <span style={{ fontSize: 12, color: 'var(--ash)', textTransform: 'uppercase', letterSpacing: 1, fontFamily: 'var(--font-display)' }}>Med</span>
                    <span className="gold-text" style={{ fontFamily: 'var(--font-display)', fontWeight: 600, fontSize: 16 }}>{INTERIOR_RESET.priceMed}</span>
                  </div>
                  <div style={{ display: 'flex', gap: 8, alignItems: 'baseline' }}>
                    <span style={{ fontSize: 12, color: 'var(--ash)', textTransform: 'uppercase', letterSpacing: 1, fontFamily: 'var(--font-display)' }}>Large</span>
                    <span className="gold-text" style={{ fontFamily: 'var(--font-display)', fontWeight: 600, fontSize: 16 }}>{INTERIOR_RESET.priceLrg}</span>
                  </div>
                </div>
                <div style={{ display: 'flex', gap: 12, marginTop: 20, flexWrap: 'wrap' }}>
                  <Button href={INTERIOR_RESET.href} variant="gold" icon="arrowUpRight">View Full Details</Button>
                  <Button href={waLink("Hi MVH, I'd like a quote for the Interior Reset Detail.")} target="_blank" variant="ghost" icon="whatsapp">Get A Quote</Button>
                </div>
              </div>
            </Reveal>
          </div>
        </div>
        <style>{`
          @media (max-width: 900px){ #interior-reset-grid{grid-template-columns:1fr!important} }
          @media (max-width: 900px){ #svc-diamond-grid{grid-template-columns:1fr!important} }
          @media (max-width: 620px){ #diamond-hub-list{grid-template-columns:1fr!important} }
        `}</style>
      </section>

      <AddOnsSection />
      <ReviewsSection />
      <CTABand />
      <Footer />
      <StickyActions />
    </div>
  );
}

Object.assign(window, { SERVICE_DETAIL, AddOnsSection, ServiceDetailPage, ServicesHub, PriceTile, DiamondDetailPage, InteriorResetDetailPage });
