export default function PersonalBlogHomepage() {
  const topics = [
    { name: "Systems", sub: "Workflows", icon: "⚙️" },
    { name: "Thinking", sub: "Mental Models", icon: "🧠" },
    { name: "AI", sub: "Tools & Ideas", icon: "🤖" },
    { name: "Building", sub: "Projects", icon: "🧩" },
    { name: "Travel", sub: "Experiences", icon: "✈️" },
    { name: "Reading", sub: "Notes", icon: "📚" },
    { name: "Life", sub: "Lessons", icon: "☕" },
  ];

  const latestPosts = [
    {
      category: "TOOLS · AI",
      title: "10 AI Tools I Use Daily (That Actually Save Time)",
      readTime: "5 min read",
      bg: "from-stone-100 to-orange-50",
      art: "desk",
    },
    {
      category: "THINKING",
      title: "How I Take Notes for Better Thinking",
      readTime: "6 min read",
      bg: "from-orange-50 to-stone-100",
      art: "notes",
    },
    {
      category: "TRAVEL",
      title: "Lessons from My Trip to Japan",
      readTime: "7 min read",
      bg: "from-sky-50 to-stone-100",
      art: "mountains",
    },
    {
      category: "SYSTEMS",
      title: "The Framework I Use for Decision Making",
      readTime: "4 min read",
      bg: "from-stone-100 to-amber-50",
      art: "whiteboard",
    },
  ];

  return (
    <div className="min-h-screen bg-[#f7f2eb] text-neutral-900">
      <div className="mx-auto max-w-7xl px-4 py-6 md:px-8 lg:px-10">
        <header className="mb-8 flex flex-col gap-4 border-b border-neutral-200 pb-5 lg:flex-row lg:items-center lg:justify-between">
          <div className="flex items-center gap-3">
            <div className="rounded-2xl border border-orange-200 bg-white px-3 py-2 shadow-sm">
              <span className="text-2xl font-black tracking-tight">JETT</span>
              <div className="mt-1 h-1 w-14 rounded-full bg-orange-400" />
            </div>
            <div className="hidden text-sm text-neutral-500 md:block">
              Personal blog · systems, ideas, and how things work
            </div>
          </div>

          <nav className="flex flex-wrap items-center gap-5 text-sm font-medium text-neutral-700">
            <a className="border-b-2 border-neutral-900 pb-1 text-neutral-900" href="#">Home</a>
            <a className="hover:text-neutral-900" href="#">Systems</a>
            <a className="hover:text-neutral-900" href="#">Thinking</a>
            <a className="hover:text-neutral-900" href="#">AI</a>
            <a className="hover:text-neutral-900" href="#">Travel</a>
            <a className="hover:text-neutral-900" href="#">Projects</a>
            <a className="hover:text-neutral-900" href="#">Notes</a>
            <button className="rounded-xl bg-neutral-950 px-4 py-2 text-white shadow-sm transition hover:opacity-90">
              Subscribe
            </button>
          </nav>
        </header>

        <main className="space-y-8">
          <section className="grid gap-8 lg:grid-cols-[1.05fr_1fr] lg:items-center">
            <div className="space-y-5">
              <div className="inline-flex items-center gap-2 rounded-full border border-orange-200 bg-white px-4 py-2 text-sm text-neutral-600 shadow-sm">
                <span>✍️</span>
                <span>Building · Learning · Sharing</span>
              </div>

              <h1 className="max-w-2xl text-5xl font-black tracking-tight text-neutral-950 md:text-6xl">
                I break down <span className="italic text-orange-500">systems, ideas,</span> and how things work.
              </h1>

              <p className="max-w-xl text-lg leading-8 text-neutral-600">
                Exploring the intersection of technology, thinking, travel, and building a meaningful life.
              </p>

              <div className="flex flex-wrap gap-3">
                <button className="rounded-2xl bg-neutral-950 px-6 py-3 text-base font-semibold text-white shadow-sm transition hover:opacity-90">
                  Read Latest →
                </button>
                <button className="rounded-2xl border border-neutral-300 bg-white px-6 py-3 text-base font-semibold text-neutral-800 shadow-sm transition hover:bg-neutral-50">
                  Explore Topics
                </button>
              </div>
            </div>

            <div className="relative overflow-hidden rounded-[2rem] border border-neutral-200 bg-gradient-to-br from-[#fbf7f1] to-[#f0e6d8] p-6 shadow-[0_20px_60px_rgba(0,0,0,0.08)]">
              <div className="absolute left-8 top-8 h-24 w-24 rounded-full bg-orange-200/40 blur-2xl" />
              <div className="absolute right-12 top-10 h-28 w-28 rounded-full bg-sky-200/40 blur-2xl" />

              <div className="grid gap-4 md:grid-cols-[1.2fr_0.8fr] md:items-end">
                <div className="space-y-4">
                  <div className="rounded-3xl border border-neutral-200 bg-white/90 p-5 shadow-sm">
                    <div className="mb-3 flex items-center gap-3">
                      <div className="h-10 w-10 rounded-2xl bg-orange-100" />
                      <div className="h-3 w-24 rounded-full bg-neutral-200" />
                    </div>
                    <div className="grid grid-cols-3 gap-3">
                      {Array.from({ length: 9 }).map((_, i) => (
                        <div key={i} className={`h-12 rounded-xl border border-neutral-200 ${i % 3 === 0 ? "bg-orange-50" : i % 2 === 0 ? "bg-stone-50" : "bg-white"}`} />
                      ))}
                    </div>
                  </div>
                  <div className="flex gap-3">
                    <span className="rounded-full border border-neutral-200 bg-white px-3 py-1 text-xs text-neutral-600">Systems</span>
                    <span className="rounded-full border border-neutral-200 bg-white px-3 py-1 text-xs text-neutral-600">Ideas</span>
                    <span className="rounded-full border border-neutral-200 bg-white px-3 py-1 text-xs text-neutral-600">Build</span>
                  </div>
                </div>

                <div className="relative mx-auto flex aspect-[4/5] w-full max-w-sm items-end justify-center rounded-[2rem] bg-gradient-to-b from-[#fdf8f3] to-[#eadbc7] p-4">
                  <div className="absolute right-4 top-4 rounded-full border border-orange-200 bg-white px-3 py-1 text-xs font-medium text-neutral-700 shadow-sm">Thinking mode</div>
                  <div className="absolute left-3 top-16 h-14 w-14 rounded-2xl bg-white shadow-sm" />
                  <div className="absolute left-10 top-10 h-16 w-16 rounded-full border-2 border-dashed border-neutral-300" />
                  <div className="absolute right-10 top-24 h-12 w-12 rounded-xl bg-orange-100 shadow-sm" />

                  <div className="relative flex h-full w-full items-end justify-center">
                    <div className="absolute bottom-0 h-20 w-56 rounded-t-[3rem] bg-neutral-200/70" />
                    <div className="relative z-10 flex flex-col items-center">
                      <div className="mb-[-8px] h-16 w-16 rounded-full bg-[#f0c6a6] shadow-sm" />
                      <div className="mb-[-50px] h-10 w-20 rounded-b-[999px] bg-[#2a241f]" />
                      <div className="relative h-48 w-44 rounded-t-[3rem] bg-[#252525] shadow-lg">
                        <div className="absolute left-1/2 top-12 h-10 w-10 -translate-x-1/2 rounded-full border border-white/40" />
                        <div className="absolute left-6 top-8 h-4 w-14 rotate-12 rounded-full bg-[#f0c6a6]" />
                        <div className="absolute right-2 top-20 h-24 w-20 rotate-[-8deg] rounded-[1.6rem] border border-neutral-700 bg-[#a8a8a8] shadow-md" />
                      </div>
                    </div>
                  </div>
                </div>
              </div>
            </div>
          </section>

          <section className="rounded-[2rem] border border-neutral-200 bg-white/70 p-4 shadow-sm">
            <div className="grid gap-3 sm:grid-cols-2 lg:grid-cols-7">
              {topics.map((topic) => (
                <div key={topic.name} className="rounded-2xl border border-neutral-200 bg-white p-4 text-center transition hover:-translate-y-0.5 hover:shadow-md">
                  <div className="mb-2 text-3xl">{topic.icon}</div>
                  <div className="text-lg font-bold text-neutral-900">{topic.name}</div>
                  <div className="text-sm text-neutral-500">{topic.sub}</div>
                </div>
              ))}
            </div>
          </section>

          <section className="grid gap-8 xl:grid-cols-[1fr_300px]">
            <div className="space-y-8">
              <div>
                <div className="mb-4 flex items-center justify-between">
                  <h2 className="text-3xl font-black tracking-tight">Featured Post</h2>
                </div>
                <article className="grid overflow-hidden rounded-[2rem] border border-neutral-200 bg-white shadow-sm md:grid-cols-[0.9fr_1.1fr]">
                  <div className="min-h-[260px] bg-gradient-to-br from-[#f7efe3] to-[#ece2d4] p-6">
                    <div className="grid h-full grid-cols-4 gap-3">
                      {Array.from({ length: 12 }).map((_, i) => (
                        <div key={i} className={`rounded-xl border border-neutral-200 ${i % 4 === 0 ? "bg-orange-100" : i % 3 === 0 ? "bg-stone-200" : "bg-white"}`} />
                      ))}
                    </div>
                  </div>
                  <div className="space-y-4 p-8">
                    <h3 className="max-w-xl text-4xl font-black leading-tight tracking-tight">
                      Building My Productivity System <span className="text-neutral-500">(What Actually Works)</span>
                    </h3>
                    <p className="max-w-2xl text-lg leading-8 text-neutral-600">
                      After testing 20+ tools and frameworks, here’s the simple system I use to stay focused, organize everything, and ship work.
                    </p>
                    <div className="flex flex-wrap items-center gap-3 text-sm text-neutral-500">
                      <span className="rounded-full bg-stone-100 px-3 py-1">Systems</span>
                      <span className="rounded-full bg-stone-100 px-3 py-1">Productivity</span>
                      <span>8 min read</span>
                    </div>
                  </div>
                </article>
              </div>

              <div>
                <div className="mb-4 flex items-center justify-between">
                  <h2 className="text-3xl font-black tracking-tight">Latest Posts</h2>
                  <a href="#" className="text-sm font-semibold text-neutral-600 hover:text-neutral-900">View all →</a>
                </div>
                <div className="grid gap-5 md:grid-cols-2 xl:grid-cols-4">
                  {latestPosts.map((post) => (
                    <article key={post.title} className="overflow-hidden rounded-[1.6rem] border border-neutral-200 bg-white shadow-sm transition hover:-translate-y-1 hover:shadow-lg">
                      <div className={`h-44 bg-gradient-to-br ${post.bg} p-4`}>
                        {post.art === "desk" && (
                          <div className="flex h-full items-end gap-3">
                            <div className="h-20 w-28 rounded-2xl border border-neutral-300 bg-white shadow-sm" />
                            <div className="h-24 w-20 rounded-2xl border border-neutral-300 bg-stone-200" />
                            <div className="mb-1 h-10 w-10 rounded-full bg-orange-200" />
                          </div>
                        )}
                        {post.art === "notes" && (
                          <div className="flex h-full items-center justify-center">
                            <div className="w-full max-w-[220px] rotate-[-8deg] rounded-2xl border border-neutral-300 bg-white p-4 shadow-sm">
                              <div className="space-y-2">
                                <div className="h-2 w-24 rounded-full bg-neutral-300" />
                                <div className="h-2 w-32 rounded-full bg-orange-300" />
                                <div className="h-2 w-20 rounded-full bg-neutral-200" />
                                <div className="h-2 w-28 rounded-full bg-neutral-300" />
                              </div>
                            </div>
                          </div>
                        )}
                        {post.art === "mountains" && (
                          <div className="relative h-full overflow-hidden rounded-2xl border border-white/40 bg-sky-100">
                            <div className="absolute bottom-0 left-0 h-16 w-full bg-emerald-200" />
                            <div className="absolute bottom-8 left-4 h-16 w-24 rotate-12 rounded-t-[4rem] bg-stone-300" />
                            <div className="absolute bottom-8 right-5 h-20 w-28 rounded-t-[5rem] bg-stone-400" />
                            <div className="absolute left-1/2 top-4 h-8 w-8 -translate-x-1/2 rounded-full bg-yellow-200" />
                          </div>
                        )}
                        {post.art === "whiteboard" && (
                          <div className="grid h-full grid-cols-3 gap-3">
                            {Array.from({ length: 6 }).map((_, i) => (
                              <div key={i} className={`rounded-xl border border-neutral-300 ${i % 2 === 0 ? "bg-white" : "bg-stone-200"}`} />
                            ))}
                          </div>
                        )}
                      </div>
                      <div className="space-y-3 p-5">
                        <div className="text-xs font-bold tracking-wide text-orange-500">{post.category}</div>
                        <h3 className="text-2xl font-black leading-tight tracking-tight">{post.title}</h3>
                        <div className="text-sm text-neutral-500">{post.readTime}</div>
                      </div>
                    </article>
                  ))}
                </div>
              </div>
            </div>

            <aside className="space-y-5">
              <div className="rounded-[2rem] border border-neutral-200 bg-white p-6 shadow-sm">
                <h3 className="mb-4 text-3xl font-black tracking-tight">About Me</h3>
                <div className="mb-4 flex justify-center">
                  <div className="flex h-32 w-32 items-end justify-center rounded-full bg-gradient-to-b from-sky-100 to-orange-50">
                    <div className="mb-1 flex flex-col items-center">
                      <div className="mb-[-8px] h-12 w-12 rounded-full bg-[#f0c6a6]" />
                      <div className="mb-[-38px] h-6 w-14 rounded-b-full bg-[#2a241f]" />
                      <div className="h-24 w-20 rounded-t-[2rem] bg-[#30353b]" />
                    </div>
                  </div>
                </div>
                <p className="text-base leading-7 text-neutral-600">
                  I’m JETT — I explore the systems behind productivity, technology, travel, and personal growth.
                </p>
                <div className="mt-4 flex flex-wrap gap-2">
                  {['Builder', 'Thinker', 'Learner'].map((tag) => (
                    <span key={tag} className="rounded-full bg-stone-100 px-3 py-1 text-sm text-neutral-600">{tag}</span>
                  ))}
                </div>
                <a href="#" className="mt-4 inline-block text-sm font-semibold text-neutral-700 hover:text-neutral-900">More about me →</a>
              </div>

              <div className="rounded-[2rem] border border-neutral-200 bg-white p-6 shadow-sm">
                <h3 className="mb-4 text-2xl font-black tracking-tight">Popular Topics</h3>
                <div className="space-y-3">
                  {[
                    ['Productivity', 12],
                    ['AI & Tools', 8],
                    ['Systems Thinking', 15],
                    ['Travel', 6],
                  ].map(([name, count]) => (
                    <div key={name} className="flex items-center justify-between rounded-xl bg-stone-50 px-4 py-3">
                      <span className="font-medium text-neutral-700">{name}</span>
                      <span className="rounded-full bg-white px-3 py-1 text-sm text-neutral-500">{count}</span>
                    </div>
                  ))}
                </div>
              </div>

              <div className="rounded-[2rem] border border-neutral-200 bg-white p-6 shadow-sm">
                <div className="mb-3 text-3xl">✉️</div>
                <h3 className="text-2xl font-black tracking-tight">Get new posts</h3>
                <p className="mt-2 text-sm leading-6 text-neutral-500">Delivered weekly. Thoughtful notes on systems, work, and life.</p>
                <div className="mt-4 flex gap-2">
                  <input
                    className="w-full rounded-xl border border-neutral-300 bg-stone-50 px-4 py-3 outline-none ring-0 placeholder:text-neutral-400 focus:border-neutral-500"
                    placeholder="Your email"
                  />
                  <button className="rounded-xl bg-neutral-950 px-4 text-white">→</button>
                </div>
              </div>
            </aside>
          </section>

          <section className="rounded-[2rem] border border-neutral-200 bg-white px-6 py-5 text-center shadow-sm">
            <p className="text-2xl italic tracking-tight text-neutral-700 md:text-3xl">
              “The best way to predict the future is to <span className="font-black text-orange-500 not-italic">build</span> it.”
            </p>
          </section>
        </main>
      </div>
    </div>
  );
}