"use client"

import { ThemeProvider } from "@/providers/themeProvider/ThemeProvider";
import NavbarLayoutFloatingInline from '@/components/navbar/NavbarLayoutFloatingInline';
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';

export default function LandingPage() {
  return (
    <ThemeProvider
      defaultButtonVariant="expand-hover"
      defaultTextAnimation="reveal-blur"
      borderRadius="soft"
      contentWidth="smallMedium"
      sizing="largeSizeMediumTitles"
      background="aurora"
      cardStyle="glass-elevated"
      primaryButtonStyle="double-inset"
      secondaryButtonStyle="solid"
      headingFontWeight="bold"
    >
      <div id="nav" data-section="nav">
        <NavbarLayoutFloatingInline
          brandName="Studio"
          navItems={[
            { name: "Work", id: "projects" },
            { name: "Philosophy", id: "philosophy" },
            { name: "Contact", id: "contact" }
          ]}
          button={{
            text: "Inquire",            href: "contact"
          }}
          className="text-xs tracking-widest uppercase"
          navItemClassName="text-sm font-light tracking-wide"
          buttonClassName="px-6 py-2 text-xs uppercase tracking-widest"
          buttonTextClassName="font-light"
        />
      </div>

      <div id="hero" data-section="hero">
        <HeroSplit
          title="Timeless Architecture"
          description="We craft spaces that transcend trend, marrying restraint with precision. Each project is a dialogue between site, material, and intention."
          imagePosition="right"
          imageSrc="https://img.b2bpic.net/free-photo/minimalist-architectural-building-details_23-2151870844.jpg"
          imageAlt="modern building architecture minimalist interior concrete"
          buttons={[
            { text: "View Work", href: "projects" }
          ]}
          className="py-24 md:py-32"
          containerClassName="max-w-7xl"
          titleClassName="text-5xl md:text-7xl font-light tracking-tight leading-tight"
          descriptionClassName="text-lg md:text-xl font-light leading-relaxed text-opacity-80"
          buttonClassName="px-8 py-3 text-sm uppercase tracking-widest"
        />
      </div>

      <div id="philosophy" data-section="philosophy">
        <TextAbout
          title="We believe architecture should speak quietly. Good design requires no explanation—it exists with purpose and restraint, allowing inhabitants to inhabit space without distraction. Our practice centers on understanding context, respecting material honesty, and creating timeless environments."
          useInvertedBackground="noInvert"
          className="py-32 md:py-48"
          containerClassName="max-w-4xl"
          titleClassName="text-3xl md:text-5xl font-light leading-relaxed text-center"
        />
      </div>

      <div id="projects" data-section="projects">
        <FeatureCardSix
          title="Selected Projects"
          description="Recent work exploring materiality, form, and spatial integrity"
          textboxLayout="default"
          useInvertedBackground="invertDefault"
          features={[
            {
              id: 1,
              title: "Riverside Residence",              description: "A private home responding to its landscape. Concrete, glass, and timber create a dialogue between structure and nature. Site-specific design honoring the waterfront context.",              imageSrc: "https://img.b2bpic.net/free-photo/city-building-sky_23-2148107055.jpg"
            },
            {
              id: 2,
              title: "Corporate Headquarters",              description: "Minimal office complex emphasizing natural light and material authenticity. Steel structure with stone cladding defines a calm, focused work environment.",              imageSrc: "https://img.b2bpic.net/free-photo/imposing-building-near-smaller-black-building_23-2148252731.jpg"
            },
            {
              id: 3,
              title: "Urban Studio",              description: "Adaptive reuse of an industrial warehouse into creative workspace. Careful preservation of existing structure with restrained new interventions.",              imageSrc: "https://img.b2bpic.net/free-photo/concrete-structure-blue-sky_181624-5763.jpg"
            },
            {
              id: 4,
              title: "Botanical Pavilion",              description: "Public garden structure exploring sustainable materials and transparent design. Steel framework with living walls creates a permeable space for community gathering.",              imageSrc: "https://img.b2bpic.net/free-photo/white-facade-modern-building_181624-6180.jpg"
            }
          ]}
          className="py-32 md:py-48"
          containerClassName="max-w-7xl"
          textBoxTitleClassName="text-4xl md:text-6xl font-light tracking-tight"
          textBoxDescriptionClassName="text-base md:text-lg font-light text-opacity-70"
          cardTitleClassName="text-3xl md:text-4xl font-light tracking-tight mb-4"
          cardDescriptionClassName="text-base md:text-lg font-light leading-relaxed text-opacity-75"
          stepNumberClassName="text-5xl font-light text-opacity-30 mb-8"
        />
      </div>

      <div id="metrics" data-section="metrics">
        <MetricCardTwo
          title="Our Practice"
          description="Metrics that matter to us"
          textboxLayout="default"
          useInvertedBackground="noInvert"
          gridVariant="uniform-all-items-equal"
          animationType="slide-up"
          metrics={[
            {
              id: "1",              value: "18+",              description: "Years of Practice"
            },
            {
              id: "2",              value: "120+",              description: "Completed Projects"
            },
            {
              id: "3",              value: "4",              description: "Principal Architects"
            },
            {
              id: "4",              value: "42",              description: "Studio Team Members"
            }
          ]}
          className="py-24 md:py-32"
          containerClassName="max-w-7xl"
          textBoxTitleClassName="text-3xl md:text-4xl font-light tracking-tight mb-2"
          textBoxDescriptionClassName="text-base font-light text-opacity-60"
          valueClassName="text-6xl md:text-7xl font-light"
          metricDescriptionClassName="text-sm md:text-base font-light uppercase tracking-wide text-opacity-60"
        />
      </div>

      <div id="contact" data-section="contact">
        <ContactSplit
          tag="Get in Touch"
          title="Let's Discuss Your Project"
          description="We explore commissions where thoughtful design and client vision align. Tell us about your space, your aspirations, your constraints."
          useInvertedBackground="invertDefault"
          imageSrc="https://img.b2bpic.net/free-photo/grey-concrete-building-blue-sky_181624-6496.jpg"
          imageAlt="studio workspace architects design drafting collaboration"
          mediaPosition="right"
          inputPlaceholder="your@email.com"
          buttonText="Send"
          termsText="We respect your inquiry. Connect with us within 48 hours."
          className="py-32 md:py-48"
          containerClassName="max-w-7xl"
          tagClassName="text-sm uppercase tracking-widest font-light"
          titleClassName="text-4xl md:text-5xl font-light tracking-tight leading-tight mt-4"
          descriptionClassName="text-base md:text-lg font-light leading-relaxed text-opacity-75 mt-6"
          buttonClassName="px-8 py-3 text-sm uppercase tracking-widest"
          termsClassName="text-sm font-light text-opacity-60 mt-4"
        />
      </div>

      <div id="footer" data-section="footer">
        <FooterBaseReveal
          columns={[
            {
              title: "Studio",              items: [
                { label: "About", href: "philosophy" },
                { label: "Work", href: "projects" }
              ]
            },
            {
              title: "Connect",              items: [
                { label: "hello@studiox.com", href: "#" },
                { label: "Contact", href: "contact" }
              ]
            },
            {
              title: "Practice",              items: [
                { label: "Residential", href: "#" },
                { label: "Commercial", href: "#" },
                { label: "Adaptive Reuse", href: "#" }
              ]
            }
          ]}
          copyrightText="© 2025 Studio. Timeless architecture."
          className="border-t border-opacity-20"
          containerClassName="max-w-7xl"
          columnTitleClassName="text-base uppercase tracking-widest font-light mb-6"
          columnItemClassName="text-base font-light text-opacity-70 hover:text-opacity-100 transition-opacity"
          copyrightTextClassName="text-sm font-light text-opacity-50"
        />
      </div>
    </ThemeProvider>
  );
}
