// File: monorepo/web/maplefile-frontend/src/pages/Anonymous/Index/IndexPage.jsx
// UIX version - Red theme landing page with UIX components
import { useState, useEffect, useRef } from "react";
import { Link } from "react-router";
import { Button, Card, Alert, useUIXTheme } from "../../../components/UIX";
import {
  ArrowRightIcon,
  PlayIcon,
  ShieldCheckIcon,
  LockClosedIcon,
  ServerIcon,
  KeyIcon,
  CloudArrowUpIcon,
  EyeSlashIcon,
  CheckIcon,
  UserGroupIcon,
  FolderIcon,
  ShareIcon,
  DocumentIcon,
  ExclamationTriangleIcon,
  ChevronDownIcon,
} from "@heroicons/react/24/outline";

function IndexPage() {
  const { getThemeClasses } = useUIXTheme();
  const [authMessage, setAuthMessage] = useState("");
  const [openFaq, setOpenFaq] = useState(null);
  const timerRef = useRef(null);
  const isMountedRef = useRef(true);

  // Cleanup on unmount
  useEffect(() => {
    isMountedRef.current = true;
    return () => {
      isMountedRef.current = false;
      if (timerRef.current) {
        clearTimeout(timerRef.current);
      }
    };
  }, []);

  useEffect(() => {
    // Check for auth redirect message
    const message = sessionStorage.getItem("auth_redirect_message");
    if (message) {
      setAuthMessage(message);
      sessionStorage.removeItem("auth_redirect_message");

      // Clear message after 10 seconds
      timerRef.current = setTimeout(() => {
        if (isMountedRef.current) {
          setAuthMessage("");
        }
      }, 10000);
    }
  }, []);

  const problemsWeSolve = [
    {
      icon: ExclamationTriangleIcon,
      problem: "Big tech can access your files",
      solution: "Zero-knowledge encryption means we can't see your data",
    },
    {
      icon: ExclamationTriangleIcon,
      problem: "Your data is stored in foreign jurisdictions",
      solution: "100% Canadian infrastructure with strong privacy laws",
    },
    {
      icon: ExclamationTriangleIcon,
      problem: "Complex encryption tools are hard to use",
      solution: "Simple drag-and-drop with automatic encryption",
    },
  ];

  const howItWorks = [
    {
      step: 1,
      icon: KeyIcon,
      title: "Create Your Account",
      description: "Sign up with your email. Your password creates your unique encryption keys - we never see them.",
    },
    {
      step: 2,
      icon: CloudArrowUpIcon,
      title: "Upload Your Files",
      description: "Drag and drop any file. It's encrypted in your browser before it ever leaves your device.",
    },
    {
      step: 3,
      icon: ShareIcon,
      title: "Share Securely",
      description: "Invite others to view or edit. They get their own encrypted access - no password sharing needed.",
    },
  ];

  const securityFeatures = [
    {
      icon: LockClosedIcon,
      title: "End-to-End Encryption",
      description:
        "ChaCha20-Poly1305 encryption with X25519 key exchange. The same encryption trusted by security experts worldwide.",
    },
    {
      icon: KeyIcon,
      title: "Client-Side Cryptography",
      description:
        "All encryption happens in your browser. Your keys never leave your device - not even we can see them.",
    },
    {
      icon: EyeSlashIcon,
      title: "True Zero-Knowledge",
      description:
        "We mathematically cannot access your files. Even if compelled by law, we have nothing to hand over.",
    },
    {
      icon: ServerIcon,
      title: "Canadian Data Residency",
      description:
        "Your encrypted data stays in Canada, protected by PIPEDA and strong Canadian privacy laws.",
    },
  ];

  const useCases = [
    {
      icon: UserGroupIcon,
      title: "Legal Professionals",
      description: "Protect client confidentiality with encrypted document storage and secure sharing.",
    },
    {
      icon: DocumentIcon,
      title: "Healthcare Providers",
      description: "PIPEDA-compliant storage for patient records and sensitive medical documents.",
    },
    {
      icon: FolderIcon,
      title: "Small Businesses",
      description: "Secure team collaboration with granular permissions and encrypted file sharing.",
    },
    {
      icon: ShieldCheckIcon,
      title: "Privacy-Conscious Individuals",
      description: "Take control of your personal data. No ads, no tracking, no data mining.",
    },
  ];

  const comparisonFeatures = [
    { feature: "End-to-End Encryption", maplefile: true, others: false },
    { feature: "Zero-Knowledge Architecture", maplefile: true, others: false },
    { feature: "Canadian Data Residency", maplefile: true, others: false },
    { feature: "Client-Side Encryption", maplefile: true, others: false },
    { feature: "No Data Mining", maplefile: true, others: false },
    { feature: "PIPEDA Compliant", maplefile: true, others: "Varies" },
    { feature: "Open Source", maplefile: true, others: false },
  ];

  const faqs = [
    {
      question: "What happens if I forget my password?",
      answer: "During signup, you'll receive recovery codes. Store these safely - they're the only way to recover your account if you forget your password. We cannot reset your password because we never have access to your encryption keys.",
    },
    {
      question: "Can MapleFile see my files?",
      answer: "No. Your files are encrypted on your device before they're uploaded. We only ever see encrypted data that's meaningless without your keys. This is called 'zero-knowledge' architecture.",
    },
    {
      question: "Is my data really stored in Canada?",
      answer: "Yes. All data is stored in Canadian data centers. We don't use any foreign cloud providers for storage. Your data is protected by Canadian privacy laws including PIPEDA.",
    },
    {
      question: "How is MapleFile different from Dropbox or Google Drive?",
      answer: "Unlike traditional cloud storage, MapleFile uses true end-to-end encryption. With Dropbox or Google Drive, the provider can access your files. With MapleFile, only you and people you explicitly share with can decrypt your data.",
    },
    {
      question: "Can I share files with people who don't have a MapleFile account?",
      answer: "Currently, file sharing requires both parties to have MapleFile accounts. This ensures end-to-end encryption is maintained. We're working on secure link sharing for a future update.",
    },
  ];

  return (
    <div className="min-h-screen bg-white overflow-hidden">
      {/* Show auth message if present */}
      {authMessage && (
        <div className="fixed top-0 left-0 right-0 z-50 p-4">
          <Alert type="warning">
            <strong>Authentication Required:</strong> {authMessage}
          </Alert>
        </div>
      )}

      {/* Navigation */}
      <nav className={`relative z-50 ${getThemeClasses("bg-card")}/95 backdrop-blur-sm border-b ${getThemeClasses("border-muted")}`}>
        <div className="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8">
          <div className="flex justify-between items-center py-4">
            <div className="flex items-center group">
              <div className={`flex items-center justify-center h-10 w-10 ${getThemeClasses("bg-gradient-secondary")} rounded-lg mr-3 group-hover:scale-105 transition-transform duration-200`}>
                <LockClosedIcon className="h-6 w-6 text-white" />
              </div>
              <span className={`text-2xl font-bold ${getThemeClasses("text-primary")}`}>
                MapleFile
              </span>
            </div>
            <div className="hidden md:flex items-center space-x-6">
              <a href="#how-it-works" className={`${getThemeClasses("text-secondary")} ${getThemeClasses("hover:text-primary")} font-medium`}>
                How It Works
              </a>
              <a href="#security" className={`${getThemeClasses("text-secondary")} ${getThemeClasses("hover:text-primary")} font-medium`}>
                Security
              </a>
              <a href="#pricing" className={`${getThemeClasses("text-secondary")} ${getThemeClasses("hover:text-primary")} font-medium`}>
                Pricing
              </a>
              <a href="#faq" className={`${getThemeClasses("text-secondary")} ${getThemeClasses("hover:text-primary")} font-medium`}>
                FAQ
              </a>
            </div>
            <div className="flex items-center space-x-4">
              <Link to="/login">
                <Button variant="ghost" size="md">
                  Sign in
                </Button>
              </Link>
              <Link to="/register">
                <Button variant="primary" size="md" className="group">
                  <span className="flex items-center whitespace-nowrap">
                    Get Started Free
                    <ArrowRightIcon className="ml-2 h-4 w-4 group-hover:translate-x-1 transition-transform duration-200 flex-shrink-0" />
                  </span>
                </Button>
              </Link>
            </div>
          </div>
        </div>
      </nav>

      {/* Hero Section */}
      <div className={`relative ${getThemeClasses("bg-gradient-primary")} overflow-hidden`}>
        <div className="absolute inset-0 bg-grid-pattern opacity-5"></div>
        <div className="relative max-w-7xl mx-auto px-4 sm:px-6 lg:px-8 pt-16 pb-24">
          <div className="text-center">
            {/* Trust Badge */}
            <div className="flex justify-center mb-6 animate-fade-in">
              <div className={`inline-flex items-center ${getThemeClasses("bg-accent-light")} border ${getThemeClasses("border-accent")} rounded-full px-4 py-2 text-sm`}>
                <span className="text-lg mr-2">🍁</span>
                <span className={`${getThemeClasses("text-accent")} font-medium`}>Proudly Canadian • 100% Encrypted • Open Source</span>
              </div>
            </div>

            <h1 className={`text-4xl md:text-6xl lg:text-7xl tracking-tight font-black ${getThemeClasses("text-primary")} mb-6`}>
              <span className="block animate-fade-in-up">
                Your Files. Your Privacy.
              </span>
              <span className={`block ${getThemeClasses("text-accent")} animate-fade-in-up-delay`}>
                Zero Compromises.
              </span>
            </h1>

            <p className={`mt-6 max-w-2xl mx-auto text-lg md:text-xl ${getThemeClasses("text-secondary")} leading-relaxed animate-fade-in-up-delay-2`}>
              Unlike Dropbox or Google Drive, MapleFile uses{" "}
              <span className={`font-semibold ${getThemeClasses("text-primary")}`}>true end-to-end encryption</span>.
              {" "}Your files are encrypted before they leave your device.
              {" "}<span className={`font-semibold ${getThemeClasses("text-accent")}`}>We can't see them. Nobody can.</span>
            </p>

            <div className="mt-10 flex flex-col sm:flex-row gap-4 justify-center items-center animate-fade-in-up-delay-3">
              <Link to="/register">
                <Button variant="primary" size="lg" className="group shadow-lg hover:shadow-xl transform hover:scale-105 px-8">
                  <span className="flex items-center whitespace-nowrap">
                    <PlayIcon className="mr-2 h-5 w-5 group-hover:scale-110 transition-transform duration-200 flex-shrink-0" />
                    Start Free — 10 GB Included
                  </span>
                </Button>
              </Link>
              <a href="#how-it-works">
                <Button variant="secondary" size="lg" className="shadow-lg hover:shadow-xl transform hover:scale-105">
                  See How It Works
                </Button>
              </a>
            </div>

            <p className={`mt-6 text-sm ${getThemeClasses("text-secondary")} animate-fade-in-up-delay-3`}>
              No credit card required • Setup in 2 minutes • Cancel anytime
            </p>
          </div>
        </div>
      </div>

      {/* Problem/Solution Section */}
      <div className="bg-gray-900 dark:bg-gray-950 py-16">
        <div className="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8">
          <div className="text-center mb-12">
            <h2 className="text-3xl font-black text-white mb-4">
              Why Most Cloud Storage Isn't Really Private
            </h2>
            <p className="text-gray-400 max-w-2xl mx-auto">
              Traditional cloud providers can access your files. They scan them, analyze them, and store them where you have no control.
            </p>
          </div>

          <div className="grid md:grid-cols-3 gap-8">
            {problemsWeSolve.map((item, index) => (
              <div key={index} className="text-center">
                <div className="mb-4">
                  <span className={`inline-block ${getThemeClasses("bg-error-light")} ${getThemeClasses("text-error")} text-sm font-medium px-3 py-1 rounded-full mb-4`}>
                    The Problem
                  </span>
                  <p className="text-gray-400 text-lg">{item.problem}</p>
                </div>
                <div className="border-t border-gray-700 pt-4 mt-4">
                  <span className={`inline-block ${getThemeClasses("bg-success-light")} ${getThemeClasses("text-success")} text-sm font-medium px-3 py-1 rounded-full mb-4`}>
                    Our Solution
                  </span>
                  <p className="text-white font-semibold text-lg">{item.solution}</p>
                </div>
              </div>
            ))}
          </div>
        </div>
      </div>

      {/* Stats Section */}
      <div className={`${getThemeClasses("bg-gradient-secondary")} py-12`}>
        <div className="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8">
          <div className="grid grid-cols-2 md:grid-cols-4 gap-8 text-center">
            <div className="text-white">
              <div className="text-4xl font-black mb-2">256-bit</div>
              <div className="text-white/80 font-medium">
                Encryption Strength
              </div>
            </div>
            <div className="text-white">
              <div className="text-4xl font-black mb-2">100%</div>
              <div className="text-white/80 font-medium">Canadian Hosted</div>
            </div>
            <div className="text-white">
              <div className="text-4xl font-black mb-2">Zero</div>
              <div className="text-white/80 font-medium">Knowledge Access</div>
            </div>
            <div className="text-white">
              <div className="text-4xl font-black mb-2">10 GB</div>
              <div className="text-white/80 font-medium">Free Forever</div>
            </div>
          </div>
        </div>
      </div>

      {/* How It Works Section */}
      <div id="how-it-works" className={`${getThemeClasses("bg-card")} py-20`}>
        <div className="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8">
          <div className="text-center mb-16">
            <h2 className={`text-4xl font-black ${getThemeClasses("text-primary")} mb-4`}>
              How MapleFile Works
            </h2>
            <p className={`text-xl ${getThemeClasses("text-secondary")} max-w-2xl mx-auto`}>
              Secure file storage shouldn't be complicated. Get started in three simple steps.
            </p>
          </div>

          <div className="grid md:grid-cols-3 gap-12 max-w-5xl mx-auto">
            {howItWorks.map((item, index) => (
              <div key={index} className="text-center relative">
                {index < howItWorks.length - 1 && (
                  <div className={`hidden md:block absolute top-12 left-1/2 w-full h-0.5 ${getThemeClasses("bg-accent-light")}`}></div>
                )}
                <div className="relative z-10">
                  <div className={`inline-flex items-center justify-center h-24 w-24 ${getThemeClasses("bg-gradient-secondary")} rounded-2xl mb-6 shadow-lg`}>
                    <item.icon className="h-12 w-12 text-white" />
                  </div>
                  <div className={`absolute -top-2 -right-2 md:right-auto md:-top-2 md:-left-2 h-8 w-8 ${getThemeClasses("bg-card")} border-2 ${getThemeClasses("border-accent")} rounded-full flex items-center justify-center ${getThemeClasses("text-accent")} font-bold text-sm shadow-md`}>
                    {item.step}
                  </div>
                </div>
                <h3 className={`text-xl font-bold ${getThemeClasses("text-primary")} mb-3`}>
                  {item.title}
                </h3>
                <p className={`${getThemeClasses("text-secondary")} leading-relaxed`}>
                  {item.description}
                </p>
              </div>
            ))}
          </div>

          <div className="text-center mt-12">
            <Link to="/register">
              <Button variant="primary" size="lg" className="group shadow-lg hover:shadow-xl transform hover:scale-105">
                <span className="flex items-center whitespace-nowrap">
                  Get Started Free
                  <ArrowRightIcon className="ml-2 h-5 w-5 group-hover:translate-x-1 transition-transform duration-200 flex-shrink-0" />
                </span>
              </Button>
            </Link>
          </div>
        </div>
      </div>

      {/* Security Features Section */}
      <div id="security" className={`${getThemeClasses("bg-gradient-primary")} py-20`}>
        <div className="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8">
          <div className="text-center mb-16">
            <h2 className={`text-4xl font-black ${getThemeClasses("text-primary")} mb-4`}>
              Security That's Actually Secure
            </h2>
            <p className={`text-xl ${getThemeClasses("text-secondary")} max-w-2xl mx-auto`}>
              We use the same cryptographic standards trusted by governments and security professionals worldwide.
            </p>
          </div>

          <div className="grid md:grid-cols-2 gap-8 max-w-5xl mx-auto">
            {securityFeatures.map((feature, index) => (
              <Card
                key={index}
                className={`group ${getThemeClasses("border-muted")} shadow-lg hover:shadow-xl transform hover:scale-[1.02] transition-all duration-300`}
              >
                <div className="p-8">
                  <div className="flex items-start">
                    <div className="flex-shrink-0">
                      <div className={`inline-flex items-center justify-center h-14 w-14 ${getThemeClasses("bg-gradient-secondary")} rounded-xl group-hover:scale-110 transition-transform duration-200`}>
                        <feature.icon className="h-7 w-7 text-white" />
                      </div>
                    </div>
                    <div className="ml-6">
                      <h3 className={`text-xl font-bold ${getThemeClasses("text-primary")} mb-2`}>
                        {feature.title}
                      </h3>
                      <p className={`${getThemeClasses("text-secondary")} leading-relaxed`}>
                        {feature.description}
                      </p>
                    </div>
                  </div>
                </div>
              </Card>
            ))}
          </div>
        </div>
      </div>

      {/* Comparison Section */}
      <div className={`${getThemeClasses("bg-card")} py-20`}>
        <div className="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8">
          <div className="text-center mb-16">
            <h2 className={`text-4xl font-black ${getThemeClasses("text-primary")} mb-4`}>
              MapleFile vs. Traditional Cloud Storage
            </h2>
            <p className={`text-xl ${getThemeClasses("text-secondary")} max-w-2xl mx-auto`}>
              See why privacy-conscious users are switching to MapleFile
            </p>
          </div>

          <div className="max-w-3xl mx-auto">
            <Card className="overflow-hidden shadow-xl">
              <div className={`${getThemeClasses("bg-muted")} px-6 py-4 border-b ${getThemeClasses("border-muted")}`}>
                <div className="grid grid-cols-3 gap-4 text-center font-bold">
                  <div className={getThemeClasses("text-secondary")}>Feature</div>
                  <div className={getThemeClasses("text-accent")}>MapleFile</div>
                  <div className={getThemeClasses("text-secondary")}>Others</div>
                </div>
              </div>
              <div className={`divide-y ${getThemeClasses("divide-muted")}`}>
                {comparisonFeatures.map((item, index) => (
                  <div key={index} className={`grid grid-cols-3 gap-4 px-6 py-4 text-center items-center ${getThemeClasses("hover:bg-muted")} transition-colors`}>
                    <div className={`${getThemeClasses("text-primary")} font-medium text-left`}>{item.feature}</div>
                    <div>
                      {item.maplefile === true ? (
                        <CheckIcon className={`h-6 w-6 ${getThemeClasses("text-success")} mx-auto`} />
                      ) : (
                        <span className={getThemeClasses("text-secondary")}>—</span>
                      )}
                    </div>
                    <div>
                      {item.others === true ? (
                        <CheckIcon className={`h-6 w-6 ${getThemeClasses("text-success")} mx-auto`} />
                      ) : item.others === false ? (
                        <span className={`${getThemeClasses("text-error")} font-medium`}>No</span>
                      ) : (
                        <span className={`${getThemeClasses("text-secondary")} text-sm`}>{item.others}</span>
                      )}
                    </div>
                  </div>
                ))}
              </div>
            </Card>
          </div>
        </div>
      </div>

      {/* Use Cases Section */}
      <div className={`${getThemeClasses("bg-gradient-primary")} py-20`}>
        <div className="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8">
          <div className="text-center mb-16">
            <h2 className={`text-4xl font-black ${getThemeClasses("text-primary")} mb-4`}>
              Perfect For
            </h2>
            <p className={`text-xl ${getThemeClasses("text-secondary")} max-w-2xl mx-auto`}>
              Whether you're protecting client files or personal documents, MapleFile has you covered.
            </p>
          </div>

          <div className="grid md:grid-cols-2 lg:grid-cols-4 gap-8">
            {useCases.map((useCase, index) => (
              <Card
                key={index}
                className={`group ${getThemeClasses("border-muted")} shadow-lg hover:shadow-xl transform hover:scale-105 transition-all duration-300`}
              >
                <div className="p-6 text-center">
                  <div className={`inline-flex items-center justify-center h-14 w-14 ${getThemeClasses("bg-accent-light")} rounded-xl mb-4 group-hover:opacity-80 transition-colors duration-200`}>
                    <useCase.icon className={`h-7 w-7 ${getThemeClasses("text-accent")}`} />
                  </div>
                  <h3 className={`text-lg font-bold ${getThemeClasses("text-primary")} mb-2`}>
                    {useCase.title}
                  </h3>
                  <p className={`${getThemeClasses("text-secondary")} text-sm leading-relaxed`}>
                    {useCase.description}
                  </p>
                </div>
              </Card>
            ))}
          </div>
        </div>
      </div>

      {/* Pricing Section */}
      <div id="pricing" className={`${getThemeClasses("bg-gradient-primary")} py-20`}>
        <div className="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8">
          <div className="text-center mb-16">
            <h2 className={`text-4xl font-black ${getThemeClasses("text-primary")} mb-4`}>
              Simple, Transparent Pricing
            </h2>
            <p className={`text-xl ${getThemeClasses("text-secondary")} max-w-2xl mx-auto`}>
              Start free with 10 GB. Upgrade when you need more.
            </p>
          </div>

          <div className="grid grid-cols-1 md:grid-cols-3 gap-8 max-w-6xl mx-auto">
            {/* Free Plan */}
            <Card className={`border-2 ${getThemeClasses("border-muted")} shadow-lg hover:shadow-xl transition-shadow duration-300`}>
              <div className="p-8">
                <div className="text-center">
                  <h3 className={`text-2xl font-black ${getThemeClasses("text-primary")} mb-2`}>
                    Personal
                  </h3>
                  <p className={`${getThemeClasses("text-secondary")} mb-8`}>
                    Everything you need to get started
                  </p>

                  <div className="mb-8">
                    <span className={`text-5xl font-black ${getThemeClasses("text-primary")}`}>
                      Free
                    </span>
                    <span className={`text-lg ${getThemeClasses("text-secondary")} ml-2`}>forever</span>
                  </div>

                  <div className="space-y-4 mb-8 text-left">
                    {[
                      "10 GB encrypted storage",
                      "End-to-end encryption",
                      "Canadian data residency",
                      "Secure file sharing",
                      "Mobile & desktop access",
                      "Community support",
                    ].map((feature, idx) => (
                      <div key={idx} className="flex items-start">
                        <CheckIcon className={`h-5 w-5 ${getThemeClasses("text-success")} mr-3 mt-0.5 flex-shrink-0`} />
                        <span className={`${getThemeClasses("text-primary")} text-sm font-medium`}>
                          {feature}
                        </span>
                      </div>
                    ))}
                  </div>

                  <Link to="/register">
                    <Button variant="primary" size="lg" className="w-full shadow-lg hover:shadow-xl transform hover:scale-105">
                      Get Started Free
                    </Button>
                  </Link>
                  <p className={`mt-3 text-sm ${getThemeClasses("text-secondary")}`}>
                    No credit card required
                  </p>
                </div>
              </div>
            </Card>

            {/* Pro Plan */}
            <div className="relative">
              <div className={`absolute -inset-4 ${getThemeClasses("bg-gradient-secondary")} rounded-3xl blur opacity-20`}></div>
              <Card className={`relative border-2 ${getThemeClasses("border-accent")} shadow-2xl`}>
                <div className={`absolute -top-4 left-1/2 transform -translate-x-1/2 ${getThemeClasses("bg-secondary")} text-white text-sm font-bold py-2 px-6 rounded-full shadow-lg`}>
                  COMING SOON
                </div>

                <div className="p-8 pt-12">
                  <div className="text-center">
                    <h3 className={`text-2xl font-black ${getThemeClasses("text-primary")} mb-2`}>
                      Pro
                    </h3>
                    <p className={`${getThemeClasses("text-secondary")} mb-8`}>
                      For power users and professionals
                    </p>

                    <div className="mb-8">
                      <span className={`text-5xl font-black ${getThemeClasses("text-primary")}`}>
                        $9.99
                      </span>
                      <span className={`text-lg ${getThemeClasses("text-secondary")} ml-2`}>
                        CAD/month
                      </span>
                    </div>

                    <div className="space-y-4 mb-8 text-left">
                      {[
                        "1 TB encrypted storage",
                        "Everything in Personal",
                        "Advanced sharing controls",
                        "Version history",
                        "Priority support",
                        "Early access to features",
                      ].map((feature, idx) => (
                        <div key={idx} className="flex items-start">
                          <CheckIcon className={`h-5 w-5 ${getThemeClasses("text-success")} mr-3 mt-0.5 flex-shrink-0`} />
                          <span className={`${getThemeClasses("text-primary")} text-sm font-medium`}>
                            {feature}
                          </span>
                        </div>
                      ))}
                    </div>

                    <Link to="/register">
                      <Button variant="primary" size="lg" className="w-full group shadow-xl hover:shadow-2xl transform hover:scale-105">
                        Start Free Trial
                        <span className="ml-2 transform group-hover:translate-x-1 transition-transform duration-200">
                          →
                        </span>
                      </Button>
                    </Link>
                    <p className={`mt-3 text-sm ${getThemeClasses("text-secondary")}`}>
                      Then $9.99 CAD/month
                    </p>
                  </div>
                </div>
              </Card>
            </div>

            {/* Team Plan */}
            <Card className={`border-2 ${getThemeClasses("border-muted")} shadow-lg hover:shadow-xl transition-shadow duration-300`}>
              <div className="p-8">
                <div className="text-center">
                  <h3 className={`text-2xl font-black ${getThemeClasses("text-primary")} mb-2`}>
                    Team
                  </h3>
                  <p className={`${getThemeClasses("text-secondary")} mb-8`}>
                    For teams and organizations
                  </p>

                  <div className="mb-8">
                    <span className={`text-5xl font-black ${getThemeClasses("text-primary")}`}>
                      $49.99
                    </span>
                    <span className={`text-lg ${getThemeClasses("text-secondary")} ml-2`}>
                      CAD/month
                    </span>
                    <p className={`text-sm ${getThemeClasses("text-secondary")} mt-1`}>Up to 10 users</p>
                  </div>

                  <div className="space-y-4 mb-8 text-left">
                    {[
                      "10 TB shared storage",
                      "Everything in Pro",
                      "Team collaboration",
                      "Admin controls",
                      "Audit logging",
                      "Dedicated support",
                    ].map((feature, idx) => (
                      <div key={idx} className="flex items-start">
                        <CheckIcon className={`h-5 w-5 ${getThemeClasses("text-success")} mr-3 mt-0.5 flex-shrink-0`} />
                        <span className={`${getThemeClasses("text-primary")} text-sm font-medium`}>
                          {feature}
                        </span>
                      </div>
                    ))}
                  </div>

                  <a href="mailto:sales@maplefile.com">
                    <Button variant="secondary" size="lg" className="w-full shadow-lg hover:shadow-xl transform hover:scale-105">
                      Contact Sales
                    </Button>
                  </a>
                </div>
              </div>
            </Card>
          </div>
        </div>
      </div>

      {/* FAQ Section */}
      <div id="faq" className={`${getThemeClasses("bg-gradient-primary")} py-20`}>
        <div className="max-w-3xl mx-auto px-4 sm:px-6 lg:px-8">
          <div className="text-center mb-16">
            <h2 className={`text-4xl font-black ${getThemeClasses("text-primary")} mb-4`}>
              Frequently Asked Questions
            </h2>
            <p className={`text-xl ${getThemeClasses("text-secondary")}`}>
              Have questions? We've got answers.
            </p>
          </div>

          <div className="space-y-4">
            {faqs.map((faq, index) => (
              <Card
                key={index}
                className={`border ${getThemeClasses("border-muted")} shadow-sm overflow-hidden transition-all duration-300 ${
                  openFaq === index ? "shadow-lg" : "hover:shadow-md"
                }`}
              >
                <button
                  onClick={() => setOpenFaq(openFaq === index ? null : index)}
                  className="w-full px-6 py-5 text-left flex items-center justify-between"
                >
                  <span className={`font-bold ${getThemeClasses("text-primary")}`}>{faq.question}</span>
                  <ChevronDownIcon
                    className={`h-5 w-5 ${getThemeClasses("text-secondary")} transition-transform duration-300 ${
                      openFaq === index ? "rotate-180" : ""
                    }`}
                  />
                </button>
                {openFaq === index && (
                  <div className="px-6 pb-5">
                    <p className={`${getThemeClasses("text-secondary")} leading-relaxed`}>{faq.answer}</p>
                  </div>
                )}
              </Card>
            ))}
          </div>
        </div>
      </div>

      {/* CTA Section */}
      <div className={`${getThemeClasses("bg-gradient-secondary")} py-20`}>
        <div className="max-w-4xl mx-auto px-4 sm:px-6 lg:px-8 text-center">
          <h2 className="text-4xl font-black text-white mb-6">
            Ready to Take Control of Your Privacy?
          </h2>
          <p className="text-xl text-white/80 mb-10 max-w-2xl mx-auto">
            Join thousands of Canadians who trust MapleFile with their most sensitive files.
            Get started free with 10 GB of encrypted storage.
          </p>
          <div className="flex flex-col sm:flex-row gap-4 justify-center">
            <Link to="/register">
              <Button
                variant="secondary"
                size="lg"
                className="shadow-xl hover:shadow-2xl transform hover:scale-105 px-8"
              >
                <span className="flex items-center whitespace-nowrap">
                  Get Started Free
                  <ArrowRightIcon className="ml-2 h-5 w-5" />
                </span>
              </Button>
            </Link>
            <Link to="/login">
              <Button
                variant="ghost"
                size="lg"
                className="text-white border-white/30 hover:bg-white/10"
              >
                Sign In to Your Account
              </Button>
            </Link>
          </div>
        </div>
      </div>

      {/* Footer */}
      <footer className={`${getThemeClasses("bg-card")} border-t ${getThemeClasses("border-muted")} py-16`}>
        <div className="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8">
          <div className="grid md:grid-cols-2 lg:grid-cols-4 gap-8 mb-12">
            <div className="lg:col-span-2">
              <div className="flex items-center mb-6">
                <div className={`flex items-center justify-center h-10 w-10 ${getThemeClasses("bg-gradient-secondary")} rounded-lg mr-3`}>
                  <LockClosedIcon className="h-6 w-6 text-white" />
                </div>
                <span className={`text-2xl font-bold ${getThemeClasses("text-primary")}`}>MapleFile</span>
              </div>
              <p className={`${getThemeClasses("text-secondary")} mb-6 max-w-md`}>
                Secure, encrypted file storage built in Canada. Your data stays private
                with military-grade encryption and zero-knowledge architecture.
              </p>
              <div className={`flex items-center space-x-2 text-sm ${getThemeClasses("text-secondary")}`}>
                <span className="text-lg">🍁</span>
                <span>Proudly Canadian</span>
              </div>
            </div>

            <div>
              <h3 className={`text-sm font-bold ${getThemeClasses("text-secondary")} tracking-wider uppercase mb-4`}>
                Product
              </h3>
              <ul className="space-y-3">
                <li>
                  <a href="#security" className={`${getThemeClasses("text-secondary")} ${getThemeClasses("hover:text-accent")} transition-colors duration-200`}>
                    Security
                  </a>
                </li>
                <li>
                  <a href="#pricing" className={`${getThemeClasses("text-secondary")} ${getThemeClasses("hover:text-accent")} transition-colors duration-200`}>
                    Pricing
                  </a>
                </li>
                <li>
                  <a href="#faq" className={`${getThemeClasses("text-secondary")} ${getThemeClasses("hover:text-accent")} transition-colors duration-200`}>
                    FAQ
                  </a>
                </li>
              </ul>
            </div>

            <div>
              <h3 className={`text-sm font-bold ${getThemeClasses("text-secondary")} tracking-wider uppercase mb-4`}>
                Account
              </h3>
              <ul className="space-y-3">
                <li>
                  <Link to="/login" className={`${getThemeClasses("text-secondary")} ${getThemeClasses("hover:text-accent")} transition-colors duration-200`}>
                    Sign In
                  </Link>
                </li>
                <li>
                  <Link to="/register" className={`${getThemeClasses("text-secondary")} ${getThemeClasses("hover:text-accent")} transition-colors duration-200`}>
                    Create Account
                  </Link>
                </li>
                <li>
                  <Link to="/recovery" className={`${getThemeClasses("text-secondary")} ${getThemeClasses("hover:text-accent")} transition-colors duration-200`}>
                    Account Recovery
                  </Link>
                </li>
              </ul>
            </div>
          </div>

          <div className={`border-t ${getThemeClasses("border-muted")} pt-8`}>
            <div className="md:flex md:items-center md:justify-between">
              <p className={`${getThemeClasses("text-secondary")} text-sm`}>
                &copy; 2025 MapleFile Inc. All rights reserved. Made with ❤️ in Canada.
              </p>
              <div className="mt-4 md:mt-0 flex space-x-6 text-sm">
                <a href="mailto:privacy@maplefile.com" className={`${getThemeClasses("text-secondary")} ${getThemeClasses("hover:text-accent")} transition-colors duration-200`}>
                  Privacy Policy
                </a>
                <a href="mailto:legal@maplefile.com" className={`${getThemeClasses("text-secondary")} ${getThemeClasses("hover:text-accent")} transition-colors duration-200`}>
                  Terms of Service
                </a>
                <a href="mailto:support@maplefile.com" className={`${getThemeClasses("text-secondary")} ${getThemeClasses("hover:text-accent")} transition-colors duration-200`}>
                  Contact
                </a>
              </div>
            </div>
          </div>
        </div>
      </footer>

      <style>{`
        @keyframes fade-in {
          from {
            opacity: 0;
          }
          to {
            opacity: 1;
          }
        }

        @keyframes fade-in-up {
          from {
            opacity: 0;
            transform: translateY(30px);
          }
          to {
            opacity: 1;
            transform: translateY(0);
          }
        }

        .animate-fade-in {
          animation: fade-in 1s ease-out;
        }

        .animate-fade-in-up {
          animation: fade-in-up 0.6s ease-out;
        }

        .animate-fade-in-up-delay {
          animation: fade-in-up 0.6s ease-out 0.2s both;
        }

        .animate-fade-in-up-delay-2 {
          animation: fade-in-up 0.6s ease-out 0.4s both;
        }

        .animate-fade-in-up-delay-3 {
          animation: fade-in-up 0.6s ease-out 0.6s both;
        }

        .bg-grid-pattern {
          background-image:
            linear-gradient(rgba(139, 22, 34, 0.1) 1px, transparent 1px),
            linear-gradient(90deg, rgba(139, 22, 34, 0.1) 1px, transparent 1px);
          background-size: 20px 20px;
        }

        html {
          scroll-behavior: smooth;
        }
      `}</style>
    </div>
  );
}

export default IndexPage;
