"use client"

import { ThemeProvider } from "@/providers/themeProvider/ThemeProvider";
import NavbarStyleCentered from '@/components/navbar/NavbarStyleCentered/NavbarStyleCentered';
import HeroSplit from '@/components/sections/hero/HeroSplit';
import TextAbout from '@/components/sections/about/TextAbout';
import FeatureCardSix from '@/components/sections/feature/FeatureCardSix';
import MetricCardTwo from '@/components/sections/metrics/MetricCardTwo';
import ContactSplit from '@/components/sections/contact/ContactSplit';
import FooterBaseReveal from '@/components/sections/footer/FooterBaseReveal';
import { Sparkles, Target, Compass, BarChart3, Mail } from "lucide-react";
import TeamCardOne from '@/components/sections/team/TeamCardOne';

export default function LandingPage() {
  return (
    <ThemeProvider
      defaultButtonVariant="text-stagger"
      defaultTextAnimation="background-highlight"
      borderRadius="rounded"
      contentWidth="medium"
      sizing="medium"
      background="none"
      cardStyle="solid"
      primaryButtonStyle="shadow"
      secondaryButtonStyle="solid"
      headingFontWeight="medium"
    >
      <div id="nav" data-section="nav">
        <NavbarStyleCentered
          brandName="Archviz"
          navItems={[
            { name: "About", id: "about" },
            { name: "Process", id: "process" },
            { name: "Team", id: "team" },
            { name: "Contact", id: "contact" },
            { name: "Portfolio", id: "portfolio" }
          ]}
          button={{
            text: "Start Project",            href: "contact"
          }}
        />
      </div>

      <div id="hero" data-section="hero">
        <HeroSplit
          title="Transforming Spaces Into Experiences"
          description="We design thoughtfully crafted architectural solutions that blend innovation with timeless elegance. Every project tells a story of vision, precision, and unwavering commitment to excellence."
          tag="Award-Winning Design Studio"
          tagIcon={Sparkles}
          background={{ variant: "plain" }}
          imageSrc="https://img.b2bpic.net/free-photo/low-angle-shot-axis-towers-tbilisi-georgia-blue-sky_181624-61144.jpg"
          imageAlt="Modern architecture design"
          imagePosition="right"
          buttons={[
            { text: "View Our Work", href: "#portfolio" },
            { text: "Get In Touch", href: "contact" }
          ]}
        />
      </div>

      <div id="about" data-section="about">
        <TextAbout
          tag="Our Philosophy"
          tagIcon={Target}
          title="Architecture is the art of making spaces that inspire human connection and foster meaningful experiences."
          useInvertedBackground="noInvert"
          buttons={[
            { text: "Learn Our Story", href: "#about" }
          ]}
        />
      </div>

      <div id="process" data-section="process">
        <FeatureCardSix
          title="Our Design Process"
          description="A structured methodology ensuring every project achieves architectural excellence and client satisfaction."
          tag="Proven Approach"
          tagIcon={Compass}
          textboxLayout="default"
          useInvertedBackground="noInvert"
          features={[
            {
              id: 1,
              title: "Research & Discovery",              description: "Deep dive into site analysis, client objectives, and contextual understanding to establish a strong foundation for innovative design solutions.",              imageSrc: "https://img.b2bpic.net/free-photo/side-view-imposing-building-with-windows_23-2148252730.jpg",              imageAlt: "Research and discovery phase"
            },
            {
              id: 2,
              title: "Conceptual Development",              description: "Crafting multiple design concepts that balance aesthetic vision with functional requirements and sustainable practices.",              imageSrc: "https://img.b2bpic.net/free-photo/brown-building-exterior-metallic-staircase_250224-296.jpg",              imageAlt: "Conceptual design phase"
            },
            {
              id: 3,
              title: "Detailed Design",              description: "Refining concepts into comprehensive architectural documentation with technical precision and buildable solutions.",              imageSrc: "https://img.b2bpic.net/free-photo/vertical-low-angle-view-beige-metal-building-blue-sky_181624-6024.jpg",              imageAlt: "Detailed design execution"
            },
            {
              id: 4,
              title: "Project Delivery",              description: "Seamless handoff and ongoing support ensuring successful project realization and client satisfaction from design to completion.",              imageSrc: "https://img.b2bpic.net/free-photo/office-building-eith-stairs_116348-49.jpg",              imageAlt: "Project delivery and completion"
            }
          ]}
        />
      </div>

      <div id="metrics" data-section="metrics">
        <MetricCardTwo
          title="Our Impact"
          description="Measurable success across decades of architectural innovation and client partnerships."
          tag="Studio Statistics"
          tagIcon={BarChart3}
          textboxLayout="default"
          useInvertedBackground="noInvert"
          gridVariant="uniform-all-items-equal"
          animationType="slide-up"
          metrics={[
            {
              id: "1",              value: "150+",              description: "Completed Projects Worldwide"
            },
            {
              id: "2",              value: "25+",              description: "Years of Excellence"
            },
            {
              id: "3",              value: "98%",              description: "Client Satisfaction Rate"
            },
            {
              id: "4",              value: "45+",              description: "Design Awards"
            }
          ]}
        />
      </div>

      <div id="contact" data-section="contact">
        <ContactSplit
          tag="Stay Connected"
          tagIcon={Mail}
          title="Get Updates From Our Studio"
          description="Subscribe to receive insights on architectural trends, project updates, and exclusive design resources delivered straight to your inbox."
          background={{ variant: "plain" }}
          useInvertedBackground="noInvert"
          imageSrc="https://img.b2bpic.net/free-photo/join-us-register-newsletter-concept_53876-132697.jpg"
          imageAlt="Newsletter signup"
          mediaPosition="right"
          inputPlaceholder="your@email.com"
          buttonText="Subscribe"
          termsText="We respect your privacy. Unsubscribe at any time."
        />
      </div>

      <div id="team" data-section="team">
        <TeamCardOne
            members={[
                { id: "1", name: "Alice Johnson", role: "Lead Architect", imageSrc: "https://images.unsplash.com/photo-1519681393784-d120267933ba?w=800&q=80", imageAlt: "Alice Johnson, Lead Architect" },
                { id: "2", name: "Bob Smith", role: "3D Artist", imageSrc: "https://images.unsplash.com/photo-1519681393784-d120267933ba?w=800&q=80", imageAlt: "Bob Smith, 3D Artist" },
                { id: "3", name: "Charlie Brown", role: "Interior Designer", imageSrc: "https://images.unsplash.com/photo-1519681393784-d120267933ba?w=800&q=80", imageAlt: "Charlie Brown, Interior Designer" },
                { id: "4", name: "Diana Prince", role: "Project Manager", imageSrc: "https://images.unsplash.com/photo-1519681393784-d120267933ba?w=800&q=80", imageAlt: "Diana Prince, Project Manager" }
            ]}
            carouselMode="buttons"
            gridVariant="grid"
            animationType="slide"
            title="Meet Our Team"
            description="Our team of experts brings a wealth of experience and creativity to every project."
            textboxLayout="left"
            useInvertedBackground="none"
        />
      </div>

      <div id="footer" data-section="footer">
        <FooterBaseReveal
          columns={[
            {
              title: "Studio",              items: [
                { label: "About Us", href: "about" },
                { label: "Our Process", href: "process" },
                { label: "Team", href: "team" },
                { label: "Contact", href: "contact" }
              ]
            },
            {
              title: "Resources",              items: [
                { label: "Portfolio", href: "#portfolio" },
                { label: "Case Studies", href: "#" },
                { label: "Blog", href: "#" },
                { label: "Press", href: "#" }
              ]
            },
            {
              title: "Connect",              items: [
                { label: "LinkedIn", href: "https://linkedin.com" },
                { label: "Instagram", href: "https://instagram.com" },
                { label: "Twitter", href: "https://twitter.com" },
                { label: "Email", href: "mailto:hello@archviz.com" }
              ]
            }
          ]}
          copyrightText="© 2025 Archviz Design Studio. All rights reserved."
        />
      </div>
    </ThemeProvider>
  );
}