const VALUES = [
  ['Passion for presentation', 'Detailing is a craft, not a chore. We genuinely love seeing a tired vehicle transformed back to its best.'],
  ['Professional standards', 'Correct technique, the right products and proper safe-wash methods on every single car — no shortcuts.'],
  ['Mobile convenience', 'We come to you, fully self-sufficient with our own power and water. You carry on with your day.'],
  ['Attention to detail', 'It is in the name. The shuts, the vents, the badges — the places others miss are the places we focus.'],
];
const STATS = [[String(REVIEW_STATS.rating), 'Google rating'], [String(REVIEW_STATS.count), 'Google reviews'], ['11+', 'Areas covered'], ['100%', 'Mobile service']];

function App() {
  return (
    <div>
      <Nav active="About" />

      {/* Hero */}
      <section style={{ position: 'relative', minHeight: '70vh', display: 'flex', alignItems: 'flex-end', overflow: 'hidden' }} data-screen-label="About Hero">
        <image-slot id="about-hero" placeholder="Drop a detailer-at-work / studio 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.75), rgba(0,0,0,0.35) 45%, rgba(0,0,0,0.92))' }}></div>
        <div className="shell" style={{ position: 'relative', zIndex: 2, paddingBottom: 56, paddingTop: 130 }}>
          <Eyebrow>About MVH</Eyebrow>
          <h1 className="display" style={{ marginTop: 18, fontSize: 'clamp(44px,8vw,92px)', lineHeight: 0.94, maxWidth: 880 }}>Showroom standards,<br /><span className="metal-gold">brought to you</span></h1>
        </div>
      </section>

      {/* Story */}
      <section className="section" data-screen-label="Story">
        <div className="shell">
          <div className="grid" style={{ gridTemplateColumns: '1fr 1fr', gap: 56, alignItems: 'center' }} id="story-grid">
            <Reveal>
              <Eyebrow>Our Story</Eyebrow>
              <h2 className="display h-1" style={{ marginTop: 16 }}>Built on a love<br />of clean cars</h2>
              <div style={{ marginTop: 20, display: 'grid', gap: 16, color: 'var(--smoke)', fontWeight: 300, lineHeight: 1.7 }}>
                <p style={{ margin: 0 }}>MVH Mobile Detailing was founded on a simple belief: every vehicle deserves to look its absolute best, and getting it there shouldn't mean a trip across town or a day without your car.</p>
                <p style={{ margin: 0 }}>So we bring the studio to you. Fully self-sufficient and equipped with professional, paint-safe products, we transform vehicles on driveways across Staffordshire — from quick maintenance washes to full multi-stage paint correction and ceramic coating.</p>
                <p style={{ margin: 0 }}>What sets us apart is care. We treat every car as if it were our own, and it shows in the gloss, the spotless interiors and the customers who come back month after month.</p>
              </div>
              <div style={{ display: 'flex', gap: 12, marginTop: 28, flexWrap: 'wrap' }}>
                <Button href="/booking/" variant="gold" icon="arrowUpRight">Book A Detail</Button>
                <Button href="/gallery/" variant="ghost">See Our Work</Button>
              </div>
            </Reveal>
            <Reveal delay={120}>
              <div style={{ position: 'relative', height: 480, border: '1px solid #232323', background: '#141414' }}>
                <image-slot id="about-portrait" placeholder="Drop a portrait / van / detail photo" shape="rect" style={{ position: 'absolute', inset: 0, width: '100%', height: '100%' }}></image-slot>
              </div>
            </Reveal>
          </div>
        </div>
        <style>{`@media (max-width:860px){ #story-grid{grid-template-columns:1fr!important} #story-grid > div:last-child > div{height:340px!important} }`}</style>
      </section>

      {/* Stats */}
      <section style={{ background: '#0a0a0a', borderTop: '1px solid #161616', borderBottom: '1px solid #161616' }}>
        <div className="shell" style={{ display: 'grid', gridTemplateColumns: 'repeat(4,1fr)' }}>
          {STATS.map((s, i) => (
            <div key={i} style={{ padding: '44px 18px', textAlign: 'center', borderLeft: i ? '1px solid #161616' : 'none' }}>
              <div className="metal-gold" style={{ fontFamily: 'var(--font-display)', fontWeight: 700, fontSize: 'clamp(34px,5vw,52px)', lineHeight: 1 }}>{s[0]}</div>
              <div style={{ fontSize: 12.5, color: 'var(--ash)', textTransform: 'uppercase', letterSpacing: 1.2, marginTop: 8 }}>{s[1]}</div>
            </div>
          ))}
        </div>
        <style>{`@media (max-width:620px){ #root section[style*="0a0a0a"] .shell{grid-template-columns:1fr 1fr!important} #root section[style*="0a0a0a"] .shell > div:nth-child(3){border-left:none!important} }`}</style>
      </section>

      {/* Values */}
      <section className="section" data-screen-label="Values">
        <div className="shell">
          <div style={{ textAlign: 'center', marginBottom: 50 }}>
            <div style={{ display: 'flex', justifyContent: 'center' }}><Eyebrow center>What We Stand For</Eyebrow></div>
            <h2 className="display h-1" style={{ marginTop: 18 }}>The MVH way</h2>
          </div>
          <div className="grid grid-2">
            {VALUES.map((v, i) => (
              <Reveal key={i} delay={i * 70} className="card" style={{ padding: '32px 30px', display: 'flex', gap: 22 }}>
                <div className="metal-gold" style={{ fontFamily: 'var(--font-display)', fontWeight: 700, fontSize: 40, lineHeight: 1 }}>{('0' + (i + 1))}</div>
                <div>
                  <h3 className="display" style={{ fontSize: 21, textTransform: 'uppercase' }}>{v[0]}</h3>
                  <p style={{ color: 'var(--ash)', fontSize: 14.5, lineHeight: 1.65, marginTop: 10, fontWeight: 300 }}>{v[1]}</p>
                </div>
              </Reveal>
            ))}
          </div>
        </div>
      </section>

      <AreasSection />
      <ReviewsSection />
      <CTABand />
      <Footer />
      <StickyActions />
    </div>
  );
}
ReactDOM.createRoot(document.getElementById('root')).render(<App />);