// Home page
const { motion, useScroll, useTransform, AnimatePresence } = Motion;
const EASE = [0.22, 1, 0.36, 1];

// ─── Hero ────────────────────────────────────────────────────────────────────
const HomeHero = () => {
  const { scrollY } = useScroll();
  const imgY = useTransform(scrollY, [0, 700], ['0%', '14%']);
  return (
  <section className="relative min-h-[100svh] overflow-hidden flex items-end pb-20 sm:pb-36 force-dark-palette">
    <div className="absolute inset-0 -z-10">
      <motion.div className="absolute inset-0 scale-[1.12]" style={{ y: imgY }}>
        <img
          src="/images/hero.jpg"
          alt="AMG luxury real estate development in Ludhiana, Punjab — Ashok Malhotra Group"
          className="absolute inset-0 w-full h-full object-cover"
        />
      </motion.div>
      <div className="absolute inset-0 bg-black/60" />
      <div className="absolute inset-0 grain" />
    </div>
    <div className="mx-auto max-w-[1320px] px-5 sm:px-8 w-full relative">
      <motion.div
        className="flex items-center justify-between mb-6 sm:mb-14"
        initial={{ opacity: 0, y: 14 }}
        animate={{ opacity: 1, y: 0 }}
        transition={{ duration: 0.6, delay: 0.05, ease: EASE }}
      >
        <Eyebrow>Ludhiana · Est. 1985</Eyebrow>
      </motion.div>
      <h1 className="text-[38px] sm:text-[64px] lg:text-[130px] leading-[0.94] tracking-tightest text-bone-50" style={{fontFamily:'var(--font-hero)'}}>
        <div style={{overflow:'hidden'}}>
          <motion.span className="block"
            initial={{ y: '108%' }} animate={{ y: 0 }}
            transition={{ duration: 0.9, delay: 0.18, ease: EASE }}
          >We Don't Sell Property.</motion.span>
        </div>
        <div style={{overflow:'hidden'}}>
          <motion.span className="block italic text-accent-soft"
            initial={{ y: '108%' }} animate={{ y: 0 }}
            transition={{ duration: 0.9, delay: 0.32, ease: EASE }}
          >We Build Destinations.</motion.span>
        </div>
      </h1>
      <div className="mt-10 grid lg:grid-cols-12 gap-8 items-end">
        <motion.p className="lg:col-span-5 text-bone-50/65 text-[16px] leading-relaxed"
          initial={{ opacity: 0, y: 18 }} animate={{ opacity: 1, y: 0 }}
          transition={{ duration: 0.7, delay: 0.5, ease: EASE }}
        >
          High-growth commercial spaces. Premium living environments. Designed for investors, brands, and the future of Punjab.
        </motion.p>
        <motion.div className="lg:col-span-4 lg:col-start-9 flex flex-wrap gap-3"
          initial={{ opacity: 0, y: 18 }} animate={{ opacity: 1, y: 0 }}
          transition={{ duration: 0.7, delay: 0.62, ease: EASE }}
        >
          <PrimaryButton data-track="hero-explore-commercial" onClick={() => window.__setPage('commercial')}>
            Explore Commercial
          </PrimaryButton>
          <GhostButton data-track="hero-explore-residential" onClick={() => window.__setPage('residential')}>
            Explore Residential
          </GhostButton>
        </motion.div>
      </div>
    </div>
  </section>
  );
};

// ─── Animated counter (counts up on scroll-into-view) ────────────────────────
const Counter = ({ to, suffix = '+', duration = 1600 }) => {
  const [val, setVal] = React.useState(0);
  const ref = React.useRef(null);
  React.useEffect(() => {
    const el = ref.current; if (!el) return;
    let started = false;
    const io = new IntersectionObserver((entries) => {
      entries.forEach((e) => {
        if (e.isIntersecting && !started) {
          started = true;
          const start = performance.now();
          const tick = (now) => {
            const t = Math.min(1, (now - start) / duration);
            const eased = 1 - Math.pow(1 - t, 3);
            setVal(Math.round(to * eased));
            if (t < 1) requestAnimationFrame(tick);
          };
          requestAnimationFrame(tick);
        }
      });
    }, { threshold: 0.4 });
    io.observe(el);
    return () => io.disconnect();
  }, [to, duration]);
  const fmt = val >= 1000000 ? `${(val/1000000).toFixed(1).replace(/\.0$/,'')}M`
            : val >= 1000    ? `${(val/1000).toFixed(val>=10000?0:1).replace(/\.0$/,'')}K`
            : val.toString();
  return <span ref={ref}>{fmt}{suffix}</span>;
};

// ─── Featured Projects ────────────────────────────────────────────────────────
const FeaturedProjects = ({ setPage }) => (
  <section className="py-16 sm:py-28 bg-ink-900/30 border-t border-bone-50/10">
    <div className="mx-auto max-w-[1320px] px-5 sm:px-8">
      <div className="flex items-end justify-between flex-wrap gap-6 mb-14 reveal">
        <SectionTitle kicker="Selected Work" title={<>A portfolio composed<br/>like a city block.</>} />
        <div className="flex gap-3">
          <button onClick={() => setPage('commercial')} data-track="featured-view-commercial" className="ulink text-[13px] tracking-wide text-bone-50/80">Commercial →</button>
        </div>
      </div>
      <div className="grid grid-cols-12 gap-4">
        {/* Palm Marina — large */}
        <motion.div className="col-span-12 lg:col-span-7 cursor-pointer"
          initial={{ opacity: 0, x: -40 }} whileInView={{ opacity: 1, x: 0 }}
          viewport={{ once: true, amount: 0.15 }} transition={{ duration: 0.75, ease: EASE }}
          whileHover={{ y: -4, transition: { type: 'spring', stiffness: 260, damping: 22 } }}
          onClick={() => { setPage('palm-marina'); window.scrollTo(0,0); }} data-track="home-feature-palm-marina"
        >
          <div className="overflow-hidden rounded-3xl">
            <motion.img src="/images/palm-marina-2.jpg" alt="Palm Marina luxury commercial mall on Canal Road, South City, Ludhiana"
              className="aspect-[16/10] w-full object-cover border border-bone-50/10"
              whileHover={{ scale: 1.05 }} transition={{ duration: 0.55, ease: EASE }}
            />
          </div>
          <div className="mt-5 flex items-end justify-between">
            <div>
              <div className="font-display text-[28px]">Palm Marina</div>
              <div className="text-[12px] uppercase tracking-[0.22em] text-bone-50/50 mt-1">The Crown of Ludhiana</div>
            </div>
          </div>
        </motion.div>
        {/* One AMG — smaller */}
        <motion.div className="col-span-12 lg:col-span-5 cursor-pointer"
          initial={{ opacity: 0, x: 40 }} whileInView={{ opacity: 1, x: 0 }}
          viewport={{ once: true, amount: 0.15 }} transition={{ duration: 0.75, delay: 0.1, ease: EASE }}
          whileHover={{ y: -4, transition: { type: 'spring', stiffness: 260, damping: 22 } }}
          onClick={() => { setPage('one-amg'); window.scrollTo(0,0); }} data-track="home-feature-one-amg"
        >
          <div className="overflow-hidden rounded-3xl">
            <motion.img src="/images/one-amg.jpg" alt="One AMG neighbourhood commercial hub in Dugri, Ludhiana"
              className="aspect-[16/10] w-full object-cover border border-bone-50/10"
              whileHover={{ scale: 1.05 }} transition={{ duration: 0.55, ease: EASE }}
            />
          </div>
          <div className="mt-5">
            <div className="font-display text-[24px]">One AMG</div>
            <div className="text-[12px] uppercase tracking-[0.22em] text-bone-50/50 mt-1">Your Neighborhood Mall</div>
          </div>
        </motion.div>
        {/* Residential sub-header */}
        <motion.div className="col-span-12 flex items-end justify-between flex-wrap gap-6 mt-10"
          initial={{ opacity: 0, y: 20 }} whileInView={{ opacity: 1, y: 0 }}
          viewport={{ once: true, amount: 0.3 }} transition={{ duration: 0.6, ease: EASE }}
        >
          <SectionTitle kicker="Residential" title={<>Homes composed for the long view.</>} />
          <button onClick={() => setPage('residential')} data-track="featured-view-residential" className="ulink text-[13px] tracking-wide text-bone-50/80">Residential →</button>
        </motion.div>
        {/* 3 residential cards — staggered */}
        {[
          { id:'palm-garden',    img:'/images/palm-garden-03.jpg',   cls:'',                          title:'Palm Garden',    sub:'Sahnewal, Ludhiana' },
          { id:'palm-city-ph-ii',img:'/images/palm-city-ph-ii.jpg',cls:'img-home-palm-city-ph-ii',  title:'Palm City Ph II',sub:'Residential Township' },
          { id:'maurya-greens',  img:'/images/maurya-greens.jpg',  cls:'img-home-maurya-greens',     title:'Maurya Greens',  sub:'Luxury Township' },
        ].map((c, i) => (
          <motion.div key={c.id} className="col-span-12 lg:col-span-4 cursor-pointer"
            initial={{ opacity: 0, y: 40 }} whileInView={{ opacity: 1, y: 0 }}
            viewport={{ once: true, amount: 0.15 }} transition={{ duration: 0.65, delay: i * 0.11, ease: EASE }}
            whileHover={{ y: -4, transition: { type: 'spring', stiffness: 260, damping: 22 } }}
            onClick={() => { setPage(c.id); window.scrollTo(0,0); }} data-track={`home-feature-${c.id}`}
          >
            <div className="overflow-hidden rounded-3xl">
              <motion.img src={c.img} alt={c.title}
                className={`${c.cls} aspect-[16/10] w-full object-cover border border-bone-50/10`}
                whileHover={{ scale: 1.05 }} transition={{ duration: 0.55, ease: EASE }}
              />
            </div>
            <div className="mt-5">
              <div className="font-display text-[24px]">{c.title}</div>
              <div className="text-[12px] uppercase tracking-[0.22em] text-bone-50/50 mt-1">{c.sub}</div>
            </div>
          </motion.div>
        ))}
      </div>
    </div>
  </section>
);

// ─── Legacy Banner ───────────────────────────────────────────────────────────
const LegacyBanner = ({ setPage }) => (
  <section className="relative py-16 sm:py-28 overflow-hidden border-t border-bone-50/10">
    <div className="pointer-events-none absolute -left-32 top-1/2 -translate-y-1/2 w-[560px] h-[560px] rounded-full bg-accent/[0.07] blur-[110px]" />
    <div className="absolute inset-0 grain opacity-40 pointer-events-none" />
    <div className="mx-auto max-w-[1320px] px-5 sm:px-8 relative">
      <div className="grid lg:grid-cols-2 gap-12 lg:gap-24 items-center">
        <div className="reveal-scale relative">
          <div className="pointer-events-none absolute -top-6 -left-2 flex gap-1.5 opacity-20">
            {[...Array(5)].map((_, r) => (
              <div key={r} className="flex flex-col gap-1.5">
                {[...Array(8)].map((_, c) => (
                  <div key={c} className="h-1.5 w-1.5 rounded-full bg-accent" style={{opacity: 1 - (r + c) * 0.07}}/>
                ))}
              </div>
            ))}
          </div>
          <div className="relative">
            <div className="font-display text-[48px] sm:text-[100px] lg:text-[160px] leading-[0.88] tracking-tightest text-bone-50">
              <Counter to={40} suffix="" duration={1400} />
            </div>
            <div className="mt-2 font-display italic text-[30px] sm:text-[40px] leading-none text-accent-soft">
              years of legacy
            </div>
            <div className="mt-8 h-px w-20 bg-accent/50" />
          </div>
        </div>
        <div className="flex flex-col gap-5">
          <div className="reveal"><Eyebrow>The Group · Since 1985</Eyebrow></div>
          <p className="reveal text-bone-50/70 text-[16px] leading-relaxed" style={{transitionDelay:'60ms'}}>
            Ashok Malhotra Group (AMG) is a renowned &amp; one of the oldest groups engaged in the real estate sector, dedicated to creating world-class commercial and residential projects, multiplexes, and shopping malls.
          </p>
          <p className="reveal text-bone-50/70 text-[16px] leading-relaxed" style={{transitionDelay:'120ms'}}>
            Founded by the visionary Mr. Ashok Malhotra, AMG has been at the forefront of shaping the real estate of Punjab for over four decades — built on a legacy of trust, innovation, and unwavering commitment to quality.
          </p>
          <div className="reveal mt-4" style={{transitionDelay:'180ms'}}>
            <PrimaryButton onClick={() => setPage('about')} data-track="legacy-our-story">
              Our Story
            </PrimaryButton>
          </div>
        </div>
      </div>
    </div>
  </section>
);

// ─── Why Invest with AMG ─────────────────────────────────────────────────────
const WHY_INVEST = [
  { icon: 'MapPin',     title: 'Strategic Locations Only',    body: 'We build in micro-markets with proven growth potential — every site chosen after deep local research.' },
  { icon: 'Building',   title: 'Designed for Business',       body: 'Every space is optimized for visibility, accessibility, and maximum footfall from day one.' },
  { icon: 'Tag',        title: 'Brand-Oriented Development',  body: 'We attract established brands, not just buyers — ensuring your investment sits in a curated tenant mix.' },
  { icon: 'TrendingUp', title: 'Data-Driven Decisions',       body: 'Every project is backed by market research and feasibility — not assumptions or gut feel.' },
];

const WhyInvest = () => (
  <section className="py-16 sm:py-28 border-t border-bone-50/10">
    <div className="mx-auto max-w-[1320px] px-5 sm:px-8">
      <div className="reveal mb-14">
        <SectionTitle
          kicker="Why Invest with AMG"
          title={<>Built for Investors Who<br/><span className="italic text-accent-soft">Think Long-Term.</span></>}
        />
      </div>
      <div className="grid sm:grid-cols-2 lg:grid-cols-4 gap-4">
        {WHY_INVEST.map((w, i) => {
          const Ic = Icon[w.icon] || Icon.Sparkles;
          return (
            <div key={w.title} className="rounded-3xl border border-bone-50/10 p-7 hover:border-accent/40 hover:bg-bone-50/[0.03] transition reveal" style={{transitionDelay:`${i*90}ms`}}>
              <div className="flex items-center justify-between mb-8">
                <div className="h-10 w-10 rounded-2xl bg-accent/10 grid place-items-center text-accent">
                  <Ic size={18}/>
                </div>
                <div className="text-[10px] uppercase tracking-[0.22em] text-bone-50/30">0{i+1}</div>
              </div>
              <div className="font-display text-[22px] leading-tight mb-3">{w.title}</div>
              <p className="text-bone-50/55 text-[13.5px] leading-relaxed">{w.body}</p>
            </div>
          );
        })}
      </div>
    </div>
  </section>
);

// ─── By the Numbers ──────────────────────────────────────────────────────────
const BY_THE_NUMBERS = [
  { to: 4900000, suffix: '+', label: 'Sq Ft Developed',    icon: 'Building',    sub: 'Across residential and commercial projects delivered in Punjab.' },
  { to: 10000,   suffix: '+', label: 'Investor Families',  icon: 'Users',       sub: 'Families who have trusted an AMG address since 1985.' },
  { to: 200,     suffix: '+', label: 'Commercial Units',   icon: 'ShoppingBag', sub: 'Shops, offices, and F&B spaces across our portfolio.' },
  { to: 120,     suffix: '+', label: 'Partner Brands',     icon: 'Tag',         sub: 'National and regional brands that chose AMG destinations.' },
];

const ByTheNumbers = () => (
  <section className="py-16 sm:py-28 bg-ink-900/30 border-t border-bone-50/10">
    <div className="mx-auto max-w-[1320px] px-5 sm:px-8">
      <div className="reveal mb-14">
        <SectionTitle
          kicker="Trust Builder"
          title={<>By the <span className="italic text-accent-soft">Numbers.</span></>}
        />
      </div>
      <div className="grid sm:grid-cols-2 lg:grid-cols-4 gap-px bg-bone-50/10 rounded-3xl overflow-hidden">
        {BY_THE_NUMBERS.map((n, i) => {
          const Ic = Icon[n.icon] || Icon.Sparkles;
          return (
            <div key={n.label} className="bg-ink-950 p-8 sm:p-10 reveal relative group overflow-hidden" style={{transitionDelay:`${i*90}ms`}}>
              <div className="absolute -top-12 -right-12 w-48 h-48 rounded-full bg-accent/[0.04] blur-2xl opacity-0 group-hover:opacity-100 transition duration-700"/>
              <div className="flex items-center justify-between mb-8">
                <div className="text-accent/70"><Ic size={18}/></div>
                <div className="text-[10px] uppercase tracking-[0.22em] text-bone-50/30">0{i+1}</div>
              </div>
              <div className="font-display text-[52px] sm:text-[80px] leading-[0.92] tracking-tightest text-bone-50">
                <Counter to={n.to} suffix={n.suffix} duration={1800}/>
              </div>
              <div className="mt-6 pt-6 border-t border-bone-50/10">
                <div className="text-[12px] uppercase tracking-[0.28em] text-accent-soft">{n.label}</div>
                <p className="mt-2 text-bone-50/50 text-[13px] leading-relaxed">{n.sub}</p>
              </div>
            </div>
          );
        })}
      </div>
    </div>
  </section>
);

// ─── Founder ─────────────────────────────────────────────────────────────────
const FounderSection = ({ setPage }) => (
  <section className="py-16 sm:py-28 border-t border-bone-50/10">
    <div className="mx-auto max-w-[1320px] px-5 sm:px-8">
      <div className="grid lg:grid-cols-12 gap-10 items-center">
        <div className="lg:col-span-4 reveal-left">
          <div className="relative rounded-3xl overflow-hidden border border-bone-50/10 aspect-[3/4]">
            <img src="/images/ashok-malhotra.jpg" alt="Ashok Malhotra, Founder and Chairman of Ashok Malhotra Group, Ludhiana" className="absolute inset-0 w-full h-full object-cover object-top"/>
            <div className="absolute inset-x-0 bottom-0 h-24" style={{ background: 'linear-gradient(to top, rgba(10,10,11,0.85), transparent)' }}/>
            <div className="absolute left-5 bottom-5 text-[10px] uppercase tracking-[0.22em] text-bone-50/70">Founder &amp; Chairman</div>
          </div>
        </div>
        <div className="lg:col-span-7 lg:col-start-6 space-y-6 reveal-right" style={{transitionDelay:'60ms'}}>
          <Eyebrow>Founder · Ashok Malhotra</Eyebrow>
          <h2 className="font-display text-[28px] sm:text-[48px] leading-[1.02] tracking-tightest mt-4">
            Led by Vision,<br/><span className="italic text-accent-soft">Not Just Execution.</span>
          </h2>
          <p className="text-bone-50/70 text-[16px] leading-relaxed">
            Ashok Malhotra has spent decades understanding what makes real estate truly valuable — not just in terms of price, but performance.
          </p>
          <p className="text-bone-50/55 text-[15px] leading-relaxed">
            His approach is simple: <span className="italic text-bone-50/80">Build spaces where businesses succeed, and investors win.</span>
          </p>
          <div className="flex flex-wrap gap-3 pt-2">
            <PrimaryButton onClick={() => setPage('ashok-malhotra')} data-track="founder-read-more">
              Meet Mr. Malhotra
            </PrimaryButton>
            <GhostButton onClick={() => setPage('about')} data-track="founder-our-story">
              Our Story
            </GhostButton>
          </div>
        </div>
      </div>
    </div>
  </section>
);

// ─── Experience: Your Secret Weapon ─────────────────────────────────────────
const EXPERIENCE_POINTS = [
  { icon: 'Tag',        title: 'Diverse Project Portfolio',       body: 'The developments cover a wide range of formats designed for modern living and business. This includes luxury commercial malls like Palm Marina, neighborhood hubs like One AMG, and expansive Mega Townships like Palm Garden.' },
  { icon: 'TrendingUp', title: 'Investor-First Operations',  body: 'Everything is engineered for clear, long-term value. The site highlights prime locations, high rental yields, and future appreciation. Beyond just the build, there is dedicated leasing assistance to help secure reputed brands and maximize rental income, with all properties being fully RERA-approved.' },
  { icon: 'Building',   title: 'Over 40 Years of Industry Experience', body: 'The group has been shaping the real estate landscape across Punjab for four decades. The focus remains strictly on delivering premium commercial and residential properties built on a legacy of trust and reliable construction.' },
  { icon: 'Users',      title: 'Community-Centric Ecosystems',            body: 'The vision goes past standalone structures to build self-sufficient environments. The focus is on sustainable, innovative real estate solutions that bring retail, dining, and daily living closer together to actually elevate the urban lifestyle.' },
];

const ExperienceSection = () => (
  <section className="py-16 sm:py-28 bg-ink-900/30 border-t border-bone-50/10">
    <div className="mx-auto max-w-[1320px] px-5 sm:px-8">
      <div className="grid lg:grid-cols-12 gap-10 items-end mb-14">
        <div className="lg:col-span-6 reveal">
          <SectionTitle
            kicker="Your Secret Weapon"
            title={<>Beyond Construction.<br/><span className="italic text-accent-soft">Industry Experience</span></>}/>
        </div>
        <div className="lg:col-span-5 lg:col-start-8 reveal">
          <p className="text-bone-50/60 text-[15px] leading-relaxed">
            AMG has been shaping the real estate landscape across Punjab for four decades. The focus remains strictly on delivering premium commercial and residential properties built on a legacy of trust and reliable construction.
          </p>
        </div>
      </div>
      <div className="grid sm:grid-cols-2 gap-4">
        {EXPERIENCE_POINTS.map((e, i) => {
          const Ic = Icon[e.icon] || Icon.Sparkles;
          return (
            <div key={e.title} className="glass-light rounded-3xl p-8 flex gap-6 hover:bg-bone-50/[0.05] transition reveal" style={{transitionDelay:`${i*80}ms`}}>
              <div className="shrink-0 h-12 w-12 rounded-2xl bg-accent/10 grid place-items-center text-accent mt-1">
                <Ic size={20}/>
              </div>
              <div>
                <div className="font-display text-[22px] leading-tight">{e.title}</div>
                <p className="mt-2 text-bone-50/55 text-[14px] leading-relaxed">{e.body}</p>
              </div>
            </div>
          );
        })}
      </div>
    </div>
  </section>
);

// ─── Final CTA ────────────────────────────────────────────────────────────────
const FinalCTA = ({ setPage }) => (
  <section className="relative py-20 sm:py-32 overflow-hidden border-t border-bone-50/10 bg-ink-900/40">
    <div className="pointer-events-none absolute -left-40 top-1/2 -translate-y-1/2 w-[600px] h-[600px] rounded-full bg-accent/[0.06] blur-[120px]" />
    <div className="absolute inset-0 grain opacity-30 pointer-events-none" />
    <div className="mx-auto max-w-[1320px] px-5 sm:px-8 relative">
      <div className="grid lg:grid-cols-12 gap-10 items-end">
        <div className="lg:col-span-7 reveal">
          <Eyebrow>Join the Legacy</Eyebrow>
          <h2 className="font-display text-[32px] sm:text-[64px] lg:text-[100px] leading-[0.94] tracking-tightest mt-6">
            Be Part of Punjab's<br/><span className="italic text-accent-soft">Next Landmark.</span>
          </h2>
        </div>
        <div className="lg:col-span-4 lg:col-start-9 flex flex-col gap-3 reveal" style={{transitionDelay:'120ms'}}>
          <button
            onClick={() => setPage('contact')}
            data-track="final-cta-schedule"
            className="btn w-full rounded-full bg-bone-50 text-ink-950 px-6 py-4 text-[13px] font-medium tracking-wide hover:bg-accent-soft inline-flex items-center justify-between"
          >
            <span>Schedule a Call</span> <Icon.ArrowUpRight size={16}/>
          </button>
          <a
            href="https://wa.me/918968566656?text=Hi%2C%20I%27m%20interested%20in%20investing%20with%20AMG."
            target="_blank"
            rel="noopener noreferrer"
            data-track="final-cta-whatsapp"
            className="btn w-full rounded-full border border-bone-50/30 text-bone-50 px-6 py-4 text-[13px] font-medium tracking-wide hover:bg-bone-50/10 inline-flex items-center justify-between"
          >
            <span className="inline-flex items-center gap-2"><Icon.WhatsApp size={14}/> WhatsApp Now</span>
            <Icon.ArrowRight size={16}/>
          </a>
        </div>
      </div>
    </div>
  </section>
);

// ─── Page assembly ────────────────────────────────────────────────────────────
function HomePage({ setPage }) {
  useReveal();
  return (
    <main className="page-enter">
      <HomeHero/>
      <Marquee items={['Palm Marina', 'One AMG', 'Palm City Ph II', 'Palm Heights', 'Maurya Greens', 'Palm Garden', 'Palm City']} />
      <LegacyBanner setPage={setPage}/>
      <FeaturedProjects setPage={setPage}/>
      <WhyInvest/>
      <ByTheNumbers/>
      <FounderSection setPage={setPage}/>
      <ExperienceSection/>
      <FinalCTA setPage={setPage}/>
    </main>
  );
}

window.HomePage = HomePage;