import React, { useEffect, useState } from "react";
import { useNavigate, useSearchParams, Link } from "react-router-dom";
import { Button } from "@/components/ui/button";
import { 
  Download, 
  ArrowRight, 
  TrendingUp, 
  Zap, 
  Target, 
  BarChart3, 
  Lock, 
  Rocket,
  Sparkles,
  Mic,
  Percent,
  Users,
  Store,
  Bot,
  Package,
  CheckCircle,
  Clock,
  ShieldCheck,
  Star,
  Check,
  ShoppingCart,
  Truck,
  FileText,
  Shield,
  Gift,
  CreditCard,
  Heart,
  Building2
} from "lucide-react";
import { PartnerInstallModal } from "@/components/pwa/PartnerInstallModal";
import { PartnerDigitalScreens } from "@/components/partner/PartnerDigitalScreens";
import { PartnerSupply } from "@/components/partner/PartnerSupply";

import { usePartnerPWA } from "@/hooks/usePartnerPWA";
import { SEO } from "@/components/SEO";
import { ShopCard } from "@/components/shop/ShopCard";
import heroDashboardImage from "@/assets/partner/hero-dashboard.webp";
import analyticsDashboardImage from "@/assets/partner/analytics-dashboard.webp";
import giftCard20 from "@/assets/gift-cards/gift-card-20.webp";
import giftCard30 from "@/assets/gift-cards/gift-card-30.webp";
import giftCard50 from "@/assets/gift-cards/gift-card-50.webp";
import giftCard100 from "@/assets/gift-cards/gift-card-100.webp";

// Lazy load non-critical components if any (currently none identified as heavy)

/**
 * Design Philosophy: Financial Clarity Meets Modern SaaS
 * - Deep Slate Blue (#1a3a52) for trust and professionalism
 * - Vibrant Teal (#0ea5a5) for growth and real-time insights
 * - Sophisticated typography with Poppins (headlines) + Inter (body)
 * - Asymmetric layouts with data visualizations as design elements
 * - Purposeful micro-interactions and animations
 */

const BRAND = {
  slateBlue: "#1a3a52",
  teal: "#0ea5a5",
  lightBg: "#f8fafc",
  white: "#ffffff",
  border: "#e2e8f0",
  secondary: "#f5f3f0",
  textMuted: "#64748b",
  textPrimary: "#2c3e50",
  // Legacy orange for CTA buttons
  orange: "#EB6D3D",
};

const Partner = () => {
  const navigate = useNavigate();
  const [searchParams] = useSearchParams();
  const [showInstallModal, setShowInstallModal] = useState(false);
  const [isVisible, setIsVisible] = useState(false);

  const {
    isIOS,
    isStandalone,
    isInstallable,
    isInstalled,
    promptInstall,
  } = usePartnerPWA();

  useEffect(() => {
    setIsVisible(true);
  }, []);

  useEffect(() => {
    const isPwaSource = searchParams.get('source') === 'pwa';
    if (isStandalone || isPwaSource) {
      navigate('/partner-auth', { replace: true });
      return;
    }
    const target = localStorage.getItem("pwa_post_install_redirect");
    if (target && isStandalone) {
      localStorage.removeItem("pwa_post_install_redirect");
      navigate(target, { replace: true });
    }
  }, [isStandalone, navigate, searchParams]);

  const handlePrimarySignup = () => navigate("/partner-auth");

  const handleDownloadApp = async () => {
    localStorage.setItem("pwa_post_install_redirect", "/partner-auth");
    if (isStandalone || isInstalled) { navigate("/partner-auth"); return; }
    // iOS Safari has no install API — must show Add to Home Screen guide
    if (isIOS) { setShowInstallModal(true); return; }
    // Everywhere else: fire native install prompt directly; if it isn't
    // available, skip the multi-step instructions and just open the web app.
    const result = await promptInstall();
    if (result === "accepted") return;
    navigate("/partner-auth");
  };

  const handleContinueWeb = () => {
    setShowInstallModal(false);
    navigate("/partner-auth");
  };

  const features = [
    { icon: Bot, title: "AI Voice & Chat Ordering", description: "Fudi AI handles phone calls and online orders 24/7. Never miss an order, even when you're busy." },
    { icon: BarChart3, title: "Real-Time Analytics", description: "Track orders, revenue, peak hours, and customer trends from a beautiful live dashboard." },
    { icon: Target, title: "Smart Promotions", description: "Run targeted offers that increase AOV without destroying margin." },
    { icon: TrendingUp, title: "Grow Your Revenue", description: "Reach thousands of new customers in your area. Our marketing tools help you boost visibility." },
    { icon: Lock, title: "Secure & Transparent", description: "Stripe-powered payments, full financial transparency, and GDPR-compliant data handling." },
    { icon: Rocket, title: "Fast Onboarding", description: "Start simple. Improve over time. We'll guide your setup with best-practice defaults." },
  ];

  const insights = [
    { title: "Peak Hour Mapping", desc: "Know when to staff up and when to run promos." },
    { title: "Margin-Safe Offers", desc: "Discount the right items without hurting your best sellers." },
    { title: "Repeat Customer Tracking", desc: "Spot loyalty patterns and grow repeat rate." },
    { title: "Cancellation Analysis", desc: "Fix the causes, not the symptoms." },
  ];

  const faqs = [
    { q: "How do I access the dashboard?", a: "Sign up at the partner portal, then you'll land directly in your dashboard where you can manage everything." },
    { q: "Can I manage menu and pricing myself?", a: "Yes. Owners can update items, prices, availability and promos inside the dashboard anytime." },
    { q: "Does it work on mobile?", a: "Yes. The partner experience is mobile-first and also supports an installed app experience." },
    { q: "What support do I get?", a: "We provide onboarding support, documentation, and a dedicated support team to help you succeed." },
  ];

  return (
    <>
      <SEO
        title="Partner with Fudies - Grow Your Takeaway Business"
        description="Join Fudies as a partner restaurant. Increase repeat customers, protect margins, and manage your shop with real-time analytics. Fast onboarding, transparent payouts."
        canonical="https://www.fudies.co.uk/partner"
      >
        {/* Preload critical hero image for LCP improvement */}
        <link rel="preload" href={heroDashboardImage} as="image" type="image/webp" />
      </SEO>

      <div 
        className="min-h-screen w-full overflow-x-hidden"
        style={{ opacity: isVisible ? 1 : 0, transition: "opacity 0.5s ease-in-out" }}
      >
        {/* Navigation */}
        <nav className="sticky top-0 z-50 border-b border-border backdrop-blur-md bg-background/95">
          <div className="container mx-auto px-4 py-3 flex items-center justify-between gap-2">
            <div className="flex items-center gap-1.5 shrink-0 min-w-0">
              <div className="flex h-8 w-8 sm:h-9 sm:w-9 items-center justify-center rounded-lg gradient-primary shadow-md shrink-0">
                <Store className="h-4 w-4 sm:h-5 sm:w-5 text-primary-foreground" />
              </div>
              <span className="text-base sm:text-xl font-bold text-foreground whitespace-nowrap">
                Fud<span className="inline-block animate-letter-n text-primary">i</span>es
              </span>
              <span className="text-base sm:text-xl font-bold text-primary whitespace-nowrap hidden xs:inline">/Partners</span>
            </div>

            <div className="hidden lg:flex items-center gap-6">
              <a href="#features" className="text-sm font-medium text-muted-foreground hover:text-foreground transition-colors">Features</a>
              <a href="#digital-screens" className="text-sm font-medium text-muted-foreground hover:text-foreground transition-colors">Screens</a>
              <a href="#supply" className="text-sm font-medium text-muted-foreground hover:text-foreground transition-colors">Supply</a>
              <a href="#outsourcing" className="text-sm font-medium text-muted-foreground hover:text-foreground transition-colors">Outsourcing</a>

              <a href="#gift-cards" className="text-sm font-medium text-muted-foreground hover:text-foreground transition-colors">Gift Cards</a>
              <a href="#how-it-works" className="text-sm font-medium text-muted-foreground hover:text-foreground transition-colors">How It Works</a>
              <a href="#faq" className="text-sm font-medium text-muted-foreground hover:text-foreground transition-colors">FAQ</a>
            </div>

            <div className="flex items-center gap-1.5 sm:gap-2 shrink-0">
              <Button variant="outline" size="sm" onClick={handleDownloadApp} className="text-xs sm:text-sm relative h-8 sm:h-9 px-2 sm:px-3">
                <Download className="w-3.5 h-3.5 sm:w-4 sm:h-4 mr-1" />
                <span className="hidden sm:inline">Download</span>
                {isInstallable && <span className="absolute -top-1 -right-1 w-2.5 h-2.5 rounded-full bg-success border-2 border-background" />}
              </Button>
              <Button size="sm" onClick={handlePrimarySignup} className="text-xs sm:text-sm h-8 sm:h-9 px-2 sm:px-3">
                Get Started
              </Button>
            </div>
          </div>
        </nav>

        {/* Hero Section - Dark gradient like partner-auth */}
        <section className="relative min-h-[65vh] flex items-center overflow-hidden">
          <div className="absolute inset-0 bg-gradient-to-br from-[#2a2a2a] via-[#3d3d3d] to-primary/60" />
          <div className="absolute inset-0 bg-[linear-gradient(to_right,hsl(var(--background)/0.04)_1px,transparent_1px),linear-gradient(to_bottom,hsl(var(--background)/0.04)_1px,transparent_1px)] bg-[size:40px_40px]" />
          <div className="absolute top-20 right-1/4 w-96 h-96 bg-primary/25 rounded-full blur-[120px]" />
          <div className="absolute bottom-20 left-1/4 w-72 h-72 bg-accent/15 rounded-full blur-[100px]" />

          <div className="container mx-auto px-4 relative z-10 py-16">
            <div className="grid lg:grid-cols-2 gap-12 items-center">
              <div className="space-y-6">
                {/* Badge */}
                <div className="inline-flex items-center gap-2 px-4 py-2 rounded-full bg-primary/20 text-primary-foreground text-sm font-semibold backdrop-blur-sm border border-primary/30">
                  <Sparkles className="w-4 h-4" />
                  AI-Powered • Only 6% • Weekly Payouts
                </div>

                <h1 className="text-4xl sm:text-5xl lg:text-6xl xl:text-7xl font-bold text-background leading-[1.1]">
                  Turn Every Order Into{" "}
                  <span className="text-primary">Predictable Growth</span>
                </h1>

                <p className="text-lg sm:text-xl text-background/70 max-w-xl leading-relaxed">
                  Fudies Partners helps you increase repeat customers, protect margin,
                  and manage your shop with clarity — on web and in the app.
                </p>

                {/* Key differentiators */}
                <div className="flex flex-wrap gap-3">
                  {[
                    { icon: Percent, text: "Only 6% Commission", color: "bg-primary/20 text-primary border-primary/30" },
                    { icon: Mic, text: "AI Voice Ordering", color: "bg-accent/20 text-accent border-accent/30" },
                    { icon: Users, text: "Zero Customer Fees", color: "bg-success/20 text-success border-success/30" },
                  ].map((item) => (
                    <div key={item.text} className={`inline-flex items-center gap-2 px-3 py-2 rounded-lg text-sm font-semibold border ${item.color}`}>
                      <item.icon className="w-4 h-4" />
                      {item.text}
                    </div>
                  ))}
                </div>

                <div className="flex flex-col sm:flex-row gap-4 pt-4">
                  <Button size="lg" onClick={handlePrimarySignup} className="h-14 px-8 text-lg font-bold shadow-xl shadow-primary/20">
                    Start as a Partner <ArrowRight className="ml-2 w-5 h-5" />
                  </Button>
                  <Button variant="outline" size="lg" onClick={handleDownloadApp} className="h-14 px-8 text-lg font-bold bg-background/10 backdrop-blur-md border-background/20 text-background hover:bg-background/20">
                    Download App <Sparkles className="ml-2 w-5 h-5" />
                  </Button>
                </div>

                {/* Quick stats */}
                <div className="grid grid-cols-3 gap-8 pt-8 border-t border-background/10">
                  {[
                    { label: "Repeat Customers", value: "+22%", icon: Users },
                    { label: "Order Value", value: "+12%", icon: TrendingUp },
                    { label: "Missed Orders", value: "-35%", icon: Zap },
                  ].map((stat) => (
                    <div key={stat.label}>
                      <div className="text-2xl font-bold text-background">{stat.value}</div>
                      <div className="text-xs text-background/50 uppercase tracking-wider font-semibold">{stat.label}</div>
                    </div>
                  ))}
                </div>
              </div>

              {/* Right Column: Image */}
              <div className="relative">
                <div className="rounded-2xl overflow-hidden shadow-2xl border border-white/20">
                  <img 
                    src={heroDashboardImage} 
                    alt="Fudies Partner Dashboard on a monitor"
                    className="w-full h-auto object-cover"
                    fetchPriority="high"
                    loading="eager"
                  />
                </div>
                {/* Decorative gradient overlay */}
                <div 
                  className="absolute -bottom-4 -right-4 w-32 h-32 rounded-full blur-3xl opacity-50"
                  style={{ background: BRAND.teal }}
                />
              </div>
            </div>
          </div>
        </section>

        {/* Scrolling Banner */}
        <div className="bg-primary py-4 overflow-hidden whitespace-nowrap border-y border-primary/20">
          <div className="flex animate-marquee gap-12 items-center">
            {[...Array(10)].map((_, i) => (
              <div key={i} className="flex items-center gap-8 text-primary-foreground font-bold text-sm uppercase tracking-widest">
                <span>Only 6% 🎉</span>
                <Sparkles className="w-4 h-4" />
                <span>AI Voice Ordering</span>
                <Sparkles className="w-4 h-4" />
                <span>Real-Time Dashboard</span>
                <Sparkles className="w-4 h-4" />
                <span>Weekly Payouts</span>
                <Sparkles className="w-4 h-4" />
                <span>QR Menu</span>
                <Sparkles className="w-4 h-4" />
                <span>Delivery Zones</span>
                <Sparkles className="w-4 h-4" />
                <span>Campaign Tools</span>
                <Sparkles className="w-4 h-4" />
                <span>Customer Analytics</span>
                <Sparkles className="w-4 h-4" />
                <span>Multi-Location Support</span>
              </div>
            ))}
          </div>
        </div>

        {/* Social Proof */}
        <section className="py-12 bg-muted/30 border-b border-border">
          <div className="container mx-auto px-4">
            <p className="text-center text-sm font-semibold text-muted-foreground mb-8 uppercase tracking-widest">Trusted by 1000+ restaurant partners across the UK</p>
            <div className="grid grid-cols-2 md:grid-cols-4 gap-4">
              {[
                { name: "Parma Pizza Kinson", rating: 4.5, slug: "parma-pizza-kinson", banner_url: "https://xcfmggvvvhqghznxfdki.supabase.co/storage/v1/object/public/shop-banners/01f0b95e-b709-4bf6-bd38-aeb46697212c/banner-1769959837168.webp", image_url: "https://xcfmggvvvhqghznxfdki.supabase.co/storage/v1/object/public/shop-banners/01f0b95e-b709-4bf6-bd38-aeb46697212c/logo-1769959761971.webp" },
                { name: "Bulford Charcoal Grill", rating: 4.5, slug: "bulford-charcoal-grill", banner_url: "https://xcfmggvvvhqghznxfdki.supabase.co/storage/v1/object/public/shop-banners/96e0080a-bb67-466e-8906-44e6bf1e42ae/banner-1769723845845.webp", image_url: "https://xcfmggvvvhqghznxfdki.supabase.co/storage/v1/object/public/shop-banners/96e0080a-bb67-466e-8906-44e6bf1e42ae/logo-1769723852433.png" },
                { name: "Bross Kebab & Pizza", rating: 4.5, slug: "bross-kebab-pizza", banner_url: "https://xcfmggvvvhqghznxfdki.supabase.co/storage/v1/object/public/shop-banners/feaeabc2-7f1d-4ed3-9959-f0fb9f6763ef/banner-1769724559234.webp", image_url: "https://xcfmggvvvhqghznxfdki.supabase.co/storage/v1/object/public/shop-banners/feaeabc2-7f1d-4ed3-9959-f0fb9f6763ef/logo-1769724687256.webp" },
                { name: "New Kitchen", rating: 4.5, slug: "new-kitchen", banner_url: "https://xcfmggvvvhqghznxfdki.supabase.co/storage/v1/object/public/shop-banners/a0c26fc7-8be1-4cea-bd9d-1d8297d0a4cf/banner-1770918555402.webp", image_url: "https://xcfmggvvvhqghznxfdki.supabase.co/storage/v1/object/public/shop-banners/a0c26fc7-8be1-4cea-bd9d-1d8297d0a4cf/logo-1769730869824.jpg" },
              ].map((shop) => (
                <ShopCard key={shop.slug} shop={{ ...shop, id: shop.slug }} />
              ))}
            </div>
          </div>
        </section>

        {/* Why Partners Choose Fudies */}
        <section id="features" className="py-24 bg-background">
          <div className="container mx-auto px-4">
            <div className="text-center max-w-3xl mx-auto mb-16">
              <div className="inline-flex items-center gap-2 px-3 py-1 rounded-full bg-primary/10 text-primary text-xs font-bold mb-4">
                <ShieldCheck className="w-4 h-4" /> Why Partners Choose Fudies
              </div>
              <h2 className="text-3xl sm:text-4xl font-bold mb-6">We believe in fair partnerships</h2>
              <p className="text-lg text-muted-foreground">Not squeezing your margins — helping you grow them.</p>
            </div>

            <div className="grid md:grid-cols-3 gap-8">
              {[
                { icon: Percent, title: "6%", subtitle: "Commission Only", desc: "Compare to 25-35% on other platforms. Keep more of what you earn.", badge: "Best Rate" },
                { icon: Mic, title: "AI", subtitle: "Voice Order Taking", desc: "Let AI handle phone orders 24/7. Never miss a call again.", badge: "Exclusive" },
                { icon: Users, title: "£0", subtitle: "Customer Service Fee", desc: "No hidden fees for your customers. Better experience, more orders.", badge: "Customer First" }
              ].map((item) => (
                <div key={item.title} className="group p-8 rounded-3xl bg-muted/50 border border-border hover:border-primary/30 transition-all duration-300 relative overflow-hidden">
                  <div className="absolute top-0 right-0 p-4">
                    <span className="px-3 py-1 rounded-full bg-primary text-primary-foreground text-[10px] font-bold uppercase tracking-wider">{item.badge}</span>
                  </div>
                  <div className="w-14 h-14 rounded-2xl bg-primary/10 flex items-center justify-center mb-6 group-hover:scale-110 transition-transform">
                    <item.icon className="w-7 h-7 text-primary" />
                  </div>
                  <h3 className="text-5xl font-bold mb-2">{item.title}</h3>
                  <p className="text-xl font-bold mb-4">{item.subtitle}</p>
                  <p className="text-muted-foreground leading-relaxed">{item.desc}</p>
                </div>
              ))}
            </div>

            <div className="mt-16 text-center">
              <Button size="lg" onClick={handlePrimarySignup} className="h-14 px-10 text-lg font-bold">
                Join Fudies – Start Free
              </Button>
            </div>
          </div>
        </section>

        {/* Features Grid */}
        <section className="py-24 bg-muted/30">
          <div className="container mx-auto px-4">
            <div className="grid lg:grid-cols-2 gap-16 items-center">
              <div>
                <h2 className="text-3xl sm:text-4xl font-bold mb-6">Built for owners who want control</h2>
                <p className="text-lg text-muted-foreground mb-10">Everything is designed to be measurable: revenue, margin safety, and operational efficiency.</p>
                
                <div className="grid sm:grid-cols-2 gap-8">
                  {features.map((f) => (
                    <div key={f.title} className="space-y-3">
                      <div className="w-10 h-10 rounded-lg bg-primary/10 flex items-center justify-center">
                        <f.icon className="w-5 h-5 text-primary" />
                      </div>
                      <h3 className="font-bold">{f.title}</h3>
                      <p className="text-sm text-muted-foreground leading-relaxed">{f.description}</p>
                    </div>
                  ))}
                </div>
              </div>
              <div className="relative">
                <div className="rounded-3xl overflow-hidden shadow-2xl border border-border">
                  <img 
                    src={analyticsDashboardImage} 
                    alt="Fudies Analytics Dashboard" 
                    className="w-full h-auto"
                    loading="lazy"
                    decoding="async"
                  />
                </div>
                <div className="absolute -top-6 -right-6 p-6 rounded-2xl bg-background shadow-xl border border-border animate-bounce-slow">
                  <div className="flex items-center gap-3">
                    <div className="w-10 h-10 rounded-full bg-success/20 flex items-center justify-center">
                      <TrendingUp className="w-5 h-5 text-success" />
                    </div>
                    <div>
                      <div className="text-xs text-muted-foreground font-bold uppercase">Daily Growth</div>
                      <div className="text-lg font-bold">+18.4%</div>
                    </div>
                  </div>
                </div>
              </div>
            </div>
          </div>
        </section>

        {/* Business Insights */}
        <section className="py-24 bg-background">
          <div className="container mx-auto px-4">
            <div className="max-w-3xl mx-auto text-center mb-16">
              <h2 className="text-3xl sm:text-4xl font-bold mb-6">Data you'll actually use</h2>
              <p className="text-lg text-muted-foreground">A partner should feel the value within the first week. These are the exact signals owners care about.</p>
            </div>

            <div className="grid sm:grid-cols-2 lg:grid-cols-4 gap-6">
              {insights.map((item, i) => (
                <div key={item.title} className="p-6 rounded-2xl border border-border bg-muted/20 hover:bg-muted/40 transition-colors">
                  <div className="w-8 h-8 rounded-full bg-primary text-primary-foreground flex items-center justify-center font-bold mb-4">{i + 1}</div>
                  <h3 className="font-bold mb-2">{item.title}</h3>
                  <p className="text-sm text-muted-foreground">{item.desc}</p>
                </div>
              ))}
            </div>

            <div className="mt-12 text-center">
              <Button variant="outline" size="lg" onClick={handlePrimarySignup} className="h-12 px-8 font-bold">
                See Your Dashboard
              </Button>
            </div>
          </div>
        </section>

        {/* Digital Screens & Smart Menu */}
        <PartnerDigitalScreens />

        {/* Fudies Supply */}
        <PartnerSupply />

        {/* Outsourcing Marketplace */}

        <section id="outsourcing" className="py-24 bg-[#1a1a1a] text-white overflow-hidden relative">
          <div className="absolute top-0 right-0 w-1/2 h-full bg-primary/5 blur-[120px] rounded-full" />
          <div className="container mx-auto px-4 relative z-10">
            <div className="grid lg:grid-cols-2 gap-16 items-center">
              <div className="space-y-8">
                <div className="inline-flex items-center gap-2 px-3 py-1 rounded-full bg-primary/20 text-primary text-xs font-bold">
                  <Package className="w-4 h-4" /> Fudies Outsource Marketplace
                </div>
                <h2 className="text-4xl sm:text-5xl font-bold leading-tight">One network, every supplier you need</h2>
                <p className="text-xl text-white/60">Stop juggling dozens of contracts. Fudies connects you to vetted suppliers for food, packaging, insurance, printing, and more — all under one roof, one contract.</p>
                
                <div className="grid sm:grid-cols-2 gap-6">
                  {[
                    { title: "Food & Drink Suppliers", desc: "Wholesale ingredients, beverages, and consumables at competitive prices." },
                    { title: "Packaging & Equipment", desc: "Eco-friendly containers, bags, and kitchen essentials delivered." },
                    { title: "Insurance & Compliance", desc: "Restaurant insurance, food safety certificates, and legal support." },
                    { title: "Print & Marketing", desc: "Menus, flyers, banners, and branded materials from Tradeprint." }
                  ].map((item) => (
                    <div key={item.title} className="flex gap-4">
                      <div className="mt-1"><CheckCircle className="w-5 h-5 text-primary" /></div>
                      <div>
                        <h4 className="font-bold mb-1">{item.title}</h4>
                        <p className="text-sm text-white/40">{item.desc}</p>
                      </div>
                    </div>
                  ))}
                </div>

                <div className="flex flex-wrap gap-4 pt-4">
                  {["Single Contract", "Vetted Suppliers", "Competitive Prices", "UK-Wide Delivery"].map(tag => (
                    <span key={tag} className="px-3 py-1 rounded-md bg-white/5 border border-white/10 text-xs font-medium text-white/60">{tag}</span>
                  ))}
                </div>

                <Button size="lg" onClick={() => navigate('/outsourcing')} className="h-14 px-10 text-lg font-bold">
                  Explore Outsource Marketplace
                </Button>
              </div>

              <div className="relative">
                <div className="p-8 rounded-[40px] bg-white/5 border border-white/10 backdrop-blur-xl">
                  <div className="flex items-center justify-between mb-8">
                    <h3 className="text-xl font-bold">Supplier Network</h3>
                    <span className="text-xs text-white/40">Trusted partners at your fingertips</span>
                  </div>
                  <div className="space-y-4">
                    {[
                      { name: "FreshDirect Wholesale", cat: "Food & Beverages", discount: "Save 15%", icon: Truck },
                      { name: "GreenPack Solutions", cat: "Eco Packaging", discount: "Save 20%", icon: Package },
                      { name: "CoverSure Insurance", cat: "Business Insurance", discount: "From £12/mo", icon: ShieldCheck },
                      { name: "Tradeprint UK", cat: "Print & Marketing", discount: "Save 25%", icon: FileText }
                    ].map((s) => (
                      <div key={s.name} className="p-4 rounded-2xl bg-white/5 border border-white/5 flex items-center justify-between hover:bg-white/10 transition-colors">
                        <div className="flex items-center gap-4">
                          <div className="w-10 h-10 rounded-xl bg-primary/20 flex items-center justify-center">
                            <s.icon className="w-5 h-5 text-primary" />
                          </div>
                          <div>
                            <div className="font-bold text-sm">{s.name}</div>
                            <div className="text-xs text-white/40">{s.cat}</div>
                          </div>
                        </div>
                        <div className="text-xs font-bold text-primary">{s.discount}</div>
                      </div>
                    ))}
                  </div>
                  <div className="mt-8 p-4 rounded-2xl bg-primary/10 border border-primary/20 text-center">
                    <p className="text-sm font-bold text-primary">One Contract ✨</p>
                  </div>
                </div>
              </div>
            </div>
          </div>
        </section>

        {/* Gift Cards Section */}
        <section id="gift-cards" className="py-24 bg-background overflow-hidden">
          <div className="container mx-auto px-4">
            <div className="grid lg:grid-cols-2 gap-16 items-center">
              <div className="order-2 lg:order-1 relative">
                <div className="grid grid-cols-2 gap-4">
                  <div className="space-y-4">
                    <img src={giftCard100} alt="Gift Card £100" className="rounded-2xl shadow-xl rotate-[-5deg] hover:rotate-0 transition-transform duration-500" />
                    <img src={giftCard50} alt="Gift Card £50" className="rounded-2xl shadow-xl rotate-[3deg] hover:rotate-0 transition-transform duration-500" />
                  </div>
                  <div className="space-y-4 pt-8">
                    <img src={giftCard30} alt="Gift Card £30" className="rounded-2xl shadow-xl rotate-[5deg] hover:rotate-0 transition-transform duration-500" />
                    <img src={giftCard20} alt="Gift Card £20" className="rounded-2xl shadow-xl rotate-[-3deg] hover:rotate-0 transition-transform duration-500" />
                  </div>
                </div>
                <div className="absolute -bottom-10 -left-10 p-8 rounded-3xl bg-background shadow-2xl border border-border max-w-[280px]">
                  <div className="flex items-center gap-4 mb-4">
                    <div className="w-12 h-12 rounded-full bg-accent/10 flex items-center justify-center">
                      <Gift className="w-6 h-6 text-accent" />
                    </div>
                    <h4 className="font-bold">Bulk Gift Cards</h4>
                  </div>
                  <p className="text-xs text-muted-foreground mb-4">Drive revenue with corporate & individual sales</p>
                  <div className="space-y-2">
                    <div className="flex justify-between text-xs"><span>x50 cards = £1,000</span></div>
                    <div className="flex justify-between text-xs"><span>x25 cards = £750</span></div>
                    <div className="flex justify-between text-xs"><span>x20 cards = £1,000</span></div>
                    <div className="flex justify-between text-xs"><span>x10 cards = £1,000</span></div>
                    <div className="pt-2 border-t border-border flex justify-between font-bold text-sm">
                      <span>Total Revenue Potential</span>
                      <span className="text-accent">£3,750+</span>
                    </div>
                    <div className="text-[10px] text-center text-muted-foreground mt-2 italic">from a single bulk order</div>
                  </div>
                  <div className="mt-4 py-2 rounded-xl bg-accent/10 text-accent text-center text-xs font-bold">Instant Revenue 💰</div>
                </div>
              </div>

              <div className="order-1 lg:order-2 space-y-8">
                <div className="inline-flex items-center gap-2 px-3 py-1 rounded-full bg-accent/10 text-accent text-xs font-bold">
                  <Gift className="w-4 h-4" /> Fudies Gift Cards
                </div>
                <h2 className="text-4xl sm:text-5xl font-bold leading-tight">Boost sales with gift cards</h2>
                <p className="text-xl text-muted-foreground">Sell digital gift cards to individuals and corporate clients. Perfect for employee rewards, festive promotions, and customer loyalty — all processed instantly through your Fudies dashboard.</p>
                
                <div className="space-y-6">
                  {[
                    { title: "Instant Digital Delivery", desc: "Gift cards are emailed instantly. No physical stock, no logistics headaches." },
                    { title: "Corporate Bulk Orders", desc: "Companies order 50–500 cards at once for employee meals, client gifts, and team treats." },
                    { title: "Customer Loyalty Driver", desc: "Gift card recipients become new customers. Every card is a future order." },
                    { title: "Upfront Revenue", desc: "Get paid today for orders that happen later. Improve cash flow instantly." }
                  ].map((item) => (
                    <div key={item.title} className="flex gap-4">
                      <div className="mt-1"><CheckCircle className="w-5 h-5 text-accent" /></div>
                      <div>
                        <h4 className="font-bold mb-1">{item.title}</h4>
                        <p className="text-sm text-muted-foreground">{item.desc}</p>
                      </div>
                    </div>
                  ))}
                </div>

                <div className="flex flex-col sm:flex-row gap-4 pt-4">
                  <Button size="lg" onClick={() => navigate('/partner-auth')} className="h-14 px-8 text-lg font-bold bg-accent hover:bg-accent/90">
                    Start Selling Gift Cards
                  </Button>
                  <Button variant="outline" size="lg" onClick={() => navigate('/gift-cards')} className="h-14 px-8 text-lg font-bold">
                    View Gift Cards Page
                  </Button>
                </div>
              </div>
            </div>
          </div>
        </section>

        {/* How It Works */}
        <section id="how-it-works" className="py-24 bg-muted/30">
          <div className="container mx-auto px-4">
            <div className="text-center max-w-3xl mx-auto mb-16">
              <h2 className="text-3xl sm:text-4xl font-bold mb-6">Live in 4 simple steps</h2>
              <p className="text-lg text-muted-foreground">Get up and running — from sign-up to first order.</p>
            </div>

            <div className="grid sm:grid-cols-2 lg:grid-cols-4 gap-8">
              {[
                { step: "01", title: "Create Account", desc: "Owner signs up and verifies shop details." },
                { step: "02", title: "Upload Menu", desc: "Fast setup with AI import or manual entry." },
                { step: "03", title: "Go Live", desc: "Start simple; scale with data." },
                { step: "04", title: "Manage & Grow", desc: "Edit products, pricing, offers, reports." }
              ].map((item) => (
                <div key={item.step} className="relative group">
                  <div className="text-8xl font-black text-primary/5 absolute -top-10 -left-4 group-hover:text-primary/10 transition-colors">{item.step}</div>
                  <div className="relative z-10 pt-8">
                    <div className="text-xs font-bold text-primary uppercase tracking-widest mb-2">Step {item.step}</div>
                    <h3 className="text-xl font-bold mb-3">{item.title}</h3>
                    <p className="text-muted-foreground text-sm leading-relaxed">{item.desc}</p>
                  </div>
                </div>
              ))}
            </div>
          </div>
        </section>

        {/* Stats Section */}
        <section className="py-20 bg-primary text-primary-foreground">
          <div className="container mx-auto px-4">
            <div className="grid grid-cols-2 lg:grid-cols-4 gap-8 text-center">
              {[
                { label: "Active Partners", value: "500+" },
                { label: "Monthly Orders", value: "50K+" },
                { label: "Partner Rating", value: "4.9★" },
                { label: "Paid to Partners", value: "£2M+" }
              ].map((stat) => (
                <div key={stat.label}>
                  <div className="text-4xl sm:text-5xl font-black mb-2">{stat.value}</div>
                  <div className="text-sm font-bold uppercase tracking-widest opacity-60">{stat.label}</div>
                </div>
              ))}
            </div>
          </div>
        </section>

        {/* FAQ Section */}
        <section id="faq" className="py-24 bg-background">
          <div className="container mx-auto px-4 max-w-4xl">
            <div className="text-center mb-16">
              <h2 className="text-3xl sm:text-4xl font-bold mb-6">Frequently Asked Questions</h2>
            </div>
            <div className="space-y-6">
              {faqs.map((faq) => (
                <div key={faq.q} className="p-8 rounded-2xl bg-muted/30 border border-border">
                  <h3 className="text-lg font-bold mb-3">{faq.q}</h3>
                  <p className="text-muted-foreground">{faq.a}</p>
                </div>
              ))}
            </div>
          </div>
        </section>

        {/* Final CTA */}
        <section className="py-24 bg-background relative overflow-hidden">
          <div className="absolute inset-0 bg-primary/5" />
          <div className="container mx-auto px-4 relative z-10">
            <div className="max-w-4xl mx-auto p-12 sm:p-20 rounded-[40px] bg-primary text-primary-foreground text-center shadow-2xl shadow-primary/20">
              <h2 className="text-3xl sm:text-5xl font-bold mb-8">Ready to grow your business?</h2>
              <p className="text-xl opacity-80 mb-12 max-w-2xl mx-auto">Join Fudies today — it's free to start, and you can cancel anytime. No contracts, no risk.</p>
              <div className="flex flex-col sm:flex-row gap-4 justify-center">
                <Button size="lg" onClick={handlePrimarySignup} className="h-16 px-10 text-xl font-bold bg-background text-primary hover:bg-background/90">
                  Start as a Partner
                </Button>
                <Button variant="outline" size="lg" onClick={handleDownloadApp} className="h-16 px-10 text-xl font-bold border-background/20 bg-background/10 hover:bg-background/20">
                  Download App
                </Button>
              </div>
              <div className="mt-12 flex flex-wrap justify-center gap-8 text-sm font-bold uppercase tracking-widest opacity-60">
                <span className="flex items-center gap-2"><Check className="w-4 h-4" /> No setup fees</span>
                <span className="flex items-center gap-2"><Check className="w-4 h-4" /> Cancel anytime</span>
                <span className="flex items-center gap-2"><Check className="w-4 h-4" /> Weekly payouts</span>
              </div>
            </div>
          </div>
        </section>

        {/* Footer */}
        <footer className="py-12 border-t border-border bg-muted/20">
          <div className="container mx-auto px-4">
            <div className="flex flex-col md:flex-row justify-between items-center gap-8">
              <div className="flex items-center gap-2">
                <div className="w-8 h-8 rounded-lg gradient-primary flex items-center justify-center text-primary-foreground font-bold">F</div>
                <span className="font-bold text-xl">Fudies <span className="text-primary">Partner</span></span>
              </div>
              <div className="flex flex-wrap justify-center gap-8 text-sm font-medium text-muted-foreground">
                <a href="#features" className="hover:text-primary transition-colors">Features</a>
                <a href="#pricing" className="hover:text-primary transition-colors">Pricing</a>
                <button onClick={() => navigate('/partner-auth')} className="hover:text-primary transition-colors">Dashboard</button>
                <Link to="/partner-privacy" className="hover:text-primary transition-colors">Privacy</Link>
                <Link to="/partner-terms" className="hover:text-primary transition-colors">Terms</Link>
              </div>
              <div className="text-sm text-muted-foreground">
                © {new Date().getFullYear()} Fudies Limited. All rights reserved.
              </div>
            </div>
          </div>
        </footer>

        <PartnerInstallModal 
          open={showInstallModal} 
          onOpenChange={(open) => setShowInstallModal(open)}
          isIOS={/iphone|ipad|ipod/i.test(navigator.userAgent)}
          onContinueWeb={handleContinueWeb}
        />
      </div>
    </>
  );
};

export default Partner;