import { Button } from "@/components/ui/button";
import { Link } from "wouter";
import { useAuth } from "@/hooks/use-auth";
import { Upload, Sparkles, Gift, ChevronDown, Heart, Zap, Users, Check, HelpCircle, Clock, Camera, Palette, Mail } from "lucide-react";
import { Card, CardContent } from "@/components/ui/card";
import { Select, SelectContent, SelectItem, SelectTrigger, SelectValue } from "@/components/ui/select";
import { Collapsible, CollapsibleContent, CollapsibleTrigger } from "@/components/ui/collapsible";
import { BeforeAfterSlider } from "@/components/BeforeAfterSlider";
import { UploadDropzone } from "@/components/UploadDropzone";
import { LazySection } from "@/components/LazySection";
import { useCriticalImagePreloader } from "@/hooks/useImagePreloader";
import { useState, useEffect, lazy, Suspense } from "react";
import { ErrorBoundary } from "@/components/ErrorBoundary";

// Demo images for the before/after slider - using optimized WebP versions
const aboutOriginal = "/attached_assets/About_original_optimized.webp";
const aboutGenerated = "/attached_assets/About_new_optimized.webp";

// (Removed dead companyLogos press-logo array — Forbes/Mashable/etc. were never earned
//  press placements and were not rendered; unverified press claims are a brand/legal risk.)

// Lazy load heavy components for better performance
const LazyBeforeAfterSlider = lazy(() => import("@/components/BeforeAfterSlider").then(module => ({ default: module.BeforeAfterSlider })));

export default function Home() {
  const { isLoading } = useAuth();
  const [openFaq, setOpenFaq] = useState<string | null>(null);
  
  // Preload critical images for better performance
  useCriticalImagePreloader();

  // Don't block rendering for auth loading on public homepage
  if (isLoading) {
    // Show minimal loading state but don't block the page
  }
  
  return (
    <main className="flex-grow bg-navy">
      {/* Hero Section */}
      <section className="relative py-20 overflow-hidden">
        <div className="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8">
          <div className="grid lg:grid-cols-2 gap-8 lg:gap-16 items-center">
            {/* Left Content */}
            <div className="text-left">
              <h1 className="text-4xl md:text-5xl lg:text-6xl xl:text-7xl font-display font-bold text-soft-white mb-6 leading-tight">
                Turn Your Pet Into <span className="gradient-text">Art</span>
                <br />
                You'll <span className="gradient-text">Treasure Forever</span>
              </h1>
              <p className="text-lg md:text-xl lg:text-2xl text-warm-gray mb-8 max-w-md lg:max-w-lg leading-relaxed">
                Upload a photo of your pet and we'll turn it into stunning artwork, then print and ship it to your door as a beautiful keepsake or gift.
              </p>
              {/* Our USP — the one thing Etsy sellers can't do. */}
              <p className="text-base md:text-lg text-mint font-display font-medium">
                See exactly how your art looks — before you pay.
              </p>
            </div>

            {/* Right Content — start the funnel right here (guest, no login wall) */}
            <div className="relative w-full max-w-md mx-auto lg:mx-0 lg:justify-self-center">
              <div className="rounded-3xl p-5 lg:p-6 bg-gradient-to-br from-coral/15 to-violet/15 backdrop-blur-sm border border-warm-gray/20 shadow-2xl">
                <UploadDropzone variant="hero" />
              </div>
            </div>
          </div>


        </div>
      </section>



      {/* Process Steps */}
      <LazySection fallback={
        <section className="py-20 bg-slate-900">
          <div className="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8">
            <div className="text-center mb-16">
              <div className="h-10 bg-slate-600 rounded mb-4 max-w-md mx-auto animate-pulse" />
            </div>
            <div className="grid md:grid-cols-3 gap-12">
              {[1, 2, 3].map(i => (
                <div key={i} className="text-center animate-pulse">
                  <div className="w-20 h-20 bg-slate-600 rounded-2xl mx-auto mb-6" />
                  <div className="h-6 bg-slate-600 rounded mb-4 max-w-32 mx-auto" />
                  <div className="space-y-2">
                    <div className="h-4 bg-slate-600 rounded" />
                    <div className="h-4 bg-slate-600 rounded max-w-48 mx-auto" />
                  </div>
                </div>
              ))}
            </div>
          </div>
        </section>
      }>
        <section className="py-20 bg-slate-900">
        <div className="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8">
          <div className="text-center mb-16">
            <h2 className="text-3xl md:text-4xl font-display font-bold text-soft-white mb-4">
              From Photo to Print, in Just a Few Clicks
            </h2>
          </div>
          
          <div className="grid md:grid-cols-3 gap-12 text-center">
            {/* Step 1 */}
            <div className="group">
              <div className="w-20 h-20 mx-auto mb-6 gradient-primary rounded-2xl flex items-center justify-center transform group-hover:scale-110 transition-transform duration-300">
                <Upload className="w-10 h-10 text-white" />
              </div>
              <h3 className="text-xl font-display font-bold text-soft-white mb-4">Upload Photo</h3>
              <p className="text-warm-gray leading-relaxed">
                Choose your favorite pic, whether it's your dog looking goofy or your cat being majestic.
              </p>
            </div>

            {/* Step 2 */}
            <div className="group">
              <div className="w-20 h-20 mx-auto mb-6 gradient-primary rounded-2xl flex items-center justify-center transform group-hover:scale-110 transition-transform duration-300">
                <Sparkles className="w-10 h-10 text-white" />
              </div>
              <h3 className="text-xl font-display font-bold text-soft-white mb-4">Choose a Style</h3>
              <p className="text-warm-gray leading-relaxed">
                From royal portraits to watercolor pet memorials, pick a look that fits their personality.
              </p>
            </div>

            {/* Step 3 */}
            <div className="group">
              <div className="w-20 h-20 mx-auto mb-6 gradient-primary rounded-2xl flex items-center justify-center transform group-hover:scale-110 transition-transform duration-300">
                <Gift className="w-10 h-10 text-white" />
              </div>
              <h3 className="text-xl font-display font-bold text-soft-white mb-4">Print & Enjoy</h3>
              <p className="text-warm-gray leading-relaxed">
                We'll professionally print and ship your artwork, ready to hang or give as a meaningful gift.
              </p>
            </div>
          </div>
        </div>
        </section>
      </LazySection>

      {/* Pricing Section */}
      <section id="pricing" className="py-20 bg-slate-900">
        <div className="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8">
          <div className="text-center mb-16">
            <h2 className="text-3xl md:text-4xl font-display font-bold text-soft-white mb-4">
              Beautiful Prints, Delivered to Your Door
            </h2>
            <p className="text-lg text-warm-gray max-w-2xl mx-auto">
              Choose how you want to bring your memory to life with sleek posters to premium gallery pieces. Worldwide shipping available.
            </p>
          </div>

          <div className="grid md:grid-cols-3 gap-8 max-w-5xl mx-auto">
            {/* Print Option */}
            <Card className="bg-navy/50 border-slate-700 hover:border-coral/50 transition-all duration-300 transform hover:scale-105">
              <CardContent className="p-8 text-center">
                <div className="w-16 h-16 mx-auto mb-6 gradient-primary rounded-2xl flex items-center justify-center">
                  <Camera className="w-8 h-8 text-white" />
                </div>
                <h3 className="text-xl font-display font-bold text-soft-white mb-2">Poster</h3>
                <p className="text-warm-gray mb-6">Affordable and elegant, perfect for thoughtful gifts.</p>
                <div className="mb-6">
                  <span className="text-3xl font-display font-bold text-soft-white">$29.99</span>
                  <span className="text-warm-gray ml-2">starting from</span>
                </div>
                <ul className="text-left space-y-3 mb-8">
                  <li className="flex items-center text-warm-gray">
                    <Check className="w-5 h-5 text-coral mr-3 flex-shrink-0" />
                    Smooth matte paper
                  </li>
                  <li className="flex items-center text-warm-gray">
                    <Check className="w-5 h-5 text-coral mr-3 flex-shrink-0" />
                    Crisp detail reproduction
                  </li>
                  <li className="flex items-center text-warm-gray">
                    <Check className="w-5 h-5 text-coral mr-3 flex-shrink-0" />
                    Ships rolled and ready to frame
                  </li>
                </ul>
                <Link href="/app/create">
                  <Button className="w-full gradient-primary gradient-primary-hover text-white font-display font-semibold">
                    Get Started
                  </Button>
                </Link>
              </CardContent>
            </Card>

            {/* Canvas Option */}
            <Card className="bg-navy/50 border-slate-700 hover:border-coral/50 transition-all duration-300 transform hover:scale-105 relative">
              <div className="absolute -top-4 left-1/2 transform -translate-x-1/2">
                <span className="bg-gradient-to-r from-coral to-violet text-white px-4 py-1 rounded-full text-sm font-display font-semibold">
                  Popular
                </span>
              </div>
              <CardContent className="p-8 text-center">
                <div className="w-16 h-16 mx-auto mb-6 gradient-primary rounded-2xl flex items-center justify-center">
                  <Palette className="w-8 h-8 text-white" />
                </div>
                <h3 className="text-xl font-display font-bold text-soft-white mb-2">Canvas</h3>
                <p className="text-warm-gray mb-6">A ready-to-hang centerpiece with professional gallery feel.</p>
                <div className="mb-6">
                  <span className="text-3xl font-display font-bold text-soft-white">$49.99</span>
                  <span className="text-warm-gray ml-2">starting from</span>
                </div>
                <ul className="text-left space-y-3 mb-8">
                  <li className="flex items-center text-warm-gray">
                    <Check className="w-5 h-5 text-coral mr-3 flex-shrink-0" />
                    Stretched on wooden frame
                  </li>
                  <li className="flex items-center text-warm-gray">
                    <Check className="w-5 h-5 text-coral mr-3 flex-shrink-0" />
                    Gallery-wrapped edges
                  </li>
                  <li className="flex items-center text-warm-gray">
                    <Check className="w-5 h-5 text-coral mr-3 flex-shrink-0" />
                    Vibrant colors on durable canvas
                  </li>
                </ul>
                <Link href="/app/create">
                  <Button className="w-full gradient-primary gradient-primary-hover text-white font-display font-semibold">
                    Get Started
                  </Button>
                </Link>
              </CardContent>
            </Card>

            {/* Framed Canvas Option */}
            <Card className="bg-navy/50 border-slate-700 hover:border-slate-600 transition-all duration-300 opacity-75">
              <CardContent className="p-8 text-center">
                <div className="w-16 h-16 mx-auto mb-6 bg-slate-700 rounded-2xl flex items-center justify-center">
                  <Gift className="w-8 h-8 text-slate-400" />
                </div>
                <h3 className="text-xl font-display font-bold text-soft-white mb-2">Framed Canvas</h3>
                <p className="text-warm-gray mb-6">Premium framed artwork with customizable options.</p>
                <div className="mb-6">
                  <span className="text-3xl font-display font-bold text-slate-400">Coming Soon</span>
                </div>
                <ul className="text-left space-y-3 mb-8">
                  <li className="flex items-center text-slate-400">
                    <Clock className="w-5 h-5 text-slate-500 mr-3 flex-shrink-0" />
                    Choice of frames
                  </li>
                  <li className="flex items-center text-slate-400">
                    <Clock className="w-5 h-5 text-slate-500 mr-3 flex-shrink-0" />
                    Museum-grade finish
                  </li>
                  <li className="flex items-center text-slate-400">
                    <Clock className="w-5 h-5 text-slate-500 mr-3 flex-shrink-0" />
                    Arrives ready to hang
                  </li>
                </ul>
                <Button disabled className="w-full bg-slate-700 text-slate-400 cursor-not-allowed">
                  Coming Soon
                </Button>
              </CardContent>
            </Card>
          </div>
          
          {/* Pricing Disclaimer */}
          <div className="text-center mt-12">
            <p className="text-warm-gray/80 text-sm max-w-2xl mx-auto">
              * Base prices shown above. Shipping costs and applicable taxes (VAT) will be calculated and displayed during checkout based on your location.
            </p>
          </div>
        </div>
      </section>

      {/* About Us Section */}
      <section id="about" className="py-20 bg-navy">
        <div className="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8">
          <div className="text-center mb-16">
            <h2 className="text-3xl md:text-4xl font-display font-bold text-soft-white">
              About ArtPixio
            </h2>
          </div>

          {/* Text and Image Layout */}
          <div className="grid lg:grid-cols-2 gap-12 lg:gap-16 items-center mb-16">
            {/* Left Content - Text */}
            <div className="flex justify-center lg:justify-end">
              <div className="max-w-md text-left">
                <div className="text-lg text-warm-gray leading-relaxed space-y-6">
                  <p>
                    We turn the pets you love into beautiful deeply personal artwork and print & ship it straight to your door.
                  </p>
                  
                  <p>
                    Whether you're celebrating a new puppy, honoring a beloved cat, or surprising a fellow pet lover, we make it easy to turn memories into meaningful keepsakes.
                  </p>
                  
                  <p>
                    Just upload a photo and we'll handle the rest, from art creation to printing and shipping.
                  </p>
                </div>
              </div>
            </div>

            {/* Right Content - Interactive Slider */}
            <div className="relative w-full max-w-sm mx-auto lg:mx-0 lg:justify-self-center">
              <div className="relative bg-gradient-to-br from-coral/20 to-violet/20 rounded-3xl p-3 backdrop-blur-sm border border-warm-gray/20">
                <div className="bg-white rounded-2xl p-2 shadow-2xl transform rotate-1 hover:rotate-0 transition-transform duration-300">
                  <div className="aspect-[4/5] rounded-xl overflow-hidden">
                    <ErrorBoundary
                      fallback={
                        <div className="w-full h-full bg-gray-100 flex items-center justify-center rounded-xl">
                          <p className="text-gray-500 text-sm">Interactive demo loading...</p>
                        </div>
                      }
                    >
                      <Suspense 
                        fallback={
                          <div className="w-full h-full bg-gray-100 animate-pulse flex items-center justify-center rounded-xl">
                            <p className="text-gray-500 text-sm">Loading comparison...</p>
                          </div>
                        }
                      >
                        <LazyBeforeAfterSlider
                          beforeImage={aboutOriginal}
                          afterImage={aboutGenerated}
                          beforeLabel="Original"
                          afterLabel="AI Art"
                          className="w-full h-full"
                        />
                      </Suspense>
                    </ErrorBoundary>
                  </div>
                </div>
              </div>
            </div>
          </div>

          {/* Feature Icons - HIDDEN FOR UX TESTING */}
        </div>
      </section>

      {/* CTA band. NOTE: fabricated testimonials removed (FTC/UK consumer-law risk on a live
          shop). Re-add a reviews section once we have real, verifiable customer reviews. */}
      <section className="py-20 bg-navy">
        <div className="max-w-3xl mx-auto px-4 sm:px-6 lg:px-8 text-center">
          <h2 className="text-3xl md:text-4xl font-display font-bold text-soft-white mb-4">
            Made for the pet you love
          </h2>
          <p className="text-lg text-warm-gray mb-8">
            Try any photo and any style — you'll see exactly how your art looks before you pay.
          </p>
          <Link href="/app/create">
            <Button
              size="lg"
              className="text-lg px-10 py-6 gradient-primary gradient-primary-hover text-white font-display font-semibold rounded-full"
            >
              Make Yours Today
            </Button>
          </Link>
        </div>
      </section>

      {/* FAQ Section */}
      <section id="faq" className="py-20 bg-slate-900">
        <div className="max-w-4xl mx-auto px-4 sm:px-6 lg:px-8">
          <div className="text-center mb-16">
            <h2 className="text-3xl md:text-4xl font-display font-bold text-soft-white mb-4">
              Frequently Asked Questions
            </h2>
            <p className="text-lg text-warm-gray">
              Everything you need to know about ArtPixio
            </p>
          </div>

          <div className="space-y-4">
            {[
              {
                id: "how-it-works",
                question: "How does ArtPixio work?",
                answer: "Simply upload a photo of your pet, whether it's your dog, cat, bird, or any furry (or not so furry) friend. Pick your favorite art style, and our AI transforms it into a stunning digital artwork in minutes. It's easy, personal, and ready to print or share."
              },
              {
                id: "different-styles",
                question: "Can I try different styles for my pet?",
                answer: "Yes! You can explore different art styles to find the perfect look for your pet. Want your dog as a royal portrait or your cat in watercolor? Don't love the first version? No worries, you'll have a chance to adjust until it captures your pet perfectly."
              },
              {
                id: "photo-requirements",
                question: "What kind of pet photos should I upload?",
                answer: "For best results, choose high-quality, well-lit photos where your pet is clearly visible. Close-up shots work beautifully. Think portraits of your dog's face or your cat looking directly at the camera. Make sure your pet is centered and the background isn't too cluttered. We accept JPEG, PNG, and most standard image formats."
              },
              {
                id: "good-for-gifts",
                question: "Is pet artwork good for gifts?",
                answer: "Absolutely! Pet artwork makes incredibly meaningful gifts for any pet lover. Whether it's for a birthday, to celebrate a new adoption, or to honor a beloved companion, turning their furry friend into art is a gift they'll treasure forever."
              },
              {
                id: "image-privacy",
                question: "Will my pet's photo be used for anything else?",
                answer: "Never. Your pet photos are private and used only to create your custom artwork. We don't share, sell, or reuse your pet images. Your furry friend's memories stay yours, always."
              },
              {
                id: "print-delivery",
                question: "How long does it take to get my pet artwork printed?",
                answer: "Once your pet artwork is ready, we usually produce and deliver prints within 10-18 business days (canvas is quicker; framed canvas takes a little longer). We partner with top-quality printers to ensure your pet looks amazing on canvas or paper and we'll send tracking info as soon as your order ships."
              },
              {
                id: "design-skills",
                question: "Do I need any design skills to create pet art?",
                answer: "Not at all. ArtPixio is made for every pet parent, regardless of artistic ability. Just upload a photo of your pet, pick a style, and let our AI handle the magic. No design experience needed."
              },
              {
                id: "pet-types",
                question: "What types of pets work best?",
                answer: "All pets work great! Dogs, cats, birds, rabbits, horses... If you love them, we can turn them into art. The key is a clear, well-lit photo where we can see your pet's personality shine through."
              },
              {
                id: "refunds",
                question: "What is your refund policy?",
                answer: "Each pet artwork is custom-made, so we don't offer general refunds. But if something goes wrong, like printing issues, damage during shipping, or a tech glitch, we'll gladly fix it. Reach out within 30 days and we'll make it right."
              }
            ].map((faq) => (
              <Collapsible
                key={faq.id}
                open={openFaq === faq.id}
                onOpenChange={() => setOpenFaq(openFaq === faq.id ? null : faq.id)}
              >
                <CollapsibleTrigger className="w-full">
                  <Card className="bg-navy/50 border-slate-700 hover:border-coral/50 transition-all duration-300">
                    <CardContent className="p-6">
                      <div className="flex items-center justify-between">
                        <h3 className="text-lg font-display font-semibold text-soft-white text-left">
                          {faq.question}
                        </h3>
                        <ChevronDown 
                          className={`w-5 h-5 text-coral transition-transform duration-300 flex-shrink-0 ml-4 ${
                            openFaq === faq.id ? 'transform rotate-180' : ''
                          }`} 
                        />
                      </div>
                    </CardContent>
                  </Card>
                </CollapsibleTrigger>
                <CollapsibleContent>
                  <div className="px-6 pb-6 pt-2">
                    <p className="text-warm-gray leading-relaxed">
                      {faq.id === "refunds" ? (
                        <>
                          Each piece is custom-made, so we don't offer general refunds. But if something goes wrong, like printing issues, damage during shipping, or a tech glitch, we'll gladly fix it. Reach out within 30 days and we'll make it right. See{" "}
                          <a href="/refund-policy" className="text-coral hover:text-coral/80 underline font-medium">
                            full Refund Policy
                          </a>.
                        </>
                      ) : (
                        faq.answer
                      )}
                    </p>
                  </div>
                </CollapsibleContent>
              </Collapsible>
            ))}
          </div>
        </div>
      </section>

      {/* Final CTA Section */}
      <section className="py-20 bg-slate-900 relative overflow-hidden">
        {/* Background Pattern */}
        <div className="absolute inset-0 opacity-5">
          <div className="absolute top-1/4 left-1/4 w-32 h-32 border border-coral/20 rounded-full"></div>
          <div className="absolute bottom-1/4 right-1/4 w-24 h-24 border border-violet/20 rounded-full"></div>
          <div className="absolute top-1/2 right-1/3 w-16 h-16 border border-coral/20 rounded-full"></div>
        </div>
        
        <div className="max-w-4xl mx-auto px-4 sm:px-6 lg:px-8 text-center relative z-10">
          <h2 className="text-3xl md:text-4xl font-display font-bold mb-4 text-soft-white">
            Ready to Turn a Photo of Your Pet into Art?
          </h2>
          <p className="text-lg text-warm-gray mb-8 max-w-2xl mx-auto">
            Turn a photo you love into art you'll treasure – and see exactly how it looks before you pay.
            Now it's your turn to celebrate your furry best friend.
          </p>
          
          <div className="flex justify-center">
            <Link href="/app/create">
              <Button
                size="lg"
                className="gradient-primary text-white font-display font-semibold px-8 py-4 text-lg shadow-xl hover:shadow-2xl transition-all duration-300 transform hover:scale-105"
              >
                Start Creating Now
              </Button>
            </Link>
          </div>
          
          <p className="text-sm text-warm-gray/80 mt-6">
            💝 Perfect for gifting • 🎨 Gallery-quality prints • ✨ Fast delivery
          </p>
        </div>
      </section>
    </main>
  );
}