"use client";

import Link from "next/link";
import { ThemeProvider } from "@/providers/themeProvider/ThemeProvider";
import NavbarStyleApple from '@/components/navbar/NavbarStyleApple/NavbarStyleApple';
import TestimonialAboutCard from '@/components/sections/about/TestimonialAboutCard';
import ProductCardOne from '@/components/sections/product/ProductCardOne';
import MetricCardFourteen from '@/components/sections/metrics/MetricCardFourteen';
import FooterLogoReveal from '@/components/sections/footer/FooterLogoReveal';
import { Palette } from "lucide-react";

export default function BrandAPage() {
  const navItems = [
    { name: "Home", id: "/" },
    { name: "Brand A", id: "/brand-a" },
    { name: "Brand B", id: "/brand-b" },
    { name: "Brand C", id: "/brand-c" },
    { name: "About Us", id: "/about" },
    { name: "Contact", id: "/contact" },
  ];

  return (
    <ThemeProvider
      defaultButtonVariant="text-stagger"
      defaultTextAnimation="background-highlight"
      borderRadius="pill"
      contentWidth="mediumSmall"
      sizing="largeSmall"
      background="aurora"
      cardStyle="gradient-radial"
      primaryButtonStyle="diagonal-gradient"
      secondaryButtonStyle="solid"
      headingFontWeight="bold"
    >
      <div id="nav" data-section="nav">
        <NavbarStyleApple
          brandName="Italian Luxury Brands"
          navItems={navItems.map(item => ({
            name: item.name,
            id: item.id,
            href: item.id // Ensure href is passed for Link component
          }))}
        />
      </div>

      <div id="brand-a-about" data-section="brand-a-about">
        <TestimonialAboutCard
          tag="Brand A"
          title="Where Tradition Meets Tomorrow"
          description="Brand A is renowned for its dedication to preserving ancient Italian craftsmanship while embracing modern innovation. Each creation is a dialogue between past and future."
          subdescription="Our artisans are custodians of a timeless heritage, meticulously shaping materials into objects of desire and lasting value."
          icon={Palette}
          imageSrc="http://img.b2bpic.net/free-photo/close-up-person-holding-dough_23-2148296864.jpg"
          imageAlt="italian craftsmanship studio detailed"
          mediaAnimation="slide-up"
          useInvertedBackground={false}
        />
      </div>

      <div id="brand-a-products" data-section="brand-a-products">
        <ProductCardOne
          title="Exclusive Collections by Brand A"
          description="Explore the pinnacle of Brand A's artistry, featuring limited-edition watches, bespoke jewelry, and tailored apparel."
          products={[
            {"id":"ba-1","name":"Masterpiece Chronometer","price":"€25,000","imageSrc":"http://img.b2bpic.net/free-photo/close-up-seller-s-hands-gloves-shows-exclusive-men-s-watch-from-new-collection-luxury-jewelry-store_613910-20850.jpg","imageAlt":"luxurious limited edition watch"},
            {"id":"ba-2","name":"Celestial Diamond Necklace","price":"€50,000","imageSrc":"http://img.b2bpic.net/free-photo/fashion-portrait-blonde-caucasian-stylish-woman-french-cap-white-blazer_343596-2296.jpg","imageAlt":"exquisite diamond pendant necklace"},
            {"id":"ba-3","name":"The Connoisseur Suit","price":"€9,500","imageSrc":"http://img.b2bpic.net/free-photo/portrait-sexy-handsome-man-dressed-elegant-beige-checkered-suit_158538-4366.jpg","imageAlt":"bespoke tailored suit jacket"},
            {"id":"ba-4","name":"Legacy Leather Briefcase","price":"€3,800","imageSrc":"http://img.b2bpic.net/free-photo/side-view-man-traveling-by-train_23-2150510176.jpg","imageAlt":"handcrafted leather briefcase executive"},
            {"id":"ba-5","name":"Artisan Silk Tie","price":"€450","imageSrc":"http://img.b2bpic.net/free-photo/portrait-handsome-fashion-stylish-hipster-businessman-model-dressed-elegant-brown-suit-glasses-near-dark-wall_158538-11230.jpg","imageAlt":"designer silk tie elegant pattern"},
            {"id":"ba-6","name":"The Executive Fountain Pen","price":"€1,200","imageSrc":"http://img.b2bpic.net/free-photo/3d-rendering-pen-ai-generated_23-2150695521.jpg","imageAlt":"luxury fountain pen gold nib"}
          ]}
          gridVariant="two-columns-alternating-heights"
          animationType="slide-up"
          textboxLayout="default"
          useInvertedBackground={false}
        />
      </div>

      <div id="brand-a-metrics" data-section="brand-a-metrics">
        <MetricCardFourteen
          tag="Our Impact"
          title="A Legacy of Excellence"
          metrics={[
            {"id":"m1","value":"200+","description":"Years of heritage"},
            {"id":"m2","value":"99.9%","description":"Client satisfaction"},
            {"id":"m3","value":"10K+","description":"Unique creations"}
          ]}
          metricsAnimation="slide-up"
          useInvertedBackground={false}
        />
      </div>

      <div id="footer" data-section="footer">
        <FooterLogoReveal
          logoText="Italian Luxury Brands"
          logoSrc="https://webuild-dev.s3.eu-north-1.amazonaws.com/default/no-image.jpg?id=99p3ul"
          logoAlt="italian luxury brand elegant logo"
          leftLink={{ text: "Privacy Policy", href: "/privacy" }}
          rightLink={{ text: "Terms of Service", href: "/terms" }}
        />
      </div>
    </ThemeProvider>
  );
}
