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

// ═══════════════════════════════════════════════════════════════════════
// HOMEPAGE V1 — General auto repair, calmer composition, real photos.
// ═══════════════════════════════════════════════════════════════════════

// Free Unsplash stock photos (no attribution required, but credit listed
// inline so the user can swap with branded shots later).
const PHOTO = {
  hero:    'https://images.unsplash.com/photo-1486006920555-c77dcf18193c?auto=format&fit=crop&w=1400&q=80', // mechanic under hood
  garage:  'https://images.unsplash.com/photo-1530046339160-ce3e530c7d2f?auto=format&fit=crop&w=1400&q=80', // garage interior
  process: 'https://images.unsplash.com/photo-1599256872237-5dcc0fbe9668?auto=format&fit=crop&w=1400&q=80', // tools / process
};

function Photo({ src, alt, h, style }) {
  return (
    <div style={{
      position: 'relative', width: '100%', height: h || 420,
      background: '#1f1f1f', overflow: 'hidden', ...style,
    }}>
      <img src={src} alt={alt}
        style={{ width: '100%', height: '100%', objectFit: 'cover', display: 'block' }}
        onError={(e) => {
          // graceful fallback to a labeled placeholder
          e.currentTarget.style.display = 'none';
          e.currentTarget.parentNode.style.background = '#1f1f1f';
        }} />
    </div>
  );
}

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

      {/* HERO — calmer, photo-led */}
      <section style={{
        background: 'var(--ink)', color: 'var(--bone)',
        padding: '80px 44px 80px',
      }}>
        <div style={{ display: 'grid', gridTemplateColumns: '1fr 1fr', gap: 56, alignItems: 'center' }}>
          <div>
            <div className="eyebrow" style={{ color: 'var(--red)' }}>EST. 1987 · BOCA RATON</div>
            <h1 className="h-mega" style={{ color: 'var(--bone)', marginTop: 22, fontSize: 'clamp(52px, 7vw, 104px)' }}>
              Auto repair<br />
              done right.<br />
              <span style={{ color: 'var(--red)' }}>No surprises.</span>
            </h1>
            <p className="lede" style={{ color: 'var(--bone-3)', marginTop: 26, maxWidth: '50ch' }}>
              A family-run shop on Federal Highway for 39 years. ASE-certified mechanics and fair quotes on every job we do.
            </p>
            <div style={{ display: 'flex', gap: 14, marginTop: 32, flexWrap: 'wrap' }}>
              <a href="tel:5615550199" className="btn btn-red">☎ (561) 555-0199</a>
              <a href="/services/" className="btn btn-ghost" style={{ color: 'var(--bone)', borderColor: 'var(--bone)' }}>
                Our services →
              </a>
            </div>
          </div>

          {/* hero photo */}
          <div style={{ position: 'relative' }}>
            <Photo src={PHOTO.hero} alt="Mechanic working on a car engine" h={520} />
          </div>
        </div>

        {/* Stat strip — magazine spread w/ mixed type & a stars row */}
        <div style={{
          marginTop: 64, paddingTop: 36,
          borderTop: '1px solid rgba(255,255,255,.14)',
          display: 'grid',
          gridTemplateColumns: '1.1fr .9fr 1.1fr',
          alignItems: 'stretch',
          gap: 0,
        }}>
          {/* 39 years */}
          <div style={{
            paddingRight: 36,
            borderRight: '1px solid rgba(255,255,255,.14)',
            display: 'flex', flexDirection: 'column', justifyContent: 'space-between',
            minHeight: 140,
          }}>
            <div style={{ display: 'flex', alignItems: 'baseline', gap: 12, color: 'var(--bone)' }}>
              <span style={{
                fontFamily: 'var(--font-display)', fontWeight: 700, lineHeight: .9,
                fontSize: 'clamp(64px, 7.5vw, 112px)', letterSpacing: '-0.02em',
              }}>39</span>
              <span style={{
                fontFamily: 'var(--font-mono)', fontSize: 11, letterSpacing: '.18em',
                textTransform: 'uppercase', color: 'var(--bone-3)', whiteSpace: 'nowrap',
              }}>YEARS</span>
            </div>
            <div style={{
              fontFamily: 'var(--font-display)', fontSize: 18, letterSpacing: '.04em',
              textTransform: 'uppercase', fontWeight: 600, color: 'var(--bone)',
            }}>
              On Federal Highway since <span style={{ color: 'var(--red)' }}>1987</span>.
            </div>
          </div>

          {/* 4.9 stars */}
          <div style={{
            padding: '0 36px',
            borderRight: '1px solid rgba(255,255,255,.14)',
            display: 'flex', flexDirection: 'column', justifyContent: 'space-between',
            minHeight: 140,
          }}>
            <div>
              <div style={{ display: 'flex', alignItems: 'baseline', gap: 8, color: 'var(--bone)' }}>
                <span style={{
                  fontFamily: 'var(--font-display)', fontWeight: 700, lineHeight: .9,
                  fontSize: 'clamp(56px, 6.5vw, 96px)',
                }}>4.9</span>
                <span style={{
                  fontFamily: 'var(--font-display)', fontWeight: 700,
                  fontSize: 'clamp(28px, 3vw, 40px)', color: 'var(--bone-3)', lineHeight: 1,
                }}>/5</span>
              </div>
              {/* star row using SVG so we can tint precisely */}
              <div style={{ display: 'flex', gap: 4, marginTop: 8 }}>
                {[0,1,2,3,4].map(i => (
                  <svg key={i} width="20" height="20" viewBox="0 0 24 24"
                    fill={i < 4 ? 'var(--red)' : 'url(#half-star)'}
                    style={{ display: 'block' }}>
                    <defs>
                      <linearGradient id="half-star" x1="0" x2="1" y1="0" y2="0">
                        <stop offset="90%" stopColor="var(--red)" />
                        <stop offset="90%" stopColor="rgba(255,255,255,.18)" />
                      </linearGradient>
                    </defs>
                    <polygon points="12,2 15,9 22,9.5 17,14.5 18.5,22 12,18 5.5,22 7,14.5 2,9.5 9,9" />
                  </svg>
                ))}
              </div>
            </div>
            <div style={{
              fontFamily: 'var(--font-mono)', fontSize: 11, letterSpacing: '.16em',
              textTransform: 'uppercase', color: 'var(--bone-3)',
            }}>
              <span style={{ color: 'var(--bone)', fontWeight: 600 }}>600+ reviews</span> · Google · Yelp · BBB
            </div>
          </div>

          {/* ASE — badge-style medallion + supporting copy */}
          <div style={{
            paddingLeft: 36,
            display: 'flex', alignItems: 'center', gap: 22,
            minHeight: 140,
          }}>
            {/* badge */}
            <div style={{
              flexShrink: 0,
              width: 116, height: 116, borderRadius: '50%',
              background: 'var(--red)',
              border: '4px solid var(--bone)',
              display: 'flex', flexDirection: 'column',
              alignItems: 'center', justifyContent: 'center',
              fontFamily: 'var(--font-display)', color: '#fff',
              boxShadow: '0 12px 24px -10px rgba(0,0,0,.5)',
              transform: 'rotate(-6deg)',
              textAlign: 'center', lineHeight: 1,
            }}>
              <div style={{ fontSize: 11, letterSpacing: '.22em', opacity: .9 }}>CERTIFIED</div>
              <div style={{ fontSize: 38, fontWeight: 700, margin: '4px 0' }}>ASE</div>
              <div style={{ fontSize: 9, letterSpacing: '.18em', opacity: .85, fontFamily: 'var(--font-mono)' }}>MASTER · L1</div>
            </div>
            <div>
              <div style={{
                fontFamily: 'var(--font-display)', fontWeight: 700, lineHeight: 1,
                fontSize: 'clamp(28px, 3vw, 40px)', color: 'var(--bone)',
              }}>
                Master-certified<br />technicians.
              </div>
              <div className="tiny" style={{ color: 'var(--bone-3)', marginTop: 8 }}>
                Plus NAPA AutoCare member · BBB A+ · AAA Approved
              </div>
            </div>
          </div>
        </div>
      </section>

      <TrustStrip />

      {/* HOW WE WORK — kept, but simpler frame */}
      <section style={{
        padding: '96px 44px',
        background: 'var(--bone)',
        position: 'relative',
        overflow: 'hidden',
      }}>
        {/* Faint background image — 15% visible */}
        <div aria-hidden="true" style={{
          position: 'absolute', inset: 0,
          backgroundImage: `url(${PHOTO.process})`,
          backgroundSize: 'cover',
          backgroundPosition: 'center',
          opacity: 0.15,
          pointerEvents: 'none',
        }} />

        <div style={{ position: 'relative' }}>
          {/* Header */}
          <div style={{ maxWidth: 720, marginBottom: 64 }}>
            <div className="eyebrow">HOW WE WORK</div>
            <h2 className="h-big" style={{ marginTop: 14 }}>
              Three steps. <span style={{ color: 'var(--red)' }}>Zero surprises.</span>
            </h2>
          </div>

          {/* The track */}
          <div style={{ position: 'relative' }}>
            {/* dashed connector behind the cards */}
            <div aria-hidden="true" style={{
              position: 'absolute',
              top: 64,
              left: '8%',
              right: '8%',
              height: 0,
              borderTop: '2px dashed var(--ink)',
              opacity: .35,
              zIndex: 0,
            }} />

            <div style={{
              position: 'relative',
              display: 'grid',
              gridTemplateColumns: 'repeat(3, 1fr)',
              gap: 28,
              zIndex: 1,
            }}>
              {[
                {
                  n: '01',
                  t: 'Drop off',
                  tag: '~ 5 MIN',
                  who: 'You + Dom at the counter',
                  d: 'Park out front, walk in, tell us what your car&rsquo;s doing. We grab keys and write it up.',
                  bullets: ['No appointment needed', 'Loaner car if we keep it'],
                  icon: (
                    /* keys icon */
                    <svg viewBox="0 0 32 32" width="28" height="28" fill="none" stroke="currentColor" strokeWidth="2.2" strokeLinecap="round" strokeLinejoin="round">
                      <circle cx="9" cy="9" r="5" />
                      <path d="M13 13l13 13M22 22l3-3M26 26l3-3" />
                    </svg>
                  ),
                },
                {
                  n: '02',
                  t: 'Inspect &amp; quote',
                  tag: '~ 30 MIN',
                  who: 'Sam &amp; the techs · in the bay',
                  d: 'Free top-to-tail inspection. We text you photos of anything we find &mdash; with a written quote.',
                  bullets: ['Photos sent to your phone', 'Approve line-by-line'],
                  icon: (
                    /* magnifier with check */
                    <svg viewBox="0 0 32 32" width="28" height="28" fill="none" stroke="currentColor" strokeWidth="2.2" strokeLinecap="round" strokeLinejoin="round">
                      <circle cx="13" cy="13" r="8" />
                      <path d="M19 19l8 8" />
                      <path d="M9.5 13.5l2.5 2.5L17 11" />
                    </svg>
                  ),
                },
                {
                  n: '03',
                  t: 'Drive home',
                  tag: 'SAME DAY',
                  who: 'Most jobs out by 5pm',
                  d: 'We do the work, test-drive it, and call you for pickup. Round-down on the invoice &mdash; never up.',
                  bullets: ['Free post-service check at 1k mi', 'Pay in shop or by text link'],
                  icon: (
                    /* car icon */
                    <svg viewBox="0 0 32 32" width="28" height="28" fill="none" stroke="currentColor" strokeWidth="2.2" strokeLinecap="round" strokeLinejoin="round">
                      <path d="M5 20l2-7a3 3 0 013-2h12a3 3 0 013 2l2 7" />
                      <rect x="3" y="20" width="26" height="6" rx="1.5" />
                      <circle cx="9" cy="26" r="2" fill="currentColor" />
                      <circle cx="23" cy="26" r="2" fill="currentColor" />
                    </svg>
                  ),
                },
              ].map((s, i) => (
                <div key={s.n} style={{
                  background: 'var(--bone)',
                  border: '2px solid var(--ink)',
                  padding: '32px 28px 28px',
                  position: 'relative',
                  boxShadow: i === 1 ? '8px 8px 0 0 var(--red)' : '6px 6px 0 0 var(--ink)',
                }}>
                  {/* Number badge — overlaps the dashed track line */}
                  <div style={{
                    position: 'absolute',
                    top: -28, left: 24,
                    width: 56, height: 56,
                    background: 'var(--red)', color: '#fff',
                    border: '3px solid var(--bone)',
                    display: 'flex', alignItems: 'center', justifyContent: 'center',
                    fontFamily: 'var(--font-display)', fontWeight: 700,
                    fontSize: 22, letterSpacing: '.02em',
                    boxShadow: '0 4px 12px -2px rgba(0,0,0,.25)',
                  }}>{s.n}</div>

                  {/* Tag chip */}
                  <div style={{
                    position: 'absolute',
                    top: -14, right: 18,
                    background: 'var(--ink)', color: 'var(--bone)',
                    fontFamily: 'var(--font-mono)', fontSize: 10,
                    letterSpacing: '.18em', fontWeight: 600,
                    padding: '6px 10px',
                    border: '2px solid var(--bone)',
                  }}>{s.tag}</div>

                  {/* Icon row */}
                  <div style={{
                    color: 'var(--red)',
                    marginTop: 16, marginBottom: 18,
                    display: 'flex', alignItems: 'center',
                  }}>
                    {s.icon}
                  </div>

                  <div className="h-mid" style={{ fontSize: 28, lineHeight: 1.05 }}
                    dangerouslySetInnerHTML={{ __html: s.t }} />

                  <div style={{
                    fontFamily: 'var(--font-mono)', fontSize: 11,
                    letterSpacing: '.14em', textTransform: 'uppercase',
                    color: 'var(--ink-2)', marginTop: 8,
                  }} dangerouslySetInnerHTML={{ __html: s.who }} />

                  <p className="body" style={{
                    marginTop: 16, fontSize: 15,
                    paddingTop: 16, borderTop: '1px solid var(--line)',
                  }} dangerouslySetInnerHTML={{ __html: s.d }} />

                  {/* Bullets */}
                  <ul style={{
                    margin: '16px 0 0', padding: 0, listStyle: 'none',
                    display: 'flex', flexDirection: 'column', gap: 6,
                  }}>
                    {s.bullets.map(b => (
                      <li key={b} style={{
                        fontSize: 13, color: 'var(--ink-2)',
                        display: 'flex', alignItems: 'flex-start', gap: 8,
                      }}>
                        <span style={{
                          color: 'var(--red)', fontWeight: 700,
                          fontFamily: 'var(--font-display)', flexShrink: 0,
                        }}>✓</span>
                        {b}
                      </li>
                    ))}
                  </ul>
                </div>
              ))}
            </div>
          </div>

        </div>
      </section>

      {/* WHAT WE FIX — full service grid (kept, simplified hover) */}
      <section id="what-we-fix" style={{ padding: '96px 44px', background: 'var(--bone-2)' }}>
        <div style={{ display: 'flex', justifyContent: 'space-between', alignItems: 'end', marginBottom: 48, gap: 24, flexWrap: 'wrap' }}>
          <div>
            <div className="eyebrow">WHAT WE FIX</div>
            <h2 className="h-big" style={{ marginTop: 14 }}>
              Full-service auto repair,<br />
              <span style={{ color: 'var(--red)' }}>under one roof.</span>
            </h2>
          </div>
          <p className="lede" style={{ maxWidth: '38ch', marginBottom: 0 }}>
            From a quick oil change to a full engine diagnostic — and just about everything in between.
          </p>
        </div>

        <div style={{
          display: 'grid', gridTemplateColumns: 'repeat(4, 1fr)',
          gap: 1, background: 'var(--ink)',
          border: '1px solid var(--ink)',
        }}>
          {[
            { t: 'Brakes', href: '/services/brakes/', s: 'Pads, rotors, calipers, fluid', p: 'From $289',
              b: ['Ceramic or OEM-grade pads', 'Same-day if dropped before 11a'] },
            { t: 'Tires', href: '/services/tires/', s: '4 major brands, balanced', p: 'Mounted $35/wheel',
              b: ['Michelin, Goodyear, BFG, Pirelli', 'Free rotation for life of tire'] },
            { t: 'Oil change', href: '/services/oil-change/', s: 'Conventional → full synth', p: '$49–$109',
              b: ['25-point inspection included', 'In and out in 30 minutes'] },
            { t: 'Alignment', href: '/services/', s: '4-wheel laser-guided', p: '$99 flat',
              b: ['Hunter Hawkeye Elite rig', 'Free check after pothole hits'] },
            { t: 'A/C repair', href: '/services/ac-repair/', s: 'Florida heat, fixed fast', p: 'Diag $79',
              b: ['R-1234yf & R-134a refills', 'Leak detection with UV dye'] },
            { t: 'Diagnostics', href: '/services/', s: 'Check engine decoded', p: 'Free scan',
              b: ['Snap-on Modis Edge scanner', 'Plain-English explanation, not codes'] },
            { t: 'Batteries', href: '/services/', s: 'Tested free, installed in 20 min', p: 'From $129',
              b: ['Interstate & DieHard in stock', '3-year free replacement promise'] },
            { t: 'Belts & hoses', href: '/services/', s: 'Before they snap', p: 'Quoted',
              b: ['Serpentine, timing, A/C belts', 'Visual check at every oil change'] },
          ].map((s) => (
            <a key={s.t} href={s.href} style={{
              padding: '32px 26px',
              background: 'var(--bone)',
              color: 'var(--ink)',
              textDecoration: 'none',
              display: 'flex', flexDirection: 'column', gap: 10,
              transition: 'background .15s, color .15s',
              minHeight: 280,
            }}
            onMouseEnter={e => {
              e.currentTarget.style.background = 'var(--red)';
              e.currentTarget.style.color = '#fff';
              e.currentTarget.querySelectorAll('[data-bullet-tick]').forEach(el => { el.style.color = '#fff'; });
            }}
            onMouseLeave={e => {
              e.currentTarget.style.background = 'var(--bone)';
              e.currentTarget.style.color = 'var(--ink)';
              e.currentTarget.querySelectorAll('[data-bullet-tick]').forEach(el => { el.style.color = 'var(--red)'; });
            }}>
              <div className="h-mid" style={{ fontSize: 26 }}>{s.t}</div>
              <div style={{ fontSize: 13, opacity: .7, lineHeight: 1.4 }}>{s.s}</div>

              <ul style={{
                margin: '6px 0 0', padding: 0, listStyle: 'none',
                display: 'flex', flexDirection: 'column', gap: 6,
              }}>
                {s.b.map(item => (
                  <li key={item} style={{
                    fontSize: 12.5, lineHeight: 1.4, opacity: .9,
                    display: 'flex', alignItems: 'flex-start', gap: 8,
                  }}>
                    <span data-bullet-tick style={{
                      color: 'var(--red)', fontWeight: 700,
                      fontFamily: 'var(--font-display)', flexShrink: 0,
                    }}>✓</span>
                    {item}
                  </li>
                ))}
              </ul>

              <div style={{
                marginTop: 'auto', paddingTop: 22,
                display: 'flex', justifyContent: 'space-between', alignItems: 'center',
              }}>
                <span style={{ fontFamily: 'var(--font-display)', fontWeight: 700, fontSize: 16 }}>{s.p}</span>
                <span style={{ fontFamily: 'var(--font-mono)', fontSize: 11, letterSpacing: '.14em' }}>VIEW →</span>
              </div>
            </a>
          ))}
        </div>
      </section>

      {/* SHOP IMAGE BAND */}
      <section style={{ padding: '0', background: 'var(--bone)' }}>
        <Photo src={PHOTO.garage} alt="Inside the garage" h={420} />
      </section>

      {/* REVIEWS — pared down to 3 quotes, lighter chrome */}
      <section style={{ background: 'var(--bone)', padding: '96px 44px' }}>
        <div style={{ display: 'flex', justifyContent: 'space-between', alignItems: 'end', marginBottom: 48, gap: 32, flexWrap: 'wrap' }}>
          <div>
            <div className="eyebrow">WHAT FOLKS SAY</div>
            <h2 className="h-big" style={{ marginTop: 14 }}>
              600+ neighbors,<br />
              <span style={{ color: 'var(--red)' }}>4.9 stars.</span>
            </h2>
          </div>
        </div>

        <div style={{ display: 'grid', gridTemplateColumns: 'repeat(3, 1fr)', gap: 24 }}>
          {[
            { name: 'Maria L.', src: 'Google',
              q: 'Quoted $480, charged $462 because the hardware was still good. Who does that anymore?' },
            { name: 'Frank D.', src: 'Yelp',
              q: 'Been bringing cars here since the 90s. Dom remembers my kids\' names. Good people.' },
            { name: 'Priya R.', src: 'Google',
              q: 'Called 4 shops — Boca Tire was the only one that didn\'t try to sell me parts I didn\'t need.' },
          ].map(r => (
            <div key={r.name} style={{
              background: 'var(--bone-2)',
              padding: '32px 28px',
              display: 'flex', flexDirection: 'column', gap: 18,
            }}>
              <Stars />
              <p className="body" style={{ fontSize: 17, lineHeight: 1.5, margin: 0, color: 'var(--ink)' }}>
                "{r.q}"
              </p>
              <div style={{ marginTop: 'auto', display: 'flex', justifyContent: 'space-between', alignItems: 'baseline', paddingTop: 18, borderTop: '1px solid var(--line)' }}>
                <div style={{ fontFamily: 'var(--font-display)', fontSize: 16, fontWeight: 600 }}>{r.name}</div>
                <div className="tiny" style={{ color: 'var(--steel)' }}>{r.src}</div>
              </div>
            </div>
          ))}
        </div>
      </section>

      {/* FINAL CTA — garage-door composition, layered & dimensional */}
      <section style={{
        position: 'relative',
        background: 'var(--ink)',
        color: 'var(--bone)',
        overflow: 'hidden',
      }}>
        {/* hazard tape — top */}
        <div className="diag-stripes" style={{ height: 14, width: '100%' }} />

        <div style={{
          position: 'relative',
          padding: '88px 44px 96px',
          display: 'grid',
          gridTemplateColumns: '1.4fr .9fr',
          gap: 56,
          alignItems: 'center',
        }}>
          {/* Faint workshop image background */}
          <div aria-hidden="true" style={{
            position: 'absolute', inset: 0,
            backgroundImage: `url(${PHOTO.garage})`,
            backgroundSize: 'cover',
            backgroundPosition: 'center',
            opacity: 0.18,
            filter: 'grayscale(.4) contrast(1.1)',
            pointerEvents: 'none',
          }} />
          {/* dark vignette overlay */}
          <div aria-hidden="true" style={{
            position: 'absolute', inset: 0,
            background: 'linear-gradient(90deg, rgba(20,20,22,.92) 0%, rgba(20,20,22,.65) 60%, rgba(20,20,22,.85) 100%)',
            pointerEvents: 'none',
          }} />

          {/* LEFT — the call */}
          <div style={{ position: 'relative' }}>
            <div className="eyebrow" style={{ color: 'var(--red)' }}>
              NO APPOINTMENTS · WALK-INS WELCOME
            </div>

            <h2 className="h-mega" style={{
              color: 'var(--bone)',
              marginTop: 18,
              fontSize: 'clamp(56px, 9vw, 132px)',
              lineHeight: .9,
              letterSpacing: '-0.02em',
            }}>
              Pick up the<br />
              <span style={{ color: 'var(--red)' }}>phone.</span>
            </h2>

            {/* The phone number — oversized button */}
            <a href="tel:5615550199" style={{
              display: 'inline-flex',
              alignItems: 'center',
              gap: 18,
              marginTop: 36,
              padding: '20px 28px 20px 24px',
              background: 'var(--red)',
              color: '#fff',
              textDecoration: 'none',
              fontFamily: 'var(--font-display)',
              fontWeight: 700,
              fontSize: 'clamp(32px, 4.6vw, 56px)',
              letterSpacing: '-0.01em',
              border: '3px solid var(--bone)',
              boxShadow: '8px 8px 0 0 var(--bone)',
              lineHeight: 1,
              transition: 'transform .12s, box-shadow .12s',
            }}
            onMouseEnter={(e) => {
              e.currentTarget.style.transform = 'translate(-2px, -2px)';
              e.currentTarget.style.boxShadow = '10px 10px 0 0 var(--bone)';
            }}
            onMouseLeave={(e) => {
              e.currentTarget.style.transform = 'none';
              e.currentTarget.style.boxShadow = '8px 8px 0 0 var(--bone)';
            }}>
              <span style={{
                width: 42, height: 42, borderRadius: '50%',
                background: '#fff', color: 'var(--red)',
                display: 'inline-flex', alignItems: 'center', justifyContent: 'center',
                fontSize: 20, flexShrink: 0,
              }}>☎</span>
              (561) 555-0199
            </a>

            {/* Tertiary actions */}
            <div style={{
              display: 'flex', gap: 28, alignItems: 'center',
              marginTop: 28, flexWrap: 'wrap',
              fontFamily: 'var(--font-mono)', fontSize: 12,
              letterSpacing: '.14em', textTransform: 'uppercase',
              color: 'var(--bone-3)',
            }}>
              <a href="sms:5615550199" style={{ color: 'var(--bone)', textDecoration: 'none', borderBottom: '1px solid var(--bone-3)', paddingBottom: 2 }}>
                Text us instead →
              </a>
              <span>OR</span>
              <a href="/contact/" style={{ color: 'var(--bone)', textDecoration: 'none', borderBottom: '1px solid var(--bone-3)', paddingBottom: 2 }}>
                Get directions →
              </a>
            </div>
          </div>

          {/* RIGHT — info card stack */}
          <div style={{ position: 'relative', display: 'flex', flexDirection: 'column', gap: 14 }}>

            {/* Hours card */}
            <div style={{
              background: 'var(--bone)',
              color: 'var(--ink)',
              padding: '22px 26px',
              border: '3px solid var(--ink)',
              boxShadow: '6px 6px 0 0 var(--red)',
            }}>
              <div className="eyebrow">SHOP HOURS</div>
              <table style={{ width: '100%', marginTop: 10, borderCollapse: 'collapse' }}>
                <tbody>
                  {[
                    ['Mon–Fri', '7:30a — 6:00p'],
                    ['Saturday', '8:00a — 3:00p'],
                    ['Sunday', 'Closed'],
                  ].map(([d, h]) => (
                    <tr key={d}>
                      <td style={{
                        padding: '6px 0', fontFamily: 'var(--font-display)',
                        fontSize: 15, fontWeight: 600,
                      }}>{d}</td>
                      <td style={{
                        padding: '6px 0', fontFamily: 'var(--font-mono)',
                        fontSize: 13, textAlign: 'right',
                        color: h === 'Closed' ? 'var(--red)' : 'var(--ink-2)',
                      }}>{h}</td>
                    </tr>
                  ))}
                </tbody>
              </table>
            </div>

            {/* Address card */}
            <div style={{
              background: 'var(--ink)',
              color: 'var(--bone)',
              padding: '22px 26px',
              border: '3px solid var(--bone)',
            }}>
              <div className="eyebrow" style={{ color: 'var(--red)' }}>FIND US</div>
              <div className="h-mid" style={{ fontSize: 22, color: 'var(--bone)', marginTop: 10 }}>
                1234 N Federal Hwy
              </div>
              <div className="h-mid" style={{ fontSize: 22, color: 'var(--bone)' }}>
                Boca Raton, FL 33432
              </div>
              <div className="tiny" style={{ color: 'var(--bone-3)', marginTop: 10 }}>
                Corner of Federal &amp; Glades · Free parking out back
              </div>
            </div>

            {/* "Ask for" stamp */}
            <div style={{
              alignSelf: 'flex-end',
              transform: 'rotate(-4deg)',
              background: 'var(--red)', color: '#fff',
              padding: '10px 16px',
              border: '2px solid var(--bone)',
              fontFamily: 'var(--font-mono)',
              fontSize: 11, letterSpacing: '.18em',
              textTransform: 'uppercase', fontWeight: 700,
              marginTop: -4,
            }}>
              ★ Ask for Dom or Sam
            </div>
          </div>
        </div>

        {/* hazard tape — bottom */}
        <div className="diag-stripes" style={{ height: 14, width: '100%' }} />
      </section>

      <Footer />
    </div>
  );
}

window.HomeV1 = HomeV1;
