"use client"

import { ThemeProvider } from "@/providers/themeProvider/ThemeProvider";
import NavbarStyleApple from '@/components/navbar/NavbarStyleApple/NavbarStyleApple';
import HeroBillboardMetrics from '@/components/sections/hero/HeroBillboardMetrics';
import TextAbout from '@/components/sections/about/TextAbout';
import ProductCardSix from '@/components/sections/product/ProductCardSix';
import TestimonialCardThirteen from '@/components/sections/testimonial/TestimonialCardThirteen';
import MetricCardSix from '@/components/sections/metrics/MetricCardSix';
import ContactFaq from '@/components/sections/contact/ContactFaq';
import FooterBase from '@/components/sections/footer/FooterBase';
import FeatureCardSix from '@/components/sections/feature/FeatureCardSix';
import { Sparkles, Users, TrendingUp, Zap, Star, Heart, Flower } from "lucide-react";

export default function LandingPage() {
  return (
    <ThemeProvider
      defaultButtonVariant="expand-hover"
      defaultTextAnimation="background-highlight"
      borderRadius="soft"
      contentWidth="mediumSmall"
      sizing="medium"
      background="radialGradient"
      cardStyle="solid-accent-light"
      primaryButtonStyle="neon-glow-border"
      secondaryButtonStyle="solid"
      headingFontWeight="medium"
    >
      <div id="nav" data-section="nav">
        <NavbarStyleApple
          brandName="TeenSun"
          navItems={[
            { name: "Shop", id: "products" },
            { name: "About", id: "about" },
            { name: "Testimonials", id: "testimonials" },
            { name: "Contact", id: "contact" },
            { name: "Instagram", id: "https://instagram.com" }
          ]}
        />
      </div>

      <div id="hero" data-section="hero">
        <HeroBillboardMetrics
          title="Bloom Your Way"
          description="TeenSun—where flowers meet youth, style, and bold vibes"
          tag="Express Yourself"
          tagIcon={Sparkles}
          buttons={[
            { text: "Shop Now and Stand Out", href: "#products" }
          ]}
          imageSrc="https://webuild-dev.s3.eu-north-1.amazonaws.com/gallery/uploaded-1767618339339-arsowb86.jpg"
          imageAlt="Vibrant flower arrangement aesthetic"
          frameStyle="card"
          metricsLabel="Loved by thousands of teens expressing themselves through flowers"
          metrics={[
            { id: "1", value: "10K+", label: "Happy Teens" },
            { id: "2", value: "5K+", label: "Arrangements Bloomed" },
            { id: "3", value: "4.9★", label: "Customer Love" }
          ]}
        />
      </div>

      <div id="about" data-section="about">
        <TextAbout
          title="TeenSun is more than flowers. It's self-expression. Bold, vibrant, and unapologetically yours—from prom corsages to dorm room vibes, every arrangement tells your story."
          useInvertedBackground="noInvert"
          buttons={[
            { text: "Explore Collections", href: "#products" }
          ]}
        />
      </div>

      <div id="products" data-section="products">
        <ProductCardSix
          title="Featured Collections"
          description="Discover arrangements designed for your vibe. Bold colors, fresh blooms, and Instagrammable moments."
          products={[
            {
              id: "1",
              name: "Summer Sunset",
              price: "$45",
              imageSrc: "https://webuild-dev.s3.eu-north-1.amazonaws.com/gallery/uploaded-1767618340843-nnovvivq.jpg",
              imageAlt: "Summer sunset flower arrangement"
            },
            {
              id: "2",
              name: "Electric Dream",
              price: "$55",
              imageSrc: "https://webuild-dev.s3.eu-north-1.amazonaws.com/gallery/uploaded-1767618342026-zneq9gsx.jpg",
              imageAlt: "Electric dream vibrant bouquet"
            },
            {
              id: "3",
              name: "Wildflower Mood",
              price: "$50",
              imageSrc: "https://webuild-dev.s3.eu-north-1.amazonaws.com/gallery/uploaded-1767618342915-84l0rgsg.jpg",
              imageAlt: "Wildflower mood arrangement"
            },
            {
              id: "4",
              name: "Rainbow Bloom",
              price: "$60",
              imageSrc: "https://webuild-dev.s3.eu-north-1.amazonaws.com/gallery/uploaded-1767618345921-7ayd5tm5.jpg",
              imageAlt: "Rainbow bloom colorful arrangement"
            }
          ]}
          gridVariant="two-columns-alternating-heights"
          textboxLayout="default"
          animationType="slide-up"
          useInvertedBackground="noInvert"
        />
      </div>

      <div id="video" data-section="video">
        <FeatureCardSix
          features={[
            {
              id: 1,
              title: "The TeenSun Story",
              description: "From our garden to your moment. Discover how we create flower arrangements that celebrate youth, style, and self-expression. Every bloom tells a story—yours.",
              videoSrc: "https://www.youtube.com/embed/dQw4w9WgXcQ"
            },
            {
              id: 2,
              title: "Flower Arrangements That Pop",
              description: "Watch our creative process as we design bold, vibrant arrangements. See how we pick each flower, color, and detail to make sure your bouquet is absolutely stunning.",
              videoSrc: "https://www.youtube.com/embed/dQw4w9WgXcQ"
            },
            {
              id: 3,
              title: "Behind the Blooms",
              description: "Meet the team that makes TeenSun happen. Learn about our passion for sustainable floristry and how we bring fresh, gorgeous arrangements to your door every single time.",
              videoSrc: "https://www.youtube.com/embed/dQw4w9WgXcQ"
            }
          ]}
          title="Our Story in Full Bloom"
          description="Experience TeenSun through video. See our passion, process, and the magic that goes into every arrangement."
          tag="Brand Story"
          tagIcon={Flower}
          textboxLayout="default"
          useInvertedBackground="noInvert"
          animationType="slide-up"
        />
      </div>

      <div id="testimonials" data-section="testimonials">
        <TestimonialCardThirteen
          title="What Our Teens Say"
          description="Real stories from real people who bloomed with TeenSun"
          testimonials={[
            {
              id: "1",
              name: "Maya Chen",
              handle: "@mayaflowers",
              testimonial: "Finally flowers that feel like ME! The arrangement I got was so aesthetic and my bestie was obsessed. TeenSun gets it.",
              rating: 5,
              imageSrc: "https://webuild-dev.s3.eu-north-1.amazonaws.com/gallery/uploaded-1767618349555-r4egyovr.jpg",
              imageAlt: "teen girl portrait avatar young smile"
            },
            {
              id: "2",
              name: "Jordan",
              handle: "@jordan.vibes",
              testimonial: "Used TeenSun for prom flowers and they were STUNNING. Not your grandma's bouquet—bold, colorful, perfect.",
              rating: 5,
              imageSrc: "https://webuild-dev.s3.eu-north-1.amazonaws.com/gallery/uploaded-1767618350815-56pqfu8k.jpg",
              imageAlt: "teen avatar young person portrait smile"
            },
            {
              id: "3",
              name: "Aisha",
              handle: "@aisha.loves.flowers",
              testimonial: "The quality is insane and they arrived super fresh. My room looks like an Instagram photoshoot now. 10/10",
              rating: 5,
              imageSrc: "https://img.b2bpic.net/free-photo/young-blonde-charming-female-isolated_176474-79357.jpg",
              imageAlt: "young girl portrait avatar friendly"
            },
            {
              id: "4",
              name: "Tyler",
              handle: "@flower.guy",
              testimonial: "Sent my crush flowers from TeenSun and she loved them. The colors pop and they actually last forever.",
              rating: 5,
              imageSrc: "https://webuild-dev.s3.eu-north-1.amazonaws.com/gallery/uploaded-1767618371721-xioe1jkw.jpg",
              imageAlt: "teen boy portrait avatar smile"
            },
            {
              id: "5",
              name: "Sofia",
              handle: "@sofias.corner",
              testimonial: "Every arrangement feels custom. Like they know exactly what vibe I'm going for. Best flower delivery ever.",
              rating: 5,
              imageSrc: "https://webuild-dev.s3.eu-north-1.amazonaws.com/gallery/uploaded-1767618375722-pri3gds2.jpg",
              imageAlt: "young person portrait avatar happy"
            },
            {
              id: "6",
              name: "Emma",
              handle: "@emmaboots",
              testimonial: "Obsessed with TeenSun. The flowers are fresh, the colors are fire, and the customer service is actually so friendly.",
              rating: 5,
              imageSrc: "https://webuild-dev.s3.eu-north-1.amazonaws.com/gallery/uploaded-1767618388871-dusvrdb4.jpg",
              imageAlt: "teen girl portrait avatar aesthetic"
            }
          ]}
          showRating={true}
          textboxLayout="default"
          animationType="slide-up"
          useInvertedBackground="invertDefault"
        />
      </div>

      <div id="metrics" data-section="metrics">
        <MetricCardSix
          title="TeenSun by the Numbers"
          description="Growing fast because teens choose authentic, bold expression"
          metrics={[
            {
              id: "1",
              value: "10K+",
              tag: "Community",
              tagIcon: Users,
              title: "Teens Blooming"
            },
            {
              id: "2",
              value: "50K+",
              tag: "Growth",
              tagIcon: TrendingUp,
              title: "Orders Shipped"
            },
            {
              id: "3",
              value: "48hrs",
              tag: "Speed",
              tagIcon: Zap,
              title: "Delivery Time"
            },
            {
              id: "4",
              value: "4.9/5",
              tag: "Rating",
              tagIcon: Star,
              title: "Customer Satisfaction"
            }
          ]}
          gridVariant="four-items-2x2-equal-grid"
          textboxLayout="default"
          animationType="slide-up"
          useInvertedBackground="noInvert"
        />
      </div>

      <div id="contact" data-section="contact">
        <ContactFaq
          ctaTitle="Questions? Let's Chat"
          ctaDescription="Reach out anytime. We love connecting with our teen community."
          ctaButton={{
            text: "Get in Touch",
            href: "mailto:hello@teensun.com"
          }}
          ctaIcon={Heart}
          faqs={[
            {
              id: "1",
              title: "How long do arrangements last?",
              content: "Our flowers stay fresh for 7-10 days with proper care. We include care instructions with every order. Want them to last longer? Check out our preservation tips on our blog!"
            },
            {
              id: "2",
              title: "Do you ship nationwide?",
              content: "Yes! We deliver to all 50 states. Standard shipping takes 2-3 days, and we have next-day options for last-minute needs. All arrangements arrive fresh and ready to impress."
            },
            {
              id: "3",
              title: "Can I customize my arrangement?",
              content: "Absolutely! Hit us up at hello@teensun.com with your vibe and color preferences. Our team will create something totally custom just for you."
            },
            {
              id: "4",
              title: "What's your return/refund policy?",
              content: "Not happy? We've got you covered. We offer refunds or replacements within 24 hours if there are any issues. Your satisfaction is everything to us."
            },
            {
              id: "5",
              title: "Are the flowers sustainable?",
              content: "We partner with local growers and use eco-friendly packaging. Every arrangement supports sustainable farming practices. Bloom responsibly with TeenSun."
            },
            {
              id: "6",
              title: "Do you offer bulk orders for events?",
              content: "Yes! Planning a party, prom, or event? Contact our team at events@teensun.com for custom bulk pricing and arrangements."
            }
          ]}
          useInvertedBackground="noInvert"
          animationType="slide-up"
        />
      </div>

      <div id="footer" data-section="footer">
        <FooterBase
          columns={[
            {
              title: "Shop",
              items: [
                { label: "All Arrangements", href: "#products" },
                { label: "Summer Collection", href: "#products" },
                { label: "Gifts", href: "#products" }
              ]
            },
            {
              title: "Connect",
              items: [
                { label: "Instagram", href: "https://instagram.com/teensunflowers" },
                { label: "TikTok", href: "https://tiktok.com/teensunflowers" },
                { label: "Contact Us", href: "#contact" }
              ]
            },
            {
              title: "TeenSun",
              items: [
                { label: "About Us", href: "#about" },
                { label: "Blog", href: "#blog" },
                { label: "Careers", href: "https://teensun.com/careers" }
              ]
            }
          ]}
          logoText="TeenSun"
          copyrightText="© 2025 TeenSun Flowers. Bloom your way."
        />
      </div>
    </ThemeProvider>
  );
}