"use client";

import { ThemeProvider } from "@/providers/themeProvider/ThemeProvider";
import NavbarStyleFullscreen from '@/components/navbar/NavbarStyleFullscreen/NavbarStyleFullscreen';
import TextAbout from '@/components/sections/about/TextAbout';
import FeatureCardSeven from '@/components/sections/feature/FeatureCardSeven';
import MetricCardOne from '@/components/sections/metrics/MetricCardOne';
import FooterCard from '@/components/sections/footer/FooterCard';
import { Instagram, Phone, Mail, Calendar, DollarSign, Percent } from "lucide-react";

export default function SellWithUsPage() {
  return (
    <ThemeProvider
      defaultButtonVariant="directional-hover"
      defaultTextAnimation="background-highlight"
      borderRadius="pill"
      contentWidth="medium"
      sizing="mediumLarge"
      background="circleGradient"
      cardStyle="gradient-bordered"
      primaryButtonStyle="primary-glow"
      secondaryButtonStyle="layered"
      headingFontWeight="semibold"
    >
      <div id="nav" data-section="nav">
        <NavbarStyleFullscreen
          navItems={[
            { name: "Home", id: "/" },
            { name: "Shop", id: "/shop" },
            { name: "Sell With Us", id: "/sell-with-us" },
            { name: "Visit", id: "/visit" },
            { name: "FAQ", id: "/faq" },
            { name: "Contact", id: "/contact" }
          ]}
          brandName="La Loupe Vintage"
          bottomLeftText="San Diego, CA 92116"
          bottomRightText="619-578-2944"
        />
      </div>

      <div id="sell-intro" data-section="sell-intro">
        <TextAbout
          tag="Sell With Us"
          title="We are so happy you want to sell with us. We are known for our curated collection of wearable casual vintage from the 1960s through the 1990s."
          useInvertedBackground={false}
          buttons={[
            { text: "Book Appointment", href: "tel:619-578-2944" },
            { text: "Learn About Process", href: "#process" }
          ]}
        />
      </div>

      <div id="process" data-section="process">
        <FeatureCardSeven
          title="How to Sell With Us"
          description="A simple, friendly process to get your vintage pieces into the hands of lovers who'll treasure them."
          tag="Three Easy Steps"
          textboxLayout="default"
          animationType="blur-reveal"
          useInvertedBackground={true}
          features={[
            {
              id: 1,
              title: "Book an Appointment",              description: "Schedule a time that works for you. We require appointments (one per week max). Most appointments are a week or more in advance. No same-day appointments.",              imageSrc: "https://img.b2bpic.net/free-vector/calendar-template-design_742173-22539.jpg?_wi=2"
            },
            {
              id: 2,
              title: "Bring Your Pieces",              description: "Up to 40 items per visit. Bring your best finds—denim, tees, dresses, jackets, anything wearable from the 60s–90s. We focus on pieces we know our customers love.",              imageSrc: "https://img.b2bpic.net/free-photo/hand-woven-geometric-denim-area-rug-wooden-floor_169016-48934.jpg?_wi=2"
            },
            {
              id: 3,
              title: "Get Paid or Trade",              description: "Receive 30% cash value or 50% trade credit toward items in our shop. Quick evaluation, fair pricing, and support for keeping vintage in circulation.",              imageSrc: "https://img.b2bpic.net/free-photo/overhead-shot-person-collecting-donations-church-black-white_181624-42670.jpg?_wi=2"
            }
          ]}
        />
      </div>

      <div id="rates" data-section="rates">
        <MetricCardOne
          title="Fair Payout Rates"
          description="We offer competitive rates with flexible payment options to suit your needs."
          metrics={[
            {
              id: "1",              value: "30",              title: "Cash Payout",              description: "Immediate payment for your vintage finds",              icon: DollarSign
            },
            {
              id: "2",              value: "50",              title: "Trade Credit",              description: "Better value when shopping with us",              icon: Percent
            },
            {
              id: "3",              value: "40",              title: "Item Limit",              description: "Maximum items per appointment",              icon: Calendar
            }
          ]}
          gridVariant="uniform-all-items-equal"
          textboxLayout="default"
          animationType="slide-up"
          useInvertedBackground={false}
        />
      </div>

      <div id="footer" data-section="footer">
        <FooterCard
          logoText="La Loupe Vintage"
          copyrightText="© 2025 La Loupe Vintage | Buy • Sell • Trade — Late 60s–90s Vintage"
          socialLinks={[
            { icon: Instagram, href: "https://www.instagram.com/laloupevintage/", ariaLabel: "Follow us on Instagram" },
            { icon: Phone, href: "tel:619-578-2944", ariaLabel: "Call us" },
            { icon: Mail, href: "mailto:info@laloupevintage.com", ariaLabel: "Email us" }
          ]}
        />
      </div>
    </ThemeProvider>
  );
}