"use client";

import Link from "next/link";
import { ThemeProvider } from "@/providers/themeProvider/ThemeProvider";
import NavbarStyleCentered from "@/components/navbar/NavbarStyleCentered/NavbarStyleCentered";
import TextAbout from "@/components/sections/about/TextAbout";
import FeatureCardTwentySeven from "@/components/sections/feature/FeatureCardTwentySeven";
import TestimonialCardTen from "@/components/sections/testimonial/TestimonialCardTen";
import FooterCard from "@/components/sections/footer/FooterCard";
import { Instagram, Facebook, Twitter } from "lucide-react";

export default function OurStoryPage() {
  const navItems = [
    { name: "Home", id: "home" },
    { name: "Products", id: "products" },
    { name: "Our Story", id: "story" },
    { name: "Contact", id: "contact" },
  ];

  const navButton = {
    text: "Order Now",    href: "/products"};

  return (
    <ThemeProvider
      defaultButtonVariant="icon-arrow"
      defaultTextAnimation="background-highlight"
      borderRadius="pill"
      contentWidth="mediumSmall"
      sizing="medium"
      background="circleGradient"
      cardStyle="layered-gradient"
      primaryButtonStyle="shadow"
      secondaryButtonStyle="layered"
      headingFontWeight="normal"
    >
      <div id="nav" data-section="nav">
        <NavbarStyleCentered
          navItems={navItems}
          button={navButton}
          brandName="Fuego & Sabor"
        />
      </div>

      <div id="about" data-section="about">
        <TextAbout
          title="Our story begins in the volcanic soils of Jalisco, where four generations of family passion have cultivated the finest tequila and salsa traditions. From humble beginnings to global recognition, we remain committed to honoring ancestral methods while embracing the craft of authentic Mexican excellence."
          useInvertedBackground={false}
          buttons={[{ text: "Explore Our Products", href: "/products" }]}
        />
      </div>

      <div id="heritage" data-section="heritage">
        <FeatureCardTwentySeven
          title="Our Heritage & Values"
          description="Rooted in tradition, driven by passion for authentic Mexican craftsmanship"
          features={[
            {
              id: "1",              title: "Four Generations Strong",              description: "Since 1890, our family has dedicated itself to perfecting the art of tequila and salsa production. Each generation adds its own innovation while respecting time-honored techniques.",              imageSrc: "http://img.b2bpic.net/free-photo/woman-with-grandparents-working-together-country-side_23-2149518775.jpg",              imageAlt: "Family heritage and tradition"},
            {
              id: "2",              title: "Sustainable Practices",              description: "We believe in protecting the land that provides our ingredients. Our sustainable farming methods ensure future generations can continue our legacy responsibly.",              imageSrc: "http://img.b2bpic.net/free-photo/tropical-plants-trees-against-blue-sky_181624-27627.jpg",              imageAlt: "Sustainable agave farming"},
            {
              id: "3",              title: "Community First",              description: "Our success is built on supporting local artisans, fair trade practices, and giving back to the Jalisco communities that make our work possible.",              imageSrc: "http://img.b2bpic.net/free-photo/high-angle-colorful-items-arrangement_23-2149673017.jpg",              imageAlt: "Community and craftsmanship"},
          ]}
          textboxLayout="default"
          animationType="slide-up"
          useInvertedBackground={false}
          gridVariant="three-columns-all-equal-width"
        />
      </div>

      <div id="testimonials" data-section="testimonials">
        <TestimonialCardTen
          title="Stories from Our Community"
          description="Learn how Fuego & Sabor has become part of people's traditions and celebrations"
          testimonials={[
            {
              id: "1",              title: "A taste of home",              quote: "Growing up in Mexico and now living abroad, this tequila brings me back to my childhood. It's more than a product—it's a connection to my roots and family memories.",              name: "Maria Rodriguez",              role: "Chef & Food Critic",              imageSrc: "http://img.b2bpic.net/free-photo/portrait-woman-smiling-kitchen_107420-12357.jpg",              imageAlt: "Maria Rodriguez"},
            {
              id: "2",              title: "Supporting artisan traditions",              quote: "What impressed me most is their commitment to the community. Knowing that my purchase supports local artisans and sustainable practices makes every sip more meaningful.",              name: "Diego Hernandez",              role: "Restaurant Owner",              imageSrc: "http://img.b2bpic.net/free-photo/close-up-portrait-bearded-smiling-black-man-wool-suit_613910-15883.jpg",              imageAlt: "Diego Hernandez"},
            {
              id: "3",              title: "Legacy worth celebrating",              quote: "Meeting the family and learning their story transformed how I experience their products. This isn't just tequila and salsa—it's living history and dedication to craft.",              name: "Sofia Campos",              role: "Sommelier",              imageSrc: "http://img.b2bpic.net/free-photo/young-businesswoman-portrait-office_1262-1506.jpg",              imageAlt: "Sofia Campos"},
          ]}
          textboxLayout="default"
          useInvertedBackground={false}
        />
      </div>

      <div id="footer" data-section="footer">
        <FooterCard
          logoText="Fuego & Sabor"
          copyrightText="© 2025 Fuego & Sabor | Artisan Tequila & Salsa | All rights reserved"
          socialLinks={[
            { icon: Instagram, href: "https://instagram.com", ariaLabel: "Instagram" },
            { icon: Facebook, href: "https://facebook.com", ariaLabel: "Facebook" },
            { icon: Twitter, href: "https://twitter.com", ariaLabel: "Twitter" },
          ]}
        />
      </div>
    </ThemeProvider>
  );
}