"use client";

import { ThemeProvider } from "@/providers/themeProvider/ThemeProvider";
import NavbarStyleFullscreen from "@/components/navbar/NavbarStyleFullscreen/NavbarStyleFullscreen";
import FeatureBento from "@/components/sections/feature/FeatureBento";
import MetricCardSeven from "@/components/sections/metrics/MetricCardSeven";
import TestimonialCardSix from "@/components/sections/testimonial/TestimonialCardSix";
import FooterSimple from "@/components/sections/footer/FooterSimple";
import Link from "next/link";
import { TrendingUp, Star, Heart, ThumbsUp, Sparkles, HelpCircle, Shield } from "lucide-react";

export default function AboutPage() {
  const navItems = [
    { name: "Home", id: "home" },
    { name: "Streetwear", id: "streetwear" },
    { name: "Casuals", id: "casuals" },
    { name: "Specials", id: "specials" },
    { name: "Collections", id: "collections" },
    { name: "About", id: "about" },
  ];

  const footerColumns = [
    {
      title: "Shop",
      items: [
        { label: "Streetwear", href: "#streetwear" },
        { label: "Casuals", href: "#casuals" },
        { label: "Specials", href: "#specials" },
        { label: "Seasonal Drops", href: "#seasonal" },
        { label: "New Arrivals", href: "#new" },
      ],
    },
    {
      title: "Company",
      items: [
        { label: "About Us", href: "/about" },
        { label: "Our Story", href: "#story" },
        { label: "Careers", href: "#careers" },
        { label: "Press", href: "#press" },
        { label: "Blog", href: "#blog" },
      ],
    },
    {
      title: "Support",
      items: [
        { label: "Contact Us", href: "/contact" },
        { label: "FAQ", href: "#faq" },
        { label: "Shipping Info", href: "#shipping" },
        { label: "Returns", href: "#returns" },
        { label: "Track Order", href: "#track" },
      ],
    },
    {
      title: "Legal",
      items: [
        { label: "Privacy Policy", href: "#privacy" },
        { label: "Terms of Service", href: "#terms" },
        { label: "Refund Policy", href: "#refund" },
        { label: "Cookie Policy", href: "#cookies" },
        { label: "Accessibility", href: "#accessibility" },
      ],
    },
  ];

  return (
    <ThemeProvider
      defaultButtonVariant="hover-bubble"
      defaultTextAnimation="entrance-slide"
      borderRadius="soft"
      contentWidth="mediumSmall"
      sizing="mediumLargeSizeMediumTitles"
      background="aurora"
      cardStyle="soft-shadow"
      primaryButtonStyle="shadow"
      secondaryButtonStyle="radial-glow"
      headingFontWeight="medium"
    >
      <div id="nav" data-section="nav">
        <NavbarStyleFullscreen
          navItems={navItems}
          brandName="DripDrop"
          bottomLeftText="Luxury Fashion Curator"
          bottomRightText="hello@dripdrop.com"
        />
      </div>

      <div id="about-story" data-section="about-story" className="mx-auto px-4 md:px-6">
        <FeatureBento
          title="Our Journey to Excellence"
          description="DripDrop was born from a passion for luxury fashion and a vision to democratize premium style. We believe that exceptional craftsmanship and curated design should be accessible to fashion enthusiasts worldwide."
          tag="OUR STORY"
          tagIcon={Sparkles}
          tagAnimation="slide-up"
          buttons={[
            { text: "View Collection", href: "/" },
          ]}
          buttonAnimation="blur-reveal"
          textboxLayout="split"
          useInvertedBackground={false}
          animationType="blur-reveal"
          features={[
            {
              title: "Founded with Purpose",
              description: "In 2020, DripDrop started as a small project to connect fashion lovers with premium brands. Today, we serve 50K+ customers across 25+ countries.",
              bentoComponent: "icon-info-cards",
              items: [
                { icon: Star, label: "Quality First", value: "100% authentic" },
                { icon: Heart, label: "Customer Love", value: "99% satisfaction" },
                { icon: TrendingUp, label: "Rapid Growth", value: "500+ products" },
                { icon: Sparkles, label: "Exclusivity", value: "Curated drops" },
              ],
            },
            {
              title: "Our Core Values",
              description: "We stand for authenticity, sustainability, and customer satisfaction. Every piece in our collection is carefully selected to meet our uncompromising quality standards.",
              bentoComponent: "3d-stack-cards",
              items: [
                { icon: Shield, title: "Authenticity", subtitle: "100% Verified", detail: "Every product undergoes rigorous verification" },
                { icon: Sparkles, title: "Excellence", subtitle: "Premium Quality", detail: "Only the finest materials and craftsmanship" },
                { icon: Heart, title: "Community", subtitle: "Fashion Forward", detail: "Built for style enthusiasts worldwide" },
              ],
            },
            {
              title: "What We Believe",
              description: "Luxury fashion should inspire confidence, celebrate individuality, and make people feel like the best version of themselves.",
              bentoComponent: "timeline",
              heading: "DripDrop Timeline",
              subheading: "Our Growth Story",
              items: [
                { label: "2020", detail: "Founded with a vision to curate luxury fashion" },
                { label: "2021", detail: "Expanded to 5K+ customers across India" },
                { label: "2023", detail: "Reached 50K+ customers in 25+ countries" },
              ],
              completedLabel: "Milestone achieved",
            },
          ]}
          carouselMode="buttons"
          ariaLabel="About DripDrop story and values"
        />
      </div>

      <div id="about-metrics" data-section="about-metrics" className="mx-auto px-4 md:px-6">
        <MetricCardSeven
          title="Why Fashion Lovers Trust DripDrop"
          description="Our commitment to excellence reflects in every interaction and transaction. These numbers represent the trust and satisfaction of our community."
          tag="COMMUNITY TRUST"
          tagIcon={Shield}
          tagAnimation="slide-up"
          buttons={[
            { text: "Join Our Community", href: "/" },
          ]}
          buttonAnimation="blur-reveal"
          textboxLayout="default"
          useInvertedBackground={false}
          animationType="depth-3d"
          metrics={[
            {
              id: "customers",
              value: "50K+",
              title: "Satisfied Customers",
              items: ["Worldwide reach", "99% satisfaction rate", "24/7 support"],
            },
            {
              id: "products",
              value: "500+",
              title: "Curated Products",
              items: ["Premium quality", "Exclusive collections", "Regular drops"],
            },
            {
              id: "countries",
              value: "25+",
              title: "Countries Served",
              items: ["Global shipping", "Multi-currency support", "Local partnerships"],
            },
            {
              id: "awards",
              value: "12",
              title: "Industry Awards",
              items: ["Best Fashion Platform", "Innovation Leader", "Customer Choice"],
            },
          ]}
          ariaLabel="DripDrop metrics and achievements"
        />
      </div>

      <div id="about-testimonials" data-section="about-testimonials" className="mx-auto px-4 md:px-6">
        <TestimonialCardSix
          title="Customer Stories"
          description="Hear from our community of fashion enthusiasts who have transformed their style with DripDrop. Real reviews from real customers who believe in our mission."
          tag="COMMUNITY VOICES"
          tagIcon={Heart}
          tagAnimation="slide-up"
          buttons={[
            { text: "Share Your Story", href: "/contact" },
          ]}
          buttonAnimation="blur-reveal"
          textboxLayout="default"
          useInvertedBackground={false}
          animationType="blur-reveal"
          testimonials={[
            {
              id: "testimonial-1",
              name: "Arjun Kumar",
              handle: "@arjunstyle",
              testimonial: "DripDrop completely changed how I approach fashion. The curation is impeccable, and the AI recommendations are eerily accurate. This is luxury made accessible.",
              imageSrc: "https://webuild-dev.s3.eu-north-1.amazonaws.com/users/user_3B9da18ZzGfu5qtsyVlZQDXliWw/a-professional-headshot-of-a-satisfied-l-1773905419556-bcdb5b91.png?_wi=2",
              imageAlt: "Arjun Kumar customer testimonial",
              icon: Star,
            },
            {
              id: "testimonial-2",
              name: "Priya Sharma",
              handle: "@priyafashion",
              testimonial: "The quality of DripDrop's collections is unmatched. Every piece feels premium, and the styling guides have helped me build a cohesive wardrobe. Highly recommended!",
              imageSrc: "https://webuild-dev.s3.eu-north-1.amazonaws.com/users/user_3B9da18ZzGfu5qtsyVlZQDXliWw/another-professional-headshot-of-a-satis-1773905421529-5cdcfa3d.png?_wi=2",
              imageAlt: "Priya Sharma customer testimonial",
              icon: Heart,
            },
            {
              id: "testimonial-3",
              name: "Rajesh Patel",
              handle: "@rajeshwear",
              testimonial: "Fast delivery, premium packaging, and exceptional customer service. DripDrop sets the standard for how luxury ecommerce should operate. I'm a customer for life!",
              imageSrc: "https://webuild-dev.s3.eu-north-1.amazonaws.com/users/user_3B9da18ZzGfu5qtsyVlZQDXliWw/a-professional-headshot-of-a-luxury-fash-1773905418969-b6f3bc7c.png?_wi=2",
              imageAlt: "Rajesh Patel customer testimonial",
              icon: ThumbsUp,
            },
            {
              id: "testimonial-4",
              name: "Neha Desai",
              handle: "@neha_luxe",
              testimonial: "Every interaction with DripDrop feels premium. From browsing to checkout to delivery, it's a seamless luxury experience. This is how I want to shop.",
              imageSrc: "https://webuild-dev.s3.eu-north-1.amazonaws.com/users/user_3B9da18ZzGfu5qtsyVlZQDXliWw/a-professional-portrait-of-a-customer-in-1773905419689-f702ac6f.png?_wi=2",
              imageAlt: "Neha Desai customer testimonial",
              icon: Sparkles,
            },
          ]}
          speed={40}
          topMarqueeDirection="left"
          ariaLabel="Customer testimonials about DripDrop"
        />
      </div>

      <div id="footer" data-section="footer">
        <FooterSimple
          columns={footerColumns}
          bottomLeftText="© 2024 DripDrop. All rights reserved. Premium fashion, worldwide."
          bottomRightText="Secure checkout powered by Razorpay & Stripe"
          ariaLabel="Site footer with navigation and legal information"
        />
      </div>
    </ThemeProvider>
  );
}