import { Link } from "react-router-dom";
import { Check, ArrowRight, Zap, MessageSquare, Package, Users, BarChart2, Shield, Headphones, Globe, FileText } from "lucide-react";
import { Button } from "@/components/ui/button";
import { Accordion, AccordionContent, AccordionItem, AccordionTrigger } from "@/components/ui/accordion";
import Navbar from "@/components/Navbar";
import Footer from "@/components/Footer";

// ─── Data ─────────────────────────────────────────────────────────────────────
const FEATURES = [
  {
    icon: Package,
    title: "Flexible catalog import",
    description: "Upload via CSV, PDF, or add products manually. AI extracts product data from PDFs automatically.",
  },
  {
    icon: MessageSquare,
    title: "AI chat — trained on your catalog",
    description: "Understands SKUs, variants, specs, and natural language queries. Not a generic chatbot.",
  },
  {
    icon: FileText,
    title: "Quote management dashboard",
    description: "Every quote lands in your dashboard. Review, price, add notes, and send back to your customer.",
  },
  {
    icon: Users,
    title: "Customer groups & tiered pricing",
    description: "Create customer groups and assign percentage or fixed discounts that apply automatically.",
  },
  {
    icon: BarChart2,
    title: "Analytics & reporting",
    description: "See what customers are searching for, quote conversion rates, and catalog engagement data.",
  },
  {
    icon: Globe,
    title: "One line of code embed",
    description: "Works on any website — WordPress, Shopify, Webflow, or custom. No developer needed.",
  },
  {
    icon: Headphones,
    title: "White glove onboarding",
    description: "Our team handles full setup — catalog import, widget config, and embedding on your site.",
  },
  {
    icon: Shield,
    title: "Enterprise security",
    description: "Data encrypted in transit and at rest. GDPR compliant. hCaptcha spam protection on the widget.",
  },
];

const FAQS = [
  {
    q: "How does pricing work?",
    a: "Every plan is custom. We tailor pricing based on your catalog size, feature needs, and team requirements. Reach out to us and we'll put together a plan that fits.",
  },
  {
    q: "Is there a free trial?",
    a: "Yes. We offer a free trial so you can experience ChatSKU with your own catalog before committing.",
  },
  {
    q: "Do you charge per user?",
    a: "No. We work with you to define the right seat count for your team — no surprise per-seat fees.",
  },
  {
    q: "What happens if my catalog grows?",
    a: "We'll work with you to adjust your plan as your needs evolve. Your widget stays live throughout any transition.",
  },
  {
    q: "Can I cancel anytime?",
    a: "Yes. No long-term contracts or cancellation fees.",
  },
  {
    q: "Do you offer annual billing?",
    a: "Yes — reach out to discuss annual billing options, which typically come with a discount.",
  },
];

// ─── Feature Card ─────────────────────────────────────────────────────────────
const FeatureCard = ({ feature }: { feature: typeof FEATURES[0] }) => {
  const Icon = feature.icon;
  return (
    <div className="rounded-xl border border-border bg-card p-5 flex gap-4">
      <div className="w-9 h-9 rounded-lg bg-primary/10 flex items-center justify-center flex-shrink-0 mt-0.5">
        <Icon className="w-4 h-4 text-primary" />
      </div>
      <div>
        <div className="font-semibold text-sm text-foreground mb-1">{feature.title}</div>
        <div className="text-xs text-muted-foreground leading-relaxed">{feature.description}</div>
      </div>
    </div>
  );
};

// ─── Page ─────────────────────────────────────────────────────────────────────
const Pricing = () => (
  <div className="min-h-screen bg-background">
    <Navbar />
    <main className="pt-24">
      {/* Header */}
      <section className="max-w-3xl mx-auto px-4 sm:px-6 lg:px-8 text-center mb-14">
        <div className="inline-flex items-center gap-2 px-3 py-1 rounded-full border border-primary/30 bg-primary/10 mb-4">
          <Zap className="w-3 h-3 text-primary" />
          <span className="text-xs font-semibold text-primary">Pricing</span>
        </div>
        <h1 className="font-display font-bold text-4xl sm:text-5xl text-foreground mb-4">
          Simple pricing for B2B commerce
        </h1>
        <p className="text-muted-foreground text-lg">
          Every plan is custom — built around your catalog size, team, and needs.
        </p>
      </section>

      {/* Custom Pricing CTA card */}
      <section className="max-w-2xl mx-auto px-4 sm:px-6 lg:px-8 mb-16">
        <div className="rounded-2xl border border-primary bg-primary/5 glow-teal p-8 text-center shadow-xl">
          <div className="font-display font-bold text-3xl text-foreground mb-2">Custom Pricing</div>
          <p className="text-muted-foreground mb-2">
            We don't do one-size-fits-all. Tell us about your catalog and team — we'll build a plan that works.
          </p>
          <p className="text-sm text-primary font-semibold mb-7">Free trial included. No contracts. Cancel anytime.</p>
          <div className="flex flex-col sm:flex-row gap-3 justify-center">
            <Button
              asChild
              size="lg"
              className="bg-primary text-primary-foreground hover:bg-primary/90 font-semibold glow-teal-sm px-8"
            >
              <Link to="/signup">
                Start Free Trial <ArrowRight className="w-4 h-4" />
              </Link>
            </Button>
            <Button asChild size="lg" variant="outline" className="font-semibold px-8">
              <a href="mailto:hello@chatsku.com">Talk to Sales</a>
            </Button>
          </div>
        </div>
      </section>

      {/* Features grid */}
      <section className="max-w-5xl mx-auto px-4 sm:px-6 lg:px-8 mb-20">
        <h2 className="font-display font-bold text-2xl text-foreground text-center mb-2">
          Everything you need to sell smarter
        </h2>
        <p className="text-muted-foreground text-center mb-8">All features included — we scope the plan to your size.</p>
        <div className="grid sm:grid-cols-2 lg:grid-cols-2 gap-4">
          {FEATURES.map((f) => (
            <FeatureCard key={f.title} feature={f} />
          ))}
        </div>
      </section>

      {/* Included in every plan */}
      <section className="max-w-3xl mx-auto px-4 sm:px-6 lg:px-8 mb-20">
        <div className="rounded-2xl border border-border bg-card p-8">
          <h2 className="font-display font-bold text-xl text-foreground mb-6 text-center">Included with every plan</h2>
          <div className="grid sm:grid-cols-2 gap-3">
            {[
              "White glove onboarding",
              "Direct access to support team",
              "AI trained on your catalog",
              "24/7 widget uptime",
              "GDPR compliant data handling",
              "hCaptcha spam protection",
              "CSV quote export",
              "Adjust your plan anytime",
            ].map((item) => (
              <div key={item} className="flex items-center gap-2.5 text-sm text-foreground">
                <Check className="w-4 h-4 text-primary flex-shrink-0" />
                {item}
              </div>
            ))}
          </div>
        </div>
      </section>

      {/* FAQ */}
      <section className="max-w-2xl mx-auto px-4 sm:px-6 lg:px-8 mb-20">
        <h2 className="font-display font-bold text-2xl text-foreground text-center mb-8">
          Frequently asked questions
        </h2>
        <Accordion type="single" collapsible className="space-y-2">
          {FAQS.map((faq, i) => (
            <AccordionItem
              key={i}
              value={`faq-${i}`}
              className="border border-border rounded-xl px-5 bg-card"
            >
              <AccordionTrigger className="text-sm font-semibold text-foreground hover:no-underline py-4">
                {faq.q}
              </AccordionTrigger>
              <AccordionContent className="text-sm text-muted-foreground leading-relaxed pb-4">
                {faq.a}
              </AccordionContent>
            </AccordionItem>
          ))}
        </Accordion>
        <p className="text-center text-sm text-muted-foreground mt-6">
          More questions?{" "}
          <Link to="/faq" className="text-primary hover:underline underline-offset-4">
            Visit the full FAQ →
          </Link>
        </p>
      </section>

      {/* Bottom CTA */}
      <section className="border-t border-border bg-secondary/30 py-16">
        <div className="max-w-2xl mx-auto px-4 text-center">
          <h2 className="font-display font-bold text-2xl sm:text-3xl text-foreground mb-3">
            Ready to see it in action?
          </h2>
          <p className="text-muted-foreground mb-6">Start your free trial — no credit card needed, no developer required.</p>
          <Button
            asChild
            size="lg"
            className="bg-primary text-primary-foreground hover:bg-primary/90 font-semibold glow-teal-sm px-8"
          >
            <Link to="/signup">
              Get Started Free <ArrowRight className="w-4 h-4" />
            </Link>
          </Button>
        </div>
      </section>
    </main>
    <Footer />
  </div>
);

export default Pricing;
