"use client";

import { ThemeProvider } from "@/providers/themeProvider/ThemeProvider";
import ReactLenis from "lenis/react";
import ContactText from '@/components/sections/contact/ContactText';
import FaqSplitMedia from '@/components/sections/faq/FaqSplitMedia';
import FeatureCardNineteen from '@/components/sections/feature/FeatureCardNineteen';
import FooterSimple from '@/components/sections/footer/FooterSimple';
import HeroSplit from '@/components/sections/hero/HeroSplit';
import MetricSplitMediaAbout from '@/components/sections/about/MetricSplitMediaAbout';
import NavbarLayoutFloatingOverlay from '@/components/navbar/NavbarLayoutFloatingOverlay/NavbarLayoutFloatingOverlay';
import ProductCardOne from '@/components/sections/product/ProductCardOne';
import SocialProofOne from '@/components/sections/socialProof/SocialProofOne';
import TestimonialCardSix from '@/components/sections/testimonial/TestimonialCardSix';
import { Camera, Paintbrush } from "lucide-react";

export default function LandingPage() {
  return (
    <ThemeProvider
        defaultButtonVariant="text-stagger"
        defaultTextAnimation="entrance-slide"
        borderRadius="soft"
        contentWidth="mediumLarge"
        sizing="mediumLarge"
        background="fluid"
        cardStyle="glass-depth"
        primaryButtonStyle="double-inset"
        secondaryButtonStyle="layered"
        headingFontWeight="medium"
    >
      <ReactLenis root>
  <div id="nav" data-section="nav">
      <NavbarLayoutFloatingOverlay
      navItems={[
        {
          name: "Home",          id: "#home"},
        {
          name: "Collection",          id: "#collection"},
        {
          name: "About",          id: "#about"},
        {
          name: "Contact",          id: "#contact"},
      ]}
      logoSrc="http://img.b2bpic.net/free-vector/flat-design-y2k-logo-set_23-2150537468.jpg"
      logoAlt="SCRIBBLING PAD logo"
      brandName="SCRIBBLING PAD"
    />
  </div>

  <div id="home" data-section="home">
      <HeroSplit
      background={{
        variant: "plain"}}
      imagePosition="right"
      title="SCRIBBLING PAD"
      description="Wear The Chaos"
      buttons={[
        {
          text: "SHOP NOW",          href: "#collection"},
      ]}
      imageSrc="http://img.b2bpic.net/free-photo/portrait-night-with-flash_52683-109125.jpg"
      imageAlt="Model wearing SCRIBBLING PAD streetwear"
      mediaAnimation="slide-up"
      fixedMediaHeight={true}
      avatars={[
        {
          src: "http://img.b2bpic.net/free-photo/going-out-concept-with-girl-night_23-2148140730.jpg",          alt: "Avatar of a stylish person 1"},
        {
          src: "http://img.b2bpic.net/free-photo/vertical-photo-young-lady-leaning-wall-tunnel_114579-92564.jpg",          alt: "Avatar of a stylish person 2"},
        {
          src: "http://img.b2bpic.net/free-photo/young-handsome-african-american-man-posing-outdoors-paris-happy-smile-fashion-style-lights-evening-cafes_1321-3400.jpg",          alt: "Avatar of a stylish person 3"},
        {
          src: "http://img.b2bpic.net/free-photo/front-view-friends-taking-selfie-night_23-2150204415.jpg",          alt: "Avatar of a stylish person 4"},
        {
          src: "http://img.b2bpic.net/free-photo/person-using-eco-transport-new-york_23-2149219979.jpg",          alt: "Avatar of a stylish person 5"},
      ]}
      avatarText="Join 10K+ urban artists"
      marqueeItems={[
        {
          type: "image",          src: "http://img.b2bpic.net/free-vector/happy-new-year-2025-text-typography-design-element-flyer-banner-poster-design_460848-18792.jpg",          alt: "Event Promotion Graphic"},
        {
          type: "image",          src: "http://img.b2bpic.net/free-vector/minimalist-fashion-typography-logo-template_742173-7469.jpg",          alt: "Fashion Brand Logo"},
        {
          type: "text-icon",          text: "Bold Designs",          icon: Paintbrush,
        },
        {
          type: "image",          src: "http://img.b2bpic.net/free-vector/monocolor-y2k-streetwear-brand-logo-template_742173-17199.jpg",          alt: "Y2K Style Logo"},
        {
          type: "text-icon",          text: "Street Culture",          icon: Camera,
        },
      ]}
      marqueeSpeed={40}
      showMarqueeCard={true}
      buttonAnimation="slide-up"
    />
  </div>

  <div id="collection" data-section="collection">
      <ProductCardOne
      animationType="slide-up"
      textboxLayout="default"
      gridVariant="three-columns-all-equal-width"
      useInvertedBackground={true}
      products={[
        {
          id: "1",          name: "Black Oversized Tee",          price: "₹1,999",          imageSrc: "http://img.b2bpic.net/free-photo/full-shot-smiley-woman-moving-her-body_23-2149429032.jpg",          imageAlt: "Black Oversized Tee - Face Your Fear Collection"},
        {
          id: "2",          name: "Grey Oversized Tee",          price: "₹1,999",          imageSrc: "http://img.b2bpic.net/free-photo/expressive-young-girl-posing-studio_176474-75193.jpg",          imageAlt: "Grey Oversized Tee - Face Your Fear Collection"},
        {
          id: "3",          name: "White Oversized Tee",          price: "₹1,999",          imageSrc: "http://img.b2bpic.net/free-photo/beautiful-blonde-woman-posing-white-hoodie-leggings-posing-against-white-background_89887-1065.jpg",          imageAlt: "White Oversized Tee - Face Your Fear Collection"},
        {
          id: "4",          name: "Signature Hoodie",          price: "₹2,499",          imageSrc: "http://img.b2bpic.net/free-photo/young-adults-having-block-party_23-2149571523.jpg",          imageAlt: "Signature Graphic Hoodie"},
        {
          id: "5",          name: "Distressed Denim Jacket",          price: "₹3,999",          imageSrc: "http://img.b2bpic.net/free-photo/sad-contemplative-woman-sitting-by-lake_23-2150516215.jpg",          imageAlt: "Distressed Denim Jacket"},
        {
          id: "6",          name: "Urban Cargo Pants",          price: "₹2,899",          imageSrc: "http://img.b2bpic.net/free-photo/side-view-woman-with-skateboard_23-2148435995.jpg",          imageAlt: "Urban Cargo Pants"},
      ]}
      title="DROP 001 — FACE YOUR FEAR"
      description="Explore our latest collection, a manifestation of emotion and creativity on fabric. Each piece tells a story, urging you to face your fears with style."
      buttonAnimation="slide-up"
    />
  </div>

  <div id="about" data-section="about">
      <MetricSplitMediaAbout
      useInvertedBackground={false}
      title="OUR STORY"
      description="Scribbling Pad was born from sketchbooks filled with fear, chaos, emotion and creativity. Every piece starts as hand-drawn artwork before becoming wearable street culture. From notebook to street."
      metrics={[
        {
          value: "2026",          title: "Founded"},
        {
          value: "5+",          title: "Collections"},
        {
          value: "100%",          title: "Original Art"},
      ]}
      imageSrc="http://img.b2bpic.net/free-photo/pink-bubbles-dark-water_23-2147798278.jpg"
      imageAlt="Abstract art in a sketchbook"
      mediaAnimation="entrance-slide"
      metricsAnimation="slide-up"
    />
  </div>

  <div id="features" data-section="features">
      <FeatureCardNineteen
      textboxLayout="default"
      useInvertedBackground={true}
      features={[
        {
          tag: "Unique Designs",          title: "Hand-Drawn Authenticity",          subtitle: "Wearable Art",          description: "Every garment showcases original hand-drawn artwork, ensuring each piece is a unique statement.",          imageSrc: "http://img.b2bpic.net/free-photo/blue-textured-background-wavy-pattern-abstract-art_53876-128471.jpg",          imageAlt: "Hand-drawn art on fabric"},
        {
          tag: "Premium Quality",          title: "Crafted for the Streets",          subtitle: "Durability & Comfort",          description: "We use high-quality fabrics and meticulous craftsmanship to create durable and comfortable streetwear.",          imageSrc: "http://img.b2bpic.net/free-photo/professional-tailors-their-work_329181-14357.jpg",          imageAlt: "Close up of fabric texture"},
        {
          tag: "Self-Expression",          title: "Embrace Your Chaos",          subtitle: "Individuality",          description: "Our designs empower you to express your inner world, turning emotions into bold fashion statements.",          imageSrc: "http://img.b2bpic.net/free-photo/front-view-friends-posing-together_52683-88926.jpg",          imageAlt: "Diverse people expressing individuality through fashion"},
      ]}
      title="Unleash Your Inner Art"
      description="Every garment is a canvas, carrying the raw energy of hand-drawn art into the urban landscape. Embrace unique designs that speak to your individuality."
    />
  </div>

  <div id="social-proof" data-section="social-proof">
      <SocialProofOne
      textboxLayout="default"
      useInvertedBackground={false}
      names={[
        "Vogue India",        "GQ Street",        "Hypebeast",        "Complex",        "Fader",        "Highsnobiety",        "Fashion Journal"]}
      title="Featured by Style Icons"
      description="Our creations have graced runways and streets, worn by those who dare to define their own style. Join the movement."
      speed={50}
      showCard={false}
    />
  </div>

  <div id="testimonials" data-section="testimonials">
      <TestimonialCardSix
      animationType="slide-up"
      textboxLayout="default"
      useInvertedBackground={true}
      testimonials={[
        {
          id: "1",          name: "Rahul Sharma",          handle: "@rahul_urban",          testimonial: "Scribbling Pad isn't just clothing; it's a statement. The designs are incredibly unique and the quality is top-notch. My go-to for streetwear now!",          imageSrc: "http://img.b2bpic.net/free-photo/lifestyle-portrait-brunette-woman-with-long-hairs-red-cardigan-walking-through-street-windy-hairs-stylish-eyeglasses_273443-2039.jpg",          imageAlt: "Rahul Sharma"},
        {
          id: "2",          name: "Priya Singh",          handle: "@priya.streetstyle",          testimonial: "Absolutely love my oversized tee! It's super comfortable and the 'Face Your Fear' graphic is so powerful. Definitely wearing my chaos with pride.",          imageSrc: "http://img.b2bpic.net/free-photo/handsome-stylish-man-urban-outfit_1303-17744.jpg",          imageAlt: "Priya Singh"},
        {
          id: "3",          name: "Vikram Patel",          handle: "@vikram_threads",          testimonial: "The story behind Scribbling Pad resonates so much. It's rare to find a brand that blends raw emotion with such distinct street culture aesthetics. Highly recommend!",          imageSrc: "http://img.b2bpic.net/free-photo/cheerful-dark-skinned-teenager-with-charming-smile-dressed-casually-enjoys-spare-time_273609-18389.jpg",          imageAlt: "Vikram Patel"},
        {
          id: "4",          name: "Ananya Rao",          handle: "@ananya.artwear",          testimonial: "Finally, a brand that truly understands urban art and translates it into wearable fashion. Each piece feels like a canvas. Can't wait for the next drop!",          imageSrc: "http://img.b2bpic.net/free-photo/beautiful-redhead-woman-looking-away_23-2148321282.jpg",          imageAlt: "Ananya Rao"},
        {
          id: "5",          name: "Aditya Kumar",          handle: "@aditya.vogue",          testimonial: "The attention to detail and the unique artistic vision sets Scribbling Pad apart. It's more than just clothes; it's a movement. A must-have for any streetwear enthusiast.",          imageSrc: "http://img.b2bpic.net/free-photo/portrait-young-beautiful-brunette-woman-girl-model-with-nude-makeup-wearing-summer-hipster-biker-leather-jacket-clothes-sunglasses-posing-near-wall-showing-her-tongue-peace-sign_158538-8906.jpg",          imageAlt: "Aditya Kumar"}
      ]}
      title="Voices of the Street"
      description="Hear from our community of trendsetters and creators who wear their chaos with pride. Authenticity is our signature."
      speed={40}
      topMarqueeDirection="left"
      buttonAnimation="slide-up"
    />
  </div>

  <div id="faq" data-section="faq">
      <FaqSplitMedia
      textboxLayout="default"
      useInvertedBackground={false}
      faqs={[
        {
          id: "1",          title: "What is the 'Face Your Fear' collection about?",          content: "The 'Face Your Fear' collection is our debut drop, inspired by the raw emotions and chaos found in sketchbooks. Each design encourages self-expression and embracing individuality."},
        {
          id: "2",          title: "What materials are your products made from?",          content: "We prioritize premium quality and comfort. Our oversized tees are typically made from 100% heavy-weight cotton, and other garments use carefully selected blends for durability and feel."},
        {
          id: "3",          title: "Do you ship internationally?",          content: "Currently, we offer shipping within India. We are working on expanding our reach for international shipping soon. Stay tuned to our social media for updates!"},
        {
          id: "4",          title: "What is your return/exchange policy?",          content: "We offer returns and exchanges for unworn items within 7 days of delivery. Please refer to our detailed Returns & Exchanges page for more information and instructions."},
      ]}
      imageSrc="http://img.b2bpic.net/free-photo/male-graphic-designer-looking-document_1170-895.jpg"
      imageAlt="Abstract representation of questions and answers"
      mediaAnimation="entrance-slide"
      mediaPosition="right"
      title="Got Questions?"
      description="Find answers to common inquiries about our collections, sizing, shipping, and more."
      faqsAnimation="slide-up"
      showCard={true}
    />
  </div>

  <div id="contact" data-section="contact">
      <ContactText
      useInvertedBackground={true}
      background={{
        variant: "plain"}}
      text="Instagram: @scribbling_pad\nWhatsApp: +91 9769000603"
      buttons={[
        {
          text: "Connect on Instagram",          href: "https://www.instagram.com/scribbling_pad"},
        {
          text: "Message us on WhatsApp",          href: "https://wa.me/919769000603"},
      ]}
    />
  </div>

  <div id="footer" data-section="footer">
      <FooterSimple
      columns={[
        {
          title: "Quick Links",          items: [
            {
              label: "Home",              href: "#home"},
            {
              label: "Collections",              href: "#collection"},
            {
              label: "About Us",              href: "#about"},
            {
              label: "Contact",              href: "#contact"},
          ],
        },
        {
          title: "Collections",          items: [
            {
              label: "DROP 001 — FACE YOUR FEAR",              href: "#collection"},
            {
              label: "New Arrivals",              href: "#collection"},
            {
              label: "Best Sellers",              href: "#collection"},
          ],
        },
        {
          title: "Connect",          items: [
            {
              label: "Instagram",              href: "https://www.instagram.com/scribbling_pad"},
            {
              label: "WhatsApp",              href: "https://wa.me/919769000603"},
            {
              label: "Privacy Policy",              href: "#"},
            {
              label: "Terms of Service",              href: "#"},
          ],
        },
      ]}
      bottomLeftText="© 2026 SCRIBBLING PAD™"
      bottomRightText="All Rights Reserved."
    />
  </div>
      </ReactLenis>
    </ThemeProvider>
  );
}
