"use client";

import { ThemeProvider } from "@/providers/themeProvider/ThemeProvider";
import NavbarStyleCentered from '@/components/navbar/NavbarStyleCentered/NavbarStyleCentered';
import MediaAbout from '@/components/sections/about/MediaAbout';
import FeatureCardTwelve from '@/components/sections/feature/FeatureCardTwelve';
import PricingCardFive from '@/components/sections/pricing/PricingCardFive';
import TestimonialCardOne from '@/components/sections/testimonial/TestimonialCardOne';
import FaqBase from '@/components/sections/faq/FaqBase';
import ContactCenterForm from '@/components/sections/contact/ContactCenterForm';
import FooterSplit from '@/components/sections/footer/FooterSplit';
import { Zap, Sparkles, Mail, Phone, MapPin } from "lucide-react";

export default function LandingPage() {
  return (
    <ThemeProvider
      defaultButtonVariant="text-stagger"
      defaultTextAnimation="background-highlight"
      borderRadius="soft"
      contentWidth="large"
      sizing="smallSizeLargeTitles"
      background="radialGradient"
      cardStyle="noise"
      primaryButtonStyle="outline"
      secondaryButtonStyle="solid"
      headingFontWeight="extrabold"
    >
      <div id="nav" data-section="nav">
        <NavbarStyleCentered
          brandName="TechFlow"
          logoSrc="https://webuild-dev.s3.eu-north-1.amazonaws.com/gallery/uploaded-1766402144988-c5iy3f33.jpg"
          logoAlt="TechFlow Logo"
          navItems={[
            { name: "Solutions", id: "features" },
            { name: "Pricing", id: "pricing" },
            { name: "About", id: "about" },
            { name: "FAQ", id: "faq" },
            { name: "Contact", id: "contact" }
          ]}
          button={{
            text: "Get Started",
            href: "contact"
          }}
        />
      </div>

      <div id="hero" data-section="hero" style={{ backgroundColor: "#FFFF00" }}>
        <div style={{ display: "flex", flexDirection: "column", alignItems: "center", justifyContent: "center", padding: "60px 20px", gap: "30px" }}>
          <h1 style={{ fontSize: "32px", fontWeight: "bold", textAlign: "center", color: "#000000" }}>Scale Your Business with Intelligent Automation</h1>
          <img
            src="https://webuild-dev.s3.eu-north-1.amazonaws.com/gallery/uploaded-1766402146656-ngknkdsj.jpg"
            alt="Product showcase"
            style={{ maxWidth: "300px", height: "auto", borderRadius: "8px" }}
          />
        </div>
      </div>

      <div id="about" data-section="about">
        <MediaAbout
          title="Built for Modern Development Teams"
          description="We understand the challenges facing IT startups. Our platform brings together the tools your team needs to collaborate seamlessly, deploy faster, and scale without limits."
          tag="Our Mission"
          buttons={[
            { text: "Learn Our Story", href: "#" }
          ]}
          imageSrc="https://webuild-dev.s3.eu-north-1.amazonaws.com/gallery/uploaded-1766402154996-hfblxpxy.jpg"
          imageAlt="TechFlow team collaborating"
          useInvertedBackground="noInvert"
        />
      </div>

      <div id="features" data-section="features">
        <FeatureCardTwelve
          title="Powerful Capabilities Built In"
          description="Everything your IT startup needs to succeed in one integrated platform"
          features={[
            {
              id: "automation",
              label: "Automation",
              title: "Automate repetitive tasks and free your team",
              items: [
                "Workflow automation engine",
                "Custom integrations",
                "Scheduled deployments",
                "Error handling and retry logic"
              ],
              buttons: [
                { text: "Explore", href: "#" }
              ]
            },
            {
              id: "security",
              label: "Security",
              title: "Enterprise-grade security out of the box",
              items: [
                "End-to-end encryption",
                "Role-based access control",
                "Compliance certifications",
                "Regular security audits"
              ],
              buttons: [
                { text: "View Specs", href: "#" }
              ]
            },
            {
              id: "collaboration",
              label: "Collaboration",
              title: "Real-time teamwork across locations",
              items: [
                "Live code editor",
                "Instant notifications",
                "Team workspaces",
                "Version control integration"
              ],
              buttons: [
                { text: "Try Now", href: "#" }
              ]
            }
          ]}
          animationType="slide-up"
          variant="border"
          textboxLayout="default"
          useInvertedBackground="noInvert"
        />
      </div>

      <div id="pricing" data-section="pricing">
        <PricingCardFive
          title="Simple, Transparent Pricing"
          description="Choose the plan that fits your startup's needs and scale as you grow"
          plans={[
            {
              id: "starter",
              tag: "Starter",
              price: "$299",
              period: "/month",
              description: "Perfect for early-stage startups just getting started",
              button: {
                text: "Start Free Trial",
                href: "contact"
              },
              featuresTitle: "What's Included:",
              features: [
                "Up to 5 team members",
                "Basic automation workflows",
                "Community support",
                "API access",
                "5GB storage"
              ]
            },
            {
              id: "professional",
              tag: "Professional",
              tagIcon: Sparkles,
              price: "$999",
              period: "/month",
              description: "For growing teams that need advanced features",
              button: {
                text: "Get Started",
                href: "contact"
              },
              featuresTitle: "What's Included:",
              features: [
                "Up to 25 team members",
                "Advanced automation",
                "Priority email support",
                "Unlimited API calls",
                "100GB storage",
                "Custom integrations",
                "Analytics dashboard"
              ]
            },
            {
              id: "enterprise",
              tag: "Enterprise",
              price: "Custom",
              period: "pricing",
              description: "Dedicated support and infrastructure for enterprises",
              button: {
                text: "Schedule Demo",
                href: "contact"
              },
              featuresTitle: "What's Included:",
              features: [
                "Unlimited team members",
                "Custom workflows",
                "24/7 dedicated support",
                "SLA guarantees",
                "Unlimited storage",
                "Custom SSO",
                "On-premise option",
                "Advanced security"
              ]
            }
          ]}
          animationType="slide-up"
          variant="card"
          textboxLayout="default"
          useInvertedBackground="noInvert"
        />
      </div>

      <div id="testimonials" data-section="testimonials">
        <TestimonialCardOne
          title="Trusted by Leading Tech Companies"
          description="See how industry leaders are using TechFlow to accelerate their growth"
          testimonials={[
            {
              id: "1",
              name: "Sarah Chen",
              role: "CTO",
              company: "CloudVenture Labs",
              rating: 5,
              imageSrc: "https://webuild-dev.s3.eu-north-1.amazonaws.com/gallery/uploaded-1766399490259-ptyv09vk.jpg",
              imageAlt: "Sarah Chen, CTO"
            },
            {
              id: "2",
              name: "Marcus Rodriguez",
              role: "Engineering Lead",
              company: "DataFlow Systems",
              rating: 5,
              imageSrc: "https://webuild-dev.s3.eu-north-1.amazonaws.com/gallery/uploaded-1766402156677-ohoht3cr.jpg",
              imageAlt: "Marcus Rodriguez, Engineering Lead"
            },
            {
              id: "3",
              name: "Emma Thompson",
              role: "Product Director",
              company: "AutoScale AI",
              rating: 5,
              imageSrc: "https://webuild-dev.s3.eu-north-1.amazonaws.com/gallery/uploaded-1766402157943-c3nj0vnx.jpg",
              imageAlt: "Emma Thompson, Product Director"
            },
            {
              id: "4",
              name: "David Liu",
              role: "Founder & CEO",
              company: "NexGen DevTools",
              rating: 5,
              imageSrc: "https://webuild-dev.s3.eu-north-1.amazonaws.com/gallery/uploaded-1766402159077-rcohkwtj.jpg",
              imageAlt: "David Liu, Founder & CEO"
            }
          ]}
          gridVariant="uniform-all-items-equal"
          animationType="slide-up"
          containerStyle="default"
          textboxLayout="default"
          useInvertedBackground="noInvert"
        />
      </div>

      <div id="faq" data-section="faq">
        <FaqBase
          title="Frequently Asked Questions"
          description="Find answers to common questions about TechFlow and how it can help your startup"
          faqs={[
            {
              id: "1",
              title: "How long does it take to get started?",
              content: "You can be up and running in minutes. Our onboarding process is designed to be intuitive, and we provide guided setup wizards for common configurations. Most teams are productive within their first day."
            },
            {
              id: "2",
              title: "Is my data secure with TechFlow?",
              content: "Yes. We use enterprise-grade encryption, comply with SOC 2 Type II standards, and conduct regular security audits. Your data is stored in secure, redundant data centers with automatic backups."
            },
            {
              id: "3",
              title: "Can I integrate TechFlow with our existing tools?",
              content: "Absolutely. We offer pre-built integrations with 100+ popular tools and a comprehensive API for custom integrations. Our integration marketplace continues to grow based on user demand."
            },
            {
              id: "4",
              title: "What support options are available?",
              content: "We offer email support for all plans, priority support for Professional and above, and 24/7 dedicated support for Enterprise customers. We also have extensive documentation and a community forum."
            },
            {
              id: "5",
              title: "Can I cancel my subscription anytime?",
              content: "Yes. You can cancel your subscription at any time without penalties. We offer monthly billing for maximum flexibility, and no long-term contracts are required."
            },
            {
              id: "6",
              title: "Do you offer training for my team?",
              content: "Yes. We provide online training sessions, comprehensive documentation, video tutorials, and for Enterprise customers, dedicated onboarding specialists."
            }
          ]}
          textboxLayout="default"
          useInvertedBackground="noInvert"
          animationType="smooth"
        />
      </div>

      <div id="contact" data-section="contact">
        <ContactCenterForm
          title="Ready to Transform Your Operations?"
          description="Get started with TechFlow today. Fill out the form below and our team will reach out within 24 hours to schedule your personalized demo."
          inputs={[
            {
              name: "fullName",
              type: "text",
              placeholder: "Full Name",
              required: true
            },
            {
              name: "email",
              type: "email",
              placeholder: "Work Email",
              required: true
            },
            {
              name: "company",
              type: "text",
              placeholder: "Company Name",
              required: true
            },
            {
              name: "teamSize",
              type: "text",
              placeholder: "Team Size",
              required: false
            }
          ]}
          textarea={{
            name: "message",
            placeholder: "Tell us about your needs and challenges...",
            rows: 5,
            required: false
          }}
          buttonText="Schedule Demo"
          useInvertedBackground="noInvert"
        />
      </div>

      <div id="footer" data-section="footer">
        <FooterSplit
          logoText="TechFlow"
          title="Powering the next generation of IT startups"
          columns={[
            {
              title: "Product",
              items: [
                { label: "Features", href: "#features" },
                { label: "Pricing", href: "#pricing" },
                { label: "Security", href: "#" },
                { label: "Integrations", href: "#" }
              ]
            },
            {
              title: "Company",
              items: [
                { label: "About", href: "#about" },
                { label: "Blog", href: "#" },
                { label: "Careers", href: "#" },
                { label: "Contact", href: "#contact" }
              ]
            },
            {
              title: "Resources",
              items: [
                { label: "Documentation", href: "#" },
                { label: "API Reference", href: "#" },
                { label: "Community", href: "#" },
                { label: "Status Page", href: "#" }
              ]
            },
            {
              title: "Legal",
              items: [
                { label: "Privacy Policy", href: "#" },
                { label: "Terms of Service", href: "#" },
                { label: "Cookie Policy", href: "#" }
              ]
            }
          ]}
          contactItems={[
            { icon: Mail, text: "hello@techflow.io" },
            { icon: Phone, text: "+1 (555) 123-4567" },
            { icon: MapPin, text: "San Francisco, CA 94105" }
          ]}
        />
      </div>
    </ThemeProvider>
  );
}