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

// ═══════════════════════════════════════════════════════════════════════
// SERVICE PAGE — "A/C REPAIR"
// ═══════════════════════════════════════════════════════════════════════

const AC_PHOTO = {
  hero:    'https://images.unsplash.com/photo-1605618826115-fb9e0e58c5ec?auto=format&fit=crop&w=1600&q=80',
  detail:  'https://images.unsplash.com/photo-1486262715619-67b85e0b08d3?auto=format&fit=crop&w=1400&q=80',
  band:    'https://images.unsplash.com/photo-1517524008697-84bbe3c3fd98?auto=format&fit=crop&w=1600&q=80',
};

function ServiceACRepairPage() {
  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)' }}>A/C repair</span>
          </div>
          <div className="eyebrow" style={{ marginTop: 18 }}>FLORIDA HEAT · FIXED FAST</div>
          <h1 className="h-mega" style={{ marginTop: 18, fontSize: 'clamp(56px, 7vw, 104px)' }}>
            Cold air,<br />
            <span style={{ color: 'var(--red)' }}>or your money back.</span>
          </h1>
          <p className="lede" style={{ marginTop: 22 }}>
            Leak detection with UV dye, R-134a or R-1234yf recharge, compressor and condenser repair. We won&rsquo;t just refill it and send you home — we&rsquo;ll find why it leaked.
          </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>DIAGNOSTIC $79 · APPLIED TO REPAIR</span>
            <span>R-134A &amp; R-1234YF · IN STOCK</span>
          </div>
        </div>

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

      <TrustStrip />

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

        <div style={{ display: 'grid', gridTemplateColumns: 'repeat(4, 1fr)', gap: 18 }}>
          {[
            { t: 'Warm air on max', d: 'Most common cause: low refrigerant. Usually means a leak somewhere — we&rsquo;ll find it before refilling.' },
            { t: 'Strange smells', d: 'Mildew or wet-sock smell from the vents. Cabin filter or evaporator drain. Quick fix.' },
            { t: 'Loud rattle on', d: 'Compressor clutch or bearing going. Stop using A/C and call us — driving on it can wreck the compressor.' },
            { t: 'Wet floorboard', d: 'Evaporator drain line clogged. Water dumping into the cabin instead of outside. Fast clear, $40-ish.' },
          ].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: 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={AC_PHOTO.band} alt="Mechanic at work" 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">
            We diagnose first.<br />
            <span style={{ color: 'var(--red)' }}>Then we fix.</span>
          </h2>
        </div>

        <div style={{ display: 'grid', gridTemplateColumns: '1.1fr .9fr', gap: 36 }}>
          <img
            src={AC_PHOTO.detail}
            alt="Engine bay detail"
            style={{ width: '100%', height: 520, objectFit: 'cover', display: 'block' }}
          />
          <div style={{ display: 'flex', flexDirection: 'column', justifyContent: 'space-between' }}>
            {[
              ['Performance check', 'Free this summer', 'Pull the gauges, check pressures, sniff for leaks. Tells us if you need anything else.'],
              ['Recharge + UV leak detection', '$159', 'R-134a or R-1234yf as your car needs, plus UV dye so we can find the leak next visit.'],
              ['Compressor replacement', 'From $850', 'New compressor, expansion valve, drier, full system flush. Honest quote before any work.'],
              ['Condenser / evaporator', 'Quoted', 'Depending on access. Some are 2-hour jobs, some are 8. We&rsquo;ll show you why.'],
            ].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 */}
      <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: 'Cabin air filter', s: 'Replace once a year' },
            { t: 'Coolant flush', s: 'Cooling system tied to A/C performance' },
            { t: 'Battery test', s: 'Heat kills batteries faster' },
          ].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)' }}>SUMMER&rsquo;S COMING</div>
        <h2 className="h-mega" style={{ color: 'var(--bone)', marginTop: 18, fontSize: 'clamp(56px, 8vw, 120px)' }}>
          Get cold air<br />
          <span style={{ color: 'var(--red)' }}>before May.</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.ServiceACRepairPage = ServiceACRepairPage;