import { useState } from "react";
import { motion } from "framer-motion";
import { BookOpen, FileText, StickyNote, ArrowRight, ExternalLink, Library, Link as LinkIcon } from "lucide-react";
import { Button } from "@/components/ui/button";
import { Card, CardHeader, CardContent, CardFooter, CardTitle, CardDescription } from "@/components/ui/card";
import { Badge } from "@/components/ui/badge";

// --- Simple mock data (replace with your real content) ---
const translations = [
  {
    title: "*Đám Cưới Trên Đường Quê* — English translation",
    meta: "Song by Hoàng Thi Thơ · 2025",
    tags: ["lyrics", "VN→EN"],
    link: "#",
  },
  {
    title: "\"Vườn Lài\" — curatorial essay (EN edit)",
    meta: "Nguyễn Quốc Thành · 2025",
    tags: ["essay", "editing"],
    link: "#",
  },
  {
    title: "Cookbook: *Món Ngon Mẹ Nấu* (selections)",
    meta: "VN→EN · ongoing",
    tags: ["cookbook", "food"],
    link: "#",
  },
];

const writings = [
  {
    title: "River Witnessing",
    meta: "Essay · 2025",
    tags: ["city", "ecology"],
    link: "#",
  },
  {
    title: "Ways of Looking (notes)",
    meta: "Short text · 2025",
    tags: ["criticism"],
    link: "#",
  },
  {
    title: "Under the Flowing: on visibility",
    meta: "Review · 2025",
    tags: ["review"],
    link: "#",
  },
];

const notes = [
  {
    text: "On translation choices: when to foreground Vietnamese titles vs. English gloss.",
    date: "Oct 31, 2025",
    link: "#",
  },
  {
    text: "Curatorial logistics: standardizing video artwork descriptions for catalogues.",
    date: "Oct 15, 2025",
    link: "#",
  },
  {
    text: "A tiny taxonomy of soups: ám, chua, tương hột.",
    date: "Sep 22, 2025",
    link: "#",
  },
];

export default function PersonalHomepage() {
  const [active, setActive] = useState("about");

  const sectionVariants = {
    hidden: { opacity: 0, y: 12 },
    show: { opacity: 1, y: 0 },
  };

  return (
    <div className="min-h-screen bg-white text-gray-900">
      {/* Header / Nav */}
      <header className="sticky top-0 z-40 backdrop-blur supports-[backdrop-filter]:bg-white/70 border-b border-gray-100">
        <div className="mx-auto max-w-6xl px-4 py-4 flex items-center justify-between">
          <a href="#home" className="font-semibold tracking-tight text-xl">Châu Hoàng</a>
          <nav className="hidden md:flex items-center gap-6 text-sm">
            <a href="#about" className="hover:underline" onClick={() => setActive("about")}>About</a>
            <a href="#translations" className="hover:underline" onClick={() => setActive("translations")}>Translations</a>
            <a href="#writings" className="hover:underline" onClick={() => setActive("writings")}>Writings</a>
            <a href="#notes" className="hover:underline" onClick={() => setActive("notes")}>Notes</a>
            <a href="#projects" className="hover:underline">Projects & CV</a>
          </nav>
          <div className="flex items-center gap-2">
            <a href="#contact" className="text-sm underline underline-offset-4">Contact</a>
          </div>
        </div>
      </header>

      {/* Hero */}
      <section id="home" className="mx-auto max-w-6xl px-4 pt-12 pb-8">
        <div className="grid grid-cols-1 md:grid-cols-5 gap-8 items-end">
          <div className="md:col-span-3">
            <motion.h1 initial={{ opacity: 0, y: 8 }} animate={{ opacity: 1, y: 0 }} transition={{ duration: 0.5 }} className="text-3xl md:text-5xl font-semibold leading-tight tracking-tight">
              Translator · Writer · Art Curator
            </motion.h1>
            <motion.p initial={{ opacity: 0, y: 8 }} animate={{ opacity: 1, y: 0 }} transition={{ delay: 0.1, duration: 0.5 }} className="mt-4 text-base md:text-lg text-gray-700">
              I work across Vietnamese↔English translation, art writing, and curatorial practice. This site is a compact index of recent work and ongoing notes.
            </motion.p>
            <div className="mt-6 flex flex-wrap gap-3">
              <Button asChild>
                <a href="#translations"><BookOpen className="mr-2 h-4 w-4"/>Explore translations</a>
              </Button>
              <Button variant="outline" asChild>
                <a href="#projects"><Library className="mr-2 h-4 w-4"/>Projects & CV</a>
              </Button>
            </div>
          </div>
          <div className="md:col-span-2">
            <Card className="rounded-2xl shadow-sm">
              <CardHeader>
                <CardTitle className="text-lg">At a glance</CardTitle>
                <CardDescription>Snapshot</CardDescription>
              </CardHeader>
              <CardContent className="grid grid-cols-2 gap-4 text-sm">
                <div>
                  <p className="text-gray-500">Focus</p>
                  <p>VN↔EN translation, curatorial research, editing</p>
                </div>
                <div>
                  <p className="text-gray-500">Based</p>
                  <p>Hanoi, Vietnam</p>
                </div>
                <div>
                  <p className="text-gray-500">Email</p>
                  <p><a className="underline" href="mailto:hello@example.com">hello@example.com</a></p>
                </div>
                <div>
                  <p className="text-gray-500">Selected</p>
                  <p>Á Space, Nhà Sàn, Goethe-Institut</p>
                </div>
              </CardContent>
              <CardFooter>
                <a href="#contact" className="inline-flex items-center text-sm underline underline-offset-4">Work with me <ArrowRight className="ml-1 h-4 w-4"/></a>
              </CardFooter>
            </Card>
          </div>
        </div>
      </section>

      {/* About */}
      <motion.section id="about" variants={sectionVariants} initial="hidden" whileInView="show" viewport={{ once: true, amount: 0.2 }} transition={{ duration: 0.4 }} className="mx-auto max-w-6xl px-4 py-10">
        <div className="grid md:grid-cols-3 gap-8">
          <div className="md:col-span-1">
            <h2 className="text-2xl font-semibold tracking-tight">About</h2>
          </div>
          <div className="md:col-span-2 text-gray-800 leading-relaxed">
            <p>
              I translate books, essays, interviews, catalogues, and subtitles between Vietnamese and English, with an emphasis on cultural nuance and accuracy. As a writer and curator, I explore ecologies, everyday life, and forms of witnessing in contemporary art.
            </p>
            <p className="mt-4">
              I co‑organize programs at <a className="underline" href="#" target="_blank" rel="noreferrer">Á Space</a> and collaborate with independent artists and institutions. See <a className="underline" href="#projects">Projects & CV</a> for curatorial work.
            </p>
          </div>
        </div>
      </motion.section>

      {/* Translations */}
      <motion.section id="translations" variants={sectionVariants} initial="hidden" whileInView="show" viewport={{ once: true, amount: 0.2 }} transition={{ duration: 0.4 }} className="mx-auto max-w-6xl px-4 py-10 border-t border-gray-100">
        <div className="flex items-baseline justify-between gap-4">
          <h2 className="text-2xl font-semibold tracking-tight flex items-center gap-2"><BookOpen className="h-5 w-5"/>Translations</h2>
          <a href="#" className="text-sm underline underline-offset-4 flex items-center">All translations <ArrowRight className="ml-1 h-4 w-4"/></a>
        </div>
        <div className="mt-6 grid grid-cols-1 md:grid-cols-3 gap-6">
          {translations.map((item, i) => (
            <Card key={i} className="rounded-2xl shadow-sm hover:shadow-md transition-shadow">
              <CardHeader>
                <CardTitle className="text-base leading-snug" dangerouslySetInnerHTML={{ __html: item.title }} />
                <CardDescription>{item.meta}</CardDescription>
              </CardHeader>
              <CardContent className="flex flex-wrap gap-2">
                {item.tags.map((t, j) => (
                  <Badge key={j} variant="secondary">{t}</Badge>
                ))}
              </CardContent>
              <CardFooter>
                <Button asChild variant="ghost" className="px-0">
                  <a href={item.link} className="inline-flex items-center">View <ExternalLink className="ml-2 h-4 w-4"/></a>
                </Button>
              </CardFooter>
            </Card>
          ))}
        </div>
      </motion.section>

      {/* Writings */}
      <motion.section id="writings" variants={sectionVariants} initial="hidden" whileInView="show" viewport={{ once: true, amount: 0.2 }} transition={{ duration: 0.4 }} className="mx-auto max-w-6xl px-4 py-10 border-t border-gray-100">
        <div className="flex items-baseline justify-between gap-4">
          <h2 className="text-2xl font-semibold tracking-tight flex items-center gap-2"><FileText className="h-5 w-5"/>Writings</h2>
          <a href="#" className="text-sm underline underline-offset-4 flex items-center">All writings <ArrowRight className="ml-1 h-4 w-4"/></a>
        </div>
        <div className="mt-6 grid grid-cols-1 md:grid-cols-3 gap-6">
          {writings.map((item, i) => (
            <Card key={i} className="rounded-2xl shadow-sm hover:shadow-md transition-shadow">
              <CardHeader>
                <CardTitle className="text-base leading-snug">{item.title}</CardTitle>
                <CardDescription>{item.meta}</CardDescription>
              </CardHeader>
              <CardContent className="flex flex-wrap gap-2">
                {item.tags.map((t, j) => (
                  <Badge key={j} variant="outline">{t}</Badge>
                ))}
              </CardContent>
              <CardFooter>
                <Button asChild variant="ghost" className="px-0">
                  <a href={item.link} className="inline-flex items-center">Read <ExternalLink className="ml-2 h-4 w-4"/></a>
                </Button>
              </CardFooter>
            </Card>
          ))}
        </div>
      </motion.section>

      {/* Notes */}
      <motion.section id="notes" variants={sectionVariants} initial="hidden" whileInView="show" viewport={{ once: true, amount: 0.2 }} transition={{ duration: 0.4 }} className="mx-auto max-w-6xl px-4 py-10 border-t border-gray-100">
        <div className="flex items-baseline justify-between gap-4">
          <h2 className="text-2xl font-semibold tracking-tight flex items-center gap-2"><StickyNote className="h-5 w-5"/>Notes</h2>
          <a href="#" className="text-sm underline underline-offset-4 flex items-center">All notes <ArrowRight className="ml-1 h-4 w-4"/></a>
        </div>
        <div className="mt-6 grid grid-cols-1 md:grid-cols-3 gap-6">
          {notes.map((n, i) => (
            <Card key={i} className="rounded-2xl shadow-sm">
              <CardContent className="pt-6">
                <p className="text-sm leading-relaxed">{n.text}</p>
              </CardContent>
              <CardFooter className="flex items-center justify-between text-xs text-gray-500">
                <span>{n.date}</span>
                <a className="inline-flex items-center underline underline-offset-4" href={n.link}>Open <LinkIcon className="ml-1 h-3 w-3"/></a>
              </CardFooter>
            </Card>
          ))}
        </div>
      </motion.section>

      {/* Projects & CV CTA */}
      <section id="projects" className="mx-auto max-w-6xl px-4 py-16 border-t border-gray-100">
        <div className="rounded-2xl p-6 md:p-10 bg-gray-50">
          <div className="md:flex items-center justify-between gap-6">
            <div>
              <h3 className="text-xl md:text-2xl font-semibold tracking-tight">Projects & CV</h3>
              <p className="mt-2 text-gray-700">A separate space dedicated to curatorial projects, exhibitions, and a full CV.</p>
            </div>
            <div className="mt-4 md:mt-0">
              <Button asChild size="lg">
                <a href="/projects" className="inline-flex items-center">Go to project site <ArrowRight className="ml-2 h-4 w-4"/></a>
              </Button>
            </div>
          </div>
        </div>
      </section>

      {/* Footer */}
      <footer className="border-t border-gray-100 py-10">
        <div className="mx-auto max-w-6xl px-4 text-sm text-gray-600">
          <div className="flex flex-col md:flex-row items-start md:items-center justify-between gap-6">
            <p>© {new Date().getFullYear()} Châu Hoàng. All rights reserved.</p>
            <div className="flex items-center gap-4">
              <a className="underline underline-offset-4" href="#">Newsletter</a>
              <a className="underline underline-offset-4" href="#">Instagram</a>
              <a className="underline underline-offset-4" href="#">Are.na</a>
            </div>
          </div>
        </div>
      </footer>
    </div>
  );
}