import React, { FC } from 'react';
import { motion } from 'framer-motion';
import { ContactButton } from '../components/ContactButton';

/**
 * Main Application Component.
 * Assembles all sections into the final landing page.
 */
const App: FC = () => {
  // GIF URLs for Marquee Section
  const marqueeGifs = [
    "https://motionsites.ai/assets/hero-space-voyage-preview-eECLH3Yc.gif",
    "https://motionsites.ai/assets/hero-codenest-preview-Cgppc2qV.gif",
    "https://motionsites.ai/assets/hero-vex-ventures-preview-BczMFIiw.gif",
    "https://motionsites.ai/assets/hero-stellar-ai-v2-preview-DjvxjG3C.gif",
    "https://motionsites.ai/assets/hero-asme-preview-B_nGDnTP.gif",
    "https://motionsites.ai/assets/hero-transform-data-preview-Cx5OU29N.gif",
    "https://motionsites.ai/assets/hero-vitara-preview-Cjz2QYyU.gif",
    "https://motionsites.ai/assets/hero-terra-preview-BFjrCr7T.gif",
    "https://motionsites.ai/assets/hero-skyelite-preview-DHaZIgUv.gif",
    "https://motionsites.ai/assets/hero-aethera-preview-DknSlcTa.gif",
    "https://motionsites.ai/assets/hero-designpro-preview-D8c5_een.gif",
    "https://motionsites.ai/assets/hero-stellar-ai-preview-D3HL6bw1.gif",
    "https://motionsites.ai/assets/hero-xportfolio-preview-D4A8maiC.gif",
    "https://motionsites.ai/assets/hero-orbit-web3-preview-BXt4OttD.gif",
    "https://motionsites.ai/assets/hero-nexora-preview-cx5HmUgo.gif",
    "https://motionsites.ai/assets/hero-evr-ventures-preview-DZxeVFEX.gif",
    "https://motionsites.ai/assets/hero-planet-orbit-preview-DWAP8Z1P.gif",
    "https://motionsites.ai/assets/hero-new-era-preview-CocuDUm9.gif",
    "https://motionsites.ai/assets/hero-wealth-preview-B70idl_u.gif",
    "https://motionsites.ai/assets/hero-luminex-preview-CxOP7ce6.gif",
    "https://motionsites.ai/assets/hero-celestia-preview-0yO3jXO8.gif",
  ];

  return (
    <div className="min-h-screen bg-[#0C0C0C] antialiased">
      {/* 1. Hero Section */}
      <HeroSection />

      {/* 2. Marquee Section */}
      <MarqueeSection gifs={marqueeGifs} />

      {/* 3. About Section */}
      <AboutSection />

      {/* 4. Services Section */}
      <ServicesSection />

      {/* 5. Projects Section (Sticky) */}
      <ProjectsSection />

      {/* 6. Contact Footer (Simple placeholder) */}
      <section id="contact" className="py-20 text-center main-wrapper">
        <h2 className="hero-heading text-black font-black uppercase leading-none tracking-tight text-clamp-3 sm:text-clamp-12 md:text-clamp-160 mb-8">
          Ready to build something incredible?
        </h2>
        <p className="text-[#D7E2EA] font-light uppercase tracking-wide text-lg mb-10">
          Let's connect and bring your vision to life.
        </p>
        <ContactButton>
          Contact Me
        </ContactButton>
      </section>
    </div>
  );
};

export default App;