"use client"

import { ThemeProvider } from "@/providers/themeProvider/ThemeProvider";
import NavbarStyleFullscreen from '@/components/navbar/NavbarStyleFullscreen/NavbarStyleFullscreen';
import HeroBillboardCarousel from '@/components/sections/hero/HeroBillboardCarousel';
import TestimonialAboutCard from '@/components/sections/about/TestimonialAboutCard';
import FeatureCardTwelve from '@/components/sections/feature/FeatureCardTwelve';
import ProductCardOne from '@/components/sections/product/ProductCardOne';
import MetricCardTwo from '@/components/sections/metrics/MetricCardTwo';
import TestimonialCardTwelve from '@/components/sections/testimonial/TestimonialCardTwelve';
import ContactFaq from '@/components/sections/contact/ContactFaq';
import FooterCard from '@/components/sections/footer/FooterCard';
import { Award, Zap, Sparkles, Rocket, Heart, Lightbulb, Mail, Linkedin, Twitter, Github } from 'lucide-react';

export default function LandingPage() {
  return (
    <ThemeProvider
      defaultButtonVariant="hover-bubble"
      defaultTextAnimation="background-highlight"
      borderRadius="rounded"
      contentWidth="compact"
      sizing="largeSmallSizeLargeTitles"
      background="none"
      cardStyle="layered-gradient"
      primaryButtonStyle="shadow"
      secondaryButtonStyle="solid"
      headingFontWeight="bold"
    >
      <div id="nav" data-section="nav">
        <NavbarStyleFullscreen
          brandName="Build Presence"
          navItems={[
            { name: "Services", id: "services" },
            { name: "How It Works", id: "process" },
            { name: "Testimonials", id: "testimonials" },
            { name: "Contact", id: "contact" }
          ]}
          bottomLeftText="Global Agency"
          bottomRightText="hello@buildpresence.com"
        />
      </div>

      <div id="hero" data-section="hero">
        <HeroBillboardCarousel
          title="Build Your Dream Website. Drive Real Results."
          description="We help businesses get more and higher converting leads by building stunning, efficient websites from scratch or completely transforming your existing site. Recognition, clarity, and ease of use—every time."
          background={{ variant: "sparkles-gradient" }}
          tag="Website Agency"
          tagIcon={Sparkles}
          tagAnimation="slide-up"
          buttons={[
            { text: "Start Your Project", href: "#contact" },
            { text: "View Our Work", href: "#services" }
          ]}
          buttonAnimation="slide-up"
          mediaItems={[
            { imageSrc: "http://img.b2bpic.net/free-psd/yoga-new-experience-concept-template_23-2148448204.jpg", imageAlt: "modern web design mockup showcase" },
            { imageSrc: "http://img.b2bpic.net/free-vector/flat-design-web-designer-landing-page_23-2150389761.jpg", imageAlt: "web design development workspace" },
            { imageSrc: "http://img.b2bpic.net/free-photo/data-analysis-marketing-business-report-concept_53876-124759.jpg", imageAlt: "sales funnel conversion analytics" },
            { imageSrc: "http://img.b2bpic.net/free-photo/diverse-business-leaders-meeting-sharing-ideas-corporate-growth_482257-123661.jpg", imageAlt: "e-commerce conversion optimization" },
            { imageSrc: "http://img.b2bpic.net/free-photo/management-team-clapping-overjoyed-conference-room-after-good-training_482257-5094.jpg?_wi=1", imageAlt: "brand recognition identity design" },
            { imageSrc: "http://img.b2bpic.net/free-photo/management-team-clapping-overjoyed-conference-room-after-good-training_482257-5094.jpg?_wi=2", imageAlt: "brand recognition identity design" }
          ]}
          ariaLabel="Hero section showcasing Build Presence services"
        />
      </div>

      <div id="about" data-section="about">
        <TestimonialAboutCard
          tag="About Build Presence"
          tagIcon={Award}
          tagAnimation="slide-up"
          title="We Transform Websites Into Lead-Converting Machines"
          description="Build Presence is dedicated to helping businesses establish a powerful online presence through strategic web design and development."
          subdescription="Whether you're starting from scratch or upgrading an existing site, we use proven methods to create websites that don't just look beautiful—they actually convert visitors into loyal customers."
          icon={Zap}
          imageSrc="http://img.b2bpic.net/free-photo/management-team-clapping-overjoyed-conference-room-after-good-training_482257-5094.jpg?_wi=3"
          imageAlt="about build presence"
          mediaAnimation="slide-up"
          useInvertedBackground={false}
          ariaLabel="About Build Presence agency"
        />
      </div>

      <div id="services" data-section="services">
        <FeatureCardTwelve
          title="What We Offer"
          description="Comprehensive web solutions designed to drive growth and build trust with your audience."
          tag="Our Services"
          tagIcon={Rocket}
          tagAnimation="slide-up"
          textboxLayout="default"
          useInvertedBackground={false}
          animationType="slide-up"
          features={[
            {
              id: "web-building",              label: "Build From Scratch",              title: "Custom Website Development",              items: [
                "Brand-aligned design and strategy",                "Responsive mobile-first approach",                "Performance optimized for speed",                "SEO-ready architecture"
              ]
            },
            {
              id: "web-upgrade",              label: "Upgrade Existing",              title: "Website Transformation",              items: [
                "Complete redesign and modernization",                "Enhanced user experience",                "Improved conversion rates",                "Legacy system migration"
              ]
            },
            {
              id: "lead-generation",              label: "Lead Generation",              title: "Convert More Visitors",              items: [
                "Strategic call-to-action placement",                "Optimized landing pages",                "Lead capture forms and flows",                "Conversion rate optimization"
              ]
            }
          ]}
          ariaLabel="Our services and offerings"
        />
      </div>

      <div id="values" data-section="values">
        <ProductCardOne
          title="Core Values That Drive Everything"
          description="Our three pillars ensure every website we build delivers real business results."
          tag="Why We Stand Out"
          tagIcon={Heart}
          tagAnimation="slide-up"
          textboxLayout="default"
          useInvertedBackground={false}
          gridVariant="three-columns-all-equal-width"
          animationType="slide-up"
          products={[
            {
              id: "recognition",              name: "Recognition",              price: "Stand Out",              imageSrc: "http://img.b2bpic.net/free-photo/management-team-clapping-overjoyed-conference-room-after-good-training_482257-5094.jpg?_wi=4",              imageAlt: "brand recognition identity design"
            },
            {
              id: "clarity",              name: "Clarity",              price: "Be Clear",              imageSrc: "http://img.b2bpic.net/free-vector/big-data-blue-visualization_1217-2407.jpg",              imageAlt: "clear user interface design"
            },
            {
              id: "ease",              name: "Ease of Use",              price: "Simplify",              imageSrc: "http://img.b2bpic.net/free-vector/flat-timeline-infographic-template_23-2148914623.jpg",              imageAlt: "user friendly interface design"
            }
          ]}
          ariaLabel="Core values section"
        />
      </div>

      <div id="process" data-section="process">
        <MetricCardTwo
          title="Our Process. Proven Results."
          description="We follow a strategic, transparent approach that keeps you in control every step of the way."
          tag="How We Work"
          tagIcon={Lightbulb}
          tagAnimation="slide-up"
          textboxLayout="default"
          useInvertedBackground={false}
          gridVariant="uniform-all-items-equal"
          animationType="slide-up"
          metrics={[
            {
              id: "discovery",              value: "01",              description: "Discovery & Strategy - We understand your business, goals, and target audience"
            },
            {
              id: "design",              value: "02",              description: "Design & Planning - Beautiful mockups and clear roadmaps you approve"
            },
            {
              id: "development",              value: "03",              description: "Development & Build - Clean code, optimized performance, conversion-focused"
            },
            {
              id: "launch",              value: "04",              description: "Testing & Launch - Rigorous QA and seamless deployment to production"
            }
          ]}
          ariaLabel="Our working process"
        />
      </div>

      <div id="testimonials" data-section="testimonials">
        <TestimonialCardTwelve
          testimonials={[
            {
              id: "1",              name: "Sarah Mitchell",              imageSrc: "http://img.b2bpic.net/free-photo/portrait-confident-businessman_1098-21013.jpg",              imageAlt: "professional business person headshot"
            },
            {
              id: "2",              name: "James Rodriguez",              imageSrc: "http://img.b2bpic.net/free-photo/front-view-smiley-coworkers-posing_23-2149622896.jpg",              imageAlt: "professional business man portrait"
            },
            {
              id: "3",              name: "Emily Zhang",              imageSrc: "http://img.b2bpic.net/free-photo/content-senior-businessman-with-arms-crossed_1262-1790.jpg",              imageAlt: "professional entrepreneur portrait"
            },
            {
              id: "4",              name: "David Thompson",              imageSrc: "http://img.b2bpic.net/free-photo/young-businessman-happy-expression_1194-1551.jpg",              imageAlt: "business professional person portrait"
            },
            {
              id: "5",              name: "Lisa Anderson",              imageSrc: "http://img.b2bpic.net/free-photo/content-indian-ceo-standing-smiling-portrait-successful-pensive-bearded-businessman-glasses-posing-office-room-business-expression-management-concept_74855-11642.jpg",              imageAlt: "professional business leader portrait"
            },
            {
              id: "6",              name: "Michael Chen",              imageSrc: "http://img.b2bpic.net/free-photo/portrait-middle-aged-businesswoman_23-2148204386.jpg",              imageAlt: "business professional woman portrait"
            }
          ]}
          cardTitle="Trusted by Growing Businesses"
          cardTag="Success Stories"
          cardTagIcon={Heart}
          cardAnimation="slide-up"
          useInvertedBackground={false}
          ariaLabel="Client testimonials section"
        />
      </div>

      <div id="contact" data-section="contact">
        <ContactFaq
          ctaTitle="Ready to Transform Your Online Presence?"
          ctaDescription="Let's work together to build a website that drives real results and builds lasting trust with your audience."
          ctaButton={{
            text: "Get Started Today",            href: "mailto:hello@buildpresence.com"
          }}
          ctaIcon={Mail}
          animationType="slide-up"
          useInvertedBackground={false}
          faqs={[
            {
              id: "timeline",              title: "How long does a website project take?",              content: "Most projects take 6-12 weeks depending on complexity and scope. We provide detailed timelines during the discovery phase."
            },
            {
              id: "pricing",              title: "What's your pricing model?",              content: "We offer custom pricing based on your project scope. Let's have a consultation to understand your needs and provide an accurate quote."
            },
            {
              id: "support",              title: "Do you provide ongoing support?",              content: "Yes! We offer ongoing maintenance, updates, and optimization to keep your website performing at its best."
            },
            {
              id: "technology",              title: "What technology do you use?",              content: "We use modern, proven technologies including Next.js, React, and cloud-based solutions for optimal performance and scalability."
            },
            {
              id: "revision",              title: "Are revisions included?",              content: "Absolutely. We work closely with you through the design and development process with unlimited revisions until you're completely satisfied."
            },
            {
              id: "migration",              title: "Can you migrate my existing website?",              content: "Yes, we specialize in migrating and transforming existing websites with zero downtime. We preserve your SEO and improve performance."
            }
          ]}
          ariaLabel="Contact and FAQ section"
        />
      </div>

      <div id="footer" data-section="footer">
        <FooterCard
          logoText="Build Presence"
          copyrightText="© 2025 Build Presence. All rights reserved."
          socialLinks={[
            {
              icon: Linkedin,
              href: "https://linkedin.com",              ariaLabel: "LinkedIn"
            },
            {
              icon: Twitter,
              href: "https://twitter.com",              ariaLabel: "Twitter"
            },
            {
              icon: Github,
              href: "https://github.com",              ariaLabel: "GitHub"
            }
          ]}
          ariaLabel="Site footer"
        />
      </div>
    </ThemeProvider>
  );
}