import { Link } from "react-router-dom";
import { Button } from "@/components/ui/button";
import { motion } from "framer-motion";
import { Shield, TrendingUp, AlertTriangle, ArrowRight, CheckCircle, ChevronDown, Calendar, Zap, Monitor, RefreshCw } from "lucide-react";
import heroDashboard from "@/assets/hero-dashboard.jpg";
import Layout from "@/components/layout/Layout";
import { useState } from "react";

const fadeUp = {
  hidden: { opacity: 0, y: 24 },
  visible: (i: number) => ({
    opacity: 1, y: 0,
    transition: { delay: i * 0.1, duration: 0.5, ease: [0.25, 0.46, 0.45, 0.94] as const },
  }),
};

const valueProps = [
  { icon: Calendar, title: "No Long-Term Contracts", desc: "Month-to-month flexibility" },
  { icon: Zap, title: "Live in 2 Weeks", desc: "Fast onboarding, no heavy integration" },
  { icon: Monitor, title: "Zero IT Overhead", desc: "Fully managed, no internal resources needed" },
  { icon: RefreshCw, title: "Daily Intelligence Updates", desc: "Fresh data every morning, not quarterly reports" },
];

const problems = [
  { icon: AlertTriangle, title: "Invisible Competitor Pricing", desc: "Your competitors change prices daily. You find out weeks later — or never." },
  { icon: TrendingUp, title: "Margin Erosion", desc: "Without market visibility, you're leaving money on the table on every quote." },
  { icon: Shield, title: "Supplier Disruptions", desc: "Lead-time spikes and supplier failures hit you without warning." },
];

const features = [
  {
    title: "Competitor Price Monitoring",
    desc: "Automated tracking of competitor catalogs and pricing across your entire SKU base. Know when they move — before your customers do.",
    points: ["Daily price change alerts", "Market position benchmarking", "Analyzed pricing trends with margin impact scoring"],
  },
  {
    title: "Catalog Intelligence",
    desc: "Full visibility into competitor product assortments, new listings, and discontinuations across your categories.",
    points: ["New product detection", "Category gap analysis with opportunity recommendations", "Assortment comparison"],
  },
  {
    title: "Supplier Risk Monitoring",
    desc: "Continuous monitoring of supplier lead times, fill rates, and financial health indicators to protect your supply chain.",
    points: ["Lead-time trend tracking", "Fill-rate degradation alerts", "Alternative supplier suggestions", "Root-cause analysis and mitigation recommendations"],
  },
];

const howItWorksSteps = [
  { title: "Define Your Landscape", desc: "Tell us your competitors, suppliers, and priority categories. That's all we need to start." },
  { title: "We Map the Data", desc: "Our team identifies and validates the right data sources across your competitive landscape." },
  { title: "Monitoring Goes Live", desc: "We build structured, automated feeds tailored to your SKU taxonomy and market." },
  { title: "Daily Data Refresh", desc: "Every morning, fresh pricing, catalog, and supplier data is analyzed and delivered to your dashboard with actionable insights." },
  { title: "Alerts & Reports Delivered", desc: "Your team gets analyzed trends, prioritized alerts, and structured reports — ready to act on." },
];

const verticals = [
  "Industrial Distributors",
  "Electrical Wholesalers",
  "Plumbing Supply Houses",
  "HVAC Distributors",
  "Lumber Yards",
  "Fastener Suppliers",
];

const faqs = [
  { q: "What data sources do you monitor?", a: "We track publicly available competitor catalogs, pricing pages, and distributor platforms across North America. Our crawlers refresh daily so you're always up to date." },
  { q: "How often is the data updated?", a: "Daily by default. If your business requires a different cadence, custom update frequencies are available." },
  { q: "How is this different from manual price-checking?", a: "Manual checks cover a handful of SKUs at best. VersaSphere monitors your entire catalog — thousands of SKUs — automatically, every day, and alerts you only when something meaningful changes." },
  { q: "Does this integrate with our ERP or BI tools?", a: "Yes. We provide structured exports compatible with most common ERP and BI systems out of the box. Custom API integrations can also be built upon request for an additional fee." },
  { q: "Do we need to share our pricing data?", a: "No. VersaSphere monitors the market around you — we never require access to your internal pricing or ERP data to deliver competitor intelligence." },
  { q: "Is this legal?", a: "Absolutely. We only monitor publicly available information and never access private or restricted systems." },
  { q: "How quickly can we get started?", a: "Most clients are fully onboarded within two weeks. We handle data integration and configuration so your team doesn't need to lift a finger." },
  { q: "What does the subscription include?", a: "Every plan includes the monitoring platform, daily alerts, interactive dashboards, quarterly reviews, and dedicated support — no hidden fees." },
];

const Index = () => {
  const [openFaq, setOpenFaq] = useState<number | null>(null);

  return (
    <Layout>
      {/* Hero */}
      <section className="relative overflow-hidden bg-grid-pattern">
        <div className="absolute inset-0 bg-gradient-to-b from-background via-background/95 to-background" />
        <div className="container relative mx-auto px-4 py-24 lg:px-8 lg:py-32">
          <div className="grid gap-12 lg:grid-cols-2 lg:gap-16 items-center">
            <motion.div initial="hidden" animate="visible" variants={fadeUp} custom={0}>
              <p className="mb-4 text-sm font-semibold uppercase tracking-widest text-primary">
                Data Intelligence for Industrial Distribution
              </p>
              <h1 className="font-display text-4xl font-bold leading-tight text-foreground lg:text-5xl xl:text-6xl">
                See the market.<br />
                <span className="text-gradient-copper">Protect your margins.</span>
              </h1>
              <p className="mt-6 max-w-lg text-lg leading-relaxed text-muted-foreground">
                VersaSphere gives industrial distributors real-time visibility into competitor pricing, catalog changes, and supplier risk — along with analyzed insights and recommendations so you can stop reacting and start leading.
              </p>
              <div className="mt-8 flex flex-wrap gap-4">
                <Button variant="hero" size="lg" asChild>
                  <Link to="/contact">Book a Free Consultation <ArrowRight className="ml-1 h-4 w-4" /></Link>
                </Button>
                <Button variant="heroOutline" size="lg" asChild>
                  <Link to="/services">Explore Services</Link>
                </Button>
              </div>
            </motion.div>
            <motion.div
              initial={{ opacity: 0, scale: 0.95 }}
              animate={{ opacity: 1, scale: 1 }}
              transition={{ delay: 0.3, duration: 0.7 }}
              className="relative"
            >
              <div className="overflow-hidden rounded-xl border border-border shadow-[var(--shadow-card)]">
                <img src={heroDashboard} alt="VersaSphere analytics dashboard showing supply chain data" className="w-full" width={1920} height={1088} fetchPriority="high" loading="eager" decoding="async" />
              </div>
              <div className="absolute -bottom-4 -left-4 h-24 w-24 rounded-full bg-primary/10 blur-3xl" />
              <div className="absolute -top-4 -right-4 h-32 w-32 rounded-full bg-primary/5 blur-3xl" />
            </motion.div>
          </div>
        </div>
      </section>

      {/* Stats */}
      <section className="border-y border-border bg-card/50">
        <div className="container mx-auto grid grid-cols-2 gap-8 px-4 py-12 lg:grid-cols-4 lg:px-8">
          {valueProps.map((vp, i) => (
            <motion.div
              key={vp.title}
              initial="hidden" whileInView="visible" viewport={{ once: true }}
              variants={fadeUp} custom={i}
              className="flex flex-col items-center text-center gap-2"
            >
              <div className="flex h-10 w-10 items-center justify-center rounded-lg bg-primary/10">
                <vp.icon className="h-5 w-5 text-primary" />
              </div>
              <div className="font-display text-sm font-semibold text-foreground">{vp.title}</div>
              <div className="text-xs text-muted-foreground">{vp.desc}</div>
            </motion.div>
          ))}
        </div>
      </section>

      {/* Problem Section */}
      <section className="py-24">
        <div className="container mx-auto px-4 lg:px-8">
          <motion.div initial="hidden" whileInView="visible" viewport={{ once: true }} variants={fadeUp} custom={0} className="text-center">
            <p className="text-sm font-semibold uppercase tracking-widest text-primary">The Problem</p>
            <h2 className="mt-3 font-display text-3xl font-bold text-foreground lg:text-4xl">
              Distribution is a margin game.<br />You're playing it blind.
            </h2>
          </motion.div>
          <div className="mt-16 grid gap-8 md:grid-cols-3">
            {problems.map((p, i) => (
              <motion.div
                key={p.title}
                initial="hidden" whileInView="visible" viewport={{ once: true }}
                variants={fadeUp} custom={i + 1}
                className="rounded-xl border border-border bg-card p-8 shadow-[var(--shadow-card)]"
              >
                <div className="flex h-12 w-12 items-center justify-center rounded-lg bg-primary/10">
                  <p.icon className="h-6 w-6 text-primary" />
                </div>
                <h3 className="mt-5 font-display text-lg font-semibold text-foreground">{p.title}</h3>
                <p className="mt-2 text-sm leading-relaxed text-muted-foreground">{p.desc}</p>
              </motion.div>
            ))}
          </div>
        </div>
      </section>

      {/* Features */}
      <section className="border-y border-border bg-card/30 py-24">
        <div className="container mx-auto px-4 lg:px-8">
          <motion.div initial="hidden" whileInView="visible" viewport={{ once: true }} variants={fadeUp} custom={0} className="text-center">
            <p className="text-sm font-semibold uppercase tracking-widest text-primary">What We Deliver</p>
            <h2 className="mt-3 font-display text-3xl font-bold text-foreground lg:text-4xl">
              Intelligence that moves your business forward
            </h2>
          </motion.div>
          <div className="mt-16 grid gap-8 lg:grid-cols-3">
            {features.map((f, i) => (
              <motion.div
                key={f.title}
                initial="hidden" whileInView="visible" viewport={{ once: true }}
                variants={fadeUp} custom={i + 1}
                className="rounded-xl border border-border bg-background p-8"
              >
                <h3 className="font-display text-xl font-semibold text-foreground">{f.title}</h3>
                <p className="mt-3 text-sm leading-relaxed text-muted-foreground">{f.desc}</p>
                <ul className="mt-6 space-y-3">
                  {f.points.map((pt) => (
                    <li key={pt} className="flex items-start gap-2.5 text-sm text-secondary-foreground">
                      <CheckCircle className="mt-0.5 h-4 w-4 shrink-0 text-primary" />
                      {pt}
                    </li>
                  ))}
                </ul>
              </motion.div>
            ))}
          </div>
        </div>
      </section>

      {/* How It Works */}
      <section className="py-24">
        <div className="container mx-auto px-4 lg:px-8">
          <motion.div initial="hidden" whileInView="visible" viewport={{ once: true }} variants={fadeUp} custom={0} className="text-center">
            <p className="text-sm font-semibold uppercase tracking-widest text-primary">How It Works</p>
            <h2 className="mt-3 font-display text-3xl font-bold text-foreground lg:text-4xl">
              From zero to intelligence in days — not months.
            </h2>
          </motion.div>
          <div className="mx-auto mt-16 max-w-2xl">
            {howItWorksSteps.map((step, i) => (
              <motion.div
                key={step.title}
                initial="hidden" whileInView="visible" viewport={{ once: true }}
                variants={fadeUp} custom={i + 1}
                className="relative flex gap-6 pb-10 last:pb-0"
              >
                {/* Timeline line */}
                {i < howItWorksSteps.length - 1 && (
                  <div className="absolute left-[19px] top-10 bottom-0 w-px bg-border" />
                )}
                {/* Number badge */}
                <div className="flex h-10 w-10 shrink-0 items-center justify-center rounded-full border border-primary bg-primary/10 font-display text-sm font-bold text-primary">
                  {i + 1}
                </div>
                {/* Content */}
                <div className="pt-1.5">
                  <h3 className="font-display text-base font-semibold text-foreground">{step.title}</h3>
                  <p className="mt-1 text-sm leading-relaxed text-muted-foreground">{step.desc}</p>
                </div>
              </motion.div>
            ))}
          </div>
          <motion.p
            initial="hidden" whileInView="visible" viewport={{ once: true }}
            variants={fadeUp} custom={6}
            className="mt-12 text-center text-sm font-medium text-muted-foreground"
          >
            Most clients are fully operational within <span className="text-foreground">5–10 business days</span>.
          </motion.p>
        </div>
      </section>

      {/* Verticals */}
      <section className="py-24">
        <div className="container mx-auto px-4 lg:px-8">
          <motion.div initial="hidden" whileInView="visible" viewport={{ once: true }} variants={fadeUp} custom={0} className="text-center">
            <p className="text-sm font-semibold uppercase tracking-widest text-primary">Who We Serve</p>
            <h2 className="mt-3 font-display text-3xl font-bold text-foreground lg:text-4xl">
              Built for the distribution industry
            </h2>
          </motion.div>
          <div className="mt-12 flex flex-wrap justify-center gap-4">
            {verticals.map((v, i) => (
              <motion.div
                key={v}
                initial="hidden" whileInView="visible" viewport={{ once: true }}
                variants={fadeUp} custom={i * 0.5}
                className="rounded-full border border-border bg-card px-6 py-3 text-sm font-medium text-secondary-foreground"
              >
                {v}
              </motion.div>
            ))}
          </div>
        </div>
      </section>

      {/* FAQ */}
      <section className="border-t border-border bg-card/30 py-24">
        <div className="container mx-auto max-w-3xl px-4 lg:px-8">
          <motion.div initial="hidden" whileInView="visible" viewport={{ once: true }} variants={fadeUp} custom={0} className="text-center">
            <p className="text-sm font-semibold uppercase tracking-widest text-primary">FAQ</p>
            <h2 className="mt-3 font-display text-3xl font-bold text-foreground">
              Frequently asked questions
            </h2>
          </motion.div>
          <div className="mt-12 space-y-3">
            {faqs.map((faq, i) => (
              <motion.div
                key={i}
                initial="hidden" whileInView="visible" viewport={{ once: true }}
                variants={fadeUp} custom={i * 0.5}
                className="rounded-lg border border-border bg-background"
              >
                <button
                  onClick={() => setOpenFaq(openFaq === i ? null : i)}
                  className="flex w-full items-center justify-between px-6 py-4 text-left text-sm font-medium text-foreground"
                >
                  {faq.q}
                  <ChevronDown className={`h-4 w-4 shrink-0 text-muted-foreground transition-transform ${openFaq === i ? "rotate-180" : ""}`} />
                </button>
                {openFaq === i && (
                  <div className="px-6 pb-4 text-sm leading-relaxed text-muted-foreground">
                    {faq.a}
                  </div>
                )}
              </motion.div>
            ))}
          </div>
        </div>
      </section>

      {/* CTA */}
      <section className="py-24">
        <div className="container mx-auto px-4 lg:px-8">
          <motion.div
            initial="hidden" whileInView="visible" viewport={{ once: true }}
            variants={fadeUp} custom={0}
            className="relative overflow-hidden rounded-2xl border border-border bg-card p-12 text-center lg:p-20"
          >
            <div className="absolute inset-0 bg-grid-pattern opacity-30" />
            <div className="relative">
              <h2 className="font-display text-3xl font-bold text-foreground lg:text-4xl">
                Ready to see what you've been missing?
              </h2>
              <p className="mx-auto mt-4 max-w-lg text-muted-foreground">
                Book a free 30-minute consultation. See real data, real insights, and real impact — tailored to your business.
              </p>
              <div className="mt-8 flex flex-wrap justify-center gap-4">
                <Button variant="hero" size="lg" asChild>
                  <Link to="/contact">Book Your Free Consultation <ArrowRight className="ml-1 h-4 w-4" /></Link>
                </Button>
              </div>
            </div>
          </motion.div>
        </div>
      </section>
    </Layout>
  );
};

export default Index;