// Single-page Strategy Division site — 7 sections in order:
// 01 Hero · 02 Disciplines · 03 What We Do (Digital + Mail) ·
// 04 Map · 05 Case Studies grid · 06 Testimonials + Awards · 07 Team

// ─────────────────────────────────────────────────────────────────
// 01 — HERO
// ─────────────────────────────────────────────────────────────────
function HomeHero() {
  const ref = useRef(null);
  const [tick, setTick] = useState(0);

  // Mouse parallax for the orbital backdrop
  useEffect(() => {
    const el = ref.current;
    if (!el) return;
    let raf;
    const onMove = (e) => {
      cancelAnimationFrame(raf);
      raf = requestAnimationFrame(() => {
        const x = e.clientX / window.innerWidth - 0.5;
        const y = e.clientY / window.innerHeight - 0.5;
        el.style.setProperty('--mx', x);
        el.style.setProperty('--my', y);
      });
    };
    window.addEventListener('mousemove', onMove);
    return () => { window.removeEventListener('mousemove', onMove); cancelAnimationFrame(raf); };
  }, []);

  // Rotating word in the headline
  const rotators = ['science', 'discipline', 'craft', 'strategy'];
  useEffect(() => {
    const id = setInterval(() => setTick(t => t + 1), 2400);
    return () => clearInterval(id);
  }, []);
  const word = rotators[tick % rotators.length];

  return (
    <section id="top" className="hero" ref={ref} style={{ '--mx': 0, '--my': 0 }}>
      <div className="hero-bg" aria-hidden>
        <svg width="100%" height="100%" viewBox="0 0 1600 1000" preserveAspectRatio="xMidYMid slice" style={{ position: 'absolute', inset: 0 }}>
          <defs>
            <radialGradient id="glow" cx="50%" cy="60%" r="50%">
              <stop offset="0%" stopColor="#2347E8" stopOpacity="0.5"/>
              <stop offset="60%" stopColor="#2347E8" stopOpacity="0.05"/>
              <stop offset="100%" stopColor="#2347E8" stopOpacity="0"/>
            </radialGradient>
          </defs>
          <rect width="1600" height="1000" fill="url(#glow)" style={{ transform: 'translate(calc(var(--mx) * 40px), calc(var(--my) * 40px))', transition: 'transform 0.6s' }}/>

          {/* concentric orbits */}
          <g style={{ transformOrigin: '800px 1100px' }} className="hero-orbits">
            {[0,1,2,3,4,5,6,7].map(i => (
              <ellipse key={i} cx="800" cy="1100" rx={400 + i*120} ry={120 + i*40} fill="none" stroke="rgba(242,239,232,0.07)" strokeWidth="1"/>
            ))}
          </g>

          {/* rotating tick marks ring */}
          <g className="hero-ticks" style={{ transformOrigin: '800px 1100px' }}>
            {Array.from({length: 60}).map((_, i) => {
              const a = (i / 60) * Math.PI * 2;
              const r1 = 480, r2 = 504;
              const x1 = 800 + Math.cos(a) * r1, y1 = 1100 + Math.sin(a) * r1;
              const x2 = 800 + Math.cos(a) * r2, y2 = 1100 + Math.sin(a) * r2;
              return <line key={i} x1={x1} y1={y1} x2={x2} y2={y2} stroke="rgba(242,239,232,0.18)" strokeWidth="1"/>;
            })}
          </g>

          {/* counter-rotating outer ring */}
          <g className="hero-ticks-outer" style={{ transformOrigin: '800px 1100px' }}>
            {Array.from({length: 120}).map((_, i) => {
              const a = (i / 120) * Math.PI * 2;
              const r1 = 720, r2 = 730;
              const x1 = 800 + Math.cos(a) * r1, y1 = 1100 + Math.sin(a) * r1;
              const x2 = 800 + Math.cos(a) * r2, y2 = 1100 + Math.sin(a) * r2;
              return <line key={i} x1={x1} y1={y1} x2={x2} y2={y2} stroke="rgba(85,117,255,0.2)" strokeWidth="1"/>;
            })}
          </g>

          {/* drifting particles */}
          {Array.from({length: 18}).map((_, i) => {
            const a = (i / 18) * Math.PI * 2;
            const r = 540 + (i % 3) * 60;
            const cx = 800 + Math.cos(a) * r;
            const cy = 1100 + Math.sin(a) * r;
            return <circle key={i} cx={cx} cy={cy} r={1.5 + (i % 3) * 0.6} fill="rgba(242,239,232,0.5)" className="hero-spark" style={{ animationDelay: `${i * 0.3}s` }}/>;
          })}
        </svg>
      </div>

      <div className="hero-content">
        <div className="hero-eyebrow-row">
          <span className="hero-tag-dot"/>
          <span className="eyebrow eyebrow-light">The Strategy Division — est. 2014</span>
          <span className="eyebrow eyebrow-light hero-status">● Currently building 2026 programs</span>
        </div>

        <h1 className="display-xl hero-title">
          <span className="hero-line">Victory</span>
          <span className="hero-line">is a <span key={word} className="hero-rotator">{word}</span>,</span>
          <span className="hero-line">not a coincidence.</span>
        </h1>

        <div className="hero-meta">
          <p className="body-lg" style={{ maxWidth: 540, opacity: 0.8 }}>
            An award-winning Democratic political consultancy known for its expertise, honesty, and creativity — across strategy, direct mail, and digital.
          </p>
          <div style={{ display: 'flex', gap: 16, alignItems: 'center', flexWrap: 'wrap' }}>
            <a href="#disciplines" className="btn btn-light btn-arrow">See what we do</a>
            <a href="#contact" className="btn btn-arrow" style={{ color: 'var(--paper)', border: '1px solid var(--paper-on-ink-30)' }}>Contact today</a>
          </div>
        </div>

        <div className="hero-stats">
          {[
            { k: '60+', v: 'Years combined experience' },
            { k: '20+', v: 'National awards' },
            { k: '4', v: 'Offices across the country' },
            { k: '2026', v: 'Reed Award winner' }
          ].map((s, i) => (
            <div key={i} className="hero-stat" style={{ animationDelay: `${0.6 + i * 0.12}s` }}>
              <div className="hero-stat-num">{s.k}</div>
              <div className="eyebrow eyebrow-light" style={{ marginTop: 10 }}>{s.v}</div>
            </div>
          ))}
        </div>
      </div>

    </section>
  );
}

// ─────────────────────────────────────────────────────────────────
// 02 — FIVE DISCIPLINES
// ─────────────────────────────────────────────────────────────────
function HomeDisciplines() {
  const items = [
    { num: '01', title: 'Strategy',  body: 'Campaign plans, win models, budget.' },
    { num: '02', title: 'Creative',  body: 'Hard-hitting mail & video, in-house.' },
    { num: '03', title: 'Targeting', body: 'Precision voter modeling at scale.' },
    { num: '04', title: 'Buying',    body: 'Unified DSP. Dedup reach. Every screen.' },
    { num: '05', title: 'Reporting', body: 'Viewability, completion, optimization.' }
  ];
  return (
    <section id="disciplines" className="section">
      <div className="shell">
        <Reveal>
          <SectionIntro
            num="02"
            kicker="What We Do"
            sub="One coordinated operating system — from $200K legislative races to $30M+ Senate IE programs."
          />
        </Reveal>

        <div className="disciplines-bold">
          {items.map((it, i) => (
            <Reveal key={i} delay={i*80} className="discipline-bold-row">
              <div className="discipline-bold-num">{it.num}</div>
              <div className="discipline-bold-title">{it.title}</div>
              <div className="discipline-bold-body">{it.body}</div>
              <div className="discipline-bold-arrow">→</div>
            </Reveal>
          ))}
        </div>
      </div>
    </section>
  );
}

// ─────────────────────────────────────────────────────────────────
// 03 — WHAT WE DO: Digital + Mail (carousel-style showcases)
// ─────────────────────────────────────────────────────────────────
function DigitalCarousel() {
  const D = window.TSD_DATA;
  // Featured 4 (per client direction): Latina, Dina Titus, WIN/GANA, Colorado United — with real thumbnails.
  const featured = [
    { slug: 'latina-initiative', client: 'Latina Initiative', race: 'Colorado Latina Civic Engagement', year: '2026',
      video: { title: 'Vote.', length: ':30', id: 'latina-vote' },
      thumb: 'assets/digital/latina-initiative.avif' },
    { slug: 'dina-titus', client: 'Rep. Dina Titus', race: 'NV-01 — U.S. House', year: '2024',
      video: { title: '$4.5 Billion', length: ':30', id: 'titus-relief' },
      thumb: 'assets/digital/dina-titus.avif' },
    { slug: 'win-gana', client: 'WIN / GANA PAC', race: 'Nevada State Legislature', year: '2024',
      video: { title: 'Vote Rochelle Nguyen', length: ':30', id: 'win-gana-nguyen' },
      thumb: 'assets/digital/win-gana.png' },
    { slug: 'colorado-united', client: 'Colorado United', race: 'Local PAC', year: '2024',
      video: { title: 'Boebert — Casper Rally', length: ':30', id: 'co-united-boebert' },
      thumb: 'assets/digital/co-united.png' }
  ];
  // A couple more case studies after the featured set (placeholder thumbnails via vumbnail)
  const extraSlugs = ['alexis-rinck', 'our-future-united', 'pete-aguilar'];
  const extras = extraSlugs.map(s => {
    const c = D.cases.find(x => x.slug === s);
    return c ? { ...c, video: c.videos[0] } : null;
  }).filter(Boolean);
  const items = [...featured, ...extras];
  const [idx, setIdx] = useState(0);
  const trackRef = useRef(null);

  const go = (delta) => {
    setIdx(prev => Math.max(0, Math.min(items.length - 1, prev + delta)));
  };

  return (
    <div className="showcase">
      <div className="showcase-head">
        <div>
          <div className="eyebrow">Digital</div>
          <div className="showcase-title">Hard-hitting video, end-to-end.</div>
        </div>
        <div className="showcase-controls">
          <div className="showcase-counter">{String(idx+1).padStart(2,'0')} / {String(items.length).padStart(2,'0')}</div>
          <button className="showcase-btn" onClick={() => go(-1)} disabled={idx === 0} aria-label="Previous">←</button>
          <button className="showcase-btn" onClick={() => go(1)}  disabled={idx === items.length - 1} aria-label="Next">→</button>
        </div>
      </div>

      <div className="showcase-viewport">
        <div className="showcase-track" ref={trackRef} style={{ transform: `translateX(calc(${-idx} * (66.66% + 24px)))` }}>
          {items.map((it, i) => (
            <div key={it.slug} className="showcase-slide showcase-slide-video">
              <div className="showcase-media">
                <img loading="lazy" src={it.thumb || `https://vumbnail.com/${it.video.id}.jpg`} alt={it.client} onError={(e) => { e.target.style.display = 'none'; }}/>
                <div className="showcase-overlay"/>
                <div className="showcase-play">
                  <svg width="14" height="16" viewBox="0 0 14 16" fill="none"><path d="M0 0 L14 8 L0 16 Z" fill="currentColor"/></svg>
                </div>
                <div className="showcase-meta-bottom">
                  <span>▶ {it.video.title} · {it.video.length}</span>
                </div>
              </div>
              <div className="showcase-caption">
                <div className="showcase-caption-client">{it.client}</div>
                <div className="showcase-caption-race">{it.race} · {it.year}</div>
              </div>
            </div>
          ))}
        </div>
      </div>
    </div>
  );
}

function MailCarousel() {
  const D = window.TSD_DATA;
  // Front three: Garcia, Calvarese, Hancock — with real artwork.
  const featured = [
    { client: 'Kathryn Garcia', race: 'NYC Mayor', year: '2021',
      pieceId: 'garcia-nyt-endorse',
      image: 'assets/mail/garcia-nyt.webp' },
    { client: 'Trisha Calvarese', race: 'CO-04 — U.S. House', year: '2024',
      pieceId: 'calvarese-keepout',
      image: 'assets/mail/calvarese-keepout.webp' },
    { client: 'Michael Hancock', race: 'Denver Mayor', year: '2015',
      pieceId: 'hancock-mydenver',
      image: 'assets/mail/hancock-mydenver.webp' }
  ];
  // Remaining placeholder items, rolling on the rest of the carousel
  const rest = [];
  ['cisco-aguilar', 'kathryn-garcia', 'trisha-calvarese'].forEach(s => {
    const c = D.cases.find(x => x.slug === s);
    if (!c) return;
    const count = Math.min(2, c.pieces || 2);
    for (let i = 0; i < count; i++) {
      rest.push({ slug: c.slug, client: c.client, race: c.race, year: c.year, pieceId: `${c.slug}-${i+2}`, idx: i });
    }
  });
  const items = [...featured, ...rest];
  const [idx, setIdx] = useState(0);
  const go = (delta) => setIdx(prev => Math.max(0, Math.min(items.length - 1, prev + delta)));

  return (
    <div className="showcase">
      <div className="showcase-head">
        <div>
          <div className="eyebrow">Direct Mail</div>
          <div className="showcase-title">Mail that earns the trip from the box.</div>
        </div>
        <div className="showcase-controls">
          <div className="showcase-counter">{String(idx+1).padStart(2,'0')} / {String(items.length).padStart(2,'0')}</div>
          <button className="showcase-btn" onClick={() => go(-1)} disabled={idx === 0} aria-label="Previous">←</button>
          <button className="showcase-btn" onClick={() => go(1)}  disabled={idx === items.length - 1} aria-label="Next">→</button>
        </div>
      </div>

      <div className="showcase-viewport">
        <div className="showcase-track" style={{ transform: `translateX(calc(${-idx} * (33.33% + 24px)))` }}>
          {items.map((it, i) => (
            <div key={it.pieceId} className="showcase-slide showcase-slide-mail">
              <div className="showcase-media showcase-media-mail">
                {it.image ? (
                  <img loading="lazy" src={it.image} alt={`${it.client} — direct mail`} style={{ width: '100%', height: '100%', objectFit: 'cover' }}/>
                ) : (
                  <MailPlaceholder piece={{ id: it.pieceId, client: it.client, race: it.race }} idx={i}/>
                )}
              </div>
              <div className="showcase-caption">
                <div className="showcase-caption-client">{it.client}</div>
                <div className="showcase-caption-race">{it.race} · {it.year}</div>
              </div>
            </div>
          ))}
        </div>
      </div>
    </div>
  );
}

function HomeShowcase() {
  return (
    <section id="showcase" className="section section-paper-warm">
      <div className="shell">
        <Reveal>
          <SectionIntro
            num="03"
            kicker="Showcase"
            title={<>A showcase of our award-winning direct mail and digital video campaigns.</>}
            sub="Use the arrows to step through recent work."
          />
        </Reveal>

        <div style={{ display: 'flex', flexDirection: 'column', gap: 80 }}>
          <Reveal><DigitalCarousel/></Reveal>
          <Reveal><MailCarousel/></Reveal>
        </div>
      </div>
    </section>
  );
}

// ─────────────────────────────────────────────────────────────────
// 04 — WHERE WE'VE WORKED (map only, condensed)
// ─────────────────────────────────────────────────────────────────
function HomeMap() {
  return (
    <section id="map" className="section">
      <div className="shell">
        <Reveal>
          <SectionIntro
            num="04"
            kicker="Where We've Worked"
            title={<>Coast to coast — and then some.</>}
            sub="Hover any state to see the programs we've run there."
            compact
          />
        </Reveal>
        <Reveal>
          <CompactMap/>
        </Reveal>
      </div>
    </section>
  );
}

// ─────────────────────────────────────────────────────────────────
// 05 — CASE STUDIES (condensed grid)
// ─────────────────────────────────────────────────────────────────
function HomeCases() {
  const D = window.TSD_DATA;
  const featured = ['kathryn-garcia', 'latina-initiative', 'trisha-calvarese', 'alexis-rinck', 'cisco-aguilar', 'our-future-united', 'win-gana', 'dina-titus', 'pete-aguilar']
    .map(s => D.cases.find(c => c.slug === s));

  return (
    <section id="cases" className="section section-paper-warm">
      <div className="shell">
        <Reveal>
          <SectionIntro
            num="05"
            kicker="Case Studies"
            title={<>Click into any case study to read more about what we did for our clients.</>}
            compact
          />
        </Reveal>

        <div className="case-grid-tight">
          {featured.map((c, i) => (
            <Reveal key={c.slug} delay={i*30} className="case-tile-tight">
              <Link to={`/work/${c.slug}`}>
                <div className="case-tile-tight-media">
                  {c.mediaKind === 'mail' ? (
                    <MailPlaceholder piece={{ id: c.slug, client: c.client, race: c.race }} idx={i} />
                  ) : (
                    <div style={{ position: 'relative', width: '100%', height: '100%', background: 'var(--ink)', overflow: 'hidden' }}>
                      <img loading="lazy" src={`https://vumbnail.com/${c.videos[0].id}.jpg`} alt={c.client} style={{ width: '100%', height: '100%', objectFit: 'cover', opacity: 0.9 }}
                        onError={(e) => { e.target.style.display = 'none'; }}/>
                      <div style={{ position: 'absolute', inset: 0, background: 'linear-gradient(180deg, transparent 40%, rgba(14,14,18,0.55) 100%)' }}/>
                    </div>
                  )}
                  <div className="case-tile-tight-hover">
                    <div className="case-tile-tight-client">{c.client}</div>
                    <div className="case-tile-tight-race">{c.race} · {c.year} →</div>
                  </div>
                </div>
              </Link>
            </Reveal>
          ))}
        </div>
      </div>
    </section>
  );
}

// ─────────────────────────────────────────────────────────────────
// 06 — TESTIMONIALS + AWARDS
// ─────────────────────────────────────────────────────────────────
function AwardsCarousel() {
  const awards = [
    { year: '2026', title: 'Reed Award',   sub: 'Best Spanish-Language Ad — Latina Initiative' },
    { year: '2024', title: 'Pollie Award', sub: 'Best Direct Mail — Calvarese for Congress' },
    { year: '2024', title: 'Reed Award',   sub: 'Best IE — Our Future United' },
    { year: '2022', title: 'Pollie Award', sub: 'Best Statewide Mail — Cisco Aguilar' },
    { year: '2021', title: 'Reed Award',   sub: 'Best Mayoral Mail — Kathryn Garcia, NYC' },
    { year: '2019', title: 'Pollie Award', sub: 'Best Use of Digital — Dawn Smalls' }
  ];
  const [active, setActive] = useState(0);
  useEffect(() => {
    const id = setInterval(() => setActive(a => (a + 1) % awards.length), 2600);
    return () => clearInterval(id);
  }, [awards.length]);

  return (
    <div className="awards-3d">
      <div className="awards-stage">
        {awards.map((a, i) => {
          const offset = i - active;
          const total = awards.length;
          // wrap to shortest path
          let rel = offset;
          if (rel > total / 2) rel -= total;
          if (rel < -total / 2) rel += total;
          const isActive = rel === 0;
          const x = rel * 130;
          const z = -Math.abs(rel) * 180;
          const rotY = rel * -22;
          const opacity = Math.max(0, 1 - Math.abs(rel) * 0.32);
          return (
            <button
              key={i}
              className={`award-medal ${isActive ? 'is-active' : ''}`}
              onClick={() => setActive(i)}
              style={{
                transform: `translate(-50%, -50%) translate3d(${x}px, 0, ${z}px) rotateY(${rotY}deg)`,
                opacity,
                zIndex: 100 - Math.abs(rel)
              }}
              aria-label={`${a.title} ${a.year}`}
            >
              <svg viewBox="0 0 120 140" width="100%" height="100%">
                <defs>
                  <linearGradient id={`mg${i}`} x1="0" y1="0" x2="1" y2="1">
                    <stop offset="0%" stopColor="#F5C147"/>
                    <stop offset="50%" stopColor="#E8923E"/>
                    <stop offset="100%" stopColor="#A86A1F"/>
                  </linearGradient>
                </defs>
                {/* ribbon */}
                <path d="M40 0 L60 50 L80 0 Z" fill="#7A1F1F"/>
                <path d="M50 0 L60 50 L70 0 Z" fill="#5A1414"/>
                {/* medal disc */}
                <circle cx="60" cy="92" r="42" fill={`url(#mg${i})`} stroke="#5A3D0F" strokeWidth="1.5"/>
                <circle cx="60" cy="92" r="34" fill="none" stroke="rgba(0,0,0,0.18)" strokeWidth="0.8"/>
                {/* star */}
                <path d="M60 70 L64 84 L78 84 L67 92 L71 106 L60 98 L49 106 L53 92 L42 84 L56 84 Z" fill="#5A3D0F" opacity="0.55"/>
                <text x="60" y="118" fontFamily="JetBrains Mono, monospace" fontSize="9" fontWeight="600" fill="#5A3D0F" textAnchor="middle" letterSpacing="0.5">{a.year}</text>
              </svg>
            </button>
          );
        })}
      </div>
      <div className="awards-stage-info">
        <div className="awards-stage-year">{awards[active].year}</div>
        <div className="awards-stage-title">{awards[active].title}</div>
        <div className="awards-stage-sub">{awards[active].sub}</div>
        <div className="awards-stage-counter">
          {String(active + 1).padStart(2,'0')} / {String(awards.length).padStart(2,'0')}
          <span className="awards-stage-dots">
            {awards.map((_, i) => (
              <button key={i} onClick={() => setActive(i)} className={`awards-dot ${i === active ? 'is-active' : ''}`} aria-label={`Award ${i+1}`}/>
            ))}
          </span>
        </div>
      </div>
    </div>
  );
}

function HomeTestimonialsAwards() {
  const T = window.TSD_DATA.testimonials;

  return (
    <section id="testimonials" className="section section-ink">
      <div className="shell">
        <Reveal>
          <SectionIntro
            num="06"
            kicker="Testimonials & Awards"
            sub="Words from candidates we've worked with — and a partial list of national awards."
            light
          />
        </Reveal>

        {/* Testimonials — uniform grid, 2x2 */}
        <div className="quote-grid">
          {T.map((t, i) => (
            <Reveal key={i} delay={i*80} className="quote-card">
              <div className="quote-mark">"</div>
              <p className="quote-text">{t.quote}</p>
              <div className="quote-attr">— {t.attr}</div>
            </Reveal>
          ))}
        </div>

        <div className="awards-divider"/>

        <div className="awards-head">
          <div className="eyebrow eyebrow-light">Awards · A partial list</div>
        </div>

        <Reveal>
          <AwardsCarousel/>
        </Reveal>
      </div>
    </section>
  );
}

// ─────────────────────────────────────────────────────────────────
// 07 — TEAM
// ─────────────────────────────────────────────────────────────────
function HomeTeam() {
  const team = window.TSD_DATA.team;
  return (
    <section id="team" className="section">
      <div className="shell">
        <Reveal>
          <SectionIntro
            num="07"
            kicker="Our Team"
            sub="People you want in your war room."
          />
        </Reveal>

        <div className="team-grid-home">
          {team.map((m, i) => (
            <Reveal key={m.slug} delay={i*40} className="team-card">
              <Link to={`/team/${m.slug}`}>
                <div className="team-card-photo">
                  <img loading="lazy" src={m.img} alt={m.name} onError={(e) => { e.target.style.display = 'none'; }}/>
                </div>
                <div className="team-card-info">
                  <div className="team-card-name">{m.name}</div>
                  <div className="team-card-title">{m.title}</div>
                </div>
              </Link>
            </Reveal>
          ))}
        </div>
      </div>
    </section>
  );
}

// ─────────────────────────────────────────────────────────────────
// CONTACT (final CTA)
// ─────────────────────────────────────────────────────────────────
function HomeContact() {
  return (
    <section id="contact" style={{ padding: '140px var(--gutter)', background: 'var(--ink)', color: 'var(--paper)' }}>
      <div className="shell" style={{ textAlign: 'center' }}>
        <Reveal><div className="eyebrow eyebrow-light">Get in touch</div></Reveal>
        <Reveal delay={100}>
          <h2 className="display-xl" style={{ marginTop: 24, fontStyle: 'italic' }}>Let's win.</h2>
        </Reveal>
        <Reveal delay={200}>
          <a href="mailto:hello@thestrategydivision.com" className="btn btn-light btn-arrow" style={{ marginTop: 48 }}>Contact today</a>
        </Reveal>
        <Reveal delay={300}>
          <div style={{ marginTop: 32, fontFamily: 'var(--font-mono)', fontSize: 13, letterSpacing: '0.12em', textTransform: 'uppercase', color: 'var(--paper-on-ink-60)' }}>
            hello@thestrategydivision.com
          </div>
        </Reveal>
      </div>
    </section>
  );
}

// ─────────────────────────────────────────────────────────────────
// HOMEPAGE — all sections in order
// ─────────────────────────────────────────────────────────────────
function HomePage() {
  return (
    <>
      <Nav darkInitial={true} />
      <HomeHero />
      <HomeDisciplines />
      <HomeShowcase />
      <HomeMap />
      <HomeCases />
      <HomeTestimonialsAwards />
      <HomeTeam />
      <HomeContact />
      <Footer />
    </>
  );
}

Object.assign(window, { HomePage });