"use client";

import NavbarLayoutFloatingOverlay from '@/components/navbar/NavbarLayoutFloatingOverlay/NavbarLayoutFloatingOverlay';
import ContactSplitForm from '@/components/sections/contact/ContactSplitForm';
import FooterLogoReveal from '@/components/sections/footer/FooterLogoReveal';
import { ThemeProvider } from "@/providers/themeProvider/ThemeProvider";

export default function LandingPage() {
  return (
    <ThemeProvider
      defaultButtonVariant="shift-hover"
      defaultTextAnimation="entrance-slide"
      borderRadius="rounded"
      contentWidth="smallMedium"
      sizing="mediumSizeLargeTitles"
      background="none"
      cardStyle="outline"
      primaryButtonStyle="diagonal-gradient"
      secondaryButtonStyle="layered"
      headingFontWeight="extrabold"
    >
      <div id="nav" data-section="nav">
        <NavbarLayoutFloatingOverlay
          brandName="FGA Growth"
          navItems={[
            { name: "Case Studies", id: "testimonial" },
            { name: "Results", id: "metrics" },
            { name: "Services", id: "services" },
            { name: "About", id: "about" },
            { name: "Contact", id: "contact" }
          ]}
          button={{ text: "Book Strategy Call", href: "#contact" }}
        />
      </div>

      <div id="testimonial" data-section="testimonial" className="relative w-full py-20 bg-black">
        <div className="relative w-full max-w-7xl mx-auto px-6">
          {/* Section Header */}
          <div className="mb-16">
            <div className="inline-block mb-4">
              <span className="text-sm font-medium text-yellow-500 uppercase tracking-wider">Premium Case Studies</span>
            </div>
            <h2 className="text-5xl md:text-7xl font-bold text-white mb-4" style={{ fontFamily: 'var(--font-playfair-display), serif' }}>
              Our Proven Results
            </h2>
            <p className="text-lg text-gray-400">Transforming e-commerce brands with data-driven strategies</p>
          </div>

          {/* 2x2 Grid of Case Study Cards */}
          <div className="grid grid-cols-1 md:grid-cols-2 gap-8 mb-16">
            {/* Card 1 */}
            <div className="bg-gradient-to-br from-gray-900 to-black border border-yellow-600/30 rounded-lg p-8 hover:border-yellow-500/50 transition-all">
              <div className="flex items-center justify-between mb-6">
                <h3 className="text-2xl font-bold text-white" style={{ fontFamily: 'var(--font-playfair-display), serif' }}>Streetwear Brand Argentina</h3>
                <span className="text-4xl">🦁</span>
              </div>
              <div className="bg-yellow-500/10 border border-yellow-500/20 rounded-lg p-4 mb-6">
                <div className="text-5xl font-bold text-yellow-400 mb-2">17x+</div>
                <div className="text-sm text-gray-300">ROAS Achieved</div>
              </div>
              <div className="mb-6">
                <div className="flex justify-between items-center mb-2">
                  <span className="text-sm text-gray-400">Revenue Growth</span>
                  <span className="text-sm font-medium text-yellow-400">$0 → $42M ARS</span>
                </div>
                <div className="w-full bg-gray-800 rounded-full h-2">
                  <div className="bg-gradient-to-r from-yellow-500 to-yellow-400 h-2 rounded-full" style={{ width: '95%' }}></div>
                </div>
              </div>
              <p className="text-sm text-gray-400">Scaled through precision Meta Ads targeting across customer archetypes in 4 months</p>
            </div>

            {/* Card 2 */}
            <div className="bg-gradient-to-br from-gray-900 to-black border border-yellow-600/30 rounded-lg p-8 hover:border-yellow-500/50 transition-all">
              <div className="flex items-center justify-between mb-6">
                <h3 className="text-2xl font-bold text-white" style={{ fontFamily: 'var(--font-playfair-display), serif' }}>Fashion Jewelry Store</h3>
                <span className="text-4xl">✨</span>
              </div>
              <div className="bg-yellow-500/10 border border-yellow-500/20 rounded-lg p-4 mb-6">
                <div className="text-5xl font-bold text-yellow-400 mb-2">2.89</div>
                <div className="text-sm text-gray-300">ROAS</div>
              </div>
              <div className="mb-6">
                <div className="flex justify-between items-center mb-2">
                  <span className="text-sm text-gray-400">Monthly Revenue</span>
                  <span className="text-sm font-medium text-yellow-400">$51K → $227K</span>
                </div>
                <div className="w-full bg-gray-800 rounded-full h-2">
                  <div className="bg-gradient-to-r from-yellow-500 to-yellow-400 h-2 rounded-full" style={{ width: '80%' }}></div>
                </div>
              </div>
              <p className="text-sm text-gray-400">Integrated Meta Ads and Google Ads with creative hook optimization</p>
            </div>

            {/* Card 3 */}
            <div className="bg-gradient-to-br from-gray-900 to-black border border-yellow-600/30 rounded-lg p-8 hover:border-yellow-500/50 transition-all">
              <div className="flex items-center justify-between mb-6">
                <h3 className="text-2xl font-bold text-white" style={{ fontFamily: 'var(--font-playfair-display), serif' }}>High-End Jewelry Store</h3>
                <span className="text-4xl">💎</span>
              </div>
              <div className="bg-yellow-500/10 border border-yellow-500/20 rounded-lg p-4 mb-6">
                <div className="text-5xl font-bold text-yellow-400 mb-2">3.27</div>
                <div className="text-sm text-gray-300">ROAS</div>
              </div>
              <div className="mb-6">
                <div className="flex justify-between items-center mb-2">
                  <span className="text-sm text-gray-400">Monthly Revenue</span>
                  <span className="text-sm font-medium text-yellow-400">$9K → $32K</span>
                </div>
                <div className="w-full bg-gray-800 rounded-full h-2">
                  <div className="bg-gradient-to-r from-yellow-500 to-yellow-400 h-2 rounded-full" style={{ width: '72%' }}></div>
                </div>
              </div>
              <p className="text-sm text-gray-400">Luxury-focused TikTok Ads and Google Ads targeting high-value segments</p>
            </div>

            {/* Card 4 */}
            <div className="bg-gradient-to-br from-gray-900 to-black border border-yellow-600/30 rounded-lg p-8 hover:border-yellow-500/50 transition-all">
              <div className="flex items-center justify-between mb-6">
                <h3 className="text-2xl font-bold text-white" style={{ fontFamily: 'var(--font-playfair-display), serif' }}>Gold Jewelry Store</h3>
                <span className="text-4xl">👑</span>
              </div>
              <div className="bg-yellow-500/10 border border-yellow-500/20 rounded-lg p-4 mb-6">
                <div className="text-5xl font-bold text-yellow-400 mb-2">4.79</div>
                <div className="text-sm text-gray-300">ROAS</div>
              </div>
              <div className="mb-6">
                <div className="flex justify-between items-center mb-2">
                  <span className="text-sm text-gray-400">Monthly Revenue</span>
                  <span className="text-sm font-medium text-yellow-400">$8K → $23K</span>
                </div>
                <div className="w-full bg-gray-800 rounded-full h-2">
                  <div className="bg-gradient-to-r from-yellow-500 to-yellow-400 h-2 rounded-full" style={{ width: '65%' }}></div>
                </div>
              </div>
              <p className="text-sm text-gray-400">Data-driven Meta Ads campaigns with lead generation and continuous testing</p>
            </div>
          </div>

          {/* Featured Quote Block */}
          <div className="relative bg-gradient-to-r from-yellow-600/20 to-yellow-500/10 border border-yellow-500/30 rounded-xl p-12 mb-12">
            <div className="absolute top-6 right-8 text-6xl opacity-20">🦁</div>
            <blockquote className="relative z-10">
              <p className="text-3xl font-bold text-white mb-6" style={{ fontFamily: 'var(--font-playfair-display), serif' }}>
                "Fran built a testing framework around customer archetypes and creative hooks that allowed us to scale faster than we thought possible."
              </p>
              <div className="flex items-center gap-4">
                <div className="w-12 h-12 bg-yellow-500/20 border border-yellow-500/40 rounded-full flex items-center justify-center">
                  <span className="text-xl">👥</span>
                </div>
                <div>
                  <div className="text-white font-semibold">Premium E-Commerce Client</div>
                  <div className="text-sm text-gray-400">Featured Case Study</div>
                </div>
              </div>
            </blockquote>
          </div>

          {/* Gold Gradient CTA Button */}
          <div className="flex justify-center">
            <button className="bg-gradient-to-r from-yellow-500 to-yellow-400 hover:from-yellow-400 hover:to-yellow-300 text-black font-bold py-4 px-12 rounded-lg transition-all shadow-lg hover:shadow-xl hover:shadow-yellow-500/50">
              View All Case Studies →
            </button>
          </div>
        </div>
      </div>

      <div id="cta" data-section="cta">
        <ContactSplitForm
          title="Ready to Scale Your Performance?"
          description="Book a 30-minute strategy call with our team. We'll analyze your current marketing performance and identify high-impact optimization opportunities."
          inputs={[
            { name: "name", type: "text", placeholder: "Your name", required: true },
            { name: "email", type: "email", placeholder: "your@email.com", required: true },
            { name: "company", type: "text", placeholder: "Company name", required: true }
          ]}
          textarea={{ name: "message", placeholder: "Brief description of your business and current marketing challenges", rows: 4, required: false }}
          buttonText="Book a Strategy Call →"
          useInvertedBackground={false}
          imageSrc="http://img.b2bpic.net/free-photo/people-analyzing-checking-finance-graphs-office_23-2150377179.jpg?_wi=2"
          imageAlt="modern office workspace professional environment"
          mediaAnimation="slide-up"
          mediaPosition="right"
        />
      </div>

      <div id="footer" data-section="footer">
        <FooterLogoReveal
          logoText="FGA Growth"
          leftLink={{ text: "Privacy Policy", href: "#" }}
          rightLink={{ text: "Terms of Service", href: "#" }}
        />
      </div>
    </ThemeProvider>
  );
}