"use client"

import Link from "next/link"
import Image from "next/image"
import { notFound } from "next/navigation"
import { Calendar, Clock, ArrowLeft, ArrowRight, CheckCircle } from "lucide-react"
import { useI18n } from "@/lib/i18n"
import { Header } from "@/components/header"
import { Footer } from "@/components/footer"
import { WhatsAppButton } from "@/components/whatsapp-button"
import { Button } from "@/components/ui/button"

export const blogArticles: Record<string, {
  title: string
  excerpt: string
  image: string
  date: string
  readTime: string
  category: string
  content: React.ReactNode
}> = {
  "what-is-desiccated-coconut": {
    title: "What is Desiccated Coconut? Specification and Uses",
    excerpt: "Learn about desiccated coconut, its production process, key specifications, and how it's used across various food industries worldwide.",
    image: "/images/blog/desiccated-coconut-guide.jpg",
    date: "2024-01-15",
    readTime: "5 min read",
    category: "Guide",
    content: (
      <div className="prose prose-lg max-w-none">
        <p>
          Desiccated coconut is dried, shredded coconut meat that has been processed to remove most of its moisture content. It&apos;s a versatile ingredient used extensively in the food industry, from bakery products to confectionery.
        </p>
        
        <h2>How is Desiccated Coconut Made?</h2>
        <p>
          The production process involves several key steps:
        </p>
        <ul>
          <li>Fresh coconuts are carefully selected and opened</li>
          <li>The white coconut meat is extracted and washed</li>
          <li>The meat is shredded or ground to the desired grade</li>
          <li>Hot air drying reduces moisture content to below 3%</li>
          <li>The product is sieved, graded, and packaged</li>
        </ul>

        <h2>Key Specifications</h2>
        <p>
          When sourcing desiccated coconut, buyers should pay attention to these critical specifications:
        </p>
        <ul>
          <li><strong>Fat Content:</strong> Typically ranges from 45% (low fat) to 68% (high fat)</li>
          <li><strong>Moisture:</strong> Should be maximum 3% for proper shelf life</li>
          <li><strong>Grade:</strong> Available in fine, medium, and coarse grades</li>
          <li><strong>Color:</strong> Natural white is preferred</li>
          <li><strong>pH Level:</strong> Usually between 6.1 and 6.7</li>
        </ul>

        <h2>Common Applications</h2>
        <p>
          Desiccated coconut is used in numerous food applications:
        </p>
        <ul>
          <li>Bakery products (cakes, cookies, pastries)</li>
          <li>Confectionery and chocolate</li>
          <li>Breakfast cereals and granola</li>
          <li>Ice cream and desserts</li>
          <li>Snack foods</li>
          <li>Curry pastes and Asian cuisine</li>
        </ul>

        <h2>Why Indonesia?</h2>
        <p>
          Indonesia is one of the world&apos;s largest producers of desiccated coconut due to its ideal tropical climate, abundant coconut plantations, and established processing infrastructure. Indonesian desiccated coconut is known for its consistent quality and competitive pricing.
        </p>
      </div>
    ),
  },
  "high-fat-vs-low-fat-desiccated-coconut": {
    title: "High Fat vs Low Fat Desiccated Coconut: Key Differences",
    excerpt: "Understand the differences between high fat and low fat desiccated coconut, including fat content, applications, and how to choose the right type for your products.",
    image: "/images/blog/high-fat-vs-low-fat.jpg",
    date: "2024-01-20",
    readTime: "4 min read",
    category: "Product Knowledge",
    content: (
      <div className="prose prose-lg max-w-none">
        <p>
          Understanding the difference between high fat and low fat desiccated coconut is crucial for selecting the right ingredient for your food products. Each type has distinct characteristics that make it suitable for specific applications.
        </p>

        <h2>High Fat Desiccated Coconut</h2>
        <p>
          High fat desiccated coconut typically contains 60-68% fat content. It retains more of the natural coconut oils during processing, resulting in:
        </p>
        <ul>
          <li>Richer, more intense coconut flavor</li>
          <li>Moister texture</li>
          <li>Better binding properties in recipes</li>
          <li>Shorter shelf life due to higher oil content</li>
        </ul>
        <p>
          <strong>Best applications:</strong> Premium bakery products, chocolate confectionery, ice cream, and products where rich coconut flavor is desired.
        </p>

        <h2>Low Fat Desiccated Coconut</h2>
        <p>
          Low fat desiccated coconut has 40-50% fat content. The coconut oil is partially extracted during processing, resulting in:
        </p>
        <ul>
          <li>Milder coconut flavor</li>
          <li>Drier, fluffier texture</li>
          <li>Longer shelf life</li>
          <li>Better for products requiring stability</li>
        </ul>
        <p>
          <strong>Best applications:</strong> Breakfast cereals, granola bars, health food products, and applications requiring extended shelf life.
        </p>

        <h2>Making the Right Choice</h2>
        <p>
          When selecting between high fat and low fat desiccated coconut, consider:
        </p>
        <ul>
          <li><strong>Flavor requirements:</strong> High fat for rich coconut taste</li>
          <li><strong>Shelf life needs:</strong> Low fat for longer stability</li>
          <li><strong>Cost considerations:</strong> Low fat is typically more economical</li>
          <li><strong>End product type:</strong> Match the fat content to your recipe requirements</li>
        </ul>
      </div>
    ),
  },
  "desiccated-coconut-moisture-standard": {
    title: "Desiccated Coconut Moisture Standard for Export",
    excerpt: "Explore the international moisture standards for desiccated coconut exports, why moisture control is critical, and how suppliers ensure compliance.",
    image: "/images/blog/moisture-standard.jpg",
    date: "2024-02-01",
    readTime: "4 min read",
    category: "Export Standards",
    content: (
      <div className="prose prose-lg max-w-none">
        <p>
          Moisture content is one of the most critical quality parameters for desiccated coconut in international trade. Understanding and maintaining proper moisture levels is essential for product quality, shelf life, and regulatory compliance.
        </p>

        <h2>International Moisture Standards</h2>
        <p>
          The accepted maximum moisture content for export-grade desiccated coconut is:
        </p>
        <ul>
          <li><strong>Maximum 3%</strong> - This is the international standard</li>
          <li>Premium grades may specify 2.5% or lower</li>
          <li>Codex Alimentarius guidelines recommend not exceeding 3%</li>
        </ul>

        <h2>Why Moisture Control Matters</h2>
        <p>
          Maintaining low moisture content is critical for several reasons:
        </p>
        <ul>
          <li><strong>Microbial Safety:</strong> Low moisture prevents bacterial and mold growth</li>
          <li><strong>Shelf Life:</strong> Products with proper moisture last 12+ months</li>
          <li><strong>Quality Preservation:</strong> Prevents rancidity and off-flavors</li>
          <li><strong>Import Compliance:</strong> Many countries reject shipments exceeding 3%</li>
        </ul>

        <h2>Testing Methods</h2>
        <p>
          Reputable suppliers use several methods to test moisture content:
        </p>
        <ul>
          <li>Oven drying method (standard laboratory test)</li>
          <li>Moisture analyzers for rapid in-process testing</li>
          <li>Third-party laboratory verification for export lots</li>
        </ul>

        <h2>Certificate of Analysis (COA)</h2>
        <p>
          Every export shipment should include a COA documenting the moisture content along with other quality parameters. Always request and verify COA documentation when importing desiccated coconut.
        </p>
      </div>
    ),
  },
  "desiccated-coconut-supplier-indonesia-guide": {
    title: "Desiccated Coconut Supplier in Indonesia: Complete Guide",
    excerpt: "A comprehensive guide to finding and working with desiccated coconut suppliers in Indonesia, including quality considerations and export processes.",
    image: "/images/blog/supplier-guide.jpg",
    date: "2024-02-10",
    readTime: "6 min read",
    category: "Buyer's Guide",
    content: (
      <div className="prose prose-lg max-w-none">
        <p>
          Indonesia is one of the world&apos;s leading exporters of desiccated coconut, making it an important sourcing destination for food manufacturers globally. This guide will help you navigate the process of finding and working with Indonesian suppliers.
        </p>

        <h2>Why Source from Indonesia?</h2>
        <ul>
          <li>Abundant coconut production (one of world&apos;s largest)</li>
          <li>Competitive pricing due to local raw material availability</li>
          <li>Established export infrastructure</li>
          <li>Wide range of grades and specifications available</li>
          <li>Year-round supply capability</li>
        </ul>

        <h2>Key Quality Certifications to Look For</h2>
        <p>
          Reputable Indonesian suppliers should have:
        </p>
        <ul>
          <li><strong>HACCP:</strong> Hazard Analysis Critical Control Points</li>
          <li><strong>ISO 22000:</strong> Food Safety Management System</li>
          <li><strong>FSSC 22000:</strong> Food Safety System Certification</li>
          <li><strong>Halal Certification:</strong> Important for Muslim markets</li>
          <li><strong>Kosher Certification:</strong> If required by your market</li>
        </ul>

        <h2>Evaluating Potential Suppliers</h2>
        <p>
          When assessing Indonesian desiccated coconut suppliers, consider:
        </p>
        <ul>
          <li>Production capacity and consistency</li>
          <li>Quality control procedures</li>
          <li>Export experience and documentation capability</li>
          <li>Communication responsiveness</li>
          <li>Sample availability and quality</li>
          <li>References from existing customers</li>
        </ul>

        <h2>Working with Export Trading Companies</h2>
        <p>
          Many international buyers prefer working with export trading companies like Tropicoco rather than directly with manufacturers. Benefits include:
        </p>
        <ul>
          <li>Access to multiple certified manufacturers</li>
          <li>Professional export documentation handling</li>
          <li>Quality assurance and supplier verification</li>
          <li>Consolidated shipping options</li>
          <li>Dedicated support and communication</li>
        </ul>
      </div>
    ),
  },
  "desiccated-coconut-price-fob-indonesia": {
    title: "Desiccated Coconut Price FOB Indonesia: What to Expect",
    excerpt: "Get insights into desiccated coconut pricing from Indonesia, factors that affect FOB prices, and how to get competitive quotes from suppliers.",
    image: "/images/blog/pricing-guide.jpg",
    date: "2024-02-20",
    readTime: "5 min read",
    category: "Pricing",
    content: (
      <div className="prose prose-lg max-w-none">
        <p>
          Understanding desiccated coconut pricing is essential for international buyers planning to source from Indonesia. This guide explains the key factors that influence FOB prices and how to get competitive quotes.
        </p>

        <h2>Factors Affecting Price</h2>
        <p>
          Several factors influence desiccated coconut FOB prices:
        </p>
        <ul>
          <li><strong>Fat Content:</strong> High fat products typically command higher prices</li>
          <li><strong>Grade:</strong> Fine grade may be priced differently than medium or coarse</li>
          <li><strong>Quality Specifications:</strong> Stricter specs may increase cost</li>
          <li><strong>Order Volume:</strong> Larger orders often receive better pricing</li>
          <li><strong>Seasonality:</strong> Coconut harvest seasons can affect prices</li>
          <li><strong>Global Demand:</strong> Market conditions impact pricing</li>
          <li><strong>Currency Exchange:</strong> USD/IDR rates affect FOB prices</li>
        </ul>

        <h2>Understanding FOB Terms</h2>
        <p>
          FOB (Free on Board) pricing means the seller is responsible for:
        </p>
        <ul>
          <li>Loading the goods onto the vessel at the port of origin</li>
          <li>Export customs clearance</li>
          <li>All costs up to the point of loading</li>
        </ul>
        <p>
          The buyer is responsible for ocean freight, insurance, and import costs.
        </p>

        <h2>Getting Competitive Quotes</h2>
        <p>
          To receive accurate and competitive quotes, provide suppliers with:
        </p>
        <ul>
          <li>Specific product specifications required</li>
          <li>Estimated order quantity</li>
          <li>Target shipping date</li>
          <li>Destination port</li>
          <li>Preferred payment terms</li>
        </ul>

        <h2>CIF Alternative</h2>
        <p>
          Many suppliers also offer CIF (Cost, Insurance, Freight) pricing which includes shipping to your destination port. This can simplify logistics for buyers new to importing.
        </p>
      </div>
    ),
  },
  "how-to-import-desiccated-coconut-from-indonesia": {
    title: "How to Import Desiccated Coconut from Indonesia",
    excerpt: "Step-by-step guide on importing desiccated coconut from Indonesia, including documentation requirements, shipping options, and regulatory compliance.",
    image: "/images/blog/import-guide.jpg",
    date: "2024-03-01",
    readTime: "7 min read",
    category: "Import Guide",
    content: (
      <div className="prose prose-lg max-w-none">
        <p>
          Importing desiccated coconut from Indonesia involves several steps, from finding a reliable supplier to clearing customs in your country. This guide walks you through the entire process.
        </p>

        <h2>Step 1: Find a Reliable Supplier</h2>
        <p>
          Start by identifying suppliers who can meet your quality requirements and have proper certifications. Request samples and verify their export credentials.
        </p>

        <h2>Step 2: Request Quotation and Negotiate Terms</h2>
        <p>
          Obtain quotes for your specific requirements including:
        </p>
        <ul>
          <li>Product specifications</li>
          <li>Quantity</li>
          <li>Pricing terms (FOB or CIF)</li>
          <li>Payment terms</li>
          <li>Lead time</li>
        </ul>

        <h2>Step 3: Required Export Documentation</h2>
        <p>
          Indonesian exporters should provide these documents:
        </p>
        <ul>
          <li><strong>Commercial Invoice:</strong> Details of the transaction</li>
          <li><strong>Packing List:</strong> Contents and packaging information</li>
          <li><strong>Bill of Lading:</strong> Shipping document</li>
          <li><strong>Certificate of Origin:</strong> Confirms Indonesian origin</li>
          <li><strong>Phytosanitary Certificate:</strong> Plant health certification</li>
          <li><strong>Certificate of Analysis (COA):</strong> Quality specifications</li>
          <li><strong>Health Certificate:</strong> Food safety documentation</li>
        </ul>

        <h2>Step 4: Shipping Options</h2>
        <p>
          Desiccated coconut is typically shipped in:
        </p>
        <ul>
          <li>20ft containers (approx. 12-14 MT capacity)</li>
          <li>40ft containers (approx. 24-26 MT capacity)</li>
        </ul>
        <p>
          Shipping time varies by destination, typically 2-6 weeks from Indonesian ports.
        </p>

        <h2>Step 5: Import Clearance</h2>
        <p>
          Upon arrival, you&apos;ll need to:
        </p>
        <ul>
          <li>Submit required documentation to customs</li>
          <li>Pay applicable import duties and taxes</li>
          <li>Pass any food safety inspections required by your country</li>
          <li>Arrange domestic transportation</li>
        </ul>

        <h2>Working with Tropicoco</h2>
        <p>
          As an experienced export trading company, Tropicoco can assist with the entire export process, ensuring all documentation is properly prepared and shipped with your order.
        </p>
      </div>
    ),
  },
}

export function BlogArticleContent({ slug }: { slug: string }) {
  const { t } = useI18n()
  const article = blogArticles[slug]

  if (!article) {
    notFound()
  }

  const articleSlugs = Object.keys(blogArticles)
  const currentIndex = articleSlugs.indexOf(slug)
  const prevSlug = currentIndex > 0 ? articleSlugs[currentIndex - 1] : null
  const nextSlug = currentIndex < articleSlugs.length - 1 ? articleSlugs[currentIndex + 1] : null

  return (
    <div className="flex min-h-screen flex-col">
      <Header />
      <main className="flex-1">
        {/* Hero Section */}
        <section className="bg-secondary/30 py-12 lg:py-16">
          <div className="container mx-auto px-4 lg:px-8">
            <div className="mx-auto max-w-4xl">
              <Link
                href="/blog"
                className="inline-flex items-center gap-2 text-sm text-muted-foreground hover:text-primary mb-6"
              >
                <ArrowLeft className="h-4 w-4" />
                Back to Blog
              </Link>
              <div className="flex items-center gap-2 text-sm text-muted-foreground mb-4">
                <span className="rounded-full bg-primary/10 px-2.5 py-0.5 text-primary font-medium">
                  {article.category}
                </span>
                <span>•</span>
                <div className="flex items-center gap-1">
                  <Calendar className="h-4 w-4" />
                  <span>{new Date(article.date).toLocaleDateString('en-US', { month: 'long', day: 'numeric', year: 'numeric' })}</span>
                </div>
                <span>•</span>
                <div className="flex items-center gap-1">
                  <Clock className="h-4 w-4" />
                  <span>{article.readTime}</span>
                </div>
              </div>
              <h1 className="text-3xl font-bold tracking-tight text-foreground sm:text-4xl lg:text-5xl">
                {article.title}
              </h1>
              <p className="mt-4 text-xl text-muted-foreground">
                {article.excerpt}
              </p>
            </div>
          </div>
        </section>

        {/* Article Image */}
        <section className="container mx-auto px-4 lg:px-8 -mt-8 relative z-10">
          <div className="mx-auto max-w-4xl">
            <div className="aspect-video relative rounded-2xl overflow-hidden bg-secondary">
              <Image
                src={article.image}
                alt={article.title}
                fill
                className="object-cover"
              />
            </div>
          </div>
        </section>

        {/* Article Content */}
        <section className="bg-background py-12 lg:py-16">
          <div className="container mx-auto px-4 lg:px-8">
            <div className="mx-auto max-w-3xl">
              <div className="prose prose-lg prose-headings:font-semibold prose-headings:text-foreground prose-p:text-muted-foreground prose-li:text-muted-foreground prose-strong:text-foreground max-w-none">
                {article.content}
              </div>

              {/* CTA Box */}
              <div className="mt-12 rounded-2xl bg-primary/5 p-8 text-center">
                <h3 className="text-xl font-semibold text-foreground mb-2">
                  Ready to Source Premium Desiccated Coconut?
                </h3>
                <p className="text-muted-foreground mb-6">
                  Contact Tropicoco today for competitive pricing and expert guidance on your import requirements.
                </p>
                <div className="flex flex-col sm:flex-row gap-4 justify-center">
                  <Button asChild size="lg">
                    <Link href="/contact">
                      Request a Quote
                    </Link>
                  </Button>
                  <Button asChild variant="outline" size="lg">
                    <a
                      href="https://wa.me/6281234567890?text=Hello%20Tropicoco%2C%20I%20read%20your%20blog%20and%20would%20like%20to%20inquire%20about%20desiccated%20coconut."
                      target="_blank"
                      rel="noopener noreferrer"
                    >
                      Chat on WhatsApp
                    </a>
                  </Button>
                </div>
              </div>

              {/* Navigation */}
              <div className="mt-12 pt-8 border-t border-border">
                <div className="flex justify-between items-center">
                  {prevSlug ? (
                    <Link
                      href={`/blog/${prevSlug}`}
                      className="flex items-center gap-2 text-sm text-muted-foreground hover:text-primary transition-colors"
                    >
                      <ArrowLeft className="h-4 w-4" />
                      <span>Previous Article</span>
                    </Link>
                  ) : (
                    <div />
                  )}
                  {nextSlug ? (
                    <Link
                      href={`/blog/${nextSlug}`}
                      className="flex items-center gap-2 text-sm text-muted-foreground hover:text-primary transition-colors"
                    >
                      <span>Next Article</span>
                      <ArrowRight className="h-4 w-4" />
                    </Link>
                  ) : (
                    <div />
                  )}
                </div>
              </div>
            </div>
          </div>
        </section>

        {/* Related Articles */}
        <section className="bg-secondary/30 py-16 lg:py-20">
          <div className="container mx-auto px-4 lg:px-8">
            <div className="mx-auto max-w-4xl">
              <h2 className="text-2xl font-bold text-foreground mb-8 text-center">
                Related Articles
              </h2>
              <div className="grid gap-6 md:grid-cols-2">
                {Object.entries(blogArticles)
                  .filter(([key]) => key !== slug)
                  .slice(0, 2)
                  .map(([key, relatedArticle]) => (
                    <Link
                      key={key}
                      href={`/blog/${key}`}
                      className="group rounded-xl bg-card border border-border p-4 transition-all hover:shadow-lg"
                    >
                      <div className="aspect-video relative rounded-lg overflow-hidden bg-secondary mb-4">
                        <Image
                          src={relatedArticle.image}
                          alt={relatedArticle.title}
                          fill
                          className="object-cover group-hover:scale-105 transition-transform duration-300"
                        />
                      </div>
                      <span className="text-xs font-medium text-primary">{relatedArticle.category}</span>
                      <h3 className="text-lg font-semibold text-foreground mt-1 group-hover:text-primary transition-colors line-clamp-2">
                        {relatedArticle.title}
                      </h3>
                    </Link>
                  ))}
              </div>
            </div>
          </div>
        </section>
      </main>
      <Footer />
      <WhatsAppButton />
    </div>
  )
}