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

// ═══════════════════════════════════════════════════════════════════════
// SERVICE PAGE — "BRAKES"
// ═══════════════════════════════════════════════════════════════════════

const BRAKE_PHOTO = {
  hero:    'https://images.unsplash.com/photo-1568605117036-5fe5e7bab0b7?auto=format&fit=crop&w=1600&q=80', // car / mechanic
  detail:  'https://images.unsplash.com/photo-1486754735734-325b5831c3ad?auto=format&fit=crop&w=1400&q=80', // tools/engine
  shop:    'https://images.unsplash.com/photo-1487754180451-c456f719a1fc?auto=format&fit=crop&w=1600&q=80', // mechanic at work
  band:    'https://images.unsplash.com/photo-1503376780353-7e6692767b70?auto=format&fit=crop&w=1600&q=80', // car detail
};

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

      {/* HERO — split screen, service-specific */}
      <section style={{
        display: 'grid', gridTemplateColumns: '1fr 1fr',
        minHeight: 600, position: 'relative',
      }}>
        {/* LEFT panel — the pitch */}
        <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)' }}>Brakes</span>
          </div>
          <div className="eyebrow" style={{ marginTop: 18 }}>OUR SPECIALTY · 12,000+ JOBS DONE</div>
          <h1 className="h-mega" style={{ marginTop: 18, fontSize: 'clamp(56px, 7vw, 104px)' }}>
            Brake<br />
            service,<br />
            <span style={{ color: 'var(--red)' }}>done right.</span>
          </h1>
          <p className="lede" style={{ marginTop: 22 }}>
            The thing we&rsquo;re known for. Pads, rotors, calipers, lines, fluid — every job inspected, photographed, and quoted before a wrench moves.
          </p>
          <div style={{ display: 'flex', gap: 14, marginTop: 28 }}>
            <a href="tel:5615550199" className="btn btn-red">☎ (561) 555-0199</a>
            <a href="#book" 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 $289 · SAME-DAY SERVICE</span>
            <span>DROP BY 11A · WALK-INS WELCOME</span>
          </div>
        </div>

        {/* RIGHT panel — real photo */}
        <div style={{ position: 'relative', background: 'var(--ink)' }}>
          <img
            src={BRAKE_PHOTO.hero}
            alt="Mechanic servicing a car"
            style={{ position: 'absolute', inset: 0, width: '100%', height: '100%', objectFit: 'cover', display: 'block' }}
          />
        </div>
      </section>

      <TrustStrip />

      {/* SYMPTOMS — when to come in */}
      <section style={{ padding: '88px 44px', background: 'var(--bone)' }}>
        <div style={{ marginBottom: 48 }}>
          <h2 className="h-big">
            If your car is doing any of these,<br />
            <span style={{ color: 'var(--red)' }}>call us today.</span>
          </h2>
        </div>

        <div style={{ display: 'grid', gridTemplateColumns: 'repeat(4, 1fr)', gap: 18 }}>
          {[
            { t: 'Squealing', d: 'High-pitched whine when you brake. Usually pad wear indicators — schedule within 2 weeks.' },
            { t: 'Grinding', d: 'Metal-on-metal grinding. Stop driving and call us today. Pads are gone, rotors damaging.' },
            { t: 'Pulsing pedal', d: 'Pedal pumps under your foot. Warped rotors. Resurface or replace within 1,000 miles.' },
            { t: 'Soft pedal', d: 'Pedal sinks slowly to the floor. Air or moisture in the lines. Tow it in — don&rsquo;t drive.' },
          ].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,
              }}>SYMPTOM 0{i + 1}</div>
              <div className="h-mid" style={{ fontSize: 24 }}>{s.t}</div>
              <p className="body" style={{ fontSize: 14, marginTop: 10, marginBottom: 0, color: 'inherit', opacity: .9 }}>{s.d}</p>
            </div>
          ))}
        </div>
      </section>

      {/* FULL-BLEED PHOTO BAND between sections */}
      <section style={{ background: 'var(--ink)' }}>
        <img src={BRAKE_PHOTO.band} alt="Car detail" style={{ width: '100%', height: 360, objectFit: 'cover', display: 'block' }} />
      </section>

      {/* THE WORK — magazine spread */}
      <section style={{ padding: '88px 44px', background: 'var(--bone-2)', borderBottom: '1px solid var(--line)' }}>
        <div style={{ marginBottom: 56 }}>
          <h2 className="h-big">
            Clear pricing —<br />
            <span style={{ color: 'var(--red)' }}>no surprises on the invoice.</span>
          </h2>
        </div>

        <div style={{ display: 'grid', gridTemplateColumns: '1.1fr .9fr', gap: 36 }}>
          <img
            src={BRAKE_PHOTO.detail}
            alt="Brake service detail"
            style={{ width: '100%', height: 520, objectFit: 'cover', display: 'block' }}
          />
          <div style={{ display: 'flex', flexDirection: 'column', justifyContent: 'space-between' }}>
            {[
              ['Pads & rotors', 'From $289 all-in', 'Ceramic pads (low dust), OEM-grade rotors. Free inspection with photos before any work begins.'],
              ['Brake fluid flush', '$89', 'Most shops skip this. Old fluid absorbs moisture, fluid boils, pedal goes soft. We test moisture content free.'],
              ['Caliper rebuild', '$140 / corner', 'Stuck slider pins, torn boots, frozen pistons — usually we can rebuild instead of replace. Saves you ~$300.'],
              ['Master cylinder', 'Quoted on inspection', 'Pedal sinking to the floor? Often it&rsquo;s the cylinder, not your imagination. We&rsquo;ll test before recommending.'],
            ].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 }}>{d}</p>
                </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 SERVICES */}
      <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 brake service' },
            { t: 'Alignment check', s: 'Quick reading printed for you' },
            { 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)' }}>NO APPOINTMENTS NEEDED</div>
        <h2 className="h-mega" style={{ color: 'var(--bone)', marginTop: 18, fontSize: 'clamp(56px, 8vw, 120px)' }}>
          Ready when<br />
          <span style={{ color: 'var(--red)' }}>you are.</span>
        </h2>
        <p className="lede" style={{ color: 'var(--bone-3)', margin: '28px auto 0' }}>
          Dom or Sam will pick up. Tell them what your car&rsquo;s doing. They&rsquo;ll tell you when to come in.
        </p>
        <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="#contact" className="btn btn-ghost" style={{ borderColor: 'var(--bone)', color: 'var(--bone)' }}>
            Get directions →
          </a>
        </div>
      </section>

      <Footer />
    </div>
  );
}

window.ServiceBrakesPage = ServiceBrakesPage;