import { Badge } from "@/src/components/ui/badge";
import { Button } from "@/src/components/ui/button";
import { Card, CardContent } from "@/src/components/ui/card";
import Link from "next/link";
import {
  Calendar,
  Clock,
  ArrowRight,
  TrendingUp,
  Globe,
  Newspaper,
} from "lucide-react";
import type { Metadata } from "next";

export const metadata: Metadata = {
  title: "Trade Insights & Industry News - Export Market Updates",
  description:
    "Stay updated with the latest export trade insights, industry news, market trends, and regulatory updates. Expert analysis on global trade and Indian export opportunities.",
  keywords: [
    "trade insights",
    "export news India",
    "industry updates",
    "market trends",
    "export regulations",
    "global trade news",
    "B2B trade insights",
  ],
  alternates: {
    canonical: "/insights",
  },
  openGraph: {
    title: "Trade Insights & Industry News - Xpecto Global",
    description:
      "Latest export trade insights, industry news, and market trends for global trade.",
    type: "website",
  },
};

export default function Insights() {
  const featuredPost = {
    title: "The Future of Global Trade: Trends Shaping 2026",
    excerpt:
      "Explore the emerging trends in international trade, from digital transformation to sustainable supply chains, and how they impact Indian exporters.",
    category: "Industry Trends",
    date: "February 28, 2026",
    readTime: "8 min read",
    image: "/images/blog-featured.jpg",
    slug: "future-global-trade-trends-2026",
  };

  const blogPosts = [
    {
      title: "How to Import Agricultural Products from India: A Complete Guide",
      excerpt:
        "Everything you need to know about importing high-quality agricultural products from India.",
      category: "Export Guide",
      date: "February 28, 2026",
      readTime: "12 min read",
      slug: "import-agricultural-products-india-guide-2026",
    },
    {
      title: "Essential Export Documentation Guide for First-Time Exporters",
      excerpt:
        "A comprehensive guide to understanding and preparing export documents for smooth international trade.",
      category: "Export Guide",
      date: "February 25, 2026",
      readTime: "6 min read",
      slug: "export-documentation-guide",
    },
    {
      title: "Indian Spices: Meeting Global Quality Standards",
      excerpt:
        "How Indian spice exporters are adapting to stringent international quality requirements.",
      category: "Quality Standards",
      date: "February 20, 2026",
      readTime: "5 min read",
      slug: "indian-spices-global-quality-standards",
    },
    {
      title: "Navigating Incoterms 2020: A Practical Guide",
      excerpt:
        "Understanding international commercial terms and choosing the right one for your shipment.",
      category: "Trade Terms",
      date: "February 15, 2026",
      readTime: "7 min read",
      slug: "navigating-incoterms-2020",
    },
    {
      title: "Sustainable Packaging Solutions for Export",
      excerpt:
        "Eco-friendly packaging trends and regulations affecting international trade.",
      category: "Sustainability",
      date: "February 10, 2026",
      readTime: "4 min read",
      slug: "sustainable-packaging-export",
    },
    {
      title: "Building Strong Supplier Relationships in India",
      excerpt:
        "Tips for international buyers on establishing reliable partnerships with Indian manufacturers.",
      category: "Business Tips",
      date: "February 5, 2026",
      readTime: "5 min read",
      slug: "building-supplier-relationships-india",
    },
    {
      title: "Understanding GST Impact on Export Businesses",
      excerpt:
        "How GST affects Indian exporters and strategies for tax optimization.",
      category: "Regulations",
      date: "January 30, 2026",
      readTime: "6 min read",
      slug: "gst-impact-export-businesses",
    },
  ];

  const categories = [
    { name: "All Posts", count: 24 },
    { name: "Industry Trends", count: 8 },
    { name: "Export Guide", count: 6 },
    { name: "Quality Standards", count: 4 },
    { name: "Regulations", count: 3 },
    { name: "Business Tips", count: 3 },
  ];

  return (
    <div className="bg-white">
      {/* Hero Section */}
      <section className="relative h-100 flex items-center bg-[#0B1C2D]">
        <div className="absolute inset-0 bg-linear-to-r from-[#0B1C2D] to-[#1a3a52] pointer-events-none"></div>
        <div className="relative z-10 max-w-360 mx-auto px-6 w-full">
          <Badge className="mb-4 bg-white/10 text-white hover:bg-white/20">
            Knowledge Hub
          </Badge>
          <h1 className="text-5xl md:text-6xl font-bold text-white mb-6">
            Trade <span className="text-[#B8860B]">Insights</span>
          </h1>
          <p className="text-xl text-gray-300 max-w-2xl">
            Expert analysis, industry trends, and practical guides for successful
            international trade.
          </p>
        </div>
      </section>

      {/* Stats Bar */}
      <section className="py-8 bg-[#F5F7FA] border-b">
        <div className="max-w-360 mx-auto px-6">
          <div className="flex flex-wrap justify-center gap-8 md:gap-16">
            {[
              { icon: Newspaper, label: "Articles", value: "50+" },
              { icon: Globe, label: "Topics Covered", value: "12" },
              { icon: TrendingUp, label: "Monthly Readers", value: "10K+" },
            ].map((stat, index) => (
              <div key={index} className="flex items-center gap-3">
                <stat.icon className="text-[#B8860B]" size={24} />
                <div>
                  <span className="font-bold text-[#0B1C2D]">{stat.value}</span>
                  <span className="text-gray-600 ml-1">{stat.label}</span>
                </div>
              </div>
            ))}
          </div>
        </div>
      </section>

      {/* Featured Post */}
      <section className="py-16">
        <div className="max-w-360 mx-auto px-6">
          <Card className="overflow-hidden hover:shadow-lg transition-shadow">
            <div className="grid md:grid-cols-2">
              <div className="h-64 md:h-auto bg-linear-to-br from-[#0B1C2D] to-[#1a3a52] flex items-center justify-center">
                <div className="text-center p-8">
                  <TrendingUp className="text-[#B8860B] mx-auto mb-4" size={64} />
                  <span className="text-white/60 text-sm">Featured Article</span>
                </div>
              </div>
              <CardContent className="p-4 md:p-12 flex flex-col justify-center">
                <Badge className="w-fit mb-4 bg-[#B8860B]/10 text-[#B8860B]">
                  {featuredPost.category}
                </Badge>
                <h2 className="text-2xl md:text-3xl font-bold text-[#0B1C2D] mb-4">
                  {featuredPost.title}
                </h2>
                <p className="text-gray-600 mb-6">{featuredPost.excerpt}</p>
                <div className="flex items-center gap-4 text-sm text-gray-500 mb-6">
                  <span className="flex items-center gap-1">
                    <Calendar size={16} />
                    {featuredPost.date}
                  </span>
                  <span className="flex items-center gap-1">
                    <Clock size={16} />
                    {featuredPost.readTime}
                  </span>
                </div>
                <Button asChild className="w-fit bg-[#B8860B] hover:bg-[#9A7209] text-white cursor-pointer">
                  <Link href={`/insights/${featuredPost.slug}`}>
                    Read Article
                    <ArrowRight className="ml-2" size={16} />
                  </Link>
                </Button>
              </CardContent>
            </div>
          </Card>
        </div>
      </section>

      {/* Blog Grid */}
      <section className="py-16 bg-[#F5F7FA]">
        <div className="max-w-360 mx-auto px-6">
          <div className="grid lg:grid-cols-4 gap-8">
            {/* Sidebar */}
            <div className="lg:col-span-1">
              <div className="bg-white p-6 rounded-lg shadow-sm sticky top-24">
                <h3 className="font-bold text-[#0B1C2D] mb-4">Categories</h3>
                <ul className="space-y-2">
                  {categories.map((cat, index) => (
                    <li key={index}>
                      <button className="w-full flex items-center justify-between py-2 px-3 rounded hover:bg-[#F5F7FA] transition-colors text-left">
                        <span className="text-gray-700">{cat.name}</span>
                        <span className="text-sm text-gray-500 bg-gray-100 px-2 py-0.5 rounded">
                          {cat.count}
                        </span>
                      </button>
                    </li>
                  ))}
                </ul>
              </div>
            </div>

            {/* Posts Grid */}
            <div className="lg:col-span-3">
              <div className="grid md:grid-cols-2 gap-6">
                {blogPosts.map((post, index) => (
                  <Link key={index} href={`/insights/${post.slug}`} className="block">
                    <Card className="hover:shadow-lg transition-shadow h-full">
                      <CardContent className="p-6">
                        <Badge
                          variant="outline"
                          className="mb-3 text-[#B8860B] border-[#B8860B]"
                        >
                          {post.category}
                        </Badge>
                        <h3 className="text-lg font-bold text-[#0B1C2D] mb-2 line-clamp-2">
                          {post.title}
                        </h3>
                        <p className="text-gray-600 text-sm mb-4 line-clamp-2">
                          {post.excerpt}
                        </p>
                        <div className="flex items-center justify-between text-sm text-gray-500">
                          <span className="flex items-center gap-1">
                            <Calendar size={14} />
                            {post.date}
                          </span>
                          <span className="flex items-center gap-1">
                            <Clock size={14} />
                            {post.readTime}
                          </span>
                        </div>
                        <div className="mt-4 pt-4 border-t border-gray-100">
                          <span className="text-[#B8860B] text-sm font-medium flex items-center gap-1 hover:gap-2 transition-all cursor-pointer">
                            Read Full Article
                            <ArrowRight size={14} />
                          </span>
                        </div>
                      </CardContent>
                    </Card>
                  </Link>
                ))}
              </div>
              
              {/* Load More */}
              <div className="text-center mt-8">
                <Button
                  variant="outline"
                  className="border-[#0B1C2D] text-[#0B1C2D] hover:bg-[#0B1C2D] hover:text-white cursor-pointer"
                >
                  Load More Articles
                </Button>
              </div>
            </div>
          </div>
        </div>
      </section>

      {/* Newsletter Section */}
      <section className="py-20 bg-[#0B1C2D]">
        <div className="max-w-360 mx-auto px-6 text-center">
          <h2 className="text-3xl md:text-4xl font-bold text-white mb-4">
            Stay Updated with Trade Insights
          </h2>
          <p className="text-gray-300 mb-8 max-w-2xl mx-auto">
            Subscribe to our newsletter for the latest industry news, export tips,
            and market analysis delivered to your inbox.
          </p>
          <div className="flex flex-col sm:flex-row gap-4 justify-center max-w-md mx-auto">
            <input
              type="email"
              placeholder="Enter your email"
              className="flex-1 px-4 py-2 rounded-lg bg-white/10 border border-white/20 text-white placeholder:text-gray-400 focus:outline-none focus:border-[#B8860B]"
            />
            <Button className="bg-[#B8860B] hover:bg-[#9A7209] text-white px-8 py-5.5 cursor-pointer">
              Subscribe
            </Button>
          </div>
        </div>
      </section>
    </div>
  );
}