import { Link } from "react-router-dom";
import { ArrowRight, Upload, Code, Rocket, FileText, Globe, Clock, CheckCircle, MessageSquare, Package, Users, BarChart3, Tag, Bot, Mic, Camera, ShoppingBag, Settings } from "lucide-react";
import { Button } from "@/components/ui/button";
import Navbar from "@/components/Navbar";
import Footer from "@/components/Footer";

// ─── Chat Widget Mockup ─────────────────────────────────────────────────────
const ChatWidgetMockup = () => (
  <div className="relative">
    {/* Blurred catalog grid behind */}
    <div className="absolute inset-0 -inset-x-8 -inset-y-4 grid grid-cols-3 gap-3 opacity-20 blur-sm pointer-events-none">
      {Array.from({ length: 9 }).map((_, i) => (
        <div key={i} className="h-16 rounded-lg bg-muted border border-border" />
      ))}
    </div>

    {/* Chat widget */}
    <div className="relative rounded-2xl border border-border bg-card shadow-2xl shadow-background/80 overflow-hidden glow-teal animate-float">
      {/* Header */}
      <div className="bg-primary px-5 py-4 flex items-center gap-3">
        <div className="w-10 h-10 rounded-full bg-primary-foreground/20 flex items-center justify-center">
          <MessageSquare className="w-5 h-5 text-primary-foreground" />
        </div>
        <div>
          <div className="text-primary-foreground font-semibold text-base font-display">ChatSKU</div>
          <div className="text-primary-foreground/60 text-xs">AI Product Assistant</div>
        </div>
        <div className="ml-auto relative">
          <ShoppingBag className="w-5 h-5 text-primary-foreground" />
          <span className="absolute -top-2 -right-2 min-w-[18px] rounded-full bg-primary-foreground text-primary text-[10px] font-bold flex items-center justify-center leading-none px-1 py-0.5">10</span>
        </div>
      </div>

      {/* Chat body */}
      <div className="p-5 space-y-4 bg-background/60 min-h-[320px]">
        {/* User bubble */}
        <div className="flex justify-end">
          <div className="max-w-[85%] bg-primary/15 border border-primary/20 rounded-2xl rounded-br-md px-4 py-2.5">
            <p className="text-[15px] text-foreground leading-relaxed">Do you have 3/8" zinc-plated bolts, qty 500, net-30?</p>
          </div>
        </div>

        {/* Bot bubble */}
        <div className="flex gap-2 items-end">
          <div className="w-6 h-6 rounded-full bg-primary/20 flex items-center justify-center flex-shrink-0">
            <Bot className="w-3 h-3 text-primary" />
          </div>
          <div className="max-w-[85%] bg-card border border-border rounded-2xl rounded-bl-md px-4 py-2.5">
            <p className="text-[15px] text-foreground leading-relaxed">Yes — SKU ZB-375-500 is in stock. Lead time 4 days. Want me to start a quote?</p>
          </div>
        </div>

        {/* Typing indicator */}
        <div className="flex gap-2 items-end">
          <div className="w-6 h-6 rounded-full bg-primary/20 flex items-center justify-center flex-shrink-0">
            <Bot className="w-3 h-3 text-primary" />
          </div>
          <div className="bg-card border border-border rounded-2xl rounded-bl-md px-4 py-3 flex gap-1.5">
            <div className="w-1.5 h-1.5 rounded-full bg-muted-foreground typing-dot" />
            <div className="w-1.5 h-1.5 rounded-full bg-muted-foreground typing-dot" />
            <div className="w-1.5 h-1.5 rounded-full bg-muted-foreground typing-dot" />
          </div>
        </div>
      </div>

      {/* Input bar */}
      <div className="px-5 py-4 border-t border-border bg-card flex items-center gap-3">
        <div className="flex-1 bg-muted rounded-xl px-4 py-2.5 text-sm text-muted-foreground">Ask about any product…</div>
        <Mic className="w-5 h-5 text-muted-foreground" />
        <Camera className="w-5 h-5 text-muted-foreground" />
        <div className="w-9 h-9 rounded-lg bg-primary flex items-center justify-center">
          <ArrowRight className="w-4 h-4 text-primary-foreground" />
        </div>
      </div>
    </div>

    <div className="absolute -inset-6 bg-primary/5 rounded-3xl blur-2xl -z-10" />
  </div>
);

// ─── Ticker Banner ──────────────────────────────────────────────────────────
const TickerBanner = () => (
  <div className="border-t border-border bg-card/50 overflow-hidden py-3">
    <Link to="/demo" className="block">
      <div className="flex animate-marquee whitespace-nowrap">
        {Array.from({ length: 4 }).map((_, i) => (
          <span key={i} className="mx-8 text-sm text-muted-foreground hover:text-foreground transition-colors">
            Buyers who can't find answers after hours don't wait. They move on.{" "}
            <span className="text-primary font-medium">→ See how ChatSKU captures them.</span>
            <span className="mx-8 text-border">|</span>
          </span>
        ))}
      </div>
    </Link>
  </div>
);

// ─── Problem Card ──────────────────────────────────────────────────────────────
const ProblemCard = ({ icon: Icon, text }: { icon: React.ComponentType<{ className?: string }>, text: string }) => (
  <div className="flex gap-4 items-start p-5 rounded-xl border border-border bg-card hover:border-primary/30 transition-colors">
    <div className="w-10 h-10 rounded-lg bg-destructive/10 flex items-center justify-center flex-shrink-0">
      <Icon className="w-5 h-5 text-destructive" />
    </div>
    <p className="text-muted-foreground leading-relaxed">{text}</p>
  </div>
);

// ─── Step Card ────────────────────────────────────────────────────────────────
const StepCard = ({ step, icon: Icon, title, desc }: { step: string; icon: React.ComponentType<{ className?: string }>; title: string; desc: string }) => (
  <div className="flex flex-col items-center text-center p-6 rounded-2xl border border-border bg-card hover:border-primary/40 hover:glow-teal-sm transition-all duration-300">
    <div className="w-14 h-14 rounded-2xl bg-primary/10 border border-primary/20 flex items-center justify-center mb-4">
      <Icon className="w-7 h-7 text-primary" />
    </div>
    <div className="text-xs font-bold text-primary mb-1 tracking-widest uppercase">Step {step}</div>
    <h3 className="font-display font-bold text-xl text-foreground mb-2">{title}</h3>
    <p className="text-muted-foreground text-sm leading-relaxed">{desc}</p>
  </div>
);

// ─── Trust Card ───────────────────────────────────────────────────────────────
const TrustCard = ({ icon: Icon, title, desc }: { icon: React.ComponentType<{ className?: string }>; title: string; desc: string }) => (
  <div className="flex gap-4 items-start p-6 rounded-2xl border border-border bg-card hover:border-primary/30 transition-colors">
    <div className="w-10 h-10 rounded-xl bg-primary/10 flex items-center justify-center flex-shrink-0">
      <Icon className="w-5 h-5 text-primary" />
    </div>
    <div>
      <h3 className="font-display font-semibold text-foreground mb-1">{title}</h3>
      <p className="text-sm text-muted-foreground leading-relaxed">{desc}</p>
    </div>
  </div>
);

// ─── Main Page ────────────────────────────────────────────────────────────────
const Index = () => {
  return (
    <div className="min-h-screen bg-background">
      <Navbar />

      {/* ── HERO ── */}
      <section className="relative min-h-screen flex flex-col justify-center pt-16 overflow-hidden">
        <div className="absolute inset-0 bg-grid opacity-30" />
        <div className="absolute inset-0 bg-radial-teal" />

        <div className="relative flex-1 flex items-center">
          <div className="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8 py-20 w-full">
            <div className="grid lg:grid-cols-2 gap-12 lg:gap-16 items-center">
              {/* Left column — Copy */}
              <div className="flex flex-col text-left space-y-8">
                <div>
                  <h1 className="font-display font-bold text-4xl sm:text-5xl lg:text-[56px] text-foreground leading-[1.1] mb-6">
                    <span className="block animate-fade-up" style={{ animationDelay: "0s" }}>
                      Your catalog is losing buyers you'll never know about.
                    </span>
                    <span className="block text-gradient-teal animate-fade-up" style={{ animationDelay: "0.15s" }}>
                      ChatSKU answers them. Day one.
                    </span>
                  </h1>
                  <p
                    className="text-lg text-muted-foreground leading-relaxed max-w-[520px] animate-fade-up opacity-0"
                    style={{ animationDelay: "0.3s" }}
                  >
                    Built for manufacturers, distributors, and wholesalers. AI-powered chat that lets buyers search your catalog, get spec answers, and submit quotes 24/7 — without rebuilding your site.
                  </p>
                </div>

                {/* Stats */}
                <div
                  className="flex items-center gap-6 animate-fade-up opacity-0"
                  style={{ animationDelay: "0.45s" }}
                >
                  {[
                    { value: "< 1 Day", label: "Average setup time" },
                    { value: "24/7", label: "Buyer response, zero staffing" },
                    { value: "1 Line", label: "Of code to deploy" },
                  ].map((stat, i) => (
                    <div key={stat.label} className="flex items-center gap-6">
                      {i > 0 && <div className="w-px h-10 bg-border" />}
                      <div>
                        <div className="text-xl font-display font-bold text-primary">{stat.value}</div>
                        <div className="text-xs text-muted-foreground">{stat.label}</div>
                      </div>
                    </div>
                  ))}
                </div>

                {/* CTAs */}
                <div className="animate-fade-up opacity-0" style={{ animationDelay: "0.5s" }}>
                  <div className="flex flex-wrap gap-3">
                    <Button
                      asChild
                      size="lg"
                      className="bg-primary text-primary-foreground hover:bg-teal-glow font-semibold px-7 glow-teal-sm animate-pulse-glow"
                    >
                      <Link to="/demo">Try Live Demo <ArrowRight className="w-4 h-4" /></Link>
                    </Button>
                    <Button
                      asChild
                      size="lg"
                      variant="outline"
                      className="border-border hover:border-primary/50 hover:bg-primary/5 font-semibold px-7"
                    >
                      <Link to="/signup">Start Free — No credit card</Link>
                    </Button>
                  </div>
                  <p className="mt-3 text-sm text-muted-foreground italic">
                    Bring your existing catalog (and customers). We'll handle the rest, fast.
                  </p>
                </div>
              </div>

              {/* Right column — Chat Widget */}
              <Link
                to="/demo"
                className="relative hidden lg:flex justify-center animate-slide-in-right opacity-0 cursor-pointer"
                style={{ animationDelay: "0.6s", animationFillMode: "forwards" }}
              >
                <div className="w-full max-w-md">
                  <ChatWidgetMockup />
                </div>
              </Link>
            </div>
          </div>
        </div>

        {/* Ticker */}
        <TickerBanner />
      </section>

      {/* ── PROBLEM ── */}
      <section className="py-24 border-t border-border">
        <div className="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8">
          <div className="max-w-2xl mb-14">
            <div className="inline-flex items-center gap-2 px-3 py-1 rounded-full border border-destructive/30 bg-destructive/5 mb-4">
              <span className="text-xs font-semibold text-destructive">The Problem</span>
            </div>
            <h2 className="font-display font-bold text-4xl sm:text-5xl text-foreground leading-tight mb-4">
              Your catalog shouldn't be a dead end.
            </h2>
            <p className="text-muted-foreground text-lg">B2B buying is broken. Here's what your customers are dealing with right now.</p>
          </div>
          <div className="grid sm:grid-cols-1 md:grid-cols-3 gap-4">
            <ProblemCard
              icon={FileText}
              text="PDF catalogs get downloaded and forgotten. No engagement, no data, no conversions."
            />
            <ProblemCard
              icon={Globe}
              text="Product pages with no cart, no chat, no way to buy. Just a phone number and a prayer."
            />
            <ProblemCard
              icon={Clock}
              text="Every quote starts with an email chain, a spreadsheet, and a 48-hour wait."
            />
          </div>
        </div>
      </section>

      {/* ── SOLUTION ── */}
      <section className="py-24 border-t border-border bg-secondary/30">
        <div className="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8">
          <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 border border-primary/30 bg-primary/10 mb-4">
              <span className="text-xs font-semibold text-primary">The Solution</span>
            </div>
            <h2 className="font-display font-bold text-4xl sm:text-5xl text-foreground leading-tight mb-4">
              What if your catalog could{" "}
              <span className="text-gradient-teal">talk back?</span>
            </h2>
            <p className="text-muted-foreground text-lg">
              ChatSKU transforms your static catalog into a living, intelligent buying experience.
            </p>
          </div>
          <div className="grid md:grid-cols-2 gap-12 items-center">
            {/* Before */}
            <div className="space-y-3">
              <div className="text-sm font-semibold text-destructive uppercase tracking-widest mb-4">Before ChatSKU</div>
              {[
                "Static PDF catalog, downloaded once",
                "No product search or filtering",
                "Quote requests via email, 2-day response",
                "No visibility into buyer behavior",
              ].map((item) => (
                <div key={item} className="flex items-center gap-3 p-3 rounded-lg bg-destructive/5 border border-destructive/10">
                  <div className="w-1.5 h-1.5 rounded-full bg-destructive flex-shrink-0" />
                  <span className="text-sm text-muted-foreground">{item}</span>
                </div>
              ))}
            </div>
            {/* After */}
            <div className="space-y-3">
              <div className="text-sm font-semibold text-primary uppercase tracking-widest mb-4">After ChatSKU</div>
              {[
                "AI chat knows every SKU, spec, and variant",
                "Customers search and ask in natural language",
                "Quotes built in conversation, ready instantly",
                "Full analytics on buyer intent and behavior",
              ].map((item) => (
                <div key={item} className="flex items-center gap-3 p-3 rounded-lg bg-primary/5 border border-primary/10">
                  <CheckCircle className="w-4 h-4 text-primary flex-shrink-0" />
                  <span className="text-sm text-foreground">{item}</span>
                </div>
              ))}
            </div>
          </div>
        </div>
      </section>

      {/* ── HOW IT WORKS ── */}
      <section className="py-24 border-t border-border">
        <div className="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8">
          <div className="text-center max-w-2xl mx-auto mb-16">
            <div className="inline-flex items-center gap-2 px-3 py-1 rounded-full border border-primary/30 bg-primary/10 mb-4">
              <span className="text-xs font-semibold text-primary">How It Works</span>
            </div>
            <h2 className="font-display font-bold text-4xl sm:text-5xl text-foreground leading-tight mb-4">
              3 Steps to Live.
            </h2>
            <p className="text-muted-foreground text-lg">Most teams go live the same day they sign up.</p>
          </div>
          <div className="grid md:grid-cols-3 gap-6">
            <StepCard
              step="1"
              icon={Upload}
              title="Upload Your Catalog"
              desc="Connect your product database (CSV, Shopify, ERP, etc.)"
            />
            <StepCard
              step="2"
              icon={Settings}
              title="Configure ChatSKU"
              desc="Set response tone, integrations, and rules (no code required)"
            />
            <StepCard
              step="3"
              icon={Rocket}
              title="Go Live"
              desc="Deploy the chat widget to your site immediately"
            />
          </div>
          <div className="mt-10 text-center flex flex-col items-center gap-4">
            <div className="inline-block font-mono text-sm text-primary bg-primary/10 border border-primary/20 rounded-lg px-5 py-3">
              {"<script src=\"https://cdn.chatsku.com/widget.js\" data-key=\"YOUR_KEY\"></script>"}
            </div>
            <Button asChild size="sm" className="bg-primary text-primary-foreground hover:bg-teal-glow font-semibold glow-teal-sm">
              <Link to="/signup">Get My Key <ArrowRight className="w-3.5 h-3.5" /></Link>
            </Button>
          </div>
        </div>
      </section>

      {/* ── TRUST ── */}
      <section className="py-24 border-t border-border bg-secondary/30">
        <div className="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8">
          <div className="text-center max-w-2xl mx-auto mb-16">
            <h2 className="font-display font-bold text-4xl sm:text-5xl text-foreground leading-tight mb-4">
              Built for the way B2B actually works.
            </h2>
            <p className="text-muted-foreground text-lg">We built ChatSKU from the ground up for complex B2B buying cycles.</p>
          </div>
          <div className="grid sm:grid-cols-2 gap-5 max-w-4xl mx-auto">
            <TrustCard
              icon={Code}
              title="No developer needed"
              desc="One line of code, works on any website. If you can paste text, you can deploy ChatSKU."
            />
            <TrustCard
              icon={Rocket}
              title="Live in hours, not months"
              desc="Most stores launch the same day they sign up. No lengthy onboarding or setup calls required."
            />
            <TrustCard
              icon={MessageSquare}
              title="Not just another chatbot"
              desc="It knows your entire catalog — every SKU, every variant, every spec. It answers like your best sales rep."
            />
            <TrustCard
              icon={Users}
              title="Built for B2B complexity"
              desc="Customer groups, tiered pricing, RFQ workflows, and quote management. Commerce the way B2B actually works."
            />
          </div>
        </div>
      </section>

      {/* ── CUSTOMER GROUPS & PRICING ── */}
      <section className="py-24 border-t border-border">
        <div className="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8">
          <div className="grid lg:grid-cols-2 gap-16 items-center">
            {/* Left — Copy */}
            <div>
              <div className="inline-flex items-center gap-2 px-3 py-1 rounded-full border border-primary/30 bg-primary/10 mb-4">
                <Tag className="w-3 h-3 text-primary" />
                <span className="text-xs font-semibold text-primary">Power Feature</span>
              </div>
              <h2 className="font-display font-bold text-4xl sm:text-5xl text-foreground leading-tight mb-4">
                Your customers. Your pricing.{" "}
                <span className="text-gradient-teal">Your rules.</span>
              </h2>
              <p className="text-muted-foreground text-lg mb-8">
                Import your existing customer list, organize them into groups, and set custom pricing — all from your dashboard.
              </p>
              <div className="space-y-4">
                {[
                  "Import your customer list via CSV — name, email, phone",
                  "Organize buyers into custom groups",
                  "Set group-specific pricing and discounts per product",
                ].map((item) => (
                  <div key={item} className="flex items-start gap-3">
                    <CheckCircle className="w-5 h-5 text-primary flex-shrink-0 mt-0.5" />
                    <span className="text-foreground">{item}</span>
                  </div>
                ))}
              </div>
            </div>

            {/* Right — Mockup */}
            <div className="flex justify-center">
              <div className="relative w-full max-w-sm animate-float">
                <div className="rounded-2xl border border-border bg-card shadow-2xl shadow-background overflow-hidden glow-teal">
                  {/* Header */}
                  <div className="bg-primary px-4 py-3 flex items-center gap-3">
                    <div className="w-8 h-8 rounded-full bg-primary-foreground/20 flex items-center justify-center">
                      <Users className="w-4 h-4 text-primary-foreground" />
                    </div>
                    <div className="text-primary-foreground font-semibold text-sm font-display">Customer Groups</div>
                  </div>
                  {/* Groups */}
                  <div className="p-4 space-y-3 bg-background/50">
                    {[
                      { name: "Gold Tier", discount: "15% off", members: 24 },
                      { name: "Wholesale", discount: "25% off", members: 8 },
                      { name: "VIP Partners", discount: "30% off", members: 5 },
                    ].map((g) => (
                      <div key={g.name} className="flex items-center justify-between p-3 rounded-xl border border-border bg-card">
                        <div className="flex items-center gap-3">
                          <div className="w-8 h-8 rounded-lg bg-primary/10 flex items-center justify-center">
                            <Users className="w-4 h-4 text-primary" />
                          </div>
                          <div>
                            <div className="text-sm font-semibold text-foreground">{g.name}</div>
                            <div className="text-xs text-muted-foreground">{g.members} customers</div>
                          </div>
                        </div>
                        <span className="text-xs font-semibold text-primary bg-primary/10 px-2 py-1 rounded-full">{g.discount}</span>
                      </div>
                    ))}
                  </div>
                  {/* Import button */}
                  <div className="px-4 pb-4 bg-background/50">
                    <div className="flex items-center justify-center gap-2 w-full text-xs bg-primary text-primary-foreground rounded-xl py-2.5 font-medium">
                      <Upload className="w-3.5 h-3.5" />
                      Import Customers via CSV
                    </div>
                  </div>
                </div>
                <div className="absolute -inset-4 bg-primary/5 rounded-3xl blur-2xl -z-10" />
              </div>
            </div>
          </div>
        </div>
      </section>

      {/* ── FINAL CTA ── */}
      <section className="py-24 border-t border-border relative overflow-hidden">
        <div className="absolute inset-0 bg-radial-teal opacity-50" />
        <div className="relative max-w-3xl mx-auto text-center px-4">
          <h2 className="font-display font-bold text-4xl sm:text-5xl text-foreground leading-tight mb-4">
            Ready to make your catalog{" "}
            <span className="text-gradient-teal">talk back?</span>
          </h2>
          <p className="text-muted-foreground text-lg mb-8">
            Start free. No credit card required. Most teams go live in under 4 hours.
          </p>
          <div className="flex flex-wrap justify-center gap-3">
            <Button asChild size="lg" className="bg-primary text-primary-foreground hover:bg-teal-glow font-semibold px-8 glow-teal">
              <Link to="/signup">Start Free — No Card Needed <ArrowRight className="w-4 h-4" /></Link>
            </Button>
            <Button asChild size="lg" variant="outline" className="border-border hover:border-primary/50 font-semibold px-8">
              <Link to="/demo">See Live Demo</Link>
            </Button>
          </div>
        </div>
      </section>

      <Footer />
    </div>
  );
};

export default Index;
