"use client";

import { ThemeProvider } from "@/providers/themeProvider/ThemeProvider";
import ReactLenis from "lenis/react";
import { Zap, Sparkles, Award, Shield, Frame } from "lucide-react";
import ContactText from '@/components/sections/contact/ContactText';
import FaqDouble from '@/components/sections/faq/FaqDouble';
import FeatureCardTwentySix from '@/components/sections/feature/FeatureCardTwentySix';
import FooterBase from '@/components/sections/footer/FooterBase';
import HeroBillboardGallery from '@/components/sections/hero/HeroBillboardGallery';
import NavbarLayoutFloatingOverlay from '@/components/navbar/NavbarLayoutFloatingOverlay/NavbarLayoutFloatingOverlay';
import ProductCardThree from '@/components/sections/product/ProductCardThree';
import SplitAbout from '@/components/sections/about/SplitAbout';
import TestimonialCardOne from '@/components/sections/testimonial/TestimonialCardOne';

export default function LandingPage() {
  return (
    <ThemeProvider
        defaultButtonVariant="shift-hover"
        defaultTextAnimation="reveal-blur"
        borderRadius="pill"
        contentWidth="medium"
        sizing="medium"
        background="circleGradient"
        cardStyle="glass-elevated"
        primaryButtonStyle="gradient"
        secondaryButtonStyle="glass"
        headingFontWeight="normal"
    >
      <ReactLenis root>
        <div id="nav" data-section="nav">
            <NavbarLayoutFloatingOverlay
            navItems={[
                { name: "Home", id: "#hero" },
                { name: "About", id: "#about" },
                { name: "Collection", id: "#products" },
                { name: "Contact", id: "#contact" }
            ]}
            brandName="Sinister Sisters"
            />
        </div>

        <div id="hero" data-section="hero">
            <HeroBillboardGallery
            background={{ variant: "radial-gradient" }}
            title="Where Darkness Becomes Luxury"
            description="Step into an atmospheric sanctuary of rare antiques, bespoke decor, and curated mystique. Sinister Sisters is where the beautifully dark come to belong."
            buttons={[{ text: "Enter the Sanctuary", href: "#about" }]}
            mediaItems={[
                { videoSrc: "https://videos.b2bpic.net/gothic_candles_v1.mp4", videoAriaLabel: "Gothic sanctuary interior" },
                { videoSrc: "https://videos.b2bpic.net/skull_candle_v1.mp4", videoAriaLabel: "Curated dark decor" },
                { videoSrc: "https://videos.b2bpic.net/vintage_objects_v1.mp4", videoAriaLabel: "Atmospheric boutique detail" },
                { videoSrc: "https://videos.b2bpic.net/shadowy_elegance_v1.mp4", videoAriaLabel: "Shadowy elegance" },
                { videoSrc: "https://videos.b2bpic.net/marble_bust_v1.mp4", videoAriaLabel: "Antique luxury pieces" }
            ]}
            mediaAnimation="blur-reveal"
            />
        </div>

        <div id="about" data-section="about">
            <SplitAbout
            textboxLayout="split"
            useInvertedBackground={true}
            title="A Sanctuary of Curated Mystique"
            description="We believe darkness is not an absence of light, but a presence of depth. Sinister Sisters offers a hand-picked collection of antiques and bespoke items for those who find beauty in the shadows and seek soul in their surroundings."
            bulletPoints={[
                { title: "Rare Antiques", description: "Authentic pieces sourced for history and character." },
                { title: "Bespoke Decor", description: "Custom artisan pieces exclusive to our shop." },
                { title: "Atmospheric Curation", description: "A sensory shopping experience like no other." }
            ]}
            videoSrc="https://videos.b2bpic.net/boutique_interior_v1.mp4"
            videoAriaLabel="Sinister Sisters boutique interior"
            mediaAnimation="blur-reveal"
            />
        </div>

        <div id="features" data-section="features">
            <FeatureCardTwentySix
            textboxLayout="default"
            useInvertedBackground={false}
            features={[
                { title: "Private Consultations", description: "Personalized aesthetic planning for your space.", buttonIcon: Zap, videoSrc: "https://videos.b2bpic.net/vintage_watch_v1.mp4", videoAriaLabel: "gothic vintage pocket watch decor" },
                { title: "Seasonal Collections", description: "Changing displays to match the shifting seasons.", buttonIcon: Sparkles, videoSrc: "https://videos.b2bpic.net/candle_arrangement_v1.mp4", videoAriaLabel: "gothic vintage pocket watch decor" },
                { title: "Artisan Partnerships", description: "Supporting local makers of dark luxury art.", buttonIcon: Award, videoSrc: "https://videos.b2bpic.net/skull_candle_v2.mp4", videoAriaLabel: "gothic vintage pocket watch decor" },
                { title: "Global Sourcing", description: "Finding the rare and unusual worldwide.", buttonIcon: Shield, videoSrc: "https://videos.b2bpic.net/vintage_objects_v2.mp4", videoAriaLabel: "gothic vintage pocket watch decor" },
                { title: "Bespoke Framing", description: "Custom-fitted ornate frames for your dark collection.", buttonIcon: Frame, videoSrc: "https://videos.b2bpic.net/boutique_interior_v2.mp4", videoAriaLabel: "gothic vintage pocket watch decor" }
            ]}
            title="The Sinister Experience"
            description="More than a shop, we provide an immersive aesthetic journey for the discerning dark decor collector."
            />
        </div>

        <div id="products" data-section="products">
            <ProductCardThree
            animationType="slide-up"
            textboxLayout="default"
            gridVariant="three-columns-all-equal-width"
            useInvertedBackground={true}
            products={[
                { id: "p1", name: "Victorian Candlestick", price: "$125", imageSrc: "http://img.b2bpic.net/free-photo/vintage-chandelier-two-positions-white-background-studio-photo-vintage-retro-old-fashioned-style-candle-holder_482257-33029.jpg" },
                { id: "p2", name: "Velvet Raven Cushion", price: "$85", imageSrc: "http://img.b2bpic.net/free-photo/garlic-with-twigs-near-frame_23-2147694973.jpg" },
                { id: "p3", name: "Ornate Bone Frame", price: "$195", imageSrc: "http://img.b2bpic.net/free-vector/rectangular-ornamental-frame-black-background_1115-649.jpg" },
                { id: "p4", name: "Glazed Crypt Jar", price: "$140", imageSrc: "http://img.b2bpic.net/free-photo/vintage-antique-ancient-kettle-marble-background_114579-46793.jpg" },
                { id: "p5", name: "Obsidian Figurine", price: "$320", imageSrc: "http://img.b2bpic.net/free-photo/witch-hand-with-long-nails_23-2147680165.jpg" }
            ]}
            title="Curated Collections"
            description="Explore our current selection of rare finds and bespoke gothic creations."
            />
        </div>

        <div id="testimonials" data-section="testimonials">
            <TestimonialCardOne
            textboxLayout="default"
            gridVariant="three-columns-all-equal-width"
            useInvertedBackground={false}
            animationType="slide-up"
            testimonials={[
                { id: "t1", name: "Evelyn Thorne", role: "Collector", company: "Dark Aesthetic", rating: 5, videoSrc: "https://videos.b2bpic.net/woman_projector_v1.mp4", videoAriaLabel: "Evelyn Thorne testimonial video" },
                { id: "t2", name: "Victor Blackwood", role: "Architect", company: "Blackwood Studio", rating: 5, videoSrc: "https://videos.b2bpic.net/goth_student_v1.mp4", videoAriaLabel: "Victor Blackwood testimonial video" },
                { id: "t3", name: "Morgana Le Fey", role: "Curator", company: "Mystic Arts", rating: 5, videoSrc: "https://videos.b2bpic.net/woman_casual_v1.mp4", videoAriaLabel: "Morgana Le Fey testimonial video" },
                { id: "t4", name: "Dorian Grey", role: "Designer", company: "Grey Interiors", rating: 5, videoSrc: "https://videos.b2bpic.net/woman_exhausted_v1.mp4", videoAriaLabel: "Dorian Grey testimonial video" },
                { id: "t5", name: "Lenore Raven", role: "Collector", company: "Shadow Lane", rating: 5, videoSrc: "https://videos.b2bpic.net/man_cane_v1.mp4", videoAriaLabel: "Lenore Raven testimonial video" }
            ]}
            title="Voices from the Shadows"
            description="Discover what our devoted patrons say about their encounters within our sanctuary."
            />
        </div>

        <div id="faq" data-section="faq">
            <FaqDouble
            textboxLayout="default"
            useInvertedBackground={true}
            faqs={[
                { id: "q1", title: "Do you ship items internationally?", content: "Yes, we carefully pack and ship select items worldwide." },
                { id: "q2", title: "Are your antiques authentic?", content: "Absolutely. Every piece undergoes rigorous verification." },
                { id: "q3", title: "Can I visit your physical location?", content: "We invite you to step into the sanctuary anytime during our operating hours." },
                { id: "q4", title: "Do you accept custom commissions?", content: "Our artisans do accept limited, select commissions periodically." },
                { id: "q5", title: "Is the shop haunted?", content: "We prefer the term 'spiritually animated' by history and atmosphere." }
            ]}
            title="Frequently Whispered"
            description="Answers to common questions about our shop and our curation process."
            faqsAnimation="slide-up"
            />
        </div>

        <div id="contact" data-section="contact">
            <ContactText
            useInvertedBackground={false}
            background={{ variant: "gradient-bars" }}
            text="The sanctuary awaits. Visit us or reach out for inquiries about our current collections and bespoke services."
            buttons={[{ text: "Get Directions", href: "#" }]}
            />
        </div>

        <div id="footer" data-section="footer">
            <FooterBase
            columns={[
                { title: "Boutique", items: [{ label: "About Us", href: "#about" }, { label: "Collections", href: "#products" }] },
                { title: "Support", items: [{ label: "FAQ", href: "#faq" }, { label: "Contact", href: "#contact" }] },
                { title: "Legal", items: [{ label: "Privacy Policy", href: "#" }, { label: "Terms of Service", href: "#" }] }
            ]}
            logoText="Sinister Sisters"
            />
        </div>
      </ReactLenis>
    </ThemeProvider>
  );
}