"use client";

import { ThemeProvider } from "@/providers/themeProvider/ThemeProvider";
import NavbarLayoutFloatingOverlay from '@/components/navbar/NavbarLayoutFloatingOverlay/NavbarLayoutFloatingOverlay';
import HeroBillboardSplit from '@/components/sections/hero/HeroBillboardSplit';
import TagMediaSplitAbout from '@/components/sections/about/TagMediaSplitAbout';
import FeatureCardThree from '@/components/sections/feature/featureCardThree/FeatureCardThree';
import ProductCardThree from '@/components/sections/product/ProductCardThree';
import MetricCardFourteen from '@/components/sections/metrics/MetricCardFourteen';
import TestimonialCardFifteen from '@/components/sections/testimonial/TestimonialCardFifteen';
import ContactSplit from '@/components/sections/contact/ContactSplit';
import FooterBase from '@/components/sections/footer/FooterBase';
import { Coffee, Leaf, Target, Mail } from 'lucide-react';

export default function CoffePage() {
  return (
    <ThemeProvider
      defaultButtonVariant="text-shift"
      defaultTextAnimation="entrance-slide"
      borderRadius="sharp"
      contentWidth="mediumLarge"
      sizing="medium"
      background="circleGradient"
      cardStyle="elevated-accent"
      primaryButtonStyle="flat"
      secondaryButtonStyle="solid"
      headingFontWeight="extrabold"
    >
      <div id="nav" data-section="nav">
        <NavbarLayoutFloatingOverlay
          brandName="CoffeeHub"
          navItems={[
            { name: "About", id: "about" },
            { name: "Products", id: "products" },
            { name: "Features", id: "features" },
            { name: "Contact", id: "contact" }
          ]}
          button={{
            text: "Order Now",            href: "products"
          }}
        />
      </div>

      <div id="hero" data-section="hero">
        <HeroBillboardSplit
          tag="Premium Coffee"
          tagIcon={Coffee}
          title="Exceptional Coffee for Every Moment"
          description="Handcrafted, ethically sourced, and perfectly roasted. Discover the coffee that transforms your daily ritual into something extraordinary."
          buttons={[
            { text: "Shop Now", href: "products" },
            { text: "Learn More", href: "about" }
          ]}
          imageSrc="https://img.b2bpic.net/free-photo/aerial-view-person-making-drip-coffee_53876-20644.jpg"
          imageAlt="Pour over coffee brewing"
          frameStyle="browser"
          className="w-full"
          containerClassName="px-4 md:px-8"
          titleClassName="font-extrabold text-4xl md:text-5xl"
          descriptionClassName="text-base md:text-lg"
        />
      </div>

      <div id="about" data-section="about">
        <TagMediaSplitAbout
          title="Our Story"
          description="We believe every cup of coffee tells a story. That's why we source directly from small farms, roast in small batches, and deliver excellence to your cup."
          tag="About Us"
          tagIcon={Leaf}
          textboxLayout="default"
          contentTag="OUR MISSION"
          contentTagIcon={Target}
          contentTitle="Coffee With Purpose"
          contentDescription="We're committed to sourcing the finest coffee beans from ethical suppliers around the world. Each batch is carefully roasted to bring out the unique flavors and characteristics that make specialty coffee extraordinary. Our mission is to make premium coffee accessible to everyone."
          contentButtons={[
            { text: "Explore Our Beans", href: "products" }
          ]}
          imageSrc="https://img.b2bpic.net/free-photo/aerial-view-person-making-drip-coffee_53876-30607.jpg"
          imageAlt="Premium coffee beans"
          imagePosition="right"
          useInvertedBackground="noInvert"
          containerClassName="px-4 md:px-8"
          contentTitleClassName="font-extrabold text-3xl md:text-4xl"
          contentDescriptionClassName="text-base md:text-lg"
        />
      </div>

      <div id="features" data-section="features">
        <FeatureCardThree
          title="Why Choose Our Coffee"
          description="We combine traditional roasting methods with modern quality standards to deliver exceptional coffee every single time."
          textboxLayout="default"
          features={[
            {
              id: "01",              title: "Fresh Roasted",              description: "Roasted to order and shipped within 48 hours to ensure maximum freshness and flavor.",              imageSrc: "https://img.b2bpic.net/free-photo/black-ground-coffee-barista-brews-drink-coffee-glass-jug_1157-47316.jpg",              imageAlt: "Fresh roasted coffee process"
            },
            {
              id: "02",              title: "Fair Trade Sourced",              description: "We work directly with farmers, ensuring ethical practices and sustainable livelihoods across coffee-growing regions.",              imageSrc: "https://img.b2bpic.net/free-photo/coffee-maker-coffee-shop_23-2148366609.jpg",              imageAlt: "Fair trade coffee farming"
            },
            {
              id: "03",              title: "Artisan Blended",              description: "Our master roasters craft unique blends that balance acidity, body, and flavor for a perfect cup every time.",              imageSrc: "https://img.b2bpic.net/free-photo/close-up-man-pouring-coffee-from-pot-filter_23-2148366666.jpg",              imageAlt: "Artisan coffee blending"
            }
          ]}
          gridVariant="three-columns-all-equal-width"
          animationType="slide-up"
          useInvertedBackground="invertDefault"
          containerClassName="px-4 md:px-8"
          cardTitleClassName="font-bold text-lg md:text-xl"
        />
      </div>

      <div id="products" data-section="products">
        <ProductCardThree
          title="Shop Our Collection"
          description="Select from our carefully curated selection of premium coffee blends. Each bag is freshly roasted and ready to transform your mornings."
          textboxLayout="default"
          products={[
            {
              id: "espresso",              name: "Espresso Intenso",              price: "$18.99",              imageSrc: "https://img.b2bpic.net/free-photo/vertical-shot-person-pouring-coffee-glass-black-background_181624-47216.jpg",              imageAlt: "Espresso Intenso dark roast coffee",              initialQuantity: 1
            },
            {
              id: "americano",              name: "Americano Balance",              price: "$16.99",              imageSrc: "https://img.b2bpic.net/free-photo/close-up-man-holding-coffee-filter_23-2148366691.jpg",              imageAlt: "Americano Balance medium roast",              initialQuantity: 1
            },
            {
              id: "latte",              name: "Latte Smooth",              price: "$15.99",              imageSrc: "https://img.b2bpic.net/free-photo/male-barista-brewing-coffee-alternative-method-pour_176420-14715.jpg",              imageAlt: "Latte Smooth light roast",              initialQuantity: 1
            },
            {
              id: "coldbrew",              name: "Cold Brew Concentrate",              price: "$17.99",              imageSrc: "https://img.b2bpic.net/free-photo/low-angle-coffee-process-work_23-2148366579.jpg",              imageAlt: "Cold Brew Concentrate",              initialQuantity: 1
            }
          ]}
          gridVariant="four-items-2x2-equal-grid"
          animationType="slide-up"
          useInvertedBackground="noInvert"
          containerClassName="px-4 md:px-8"
          titleClassName="font-extrabold text-3xl md:text-4xl"
          cardNameClassName="font-bold text-base"
        />
      </div>

      <div id="metrics" data-section="metrics">
        <MetricCardFourteen
          title="Making an Impact, One Cup at a Time"
          tag="Our Impact"
          metrics={[
            {
              id: "1",              value: "50K+",              description: "Coffee lovers served and counting every single day"
            },
            {
              id: "2",              value: "250T",              description: "Premium coffee beans sourced from ethical farmers globally"
            },
            {
              id: "3",              value: "100%",              description: "of our packaging is recyclable and environmentally conscious"
            },
            {
              id: "4",              value: "15",              description: "countries represented in our coffee bean sourcing network"
            }
          ]}
          useInvertedBackground="invertDefault"
          containerClassName="px-4 md:px-8"
          titleClassName="font-extrabold text-3xl md:text-4xl"
        />
      </div>

      <div id="testimonials" data-section="testimonials">
        <TestimonialCardFifteen
          testimonial="This coffee has completely transformed my morning routine. The quality is exceptional, and knowing it's ethically sourced makes every cup taste even better. I'm hooked."
          rating={5}
          author="Sarah Mitchell, Coffee Enthusiast"
          avatars={[
            {
              src: "https://img.b2bpic.net/free-photo/happy-professional_1098-12931.jpg",              alt: "Customer avatar 1"
            },
            {
              src: "https://img.b2bpic.net/free-photo/smiling-beautiful-middle-aged-business-woman_1262-3085.jpg",              alt: "Customer avatar 2"
            },
            {
              src: "https://img.b2bpic.net/free-photo/portrait-beautiful-business-office-business-center_1303-20365.jpg",              alt: "Customer avatar 3"
            },
            {
              src: "https://img.b2bpic.net/free-photo/casual-smile-street-style-background-spring_1139-777.jpg",              alt: "Customer avatar 4"
            },
            {
              src: "https://img.b2bpic.net/free-photo/portrait-woman-work-with-copy-space_23-2148826459.jpg",              alt: "Customer avatar 5"
            },
            {
              src: "https://img.b2bpic.net/free-photo/studio-portrait-successful-young-businesswoman_1262-5844.jpg",              alt: "Customer avatar 6"
            }
          ]}
          useInvertedBackground="noInvert"
          containerClassName="px-4 md:px-8"
          testimonialClassName="text-lg md:text-xl font-bold"
        />
      </div>

      <div id="contact" data-section="contact">
        <ContactSplit
          tag="Newsletter"
          tagIcon={Mail}
          title="Stay Updated on New Blends"
          description="Subscribe to our newsletter and be the first to know about exclusive blends, special offers, and coffee brewing tips from our expert roasters."
          useInvertedBackground="invertDefault"
          imageSrc="https://img.b2bpic.net/free-photo/barista-black-sweatshot-prepares-filtered-coffee-silver-teapot-beautiful-transparent-chrome-drip-coffee-maker-white-simple-weights-everything-thick-wooden-table-cafe-shop-steam_346278-496.jpg"
          imageAlt="Coffee setup and morning routine"
          mediaPosition="right"
          inputPlaceholder="Enter your email"
          buttonText="Subscribe"
          termsText="We respect your privacy. Unsubscribe anytime."
          containerClassName="px-4 md:px-8"
          titleClassName="font-extrabold text-3xl md:text-4xl"
        />
      </div>

      <div id="footer" data-section="footer">
        <FooterBase
          logoText="CoffeeHub"
          copyrightText="© 2025 | CoffeeHub. All rights reserved."
          columns={[
            {
              title: "Products",              items: [
                { label: "Shop Coffee", href: "products" },
                { label: "Bean Selection", href: "products" },
                { label: "Brewing Guides", href: "#" },
                { label: "Subscriptions", href: "#" }
              ]
            },
            {
              title: "Company",              items: [
                { label: "About Us", href: "about" },
                { label: "Our Story", href: "about" },
                { label: "Sustainability", href: "#" },
                { label: "Contact", href: "contact" }
              ]
            },
            {
              title: "Resources",              items: [
                { label: "Coffee Blog", href: "#" },
                { label: "Brewing Tips", href: "#" },
                { label: "FAQs", href: "#" },
                { label: "Support", href: "#" }
              ]
            }
          ]}
          containerClassName="px-4 md:px-8"
        />
      </div>
    </ThemeProvider>
  );
}