"use client"

import { ThemeProvider } from "@/providers/themeProvider/ThemeProvider";
import NavbarStyleApple from '@/components/navbar/NavbarStyleApple/NavbarStyleApple';
import HeroBillboardScroll from '@/components/sections/hero/HeroBillboardScroll';
import FeatureCardNine from '@/components/sections/feature/FeatureCardNine';
import ProductCardOne from '@/components/sections/product/ProductCardOne';
import PricingCardEight from '@/components/sections/pricing/PricingCardEight';
import MetricCardSeven from '@/components/sections/metrics/MetricCardSeven';
import TestimonialCardOne from '@/components/sections/testimonial/TestimonialCardOne';
import FaqSplitText from '@/components/sections/faq/FaqSplitText';
import FooterMedia from '@/components/sections/footer/FooterMedia';
import { Sparkles, Zap, CheckCircle, DollarSign, Award, Shield, TrendingUp, Heart } from "lucide-react";

export default function LandingPage() {
  return (
    <ThemeProvider
      defaultButtonVariant="text-shift"
      defaultTextAnimation="reveal-blur"
      borderRadius="sharp"
      contentWidth="compact"
      sizing="mediumLarge"
      background="circleGradient"
      cardStyle="soft-shadow"
      primaryButtonStyle="double-inset"
      secondaryButtonStyle="glass"
      headingFontWeight="bold"
    >
      <div id="nav" data-section="nav">
        <NavbarStyleApple
          brandName="Minimal"
          navItems={[
            { name: "Features", id: "features" },
            { name: "Pricing", id: "pricing" },
            { name: "About", id: "about" },
            { name: "Contact", id: "contact" },
            { name: "Docs", id: "https://docs.example.com" }
          ]}
        />
      </div>

      <div id="hero" data-section="hero">
        <HeroBillboardScroll
          title="Minimal. Powerful. Essential."
          description="Experience the future of SaaS. Clean design meets powerful functionality in a platform built for teams who demand simplicity without compromise."
          tag="Introducing Minimal 2.0"
          tagIcon={Sparkles}
          background={{ variant: "plain" }}
          imageSrc="https://img.b2bpic.net/free-vector/simple-dashboard-user-panel_23-2148372638.jpg"
          imageAlt="Minimal SaaS Dashboard Interface"
          buttons={[
            { text: "Start Free Trial", href: "https://app.example.com/signup" },
            { text: "Watch Demo", href: "https://example.com/demo" }
          ]}
        />
      </div>

      <div id="features" data-section="features">
        <FeatureCardNine
          features={[
            {
              id: 1,
              title: "Lightning Fast",              description: "Sub-millisecond response times. Performance that keeps pace with your ambition. Built for speed, designed for scale.",              phoneOne: { imageSrc: "https://img.b2bpic.net/free-vector/elegant-home-screen-interface_52683-51183.jpg" },
              phoneTwo: { imageSrc: "https://img.b2bpic.net/free-vector/charity-app-interface-concept_23-2148626241.jpg" }
            },
            {
              id: 2,
              title: "Intuitive Design",              description: "Your team learns in minutes, not days. Every interaction feels natural. Every workflow optimized. Pure simplicity.",              phoneOne: { imageSrc: "https://img.b2bpic.net/free-vector/elegant-home-screen-interface_52683-51183.jpg" },
              phoneTwo: { imageSrc: "https://img.b2bpic.net/free-vector/charity-app-interface-concept_23-2148626241.jpg" }
            }
          ]}
          showStepNumbers={true}
          title="Beautifully Crafted Features"
          description="Every detail matters. Explore the features that make Minimal the choice of discerning teams."
          tag="Core Features"
          tagIcon={Zap}
          textboxLayout="default"
          useInvertedBackground="invertDefault"
        />
      </div>

      <div id="products" data-section="products">
        <ProductCardOne
          products={[
            {
              id: "1",              name: "Minimal Core",              price: "$99/mo",              imageSrc: "https://img.b2bpic.net/free-photo/financial-assistant-working-smartphone-app-with-statistics-using-moible-phone-browse-internet-business-growth-strategy-male-employee-planning-research-presentation-office_482257-41142.jpg",              imageAlt: "Minimal Core Product"
            },
            {
              id: "2",              name: "Minimal Analytics",              price: "$149/mo",              imageSrc: "https://img.b2bpic.net/free-photo/representation-user-experience-interface-design_23-2150169856.jpg",              imageAlt: "Minimal Analytics Product"
            },
            {
              id: "3",              name: "Minimal Teams",              price: "$199/mo",              imageSrc: "https://img.b2bpic.net/free-vector/flat-business-landing-page-template_23-2148245747.jpg",              imageAlt: "Minimal Teams Product"
            }
          ]}
          title="Our Product Suite"
          description="Three powerful tools designed to work seamlessly together."
          tag="Solutions"
          tagIcon={CheckCircle}
          gridVariant="three-columns-all-equal-width"
          animationType="slide-up"
          textboxLayout="default"
          useInvertedBackground="noInvert"
        />
      </div>

      <div id="pricing" data-section="pricing">
        <PricingCardEight
          plans={[
            {
              id: "starter",              badge: "Perfect to Start",              badgeIcon: Zap,
              price: "$99",              subtitle: "For individual creators",              buttons: [
                { text: "Get Started", href: "https://app.example.com/signup?plan=starter" }
              ],
              features: [
                "Up to 3 projects",                "Core features",                "Basic analytics",                "Email support",                "5GB storage"
              ]
            },
            {
              id: "professional",              badge: "Most Popular",              badgeIcon: Award,
              price: "$249",              subtitle: "For growing teams",              buttons: [
                { text: "Start Free Trial", href: "https://app.example.com/signup?plan=professional" }
              ],
              features: [
                "Unlimited projects",                "Advanced analytics",                "Priority support",                "100GB storage",                "Team collaboration",                "Custom workflows"
              ]
            },
            {
              id: "enterprise",              badge: "For Enterprises",              badgeIcon: Shield,
              price: "Custom",              subtitle: "Unlimited everything",              buttons: [
                { text: "Contact Sales", href: "https://example.com/contact-sales" }
              ],
              features: [
                "Unlimited everything",                "Dedicated support",                "SSO & security",                "SLA guarantee",                "Custom integration",                "On-premise option"
              ]
            }
          ]}
          title="Simple, Transparent Pricing"
          description="No hidden fees. No surprise charges. Just honest pricing for serious teams."
          tag="Pricing"
          tagIcon={DollarSign}
          animationType="slide-up"
          textboxLayout="default"
          useInvertedBackground="invertDefault"
        />
      </div>

      <div id="metrics" data-section="metrics">
        <MetricCardSeven
          metrics={[
            {
              id: "1",              value: "50K+",              title: "Active Users",              items: [
                "Growing 25% monthly",                "From 120 countries",                "98% satisfaction rate"
              ]
            },
            {
              id: "2",              value: "99.99%",              title: "Uptime",              items: [
                "Zero downtime in 2 years",                "Enterprise SLA",                "Global infrastructure"
              ]
            },
            {
              id: "3",              value: "10M+",              title: "API Calls Daily",              items: [
                "Sub-10ms latency",                "Auto-scaling",                "100% reliable"
              ]
            },
            {
              id: "4",              value: "$150M",              title: "Customer Value Created",              items: [
                "In first 3 years",                "Verified by users",                "Still growing"
              ]
            }
          ]}
          title="Trusted by Teams Worldwide"
          description="Real results from real companies. See how Minimal drives success."
          tag="Impact"
          tagIcon={TrendingUp}
          animationType="slide-up"
          textboxLayout="default"
          useInvertedBackground="noInvert"
        />
      </div>

      <div id="testimonials" data-section="testimonials">
        <TestimonialCardOne
          testimonials={[
            {
              id: "1",              name: "Sarah Chen",              role: "CEO",              company: "StartupXYZ",              rating: 5,
              imageSrc: "https://img.b2bpic.net/free-photo/positive-confident-businesswoman-wearing-formal-suit-standing-with-arms-folded_74855-10328.jpg",              imageAlt: "Sarah Chen"
            },
            {
              id: "2",              name: "Michael Rodriguez",              role: "CTO",              company: "TechFlow",              rating: 5,
              imageSrc: "https://img.b2bpic.net/free-photo/close-up-positive-businesswoman_1098-3531.jpg",              imageAlt: "Michael Rodriguez"
            },
            {
              id: "3",              name: "Emma Williams",              role: "Product Lead",              company: "InnovateCo",              rating: 5,
              imageSrc: "https://img.b2bpic.net/free-photo/close-up-good-looking-smiling-friendly-female-trainee-ready-tackle-assignments-smiling-broadly-feeling-lucky-day-work-self-assured-encouraged-achieve-success-goal-white-wall_176420-35567.jpg",              imageAlt: "Emma Williams"
            },
            {
              id: "4",              name: "David Park",              role: "Founder",              company: "GrowthLabs",              rating: 5,
              imageSrc: "https://img.b2bpic.net/free-photo/closeup-smiling-beautiful-adult-businesswoman_1262-1760.jpg",              imageAlt: "David Park"
            },
            {
              id: "5",              name: "Jessica Martinez",              role: "Head of Design",              company: "DesignStudio",              rating: 5,
              imageSrc: "https://img.b2bpic.net/free-photo/confident-middle-aged-businesswoman-looking-camera_74855-4120.jpg",              imageAlt: "Jessica Martinez"
            },
            {
              id: "6",              name: "Alex Thompson",              role: "Operations Manager",              company: "OptiFlow",              rating: 5,
              imageSrc: "https://img.b2bpic.net/free-photo/portrait-business-woman-office_1398-6.jpg",              imageAlt: "Alex Thompson"
            }
          ]}
          title="Loved by Teams Everywhere"
          description="See what thousands of satisfied customers are saying about Minimal."
          tag="Testimonials"
          tagIcon={Heart}
          gridVariant="uniform-all-items-equal"
          animationType="blur-reveal"
          textboxLayout="default"
          useInvertedBackground="invertDefault"
        />
      </div>

      <div id="faq" data-section="faq">
        <FaqSplitText
          sideTitle="Questions? We Have Answers"
          sideDescription="Everything you need to know about Minimal, answered clearly and concisely."
          textPosition="left"
          useInvertedBackground="noInvert"
          animationType="smooth"
          faqs={[
            {
              id: "1",              title: "Is there a free trial?",              content: "Yes! Start your free 14-day trial instantly. No credit card required. Full access to all features including analytics and priority support."
            },
            {
              id: "2",              title: "Can I cancel anytime?",              content: "Absolutely. Cancel with one click, anytime. No long-term contracts. No hidden fees. If you leave mid-month, you'll only pay for what you used."
            },
            {
              id: "3",              title: "How secure is my data?",              content: "Bank-level security with AES-256 encryption. SOC 2 Type II certified. GDPR compliant. Daily backups. Your data is yours, always."
            },
            {
              id: "4",              title: "What about integrations?",              content: "We integrate with 200+ tools via Zapier, or use our REST API. Webhooks, native integrations with Slack, GitHub, Stripe, and more. Custom integration support available."
            },
            {
              id: "5",              title: "Is there an API?",              content: "Yes. Fully documented REST API with 99.99% uptime SLA. Unlimited API calls. Webhook support. SDK libraries for JavaScript, Python, and Go."
            },
            {
              id: "6",              title: "Do you offer training?",              content: "Yes. Onboarding calls for Professional and Enterprise plans. Video tutorials, documentation, and community Slack channel. Live webinars every week."
            }
          ]}
        />
      </div>

      <div id="footer" data-section="footer">
        <FooterMedia
          imageSrc="https://img.b2bpic.net/free-vector/blue-abstract-background_1115-85.jpg"
          imageAlt="Minimal SaaS Background"
          logoText="Minimal"
          copyrightText="© 2025 Minimal. All rights reserved."
          columns={[
            {
              title: "Product",              items: [
                { label: "Features", href: "features" },
                { label: "Pricing", href: "pricing" },
                { label: "Security", href: "https://example.com/security" },
                { label: "Roadmap", href: "https://example.com/roadmap" }
              ]
            },
            {
              title: "Company",              items: [
                { label: "About", href: "https://example.com/about" },
                { label: "Blog", href: "https://example.com/blog" },
                { label: "Careers", href: "https://example.com/careers" },
                { label: "Contact", href: "contact" }
              ]
            },
            {
              title: "Resources",              items: [
                { label: "Documentation", href: "https://docs.example.com" },
                { label: "API Reference", href: "https://api.example.com" },
                { label: "Status Page", href: "https://status.example.com" },
                { label: "Community", href: "https://community.example.com" }
              ]
            }
          ]}
        />
      </div>
    </ThemeProvider>
  );
}