"use client"

import { ThemeProvider } from "@/providers/themeProvider/ThemeProvider";
import NavbarLayoutFloatingInline from '@/components/navbar/NavbarLayoutFloatingInline';
import HeroOverlay from '@/components/sections/hero/HeroOverlay';
import MetricSplitMediaAbout from '@/components/sections/about/MetricSplitMediaAbout';
import TeamCardTwo from '@/components/sections/team/TeamCardTwo';
import PricingCardThree from '@/components/sections/pricing/PricingCardThree';
import ContactSplitForm from '@/components/sections/contact/ContactSplitForm';
import FooterLogoReveal from '@/components/sections/footer/FooterLogoReveal';
import { Sparkles, Rocket, Users, DollarSign, Linkedin, Twitter, Github, Dribbble, Mail } from 'lucide-react';

export default function LandingPage() {
  return (
    <ThemeProvider
      defaultButtonVariant="elastic-effect"
      defaultTextAnimation="background-highlight"
      borderRadius="pill"
      contentWidth="mediumSmall"
      sizing="largeSizeMediumTitles"
      background="floatingGradient"
      cardStyle="subtle-shadow"
      primaryButtonStyle="inset-glow"
      secondaryButtonStyle="glass"
      headingFontWeight="medium"
    >
      <div id="nav" data-section="nav">
        <NavbarLayoutFloatingInline
          brandName="StartupFlow"
          navItems={[
            { name: "About", id: "about" },
            { name: "Team", id: "team" },
            { name: "Pricing", id: "pricing" },
            { name: "Contact", id: "contact" }
          ]}
          button={{ text: "Get Started", href: "contact" }}
        />
      </div>

      <div id="hero" data-section="hero">
        <HeroOverlay
          title="Build the Future, Together"
          description="Transform your vision into reality with our innovative platform. Join leading startups accelerating growth through intelligent automation."
          tag="Backed by Top VCs"
          tagIcon={Sparkles}
          imageSrc="https://img.b2bpic.net/free-photo/young-colleagues-sitting-while-work-with-laptops-desk_171337-16969.jpg"
          imageAlt="Modern startup team collaborating"
          textPosition="center"
          showBlur={true}
          showDimOverlay={false}
          buttons={[
            { text: "Start Free Trial", href: "contact" },
            { text: "Watch Demo", href: "https://youtube.com" }
          ]}
        />
      </div>

      <div id="about" data-section="about">
        <MetricSplitMediaAbout
          tag="Our Story"
          tagIcon={Rocket}
          title="Founded to Solve a Real Problem"
          description="In 2021, our team noticed enterprises were wasting thousands of hours on repetitive tasks. We built StartupFlow to change that. Today, we empower over 500 companies to automate what matters most and focus on innovation."
          metrics={[
            { value: "500+", title: "Active Companies" },
            { value: "2M+", title: "Hours Saved Monthly" }
          ]}
          imageSrc="https://img.b2bpic.net/free-photo/happy-young-colleagues-sitting-office-coworking_171337-17674.jpg"
          imageAlt="StartupFlow team collaboration"
          useInvertedBackground="invertDefault"
        />
      </div>

      <div id="team" data-section="team">
        <TeamCardTwo
          title="Meet Our Team"
          description="World-class talent from Google, Apple, and leading startups"
          tag="Leadership"
          tagIcon={Users}
          members={[
            {
              id: "1",              name: "Sarah Chen",              role: "Founder & CEO",              description: "Previously VP Product at Google Cloud. Stanford graduate. 10+ years in enterprise software.",              imageSrc: "https://img.b2bpic.net/free-photo/people-having-dinner-luxurious-restaurants_23-2151081912.jpg",              imageAlt: "Sarah Chen, CEO",              socialLinks: [
                { icon: Linkedin, url: "https://linkedin.com" },
                { icon: Twitter, url: "https://twitter.com" }
              ]
            },
            {
              id: "2",              name: "Marcus Johnson",              role: "CTO & Co-Founder",              description: "Former Engineer at Stripe. ML specialist. Built infrastructure serving millions.",              imageSrc: "https://img.b2bpic.net/free-photo/handsome-groom-classy-black-suit-stands-dark-room_8353-7083.jpg",              imageAlt: "Marcus Johnson, CTO",              socialLinks: [
                { icon: Github, url: "https://github.com" },
                { icon: Linkedin, url: "https://linkedin.com" }
              ]
            },
            {
              id: "3",              name: "Jessica Rodriguez",              role: "Head of Design",              description: "Award-winning designer from Apple Design. User experience visionary.",              imageSrc: "https://img.b2bpic.net/free-photo/portrait-grey-haired-businessman-standing_74855-10324.jpg",              imageAlt: "Jessica Rodriguez, Head of Design",              socialLinks: [
                { icon: Dribbble, url: "https://dribbble.com" },
                { icon: Linkedin, url: "https://linkedin.com" }
              ]
            },
            {
              id: "4",              name: "David Kim",              role: "VP of Sales",              description: "Built enterprise sales teams at Notion. Strategic business growth expert.",              imageSrc: "https://img.b2bpic.net/free-photo/close-up-portrait-young-handsome-successful-man_1163-5475.jpg",              imageAlt: "David Kim, VP of Sales",              socialLinks: [
                { icon: Linkedin, url: "https://linkedin.com" },
                { icon: Mail, url: "mailto:david@startupflow.io" }
              ]
            }
          ]}
          gridVariant="uniform-all-items-equal"
          animationType="slide-up"
          textboxLayout="default"
          useInvertedBackground="noInvert"
        />
      </div>

      <div id="pricing" data-section="pricing">
        <PricingCardThree
          title="Simple, Transparent Pricing"
          description="Scale your business without breaking the bank. Pay only for what you use."
          tag="Pricing Plans"
          tagIcon={DollarSign}
          plans={[
            {
              id: "starter",              price: "$99/mo",              name: "Starter",              buttons: [
                { text: "Start Free", href: "contact" },
                { text: "Learn More", href: "https://docs.startupflow.io" }
              ],
              features: [
                "Up to 5 automation workflows",                "Basic analytics dashboard",                "Email support",                "1,000 monthly actions included"
              ]
            },
            {
              id: "professional",              badge: "Most Popular",              badgeIcon: Sparkles,
              price: "$299/mo",              name: "Professional",              buttons: [
                { text: "Start Free", href: "contact" },
                { text: "Chat to Sales", href: "https://calendly.com" }
              ],
              features: [
                "Unlimited workflows",                "Advanced analytics & insights",                "Priority email & chat support",                "10,000 monthly actions included",                "Custom integrations"
              ]
            },
            {
              id: "enterprise",              price: "Custom",              name: "Enterprise",              buttons: [
                { text: "Contact Sales", href: "contact" },
                { text: "Request Demo", href: "https://calendly.com" }
              ],
              features: [
                "Unlimited everything",                "Dedicated account manager",                "24/7 phone support",                "Custom SLA guarantees",                "Advanced security & compliance"
              ]
            }
          ]}
          animationType="slide-up"
          textboxLayout="default"
          useInvertedBackground="noInvert"
        />
      </div>

      <div id="contact" data-section="contact">
        <ContactSplitForm
          title="Let's Build Together"
          description="Have questions or ready to transform your business? Reach out to our team. We'd love to hear from you."
          inputs={[
            { name: "name", type: "text", placeholder: "Your Name", required: true },
            { name: "email", type: "email", placeholder: "your@email.com", required: true },
            { name: "company", type: "text", placeholder: "Company Name", required: true }
          ]}
          textarea={{
            name: "message",            placeholder: "Tell us about your automation needs...",            rows: 5,
            required: true
          }}
          useInvertedBackground="noInvert"
          imageSrc="https://img.b2bpic.net/free-photo/young-colleagues-sitting-while-work-with-laptops-desk_171337-16969.jpg"
          imageAlt="StartupFlow office"
          mediaPosition="right"
          buttonText="Send Message"
        />
      </div>

      <div id="footer" data-section="footer">
        <FooterLogoReveal
          logoText="StartupFlow"
          leftLink={{ text: "Privacy Policy", href: "https://startupflow.io/privacy" }}
          rightLink={{ text: "Terms of Service", href: "https://startupflow.io/terms" }}
        />
      </div>
    </ThemeProvider>
  );
}