// variation-classic.jsx — "Crystal Clear"
// Bright, photo-driven, friendly. Closest in spirit to contactwindowcleaning.com:
// big hero photo, sky blue + white, rounded cards, generous whitespace.

function SiteClassic({ brand, theme }) {
  const accent = theme.primary;
  const accentDeep = theme.primaryDeep;
  const accentSoft = theme.primarySoft;
  const [tab, setTab] = React.useState('recurring');
  const active = SERVICES.find(s => s.key === tab) || SERVICES[0];

  return (
    <div data-screen-label="Crystal Clear · full home"
      style={{
        width: '100%', background: '#fff', color: '#0F172A',
        fontFamily: '"DM Sans", -apple-system, system-ui, sans-serif',
        fontSize: 16, lineHeight: 1.55,
      }}>

      {/* TOP UTILITY BAR */}
      <div style={{ background: accentDeep, color: '#fff', fontSize: 13.5 }}>
        <div style={{ maxWidth: 1180, margin: '0 auto', padding: '10px 32px', display: 'flex', justifyContent: 'space-between', alignItems: 'center', gap: 16 }}>
          <div style={{ display: 'flex', alignItems: 'center', gap: 8, opacity: 0.85 }}>
            <Icon name="pin" size={15} /> Serving {LOCATION} & area · Mon–Sat
          </div>
          <div style={{ display: 'flex', alignItems: 'center', gap: 20 }}>
            <span className="util-email" style={{ opacity: 0.85 }}>{EMAIL}</span>
            <a href={PHONE_HREF} style={{ color: '#fff', textDecoration: 'none', fontWeight: 600, display: 'flex', alignItems: 'center', gap: 6, whiteSpace: 'nowrap' }}>
              <Icon name="phone" size={14} /> {PHONE_DISPLAY}
            </a>
          </div>
        </div>
      </div>

      {/* STICKY HEADER */}
      <header style={{
        position: 'sticky', top: 0, zIndex: 50, background: 'rgba(255,255,255,0.92)',
        backdropFilter: 'blur(10px)', borderBottom: '1px solid #E2E8F0',
      }}>
        <div style={{ maxWidth: 1180, margin: '0 auto', padding: '18px 32px', display: 'flex', alignItems: 'center', justifyContent: 'space-between' }}>
          <div style={{ display: 'flex', alignItems: 'center', gap: 14 }}>
            <BrandWordmark height={38} />
          </div>
          <nav style={{ display: 'flex', alignItems: 'center', gap: 32, fontSize: 14.5, fontWeight: 500, color: '#334155' }}>
            <a href="#services" style={{ color: 'inherit', textDecoration: 'none' }}>Services</a>
            <a href="#why" style={{ color: 'inherit', textDecoration: 'none' }}>Why us</a>
            <a href="#process" style={{ color: 'inherit', textDecoration: 'none' }}>Process</a>
            <a href="#faq" style={{ color: 'inherit', textDecoration: 'none' }}>FAQ</a>
            <a href="blog.html" style={{ color: 'inherit', textDecoration: 'none' }}>Blog</a>
            <a href="#contact" style={{ color: 'inherit', textDecoration: 'none' }}>Contact</a>
          </nav>
          <a href={PHONE_HREF} style={{
            background: accent, color: '#fff', padding: '12px 20px', borderRadius: 999,
            textDecoration: 'none', fontWeight: 700, fontSize: 14.5, display: 'flex',
            alignItems: 'center', gap: 8, boxShadow: `0 6px 18px -8px ${accent}cc`,
            whiteSpace: 'nowrap', flexShrink: 0,
          }}>
            <Icon name="phone" size={15} strokeWidth={2.2} /> Call for a Free Quote
          </a>
        </div>
      </header>

      {/* HERO */}
      <section style={{
        position: 'relative', overflow: 'hidden',
        background: `linear-gradient(180deg, ${accentSoft} 0%, #fff 100%)`,
      }}>
        {/* decorative ring */}
        <div style={{
          position: 'absolute', top: -120, right: -120, width: 480, height: 480, borderRadius: '50%',
          background: `radial-gradient(circle, ${accent}22 0%, transparent 70%)`, pointerEvents: 'none',
        }} />
        <div style={{ maxWidth: 1180, margin: '0 auto', padding: '88px 32px 96px', display: 'grid', gridTemplateColumns: '1.05fr 1fr', gap: 64, alignItems: 'center' }}>
          <div>
            <div style={{
              display: 'inline-flex', alignItems: 'center', gap: 8, padding: '7px 14px',
              background: '#fff', border: `1px solid ${accent}55`, borderRadius: 999,
              fontSize: 13, fontWeight: 600, color: accentDeep, marginBottom: 22,
            }}>
              <span style={{ width: 8, height: 8, borderRadius: '50%', background: accent }} />
              Now booking weekly + monthly contracts · {LOCATION}
            </div>
            <h1 style={{
              fontSize: 64, lineHeight: 1.02, letterSpacing: '-0.035em', fontWeight: 800, margin: 0,
              color: '#0B1F2D',
            }}>
              Sharper storefronts.<br/>Cleaner glass<br/>by the time you<br/>unlock the door.
            </h1>
            <p style={{ fontSize: 19, color: '#475569', marginTop: 22, marginBottom: 36, maxWidth: 480, lineHeight: 1.55 }}>
              Edmonton’s storefront-only window cleaning crew. Recurring routes for cafes,
              retailers, restaurants, and offices — done before-hours so your customers never
              see a squeegee.
            </p>
            <div style={{ display: 'flex', gap: 14, alignItems: 'center', flexWrap: 'wrap' }}>
              <a href={PHONE_HREF} style={{
                background: accent, color: '#fff', padding: '16px 26px', borderRadius: 12,
                textDecoration: 'none', fontWeight: 700, fontSize: 16, display: 'flex',
                alignItems: 'center', gap: 10, boxShadow: `0 12px 28px -10px ${accent}cc`,
                whiteSpace: 'nowrap',
              }}>
                <Icon name="phone" size={18} strokeWidth={2.2} /> Call {PHONE_DISPLAY}
              </a>
              <a href="#contact" style={{
                background: '#fff', color: '#0F172A', padding: '15px 24px', borderRadius: 12,
                textDecoration: 'none', fontWeight: 600, fontSize: 15, border: '1.5px solid #E2E8F0',
                display: 'flex', alignItems: 'center', gap: 8,
              }}>
                Or request online <Icon name="arrow" size={16} strokeWidth={2.2}/>
              </a>
            </div>

            <div style={{ marginTop: 40, display: 'flex', gap: 28, alignItems: 'center' }}>
              <div style={{ display: 'flex', alignItems: 'center', gap: 4, color: '#F59E0B' }}>
                {[0,1,2,3,4].map(i => <Icon key={i} name="star" size={18}/>)}
              </div>
              <div style={{ fontSize: 14, color: '#475569' }}>
                <b style={{ color: '#0F172A' }}>4.9 / 5</b> · 200+ Edmonton reviews
              </div>
            </div>
          </div>

          {/* Hero photo block */}
          <div style={{ position: 'relative' }}>
            <div style={{ width: '100%', aspectRatio: '3 / 2', boxShadow: '0 30px 80px -30px rgba(15,42,72,0.4)', borderRadius: 24, overflow: 'hidden' }}>
              <image-slot
                id="hero-classic"
                src="hero-window-cleaner.jpg"
                shape="rounded"
                radius="24"
                placeholder="Hero photo: a Farah crew member smiling, squeegee in hand, in front of a sunlit Edmonton storefront"
                style={{ display: 'block', width: '100%', height: '100%' }}
              />
            </div>
            {/* floating card 1 */}
            <div className="hero-float" style={{
              position: 'absolute', left: -34, bottom: 80, background: '#fff',
              padding: '16px 18px', borderRadius: 16, boxShadow: '0 16px 40px -12px rgba(15,42,72,0.25)',
              display: 'flex', alignItems: 'center', gap: 14, minWidth: 220,
            }}>
              <div style={{
                width: 44, height: 44, borderRadius: 12, background: accentSoft, color: accentDeep,
                display: 'flex', alignItems: 'center', justifyContent: 'center',
              }}>
                <Icon name="sparkle" size={22} strokeWidth={2}/>
              </div>
              <div>
                <div style={{ fontWeight: 700, fontSize: 14.5 }}>No-streak guarantee</div>
                <div style={{ fontSize: 12.5, color: '#64748B' }}>Same-day re-clean, free.</div>
              </div>
            </div>
            {/* floating card 2 */}
            <div className="hero-float" style={{
              position: 'absolute', right: -28, top: 60, background: '#fff',
              padding: '14px 16px', borderRadius: 16, boxShadow: '0 16px 40px -12px rgba(15,42,72,0.25)',
              display: 'flex', alignItems: 'center', gap: 12, minWidth: 200,
            }}>
              <div style={{
                width: 40, height: 40, borderRadius: 10, background: accent, color: '#fff',
                display: 'flex', alignItems: 'center', justifyContent: 'center',
              }}>
                <Icon name="check" size={20} strokeWidth={2.4}/>
              </div>
              <div>
                <div style={{ fontWeight: 700, fontSize: 14, lineHeight: 1.2 }}>Free quote in</div>
                <div style={{ fontSize: 13, color: accentDeep, fontWeight: 700 }}>under 24 hours</div>
              </div>
            </div>
          </div>
        </div>
      </section>

      {/* TRUST STRIP */}
      <section style={{ background: '#F8FAFC', borderTop: '1px solid #E2E8F0', borderBottom: '1px solid #E2E8F0' }}>
        <div style={{ maxWidth: 1180, margin: '0 auto', padding: '28px 32px', display: 'grid', gridTemplateColumns: 'repeat(4,1fr)', gap: 24 }}>
          {[
            { icon: 'shield', label: 'Fully insured + WCB' },
            { icon: 'window', label: 'Storefront specialists' },
            { icon: 'calendar', label: 'Before-hours service' },
            { icon: 'sparkle', label: 'No-streak guarantee' },
          ].map((s, i) => (
            <div key={i} style={{ display: 'flex', alignItems: 'center', gap: 12 }}>
              <div style={{ width: 38, height: 38, borderRadius: 10, background: '#fff', border: '1px solid #E2E8F0', color: accent, display: 'flex', alignItems: 'center', justifyContent: 'center' }}>
                <Icon name={s.icon} size={20}/>
              </div>
              <div style={{ fontWeight: 600, fontSize: 14.5, color: '#0F172A' }}>{s.label}</div>
            </div>
          ))}
        </div>
      </section>

      {/* SERVICES with tabs */}
      <section id="services" style={{ padding: '96px 32px' }}>
        <div style={{ maxWidth: 1180, margin: '0 auto' }}>
          <div style={{ display: 'flex', alignItems: 'flex-end', justifyContent: 'space-between', marginBottom: 40, gap: 32, flexWrap: 'wrap' }}>
            <div>
              <div style={{ fontSize: 13, fontWeight: 700, color: accent, letterSpacing: '0.12em', textTransform: 'uppercase', marginBottom: 12 }}>What we clean</div>
              <h2 style={{ fontSize: 44, letterSpacing: '-0.03em', fontWeight: 800, margin: 0, color: '#0B1F2D', maxWidth: 560 }}>
                Built for storefronts inside, out, and overhead.
              </h2>
            </div>
            <ServiceTabs accent={accent} value={tab} onChange={setTab} />
          </div>

          <div style={{ display: 'grid', gridTemplateColumns: '1.05fr 1fr', gap: 56, alignItems: 'center' }}>
            <div style={{ width: '100%', aspectRatio: '5 / 4', boxShadow: '0 24px 60px -24px rgba(15,42,72,0.3)', borderRadius: 24, overflow: 'hidden' }}>
              <image-slot
                id={active.slotId}
                key={active.slotId}
                src={active.src}
                shape="rounded"
                radius="24"
                placeholder={active.placeholder}
                style={{ display: 'block', width: '100%', height: '100%' }}
              />
            </div>
            <div>
              <div style={{ fontSize: 13, color: '#64748B', fontWeight: 600, marginBottom: 8, textTransform: 'uppercase', letterSpacing: '0.08em' }}>{active.short}</div>
              <h3 style={{ fontSize: 36, fontWeight: 800, letterSpacing: '-0.025em', margin: 0, color: '#0B1F2D' }}>{active.title}</h3>
              <p style={{ fontSize: 17, color: '#475569', marginTop: 16, lineHeight: 1.6 }}>{active.blurb}</p>
              <ul style={{ listStyle: 'none', padding: 0, margin: '24px 0 32px', display: 'grid', gap: 12 }}>
                {active.bullets.map((b, i) => (
                  <li key={i} style={{ display: 'flex', alignItems: 'center', gap: 12, fontSize: 15.5, color: '#334155' }}>
                    <span style={{ width: 22, height: 22, borderRadius: '50%', background: accentSoft, color: accentDeep, display: 'inline-flex', alignItems: 'center', justifyContent: 'center', flex: '0 0 22px' }}>
                      <Icon name="check" size={14} strokeWidth={2.6}/>
                    </span>
                    {b}
                  </li>
                ))}
              </ul>
              <a href={PHONE_HREF} style={{
                display: 'inline-flex', alignItems: 'center', gap: 10, background: accent, color: '#fff',
                padding: '14px 22px', borderRadius: 12, fontWeight: 700, fontSize: 15, textDecoration: 'none',
                boxShadow: `0 10px 24px -10px ${accent}cc`,
              }}>
                <Icon name="phone" size={16} strokeWidth={2.2}/> Call for a Free Quote
              </a>
            </div>
          </div>

          {/* Quick-grid of all services */}
          <div style={{ marginTop: 80, display: 'grid', gridTemplateColumns: 'repeat(4,1fr)', gap: 18 }}>
            {SERVICES.map((s) => {
              const isActive = s.key === tab;
              return (
                <button key={s.key} type="button" onClick={() => setTab(s.key)}
                  style={{
                    padding: 22, borderRadius: 18, border: `1.5px solid ${isActive ? accent : '#E2E8F0'}`,
                    background: isActive ? accentSoft : '#fff', textAlign: 'left', cursor: 'pointer',
                    fontFamily: 'inherit', transition: 'all .18s',
                  }}>
                  <div style={{
                    width: 44, height: 44, borderRadius: 12, background: isActive ? accent : '#F1F5F9',
                    color: isActive ? '#fff' : accent, display: 'inline-flex', alignItems: 'center', justifyContent: 'center', marginBottom: 14,
                  }}>
                    <Icon name={s.key === 'recurring' ? 'calendar' : s.key === 'onetime' ? 'sparkle' : s.key === 'signage' ? 'window' : 'squeegee'} size={22} strokeWidth={2}/>
                  </div>
                  <div style={{ fontWeight: 700, fontSize: 16, color: '#0B1F2D', marginBottom: 4 }}>{s.title}</div>
                  <div style={{ fontSize: 13.5, color: '#64748B' }}>{s.short}</div>
                </button>
              );
            })}
          </div>
        </div>
      </section>

      {/* WHY US */}
      <section id="why" style={{ background: '#0B1F2D', color: '#fff', padding: '96px 32px', position: 'relative', overflow: 'hidden' }}>
        <div style={{
          position: 'absolute', top: -160, left: -160, width: 480, height: 480, borderRadius: '50%',
          background: `radial-gradient(circle, ${accent}33, transparent 70%)`,
        }}/>
        <div style={{ maxWidth: 1180, margin: '0 auto', position: 'relative' }}>
          <div style={{ display: 'grid', gridTemplateColumns: '1fr 1.4fr', gap: 64, alignItems: 'start' }}>
            <div>
              <div style={{ fontSize: 13, fontWeight: 700, color: accent, letterSpacing: '0.12em', textTransform: 'uppercase', marginBottom: 12 }}>Why Farah</div>
              <h2 style={{ fontSize: 44, letterSpacing: '-0.03em', fontWeight: 800, margin: 0, lineHeight: 1.05 }}>
                Eight reasons<br/>
                <span style={{ color: accent }}>Edmonton businesses</span><br/>
                keep us on the schedule.
              </h2>
              <p style={{ marginTop: 22, fontSize: 16, color: 'rgba(255,255,255,0.72)', lineHeight: 1.6, maxWidth: 360 }}>
                We’re not a franchise, and we don’t do houses. Storefronts are 100% of what we
                book — which means a tighter crew, sharper routes, and a quote you can plan a
                year of operations around.
              </p>
            </div>
            <div style={{ display: 'grid', gridTemplateColumns: 'repeat(2,1fr)', gap: 18 }}>
              {DIFFERENTIATORS.map((d, i) => (
                <div key={i} style={{
                  padding: 22, borderRadius: 16, background: 'rgba(255,255,255,0.04)',
                  border: '1px solid rgba(255,255,255,0.08)',
                }}>
                  <div style={{
                    width: 40, height: 40, borderRadius: 10, background: accent, color: '#fff',
                    display: 'inline-flex', alignItems: 'center', justifyContent: 'center', marginBottom: 14,
                  }}>
                    <Icon name={d.icon} size={20} strokeWidth={2}/>
                  </div>
                  <div style={{ fontWeight: 700, fontSize: 16, marginBottom: 4 }}>{d.title}</div>
                  <div style={{ fontSize: 13.5, color: 'rgba(255,255,255,0.65)', lineHeight: 1.55 }}>{d.note}</div>
                </div>
              ))}
            </div>
          </div>
        </div>
      </section>

      {/* PROCESS */}
      <section id="process" style={{ padding: '96px 32px', background: '#F8FAFC' }}>
        <div style={{ maxWidth: 1180, margin: '0 auto' }}>
          <div style={{ textAlign: 'center', marginBottom: 56 }}>
            <div style={{ fontSize: 13, fontWeight: 700, color: accent, letterSpacing: '0.12em', textTransform: 'uppercase', marginBottom: 12 }}>How it works</div>
            <h2 style={{ fontSize: 44, letterSpacing: '-0.03em', fontWeight: 800, margin: 0, color: '#0B1F2D' }}>
              From first call to spotless storefront in three steps.
            </h2>
          </div>
          <div style={{ display: 'grid', gridTemplateColumns: 'repeat(3,1fr)', gap: 24 }}>
            {[
              { n: '01', t: 'Send us your address', d: 'Call, text, or drop a few storefront photos. We quote on the spot for most properties.' },
              { n: '02', t: 'Walk-through + flat quote', d: 'For bigger properties we’ll swing by. Lock in a recurring cadence or a one-time price — no surprises later.' },
              { n: '03', t: 'Spotless before you open', d: 'Uniformed crew, before-hours. COI on file with your landlord. Glass perfect or we come back.' },
            ].map((s) => (
              <div key={s.n} style={{
                background: '#fff', borderRadius: 20, padding: 32, border: '1px solid #E2E8F0',
                position: 'relative',
              }}>
                <div style={{
                  fontSize: 64, fontWeight: 800, color: accentSoft, letterSpacing: '-0.04em', lineHeight: 1,
                  position: 'absolute', top: 18, right: 22,
                }}>{s.n}</div>
                <div style={{ fontSize: 20, fontWeight: 800, color: '#0B1F2D', marginBottom: 10, marginTop: 38, letterSpacing: '-0.02em' }}>{s.t}</div>
                <div style={{ fontSize: 15, color: '#64748B', lineHeight: 1.6 }}>{s.d}</div>
              </div>
            ))}
          </div>
        </div>
      </section>

      {/* TESTIMONIALS */}
      <section style={{ padding: '96px 32px' }}>
        <div style={{ maxWidth: 1180, margin: '0 auto' }}>
          <div style={{ textAlign: 'center', marginBottom: 56 }}>
            <div style={{ fontSize: 13, fontWeight: 700, color: accent, letterSpacing: '0.12em', textTransform: 'uppercase', marginBottom: 12 }}>What Edmonton businesses say</div>
            <h2 style={{ fontSize: 44, letterSpacing: '-0.03em', fontWeight: 800, margin: 0, color: '#0B1F2D' }}>
              200+ storefronts on a Farah schedule.
            </h2>
          </div>
          <div style={{ display: 'grid', gridTemplateColumns: 'repeat(3,1fr)', gap: 22 }}>
            {[
              { q: 'Our cafe’s front windows get hammered with road grime off Whyte. Farah’s crew comes every Sunday before open. Game-changer.', n: 'Devon P.', s: 'Old Strathcona · cafe owner' },
              { q: 'They handle all four of our locations on one contract — one POC, one invoice, COIs on file with each landlord. Easiest vendor switch we’ve ever made.', n: 'Priya N.', s: 'Multi-location retail · ops manager' },
              { q: 'Before-hours service means our patrons never see a ladder. Glass and signage both — we’ve cancelled two competitors since switching.', n: 'Marco D.', s: 'Jasper Ave · restaurant group' },
            ].map((t, i) => (
              <div key={i} style={{
                background: '#fff', border: '1px solid #E2E8F0', borderRadius: 20, padding: 28,
                display: 'flex', flexDirection: 'column',
              }}>
                <div style={{ display: 'flex', gap: 3, color: '#F59E0B', marginBottom: 14 }}>
                  {[0,1,2,3,4].map(i => <Icon key={i} name="star" size={16}/>)}
                </div>
                <div style={{ fontSize: 16.5, color: '#0F172A', lineHeight: 1.55, marginBottom: 24 }}>“{t.q}”</div>
                <div style={{ marginTop: 'auto', display: 'flex', alignItems: 'center', gap: 12 }}>
                  <div style={{
                    width: 38, height: 38, borderRadius: '50%', background: accentSoft, color: accentDeep,
                    display: 'flex', alignItems: 'center', justifyContent: 'center', fontWeight: 700, fontSize: 14,
                  }}>{t.n.split(' ').map(p => p[0]).join('')}</div>
                  <div>
                    <div style={{ fontWeight: 700, fontSize: 14.5, color: '#0F172A' }}>{t.n}</div>
                    <div style={{ fontSize: 12.5, color: '#64748B' }}>{t.s}</div>
                  </div>
                </div>
              </div>
            ))}
          </div>
        </div>
      </section>

      {/* FAQ */}
      <section id="faq" style={{ padding: '96px 32px', background: '#F8FAFC' }}>
        <div style={{ maxWidth: 900, margin: '0 auto' }}>
          <div style={{ marginBottom: 40 }}>
            <div style={{ fontSize: 13, fontWeight: 700, color: accent, letterSpacing: '0.12em', textTransform: 'uppercase', marginBottom: 12 }}>Frequently asked</div>
            <h2 style={{ fontSize: 44, letterSpacing: '-0.03em', fontWeight: 800, margin: 0, color: '#0B1F2D' }}>
              The questions we hear most.
            </h2>
          </div>
          <FAQAccordion items={FAQS} accent={accent} />
        </div>
      </section>

      {/* CONTACT */}
      <section id="contact" style={{ padding: '96px 32px' }}>
        <div style={{ maxWidth: 1180, margin: '0 auto', display: 'grid', gridTemplateColumns: '1fr 1.05fr', gap: 64, alignItems: 'stretch' }}>
          <div style={{
            display: 'flex', flexDirection: 'column', justifyContent: 'space-between',
            background: `linear-gradient(160deg, ${accentDeep} 0%, ${accent} 100%)`,
            color: '#fff', borderRadius: 24, padding: 44,
            boxShadow: `0 24px 60px -30px ${accentDeep}aa`,
            position: 'relative', overflow: 'hidden',
          }}>
            <div aria-hidden="true" style={{
              position: 'absolute', inset: 0, pointerEvents: 'none',
              background: 'radial-gradient(circle at 85% 0%, rgba(255,255,255,0.18) 0%, transparent 55%)',
            }}/>
            <div style={{ position: 'relative' }}>
            <div style={{ fontSize: 13, fontWeight: 700, color: 'rgba(255,255,255,0.85)', letterSpacing: '0.12em', textTransform: 'uppercase', marginBottom: 12 }}>Free quote</div>
            <h2 style={{ fontSize: 44, letterSpacing: '-0.03em', fontWeight: 800, margin: 0, color: '#fff', lineHeight: 1.05 }}>
              Quote your<br/>storefront.
            </h2>
            <p style={{ fontSize: 17, color: 'rgba(255,255,255,0.88)', marginTop: 22, lineHeight: 1.6, maxWidth: 440 }}>
              Send us your storefront address and a couple of photos. We’ll text a flat,
              locked-in price back within the day. No pressure, no upsells, no per-pane
              gymnastics.
            </p>
            </div>
            <div style={{ position: 'relative', marginTop: 36, display: 'grid', gap: 18 }}>
              <a href={PHONE_HREF} style={{ display: 'flex', alignItems: 'center', gap: 14, textDecoration: 'none', color: 'inherit' }}>
                <div style={{ width: 48, height: 48, borderRadius: 14, background: 'rgba(255,255,255,0.18)', color: '#fff', display: 'flex', alignItems: 'center', justifyContent: 'center' }}>
                  <Icon name="phone" size={22}/>
                </div>
                <div>
                  <div style={{ fontSize: 12.5, color: 'rgba(255,255,255,0.72)', textTransform: 'uppercase', letterSpacing: '0.08em', fontWeight: 600 }}>Call or text</div>
                  <div style={{ fontWeight: 700, fontSize: 18, color: '#fff' }}>{PHONE_DISPLAY}</div>
                </div>
              </a>
              <a href={`mailto:${EMAIL}`} style={{ display: 'flex', alignItems: 'center', gap: 14, textDecoration: 'none', color: 'inherit' }}>
                <div style={{ width: 48, height: 48, borderRadius: 14, background: 'rgba(255,255,255,0.18)', color: '#fff', display: 'flex', alignItems: 'center', justifyContent: 'center' }}>
                  <Icon name="mail" size={22}/>
                </div>
                <div>
                  <div style={{ fontSize: 12.5, color: 'rgba(255,255,255,0.72)', textTransform: 'uppercase', letterSpacing: '0.08em', fontWeight: 600 }}>Email</div>
                  <div style={{ fontWeight: 700, fontSize: 16, color: '#fff' }}>{EMAIL}</div>
                </div>
              </a>
              <div style={{ display: 'flex', alignItems: 'center', gap: 14 }}>
                <div style={{ width: 48, height: 48, borderRadius: 14, background: 'rgba(255,255,255,0.18)', color: '#fff', display: 'flex', alignItems: 'center', justifyContent: 'center' }}>
                  <Icon name="pin" size={22}/>
                </div>
                <div>
                  <div style={{ fontSize: 12.5, color: 'rgba(255,255,255,0.72)', textTransform: 'uppercase', letterSpacing: '0.08em', fontWeight: 600 }}>Window cleaning services</div>
                  <div style={{ fontWeight: 700, fontSize: 16, color: '#fff' }}>Edmonton, Alberta + 30km</div>
                </div>
              </div>
            </div>

            <div style={{ position: 'relative', marginTop: 36, padding: 22, borderRadius: 16, background: 'rgba(255,255,255,0.1)', border: '1px solid rgba(255,255,255,0.18)' }}>
              <div style={{ fontSize: 12.5, color: '#fff', fontWeight: 700, textTransform: 'uppercase', letterSpacing: '0.08em', marginBottom: 10 }}>Storefronts we service</div>
              <div style={{ display: 'flex', flexWrap: 'wrap', gap: 6 }}>
                {SERVICE_AREAS.map(a => (
                  <span key={a} style={{ padding: '5px 11px', background: 'rgba(255,255,255,0.16)', border: '1px solid rgba(255,255,255,0.22)', borderRadius: 999, fontSize: 12.5, color: '#fff', fontWeight: 500 }}>{a}</span>
                ))}
              </div>
            </div>
          </div>
          <div style={{ background: '#fff', borderRadius: 24, padding: 36, border: '1px solid #E2E8F0', boxShadow: '0 24px 60px -30px rgba(15,42,72,0.2)' }}>
            <QuoteForm accent={accent} />
          </div>
        </div>
      </section>

      {/* FOOTER CTA */}
      <section style={{ background: accent, color: '#fff', padding: '64px 32px', position: 'relative', overflow: 'hidden' }}>
        <div style={{
          position: 'absolute', inset: 0, background: `radial-gradient(circle at 80% 50%, rgba(255,255,255,0.15) 0%, transparent 60%)`,
        }}/>
        <div style={{ maxWidth: 1180, margin: '0 auto', display: 'flex', alignItems: 'center', justifyContent: 'space-between', position: 'relative', gap: 32, flexWrap: 'wrap' }}>
          <div>
            <h3 style={{ fontSize: 36, fontWeight: 800, letterSpacing: '-0.025em', margin: 0, lineHeight: 1.1 }}>
              Ready for a sharper storefront?
            </h3>
            <p style={{ fontSize: 17, marginTop: 10, opacity: 0.9, marginBottom: 0 }}>
              Free quotes back within the day. Book a recurring route and we handle the rest.
            </p>
          </div>
          <a href={PHONE_HREF} style={{
            background: '#fff', color: accentDeep, padding: '18px 28px', borderRadius: 12,
            textDecoration: 'none', fontWeight: 800, fontSize: 17, display: 'flex', alignItems: 'center', gap: 12,
            boxShadow: '0 12px 28px -10px rgba(0,0,0,0.25)', whiteSpace: 'nowrap',
          }}>
            <Icon name="phone" size={20} strokeWidth={2.4}/> Call {PHONE_DISPLAY}
          </a>
        </div>
      </section>

      {/* FOOTER */}
      <footer style={{ background: '#0B1F2D', color: 'rgba(255,255,255,0.7)', padding: '56px 32px 36px' }}>
        <div style={{ maxWidth: 1180, margin: '0 auto', display: 'grid', gridTemplateColumns: '1.4fr 1fr 1fr 1fr', gap: 48 }}>
          <div>
            <div style={{ marginBottom: 16 }}>
              <BrandWordmark height={28} light />
            </div>
            <p style={{ fontSize: 14, lineHeight: 1.65, maxWidth: 320 }}>
              Edmonton’s storefront-only window cleaning crew. Recurring routes for retail,
              restaurants, and offices since 2018. Fully insured + WCB.
            </p>
          </div>
          <div>
            <div style={{ fontSize: 12.5, color: '#fff', fontWeight: 700, textTransform: 'uppercase', letterSpacing: '0.1em', marginBottom: 14 }}>Services</div>
            <div style={{ display: 'grid', gap: 8, fontSize: 14 }}>
              {SERVICES.map(s => <a key={s.key} href="#services" style={{ color: 'inherit', textDecoration: 'none' }}>{s.title}</a>)}
            </div>
          </div>
          <div>
            <div style={{ fontSize: 12.5, color: '#fff', fontWeight: 700, textTransform: 'uppercase', letterSpacing: '0.1em', marginBottom: 14 }}>Company</div>
            <div style={{ display: 'grid', gap: 8, fontSize: 14 }}>
              <a href="#why" style={{ color: 'inherit', textDecoration: 'none' }}>Why us</a>
              <a href="#process" style={{ color: 'inherit', textDecoration: 'none' }}>Process</a>
              <a href="#faq" style={{ color: 'inherit', textDecoration: 'none' }}>FAQ</a>
              <a href="#contact" style={{ color: 'inherit', textDecoration: 'none' }}>Contact</a>
            </div>
          </div>
          <div>
            <div style={{ fontSize: 12.5, color: '#fff', fontWeight: 700, textTransform: 'uppercase', letterSpacing: '0.1em', marginBottom: 14 }}>Contact</div>
            <div style={{ display: 'grid', gap: 8, fontSize: 14 }}>
              <a href={PHONE_HREF} style={{ color: '#fff', textDecoration: 'none', fontWeight: 700 }}>{PHONE_DISPLAY}</a>
              <a href={`mailto:${EMAIL}`} style={{ color: 'inherit', textDecoration: 'none' }}>{EMAIL}</a>
              <span>{LOCATION}</span>
            </div>
          </div>
        </div>
        <div style={{ maxWidth: 1180, margin: '40px auto 0', paddingTop: 22, borderTop: '1px solid rgba(255,255,255,0.1)', display: 'flex', justifyContent: 'space-between', fontSize: 13 }}>
          <span>© 2026 {brand}. All rights reserved.</span>
          <span>Storefront window cleaning · Edmonton, Alberta</span>
        </div>
      </footer>
    </div>
  );
}

window.SiteClassic = SiteClassic;