"use client";

import { ThemeProvider } from "@/providers/themeProvider/ThemeProvider";
import NavbarStyleFullscreen from "@/components/navbar/NavbarStyleFullscreen/NavbarStyleFullscreen";
import HeroBillboard from "@/components/sections/hero/HeroBillboard";
import FeatureCardTen from "@/components/sections/feature/FeatureCardTen";
import ProductCardOne from "@/components/sections/product/ProductCardOne";
import TestimonialCardTwo from "@/components/sections/testimonial/TestimonialCardTwo";
import PricingCardFive from "@/components/sections/pricing/PricingCardFive";
import FaqSplitMedia from "@/components/sections/faq/FaqSplitMedia";
import ContactSplitForm from "@/components/sections/contact/ContactSplitForm";
import FooterBaseCard from "@/components/sections/footer/FooterBaseCard";
import Link from "next/link";
import {
  Hammer,
  CheckCircle,
  Workflow,
  Briefcase,
  MessageSquare,
  DollarSign,
  HelpCircle,
  Image,
  Star,
  Award,
  Zap,
  MapPin,
  Shield,
  PhoneCall,
  Calendar,
  Mail,
  MessageCircle,
  Lightbulb,
  Layers,
  Palette,
  Code,
  Smartphone,
  Rocket,
  Search,
  Headphones,
} from "lucide-react";

export default function HomePage() {
  const navItems = [
    { name: "Home", id: "/" },
    { name: "Services", id: "/services" },
    { name: "Portfolio", id: "/" },
    { name: "Pricing", id: "/pricing" },
    { name: "Contact", id: "/contact" },
  ];

  return (
    <ThemeProvider
      defaultButtonVariant="text-shift"
      defaultTextAnimation="entrance-slide"
      borderRadius="rounded"
      contentWidth="mediumLarge"
      sizing="largeSmallSizeLargeTitles"
      background="circleGradient"
      cardStyle="subtle-shadow"
      primaryButtonStyle="double-inset"
      secondaryButtonStyle="solid"
      headingFontWeight="light"
    >
      <div id="nav" data-section="nav">
        <NavbarStyleFullscreen
          navItems={navItems}
          brandName="BuildTrades"
          bottomLeftText="Websites for Contractors"
          bottomRightText="hello@buildtrades.com"
        />
      </div>

      <div id="hero" data-section="hero">
        <HeroBillboard
          title="Websites Built for Contractors Who Build"
          description="Professional, mobile-optimized websites designed specifically for trades businesses. Showcase your work, attract more clients, and grow your business with a site built by people who understand the construction industry."
          background={{ variant: "sparkles-gradient" }}
          tag="For Contractors & Trades"
          tagIcon={Hammer}
          tagAnimation="slide-up"
          buttons={[
            { text: "See Our Work", href: "#portfolio" },
            { text: "Get Started", href: "#contact" },
          ]}
          buttonAnimation="slide-up"
          imageSrc="https://webuild-dev.s3.eu-north-1.amazonaws.com/users/user_3AQUTdG9bI9SIob3c5ogoGiecMG/a-modern-construction-and-trades-website-1772524382530-a7d5e491.png"
          imageAlt="BuildTrades website design showcase"
          mediaAnimation="slide-up"
          avatars={[
            {
              src: "https://webuild-dev.s3.eu-north-1.amazonaws.com/users/user_3AQUTdG9bI9SIob3c5ogoGiecMG/a-professional-headshot-of-a-satisfied-c-1772524380165-667bbd23.png",              alt: "John - Contractor"},
            {
              src: "https://webuild-dev.s3.eu-north-1.amazonaws.com/users/user_3AQUTdG9bI9SIob3c5ogoGiecMG/a-professional-headshot-of-a-female-cont-1772524381105-64a95cff.png",              alt: "Sarah - Home Services"},
            {
              src: "https://webuild-dev.s3.eu-north-1.amazonaws.com/users/user_3AQUTdG9bI9SIob3c5ogoGiecMG/a-professional-headshot-of-a-male-small--1772524380697-ec133f7c.png",              alt: "Mike - Construction Owner"},
          ]}
          avatarText="Trusted by 200+ contractors nationwide"
        />
      </div>

      <div id="features" data-section="features">
        <FeatureCardTen
          title="Why Contractors Choose BuildTrades"
          description="We specialize in websites designed for the trades. Every feature is built with contractors and service businesses in mind."
          tag="Features"
          tagIcon={CheckCircle}
          tagAnimation="slide-up"
          features={[
            {
              id: "1",              title: "Project Portfolio Gallery",              description:
                "Showcase your best work with high-quality before-and-after photo galleries. Let your projects speak for themselves and build trust with potential clients.",              media: {
                imageSrc:
                  "https://webuild-dev.s3.eu-north-1.amazonaws.com/users/user_3AQUTdG9bI9SIob3c5ogoGiecMG/a-beautiful-home-renovation-website-feat-1772524385305-8eee5654.png?_wi=1"},
              items: [
                { icon: Image, text: "Professional photo galleries" },
                { icon: Star, text: "Before & after sliders" },
                { icon: Award, text: "Project showcase sections" },
              ],
              reverse: false,
            },
            {
              id: "2",              title: "Service-Based Design",              description:
                "Designed specifically for service and trade businesses. Highlight your services, service areas, certifications, and what makes your business unique.",              media: {
                imageSrc:
                  "https://webuild-dev.s3.eu-north-1.amazonaws.com/users/user_3AQUTdG9bI9SIob3c5ogoGiecMG/a-professional-hvac-and-plumbing-service-1772524382687-b79f1d72.png?_wi=1"},
              items: [
                { icon: Zap, text: "Service listings" },
                { icon: MapPin, text: "Service area coverage" },
                { icon: Shield, text: "Certifications display" },
              ],
              reverse: true,
            },
            {
              id: "3",              title: "Lead Capture & Contact",              description:
                "Turn visitors into leads with easy contact forms, appointment booking, emergency callback requests, and clear phone numbers. Make it simple for customers to reach you.",              media: {
                imageSrc:
                  "https://webuild-dev.s3.eu-north-1.amazonaws.com/users/user_3AQUTdG9bI9SIob3c5ogoGiecMG/an-electrical-contractor-website-showcas-1772524389451-00faeefa.png?_wi=1"},
              items: [
                { icon: PhoneCall, text: "Click-to-call buttons" },
                { icon: Calendar, text: "Appointment scheduling" },
                { icon: Mail, text: "Lead capture forms" },
              ],
              reverse: false,
            },
          ]}
          textboxLayout="default"
          animationType="slide-up"
          useInvertedBackground={false}
        />
      </div>

      <div id="services" data-section="services">
        <FeatureCardTen
          title="Our Process: From Vision to Website"
          description="We follow a proven 3-step process to deliver high-quality websites quickly and efficiently."
          tag="How We Work"
          tagIcon={Workflow}
          tagAnimation="slide-up"
          features={[
            {
              id: "1",              title: "Discovery & Planning",              description:
                "We start by understanding your business, your target clients, and your goals. We'll discuss your unique value proposition, service offerings, and what makes you stand out.",              media: {
                imageSrc:
                  "https://webuild-dev.s3.eu-north-1.amazonaws.com/users/user_3AQUTdG9bI9SIob3c5ogoGiecMG/a-professional-consultation-meeting-betw-1772524380781-b8f17974.png?_wi=1"},
              items: [
                { icon: MessageCircle, text: "Detailed consultation" },
                { icon: Lightbulb, text: "Strategy development" },
                { icon: Layers, text: "Wireframe planning" },
              ],
              reverse: false,
            },
            {
              id: "2",              title: "Design & Development",              description:
                "Our team creates a beautiful, mobile-optimized website that reflects your brand and attracts your ideal clients. Every element is designed for conversions.",              media: {
                imageSrc:
                  "https://webuild-dev.s3.eu-north-1.amazonaws.com/users/user_3AQUTdG9bI9SIob3c5ogoGiecMG/a-web-designer-working-on-website-design-1772524383361-0a40889a.png"},
              items: [
                { icon: Palette, text: "Custom design" },
                { icon: Code, text: "Responsive development" },
                { icon: Smartphone, text: "Mobile optimization" },
              ],
              reverse: true,
            },
            {
              id: "3",              title: "Launch & Support",              description:
                "We launch your site, optimize for search engines, and provide ongoing support. Your website is now working hard to bring you new clients.",              media: {
                imageSrc:
                  "https://webuild-dev.s3.eu-north-1.amazonaws.com/users/user_3AQUTdG9bI9SIob3c5ogoGiecMG/a-fully-completed-polished-website-displ-1772524382026-fc7a2bff.png"},
              items: [
                { icon: Rocket, text: "Website launch" },
                { icon: Search, text: "SEO optimization" },
                { icon: Headphones, text: "Ongoing support" },
              ],
              reverse: false,
            },
          ]}
          textboxLayout="default"
          animationType="slide-up"
          useInvertedBackground={true}
        />
      </div>

      <div id="portfolio" data-section="portfolio">
        <ProductCardOne
          title="Recent Projects"
          description="See some of the websites we've built for contractors and service businesses across the country."
          tag="Portfolio"
          tagIcon={Briefcase}
          tagAnimation="slide-up"
          products={[
            {
              id: "1",              name: "HomeReno Kitchen Specialists",              price: "View Project",              imageSrc:
                "https://webuild-dev.s3.eu-north-1.amazonaws.com/users/user_3AQUTdG9bI9SIob3c5ogoGiecMG/a-beautiful-home-renovation-website-feat-1772524385305-8eee5654.png?_wi=2",              imageAlt: "Kitchen renovation specialist website"},
            {
              id: "2",              name: "QuickFix HVAC & Plumbing",              price: "View Project",              imageSrc:
                "https://webuild-dev.s3.eu-north-1.amazonaws.com/users/user_3AQUTdG9bI9SIob3c5ogoGiecMG/a-professional-hvac-and-plumbing-service-1772524382687-b79f1d72.png?_wi=2",              imageAlt: "HVAC and plumbing services website"},
            {
              id: "3",              name: "Elite Electrical Solutions",              price: "View Project",              imageSrc:
                "https://webuild-dev.s3.eu-north-1.amazonaws.com/users/user_3AQUTdG9bI9SIob3c5ogoGiecMG/an-electrical-contractor-website-showcas-1772524389451-00faeefa.png?_wi=2",              imageAlt: "Electrical contractor website"},
          ]}
          gridVariant="three-columns-all-equal-width"
          animationType="slide-up"
          textboxLayout="default"
          useInvertedBackground={false}
        />
      </div>

      <div id="testimonials" data-section="testimonials">
        <TestimonialCardTwo
          title="What Contractors Say About Us"
          description="Real feedback from real business owners who've grown their contractor businesses with a BuildTrades website."
          tag="Testimonials"
          tagIcon={MessageSquare}
          tagAnimation="slide-up"
          testimonials={[
            {
              id: "1",              name: "John Martinez",              role: "Owner, Martinez Home Services",              testimonial:
                "BuildTrades understood our business immediately. They built a website that actually brings us leads. Within 3 months, we had 40% more inquiries. Highly recommend!",              imageSrc:
                "https://webuild-dev.s3.eu-north-1.amazonaws.com/users/user_3AQUTdG9bI9SIob3c5ogoGiecMG/a-professional-headshot-of-a-satisfied-c-1772524380165-667bbd23.png?_wi=1",              imageAlt: "John Martinez - Home Services Owner"},
            {
              id: "2",              name: "Sarah Chen",              role: "CEO, ProBuild Renovations",              testimonial:
                "The portfolio gallery feature is incredible. Our before-and-afters really sell our work. The team was responsive and made the process smooth from start to finish.",              imageSrc:
                "https://webuild-dev.s3.eu-north-1.amazonaws.com/users/user_3AQUTdG9bI9SIob3c5ogoGiecMG/a-professional-headshot-of-a-female-cont-1772524381105-64a95cff.png?_wi=1",              imageAlt: "Sarah Chen - Renovation Company CEO"},
            {
              id: "3",              name: "Mike Thompson",              role: "Owner, Thompson Electric",              testimonial:
                "Best decision we made for the business. The website looks professional, loads fast, and I've gotten several high-quality leads from it. Worth every penny.",              imageSrc:
                "https://webuild-dev.s3.eu-north-1.amazonaws.com/users/user_3AQUTdG9bI9SIob3c5ogoGiecMG/a-professional-headshot-of-a-male-small--1772524380697-ec133f7c.png?_wi=1",              imageAlt: "Mike Thompson - Electrical Contractor"},
            {
              id: "4",              name: "Jessica Rodriguez",              role: "Operations Manager, Precision Plumbing",              testimonial:
                "The appointment booking system has saved us hours of back-and-forth phone calls. Our customers love how easy it is to schedule, and our team loves the efficiency.",              imageSrc:
                "https://webuild-dev.s3.eu-north-1.amazonaws.com/users/user_3AQUTdG9bI9SIob3c5ogoGiecMG/a-professional-headshot-of-a-female-trad-1772524380616-7fb0e272.png",              imageAlt: "Jessica Rodriguez - Plumbing Company"},
            {
              id: "5",              name: "Robert Chang",              role: "Owner, Chang Construction",              testimonial:
                "Professional, affordable, and built for contractors. They get what it's like running a service business. The support team is always there when you need them.",              imageSrc:
                "https://webuild-dev.s3.eu-north-1.amazonaws.com/users/user_3AQUTdG9bI9SIob3c5ogoGiecMG/a-professional-headshot-of-an-experience-1772524380768-828bd7f2.png",              imageAlt: "Robert Chang - Construction Company Owner"},
            {
              id: "6",              name: "Amanda Foster",              role: "Founder, Foster HVAC Services",              testimonial:
                "I compared several web designers, but BuildTrades really showed they understood the contractor industry. My new website has doubled my monthly leads!",              imageSrc:
                "https://webuild-dev.s3.eu-north-1.amazonaws.com/users/user_3AQUTdG9bI9SIob3c5ogoGiecMG/a-professional-headshot-of-a-successful--1772524380263-06abe806.png",              imageAlt: "Amanda Foster - HVAC Services Founder"},
          ]}
          animationType="slide-up"
          textboxLayout="default"
          useInvertedBackground={false}
        />
      </div>

      <div id="pricing" data-section="pricing">
        <PricingCardFive
          title="Simple, Transparent Pricing"
          description="Professional websites for contractors at prices that make sense. No hidden fees, no surprise costs."
          tag="Pricing"
          tagIcon={DollarSign}
          tagAnimation="slide-up"
          plans={[
            {
              id: "startup",              tag: "Starter Website",              tagIcon: Rocket,
              price: "$2,499",              period: "one-time",              description:
                "Perfect for getting started online. Includes everything you need to establish an online presence and start getting leads.",              button: { text: "Get Started", href: "#contact" },
              featuresTitle: "What's Included:",              features: [
                "5-7 page professional website",                "Mobile responsive design",                "Contact form & email integration",                "Basic SEO optimization",                "Social media links",                "1 month free support"],
            },
            {
              id: "professional",              tag: "Professional Package",              tagIcon: Star,
              price: "$4,999",              period: "one-time",              description:
                "Our most popular choice. Full-featured website designed to convert visitors into leads and clients.",              button: { text: "Choose Plan", href: "#contact" },
              featuresTitle: "What's Included:",              features: [
                "10-15 page custom website",                "Advanced portfolio gallery",                "Appointment scheduling system",                "Lead capture forms",                "Advanced SEO optimization",                "Blog section",                "Google Analytics setup",                "3 months free support",                "Monthly website maintenance"],
            },
            {
              id: "enterprise",              tag: "Enterprise Solution",              tagIcon: Award,
              price: "$8,999",              period: "one-time",              description:
                "Everything included in Professional plus advanced features for serious growth and full business automation.",              button: { text: "Request Demo", href: "#contact" },
              featuresTitle: "What's Included:",              features: [
                "20+ page fully custom website",                "E-commerce integration",                "Advanced booking system",                "Customer portal",                "Lead management system",                "Email marketing integration",                "Advanced analytics",                "1-on-1 strategy consulting",                "6 months free support",                "Priority support tier"],
            },
          ]}
          animationType="slide-up"
          textboxLayout="default"
          useInvertedBackground={true}
        />
      </div>

      <div id="faq" data-section="faq">
        <FaqSplitMedia
          title="Frequently Asked Questions"
          description="Have questions? We've got answers. If you don't find what you're looking for, reach out to our team."
          tag="FAQs"
          tagIcon={HelpCircle}
          tagAnimation="slide-up"
          faqs={[
            {
              id: "1",              title: "How long does it take to build my website?",              content:
                "Most projects are completed within 4-6 weeks from start to finish. This includes discovery, design, development, testing, and launch. We'll provide you with a specific timeline during our initial consultation."},
            {
              id: "2",              title: "Can I update my website myself?",              content:
                "Yes! We build sites with user-friendly content management systems. We provide training and documentation so you can update your portfolio, services, and pricing easily. Our support team is also available to help."},
            {
              id: "3",              title: "Will my website be mobile optimized?",              content:
                "Absolutely. All our websites are mobile-first responsive designs. Your site will look perfect on phones, tablets, and desktop computers. Google also favors mobile-friendly sites, which helps with rankings."},
            {
              id: "4",              title: "Do you offer SEO services?",              content:
                "Yes. Every website includes basic SEO optimization (on-page SEO, meta tags, site structure). Our Professional and Enterprise packages include advanced SEO. We also offer ongoing SEO services as an add-on."},
            {
              id: "5",              title: "What about website maintenance and updates?",              content:
                "We provide ongoing support with every plan. Professional and Enterprise packages include monthly maintenance. We handle security updates, backups, performance optimization, and can assist with content updates."},
            {
              id: "6",              title: "Can you integrate appointment booking or lead forms?",              content:
                "Yes! Professional and Enterprise packages include these features. We can integrate appointment scheduling, lead capture forms, contact forms, and lead management systems that work with your existing tools."},
            {
              id: "7",              title: "Do you provide hosting?",              content:
                "Yes, website hosting is included in all packages. We handle all the technical backend so you can focus on your business. Your site will be fast, secure, and always available."},
            {
              id: "8",              title: "What if I need changes after my site launches?",              content:
                "No problem. Every package includes free support for a set period (1-6 months depending on plan). After that, we offer affordable support packages for ongoing updates and maintenance."},
          ]}
          imageSrc="https://webuild-dev.s3.eu-north-1.amazonaws.com/users/user_3AQUTdG9bI9SIob3c5ogoGiecMG/a-helpful-customer-service-representativ-1772524380874-1ceecd4b.png?_wi=1"
          imageAlt="Customer support team helping with website questions"
          mediaPosition="right"
          mediaAnimation="slide-up"
          textboxLayout="default"
          faqsAnimation="slide-up"
          useInvertedBackground={false}
        />
      </div>

      <div id="contact" data-section="contact">
        <ContactSplitForm
          title="Ready to Grow Your Business?"
          description="Let's talk about your website. Tell us about your business, and we'll show you exactly how we can help you attract more clients and grow your bottom line."
          inputs={[
            {
              name: "fullName",              type: "text",              placeholder: "Your Full Name",              required: true,
            },
            {
              name: "businessEmail",              type: "email",              placeholder: "Business Email Address",              required: true,
            },
            {
              name: "businessName",              type: "text",              placeholder: "Business Name",              required: true,
            },
            {
              name: "serviceType",              type: "text",              placeholder: "Type of Service (e.g., Plumbing, Electrical, Renovation)"},
          ]}
          textarea={{
            name: "message",            placeholder:
              "Tell us about your business and what you're looking to achieve with a new website...",            rows: 5,
            required: true,
          }}
          useInvertedBackground={true}
          imageSrc="https://webuild-dev.s3.eu-north-1.amazonaws.com/users/user_3AQUTdG9bI9SIob3c5ogoGiecMG/a-professional-team-of-web-designers-and-1772524381824-5e8170ca.png?_wi=1"
          imageAlt="BuildTrades team collaborating on web projects"
          mediaPosition="right"
          mediaAnimation="slide-up"
          buttonText="Send Inquiry"
          onSubmit={(data) => {
            console.log("Form submitted:", data);
          }}
        />
      </div>

      <div id="footer" data-section="footer">
        <FooterBaseCard
          logoText="BuildTrades"
          columns={[
            {
              title: "Company",              items: [
                { label: "About Us", href: "/about" },
                { label: "Our Process", href: "#services" },
                { label: "Portfolio", href: "#portfolio" },
                { label: "Pricing", href: "/pricing" },
              ],
            },
            {
              title: "Services",              items: [
                { label: "Website Design", href: "#" },
                { label: "SEO Services", href: "#" },
                { label: "Lead Generation", href: "#" },
                { label: "Website Maintenance", href: "#" },
              ],
            },
            {
              title: "Resources",              items: [
                { label: "Blog", href: "#" },
                { label: "Case Studies", href: "#" },
                { label: "FAQ", href: "#faq" },
                { label: "Contact Us", href: "#contact" },
              ],
            },
            {
              title: "Connect",              items: [
                { label: "Facebook", href: "https://facebook.com" },
                { label: "LinkedIn", href: "https://linkedin.com" },
                { label: "Instagram", href: "https://instagram.com" },
                { label: "Email Us", href: "mailto:hello@buildtrades.com" },
              ],
            },
          ]}
          copyrightText="© 2025 BuildTrades. Professional Websites for Contractors & Trades Professionals."
          onPrivacyClick={() => {
            console.log("Privacy policy clicked");
          }}
        />
      </div>
    </ThemeProvider>
  );
}