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>

              {/* 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 50 pages for free users. Premium users can convert larger documents and multiple files simultaneously. 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: "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}
                  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>
                    <p className="text-slate-700 leading-relaxed font-medium">
                      {faq.answer}
                    </p>
                  </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>
  );
}