import { Button } from "@/components/ui/button";
import { useNavigate } from "react-router-dom";
import { useAuth } from "@/lib/auth-context";
import { useEffect, useState } from "react";
import { ArrowRight, Check, BarChart3, Users, Calendar, Clock } from "lucide-react";
import { getVersionString } from "@/lib/version";

const LandingPage = () => {
  const navigate = useNavigate();
  const { isAuthenticated } = useAuth();
  const [isMobile, setIsMobile] = useState(false);

  useEffect(() => {
    const handleResize = () => {
      setIsMobile(window.innerWidth < 768);
    };
    
    handleResize();
    window.addEventListener('resize', handleResize);
    
    return () => {
      window.removeEventListener('resize', handleResize);
    };
  }, []);

  const handleGetStarted = () => {
    if (isAuthenticated) {
      navigate("/tasks");
    } else {
      navigate("/login");
    }
  };

  return (
    <div className="flex flex-col min-h-screen bg-background">
      {/* Navigation */}
      <header className="border-b border-border sticky top-0 z-10 bg-background/95 backdrop-blur supports-[backdrop-filter]:bg-background/60">
        <div className="container py-4 mx-auto flex items-center justify-between">
          <div className="flex items-center gap-2">
            <div className="rounded-md bg-primary p-2 flex items-center justify-center">
              <svg
                xmlns="http://www.w3.org/2000/svg"
                width="20"
                height="20"
                viewBox="0 0 24 24"
                fill="none"
                stroke="white"
                strokeWidth="2"
                strokeLinecap="round"
                strokeLinejoin="round"
              >
                <path d="M22 12.5V6a2 2 0 0 0-2-2H4a2 2 0 0 0-2 2v12a2 2 0 0 0 2 2h8.5" />
                <path d="M16 2v4" />
                <path d="M8 2v4" />
                <path d="M3 10h18" />
                <circle cx="18" cy="18" r="3" />
                <path d="m21 21-1.5-1.5" />
              </svg>
            </div>
            <div>
              <h1 className="text-xl font-bold">Synthesys</h1>
              <p className="text-xs text-muted-foreground -mt-1">Project Management</p>
            </div>
          </div>
          
          <nav className="hidden md:flex items-center gap-8">
            <a href="#features" className="text-sm font-medium text-muted-foreground hover:text-foreground transition-colors">Features</a>
            <a href="#benefits" className="text-sm font-medium text-muted-foreground hover:text-foreground transition-colors">Benefits</a>
            <a href="#testimonials" className="text-sm font-medium text-muted-foreground hover:text-foreground transition-colors">Testimonials</a>
            <a href="#pricing" className="text-sm font-medium text-muted-foreground hover:text-foreground transition-colors">Pricing</a>
          </nav>
          
          <div className="flex items-center gap-3">
            {!isAuthenticated ? (
              <>
                <Button 
                  variant="outline"
                  onClick={() => navigate("/login")}
                  className="hidden md:flex"
                >
                  Log in
                </Button>
                <Button 
                  onClick={() => navigate("/register")}
                >
                  Sign up
                </Button>
              </>
            ) : (
              <Button 
                onClick={() => navigate("/tasks")}
              >
                My Tasks
              </Button>
            )}
          </div>
        </div>
      </header>

      {/* Hero Section */}
      <section className="py-16 md:py-24">
        <div className="container px-4 md:px-6 mx-auto">
          <div className="grid gap-6 lg:grid-cols-2 lg:gap-12 items-center">
            <div className="space-y-4">
              <div className="inline-block rounded-lg bg-muted px-3 py-1 text-sm">
                Project Management Tool
              </div>
              <h1 className="text-4xl font-bold tracking-tighter sm:text-5xl md:text-6xl">
                Manage Projects with Precision and Ease
              </h1>
              <p className="text-lg text-muted-foreground md:text-xl">
                Streamline your workflow, track progress, and collaborate seamlessly with our 
                comprehensive project management solution.
              </p>
              <div className="flex flex-col sm:flex-row gap-3 pt-4">
                <Button size="lg" onClick={handleGetStarted} className="gap-2">
                  Get Started <ArrowRight className="h-4 w-4" />
                </Button>
                <Button size="lg" variant="outline" onClick={() => navigate("/download-app")}>
                  Download App
                </Button>
              </div>
              
              <div className="mt-6 flex items-center gap-4 text-sm">
                <div className="flex items-center gap-1">
                  <Check className="h-4 w-4 text-primary" />
                  <span>Free trial</span>
                </div>
                <div className="flex items-center gap-1">
                  <Check className="h-4 w-4 text-primary" />
                  <span>No credit card</span>
                </div>
                <div className="flex items-center gap-1">
                  <Check className="h-4 w-4 text-primary" />
                  <span>Cancel anytime</span>
                </div>
              </div>
            </div>
            
            <div className="flex items-center justify-center lg:justify-end">
              <div className="relative">
                {/* Dashboard Preview */}
                <div className="overflow-hidden rounded-xl border bg-background shadow-xl">
                  <div className="bg-muted p-3 border-b">
                    <div className="flex items-center space-x-2">
                      <div className="h-3 w-3 rounded-full bg-red-500"></div>
                      <div className="h-3 w-3 rounded-full bg-yellow-500"></div>
                      <div className="h-3 w-3 rounded-full bg-green-500"></div>
                      <div className="ml-2 h-4 w-48 rounded bg-muted-foreground/20"></div>
                    </div>
                  </div>
                  <div className="p-8">
                    <div className="grid grid-cols-3 gap-6">
                      <div className="flex flex-col space-y-2">
                        <div className="h-20 rounded-md bg-muted-foreground/10 flex items-center justify-center">
                          <Calendar className="h-8 w-8 text-primary/70" />
                        </div>
                        <div className="h-2 w-full rounded-lg bg-muted-foreground/20"></div>
                        <div className="h-2 w-3/4 rounded-lg bg-muted-foreground/20"></div>
                      </div>
                      <div className="flex flex-col space-y-2">
                        <div className="h-20 rounded-md bg-muted-foreground/10 flex items-center justify-center">
                          <BarChart3 className="h-8 w-8 text-primary/70" />
                        </div>
                        <div className="h-2 w-full rounded-lg bg-muted-foreground/20"></div>
                        <div className="h-2 w-3/4 rounded-lg bg-muted-foreground/20"></div>
                      </div>
                      <div className="flex flex-col space-y-2">
                        <div className="h-20 rounded-md bg-muted-foreground/10 flex items-center justify-center">
                          <Users className="h-8 w-8 text-primary/70" />
                        </div>
                        <div className="h-2 w-full rounded-lg bg-muted-foreground/20"></div>
                        <div className="h-2 w-3/4 rounded-lg bg-muted-foreground/20"></div>
                      </div>
                    </div>
                    <div className="mt-6 space-y-2">
                      <div className="h-2 w-full rounded-lg bg-muted-foreground/20"></div>
                      <div className="h-2 w-full rounded-lg bg-muted-foreground/20"></div>
                      <div className="h-2 w-3/4 rounded-lg bg-muted-foreground/20"></div>
                    </div>
                  </div>
                </div>
                
                {/* Decorative elements */}
                <div className="absolute -top-4 -right-4 h-24 w-24 rounded-full bg-primary/20 blur-xl"></div>
                <div className="absolute -bottom-4 -left-4 h-24 w-24 rounded-full bg-primary/20 blur-xl"></div>
              </div>
            </div>
          </div>
        </div>
      </section>

      {/* Features Section */}
      <section id="features" className="py-16 bg-muted/50">
        <div className="container px-4 md:px-6 mx-auto">
          <div className="text-center max-w-[800px] mx-auto mb-12">
            <div className="inline-block rounded-lg bg-muted px-3 py-1 text-sm mb-4">
              Key Features
            </div>
            <h2 className="text-3xl font-bold tracking-tight sm:text-4xl md:text-5xl">
              Everything You Need to Manage Projects
            </h2>
            <p className="mt-4 text-muted-foreground text-lg">
              Our comprehensive platform provides all the tools needed to plan, execute, and track your projects from start to finish.
            </p>
          </div>

          <div className="grid grid-cols-1 md:grid-cols-3 gap-8">
            <div className="bg-background rounded-xl p-6 shadow-sm border">
              <div className="w-12 h-12 bg-primary/10 rounded-lg flex items-center justify-center mb-4">
                <Calendar className="h-6 w-6 text-primary" />
              </div>
              <h3 className="text-xl font-semibold mb-2">Task Management</h3>
              <p className="text-muted-foreground">
                Create, assign, and track tasks with custom statuses, priorities, and deadlines. Keep everyone on the same page.
              </p>
            </div>
            
            <div className="bg-background rounded-xl p-6 shadow-sm border">
              <div className="w-12 h-12 bg-primary/10 rounded-lg flex items-center justify-center mb-4">
                <Users className="h-6 w-6 text-primary" />
              </div>
              <h3 className="text-xl font-semibold mb-2">Team Collaboration</h3>
              <p className="text-muted-foreground">
                Work together seamlessly with real-time updates, notifications, and shared workspaces for efficient teamwork.
              </p>
            </div>
            
            <div className="bg-background rounded-xl p-6 shadow-sm border">
              <div className="w-12 h-12 bg-primary/10 rounded-lg flex items-center justify-center mb-4">
                <BarChart3 className="h-6 w-6 text-primary" />
              </div>
              <h3 className="text-xl font-semibold mb-2">Advanced Analytics</h3>
              <p className="text-muted-foreground">
                Gain insights with detailed reports, progress tracking, and performance metrics to make data-driven decisions.
              </p>
            </div>
          </div>
          
          <div className="mt-16 bg-background rounded-xl p-8 shadow-sm border">
            <div className="grid md:grid-cols-2 gap-8 items-center">
              <div>
                <h3 className="text-2xl font-bold mb-4">Streamlined Project Management</h3>
                <p className="text-muted-foreground mb-6">
                  Our intuitive interface makes it easy to manage complex projects, coordinate teams, and meet deadlines consistently.
                </p>
                
                <ul className="space-y-2">
                  <li className="flex items-start gap-2">
                    <Check className="h-5 w-5 text-primary mt-0.5" />
                    <span>Customizable workflows to match your process</span>
                  </li>
                  <li className="flex items-start gap-2">
                    <Check className="h-5 w-5 text-primary mt-0.5" />
                    <span>Powerful filtering and search capabilities</span>
                  </li>
                  <li className="flex items-start gap-2">
                    <Check className="h-5 w-5 text-primary mt-0.5" />
                    <span>Time tracking and resource management</span>
                  </li>
                  <li className="flex items-start gap-2">
                    <Check className="h-5 w-5 text-primary mt-0.5" />
                    <span>Calendar and Gantt chart views</span>
                  </li>
                </ul>
              </div>
              
              <div className="flex justify-center">
                <div className="relative w-full max-w-sm">
                  <div className="aspect-[4/3] rounded-xl bg-gradient-to-r from-primary/20 to-primary/30 flex items-center justify-center p-8">
                    <div className="w-full aspect-[1.5/1] bg-background rounded-lg shadow-lg flex flex-col">
                      <div className="h-2 w-1/3 bg-primary/20 rounded-full m-4"></div>
                      <div className="flex-1 grid grid-cols-2 gap-2 p-4">
                        <div className="bg-muted rounded"></div>
                        <div className="bg-muted rounded"></div>
                        <div className="bg-muted rounded"></div>
                        <div className="bg-muted rounded"></div>
                      </div>
                    </div>
                  </div>
                  <div className="absolute -bottom-4 -right-4 h-24 w-24 rounded-full bg-primary/20 blur-xl -z-10"></div>
                </div>
              </div>
            </div>
          </div>
        </div>
      </section>

      {/* Testimonials Section */}
      <section id="testimonials" className="py-16">
        <div className="container px-4 md:px-6 mx-auto">
          <div className="text-center max-w-[800px] mx-auto mb-12">
            <div className="inline-block rounded-lg bg-muted px-3 py-1 text-sm mb-4">
              Testimonials
            </div>
            <h2 className="text-3xl font-bold tracking-tight sm:text-4xl">
              Trusted by Teams Worldwide
            </h2>
            <p className="mt-4 text-muted-foreground text-lg">
              See what our customers are saying about how Synthesys PM Tool has transformed their project management.
            </p>
          </div>

          <div className="grid grid-cols-1 md:grid-cols-3 gap-8">
            <div className="bg-background rounded-xl p-6 shadow-sm border">
              <div className="flex justify-between mb-4">
                <div className="flex space-x-1">
                  {[...Array(5)].map((_, i) => (
                    <svg
                      key={i}
                      xmlns="http://www.w3.org/2000/svg"
                      width="16"
                      height="16"
                      viewBox="0 0 24 24"
                      fill="#FFCB47"
                      stroke="#FFCB47"
                      strokeWidth="2"
                      strokeLinecap="round"
                      strokeLinejoin="round"
                    >
                      <polygon points="12 2 15.09 8.26 22 9.27 17 14.14 18.18 21.02 12 17.77 5.82 21.02 7 14.14 2 9.27 8.91 8.26 12 2" />
                    </svg>
                  ))}
                </div>
              </div>
              <p className="text-muted-foreground mb-6">
                "Synthesys PM Tool has completely transformed how our team manages projects. The intuitive interface and powerful features have increased our productivity by 40%."
              </p>
              <div className="flex items-center">
                <div className="w-10 h-10 rounded-full bg-primary/20 flex items-center justify-center mr-3">
                  <span className="text-primary font-medium">JD</span>
                </div>
                <div>
                  <p className="font-medium">John Doe</p>
                  <p className="text-sm text-muted-foreground">Project Manager, TechCorp</p>
                </div>
              </div>
            </div>

            <div className="bg-background rounded-xl p-6 shadow-sm border">
              <div className="flex justify-between mb-4">
                <div className="flex space-x-1">
                  {[...Array(5)].map((_, i) => (
                    <svg
                      key={i}
                      xmlns="http://www.w3.org/2000/svg"
                      width="16"
                      height="16"
                      viewBox="0 0 24 24"
                      fill="#FFCB47"
                      stroke="#FFCB47"
                      strokeWidth="2"
                      strokeLinecap="round"
                      strokeLinejoin="round"
                    >
                      <polygon points="12 2 15.09 8.26 22 9.27 17 14.14 18.18 21.02 12 17.77 5.82 21.02 7 14.14 2 9.27 8.91 8.26 12 2" />
                    </svg>
                  ))}
                </div>
              </div>
              <p className="text-muted-foreground mb-6">
                "We've tried many project management tools, but Synthesys stands out with its comprehensive feature set and ease of use. Our team adopted it immediately."
              </p>
              <div className="flex items-center">
                <div className="w-10 h-10 rounded-full bg-primary/20 flex items-center justify-center mr-3">
                  <span className="text-primary font-medium">SS</span>
                </div>
                <div>
                  <p className="font-medium">Sarah Smith</p>
                  <p className="text-sm text-muted-foreground">CTO, Innovation Inc</p>
                </div>
              </div>
            </div>

            <div className="bg-background rounded-xl p-6 shadow-sm border">
              <div className="flex justify-between mb-4">
                <div className="flex space-x-1">
                  {[...Array(5)].map((_, i) => (
                    <svg
                      key={i}
                      xmlns="http://www.w3.org/2000/svg"
                      width="16"
                      height="16"
                      viewBox="0 0 24 24"
                      fill="#FFCB47"
                      stroke="#FFCB47"
                      strokeWidth="2"
                      strokeLinecap="round"
                      strokeLinejoin="round"
                    >
                      <polygon points="12 2 15.09 8.26 22 9.27 17 14.14 18.18 21.02 12 17.77 5.82 21.02 7 14.14 2 9.27 8.91 8.26 12 2" />
                    </svg>
                  ))}
                </div>
              </div>
              <p className="text-muted-foreground mb-6">
                "The analytics and reporting features in Synthesys PM Tool have given us valuable insights into our workflow and helped us optimize our processes."
              </p>
              <div className="flex items-center">
                <div className="w-10 h-10 rounded-full bg-primary/20 flex items-center justify-center mr-3">
                  <span className="text-primary font-medium">MJ</span>
                </div>
                <div>
                  <p className="font-medium">Michael Johnson</p>
                  <p className="text-sm text-muted-foreground">Director, Global Solutions</p>
                </div>
              </div>
            </div>
          </div>
        </div>
      </section>

      {/* Benefits Section */}
      <section id="benefits" className="py-16 bg-muted/50">
        <div className="container px-4 md:px-6 mx-auto">
          <div className="grid md:grid-cols-2 gap-12 items-center">
            <div>
              <div className="inline-block rounded-lg bg-muted px-3 py-1 text-sm mb-4">
                Benefits
              </div>
              <h2 className="text-3xl font-bold tracking-tight sm:text-4xl mb-4">
                Why Choose Synthesys PM Tool?
              </h2>
              <p className="text-muted-foreground text-lg mb-8">
                Our platform is designed to help teams of all sizes deliver projects successfully, on time, and within budget.
              </p>
              
              <div className="grid grid-cols-1 sm:grid-cols-2 gap-6">
                <div className="flex flex-col space-y-2">
                  <div className="flex items-center space-x-2">
                    <div className="flex-shrink-0 w-8 h-8 rounded-full bg-primary/10 flex items-center justify-center">
                      <Clock className="h-4 w-4 text-primary" />
                    </div>
                    <h3 className="font-semibold">Save Time</h3>
                  </div>
                  <p className="text-sm text-muted-foreground">
                    Automate repetitive tasks and streamline workflows to focus on what matters.
                  </p>
                </div>
                
                <div className="flex flex-col space-y-2">
                  <div className="flex items-center space-x-2">
                    <div className="flex-shrink-0 w-8 h-8 rounded-full bg-primary/10 flex items-center justify-center">
                      <Users className="h-4 w-4 text-primary" />
                    </div>
                    <h3 className="font-semibold">Improve Collaboration</h3>
                  </div>
                  <p className="text-sm text-muted-foreground">
                    Connect your team with real-time updates and centralized information.
                  </p>
                </div>
                
                <div className="flex flex-col space-y-2">
                  <div className="flex items-center space-x-2">
                    <div className="flex-shrink-0 w-8 h-8 rounded-full bg-primary/10 flex items-center justify-center">
                      <BarChart3 className="h-4 w-4 text-primary" />
                    </div>
                    <h3 className="font-semibold">Data-Driven Insights</h3>
                  </div>
                  <p className="text-sm text-muted-foreground">
                    Make informed decisions with comprehensive analytics and reporting.
                  </p>
                </div>
                
                <div className="flex flex-col space-y-2">
                  <div className="flex items-center space-x-2">
                    <div className="flex-shrink-0 w-8 h-8 rounded-full bg-primary/10 flex items-center justify-center">
                      <Calendar className="h-4 w-4 text-primary" />
                    </div>
                    <h3 className="font-semibold">Meet Deadlines</h3>
                  </div>
                  <p className="text-sm text-muted-foreground">
                    Stay on track with calendar views, reminders, and progress tracking.
                  </p>
                </div>
              </div>
            </div>
            
            <div className="flex justify-center">
              <div className="relative w-full max-w-md">
                <div className="bg-background rounded-2xl border shadow-lg p-8 relative z-10">
                  <div className="flex justify-between items-center mb-6">
                    <div className="flex items-center space-x-2">
                      <svg
                        xmlns="http://www.w3.org/2000/svg"
                        width="24"
                        height="24"
                        viewBox="0 0 24 24"
                        fill="none"
                        stroke="currentColor"
                        strokeWidth="2"
                        strokeLinecap="round"
                        strokeLinejoin="round"
                        className="text-primary"
                      >
                        <path d="M22 12.5V6a2 2 0 0 0-2-2H4a2 2 0 0 0-2 2v12a2 2 0 0 0 2 2h8.5" />
                        <path d="M16 2v4" />
                        <path d="M8 2v4" />
                        <path d="M3 10h18" />
                        <circle cx="18" cy="18" r="3" />
                        <path d="m21 21-1.5-1.5" />
                      </svg>
                      <span className="font-semibold">Project Overview</span>
                    </div>
                    <div className="text-sm font-medium text-primary">Q3 2023</div>
                  </div>
                  
                  <div className="space-y-4">
                    <div className="space-y-2">
                      <div className="flex justify-between text-sm">
                        <span className="font-medium">Website Redesign</span>
                        <span className="text-muted-foreground">78%</span>
                      </div>
                      <div className="w-full h-2 bg-muted rounded-full overflow-hidden">
                        <div className="bg-primary h-full rounded-full" style={{ width: '78%' }}></div>
                      </div>
                    </div>
                    
                    <div className="space-y-2">
                      <div className="flex justify-between text-sm">
                        <span className="font-medium">Mobile App Development</span>
                        <span className="text-muted-foreground">45%</span>
                      </div>
                      <div className="w-full h-2 bg-muted rounded-full overflow-hidden">
                        <div className="bg-primary h-full rounded-full" style={{ width: '45%' }}></div>
                      </div>
                    </div>
                    
                    <div className="space-y-2">
                      <div className="flex justify-between text-sm">
                        <span className="font-medium">Marketing Campaign</span>
                        <span className="text-muted-foreground">92%</span>
                      </div>
                      <div className="w-full h-2 bg-muted rounded-full overflow-hidden">
                        <div className="bg-primary h-full rounded-full" style={{ width: '92%' }}></div>
                      </div>
                    </div>
                  </div>
                  
                  <div className="mt-8 pt-6 border-t">
                    <div className="flex justify-between items-center">
                      <h4 className="font-semibold">Team Members</h4>
                      <span className="text-sm text-primary">View all</span>
                    </div>
                    <div className="mt-4 flex -space-x-2">
                      <div className="w-8 h-8 rounded-full bg-primary/20 flex items-center justify-center border-2 border-background">
                        <span className="text-xs text-primary font-medium">JD</span>
                      </div>
                      <div className="w-8 h-8 rounded-full bg-purple-100 flex items-center justify-center border-2 border-background">
                        <span className="text-xs text-purple-600 font-medium">SS</span>
                      </div>
                      <div className="w-8 h-8 rounded-full bg-blue-100 flex items-center justify-center border-2 border-background">
                        <span className="text-xs text-blue-600 font-medium">MJ</span>
                      </div>
                      <div className="w-8 h-8 rounded-full bg-green-100 flex items-center justify-center border-2 border-background">
                        <span className="text-xs text-green-600 font-medium">AR</span>
                      </div>
                      <div className="w-8 h-8 rounded-full bg-background flex items-center justify-center border-2 border-background shadow-sm">
                        <span className="text-xs text-muted-foreground font-medium">+3</span>
                      </div>
                    </div>
                  </div>
                </div>
                
                {/* Decorative elements */}
                <div className="absolute -top-6 -left-6 w-24 h-24 bg-primary/20 rounded-full blur-xl -z-10"></div>
                <div className="absolute -bottom-6 -right-6 w-32 h-32 bg-primary/30 rounded-full blur-xl -z-10"></div>
              </div>
            </div>
          </div>
        </div>
      </section>

      {/* Pricing Section */}
      <section id="pricing" className="py-16">
        <div className="container px-4 md:px-6 mx-auto">
          <div className="text-center max-w-[800px] mx-auto mb-12">
            <div className="inline-block rounded-lg bg-muted px-3 py-1 text-sm mb-4">
              Pricing
            </div>
            <h2 className="text-3xl font-bold tracking-tight sm:text-4xl">
              Simple, Transparent Pricing
            </h2>
            <p className="mt-4 text-muted-foreground text-lg">
              Choose the plan that best fits your team's needs. All plans include core features with no hidden fees.
            </p>
          </div>

          <div className="grid grid-cols-1 md:grid-cols-3 gap-8">
            <div className="bg-background rounded-xl p-6 shadow-sm border relative">
              <div className="mb-6">
                <h3 className="text-lg font-semibold">Starter</h3>
                <p className="text-sm text-muted-foreground mt-1">Perfect for small teams</p>
                <div className="mt-4 flex items-baseline">
                  <span className="text-3xl font-bold">$9</span>
                  <span className="text-muted-foreground ml-1">/user/month</span>
                </div>
              </div>
              
              <ul className="space-y-3 mb-6">
                <li className="flex items-start gap-2">
                  <Check className="h-5 w-5 text-primary flex-shrink-0 mt-0.5" />
                  <span className="text-sm">Up to 10 projects</span>
                </li>
                <li className="flex items-start gap-2">
                  <Check className="h-5 w-5 text-primary flex-shrink-0 mt-0.5" />
                  <span className="text-sm">Basic reporting</span>
                </li>
                <li className="flex items-start gap-2">
                  <Check className="h-5 w-5 text-primary flex-shrink-0 mt-0.5" />
                  <span className="text-sm">5GB storage</span>
                </li>
                <li className="flex items-start gap-2">
                  <Check className="h-5 w-5 text-primary flex-shrink-0 mt-0.5" />
                  <span className="text-sm">Community support</span>
                </li>
              </ul>
              
              <Button variant="outline" className="w-full" onClick={handleGetStarted}>
                Get Started
              </Button>
            </div>

            <div className="bg-background rounded-xl p-6 shadow-lg border-2 border-primary/50 relative">
              <div className="absolute -top-3 right-6 bg-primary text-primary-foreground text-xs px-3 py-1 rounded-full">
                Most Popular
              </div>
              
              <div className="mb-6">
                <h3 className="text-lg font-semibold">Professional</h3>
                <p className="text-sm text-muted-foreground mt-1">For growing teams</p>
                <div className="mt-4 flex items-baseline">
                  <span className="text-3xl font-bold">$19</span>
                  <span className="text-muted-foreground ml-1">/user/month</span>
                </div>
              </div>
              
              <ul className="space-y-3 mb-6">
                <li className="flex items-start gap-2">
                  <Check className="h-5 w-5 text-primary flex-shrink-0 mt-0.5" />
                  <span className="text-sm">Unlimited projects</span>
                </li>
                <li className="flex items-start gap-2">
                  <Check className="h-5 w-5 text-primary flex-shrink-0 mt-0.5" />
                  <span className="text-sm">Advanced analytics</span>
                </li>
                <li className="flex items-start gap-2">
                  <Check className="h-5 w-5 text-primary flex-shrink-0 mt-0.5" />
                  <span className="text-sm">20GB storage</span>
                </li>
                <li className="flex items-start gap-2">
                  <Check className="h-5 w-5 text-primary flex-shrink-0 mt-0.5" />
                  <span className="text-sm">Priority email support</span>
                </li>
                <li className="flex items-start gap-2">
                  <Check className="h-5 w-5 text-primary flex-shrink-0 mt-0.5" />
                  <span className="text-sm">Custom workflows</span>
                </li>
              </ul>
              
              <Button className="w-full" onClick={handleGetStarted}>
                Get Started
              </Button>
            </div>

            <div className="bg-background rounded-xl p-6 shadow-sm border relative">
              <div className="mb-6">
                <h3 className="text-lg font-semibold">Enterprise</h3>
                <p className="text-sm text-muted-foreground mt-1">For large organizations</p>
                <div className="mt-4 flex items-baseline">
                  <span className="text-3xl font-bold">$39</span>
                  <span className="text-muted-foreground ml-1">/user/month</span>
                </div>
              </div>
              
              <ul className="space-y-3 mb-6">
                <li className="flex items-start gap-2">
                  <Check className="h-5 w-5 text-primary flex-shrink-0 mt-0.5" />
                  <span className="text-sm">Unlimited everything</span>
                </li>
                <li className="flex items-start gap-2">
                  <Check className="h-5 w-5 text-primary flex-shrink-0 mt-0.5" />
                  <span className="text-sm">Advanced security</span>
                </li>
                <li className="flex items-start gap-2">
                  <Check className="h-5 w-5 text-primary flex-shrink-0 mt-0.5" />
                  <span className="text-sm">Unlimited storage</span>
                </li>
                <li className="flex items-start gap-2">
                  <Check className="h-5 w-5 text-primary flex-shrink-0 mt-0.5" />
                  <span className="text-sm">24/7 phone support</span>
                </li>
                <li className="flex items-start gap-2">
                  <Check className="h-5 w-5 text-primary flex-shrink-0 mt-0.5" />
                  <span className="text-sm">Dedicated account manager</span>
                </li>
                <li className="flex items-start gap-2">
                  <Check className="h-5 w-5 text-primary flex-shrink-0 mt-0.5" />
                  <span className="text-sm">Custom integrations</span>
                </li>
              </ul>
              
              <Button variant="outline" className="w-full" onClick={handleGetStarted}>
                Contact Sales
              </Button>
            </div>
          </div>
          
          <div className="mt-12 text-center">
            <p className="text-muted-foreground">
              Need a custom plan? <a href="#" className="text-primary font-medium hover:underline">Contact us</a> for a tailored solution.
            </p>
          </div>
        </div>
      </section>

      {/* CTA Section */}
      <section className="py-16 bg-primary/5">
        <div className="container px-4 md:px-6 mx-auto">
          <div className="bg-background rounded-xl p-8 md:p-12 shadow-lg border">
            <div className="grid md:grid-cols-2 gap-8 items-center">
              <div>
                <h2 className="text-3xl font-bold tracking-tight mb-4">Ready to Transform Your Project Management?</h2>
                <p className="text-lg text-muted-foreground mb-6">
                  Join thousands of teams that use Synthesys PM Tool to deliver successful projects on time and within budget.
                </p>
                <div className="flex flex-col sm:flex-row gap-3">
                  <Button size="lg" onClick={handleGetStarted} className="gap-2">
                    Get Started for Free <ArrowRight className="h-4 w-4" />
                  </Button>
                  <Button size="lg" variant="outline" onClick={() => window.location.href = "#features"}>
                    Learn More
                  </Button>
                </div>
              </div>
              
              <div className="hidden md:flex justify-end">
                <div className="relative w-72 h-72">
                  <div className="absolute inset-0 rounded-full bg-gradient-to-r from-primary/30 to-primary/10 blur-2xl -z-10"></div>
                  <div className="relative z-10 w-full h-full flex items-center justify-center">
                    <svg
                      xmlns="http://www.w3.org/2000/svg"
                      width="180"
                      height="180"
                      viewBox="0 0 24 24"
                      fill="none"
                      stroke="currentColor"
                      strokeWidth="1"
                      strokeLinecap="round"
                      strokeLinejoin="round"
                      className="text-primary/80"
                    >
                      <path d="M22 12.5V6a2 2 0 0 0-2-2H4a2 2 0 0 0-2 2v12a2 2 0 0 0 2 2h8.5" />
                      <path d="M16 2v4" />
                      <path d="M8 2v4" />
                      <path d="M3 10h18" />
                      <circle cx="18" cy="18" r="3" />
                      <path d="m21 21-1.5-1.5" />
                    </svg>
                  </div>
                </div>
              </div>
            </div>
          </div>
        </div>
      </section>

      {/* Footer */}
      <footer className="bg-muted py-12">
        <div className="container px-4 md:px-6 mx-auto">
          <div className="grid grid-cols-1 md:grid-cols-4 gap-8">
            <div className="space-y-4">
              <div className="flex items-center gap-2">
                <div className="rounded-md bg-primary p-2 flex items-center justify-center">
                  <svg
                    xmlns="http://www.w3.org/2000/svg"
                    width="16"
                    height="16"
                    viewBox="0 0 24 24"
                    fill="none"
                    stroke="white"
                    strokeWidth="2"
                    strokeLinecap="round"
                    strokeLinejoin="round"
                  >
                    <path d="M22 12.5V6a2 2 0 0 0-2-2H4a2 2 0 0 0-2 2v12a2 2 0 0 0 2 2h8.5" />
                    <path d="M16 2v4" />
                    <path d="M8 2v4" />
                    <path d="M3 10h18" />
                    <circle cx="18" cy="18" r="3" />
                    <path d="m21 21-1.5-1.5" />
                  </svg>
                </div>
                <div>
                  <h1 className="text-lg font-bold">Synthesys</h1>
                  <p className="text-xs text-muted-foreground -mt-1">Project Management</p>
                </div>
              </div>
              <p className="text-sm text-muted-foreground">
                Streamline your project management with our comprehensive, easy-to-use platform.
              </p>
              <div className="flex space-x-3">
                <a href="#" className="text-muted-foreground hover:text-foreground transition-colors">
                  <svg xmlns="http://www.w3.org/2000/svg" width="20" height="20" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2" strokeLinecap="round" strokeLinejoin="round">
                    <path d="M18 2h-3a5 5 0 0 0-5 5v3H7v4h3v8h4v-8h3l1-4h-4V7a1 1 0 0 1 1-1h3z"></path>
                  </svg>
                </a>
                <a href="#" className="text-muted-foreground hover:text-foreground transition-colors">
                  <svg xmlns="http://www.w3.org/2000/svg" width="20" height="20" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2" strokeLinecap="round" strokeLinejoin="round">
                    <path d="M22 4s-.7 2.1-2 3.4c1.6 10-9.4 17.3-18 11.6 2.2.1 4.4-.6 6-2C3 15.5.5 9.6 3 5c2.2 2.6 5.6 4.1 9 4-.9-4.2 4-6.6 7-3.8 1.1 0 3-1.2 3-1.2z"></path>
                  </svg>
                </a>
                <a href="#" className="text-muted-foreground hover:text-foreground transition-colors">
                  <svg xmlns="http://www.w3.org/2000/svg" width="20" height="20" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2" strokeLinecap="round" strokeLinejoin="round">
                    <rect x="2" y="2" width="20" height="20" rx="5" ry="5"></rect>
                    <path d="M16 11.37A4 4 0 1 1 12.63 8 4 4 0 0 1 16 11.37z"></path>
                    <line x1="17.5" y1="6.5" x2="17.51" y2="6.5"></line>
                  </svg>
                </a>
                <a href="#" className="text-muted-foreground hover:text-foreground transition-colors">
                  <svg xmlns="http://www.w3.org/2000/svg" width="20" height="20" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2" strokeLinecap="round" strokeLinejoin="round">
                    <path d="M16 8a6 6 0 0 1 6 6v7h-4v-7a2 2 0 0 0-2-2 2 2 0 0 0-2 2v7h-4v-7a6 6 0 0 1 6-6z"></path>
                    <rect x="2" y="9" width="4" height="12"></rect>
                    <circle cx="4" cy="4" r="2"></circle>
                  </svg>
                </a>
              </div>
            </div>
            
            <div>
              <h3 className="font-semibold mb-3">Product</h3>
              <ul className="space-y-2">
                <li><a href="#features" className="text-sm text-muted-foreground hover:text-foreground transition-colors">Features</a></li>
                <li><a href="#pricing" className="text-sm text-muted-foreground hover:text-foreground transition-colors">Pricing</a></li>
                <li><a href="#" className="text-sm text-muted-foreground hover:text-foreground transition-colors">Integrations</a></li>
                <li><a href="#" className="text-sm text-muted-foreground hover:text-foreground transition-colors">Updates</a></li>
                <li><a href="#" className="text-sm text-muted-foreground hover:text-foreground transition-colors">Roadmap</a></li>
              </ul>
            </div>
            
            <div>
              <h3 className="font-semibold mb-3">Resources</h3>
              <ul className="space-y-2">
                <li><a href="#" className="text-sm text-muted-foreground hover:text-foreground transition-colors">Documentation</a></li>
                <li><a href="#" className="text-sm text-muted-foreground hover:text-foreground transition-colors">Guides</a></li>
                <li><a href="#" className="text-sm text-muted-foreground hover:text-foreground transition-colors">Support</a></li>
                <li><a href="#" className="text-sm text-muted-foreground hover:text-foreground transition-colors">API</a></li>
                <li><a href="#" className="text-sm text-muted-foreground hover:text-foreground transition-colors">Community</a></li>
              </ul>
            </div>
            
            <div>
              <h3 className="font-semibold mb-3">Company</h3>
              <ul className="space-y-2">
                <li><a href="#" className="text-sm text-muted-foreground hover:text-foreground transition-colors">About</a></li>
                <li><a href="#" className="text-sm text-muted-foreground hover:text-foreground transition-colors">Blog</a></li>
                <li><a href="#" className="text-sm text-muted-foreground hover:text-foreground transition-colors">Careers</a></li>
                <li><a href="#" className="text-sm text-muted-foreground hover:text-foreground transition-colors">Press</a></li>
                <li><a href="#" className="text-sm text-muted-foreground hover:text-foreground transition-colors">Contact</a></li>
              </ul>
            </div>
          </div>
          
          <div className="mt-12 pt-8 border-t border-border flex flex-col md:flex-row justify-between items-center">
            <div className="flex flex-col space-y-1 mb-4 md:mb-0">
              <p className="text-sm text-muted-foreground">
                © {new Date().getFullYear()} Synthesys. All rights reserved.
              </p>
              <p className="text-xs text-muted-foreground/70">
                Version {getVersionString()}
              </p>
            </div>
            <div className="flex space-x-6">
              <a href="#" className="text-sm text-muted-foreground hover:text-foreground transition-colors">Terms</a>
              <a href="#" className="text-sm text-muted-foreground hover:text-foreground transition-colors">Privacy</a>
              <a href="#" className="text-sm text-muted-foreground hover:text-foreground transition-colors">Cookies</a>
              <a href="#" className="text-sm text-muted-foreground hover:text-foreground transition-colors">Security</a>
            </div>
          </div>
        </div>
      </footer>
    </div>
  );
};

export default LandingPage;