import type { Metadata } from "next";
import Link from "next/link";
import { Clock, User, Calendar, ChevronLeft, Tag, BookOpen } from "lucide-react";

export const metadata: Metadata = { title: "Journal Post" };

export default function JournalViewPage({ params }: { params: { slug: string } }) {
  return (
    <div className="min-h-screen bg-white">
      <div className="max-w-3xl mx-auto px-4 sm:px-6 py-10">
        {/* Back */}
        <Link href="/journal" className="flex items-center gap-1.5 text-sm text-neutral-500 hover:text-navy-700 mb-8">
          <ChevronLeft size={15} /> Back to Journals
        </Link>

        {/* Category */}
        <div className="flex items-center gap-2 mb-4">
          <span className="text-xs font-medium text-navy-600 bg-navy-50 px-3 py-1 rounded-full">Business</span>
          <span className="text-xs text-neutral-400">Free post</span>
        </div>

        {/* Title */}
        <h1 className="text-3xl md:text-4xl font-bold text-navy-800 leading-tight mb-5">
          Top 10 Online Business Ideas for 2026
        </h1>

        {/* Meta */}
        <div className="flex flex-wrap items-center gap-5 text-sm text-neutral-500 pb-6 border-b border-neutral-200 mb-8">
          <span className="flex items-center gap-1.5"><User size={14} /> David Tan</span>
          <span className="flex items-center gap-1.5"><Calendar size={14} /> May 20, 2026</span>
          <span className="flex items-center gap-1.5"><Clock size={14} /> 5 min read</span>
        </div>

        {/* Content */}
        <div className="prose max-w-none text-neutral-700 leading-relaxed space-y-5">
          <p>The digital economy is booming and Malaysia is perfectly positioned to ride this wave. Whether you're a fresh graduate looking for your first venture or an experienced professional exploring a side hustle, 2026 presents incredible opportunities.</p>
          <h2 className="text-xl font-bold text-navy-800 mt-8">1. Dropshipping with Local Suppliers</h2>
          <p>Gone are the days of needing massive upfront inventory. With platforms like Shopee and Lazada, plus local supplier networks, dropshipping lets you start selling without holding stock.</p>
          <h2 className="text-xl font-bold text-navy-800 mt-8">2. Digital Product Creation</h2>
          <p>E-books, Notion templates, Canva designs, online courses — digital products have zero marginal cost and can be sold globally with minimal effort once created.</p>
          <h2 className="text-xl font-bold text-navy-800 mt-8">3. AI-Powered Freelance Services</h2>
          <p>AI tools have made content creation, design, and coding faster than ever. Package these capabilities as premium services for businesses that need results without hiring full-time staff.</p>
          <p>The key to success in any of these is consistent execution. Start small, validate fast, and scale what works.</p>
        </div>

        {/* Tags */}
        <div className="mt-8 pt-6 border-t border-neutral-200 flex items-center gap-2 flex-wrap">
          <Tag size={14} className="text-neutral-400" />
          {["Business", "Entrepreneurship", "Malaysia", "2026"].map((tag) => (
            <span key={tag} className="text-xs bg-neutral-100 text-neutral-600 px-3 py-1 rounded-full">{tag}</span>
          ))}
        </div>

        {/* Author card */}
        <div className="mt-8 p-5 bg-navy-50 rounded-2xl border border-navy-100 flex gap-4">
          <div className="w-12 h-12 bg-navy-700 text-white rounded-xl flex items-center justify-center font-bold text-lg shrink-0">DT</div>
          <div>
            <div className="font-semibold text-navy-800">David Tan</div>
            <div className="text-sm text-neutral-500 mt-0.5">Lead Engineer & Tech Writer at KC Systems</div>
            <div className="text-sm text-neutral-600 mt-1">Writing about technology, business, and career growth in Malaysia.</div>
          </div>
        </div>

        {/* Subscribe CTA */}
        <div className="mt-8 p-6 bg-navy-700 rounded-2xl text-center">
          <BookOpen size={28} className="text-gold-400 mx-auto mb-3" />
          <h3 className="text-white font-semibold text-lg mb-2">Want to read more?</h3>
          <p className="text-navy-200 text-sm mb-4">Subscribe to unlock all journals and publish your own posts.</p>
          <Link href="/register?plan=basic" className="inline-block px-6 py-2.5 bg-gold-500 text-white text-sm font-semibold rounded-lg hover:bg-gold-600 transition-colors">
            Subscribe from $29/month
          </Link>
        </div>
      </div>
    </div>
  );
}