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

// ═══════════════════════════════════════════════════════════════════════
// NEW SUB-PAGES — Appointments, Reviews, Specials, Privacy Policy
// Match V1's industrial style so the whole site reads as one piece.
// ═══════════════════════════════════════════════════════════════════════

// ── APPOINTMENTS ─────────────────────────────────────────────
function AppointmentsPage() {
  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 05 / APPOINTMENTS</div>
        <h1 className="h-mega" style={{ marginTop: 18, fontSize: 'clamp(56px, 8vw, 120px)' }}>
          Book a bay.<br />
          <span style={{ color: 'var(--red)' }}>Or just roll up.</span>
        </h1>
        <p className="lede" style={{ marginTop: 22, maxWidth: '60ch' }}>
          We hold a few bays open every day for walk-ins. Drop the car before 11a and most jobs are done by 5. If you&rsquo;d rather call ahead, that works too.
        </p>
      </section>

      <section style={{ padding: '32px 28px 88px' }}>
        <div style={{ display: 'grid', gridTemplateColumns: '1.2fr .8fr', gap: 28 }}>
          {/* CTA panel */}
          <div style={{
            background: 'var(--ink)', color: 'var(--bone)',
            padding: '48px 40px', position: 'relative', overflow: 'hidden',
          }} className="grit">
            <div className="eyebrow" style={{ color: 'var(--red)' }}>FASTEST WAY</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' }}>
              Tell us what your car&rsquo;s doing. We&rsquo;ll tell you the soonest day we can take it.
            </p>

            <div style={{ marginTop: 36, paddingTop: 22, borderTop: '1px solid rgba(255,255,255,.16)' }}>
              <div className="eyebrow" style={{ color: 'var(--red)' }}>WHAT TO TELL US</div>
              <ul style={{ margin: '14px 0 0', padding: 0, listStyle: 'none', display: 'grid', gap: 10 }}>
                {[
                  'Year, make, model',
                  'What you’re hearing, smelling, or seeing',
                  'When it started',
                  'Whether it&rsquo;s safe to drive',
                ].map(b => (
                  <li key={b} style={{ fontSize: 14, color: 'var(--bone-3)', display: 'flex', gap: 10 }}>
                    <span style={{ color: 'var(--red)', fontWeight: 700 }}>→</span>
                    <span dangerouslySetInnerHTML={{ __html: b }} />
                  </li>
                ))}
              </ul>
            </div>
          </div>

          {/* hours / how-it-works */}
          <div style={{ display: 'flex', flexDirection: 'column', gap: 18 }}>
            <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 style={{ background: 'var(--bone-2)', border: '1px solid var(--ink)', padding: 28 }}>
              <div className="eyebrow">HOW DROP-OFFS WORK</div>
              <ol style={{ margin: '14px 0 0', padding: '0 0 0 20px', display: 'grid', gap: 10 }}>
                <li className="body" style={{ fontSize: 14 }}>Pull around back. Park anywhere. Bring the keys inside.</li>
                <li className="body" style={{ fontSize: 14 }}>Sam will walk through the symptoms with you.</li>
                <li className="body" style={{ fontSize: 14 }}>We text you a quote with photos before any wrench moves.</li>
                <li className="body" style={{ fontSize: 14 }}>You approve. We work. We text when it&rsquo;s ready.</li>
              </ol>
            </div>
          </div>
        </div>
      </section>

      {/* Mitchell1 appointment form */}
      <section style={{ padding: '32px 28px 88px' }}>
        <div className="eyebrow">SCHEDULE ONLINE</div>
        <h2 className="h-big" style={{ marginTop: 12, fontSize: 'clamp(36px, 5vw, 64px)' }}>
          Or fill out the form<br />
          <span style={{ color: 'var(--red)' }}>and we&rsquo;ll get back fast.</span>
        </h2>
        <div style={{ marginTop: 28, border: '1px solid var(--ink)', background: 'var(--bone-2)' }}>
          <iframe
            src="https://www.Mitchell1Crm.com/CrmUtilities/AppointmentRequest.aspx?c=EAAAAO0fMyTv%2FKY%2BbXZilHOOUs%2FNOFU8t442aD91L9fMjWDwpqbkGhYgxPIZRdk2gTDkkA%3D%3D"
            title="Schedule an appointment with Boca Tire and Auto"
            width="1425"
            height="1100"
            frameBorder="0"
            scrolling="no"
            style={{ border: 0, width: '100%', height: 1100, display: 'block', overflow: 'hidden' }}
          ></iframe>
        </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 APP. NO PORTAL. JUST A PHONE CALL.</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>
        <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>
  );
}

// ── REVIEWS ────────────────────────────────────────────────
function ReviewsPage() {
  const reviews = [
    { name: 'Eleanor M.', src: 'Google · 5★', date: 'Jan 2026', body: 'Took my old Camry in for brakes. Sam texted me photos of the worn pads and the new ones side-by-side before they did anything. Quoted me $289. Final invoice? $289. They&rsquo;re my mechanics for life.' },
    { name: 'Marcus K.', src: 'Google · 5★', date: 'Dec 2025', body: 'Honest as the day is long. Brought in my F-150 thinking I needed new tires. They rotated, balanced, and sent me on my way for $40. Could have sold me four new tires and I&rsquo;d have never known.' },
    { name: 'Priya S.', src: 'Yelp · 5★', date: 'Nov 2025', body: 'My A/C died in August. Three other shops quoted compressor replacement ($1,400+). Boca Tire found a $40 condenser fan and had me out in two hours. Saved my summer.' },
    { name: 'Tom & Linda B.', src: 'Google · 5★', date: 'Oct 2025', body: 'We&rsquo;ve been bringing our cars here since 2003. Two Buicks, three Toyotas, one Tesla. Same handshake every time. Lenny is part of the family at this point.' },
    { name: 'Jaime R.', src: 'Google · 5★', date: 'Sep 2025', body: 'First time. New to Boca. They didn&rsquo;t upsell, didn&rsquo;t talk down to me, and the bill was lower than the estimate. Where else does that happen?' },
    { name: 'Devon W.', src: 'Yelp · 5★', date: 'Aug 2025', body: 'Came in for an oil change. They noticed a slow coolant leak and showed me the pictures on Sam&rsquo;s phone. Got it fixed before it became a $2k radiator. That&rsquo;s rare.' },
  ];

  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 06 / REVIEWS</div>
        <h1 className="h-mega" style={{ marginTop: 18, fontSize: 'clamp(56px, 8vw, 120px)' }}>
          What folks<br />
          <span style={{ color: 'var(--red)' }}>say.</span>
        </h1>
        <p className="lede" style={{ marginTop: 22, maxWidth: '60ch' }}>
          600+ reviews on Google. 4.9 stars. We don&rsquo;t pay for them, we don&rsquo;t scrub the bad ones, and we still print the originals on the wall by the coffee.
        </p>
      </section>

      {/* aggregate stats */}
      <section style={{ padding: '24px 28px 48px' }}>
        <div style={{ display: 'grid', gridTemplateColumns: 'repeat(4, 1fr)', gap: 0, border: '1px solid var(--ink)' }}>
          {[
            ['4.9', '/ 5 average'],
            ['600+', 'reviews'],
            ['98%', '5-star'],
            ['Since', '1987'],
          ].map(([n, l], i) => (
            <div key={l} style={{
              padding: '32px 24px',
              borderRight: i < 3 ? '1px solid var(--ink)' : 'none',
              background: i % 2 === 0 ? 'var(--bone-2)' : 'var(--bone)',
            }}>
              <div style={{ fontFamily: 'var(--font-display)', fontSize: 56, fontWeight: 700, color: 'var(--red)', lineHeight: .9 }}>{n}</div>
              <div className="tiny" style={{ marginTop: 10, fontSize: 12 }}>{l}</div>
            </div>
          ))}
        </div>
      </section>

      {/* reviews grid */}
      <section style={{ padding: '32px 28px 88px' }}>
        <div style={{ display: 'grid', gridTemplateColumns: 'repeat(2, 1fr)', gap: 18 }}>
          {reviews.map((r, i) => (
            <div key={i} style={{
              border: '1px solid var(--ink)',
              background: i % 3 === 1 ? 'var(--bone-2)' : 'var(--bone)',
              padding: '28px 28px',
            }}>
              <Stars n={5} />
              <p className="body" style={{ fontSize: 16, marginTop: 14, lineHeight: 1.6 }} dangerouslySetInnerHTML={{ __html: '“' + r.body + '”' }} />
              <div style={{ marginTop: 18, paddingTop: 14, borderTop: '1px solid var(--line)', display: 'flex', justifyContent: 'space-between', alignItems: 'baseline' }}>
                <div className="h-mid" style={{ fontSize: 16 }}>{r.name}</div>
                <div className="tiny" style={{ fontFamily: 'var(--font-mono)', fontSize: 11, letterSpacing: '.14em', color: 'var(--steel)' }}>{r.src} · {r.date}</div>
              </div>
            </div>
          ))}
        </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)' }}>BE THE NEXT ONE</div>
        <h2 className="h-mega" style={{ color: 'var(--bone)', marginTop: 18, fontSize: 'clamp(56px, 8vw, 120px)' }}>
          Try us once.<br />
          <span style={{ color: 'var(--red)' }}>You&rsquo;ll get it.</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>
  );
}

// ── SPECIALS ────────────────────────────────────────────────
function SpecialsPage() {
  const offers = [
    { tag: '01', t: 'Synthetic oil change', price: '$59', was: '$89', note: 'Up to 5 quarts full synthetic + filter. Multi-point inspection always free.', code: 'SYN-59' },
    { tag: '02', t: 'Brake pads + rotors', price: '$289', was: '$369', note: 'Per axle. Ceramic pads, OEM-grade rotors. Includes brake fluid top-off.', code: 'BRAKE-289' },
    { tag: '03', t: 'A/C performance check', price: 'Free', was: '$79', note: 'We pull the gauges, check pressure, sniff for leaks. Free with any service this summer.', code: 'AC-FREE' },
    { tag: '04', t: '4-tire rotation', price: '$25', was: '$45', note: 'TPMS reset and torque to spec. Free for life on tires bought from us.', code: 'ROT-25' },
    { tag: '05', t: '4-wheel alignment', price: '$89', was: '$129', note: 'Laser-guided. Printout of before/after. Pothole re-do free in 6 months.', code: 'ALIGN-89' },
    { tag: '06', t: 'Battery test + install', price: '$129', was: '$159', note: 'Interstate or DieHard. 3-year free replacement promise. Old battery recycled.', code: 'BAT-129' },
  ];

  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 07 / SPECIALS</div>
        <h1 className="h-mega" style={{ marginTop: 18, fontSize: 'clamp(56px, 8vw, 120px)' }}>
          Real prices,<br />
          <span style={{ color: 'var(--red)' }}>not gimmicks.</span>
        </h1>
        <p className="lede" style={{ marginTop: 22, maxWidth: '60ch' }}>
          We hate fake-discount tactics as much as you do. These are the actual numbers we charge most weeks. Mention the code or screenshot the page — same result.
        </p>
      </section>

      {/* offers grid */}
      <section style={{ padding: '40px 28px 88px' }}>
        <div style={{ display: 'grid', gridTemplateColumns: 'repeat(2, 1fr)', gap: 18 }}>
          {offers.map(o => (
            <div key={o.tag} 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',
              }}>{o.tag}</div>
              <div>
                <div style={{ display: 'flex', justifyContent: 'space-between', alignItems: 'baseline', gap: 12 }}>
                  <h3 className="h-mid" style={{ fontSize: 26 }}>{o.t}</h3>
                  <div style={{ textAlign: 'right' }}>
                    <span style={{ fontFamily: 'var(--font-display)', fontWeight: 700, color: 'var(--red)', fontSize: 24 }}>{o.price}</span>
                    <span style={{ fontFamily: 'var(--font-mono)', fontSize: 12, color: 'var(--steel)', marginLeft: 8, textDecoration: 'line-through' }}>{o.was}</span>
                  </div>
                </div>
                <p className="body" style={{ fontSize: 14, marginTop: 10 }}>{o.note}</p>
                <div style={{ marginTop: 16, paddingTop: 12, borderTop: '1px solid var(--line)', display: 'flex', justifyContent: 'space-between', alignItems: 'center' }}>
                  <span className="tiny" style={{ fontFamily: 'var(--font-mono)', fontSize: 11, letterSpacing: '.14em', color: 'var(--steel)' }}>CODE · {o.code}</span>
                  <a href="tel:5615550199" style={{ fontFamily: 'var(--font-mono)', fontSize: 11, letterSpacing: '.14em', color: 'var(--red)', textDecoration: 'none', textTransform: 'uppercase' }}>Claim →</a>
                </div>
              </div>
            </div>
          ))}
        </div>

        <p className="tiny" style={{ marginTop: 32, color: 'var(--steel)', maxWidth: '70ch' }}>
          Fine print, because lawyers: prices reflect most cars and trucks. Heavy-duty trucks, hybrids, EVs, and exotics may run higher. We&rsquo;ll always quote you the real number before any work.
        </p>
      </section>

      <Footer />
    </div>
  );
}

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

      <section style={{ padding: '64px 28px 32px', borderBottom: '1px solid var(--line)' }}>
        <div className="eyebrow">PAGE 99 / PRIVACY</div>
        <h1 className="h-mega" style={{ marginTop: 18, fontSize: 'clamp(48px, 6vw, 88px)' }}>
          Privacy<br />
          <span style={{ color: 'var(--red)' }}>policy.</span>
        </h1>
        <p className="lede" style={{ marginTop: 22, maxWidth: '60ch' }}>
          Short version: we don&rsquo;t sell your data, we don&rsquo;t spam, and we only collect what we need to do the work and call you when it&rsquo;s done.
        </p>
      </section>

      <section style={{ padding: '48px 28px 88px', maxWidth: 800 }}>
        <div className="body" style={{ fontSize: 16 }}>
          <h2 className="h-mid" style={{ fontSize: 24, marginTop: 24 }}>What we collect</h2>
          <p>When you call, drop off a vehicle, or submit a form, we collect your name, phone number, email, vehicle info (year/make/model/VIN), and a description of the work. We may also collect photos of your vehicle for the record of work done.</p>

          <h2 className="h-mid" style={{ fontSize: 24, marginTop: 24 }}>How we use it</h2>
          <p>To quote you, do the work, and contact you about your vehicle. We text you photos of inspection findings and quotes before any wrench moves. We may text or email you reminders for upcoming maintenance.</p>

          <h2 className="h-mid" style={{ fontSize: 24, marginTop: 24 }}>What we don&rsquo;t do</h2>
          <ul style={{ paddingLeft: 20 }}>
            <li>We do not sell your personal information.</li>
            <li>We do not share your info with marketing partners.</li>
            <li>We do not send promotional spam. If you get a text from us, it&rsquo;s about your car.</li>
          </ul>

          <h2 className="h-mid" style={{ fontSize: 24, marginTop: 24 }}>Cookies &amp; analytics</h2>
          <p>Our website uses standard analytics (Google Analytics) to understand which pages get visited. This is anonymous traffic data — not tied to your identity. You can disable cookies in your browser without breaking the site.</p>

          <h2 className="h-mid" style={{ fontSize: 24, marginTop: 24 }}>Your rights</h2>
          <p>If you&rsquo;d like us to delete your information from our systems, just call (561) 555-0199 or email hello@bocatire.example. We&rsquo;ll do it within 30 days. (Some records we&rsquo;re legally required to keep — like invoices for warranty purposes — but we&rsquo;ll tell you which ones and why.)</p>

          <h2 className="h-mid" style={{ fontSize: 24, marginTop: 24 }}>Questions</h2>
          <p>Call us. Same number, same Sam.</p>

          <p className="tiny" style={{ marginTop: 32, color: 'var(--steel)' }}>Last updated: April 2026</p>
        </div>
      </section>

      <Footer />
    </div>
  );
}

Object.assign(window, { AppointmentsPage, ReviewsPage, SpecialsPage, PrivacyPolicyPage });
