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

// ═══════════════════════════════════════════════════════════════════════
// SERVICE PAGE — "TIRES"
// ═══════════════════════════════════════════════════════════════════════

const TIRE_PHOTO = {
  hero:    'https://images.unsplash.com/photo-1449965408869-eaa3f722e40d?auto=format&fit=crop&w=1600&q=80',
  detail:  'https://images.unsplash.com/photo-1611821064430-0d40291922d2?auto=format&fit=crop&w=1400&q=80',
  band:    'https://images.unsplash.com/photo-1494976388531-d1058494cdd8?auto=format&fit=crop&w=1600&q=80',
};

function ServiceTiresPage() {
  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)' }}>Tires</span>
          </div>
          <div className="eyebrow" style={{ marginTop: 18 }}>IT&rsquo;S IN THE NAME · 4 MAJOR BRANDS</div>
          <h1 className="h-mega" style={{ marginTop: 18, fontSize: 'clamp(56px, 7vw, 104px)' }}>
            Tires,<br />
            <span style={{ color: 'var(--red)' }}>road-force balanced.</span>
          </h1>
          <p className="lede" style={{ marginTop: 22 }}>
            Michelin, BFGoodrich, Continental, Cooper. Mounted, balanced, and aligned right the first time. Free rotation for life on tires bought from us.
          </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>MOUNTED $35/WHEEL · TPMS RESET INCLUDED</span>
            <span>FREE FLAT REPAIR FOR LIFE</span>
          </div>
        </div>

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

      <TrustStrip />

      {/* WHEN TO REPLACE */}
      <section style={{ padding: '88px 44px', background: 'var(--bone)' }}>
        <div style={{ marginBottom: 48 }}>
          <h2 className="h-big">
            Time for new ones?<br />
            <span style={{ color: 'var(--red)' }}>Four ways to know.</span>
          </h2>
        </div>

        <div style={{ display: 'grid', gridTemplateColumns: 'repeat(4, 1fr)', gap: 18 }}>
          {[
            { t: 'Penny test', d: 'Lincoln&rsquo;s head down. If you can see the top of his head, you&rsquo;re below 2/32" — replace now.' },
            { t: 'Wear bars', d: 'Smooth raised lines running across the tread. If they&rsquo;re flush with the surface, the tire is done.' },
            { t: 'Cracks or bulges', d: 'Sidewall damage from potholes or curbs. A bulge can blow out at highway speed — call us today.' },
            { t: 'Age', d: 'Even with good tread, rubber hardens after 6 years. Florida sun makes it faster. Check the DOT date.' },
          ].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,
              }}>SIGN 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={TIRE_PHOTO.band} alt="Driving on the road" 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">
            Tire shop services,<br />
            <span style={{ color: 'var(--red)' }}>flat pricing.</span>
          </h2>
        </div>

        <div style={{ display: 'grid', gridTemplateColumns: '1.1fr .9fr', gap: 36 }}>
          <img
            src={TIRE_PHOTO.detail}
            alt="Tire mounting detail"
            style={{ width: '100%', height: 520, objectFit: 'cover', display: 'block' }}
          />
          <div style={{ display: 'flex', flexDirection: 'column', justifyContent: 'space-between' }}>
            {[
              ['Mount + balance', '$35 / wheel', 'Hunter road-force balancer. TPMS reset included. Free for life on tires bought here.'],
              ['Rotation', '$25', 'Cross-pattern rotation per manufacturer spec. Free with oil change. Free for life on our tires.'],
              ['Flat repair', '$25', 'Plug-and-patch from the inside if it&rsquo;s safely repairable. We won&rsquo;t patch a sidewall — that&rsquo;s a new tire.'],
              ['Wheel alignment', '$89 — $129', '4-wheel laser. Printout of before/after. Pothole re-do free in 6 months.'],
              ['New tires', 'Quoted on request', 'We&rsquo;ll match online prices on Michelin, BFG, Continental, Cooper. No upcharge for installation.'],
            ].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: 'Brake inspection', s: 'Free with tire service' },
            { t: 'Suspension check', s: 'Tires wear unevenly when shocks are tired' },
            { t: 'Alignment', s: 'Worth doing with new tires' },
          ].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)' }}>NEW SET, OR JUST A PATCH</div>
        <h2 className="h-mega" style={{ color: 'var(--bone)', marginTop: 18, fontSize: 'clamp(56px, 8vw, 120px)' }}>
          Drive in.<br />
          <span style={{ color: 'var(--red)' }}>Drive out.</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.ServiceTiresPage = ServiceTiresPage;