"use client"

import { ThemeProvider } from "@/providers/themeProvider/ThemeProvider";
import NavbarStyleMinimal from '@/components/navbar/NavbarStyleMinimal';
import HeroLogoBillboard from '@/components/sections/hero/HeroLogoBillboard';
import SplitAboutCards from '@/components/sections/about/SplitAboutCards';
import FeatureCardTwenty from '@/components/sections/feature/FeatureCardTwenty';
import PricingCardFour from '@/components/sections/pricing/PricingCardFour';
import TeamCardTwo from '@/components/sections/team/TeamCardTwo';
import TestimonialCardNine from '@/components/sections/testimonial/TestimonialCardNine';
import ContactFaq from '@/components/sections/contact/ContactFaq';
import FooterCard from '@/components/sections/footer/FooterCard';
import { Sparkles, Linkedin, Twitter, Github, Rocket, Globe } from "lucide-react";

export default function LandingPage() {
  return (
    <ThemeProvider
      defaultButtonVariant="elastic-effect"
      defaultTextAnimation="reveal-blur"
      borderRadius="soft"
      contentWidth="smallMedium"
      sizing="mediumLarge"
      background="noiseGradient"
      cardStyle="glass-elevated"
      primaryButtonStyle="layered-depth"
      secondaryButtonStyle="layered"
      headingFontWeight="light"
    >
      <div id="nav" data-section="nav">
        <NavbarStyleMinimal 
          brandName="Memo"
          button={{
            text: "Get Started",
            href: "#contact"
          }}
        />
      </div>

      <div id="hero" data-section="hero">
        <HeroLogoBillboard 
          logoText="Memo"
          description="Your intelligent AI assistant designed for seamless productivity. Automate tasks, gain insights, and focus on what matters most."
          imageSrc="https://webuild-dev.s3.eu-north-1.amazonaws.com/gallery/uploaded-1766850774067-2ykbdnfh.jpg"
          imageAlt="Memo AI dashboard interface"
          frameStyle="browser"
          logoLineHeight={1.1}
          ariaLabel="Hero section with Memo AI platform showcase"
        />
      </div>

      <div id="about" data-section="about">
        <SplitAboutCards 
          title="Built for Modern Teams"
          description="Memo brings enterprise-grade AI capabilities to teams of all sizes. Simple to deploy, powerful in action."
          tag="Why Memo"
          features={[
            {
              id: "intelligent-automation",
              title: "Intelligent Automation",
              description: "Automate repetitive tasks and workflows with AI that learns from your patterns and adapts to your needs.",
              label: "Time Saved: 15 hrs/week"
            },
            {
              id: "real-time-insights",
              title: "Real-Time Insights",
              description: "Get actionable intelligence on demand. Analyze data, predict trends, and make faster decisions with confidence.",
              label: "Accuracy: 98.7%"
            }
          ]}
          buttons={[
            {
              text: "Learn More",
              href: "#features"
            }
          ]}
          useInvertedBackground="noInvert"
        />
      </div>

      <div id="features" data-section="features">
        <FeatureCardTwenty 
          images={[
            {
              id: 1,
              imageSrc: "https://webuild-dev.s3.eu-north-1.amazonaws.com/gallery/uploaded-1767261330234-euot52f2.jpg",
              imageAlt: "AI automation workflow"
            },
            {
              id: 2,
              imageSrc: "https://webuild-dev.s3.eu-north-1.amazonaws.com/gallery/uploaded-1767261331508-30noy7pi.jpg",
              imageAlt: "Advanced analytics interface"
            },
            {
              id: 3,
              imageSrc: "https://webuild-dev.s3.eu-north-1.amazonaws.com/gallery/uploaded-1766185877436-fl4vf3vx.jpg",
              imageAlt: "API and integration dashboard"
            },
            {
              id: 4,
              imageSrc: "https://webuild-dev.s3.eu-north-1.amazonaws.com/gallery/uploaded-1766850774067-2ykbdnfh.jpg",
              imageAlt: "Main Memo dashboard view"
            }
          ]}
          title="Designed for the Intelligent Workflow"
          description="Memo integrates seamlessly into your existing tools and processes. No friction, just efficiency. Built on advanced neural networks with real-time learning capabilities to stay ahead of your needs."
          textboxLayout="default"
          useInvertedBackground="noInvert"
          tag="Smart Features"
          buttons={[
            {
              text: "Explore Features",
              href: "#pricing"
            }
          ]}
        />
      </div>

      <div id="pricing" data-section="pricing">
        <PricingCardFour 
          title="Simple, Transparent Pricing"
          tag="Get Started"
          tagIcon={Sparkles}
          ctaCards={[
            {
              title: "Schedule a Demo",
              description: "See Memo in action with our product team. Personalized walkthrough of your use case.",
              href: "#contact"
            },
            {
              title: "Custom Plans",
              description: "Need something special? We build custom solutions for enterprise requirements.",
              href: "#contact"
            }
          ]}
          plans={[
            {
              id: "starter",
              name: "Starter",
              price: "$49/month",
              subtitle: "Perfect for individuals and small teams exploring AI",
              features: [
                "Up to 10,000 API calls monthly",
                "5 team members included",
                "Basic automation workflows",
                "Email support",
                "Community access",
                "Standard integrations"
              ]
            },
            {
              id: "professional",
              name: "Professional",
              price: "$299/month",
              subtitle: "Ideal for growing teams with advanced needs",
              features: [
                "Up to 500,000 API calls monthly",
                "Unlimited team members",
                "Advanced workflows and rules",
                "Priority email support",
                "Custom integrations",
                "Advanced analytics",
                "Dedicated account manager",
                "API documentation"
              ]
            },
            {
              id: "enterprise",
              name: "Enterprise",
              price: "Custom",
              subtitle: "For large-scale deployments and custom requirements",
              features: [
                "Unlimited API calls",
                "Unlimited team members",
                "Custom workflows and automation",
                "24/7 phone and email support",
                "Dedicated infrastructure",
                "Security and compliance",
                "On-premise deployment",
                "Custom SLA agreements"
              ]
            }
          ]}
          useInvertedBackground="noInvert"
          animationType="slide-up"
        />
      </div>

      <div id="team" data-section="team">
        <TeamCardTwo 
          members={[
            {
              id: "1",
              name: "Sarah Chen",
              role: "Co-Founder & CEO",
              description: "Former AI researcher at OpenAI. 10 years building intelligent systems. Stanford PhD in Machine Learning.",
              imageSrc: "https://webuild-dev.s3.eu-north-1.amazonaws.com/gallery/uploaded-1766140101670-ttp7xdlv.jpg",
              imageAlt: "Sarah Chen portrait",
              socialLinks: [
                {
                  icon: Linkedin,
                  url: "https://linkedin.com"
                },
                {
                  icon: Twitter,
                  url: "https://twitter.com"
                }
              ]
            },
            {
              id: "2",
              name: "Marcus Johnson",
              role: "Co-Founder & CTO",
              description: "Led engineering teams at Google Cloud. Architect of large-scale distributed systems. MIT graduate.",
              imageSrc: "https://webuild-dev.s3.eu-north-1.amazonaws.com/gallery/uploaded-1766140152452-p4x3ah4p.jpg",
              imageAlt: "Marcus Johnson portrait",
              socialLinks: [
                {
                  icon: Linkedin,
                  url: "https://linkedin.com"
                },
                {
                  icon: Github,
                  url: "https://github.com"
                }
              ]
            },
            {
              id: "3",
              name: "Elena Rodriguez",
              role: "VP Product",
              description: "Former product director at Stripe. Expert in SaaS scaling. 8 years shipping products at scale.",
              imageSrc: "https://webuild-dev.s3.eu-north-1.amazonaws.com/gallery/uploaded-1766163677896-h7vfowg5.jpg",
              imageAlt: "Elena Rodriguez portrait",
              socialLinks: [
                {
                  icon: Linkedin,
                  url: "https://linkedin.com"
                }
              ]
            },
            {
              id: "4",
              name: "David Kim",
              role: "Head of Design",
              description: "Award-winning designer from Apple. Passionate about human-centered AI design. Design thinking advocate.",
              imageSrc: "https://webuild-dev.s3.eu-north-1.amazonaws.com/gallery/uploaded-1766163678723-295psgl3.jpg",
              imageAlt: "David Kim portrait",
              socialLinks: [
                {
                  icon: Linkedin,
                  url: "https://linkedin.com"
                },
                {
                  icon: Globe,
                  url: "https://davidkim.design"
                }
              ]
            }
          ]}
          gridVariant="four-items-2x2-equal-grid"
          animationType="slide-up"
          title="Meet the Team Behind Memo"
          description="Led by industry veterans with deep expertise in AI, engineering, product, and design."
          textboxLayout="default"
          useInvertedBackground="noInvert"
        />
      </div>

      <div id="testimonials" data-section="testimonials">
        <TestimonialCardNine 
          testimonials={[
            {
              id: "1",
              quote: "Memo transformed how our team approaches data analysis. What used to take days now takes hours. The AI understands our unique workflows perfectly.",
              name: "Jessica Liu",
              role: "Director of Analytics",
              imageSrc: "https://webuild-dev.s3.eu-north-1.amazonaws.com/gallery/uploaded-1766184724760-wxlm9bjg.jpg",
              imageAlt: "Jessica Liu"
            },
            {
              id: "2",
              quote: "The implementation was seamless. Within two weeks, our entire team was productive. The customer support team went above and beyond to ensure success.",
              name: "Michael Torres",
              role: "VP Engineering",
              imageSrc: "https://webuild-dev.s3.eu-north-1.amazonaws.com/gallery/uploaded-1766320181151-p24uxfcb.jpg",
              imageAlt: "Michael Torres"
            },
            {
              id: "3",
              quote: "We've reduced manual work by 70%. Memo pays for itself in the first month. It's like having a brilliant analyst on your team 24/7.",
              name: "Amanda Chen",
              role: "CEO",
              imageSrc: "https://webuild-dev.s3.eu-north-1.amazonaws.com/gallery/uploaded-1766185880597-ieb2jad3.jpg",
              imageAlt: "Amanda Chen"
            },
            {
              id: "4",
              quote: "The precision and speed of insights is remarkable. Our decision-making has become faster and more confident. A game-changer for our organization.",
              name: "Robert Walker",
              role: "Chief Strategy Officer",
              imageSrc: "https://webuild-dev.s3.eu-north-1.amazonaws.com/gallery/uploaded-1766850777333-gk776zjh.jpg",
              imageAlt: "Robert Walker"
            },
            {
              id: "5",
              quote: "Best investment in productivity we've made. The ROI was evident immediately. Highly recommend to any serious data-driven organization.",
              name: "Priya Patel",
              role: "Founder",
              imageSrc: "https://webuild-dev.s3.eu-north-1.amazonaws.com/gallery/uploaded-1766320182335-xfdwqhnh.jpg",
              imageAlt: "Priya Patel"
            },
            {
              id: "6",
              quote: "Memo integrates perfectly with our stack. The AI is intuitive. The team was so helpful during onboarding. Couldn't ask for more.",
              name: "James Mitchell",
              role: "Operations Manager",
              imageSrc: "https://webuild-dev.s3.eu-north-1.amazonaws.com/gallery/uploaded-1767261333032-97m95dnm.jpg",
              imageAlt: "James Mitchell"
            }
          ]}
          title="Trusted by Teams at Innovative Companies"
          description="See how leading organizations use Memo to gain competitive advantage."
          textboxLayout="default"
          useInvertedBackground="noInvert"
        />
      </div>

      <div id="contact-faq" data-section="contact-faq">
        <ContactFaq 
          ctaTitle="Ready to Transform Your Workflow?"
          ctaDescription="Start your journey with Memo. Free 14-day trial, no credit card required."
          ctaButton={{
            text: "Start Free Trial",
            href: "https://app.memo.ai/signup"
          }}
          ctaIcon={Rocket}
          faqs={[
            {
              id: "1",
              title: "How long does it take to set up Memo?",
              content: "Most teams are up and running in under 30 minutes. We provide step-by-step onboarding, and our support team is available to help with any questions. For enterprise customers, we offer dedicated implementation support."
            },
            {
              id: "2",
              title: "Can Memo integrate with our existing tools?",
              content: "Yes. Memo integrates with 100+ popular tools including Slack, Salesforce, Shopify, HubSpot, and more. We also offer a robust API and webhooks for custom integrations. Check our full integration library in the docs."
            },
            {
              id: "3",
              title: "Is my data secure with Memo?",
              content: "Security is our top priority. We use bank-level encryption, SOC 2 Type II compliance, GDPR compliance, and regular security audits. Your data never leaves your account. Enterprise customers get additional security features and on-premise deployment options."
            },
            {
              id: "4",
              title: "How accurate is the AI?",
              content: "Our AI models achieve 98.7% accuracy across most use cases. Accuracy improves over time as the system learns from your specific data and workflows. We continuously update our models with the latest advances in machine learning."
            },
            {
              id: "5",
              title: "What kind of support is included?",
              content: "All plans include email support. Professional plan customers get priority support. Enterprise customers receive 24/7 phone support and a dedicated account manager. We also have extensive documentation and an active community forum."
            },
            {
              id: "6",
              title: "Can I upgrade or downgrade my plan?",
              content: "Absolutely. Change your plan anytime. Upgrades take effect immediately. Downgrades apply at your next billing cycle. No long-term contracts required. You only pay for what you use."
            }
          ]}
          useInvertedBackground="noInvert"
          animationType="slide-up"
          accordionAnimationType="smooth"
        />
      </div>

      <div id="footer" data-section="footer">
        <FooterCard 
          logoText="Memo"
          copyrightText="© 2025 Memo AI. All rights reserved."
          socialLinks={[
            {
              icon: Twitter,
              href: "https://twitter.com/memoai",
              ariaLabel: "Twitter"
            },
            {
              icon: Linkedin,
              href: "https://linkedin.com/company/memoai",
              ariaLabel: "LinkedIn"
            },
            {
              icon: Github,
              href: "https://github.com/memoai",
              ariaLabel: "GitHub"
            }
          ]}
        />
      </div>
    </ThemeProvider>
  );
}