"use client"

import { ThemeProvider } from "@/providers/themeProvider/ThemeProvider";
import NavbarStyleApple from '@/components/navbar/NavbarStyleApple/NavbarStyleApple';
import HeroSplitDualMedia from '@/components/sections/hero/HeroSplitDualMedia';
import InlineImageSplitTextAbout from '@/components/sections/about/InlineImageSplitTextAbout';
import FeatureCardTwentyFive from '@/components/sections/feature/FeatureCardTwentyFive';
import ProductCardTwo from '@/components/sections/product/ProductCardTwo';
import TeamCardTen from '@/components/sections/team/TeamCardTen';
import TestimonialCardSix from '@/components/sections/testimonial/TestimonialCardSix';
import ContactSplit from '@/components/sections/contact/ContactSplit';
import FooterBaseCard from '@/components/sections/footer/FooterBaseCard';
import { Code, MessageSquare, Palette, Sparkles } from 'lucide-react';
import HeroLogo from '@/components/sections/hero/HeroLogo';

export default function LandingPage() {
  return (
    <ThemeProvider
      defaultButtonVariant="slide-background"
      defaultTextAnimation="entrance-slide"
      borderRadius="pill"
      contentWidth="mediumLarge"
      sizing="mediumSizeLargeTitles"
      background="none"
      cardStyle="solid"
      primaryButtonStyle="flat"
      secondaryButtonStyle="radial-glow"
      headingFontWeight="light"
    >
      <div id="nav" data-section="nav">
        <NavbarStyleApple
          brandName="Refract"
          navItems={[
            { name: "Work", id: "work" },
            { name: "Services", id: "services" },
            { name: "Team", id: "team" },
            { name: "About", id: "about" },
            { name: "Contact", id: "contact" }
          ]}
        />
      </div>

      <div id="hero" data-section="hero">
        <HeroSplitDualMedia
          title="Digital experiences that drive results"
          description="We're a California-based web agency crafting cutting-edge digital solutions for ambitious brands. From stunning design to robust development, we transform your vision into reality."
          tag="Web Agency"
          tagIcon={Sparkles}
          background={{ variant: "plain" }}
          mediaItems={[
            {
              imageSrc: "https://img.b2bpic.net/free-photo/worker-providing-live-chat-support-typing-keyboard-handling-clients-complaints-call-center-agent_482257-136069.jpg",              imageAlt: "Web design showcase"
            },
            {
              imageSrc: "https://img.b2bpic.net/free-photo/high-angle-modern-devices-office_23-2148339330.jpg",              imageAlt: "Digital innovation"
            }
          ]}
          rating={5}
          ratingText="Trusted by leading brands"
          buttons={[
            { text: "View Our Work", href: "#work" },
            { text: "Get Started", href: "#contact" }
          ]}
        />
      </div>

      <div id="about" data-section="about">
        <InlineImageSplitTextAbout
          heading={[
            { type: "text", content: "We're passionate about creating" },
            {
              type: "image",              src: "https://img.b2bpic.net/free-photo/headphones-with-microphone-call-center-office-desk_482257-125977.jpg",              alt: "Creative agency team"
            },
            { type: "text", content: "digital solutions that matter" }
          ]}
          useInvertedBackground="invertDefault"
          buttons={[
            { text: "Learn More", href: "#services" }
          ]}
        />
      </div>

      <div id="services" data-section="services">
        <FeatureCardTwentyFive
          title="Our Services"
          description="Comprehensive digital solutions tailored to your needs. From strategy to execution, we deliver excellence."
          tag="What We Do"
          features={[
            {
              title: "Web Design & Development",              description: "Beautiful, performant websites that convert. We design with purpose and build with precision.",              icon: Code,
              mediaItems: [
                {
                  imageSrc: "https://img.b2bpic.net/free-vector/gradient-ui-ux-background_52683-68958.jpg",                  imageAlt: "Web design interface"
                },
                {
                  imageSrc: "https://img.b2bpic.net/free-vector/gradient-ui-ux-elements_23-2149061049.jpg",                  imageAlt: "Responsive development"
                }
              ]
            },
            {
              title: "Brand Strategy & Design",              description: "Compelling brand identities that resonate. We craft stories that connect with your audience.",              icon: Palette,
              mediaItems: [
                {
                  imageSrc: "https://img.b2bpic.net/free-vector/neon-landing-page-with-smartphone_52683-28231.jpg",                  imageAlt: "Branding design"
                },
                {
                  imageSrc: "https://img.b2bpic.net/free-vector/gradient-ui-ux-landing-page_52683-69728.jpg",                  imageAlt: "Digital strategy"
                }
              ]
            }
          ]}
          animationType="depth-3d"
          textboxLayout="default"
          useInvertedBackground="noInvert"
        />
      </div>

      <div id="work" data-section="work">
        <ProductCardTwo
          title="Recent Work"
          description="Explore our latest projects and see how we've helped brands succeed in the digital landscape."
          tag="Case Studies"
          products={[
            {
              id: "1",              brand: "TechStart",              name: "Complete Platform Redesign",              price: "$250K+",              rating: 5,
              reviewCount: "5 months",              imageSrc: "https://img.b2bpic.net/free-photo/elegant-cozy-office-with-laptop-desk_23-2149636248.jpg",              imageAlt: "E-commerce platform redesign"
            },
            {
              id: "2",              brand: "CloudVision",              name: "SaaS Product Launch",              price: "$180K+",              rating: 5,
              reviewCount: "4 months",              imageSrc: "https://img.b2bpic.net/free-vector/landing-page-template-second-hand-fashion-store_52683-109215.jpg",              imageAlt: "SaaS application design"
            },
            {
              id: "3",              brand: "BrandFlow",              name: "Brand Identity System",              price: "$120K+",              rating: 5,
              reviewCount: "3 months",              imageSrc: "https://img.b2bpic.net/free-photo/elegant-cozy-office-lifestyle_23-2149636247.jpg",              imageAlt: "Design system creation"
            }
          ]}
          gridVariant="three-columns-all-equal-width"
          animationType="slide-up"
          textboxLayout="default"
          useInvertedBackground="invertDefault"
        />
      </div>

      <div id="team" data-section="team">
        <TeamCardTen
          title="Meet the Team"
          tag="Our Experts"
          members={[
            {
              id: "1",              name: "Alex Chen",              imageSrc: "https://img.b2bpic.net/free-photo/businessman-with-glasses-holding-book_23-2148816883.jpg",              imageAlt: "Alex Chen, Creative Director"
            },
            {
              id: "2",              name: "Jordan Martinez",              imageSrc: "https://img.b2bpic.net/free-photo/front-view-man-developing-photos_23-2149893918.jpg",              imageAlt: "Jordan Martinez, Lead Developer"
            },
            {
              id: "3",              name: "Sam Thompson",              imageSrc: "https://img.b2bpic.net/free-photo/front-view-smiley-man-darkroom_23-2149893830.jpg",              imageAlt: "Sam Thompson, Strategy Lead"
            }
          ]}
          memberVariant="card"
          useInvertedBackground="noInvert"
        />
      </div>

      <div id="testimonials" data-section="testimonials">
        <TestimonialCardSix
          title="What Our Clients Say"
          description="Hear from the brands we've partnered with to transform their digital presence."
          tag="Testimonials"
          textboxLayout="default"
          useInvertedBackground="invertDefault"
          animationType="slide-up"
          testimonials={[
            {
              id: "1",              name: "Sarah Mitchell",              handle: "CEO, TechStart",              testimonial: "Refract transformed our digital presence completely. Their team's expertise and creative approach delivered results beyond expectations.",              imageSrc: "https://img.b2bpic.net/free-photo/close-up-portrait-young-bearded-man-white-shirt-jacket-posing-camera-with-broad-smile-isolated-gray_171337-629.jpg",              imageAlt: "Sarah Mitchell"
            },
            {
              id: "2",              name: "Michael Park",              handle: "Founder, CloudVision",              testimonial: "Working with Refract was a game-changer. They understood our vision and executed it flawlessly with attention to every detail.",              imageSrc: "https://img.b2bpic.net/free-photo/front-view-business-woman-suit_23-2148603018.jpg",              imageAlt: "Michael Park"
            },
            {
              id: "3",              name: "Emma Rodriguez",              handle: "Marketing Director, BrandFlow",              testimonial: "The team at Refract is incredibly talented and professional. They delivered a complete rebrand that perfectly captures our brand essence.",              imageSrc: "https://img.b2bpic.net/free-photo/dark-blonde-bearded-man-crosses-his-hands-chest-posing-black-shirt_8353-1116.jpg",              imageAlt: "Emma Rodriguez"
            },
            {
              id: "4",              name: "David Kumar",              handle: "Product Manager, InnovateLabs",              testimonial: "Refract's approach to web development is unmatched. They created a seamless user experience that increased our conversions significantly.",              imageSrc: "https://img.b2bpic.net/free-photo/handsome-business-man-posing-close-up_23-2148336823.jpg",              imageAlt: "David Kumar"
            },
            {
              id: "5",              name: "Lisa Chang",              handle: "Founder, DesignCo",              testimonial: "Outstanding work from start to finish. Refract's team is responsive, creative, and deeply committed to success.",              imageSrc: "https://img.b2bpic.net/free-photo/selfie-portrait-videocall_23-2149186122.jpg",              imageAlt: "Lisa Chang"
            },
            {
              id: "6",              name: "James Wilson",              handle: "CTO, NextGen Tech",              testimonial: "We've worked with many agencies, but Refract stands out for their technical expertise and innovative thinking.",              imageSrc: "https://img.b2bpic.net/free-photo/happy-businessman-smiling-camera_1163-4660.jpg",              imageAlt: "James Wilson"
            }
          ]}
          speed={40}
        />
      </div>

      <div id="contact" data-section="contact">
        <ContactSplit
          tag="Let's Talk"
          title="Ready to build something amazing?"
          description="Get in touch with our team to discuss your project, ask questions, or explore how we can help elevate your brand."
          tagIcon={MessageSquare}
          background={{ variant: "sparkles-gradient" }}
          useInvertedBackground="noInvert"
          imageSrc="https://img.b2bpic.net/free-photo/front-view-business-people-office_23-2148427060.jpg"
          imageAlt="Contact our team"
          mediaPosition="right"
          inputPlaceholder="Enter your email"
          buttonText="Subscribe"
          termsText="We'll get back to you within 24 hours. No spam, just good work."
        />
      </div>

      <div id="hero" data-section="hero">
        <HeroLogo logoText="Refract" description="Experience the future of technology with Refract, where innovation meets simplicity." buttons={[{ label: "Get Started", href: "/start", variant: "primary" }, { label: "Learn More", href: "/about", variant: "secondary" }]} imageSrc="https://images.unsplash.com/photo-1519681393784-d120267933ba?w=800&q=80" ariaLabel="Refract Hero Section" className="hero-logo" containerClassName="hero-container" contentContainerClassName="hero-content-container" descriptionClassName="hero-description" buttonContainerClassName="hero-button-container" buttonClassName="hero-button" buttonTextClassName="hero-button-text" logoContainerClassName="hero-logo-container" logoClassName="hero-logo-text" mediaWrapperClassName="hero-media-wrapper" imageClassName="hero-image" blurClassName="hero-blur" dimOverlayClassName="hero-dim-overlay" />
      </div>

      <div id="footer" data-section="footer">
        <FooterBaseCard
          logoText="Refract"
          columns={[
            {
              title: "Services",              items: [
                { label: "Web Design", href: "#services" },
                { label: "Development", href: "#services" },
                { label: "Branding", href: "#services" }
              ]
            },
            {
              title: "Company",              items: [
                { label: "About", href: "#about" },
                { label: "Team", href: "#team" },
                { label: "Work", href: "#work" }
              ]
            },
            {
              title: "Connect",              items: [
                { label: "Contact", href: "#contact" },
                { label: "LinkedIn", href: "https://linkedin.com" },
                { label: "Twitter", href: "https://twitter.com" }
              ]
            }
          ]}
          copyrightText="© 2025 Refract. All rights reserved. Based in California."
        />
      </div>
    </ThemeProvider>
  );
}