import { Link } from "react-router-dom";
import { useState, useEffect } from "react";
import FileUpload from "../components/FileUpload";
import { UserMenu } from "../components/UserMenu";
import { AuthModal } from "../components/AuthModal";
import { ContactForm } from "../components/ContactForm";
import { UpgradeFunnel } from "../components/UpgradeFunnel";
import { useAuth } from "../hooks/useAuth";
import { useToast } from "../components/Toast";
import { createScrollHandler } from "../utils/scroll";

export default function Home() {
  const [showAuthModal, setShowAuthModal] = useState(false);
  const [showContactModal, setShowContactModal] = useState(false);
  const [showUpgradeFunnel, setShowUpgradeFunnel] = useState(false);
  const [showMobileMenu, setShowMobileMenu] = useState(false);
  const [funnelTrigger, setFunnelTrigger] = useState<
    "free_limit" | "ip_limit" | "page_limit" | "file_size"
  >("free_limit");
  const [funnelPageCount, setFunnelPageCount] = useState(0);
  const { user, loading, setToastHandler } = useAuth();
  const { showToast } = useToast();

  // Connect toast handler to auth context
  useEffect(() => {
    setToastHandler(showToast);
  }, [showToast, setToastHandler]);

  return (
    <div className="min-h-screen relative overflow-hidden">
      {/* Background with sophisticated gradients and patterns */}
      <div className="absolute inset-0 bg-gradient-to-br from-slate-50 via-blue-50/80 to-indigo-50/60"></div>
      <div className="absolute inset-0 bg-[radial-gradient(ellipse_at_top_right,_var(--tw-gradient-stops))] from-blue-100/20 via-transparent to-transparent"></div>
      <div className="absolute top-0 right-0 w-96 h-96 bg-gradient-to-bl from-blue-200/10 to-transparent rounded-full blur-3xl"></div>
      <div className="absolute bottom-0 left-0 w-96 h-96 bg-gradient-to-tr from-purple-200/10 to-transparent rounded-full blur-3xl"></div>

      {/* Subtle floating elements */}
      <div className="absolute top-20 left-10 w-1 h-1 bg-blue-400/20 rounded-full animate-float"></div>
      <div
        className="absolute top-40 right-20 w-1.5 h-1.5 bg-purple-400/20 rounded-full animate-float"
        style={{ animationDelay: "2s" }}
      ></div>
      <div
        className="absolute bottom-40 left-20 w-1 h-1 bg-indigo-400/20 rounded-full animate-float"
        style={{ animationDelay: "4s" }}
      ></div>

      <div className="relative z-10">
        {/* Navigation */}
        <nav className="absolute top-0 left-0 right-0 z-20 px-4 sm:px-6 py-4 sm:py-6">
          <div className="max-w-7xl mx-auto flex justify-between items-center">
            <div className="text-xl sm:text-2xl font-bold gradient-text">
              PdfToMd
            </div>
            <div className="flex items-center space-x-2 sm:space-x-4">
              <div className="hidden md:flex items-center space-x-8 text-sm font-semibold text-slate-700">
                <a
                  href="#features"
                  onClick={createScrollHandler("features")}
                  className="hover:text-slate-900 transition-colors duration-200"
                >
                  Features
                </a>
                <a
                  href="#how-it-works"
                  onClick={createScrollHandler("how-it-works")}
                  className="hover:text-slate-900 transition-colors duration-200"
                >
                  How it Works
                </a>
                <Link
                  to="/features"
                  className="hover:text-slate-900 transition-colors duration-200"
                >
                  Features
                </Link>
                <Link
                  to="/use-cases"
                  className="hover:text-slate-900 transition-colors duration-200"
                >
                  Use Cases
                </Link>
                <Link
                  to="/blog"
                  className="hover:text-slate-900 transition-colors duration-200"
                >
                  Blog
                </Link>
                <Link
                  to="/pricing"
                  className="hover:text-slate-900 transition-colors duration-200"
                >
                  Pricing
                </Link>
                <Link
                  to="/help"
                  className="hover:text-slate-900 transition-colors duration-200"
                >
                  Help
                </Link>
              </div>

              {/* Mobile menu button */}
              <button
                onClick={() => setShowMobileMenu(!showMobileMenu)}
                className="md:hidden p-3 rounded-xl bg-white/80 backdrop-blur-sm hover:bg-white/90 transition-all duration-200 shadow-lg border border-slate-200"
                aria-label="Toggle mobile menu"
              >
                <svg
                  className="w-6 h-6 text-slate-700"
                  fill="none"
                  stroke="currentColor"
                  viewBox="0 0 24 24"
                >
                  <path
                    strokeLinecap="round"
                    strokeLinejoin="round"
                    strokeWidth={2}
                    d="M4 6h16M4 12h16M4 18h16"
                  />
                </svg>
              </button>

              {!loading &&
                (user ? (
                  <div className="hidden md:block">
                    <UserMenu />
                  </div>
                ) : (
                  <button
                    onClick={() => setShowAuthModal(true)}
                    className="hidden md:block bg-gradient-to-r from-blue-600 to-purple-600 hover:from-blue-700 hover:to-purple-700 text-white font-semibold px-5 py-2.5 rounded-xl transition-all duration-200 hover:shadow-lg hover:scale-105"
                  >
                    Sign In
                  </button>
                ))}
            </div>
          </div>

          {/* Mobile menu */}
          {showMobileMenu && (
            <div className="md:hidden bg-white/95 backdrop-blur-sm border-t border-slate-200 px-4 py-6 shadow-lg">
              <div className="space-y-6">
                <a
                  href="#features"
                  onClick={(e) => {
                    createScrollHandler("features")(e);
                    setShowMobileMenu(false);
                  }}
                  className="block text-slate-700 hover:text-slate-900 font-semibold py-3 px-2 rounded-lg hover:bg-slate-50 transition-all duration-200"
                >
                  Features
                </a>
                <a
                  href="#how-it-works"
                  onClick={(e) => {
                    createScrollHandler("how-it-works")(e);
                    setShowMobileMenu(false);
                  }}
                  className="block text-slate-700 hover:text-slate-900 font-semibold py-3 px-2 rounded-lg hover:bg-slate-50 transition-all duration-200"
                >
                  How it Works
                </a>
                <Link
                  to="/use-cases"
                  className="block text-slate-700 hover:text-slate-900 font-semibold py-3 px-2 rounded-lg hover:bg-slate-50 transition-all duration-200"
                  onClick={() => setShowMobileMenu(false)}
                >
                  Use Cases
                </Link>
                <Link
                  to="/blog"
                  className="block text-slate-700 hover:text-slate-900 font-semibold py-3 px-2 rounded-lg hover:bg-slate-50 transition-all duration-200"
                  onClick={() => setShowMobileMenu(false)}
                >
                  Blog
                </Link>
                <Link
                  to="/pricing"
                  className="block text-slate-700 hover:text-slate-900 font-semibold py-3 px-2 rounded-lg hover:bg-slate-50 transition-all duration-200"
                  onClick={() => setShowMobileMenu(false)}
                >
                  Pricing
                </Link>
                <Link
                  to="/help"
                  className="block text-slate-700 hover:text-slate-900 font-semibold py-3 px-2 rounded-lg hover:bg-slate-50 transition-all duration-200"
                  onClick={() => setShowMobileMenu(false)}
                >
                  Help
                </Link>
                {!loading && !user && (
                  <button
                    onClick={() => {
                      setShowAuthModal(true);
                      setShowMobileMenu(false);
                    }}
                    className="w-full bg-gradient-to-r from-blue-600 to-purple-600 hover:from-blue-700 hover:to-purple-700 text-white font-semibold px-6 py-4 rounded-xl transition-all duration-200 shadow-lg hover:shadow-xl hover:scale-105 mt-4"
                  >
                    Sign In
                  </button>
                )}
                {!loading && user && (
                  <div className="border-t border-slate-200 pt-4">
                    <UserMenu />
                  </div>
                )}
              </div>
            </div>
          )}
        </nav>

        {/* Hero Section with Upload */}
        <section className="pt-20 sm:pt-24 pb-12 sm:pb-16 px-4 sm:px-6">
          <div className="max-w-7xl mx-auto">
            <div className="grid lg:grid-cols-2 gap-8 sm:gap-12 lg:gap-16 items-start">
              {/* Left side - Hero content */}
              <div className="animate-fade-in-up order-2 lg:order-1 lg:pt-8 text-center">
                <h1 className="text-3xl sm:text-4xl md:text-5xl lg:text-6xl font-black text-slate-900 mb-4 sm:mb-6 leading-tight sm:leading-[0.9] tracking-tight">
                  Convert PDF to Markdown
                  <span className="block gradient-text mt-1">
                    Free AI Converter
                  </span>
                </h1>

                <p className="text-base sm:text-lg md:text-xl text-slate-700 mb-6 sm:mb-8 leading-relaxed text-balance font-medium max-w-2xl mx-auto">
                  Transform PDF documents into clean, formatted Markdown with
                  our AI-powered converter. Upload your PDF, get perfect
                  Markdown via email—no signup required.
                </p>

                <div className="bg-blue-50/50 border border-blue-200/50 rounded-xl p-3 sm:p-4 mb-6 sm:mb-8 text-center">
                  <p className="text-sm text-blue-800 mb-2 sm:mb-3">
                    <strong>New:</strong> Comprehensive conversion guides now
                    available!
                  </p>
                  <div className="flex flex-wrap justify-center gap-2 sm:gap-3 text-xs">
                    <Link
                      to="/blog/complete-guide-pdf-to-markdown-2025"
                      className="text-blue-600 hover:text-blue-700 underline font-medium"
                    >
                      Complete Guide
                    </Link>
                    <Link
                      to="/blog/pdf-to-markdown-tools-compared"
                      className="text-blue-600 hover:text-blue-700 underline font-medium"
                    >
                      Tool Comparison
                    </Link>
                    <Link
                      to="/blog/academic-papers-pdf-to-markdown-guide"
                      className="text-blue-600 hover:text-blue-700 underline font-medium"
                    >
                      Academic Guide
                    </Link>
                    <Link
                      to="/blog"
                      className="text-blue-600 hover:text-blue-700 underline font-medium"
                    >
                      All Guides →
                    </Link>
                  </div>
                </div>

                <div className="flex flex-col sm:flex-row sm:flex-wrap justify-center gap-3 sm:gap-4 mb-6 sm:mb-8">
                  <div className="flex items-center justify-center text-slate-700 text-sm font-medium">
                    <svg
                      className="w-4 h-4 mr-2 text-green-600 flex-shrink-0"
                      fill="currentColor"
                      viewBox="0 0 20 20"
                    >
                      <path
                        fillRule="evenodd"
                        d="M16.707 5.293a1 1 0 010 1.414l-8 8a1 1 0 01-1.414 0l-4-4a1 1 0 011.414-1.414L8 12.586l7.293-7.293a1 1 0 011.414 0z"
                        clipRule="evenodd"
                      />
                    </svg>
                    First conversion free
                  </div>
                  <div className="flex items-center justify-center text-slate-700 text-sm font-medium">
                    <svg
                      className="w-4 h-4 mr-2 text-green-600 flex-shrink-0"
                      fill="currentColor"
                      viewBox="0 0 20 20"
                    >
                      <path
                        fillRule="evenodd"
                        d="M16.707 5.293a1 1 0 010 1.414l-8 8a1 1 0 01-1.414 0l-4-4a1 1 0 011.414-1.414L8 12.586l7.293-7.293a1 1 0 011.414 0z"
                        clipRule="evenodd"
                      />
                    </svg>
                    No signup required
                  </div>
                  <div className="flex items-center justify-center text-slate-700 text-sm font-medium">
                    <svg
                      className="w-4 h-4 mr-2 text-green-600 flex-shrink-0"
                      fill="currentColor"
                      viewBox="0 0 20 20"
                    >
                      <path
                        fillRule="evenodd"
                        d="M16.707 5.293a1 1 0 010 1.414l-8 8a1 1 0 01-1.414 0l-4-4a1 1 0 011.414-1.414L8 12.586l7.293-7.293a1 1 0 011.414 0z"
                        clipRule="evenodd"
                      />
                    </svg>
                    Enterprise secure
                  </div>
                </div>

                <div
                  className="bg-gradient-to-r from-blue-50 to-purple-50 border border-blue-200/50 rounded-xl p-4 mt-6 animate-fade-in-up"
                  style={{ animationDelay: "0.3s" }}
                >
                  <div className="flex items-start space-x-3">
                    <div className="flex-shrink-0">
                      <svg
                        className="w-5 h-5 text-blue-600 mt-0.5"
                        fill="currentColor"
                        viewBox="0 0 20 20"
                      >
                        <path
                          fillRule="evenodd"
                          d="M2.166 4.999A11.954 11.954 0 0010 1.944 11.954 11.954 0 0017.834 5c.11.65.166 1.32.166 2.001 0 5.225-3.34 9.67-8 11.317C5.34 16.67 2 12.225 2 7c0-.682.057-1.35.166-2.001zm11.541 3.708a1 1 0 00-1.414-1.414L9 10.586 7.707 9.293a1 1 0 00-1.414 1.414l2 2a1 1 0 001.414 0l4-4z"
                          clipRule="evenodd"
                        />
                      </svg>
                    </div>
                    <div className="flex-1">
                      <p className="text-sm text-blue-900 font-semibold mb-1">
                        Your documents are private and secure
                      </p>
                      <p className="text-xs text-blue-800 leading-relaxed">
                        We use Anthropic's Claude AI for processing.{" "}
                        <strong>
                          Your content is never used to train AI models.
                        </strong>{" "}
                        Files are encrypted, processed in isolation, and
                        automatically deleted after conversion.
                        <a
                          href="#faq-ai-training"
                          className="ml-1 text-blue-600 hover:text-blue-700 underline font-medium"
                        >
                          Learn more →
                        </a>
                      </p>
                    </div>
                  </div>
                </div>
              </div>

              {/* Right side - Upload component */}
              <div
                id="upload"
                className="animate-fade-in-up order-1 lg:order-2"
                style={{ animationDelay: "0.2s" }}
              >
                <FileUpload
                  onShowUpgradeFunnel={(triggerType, pageCount) => {
                    setFunnelTrigger(triggerType);
                    setFunnelPageCount(pageCount || 0);
                    setShowUpgradeFunnel(true);
                  }}
                />
              </div>
            </div>
          </div>
        </section>

        {/* How to Convert PDF to Markdown */}
        <section
          id="how-it-works"
          className="py-12 sm:py-16 lg:py-20 px-4 sm:px-6 bg-gradient-to-r from-slate-50/30 to-blue-50/20"
        >
          <div className="max-w-7xl mx-auto">
            <div className="text-center mb-12 sm:mb-16 animate-fade-in-up">
              <h2 className="text-2xl sm:text-3xl md:text-4xl lg:text-5xl font-black text-slate-900 mb-4 sm:mb-6">
                How to Convert PDF to Markdown
              </h2>
              <p className="text-base sm:text-lg md:text-xl text-slate-700 max-w-2xl mx-auto text-balance font-medium">
                Convert PDF to Markdown in 3 simple steps using our AI-powered
                converter—no technical knowledge required
              </p>
            </div>

            <div className="grid sm:grid-cols-2 lg:grid-cols-3 gap-6 sm:gap-8 lg:gap-12">
              {[
                {
                  step: "01",
                  title: "Upload & Configure",
                  description:
                    "Drop your PDF and enter your email. Our system validates and prepares your document for optimal processing.",
                  icon: "📄",
                  gradient: "from-blue-500 to-cyan-500",
                },
                {
                  step: "02",
                  title: "AI Processing",
                  description:
                    "Advanced AI analyzes document structure, preserves formatting, and intelligently converts content to clean Markdown.",
                  icon: "🤖",
                  gradient: "from-purple-500 to-pink-500",
                },
                {
                  step: "03",
                  title: "Instant Delivery",
                  description:
                    "Receive your perfectly formatted Markdown file via email within minutes, ready for immediate use.",
                  icon: "⚡",
                  gradient: "from-emerald-500 to-teal-500",
                },
              ].map((item, index) => (
                <div
                  key={index}
                  className="relative group animate-fade-in-up"
                  style={{ animationDelay: `${index * 0.2}s` }}
                >
                  <div
                    className="absolute inset-0 bg-gradient-to-r opacity-0 group-hover:opacity-5 transition-opacity duration-500 rounded-2xl blur-xl"
                    style={{
                      background: `linear-gradient(135deg, ${
                        item.gradient.split(" ")[1]
                      }, ${item.gradient.split(" ")[3]})`,
                    }}
                  ></div>

                  <div className="relative bg-white/70 backdrop-blur-sm p-8 rounded-2xl border border-white/20 shadow-xl hover:shadow-2xl transition-all duration-500 group-hover:scale-105 group-hover:bg-white/80">
                    <div className="flex items-center mb-6">
                      <div
                        className={`w-12 h-12 rounded-xl bg-gradient-to-r ${item.gradient} flex items-center justify-center text-white font-black text-sm mr-4 shadow-lg`}
                      >
                        {item.step}
                      </div>
                      <div className="text-3xl">{item.icon}</div>
                    </div>

                    <h3 className="text-xl font-bold text-slate-900 mb-4">
                      {item.title}
                    </h3>

                    <p className="text-slate-700 leading-relaxed font-medium">
                      {item.description}
                    </p>
                  </div>
                </div>
              ))}
            </div>
          </div>
        </section>

        {/* FAQ Section */}
        <section className="py-12 sm:py-16 lg:py-20 px-4 sm:px-6 bg-gradient-to-r from-blue-50/20 to-purple-50/10">
          <div className="max-w-4xl mx-auto">
            <div className="text-center mb-12 sm:mb-16 animate-fade-in-up">
              <h2 className="text-2xl sm:text-3xl md:text-4xl lg:text-5xl font-black text-slate-900 mb-4 sm:mb-6">
                PDF to Markdown Converter FAQ
              </h2>
              <p className="text-base sm:text-lg md:text-xl text-slate-700 max-w-2xl mx-auto text-balance font-medium">
                Common questions about converting PDF documents to Markdown
                format
              </p>
            </div>

            <div className="space-y-4 sm:space-y-6">
              {[
                {
                  question: "How do I convert PDF to Markdown for free?",
                  answer:
                    "Simply upload your PDF file using our converter above, enter your email address, and we'll send you the converted Markdown file within minutes. Your first conversion is completely free with no signup required.",
                },
                {
                  question:
                    "What makes your PDF to Markdown converter better than others?",
                  answer:
                    "Our AI-powered converter uses Claude 3.5 Sonnet to preserve document structure, formatting, tables, and lists with superior accuracy. Unlike basic converters, we maintain the original document's layout and meaning while delivering results via email.",
                },
                {
                  question: "Can I convert large PDF files to Markdown?",
                  answer:
                    "Yes, our converter handles PDF files up to 25 pages or 10MB for free users. Premium users can convert documents up to 100MB and 1,500 pages long. The AI processing ensures even complex documents are converted accurately.",
                },
                {
                  question:
                    "Is my PDF file secure when converting to Markdown?",
                  answer:
                    "Absolutely. We use enterprise-grade security with end-to-end encryption. Your files are automatically deleted after conversion, and we have zero data retention policies. Your documents are never stored on our servers.",
                },
                {
                  question: "Does the AI use my content for training?",
                  answer: (
                    <div>
                      <p>
                        No, your content is NOT used to train AI models. We use
                        Anthropic's Claude AI with strict privacy guarantees.
                        According to Anthropic's policies, API inputs and
                        outputs are not used for model training. Your data is
                        processed in isolation, encrypted, and automatically
                        deleted after 30 days. The only exception is if content
                        is flagged for safety review, which we do not expect for
                        document conversions.
                      </p>
                      <p className="mt-3">
                        <a
                          href="https://www.anthropic.com/legal/privacy"
                          target="_blank"
                          rel="noopener noreferrer"
                          className="text-blue-600 hover:text-blue-700 underline font-medium"
                        >
                          Read Anthropic's Privacy Policy →
                        </a>
                      </p>
                    </div>
                  ),
                },
                {
                  question: "What happens to my data after conversion?",
                  answer: (
                    <div>
                      <p className="mb-3">
                        Your data follows a strict privacy-first lifecycle:
                      </p>
                      <ol className="list-decimal list-inside space-y-1 text-slate-700 mb-3">
                        <li>Files are encrypted during upload</li>
                        <li>Processed in isolated environments</li>
                        <li>
                          Converted files are delivered via secure email links
                        </li>
                        <li>
                          Original PDF files are deleted immediately after
                          processing
                        </li>
                        <li>
                          Converted Markdown files remain available for download
                          for up to 7 days, then are permanently deleted
                        </li>
                      </ol>
                      <p>
                        We maintain zero data retention for marketing,
                        profiling, or any other purposes.
                      </p>
                    </div>
                  ),
                },
                {
                  question: "Can I trust the AI with sensitive documents?",
                  answer:
                    "Yes. The AI service we use (Anthropic's Claude) is designed with privacy and security as core principles. It includes Constitutional AI training that emphasizes respecting privacy and confidentiality. Your documents are never used for training, shared with third parties, or retained beyond the conversion process. For highly sensitive documents, we also offer enterprise plans with custom security configurations.",
                },
                {
                  question:
                    "What types of PDF content work best for Markdown conversion?",
                  answer:
                    "Our converter excels with text-based PDFs including academic papers, technical documentation, reports, and articles. It preserves tables, headers, lists, and formatting while converting images and complex layouts appropriately.",
                },
                {
                  question: "How long does PDF to Markdown conversion take?",
                  answer:
                    "Most conversions complete within 2-5 minutes depending on document size and complexity. You'll receive an email notification when your Markdown file is ready for download.",
                },
                {
                  question:
                    "Do you have guides for different types of documents?",
                  answer:
                    "Yes! We have comprehensive guides for various use cases: academic papers with mathematical notation, developer automation with Python, enterprise API integration, and AI-powered workflows. Visit our blog for detailed tutorials and tool comparisons.",
                },
              ].map((faq, index) => (
                <div
                  key={index}
                  id={
                    faq.question === "Does the AI use my content for training?"
                      ? "faq-ai-training"
                      : undefined
                  }
                  className="animate-fade-in-up"
                  style={{ animationDelay: `${index * 0.1}s` }}
                >
                  <div className="bg-white/70 backdrop-blur-sm p-6 rounded-xl border border-white/20 shadow-lg">
                    <h3 className="text-lg font-bold text-slate-900 mb-3">
                      {faq.question}
                    </h3>
                    <div className="text-slate-700 leading-relaxed font-medium">
                      {faq.answer}
                    </div>
                  </div>
                </div>
              ))}
            </div>
          </div>
        </section>

        {/* Features Grid */}
        <section id="features" className="py-12 sm:py-16 lg:py-20 px-4 sm:px-6">
          <div className="max-w-7xl mx-auto">
            <div className="text-center mb-12 sm:mb-16 animate-fade-in-up">
              <h2 className="text-2xl sm:text-3xl md:text-4xl lg:text-5xl font-black text-slate-900 mb-4 sm:mb-6">
                PDF to Markdown Converter Features
              </h2>
              <p className="text-base sm:text-lg md:text-xl text-slate-700 max-w-2xl mx-auto text-balance font-medium">
                Advanced AI-powered conversion with enterprise-grade security
                and accuracy for all your PDF to Markdown needs
              </p>
            </div>

            <div className="grid sm:grid-cols-2 lg:grid-cols-4 gap-4 sm:gap-6">
              {[
                {
                  icon: "🧠",
                  title: "Advanced AI",
                  description:
                    "Understands context, preserves structure, and maintains document integrity with precision.",
                  gradient: "from-blue-500 to-indigo-500",
                },
                {
                  icon: "⚡",
                  title: "Lightning Fast",
                  description:
                    "Documents typically processed in under 2 minutes with our optimized pipeline and infrastructure.",
                  gradient: "from-yellow-500 to-orange-500",
                },
                {
                  icon: "🔒",
                  title: "Bank-level Security",
                  description:
                    "End-to-end encryption, automatic deletion, and zero data retention policies.",
                  gradient: "from-green-500 to-emerald-500",
                },
                {
                  icon: "📊",
                  title: "Structure Preservation",
                  description:
                    "Tables, lists, headers, and complex formatting converted with pixel-perfect accuracy.",
                  gradient: "from-purple-500 to-pink-500",
                },
                {
                  icon: "📱",
                  title: "Any Device",
                  description:
                    "Works flawlessly on desktop, tablet, and mobile with responsive design.",
                  gradient: "from-cyan-500 to-blue-500",
                },
                {
                  icon: "🔄",
                  title: "Batch Processing",
                  description:
                    "Convert multiple documents simultaneously with our premium plans.",
                  gradient: "from-red-500 to-pink-500",
                },
                {
                  icon: "📧",
                  title: "Email Delivery",
                  description:
                    "Converted files delivered instantly to your inbox with download links.",
                  gradient: "from-indigo-500 to-purple-500",
                },
                {
                  icon: "💎",
                  title: "Premium Support",
                  description:
                    "Expert support team available for enterprise customers and complex conversions.",
                  gradient: "from-gray-500 to-slate-500",
                },
              ].map((feature, index) => (
                <div
                  key={index}
                  className="group animate-fade-in-up"
                  style={{ animationDelay: `${index * 0.1}s` }}
                >
                  <div className="relative bg-white/70 backdrop-blur-sm p-6 rounded-xl border border-white/20 shadow-lg hover:shadow-xl transition-all duration-300 group-hover:scale-105 group-hover:bg-white/80 h-full">
                    <div
                      className={`w-12 h-12 rounded-lg bg-gradient-to-r ${feature.gradient} flex items-center justify-center text-2xl mb-4 shadow-lg group-hover:scale-110 transition-transform duration-300`}
                    >
                      {feature.icon}
                    </div>

                    <h3 className="text-lg font-bold text-slate-900 mb-3">
                      {feature.title}
                    </h3>

                    <p className="text-slate-700 text-sm leading-relaxed font-medium">
                      {feature.description}
                    </p>
                  </div>
                </div>
              ))}
            </div>
          </div>
        </section>

        {/* Footer */}
        <footer className="py-12 sm:py-16 px-4 sm:px-6 bg-slate-900">
          <div className="max-w-7xl mx-auto">
            <div className="grid sm:grid-cols-2 md:grid-cols-4 gap-6 sm:gap-8 mb-8 sm:mb-12">
              <div className="sm:col-span-2 md:col-span-2">
                <div className="text-xl sm:text-2xl font-bold text-white mb-3 sm:mb-4">
                  PdfToMd
                </div>
                <p className="text-slate-400 leading-relaxed max-w-md text-sm sm:text-base">
                  Transform your documents with the power of advanced AI.
                  Trusted by professionals worldwide for accurate, fast, and
                  secure PDF to Markdown conversion.
                </p>
              </div>

              <div>
                <h3 className="text-white font-semibold mb-3 sm:mb-4 text-sm sm:text-base">
                  Product
                </h3>
                <ul className="space-y-2 text-slate-400 text-sm">
                  <li>
                    <Link
                      to="/features"
                      className="hover:text-white transition-colors"
                    >
                      Features
                    </Link>
                  </li>
                  <li>
                    <Link
                      to="/use-cases"
                      className="hover:text-white transition-colors"
                    >
                      Use Cases
                    </Link>
                  </li>
                  <li>
                    <Link
                      to="/pricing"
                      className="hover:text-white transition-colors"
                    >
                      Pricing
                    </Link>
                  </li>
                  <li>
                    <Link
                      to="/help#api-documentation"
                      className="hover:text-white transition-colors"
                    >
                      API Documentation
                    </Link>
                  </li>
                  <li>
                    <Link
                      to="/blog"
                      className="hover:text-white transition-colors"
                    >
                      Blog
                    </Link>
                  </li>
                  <li>
                    <button
                      onClick={() => setShowContactModal(true)}
                      className="hover:text-white transition-colors text-left"
                    >
                      Enterprise
                    </button>
                  </li>
                </ul>
              </div>

              <div>
                <h3 className="text-white font-semibold mb-3 sm:mb-4 text-sm sm:text-base">
                  Support
                </h3>
                <ul className="space-y-2 text-slate-400 text-sm">
                  <li>
                    <Link
                      to="/help"
                      className="hover:text-white transition-colors"
                    >
                      Help Center
                    </Link>
                  </li>
                  <li>
                    <a
                      href="mailto:support@pdftomd.ai"
                      className="hover:text-white transition-colors"
                    >
                      Contact Support
                    </a>
                  </li>
                  <li>
                    <Link
                      to="/privacy"
                      className="hover:text-white transition-colors"
                    >
                      Privacy
                    </Link>
                  </li>
                  <li>
                    <Link
                      to="/terms"
                      className="hover:text-white transition-colors"
                    >
                      Terms
                    </Link>
                  </li>
                </ul>
              </div>
            </div>

            <div className="border-t border-slate-800 pt-6 sm:pt-8 flex flex-col sm:flex-row justify-between items-center">
              <p className="text-slate-400 text-xs sm:text-sm text-center sm:text-left">
                © 2025 Pennypack Software LLC. All rights reserved.
              </p>

              <div className="flex items-center space-x-4 sm:space-x-6 mt-3 sm:mt-0">
                <a
                  href="https://pennypack.dev"
                  className="text-slate-400 hover:text-white transition-colors text-xs sm:text-sm font-medium"
                  target="_blank"
                  rel="noopener noreferrer"
                >
                  Company Website
                </a>
                <a
                  href="mailto:support@pdftomd.ai"
                  className="text-slate-400 hover:text-white transition-colors"
                >
                  <span className="sr-only">Email Support</span>
                  <svg
                    className="w-4 h-4 sm:w-5 sm:h-5"
                    fill="none"
                    stroke="currentColor"
                    viewBox="0 0 24 24"
                  >
                    <path
                      strokeLinecap="round"
                      strokeLinejoin="round"
                      strokeWidth={2}
                      d="M3 8l7.89 4.26a2 2 0 002.22 0L21 8M5 19h14a2 2 0 002-2V7a2 2 0 00-2-2H5a2 2 0 00-2 2v10a2 2 0 002 2z"
                    />
                  </svg>
                </a>
              </div>
            </div>
          </div>
        </footer>
      </div>

      {/* Auth Modal */}
      <AuthModal
        isOpen={showAuthModal}
        onClose={() => setShowAuthModal(false)}
        title="Sign in to your account"
        subtitle="Access your dashboard and manage your conversions"
      />

      {/* Contact Modal */}
      {showContactModal && (
        <div className="fixed inset-0 bg-black/50 backdrop-blur-sm flex items-center justify-center p-4 z-50">
          <div className="bg-white/90 backdrop-blur-xl rounded-2xl p-8 max-w-2xl w-full shadow-2xl border border-white/20 max-h-[90vh] overflow-y-auto">
            <ContactForm
              inquiryType="enterprise"
              onClose={() => setShowContactModal(false)}
            />
          </div>
        </div>
      )}

      {/* Upgrade Funnel */}
      <UpgradeFunnel
        isOpen={showUpgradeFunnel}
        onClose={() => setShowUpgradeFunnel(false)}
        triggerType={funnelTrigger}
        pageCount={funnelPageCount}
      />
    </div>
  );
}