/* global React, Logo, Nav, PhoneBar, TrustStrip, Footer, Img, Stars */

// ═══════════════════════════════════════════════════════════════════════
// SERVICE PAGE — "OIL CHANGE"
// ═══════════════════════════════════════════════════════════════════════

const OIL_PHOTO = {
  hero:    'https://images.unsplash.com/photo-1486754735734-325b5831c3ad?auto=format&fit=crop&w=1600&q=80',
  detail:  'https://images.unsplash.com/photo-1632823471565-1ecdf5a59f51?auto=format&fit=crop&w=1400&q=80',
  band:    'https://images.unsplash.com/photo-1492144534655-ae79c964c9d7?auto=format&fit=crop&w=1600&q=80',
};

function ServiceOilChangePage() {
  return (
    <div style={{ background: 'var(--bone)', color: 'var(--ink)', minHeight: '100%' }}>
      <PhoneBar tone="ink" />
      <Nav />

      {/* HERO */}
      <section style={{
        display: 'grid', gridTemplateColumns: '1fr 1fr',
        minHeight: 600, position: 'relative',
      }}>
        <div style={{
          background: 'var(--bone)', color: 'var(--ink)',
          padding: '72px 56px',
          display: 'flex', flexDirection: 'column', justifyContent: 'center',
        }}>
          <div style={{ display: 'flex', alignItems: 'center', gap: 10, fontFamily: 'var(--font-mono)', fontSize: 11, letterSpacing: '.14em', textTransform: 'uppercase', color: 'var(--steel)' }}>
            <a href="/services/" style={{ color: 'var(--steel)', textDecoration: 'none' }}>Services</a>
            <span>/</span>
            <span style={{ color: 'var(--ink)' }}>Oil change</span>
          </div>
          <div className="eyebrow" style={{ marginTop: 18 }}>IN AND OUT · 30 MINUTES</div>
          <h1 className="h-mega" style={{ marginTop: 18, fontSize: 'clamp(56px, 7vw, 104px)' }}>
            Oil change,<br />
            <span style={{ color: 'var(--red)' }}>done right.</span>
          </h1>
          <p className="lede" style={{ marginTop: 22 }}>
            Conventional, blend, or full synthetic. Up to 5 quarts and a new filter — plus a free multi-point inspection so nothing else sneaks up on you.
          </p>
          <div style={{ display: 'flex', gap: 14, marginTop: 28 }}>
            <a href="tel:5615550199" className="btn btn-red">☎ (561) 555-0199</a>
            <a href="/appointments/" className="btn btn-ghost">Book a bay →</a>
          </div>
          <div style={{
            marginTop: 36, paddingTop: 22,
            borderTop: '1px solid var(--line)',
            display: 'flex', justifyContent: 'space-between', alignItems: 'center',
            fontFamily: 'var(--font-mono)', fontSize: 11, letterSpacing: '.14em',
            textTransform: 'uppercase', color: 'var(--steel)',
            gap: 14, flexWrap: 'wrap',
          }}>
            <span>FROM $49 · WALK-INS WELCOME</span>
            <span>STICKER REMINDER · FREE FLUID TOP-OFF</span>
          </div>
        </div>

        <div style={{ position: 'relative', background: 'var(--ink)' }}>
          <img
            src={OIL_PHOTO.hero}
            alt="Oil change service"
            style={{ position: 'absolute', inset: 0, width: '100%', height: '100%', objectFit: 'cover', display: 'block' }}
          />
        </div>
      </section>

      <TrustStrip />

      {/* WHEN TO CHANGE IT */}
      <section style={{ padding: '88px 44px', background: 'var(--bone)' }}>
        <div style={{ marginBottom: 48 }}>
          <h2 className="h-big">
            How to know it&rsquo;s time<br />
            <span style={{ color: 'var(--red)' }}>(without guessing).</span>
          </h2>
        </div>

        <div style={{ display: 'grid', gridTemplateColumns: 'repeat(4, 1fr)', gap: 18 }}>
          {[
            { t: 'Conventional', d: 'Every 3,000–5,000 miles. Older engines, mostly city driving, dusty conditions.' },
            { t: 'Synthetic blend', d: 'Every 5,000–7,500 miles. Most modern cars in a daily-driver pattern.' },
            { t: 'Full synthetic', d: 'Every 7,500–10,000 miles. Newer cars, hybrids, turbocharged engines.' },
            { t: 'Or check the dipstick', d: 'Oil should look amber, not black. Smell sweet, not burnt. We&rsquo;ll show you on yours.' },
          ].map((s, i) => (
            <div key={s.t} style={{
              background: i === 1 || i === 3 ? 'var(--red)' : 'var(--bone-2)',
              color: i === 1 || i === 3 ? '#fff' : 'var(--ink)',
              padding: '28px 24px',
              border: '1px solid var(--ink)',
            }}>
              <div style={{
                fontFamily: 'var(--font-mono)', fontSize: 11,
                letterSpacing: '.16em', textTransform: 'uppercase',
                opacity: .7, marginBottom: 8,
              }}>OPTION 0{i + 1}</div>
              <div className="h-mid" style={{ fontSize: 22 }}>{s.t}</div>
              <p className="body" style={{ fontSize: 14, marginTop: 10, marginBottom: 0, color: 'inherit', opacity: .9 }} dangerouslySetInnerHTML={{ __html: s.d }} />
            </div>
          ))}
        </div>
      </section>

      <section style={{ background: 'var(--ink)' }}>
        <img src={OIL_PHOTO.band} alt="Garage detail" style={{ width: '100%', height: 360, objectFit: 'cover', display: 'block' }} />
      </section>

      {/* PRICING */}
      <section style={{ padding: '88px 44px', background: 'var(--bone-2)', borderBottom: '1px solid var(--line)' }}>
        <div style={{ marginBottom: 56 }}>
          <h2 className="h-big">
            Three tiers, one promise:<br />
            <span style={{ color: 'var(--red)' }}>quoted before we touch it.</span>
          </h2>
        </div>

        <div style={{ display: 'grid', gridTemplateColumns: '1.1fr .9fr', gap: 36 }}>
          <img
            src={OIL_PHOTO.detail}
            alt="Oil pour detail"
            style={{ width: '100%', height: 520, objectFit: 'cover', display: 'block' }}
          />
          <div style={{ display: 'flex', flexDirection: 'column', justifyContent: 'space-between' }}>
            {[
              ['Conventional', '$49', 'Up to 5 quarts conventional 5W-30 + filter. Best for older engines and short city commutes.'],
              ['Synthetic blend', '$69', 'Up to 5 quarts blend + filter. The sweet spot for most modern daily drivers.'],
              ['Full synthetic', '$89', 'Up to 5 quarts Mobil 1 or equivalent + filter. Required for most cars under 5 years old.'],
              ['Diesel / turbo / specialty', 'From $109', 'Heavy-duty trucks, turbocharged engines, hybrids. We&rsquo;ll quote based on capacity.'],
            ].map(([t, p, d]) => (
              <div key={t} style={{
                padding: '20px 0', borderBottom: '1px solid var(--line)',
                display: 'grid', gridTemplateColumns: '1fr auto', gap: 18,
              }}>
                <div>
                  <div className="h-mid" style={{ fontSize: 22 }}>{t}</div>
                  <p className="body" style={{ fontSize: 14, marginTop: 8, marginBottom: 0 }} dangerouslySetInnerHTML={{ __html: d }} />
                </div>
                <div style={{
                  fontFamily: 'var(--font-display)', fontWeight: 700,
                  color: 'var(--red)', fontSize: 18, whiteSpace: 'nowrap',
                  alignSelf: 'start',
                }}>{p}</div>
              </div>
            ))}
          </div>
        </div>
      </section>

      {/* RELATED */}
      <section style={{ padding: '88px 44px', background: 'var(--bone)' }}>
        <h2 className="h-big">While you&rsquo;re in.</h2>
        <div style={{ display: 'grid', gridTemplateColumns: 'repeat(3, 1fr)', gap: 18, marginTop: 32 }}>
          {[
            { t: 'Tire rotation', s: 'Free with oil change' },
            { t: 'Cabin air filter', s: 'Quick swap, big A/C boost' },
            { t: 'Multi-point inspection', s: 'Always free, never upsold' },
          ].map(s => (
            <a key={s.t} href="/services/" style={{
              padding: 24, border: '1px solid var(--ink)', background: 'var(--bone-2)',
              textDecoration: 'none', color: 'var(--ink)',
              display: 'flex', justifyContent: 'space-between', alignItems: 'center', gap: 14,
              transition: 'background .12s, color .12s',
            }}
            onMouseEnter={e => { e.currentTarget.style.background = 'var(--ink)'; e.currentTarget.style.color = 'var(--bone)'; }}
            onMouseLeave={e => { e.currentTarget.style.background = 'var(--bone-2)'; e.currentTarget.style.color = 'var(--ink)'; }}>
              <div>
                <div className="h-mid" style={{ fontSize: 22 }}>{s.t}</div>
                <div className="tiny" style={{ color: 'inherit', opacity: .65, marginTop: 6 }}>{s.s}</div>
              </div>
              <span style={{ fontFamily: 'var(--font-mono)', fontSize: 11, letterSpacing: '.14em' }}>VIEW →</span>
            </a>
          ))}
        </div>
      </section>

      {/* CTA */}
      <section style={{
        background: 'var(--ink)', color: 'var(--bone)',
        padding: '96px 44px', textAlign: 'center',
        borderTop: '4px solid var(--red)',
      }}>
        <div className="eyebrow" style={{ color: 'var(--red)' }}>WALK IN ANY DAY</div>
        <h2 className="h-mega" style={{ color: 'var(--bone)', marginTop: 18, fontSize: 'clamp(56px, 8vw, 120px)' }}>
          30 minutes,<br />
          <span style={{ color: 'var(--red)' }}>back on the road.</span>
        </h2>
        <div style={{ display: 'flex', justifyContent: 'center', gap: 14, marginTop: 38 }}>
          <a href="tel:5615550199" className="btn btn-red">☎ Call (561) 555-0199</a>
          <a href="/appointments/" className="btn btn-ghost" style={{ borderColor: 'var(--bone)', color: 'var(--bone)' }}>
            Book a bay →
          </a>
        </div>
      </section>

      <Footer />
    </div>
  );
}

window.ServiceOilChangePage = ServiceOilChangePage;