function Hero() {
  return (
    <section data-screen-label="Hero" style={{ position: 'relative', minHeight: '100vh', display: 'flex', alignItems: 'center', overflow: 'hidden' }}>
      <image-slot id="home-hero" placeholder="Drop hero photo — a detailed car at dusk works beautifully" shape="rect" style={{ position: 'absolute', inset: 0, width: '100%', height: '100%' }}></image-slot>
      <div style={{ position: 'absolute', inset: 0, background: 'linear-gradient(110deg, rgba(0,0,0,0.92) 0%, rgba(0,0,0,0.7) 38%, rgba(0,0,0,0.35) 70%, rgba(0,0,0,0.6) 100%)', pointerEvents: 'none' }}></div>
      <div style={{ position: 'absolute', inset: 0, background: 'linear-gradient(180deg, rgba(0,0,0,0.6), transparent 22%, transparent 70%, rgba(0,0,0,0.85))', pointerEvents: 'none' }}></div>
      <div className="shell" style={{ position: 'relative', zIndex: 5, paddingTop: 120, paddingBottom: 80 }}>
        <div className="reveal in" style={{ maxWidth: 760 }}>
          <Eyebrow>Enhance · Protect · Maintain</Eyebrow>
          <h1 className="display" style={{ marginTop: 22, fontSize: 'clamp(44px, 7.4vw, 92px)', lineHeight: 0.95 }}>
            Premium Mobile<br />Car Detailing<br /><span className="metal-gold">Across Staffordshire</span>
          </h1>
          <p className="lede" style={{ marginTop: 26, fontSize: 'clamp(16px,1.6vw,20px)' }}>
            Professional detailing, paint enhancement and ceramic coating — delivered directly to your driveway. Showroom results, total convenience.
          </p>
          <div style={{ display: 'flex', gap: 14, marginTop: 34, 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 style={{ display: 'flex', alignItems: 'center', gap: 26, marginTop: 40, flexWrap: 'wrap' }}>
            <div style={{ display: 'flex', alignItems: 'center', gap: 10 }}>
              <Stars size={18} />
              <span style={{ fontFamily: 'var(--font-display)', fontWeight: 600 }}>{REVIEW_STATS.rating}</span>
              <span className="muted" style={{ fontSize: 13 }}>· {REVIEW_STATS.count} Google reviews</span>
            </div>
            <div style={{ width: 1, height: 22, background: '#2a2a2a' }}></div>
            <div style={{ display: 'flex', alignItems: 'center', gap: 9 }} className="muted">
              <Icon name="shield" size={18} color="var(--lambo-gold)" /><span style={{ fontSize: 13 }}>Fully insured · We come to you</span>
            </div>
          </div>
        </div>
      </div>
    </section>
  );
}

function TrustStrip() {
  const items = [
    { icon: 'award', t: '5-Star Rated', s: 'Across Google & Facebook' },
    { icon: 'car', t: 'We Come To You', s: 'Fully mobile, self-sufficient' },
    { icon: 'droplet', t: 'Premium Products', s: 'Pro-grade, paint-safe' },
    { icon: 'shield', t: 'Fully Insured', s: 'Peace of mind, every time' },
  ];
  return (
    <div style={{ borderTop: '1px solid #161616', borderBottom: '1px solid #161616', background: '#080808' }}>
      <div className="shell" style={{ display: 'grid', gridTemplateColumns: 'repeat(4, 1fr)', gap: 0 }}>
        {items.map((it, i) => (
          <div key={i} style={{ display: 'flex', alignItems: 'center', gap: 14, padding: '24px 18px', borderLeft: i ? '1px solid #161616' : 'none' }}>
            <Icon name={it.icon} size={26} color="var(--lambo-gold)" />
            <div>
              <div style={{ fontFamily: 'var(--font-display)', fontWeight: 600, fontSize: 14.5, letterSpacing: 0.4, textTransform: 'uppercase' }}>{it.t}</div>
              <div style={{ fontSize: 12.5, color: 'var(--ash)' }}>{it.s}</div>
            </div>
          </div>
        ))}
      </div>
      <style>{`@media (max-width: 820px){ .shell > div:nth-child(3){border-left:none!important} #root [style*="repeat(4, 1fr)"]{grid-template-columns:1fr 1fr!important} }`}</style>
    </div>
  );
}

function ServicesSection() {
  return (
    <section className="section" id="services" data-screen-label="Services">
      <div className="shell">
        <div style={{ display: 'flex', flexWrap: 'wrap', alignItems: 'flex-end', justifyContent: 'space-between', gap: 20, marginBottom: 46 }}>
          <div>
            <Eyebrow>Our Detailing Packages</Eyebrow>
            <h2 className="display h-1" style={{ marginTop: 18 }}>Four tiers of shine</h2>
          </div>
          <p className="lede" style={{ maxWidth: 420 }}>From monthly maintenance to a full multi-stage showroom transformation — there's a package for every vehicle and budget.</p>
        </div>
        <div className="grid grid-4">
          {SERVICES.map((s, i) => <Reveal key={s.key} delay={i * 70}><ServiceCard s={s} index={i} /></Reveal>)}
        </div>
        <div style={{ marginTop: 40, display: 'flex', justifyContent: 'center', gap: 14, flexWrap: 'wrap' }}>
          <Button href="/ceramic-coating/" variant="ghost" icon="sparkle">Explore Ceramic Coating</Button>
          <Button href="/services/" variant="ghost" icon="arrowUpRight">Compare All Services</Button>
        </div>
      </div>
    </section>
  );
}

function DiamondSection() {
  const d = DIAMOND_SERVICE;
  return (
    <section className="section" data-screen-label="Diamond Detail" style={{ position: 'relative', overflow: 'hidden' }}>
      <div className="shell">
        <div style={{ marginBottom: 36 }}>
          <Eyebrow>Flagship Package</Eyebrow>
          <h2 className="display h-1" style={{ marginTop: 16 }}>Our most exclusive detail</h2>
        </div>
        <Reveal>
          <div style={{ 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="diamond-home-grid">
              <div style={{ position: 'relative', minHeight: 420, background: '#111' }}>
                {d.cover
                  ? <img src={d.cover} alt="Diamond Detail" style={{ position: 'absolute', inset: 0, width: '100%', height: '100%', objectFit: 'cover' }} />
                  : <image-slot id="diamond-hero-home" 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(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 · Ultimate Detail</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 }}>{d.blurb}</p>
                <ul style={{ listStyle: 'none', padding: 0, margin: '20px 0 0', display: 'grid', gridTemplateColumns: '1fr 1fr', gap: '6px 18px' }} id="diamond-home-list">
                  {d.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)" />{d.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>
      </div>
      <style>{`@media (max-width: 900px){ #diamond-home-grid{grid-template-columns:1fr!important} } @media (max-width: 620px){ #diamond-home-list{grid-template-columns:1fr!important} }`}</style>
    </section>
  );
}

function BeforeAfterFeature() {
  return (
    <section className="section section--deep" data-screen-label="Before/After">
      <div className="shell">
        <div className="grid" style={{ gridTemplateColumns: '1fr 1.15fr', gap: 48, alignItems: 'center' }}>
          <Reveal>
            <Eyebrow>The MVH Difference</Eyebrow>
            <h2 className="display h-1" style={{ marginTop: 18 }}>See the<br />transformation</h2>
            <p className="lede" style={{ marginTop: 18 }}>Drag the slider to reveal a real-world enhancement detail. Swirls removed, gloss restored, protection sealed — all on the customer's own driveway.</p>
            <ul style={{ listStyle: 'none', padding: 0, margin: '26px 0 30px', display: 'grid', gap: 14 }}>
              {['Multi-stage decontamination & clay treatment', 'Machine polish to remove swirls & marring', 'Gloss boost and long-lasting protection'].map((t, i) => (
                <li key={i} style={{ display: 'flex', gap: 12, alignItems: 'flex-start', color: 'var(--smoke)', fontWeight: 300 }}>
                  <Icon name="check" size={20} color="var(--lambo-gold)" style={{ flexShrink: 0, marginTop: 2 }} />{t}
                </li>
              ))}
            </ul>
            <Button href="/gallery/" variant="gold" icon="arrowUpRight">View Full Gallery</Button>
          </Reveal>
          <Reveal delay={120}>
            <BeforeAfter id="home-ba" caption="Gold Enhancement Detail · Audi RS3 · Cannock" height={440} />
          </Reveal>
        </div>
      </div>
      <style>{`@media (max-width: 900px){ #root section[data-screen-label="Before/After"] .grid{grid-template-columns:1fr!important} }`}</style>
    </section>
  );
}

function WhyMVH() {
  const points = [
    { icon: 'car', t: 'Truly Mobile', s: 'We arrive fully equipped with our own power and water. All you provide is the vehicle.' },
    { icon: 'droplet', t: 'Premium Products Only', s: 'Professional, paint-safe chemicals and the finest coatings — never supermarket shortcuts.' },
    { icon: 'sparkle', t: 'Obsessive Detail', s: 'Every shut, vent and panel. We treat each car as if it were our own.' },
    { icon: 'shield', t: 'Protected & Insured', s: 'Fully insured work and durable protection that keeps your finish looking its best.' },
  ];
  return (
    <section className="section" data-screen-label="Why MVH">
      <div className="shell">
        <div style={{ textAlign: 'center', marginBottom: 50 }}>
          <div style={{ display: 'flex', justifyContent: 'center' }}><Eyebrow center>Why Choose MVH</Eyebrow></div>
          <h2 className="display h-1" style={{ marginTop: 18 }}>Detailing, done properly</h2>
        </div>
        <div className="grid grid-4">
          {points.map((p, i) => (
            <Reveal key={i} delay={i * 70} className="card" style={{ padding: '30px 24px' }}>
              <div style={{ width: 54, height: 54, border: '1px solid #2c2c2c', display: 'flex', alignItems: 'center', justifyContent: 'center', marginBottom: 20 }}>
                <Icon name={p.icon} size={26} color="var(--lambo-gold)" />
              </div>
              <h3 className="display" style={{ fontSize: 20, textTransform: 'uppercase' }}>{p.t}</h3>
              <p style={{ color: 'var(--ash)', fontSize: 14, lineHeight: 1.6, marginTop: 10, fontWeight: 300 }}>{p.s}</p>
            </Reveal>
          ))}
        </div>
      </div>
    </section>
  );
}

const HOME_FAQ = [
  { q: 'Do you really come to my home or work?', a: 'Yes — MVH is fully mobile. We arrive completely self-sufficient with our own power and water supply, so we can detail your vehicle on your driveway, at your workplace or anywhere with reasonable access across Staffordshire.' },
  { q: 'How long does a detail take?', a: 'It depends on the package and the vehicle\'s condition. A Bronze maintenance detail takes 1–1.5 hours, a Silver full valet 2–3 hours, a Gold enhancement 4–6 hours, and a Platinum or Diamond detail a full day or more.' },
  { q: 'How is pricing decided?', a: 'Pricing is based on the size and condition of your vehicle. Each service page shows a clear range for regular and large vehicles — message us with a few photos for an exact, no-obligation quote.' },
  { q: 'What areas do you cover?', a: 'We cover Hednesford, Cannock, Burntwood, Rugeley, Lichfield, Stafford, Sutton Coldfield, Featherstone, Huntington, Pye Green, Burton upon Trent and the surrounding areas.' },
  { q: 'Can I add ceramic coating to my detail?', a: 'Absolutely. Ceramic coatings are available as an add-on to our Gold and Platinum packages, and are already included in the Diamond Detail. Our paintwork coating and wheel face coating each provide 2 years of lasting protection.' },
  { q: 'What is the Diamond Detail?', a: 'The Diamond Detail is our most exclusive package — a full 2-stage machine polish, complete interior restoration, engine bay detail, plus a 2 year paintwork ceramic coating and 2 year wheel face ceramic coating included. It\'s the ultimate transformation for vehicles that deserve the very best.' },
];

function FAQSection() {
  return (
    <section className="section section--deep" data-screen-label="FAQ">
      <div className="shell" style={{ maxWidth: 880 }}>
        <div style={{ textAlign: 'center', marginBottom: 36 }}>
          <div style={{ display: 'flex', justifyContent: 'center' }}><Eyebrow center>Common Questions</Eyebrow></div>
          <h2 className="display h-1" style={{ marginTop: 18 }}>Good to know</h2>
        </div>
        <FAQ items={HOME_FAQ} />
      </div>
    </section>
  );
}

function App() {
  React.useEffect(() => {
    injectSchema({
      '@context': 'https://schema.org', '@type': 'FAQPage',
      mainEntity: HOME_FAQ.map(f => ({ '@type': 'Question', name: f.q, acceptedAnswer: { '@type': 'Answer', text: f.a } }))
    });
  }, []);
  return (
    <div>
      <Nav active="Home" />
      <Hero />
      <TrustStrip />
      <ServicesSection />
      <DiamondSection />
      <BeforeAfterFeature />
      <WhyMVH />
      <ReviewsSection />
      <AreasSection />
      <FAQSection />
      <CTABand />
      <Footer />
      <StickyActions />
    </div>
  );
}
ReactDOM.createRoot(document.getElementById('root')).render(<App />);