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

// ═══════════════════════════════════════════════════════════════════════
// SUB-PAGES — Services, About, Contact
// Match V1's industrial style so they feel like a coherent site.
// ═══════════════════════════════════════════════════════════════════════

// ── SERVICES ────────────────────────────────────────────────
function ServicesPage() {
  const svc = [
    { cat: 'Specialty', n: '01', t: 'Brakes', sub: 'Pads, rotors, calipers, lines, fluid', price: 'From $289',
      bullets: ['Ceramic, semi-met, or OEM pads', 'Free inspection with photos', 'Quote before any work begins', 'Same-day if dropped before 11am'] },
    { cat: 'Specialty', n: '02', t: 'Tires', sub: '4 major brands, road-force balanced', price: 'Mounted $35/wheel',
      bullets: ['Michelin, BFG, Continental, Cooper', 'Free rotation every 5k miles for life', 'Free flat repair for tires bought here', 'TPMS reset included'] },
    { cat: 'Maintenance', n: '03', t: 'Oil change', sub: 'Conventional, blend, or full synthetic', price: '$49–$109',
      bullets: ['Up to 5 quarts + filter', 'Multi-point inspection (free)', 'Sticker reminder on windshield', 'In and out in ~30 min'] },
    { cat: 'Maintenance', n: '04', t: 'Alignment', sub: '4-wheel laser-guided', price: '$99 flat',
      bullets: ['Pothole re-alignment in 6 mo: free', 'Printout of before/after readings', 'Camber, caster, toe corrected', 'Suspension inspection included'] },
    { cat: 'Repair', n: '05', t: 'A/C service', sub: 'Florida heat, fixed fast', price: 'Diag $79',
      bullets: ['Leak detection w/ UV dye', 'R-134a or R-1234yf recharge', 'Compressor & condenser repair', 'Cabin filter replacement'] },
    { cat: 'Repair', n: '06', t: 'Diagnostics', sub: 'Check engine light decoded', price: 'Free scan',
      bullets: ['Manufacturer-specific scanners', 'Plain-English explanation', 'Quote before any work begins', 'No pressure to fix today'] },
    { cat: 'Repair', n: '07', t: 'Batteries', sub: 'Tested free, installed in 20 min', price: 'From $129',
      bullets: ['Interstate & DieHard in stock', '3-year free replacement promise', 'Terminal cleaning included', 'Old battery recycled'] },
    { cat: 'Maintenance', n: '08', t: 'Belts & hoses', sub: 'Before they snap', price: 'Quoted',
      bullets: ['Visual inspection always free', 'Serpentine, timing, accessory belts', 'Coolant & vacuum hoses', 'Tensioner & pulley replacement'] },
  ];

  const cats = ['All', 'Specialty', 'Maintenance', 'Repair'];

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

      {/* page header */}
      <section style={{ padding: '64px 28px 32px', borderBottom: '1px solid var(--line)' }}>
        <div className="eyebrow">PAGE 02 / SERVICES</div>
        <h1 className="h-mega" style={{ marginTop: 18, fontSize: 'clamp(56px, 8vw, 120px)' }}>
          What we<br />
          <span style={{ color: 'var(--red)' }}>fix.</span>
        </h1>
        <p className="lede" style={{ marginTop: 22 }}>
          Eight things we do every day, and a few we do exceptionally well. If your car needs something not on this list, call us anyway — chances are we can help, and if we can&rsquo;t, we&rsquo;ll tell you who can.
        </p>
      </section>

      {/* filter chips */}
      <div style={{
        display: 'flex', gap: 10, padding: '24px 28px',
        borderBottom: '1px solid var(--line)', background: 'var(--bone-2)',
      }}>
        {cats.map((c, i) => (
          <span key={c} className={i === 0 ? 'tag tag-ink' : 'tag'} style={{ cursor: 'pointer' }}>{c}</span>
        ))}
      </div>

      {/* services grid */}
      <section style={{ padding: '40px 28px 88px' }}>
        <div style={{ display: 'grid', gridTemplateColumns: 'repeat(2, 1fr)', gap: 18 }}>
          {svc.map(s => (
            <div key={s.t} style={{
              border: '1px solid var(--ink)',
              background: 'var(--bone)',
              padding: '28px 28px',
              display: 'grid', gridTemplateColumns: 'auto 1fr', gap: 24,
            }}>
              <div style={{
                fontFamily: 'var(--font-display)', fontSize: 56, fontWeight: 700,
                color: 'var(--red)', lineHeight: .9, alignSelf: 'start',
              }}>{s.n}</div>
              <div>
                <div style={{ display: 'flex', justifyContent: 'space-between', alignItems: 'baseline', gap: 12 }}>
                  <div>
                    <span className="tag">{s.cat}</span>
                  </div>
                  <div style={{ fontFamily: 'var(--font-display)', fontWeight: 700, color: 'var(--red)', fontSize: 18 }}>{s.price}</div>
                </div>
                <h3 className="h-mid" style={{ fontSize: 30, marginTop: 14 }}>{s.t}</h3>
                <p className="body" style={{ fontSize: 14, marginTop: 6 }}>{s.sub}</p>
                <ul style={{ margin: '14px 0 0', padding: 0, listStyle: 'none', display: 'grid', gridTemplateColumns: '1fr 1fr', gap: 6 }}>
                  {s.bullets.map(b => (
                    <li key={b} style={{ fontSize: 13, color: 'var(--ink-2)', display: 'flex', gap: 8 }}>
                      <span style={{ color: 'var(--red)', fontWeight: 700 }}>→</span>{b}
                    </li>
                  ))}
                </ul>
              </div>
            </div>
          ))}
        </div>
      </section>

      <Footer />
    </div>
  );
}

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

      <section style={{ padding: '64px 28px 32px' }}>
        <div className="eyebrow">PAGE 03 / ABOUT</div>
        <h1 className="h-mega" style={{ marginTop: 18, fontSize: 'clamp(56px, 8vw, 120px)' }}>
          Three<br />
          <span style={{ color: 'var(--red)' }}>generations.</span><br />
          One garage.
        </h1>
      </section>

      {/* story 2-col */}
      <section style={{ padding: '32px 28px 64px' }}>
        <div style={{ display: 'grid', gridTemplateColumns: '1.1fr .9fr', gap: 56 }}>
          <Img label="Archival photo · Dom Vittorelli in front of the original shop, 1987, hand-painted sign behind him" h={520} />
          <div className="body" style={{ fontSize: 16 }}>
            <p>Dominic Vittorelli opened Boca Tire on a corner lot of Federal Highway in the spring of 1987. He had two lifts, a hand-me-down tire machine from his old boss at Sunoco, and a hand-painted sign his father made for him as a graduation present.</p>
            <p>The sign is still in the office. Most of the rest has been replaced.</p>
            <p>Today the shop has eight bays, four ASE-certified mechanics, and three Vittorellis on payroll — Dom still does the books, his nephew Lenny runs the floor, and Lenny&rsquo;s daughter Sam writes every quote that goes out the door. Marcus Reed joined in 2019 from a NASCAR pit crew in Daytona; he can balance a tire faster than you can finish your coffee.</p>
            <p>What hasn&rsquo;t changed in 39 years: we don&rsquo;t sell parts you don&rsquo;t need, we don&rsquo;t use phone trees, and we still close at 6 sharp on Fridays so the guys can get to dinner with their families.</p>
          </div>
        </div>
      </section>

      {/* timeline */}
      <section style={{ padding: '64px 28px', background: 'var(--ink)', color: 'var(--bone)' }}>
        <div className="eyebrow">SECTION 02 / THE LONG ROAD</div>
        <h2 className="h-big" style={{ marginTop: 14, color: 'var(--bone)' }}>39 years, in 9 entries.</h2>

        <div style={{
          marginTop: 48, display: 'grid', gridTemplateColumns: 'repeat(3, 1fr)',
          gap: 0, border: '1px solid rgba(255,255,255,.16)',
        }}>
          {[
            ['1987', 'Dom opens the lot', 'Two bays, one phone line, a coffee maker that worked half the time.'],
            ['1995', 'Lenny joins', 'Dom\'s nephew comes on as a tire tech right out of vo-tech.'],
            ['1999', 'First ASE Master', 'Lenny passes all 8 ASE Master certs in one summer.'],
            ['2004', 'Expansion to 6 bays', 'We bought the lot next door. Old taco truck guy said he\'d miss us.'],
            ['2011', 'NAPA AutoCare partner', 'Joining gave our customers a nationwide service network.'],
            ['2014', 'Sam writes her first quote', 'Started part-time at 19. Now runs the front of house.'],
            ['2019', 'Marcus crosses over', 'Came from NASCAR Daytona pit crew. Brought the whole team\'s game up.'],
            ['2022', '600th 5-star review', 'A retired English teacher named Eleanor wrote it. We framed it.'],
            ['2026', 'Still here', 'Same corner. Same handshake. Same sign.'],
          ].map(([y, t, d], i) => (
            <div key={y} style={{
              padding: '22px 20px',
              borderRight: (i % 3) < 2 ? '1px solid rgba(255,255,255,.16)' : 'none',
              borderBottom: i < 6 ? '1px solid rgba(255,255,255,.16)' : 'none',
            }}>
              <div style={{ fontFamily: 'var(--font-display)', fontSize: 36, fontWeight: 700, color: 'var(--red)' }}>{y}</div>
              <div className="h-mid" style={{ fontSize: 18, marginTop: 6, color: 'var(--bone)' }}>{t}</div>
              <p className="tiny" style={{ color: 'var(--bone-3)', marginTop: 8, fontSize: 13, lineHeight: 1.5 }}>{d}</p>
            </div>
          ))}
        </div>
      </section>

      {/* values */}
      <section style={{ padding: '88px 28px' }}>
        <div className="eyebrow">SECTION 03 / HOUSE RULES</div>
        <h2 className="h-big" style={{ marginTop: 14 }}>Four things we won&rsquo;t budge on.</h2>
        <div style={{ marginTop: 40, display: 'grid', gridTemplateColumns: 'repeat(4, 1fr)', gap: 18 }}>
          {[
            ['No upsells', 'If your car doesn\'t need it, we don\'t mention it.'],
            ['Quote first', 'You sign off before any wrench moves.'],
            ['Photos always', 'Old part, new part, dipstick reading. Texted to your phone.'],
            ['Stand behind it', 'Every job, every customer. We make it right if it isn\u2019t.'],
          ].map(([t, d]) => (
            <div key={t} style={{ padding: 24, border: '1px solid var(--ink)', background: 'var(--bone-2)' }}>
              <div style={{ width: 32, height: 32, background: 'var(--red)', marginBottom: 16 }} />
              <div className="h-mid" style={{ fontSize: 22 }}>{t}</div>
              <p className="body" style={{ fontSize: 14, marginTop: 10, marginBottom: 0 }}>{d}</p>
            </div>
          ))}
        </div>
      </section>

      <Footer />
    </div>
  );
}

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

      <section style={{ padding: '64px 28px 32px' }}>
        <div className="eyebrow">PAGE 04 / CONTACT</div>
        <h1 className="h-mega" style={{ marginTop: 18, fontSize: 'clamp(56px, 8vw, 120px)' }}>
          Easiest way<br />to reach us:<br />
          <span style={{ color: 'var(--red)' }}>just call.</span>
        </h1>
      </section>

      <section style={{ padding: '32px 28px 88px' }}>
        <div style={{ display: 'grid', gridTemplateColumns: '1.2fr .8fr', gap: 28 }}>

          {/* phone block */}
          <div style={{
            background: 'var(--ink)', color: 'var(--bone)',
            padding: '48px 40px', position: 'relative', overflow: 'hidden',
          }} className="grit">
            <div className="eyebrow" style={{ color: 'var(--red)' }}>PRIMARY LINE</div>
            <a href="tel:5615550199" style={{
              display: 'block', color: 'var(--bone)', textDecoration: 'none', marginTop: 16,
              fontFamily: 'var(--font-display)', fontSize: 'clamp(48px, 7vw, 96px)',
              fontWeight: 700, lineHeight: 1, letterSpacing: '-.005em',
            }}>(561) 555-0199</a>
            <p className="lede" style={{ color: 'var(--bone-3)', marginTop: 22, maxWidth: '40ch' }}>
              Dom or Sam will pick up between 7:30am and 6pm, Monday through Friday — and 8 to 3 on Saturdays. We don&rsquo;t do phone trees, hold music, or "for English, press 1."
            </p>

            <div style={{ display: 'grid', gridTemplateColumns: '1fr 1fr', gap: 18, marginTop: 36 }}>
              <div>
                <div className="eyebrow" style={{ color: 'var(--red)' }}>EMAIL</div>
                <div style={{ fontFamily: 'var(--font-mono)', fontSize: 14, marginTop: 8, color: 'var(--bone)' }}>hello@bocatire.example</div>
                <div className="tiny" style={{ color: 'var(--bone-3)', marginTop: 4 }}>Reply within 1 business day</div>
              </div>
              <div>
                <div className="eyebrow" style={{ color: 'var(--red)' }}>TEXT</div>
                <div style={{ fontFamily: 'var(--font-mono)', fontSize: 14, marginTop: 8, color: 'var(--bone)' }}>(561) 555-0199</div>
                <div className="tiny" style={{ color: 'var(--bone-3)', marginTop: 4 }}>Same number — Sam answers</div>
              </div>
            </div>
          </div>

          {/* visit / hours */}
          <div style={{ display: 'flex', flexDirection: 'column', gap: 18 }}>
            <div style={{ background: 'var(--bone-2)', border: '1px solid var(--ink)', padding: 28 }}>
              <div className="eyebrow">VISIT</div>
              <div className="h-mid" style={{ fontSize: 22, marginTop: 10 }}>1234 N Federal Hwy</div>
              <div className="h-mid" style={{ fontSize: 22 }}>Boca Raton, FL 33432</div>
              <div className="tiny" style={{ marginTop: 10 }}>Corner of Federal &amp; Glades · 5 min from Mizner Park · Plenty of free parking out back.</div>
              <a href="https://www.google.com/maps/dir/?api=1&destination=1259+N+Federal+Hwy,+Boca+Raton,+FL+33432" target="_blank" rel="noopener" className="btn btn-ink" style={{ marginTop: 18, padding: '12px 16px', fontSize: 13 }}>Get directions →</a>
            </div>
            <div style={{ background: 'var(--bone-2)', border: '1px solid var(--ink)', padding: 28 }}>
              <div className="eyebrow">HOURS</div>
              <table style={{ width: '100%', marginTop: 12, borderCollapse: 'collapse' }}>
                <tbody>
                  {[
                    ['Mon', '7:30a — 6:00p'],
                    ['Tue', '7:30a — 6:00p'],
                    ['Wed', '7:30a — 6:00p'],
                    ['Thu', '7:30a — 6:00p'],
                    ['Fri', '7:30a — 6:00p'],
                    ['Sat', '8:00a — 3:00p'],
                    ['Sun', 'Closed'],
                  ].map(([d, h]) => (
                    <tr key={d} style={{ borderBottom: '1px solid var(--line)' }}>
                      <td style={{ padding: '8px 0', fontFamily: 'var(--font-display)', fontSize: 14, fontWeight: 600 }}>{d}</td>
                      <td style={{ padding: '8px 0', fontFamily: 'var(--font-mono)', fontSize: 13, textAlign: 'right', color: h === 'Closed' ? 'var(--red)' : 'var(--ink-2)' }}>{h}</td>
                    </tr>
                  ))}
                </tbody>
              </table>
            </div>
          </div>
        </div>

        {/* map placeholder */}
        <div style={{ marginTop: 28 }}>
          <Img label="Map · 1234 N Federal Hwy, Boca Raton — interactive Google Maps embed goes here" h={360} />
        </div>
      </section>

      <Footer />
    </div>
  );
}

Object.assign(window, { ServicesPage, AboutPage, ContactPage });