// Home page — with two hero variations exposed via Tweaks
const { Reveal, ParallaxPhoto, navigate, Icon } = window.Sky;

const HOME_PHOTOS = [
  'assets/photos/walnut-tile-floor.jpg',
  'assets/photos/marble-shower-glass.jpg',
  'assets/photos/marble-bathroom-full.jpg',
  'assets/photos/white-marble-shower.jpg',
  'assets/photos/gold-marble-bath.jpg',
  'assets/photos/black-hardware-shower.jpg',
  'assets/photos/chevron-backsplash.jpg',
  'assets/photos/kitchen-grey-cabinets.jpg',
];

// HERO VARIATION A — Full-bleed editorial
function HeroA() {
  return (
    <section style={{ position: 'relative', height: 'min(92vh, 880px)', minHeight: 620, overflow: 'hidden' }}>
      <ParallaxPhoto src="assets/photos/walnut-tile-floor.jpg" alt="Walnut wood-look tile floor" loading="eager" style={{ position: 'absolute', inset: 0 }} />
      <div style={{ position: 'absolute', inset: 0, background: 'linear-gradient(180deg, rgba(27,19,14,0.45) 0%, rgba(27,19,14,0.15) 35%, rgba(27,19,14,0.55) 100%)' }} />
      <div className="container" style={{ position: 'relative', height: '100%', display: 'flex', flexDirection: 'column', justifyContent: 'flex-end', paddingBottom: 80, paddingTop: 120, color: '#F5F1EA' }}>
        <Reveal>
          <span className="tag" style={{ background: 'rgba(245,241,234,0.12)', borderColor: 'rgba(245,241,234,0.25)', color: 'rgba(245,241,234,0.9)', backdropFilter: 'blur(8px)' }}>
            <span className="dot" /> Owner-operated · Waterloo Region
          </span>
        </Reveal>
        <Reveal delay={120}>
          <h1 style={{ color: '#F5F1EA', maxWidth: 980, marginTop: 24, fontWeight: 300 }}>
            Hardwood, vinyl &amp; tile —<br/>installed <em style={{ fontStyle: 'italic', color: '#A9CDE8', fontWeight: 400 }}>right</em>, the first time.
          </h1>
        </Reveal>
        <Reveal delay={240}>
          <p style={{ maxWidth: 540, marginTop: 24, fontSize: 18, color: 'rgba(245,241,234,0.85)', lineHeight: 1.5 }}>
            One craftsman. Clean job sites. Free in-home estimates across Kitchener, Waterloo, Cambridge &amp; Guelph.
          </p>
        </Reveal>
        <Reveal delay={360}>
          <div style={{ display: 'flex', gap: 12, marginTop: 36, flexWrap: 'wrap' }}>
            <a className="btn btn-sky btn-arrow" href="#/contact" onClick={(e) => { e.preventDefault(); navigate('contact'); }}>Get a Free Quote</a>
            <a className="btn btn-on-dark btn-arrow" href="#/gallery" onClick={(e) => { e.preventDefault(); navigate('gallery'); }}>See My Work</a>
          </div>
        </Reveal>
      </div>
      {/* corner ticker */}
      <div style={{ position: 'absolute', right: 32, top: 110, color: 'rgba(245,241,234,0.7)', fontSize: 11, letterSpacing: '0.18em', textTransform: 'uppercase', writingMode: 'vertical-rl', transform: 'rotate(180deg)', display: 'none' }}>
        Est. KW · Insured · 12+ yrs
      </div>
    </section>
  );
}

// HERO VARIATION B — Split editorial w/ asymmetric photo
function HeroB() {
  return (
    <section style={{ paddingTop: 64, paddingBottom: 96, background: 'var(--cream)' }}>
      <div className="container">
        <div style={{ display: 'grid', gridTemplateColumns: '1.05fr 1fr', gap: 56, alignItems: 'center' }} className="hero-b-grid">
          <div>
            <Reveal>
              <span className="tag"><span className="dot" /> Owner-operated · Waterloo Region</span>
            </Reveal>
            <Reveal delay={100}>
              <h1 style={{ marginTop: 20, fontWeight: 300 }}>
                Floors that feel<br/><em style={{ fontStyle: 'italic', color: '#2F6E9E', fontWeight: 400 }}>handmade.</em><br/>Because they are.
              </h1>
            </Reveal>
            <Reveal delay={200}>
              <p style={{ maxWidth: 460, marginTop: 28, fontSize: 18, color: 'var(--muted)' }}>
                Hardwood, vinyl plank &amp; tile installed by one experienced installer who shows up himself, every job. Across Kitchener, Waterloo, Cambridge &amp; Guelph.
              </p>
            </Reveal>
            <Reveal delay={300}>
              <div style={{ display: 'flex', gap: 12, marginTop: 32, flexWrap: 'wrap' }}>
                <a className="btn btn-sky btn-arrow" href="#/contact" onClick={(e) => { e.preventDefault(); navigate('contact'); }}>Get a Free Quote</a>
                <a className="btn btn-ghost btn-arrow" href="#/gallery" onClick={(e) => { e.preventDefault(); navigate('gallery'); }}>See My Work</a>
              </div>
            </Reveal>
            <Reveal delay={420}>
              <div style={{ display: 'flex', gap: 36, marginTop: 56, flexWrap: 'wrap' }}>
                {[['12+', 'Years on the job'],['200+', 'Homes finished'],['100%', 'Owner-installed']].map(([n,l]) => (
                  <div key={l}>
                    <div style={{ fontFamily: 'Fraunces', fontSize: 36, color: 'var(--walnut)', fontWeight: 400, lineHeight: 1 }}>{n}</div>
                    <div style={{ fontSize: 12, letterSpacing: '0.14em', textTransform: 'uppercase', color: 'var(--muted)', marginTop: 6 }}>{l}</div>
                  </div>
                ))}
              </div>
            </Reveal>
          </div>
          <Reveal delay={200}>
            <div style={{ position: 'relative', aspectRatio: '4 / 5', borderRadius: 14, overflow: 'hidden', boxShadow: 'var(--shadow-lg)' }}>
              <ParallaxPhoto src="assets/photos/marble-shower-glass.jpg" alt="Marble shower" loading="eager" style={{ position: 'absolute', inset: 0 }} />
              <div style={{ position: 'absolute', left: -28, bottom: 32, width: 200, aspectRatio: '4/5', borderRadius: 12, overflow: 'hidden', boxShadow: 'var(--shadow-lg)', border: '6px solid var(--cream)' }}>
                <img src="assets/photos/walnut-tile-floor.jpg" alt="Walnut floor" style={{ width: '100%', height: '100%', objectFit: 'cover' }} />
              </div>
              <div style={{ position: 'absolute', top: 20, left: 20, padding: '6px 12px', borderRadius: 999, background: 'rgba(255,255,255,0.92)', fontSize: 11, letterSpacing: '0.14em', textTransform: 'uppercase', color: 'var(--walnut)', fontWeight: 500 }}>
                Recent · Waterloo
              </div>
            </div>
          </Reveal>
        </div>
      </div>
      <style>{`
        @media (max-width: 880px) {
          .hero-b-grid { grid-template-columns: 1fr !important; gap: 40px !important; }
        }
      `}</style>
    </section>
  );
}

function Services() {
  const list = [
    { icon: <Icon.Plank/>, title: 'Hardwood', desc: 'Solid &amp; engineered. Site-finished or pre-finished. Stair runners, transitions, custom borders.' },
    { icon: <Icon.Layers/>, title: 'Vinyl &amp; LVP', desc: 'Click-lock luxury vinyl plank — waterproof, kid &amp; pet friendly. Basements, kitchens, full homes.' },
    { icon: <Icon.Tile/>, title: 'Tile &amp; Stone', desc: 'Bathrooms, showers, kitchens, foyers. Hex, herringbone, large-format porcelain, marble.' },
    { icon: <Icon.Refresh/>, title: 'Refinish &amp; Repair', desc: 'Sand, stain &amp; refinish existing hardwood. Board replacement and creak repair.' },
  ];
  return (
    <section className="section-pad">
      <div className="container">
        <Reveal>
          <span className="rule-eye eyebrow">What I do</span>
        </Reveal>
        <Reveal delay={100}>
          <h2 style={{ marginTop: 18, maxWidth: 820 }}>Four floors. One pair of hands. <em style={{ fontStyle: 'italic', color: '#2F6E9E' }}>Every</em> job.</h2>
        </Reveal>
        <div style={{ display: 'grid', gridTemplateColumns: 'repeat(4, 1fr)', gap: 24, marginTop: 64 }} className="svc-grid">
          {list.map((s, i) => (
            <Reveal key={s.title} delay={i * 80}>
              <a href="#/services" onClick={(e) => { e.preventDefault(); navigate('services'); }} style={{ display: 'block', padding: 28, border: '1px solid var(--hairline)', borderRadius: 14, background: 'var(--paper)', height: '100%', transition: 'transform .25s ease, border-color .25s ease, box-shadow .25s ease' }}
                onMouseEnter={(e) => { e.currentTarget.style.transform = 'translateY(-3px)'; e.currentTarget.style.boxShadow = 'var(--shadow-md)'; e.currentTarget.style.borderColor = 'var(--hairline-strong)'; }}
                onMouseLeave={(e) => { e.currentTarget.style.transform = ''; e.currentTarget.style.boxShadow = ''; e.currentTarget.style.borderColor = 'var(--hairline)'; }}>
                <div style={{ color: 'var(--walnut)' }}>{s.icon}</div>
                <h3 style={{ fontSize: 26, marginTop: 32 }}>{s.title}</h3>
                <p style={{ marginTop: 10, color: 'var(--muted)', fontSize: 14 }} dangerouslySetInnerHTML={{ __html: s.desc }} />
                <div style={{ marginTop: 24, fontSize: 13, color: 'var(--sky-deep)', display: 'flex', alignItems: 'center', gap: 6 }}>
                  Learn more →
                </div>
              </a>
            </Reveal>
          ))}
        </div>
      </div>
      <style>{`
        @media (max-width: 1080px) { .svc-grid { grid-template-columns: repeat(2, 1fr) !important; } }
        @media (max-width: 560px) { .svc-grid { grid-template-columns: 1fr !important; } }
      `}</style>
    </section>
  );
}

function WhySky() {
  const reasons = [
    { n: '01', t: 'Owner-operated', d: 'You meet the person who will install your floor. Not a sales rep, not a sub.' },
    { n: '02', t: 'Free in-home estimate', d: 'I measure, talk through options, and quote in writing. No pressure, no fee.' },
    { n: '03', t: 'Clean job sites', d: 'Drop cloths, dust containment, and a tidy site at the end of every day.' },
    { n: '04', t: 'Fully insured', d: 'WSIB-covered and liability-insured. Local references on request.' },
  ];
  return (
    <section className="section-pad" style={{ background: 'var(--cream-soft)' }}>
      <div className="container">
        <div style={{ display: 'grid', gridTemplateColumns: '1fr 1.2fr', gap: 80, alignItems: 'flex-start' }} className="why-grid">
          <div>
            <Reveal>
              <span className="rule-eye eyebrow">Why Sky Flooring</span>
            </Reveal>
            <Reveal delay={100}>
              <h2 style={{ marginTop: 18 }}>Small shop.<br/>Same hands, start to finish.</h2>
            </Reveal>
            <Reveal delay={200}>
              <p style={{ marginTop: 24, color: 'var(--muted)', fontSize: 16, maxWidth: 420 }}>
                Sky Flooring is one experienced installer — Diyako — who shows up, does the work, and stands behind it. The way it should be.
              </p>
            </Reveal>
            <Reveal delay={280}>
              <div style={{ marginTop: 36, aspectRatio: '4/5', borderRadius: 14, overflow: 'hidden', maxWidth: 380 }}>
                <img src="assets/photos/install-walnut-progress.jpg" alt="Tile installation in progress" loading="lazy" decoding="async" style={{ width: '100%', height: '100%', objectFit: 'cover' }} />
              </div>
            </Reveal>
          </div>
          <div style={{ display: 'flex', flexDirection: 'column' }}>
            {reasons.map((r, i) => (
              <Reveal key={r.n} delay={i * 80}>
                <div style={{ display: 'grid', gridTemplateColumns: '60px 1fr', gap: 24, padding: '32px 0', borderTop: '1px solid var(--hairline)' }}>
                  <div style={{ fontFamily: 'Fraunces', fontStyle: 'italic', color: 'var(--sky-deep)', fontSize: 22 }}>{r.n}</div>
                  <div>
                    <h3 style={{ fontSize: 28 }}>{r.t}</h3>
                    <p style={{ marginTop: 10, color: 'var(--muted)' }}>{r.d}</p>
                  </div>
                </div>
              </Reveal>
            ))}
            <div style={{ borderTop: '1px solid var(--hairline)' }} />
          </div>
        </div>
      </div>
      <style>{`@media (max-width: 880px) { .why-grid { grid-template-columns: 1fr !important; gap: 48px !important; } }`}</style>
    </section>
  );
}

function GalleryStrip() {
  return (
    <section className="section-pad-sm" style={{ paddingBottom: 0 }}>
      <div className="container" style={{ display: 'flex', alignItems: 'flex-end', justifyContent: 'space-between', flexWrap: 'wrap', gap: 16, marginBottom: 40 }}>
        <div>
          <Reveal><span className="rule-eye eyebrow">Recent work</span></Reveal>
          <Reveal delay={100}><h2 style={{ marginTop: 16 }}>From the last few jobs.</h2></Reveal>
        </div>
        <Reveal delay={200}>
          <a className="btn btn-ghost btn-arrow" href="#/gallery" onClick={(e) => { e.preventDefault(); navigate('gallery'); }}>View full gallery</a>
        </Reveal>
      </div>
      <div style={{ display: 'grid', gridTemplateColumns: 'repeat(8, 1fr)', gap: 12, padding: '0 32px' }} className="gal-strip">
        {HOME_PHOTOS.map((src, i) => {
          // Asymmetric heights for editorial feel
          const aspect = [0.75, 1.1, 0.85, 1.0, 0.7, 1.0, 0.85, 1.05][i];
          return (
            <Reveal key={src} delay={i * 50}>
              <a href="#/gallery" aria-label="View full gallery" onClick={(e) => { e.preventDefault(); navigate('gallery'); }} style={{ display: 'block', aspectRatio: `1 / ${aspect}`, borderRadius: 8, overflow: 'hidden', position: 'relative' }}>
                <img src={src} alt="" loading="lazy" decoding="async" style={{ width: '100%', height: '100%', objectFit: 'cover', transition: 'transform .8s ease' }}
                  onMouseEnter={(e) => { e.currentTarget.style.transform = 'scale(1.05)'; }}
                  onMouseLeave={(e) => { e.currentTarget.style.transform = ''; }} />
              </a>
            </Reveal>
          );
        })}
      </div>
      <style>{`
        @media (max-width: 1080px) { .gal-strip { grid-template-columns: repeat(4, 1fr) !important; } }
        @media (max-width: 560px) { .gal-strip { grid-template-columns: repeat(2, 1fr) !important; padding: 0 20px !important; } }
      `}</style>
    </section>
  );
}

function Testimonials() {
  const quotes = [
    { q: 'Diyako replaced the hardwood through our main floor. Workmanship is unreal — every transition is dead-on flush. He kept the place spotless.', n: 'Lauren M.', l: 'Waterloo · Engineered hardwood' },
    { q: 'We had three contractors quote a master ensuite. Sky Flooring was the only one who explained how he\'d level the floor. Result speaks for itself.', n: 'Daniel & Priya R.', l: 'Cambridge · Bathroom tile' },
    { q: 'Fast, clean, fairly priced. Came back two weeks later for a tiny touch-up at no charge. That\'s the kind of guy he is.', n: 'Mike T.', l: 'Kitchener · LVP basement' },
  ];
  return (
    <section className="section-pad">
      <div className="container">
        <Reveal><span className="rule-eye eyebrow">What homeowners say</span></Reveal>
        <Reveal delay={100}>
          <h2 style={{ marginTop: 18, maxWidth: 760 }}>Repeat work and referrals — that's the whole business.</h2>
        </Reveal>
        <div style={{ display: 'grid', gridTemplateColumns: 'repeat(3, 1fr)', gap: 24, marginTop: 64 }} className="testi-grid">
          {quotes.map((q, i) => (
            <Reveal key={q.n} delay={i * 100}>
              <div style={{ background: 'var(--paper)', border: '1px solid var(--hairline)', borderRadius: 14, padding: 32, height: '100%', display: 'flex', flexDirection: 'column' }}>
                <div style={{ color: 'var(--sky)' }}><Icon.Quote /></div>
                <p style={{ fontFamily: 'Fraunces', fontSize: 22, lineHeight: 1.35, color: 'var(--walnut)', marginTop: 16, flex: 1 }}>
                  "{q.q}"
                </p>
                <div style={{ marginTop: 28, paddingTop: 20, borderTop: '1px solid var(--hairline)', display: 'flex', alignItems: 'center', justifyContent: 'space-between' }}>
                  <div>
                    <div style={{ fontWeight: 500, fontSize: 14 }}>{q.n}</div>
                    <div style={{ fontSize: 12, color: 'var(--muted)', marginTop: 2 }}>{q.l}</div>
                  </div>
                  <div style={{ display: 'flex', gap: 2, color: '#D4A038' }}>
                    {Array.from({ length: 5 }).map((_, j) => <Icon.Star key={j} />)}
                  </div>
                </div>
              </div>
            </Reveal>
          ))}
        </div>
      </div>
      <style>{`
        @media (max-width: 1080px) { .testi-grid { grid-template-columns: 1fr !important; } }
      `}</style>
    </section>
  );
}

function ServiceArea() {
  const cities = ['Kitchener', 'Waterloo', 'Cambridge', 'Guelph', 'Elmira', 'St. Jacobs', 'Breslau', 'New Hamburg'];
  return (
    <section className="section-pad-sm">
      <div className="container">
        <div style={{ display: 'grid', gridTemplateColumns: '1fr 1fr', gap: 56, alignItems: 'center' }} className="area-grid">
          <div>
            <Reveal><span className="rule-eye eyebrow">Service area</span></Reveal>
            <Reveal delay={100}><h2 style={{ marginTop: 18 }}>Local to Waterloo Region.</h2></Reveal>
            <Reveal delay={200}>
              <p style={{ marginTop: 20, color: 'var(--muted)', maxWidth: 460 }}>
                Based in Kitchener, serving homeowners within roughly 45 minutes. Travel further for larger jobs — just ask.
              </p>
            </Reveal>
            <Reveal delay={300}>
              <ul style={{ display: 'grid', gridTemplateColumns: '1fr 1fr', gap: '12px 24px', marginTop: 36, listStyle: 'none', padding: 0 }}>
                {cities.map(c => (
                  <li key={c} style={{ display: 'flex', alignItems: 'center', gap: 10, padding: '10px 0', borderBottom: '1px solid var(--hairline)' }}>
                    <span style={{ color: 'var(--sky-deep)' }}><Icon.Pin /></span>
                    <span style={{ fontSize: 15 }}>{c}</span>
                  </li>
                ))}
              </ul>
            </Reveal>
          </div>
          <Reveal delay={200}>
            <div style={{ aspectRatio: '4/3', borderRadius: 14, overflow: 'hidden', border: '1px solid var(--hairline)', background: 'var(--paper)' }}>
              <iframe
                src="https://www.google.com/maps/embed?pb=!1m14!1m12!1m3!1d92456.32!2d-80.5494!3d43.4516!2m3!1f0!2f0!3f0!3m2!1i1024!2i768!4f13.1!5e0!3m2!1sen!2sca!4v1700000000000"
                width="100%" height="100%" style={{ border: 0, display: 'block' }}
                loading="lazy" referrerPolicy="no-referrer-when-downgrade"
                title="Service area"
              ></iframe>
            </div>
          </Reveal>
        </div>
      </div>
      <style>{`@media (max-width: 880px) { .area-grid { grid-template-columns: 1fr !important; } }`}</style>
    </section>
  );
}

function StylizedMap() {
  return (
    <div style={{ position: 'relative', aspectRatio: '4/3', background: 'var(--paper)', border: '1px solid var(--hairline)', borderRadius: 14, overflow: 'hidden' }}>
      <svg viewBox="0 0 400 300" style={{ position: 'absolute', inset: 0, width: '100%', height: '100%' }}>
        <defs>
          <pattern id="grid" width="20" height="20" patternUnits="userSpaceOnUse">
            <path d="M20 0H0V20" fill="none" stroke="#D9CFC0" strokeWidth="0.5" opacity="0.5"/>
          </pattern>
        </defs>
        <rect width="400" height="300" fill="url(#grid)"/>
        {/* Stylized region — KW area as soft polygon */}
        <path d="M40 200 Q 80 120 160 100 Q 240 80 320 130 Q 360 180 340 230 Q 280 270 200 260 Q 100 250 40 200 Z" fill="#DFEBF4" stroke="#4A90C7" strokeWidth="1" opacity="0.8"/>
        <path d="M120 180 Q 160 150 200 160 Q 240 170 260 200 Q 240 230 200 230 Q 140 220 120 180 Z" fill="#A9CDE8" opacity="0.5"/>
        {/* Road lines */}
        <path d="M40 220 L 360 180" stroke="#BFB29F" strokeWidth="1" strokeDasharray="3 4"/>
        <path d="M180 60 L 220 280" stroke="#BFB29F" strokeWidth="1" strokeDasharray="3 4"/>
        {/* City pins */}
        {[
          { x: 170, y: 165, name: 'Kitchener', big: true },
          { x: 195, y: 140, name: 'Waterloo', big: true },
          { x: 230, y: 205, name: 'Cambridge' },
          { x: 105, y: 145, name: 'Guelph' },
          { x: 165, y: 105, name: 'Elmira' },
        ].map(c => (
          <g key={c.name}>
            <circle cx={c.x} cy={c.y} r={c.big ? 7 : 5} fill="#2F6E9E"/>
            <circle cx={c.x} cy={c.y} r={c.big ? 14 : 10} fill="#4A90C7" opacity="0.25">
              <animate attributeName="r" values={`${c.big ? 14 : 10};${c.big ? 22 : 18};${c.big ? 14 : 10}`} dur="3s" repeatCount="indefinite"/>
              <animate attributeName="opacity" values="0.25;0;0.25" dur="3s" repeatCount="indefinite"/>
            </circle>
            <text x={c.x + (c.big ? 14 : 10)} y={c.y + 4} fontSize="11" fontFamily="Inter" fill="#2B1F18" fontWeight="500">{c.name}</text>
          </g>
        ))}
        {/* Compass */}
        <g transform="translate(360, 50)">
          <circle r="14" fill="white" stroke="#D9CFC0"/>
          <text textAnchor="middle" y="-3" fontSize="9" fontFamily="Inter" fill="#6B5E54">N</text>
          <path d="M0 -8 L3 6 L0 3 L-3 6 Z" fill="#2B1F18"/>
        </g>
      </svg>
    </div>
  );
}

function FinalCTA() {
  return (
    <section style={{ background: 'var(--walnut)', color: 'var(--cream)', padding: '120px 0' }}>
      <div className="container">
        <div style={{ display: 'grid', gridTemplateColumns: '1.4fr 1fr', gap: 56, alignItems: 'center' }} className="fcta-grid">
          <Reveal>
            <h2 style={{ color: 'var(--cream)', fontSize: 'clamp(40px, 5vw, 72px)' }}>
              Free quote. <em style={{ fontStyle: 'italic', color: '#A9CDE8' }}>Zero pressure.</em>
            </h2>
            <p style={{ marginTop: 24, color: 'rgba(245,241,234,0.7)', fontSize: 18, maxWidth: 480 }}>
              Give Diyako a call. Quick chat, free in-home estimate, real number in writing.
            </p>
          </Reveal>
          <Reveal delay={120}>
            <div style={{ display: 'flex', flexDirection: 'column', gap: 16 }}>
              <a className="btn btn-sky btn-arrow" href="tel:+12269887694" style={{ padding: '20px 26px', fontSize: 16, justifyContent: 'space-between' }}>
                <span>(226) 988-7694</span>
              </a>
              <a className="btn btn-on-dark" href="#/contact" onClick={(e) => { e.preventDefault(); navigate('contact'); }} style={{ padding: '20px 26px', fontSize: 16, justifyContent: 'space-between' }}>
                <span>Service hours &amp; area</span>
                <span style={{ opacity: 0.7, fontSize: 12 }}>Mon–Sat · 8a–8p</span>
              </a>
            </div>
          </Reveal>
        </div>
      </div>
      <style>{`@media (max-width: 880px) { .fcta-grid { grid-template-columns: 1fr !important; } }`}</style>
    </section>
  );
}

function HomePage({ heroVariant }) {
  return (
    <div className="page" data-screen-label="01 Home">
      {heroVariant === 'split' ? <HeroB /> : <HeroA />}
      <Services />
      <WhySky />
      <GalleryStrip />
      <Testimonials />
      <ServiceArea />
      <FinalCTA />
    </div>
  );
}

window.HomePage = HomePage;