Editorial List

"use client";

import { StaggeredList, StaggeredListItem } from "@/components/ui/editorial-list";
import { ArrowUpRight, Clock, Tag } from "lucide-react";
import { motion } from "framer-motion";

export default function ResponsiveDemo() {
  const newsItems = [
    { date: "04.12", category: "RELEASE", title: "OS 1.0 launches with integrated intelligence.", desc: "A rewritten kernel optimized for ML workflows." },
    { date: "03.28", category: "RESEARCH", title: "Breaking the context barrier in neural architectures.", desc: "Infinite context windows demonstrated." },
    { date: "02.14", category: "COMPANY", title: "Announcing our $50M Series A led by Sequoia.", desc: "Funding the next generation of interfaces." },
  ];

  return (
    <div className="w-full bg-[#fafafa] dark:bg-[#09090b] min-h-screen p-4 sm:p-8 md:p-12 lg:p-24 selection:bg-orange-500/30">
      <div className="max-w-6xl mx-auto">
        
        {/* Responsive Header */}
        <header className="mb-12 md:mb-20">
          <motion.h2 
            initial={{ opacity: 0, x: -20 }}
            animate={{ opacity: 1, x: 0 }}
            className="text-4xl sm:text-6xl lg:text-8xl font-black tracking-tighter mb-6 leading-[0.9]"
          >
            Editorial <br /> <span className="text-orange-500">Responsivity.</span>
          </motion.h2>
          <p className="text-base sm:text-lg md:text-xl text-zinc-500 font-medium max-w-2xl leading-relaxed">
            From mobile viewports to ultra-wide displays, the staggered flow adapts its rhythm.
          </p>
        </header>

        <div className="flex flex-col lg:grid lg:grid-cols-12 gap-12 md:gap-20">
          
          {/* Sidebar: Adaptive Table of Contents */}
          <aside className="col-span-1 lg:col-span-3 order-2 lg:order-1">
            <div className="sticky top-8 md:top-24">
              <h3 className="text-[10px] font-black uppercase tracking-[0.2em] text-zinc-400 mb-6 flex items-center gap-2">
                <Clock size={12} /> Index
              </h3>
              <StaggeredList staggerDelay={0.05} className="space-y-1">
                {["Core", "Shell", "Neural", "Security"].map((item, i) => (
                  <StaggeredListItem key={i} variant="minimal" className="flex items-center justify-between group cursor-pointer border-b border-zinc-100 dark:border-zinc-800 lg:border-none pb-4 lg:pb-0">
                    <div className="flex items-center gap-3">
                      <span className="text-[10px] font-mono text-zinc-400">0{i+1}</span>
                      <span className="text-sm font-bold group-hover:text-orange-500 transition-colors uppercase tracking-tight">{item}</span>
                    </div>
                    <ArrowUpRight size={14} className="opacity-0 group-hover:opacity-100 transition-opacity lg:hidden" />
                  </StaggeredListItem>
                ))}
              </StaggeredList>
            </div>
          </aside>

          {/* Main Feed: Editorial Content */}
          <main className="col-span-1 lg:col-span-9 order-1 lg:order-2">
            <h3 className="text-[10px] font-black uppercase tracking-[0.2em] text-zinc-400 mb-6 flex items-center gap-2">
              <Tag size={12} /> Feed
            </h3>
            <StaggeredList staggerDelay={0.1}>
              {newsItems.map((item, i) => (
                <StaggeredListItem key={i} variant="border-bottom" className="group">
                  <div className="flex flex-col sm:grid sm:grid-cols-12 gap-4 md:gap-8 items-start">
                    
                    {/* Metadata: Mobile hidden or row-based */}
                    <div className="sm:col-span-2 flex sm:flex-col items-center sm:items-start gap-3">
                      <span className="text-xs font-black tracking-tighter opacity-40">{item.date}</span>
                      <span className="h-px w-4 bg-zinc-200 hidden sm:block" />
                      <span className="text-[9px] font-bold text-orange-600 bg-orange-50 dark:bg-orange-500/10 px-2 py-0.5 rounded">
                        {item.category}
                      </span>
                    </div>

                    {/* Content Body */}
                    <div className="sm:col-span-10">
                      <h4 className="text-xl sm:text-2xl md:text-3xl font-bold tracking-tight mb-3 group-hover:text-orange-500 transition-colors leading-tight">
                        {item.title}
                      </h4>
                      <p className="text-sm sm:text-base text-zinc-500 leading-relaxed max-w-xl">
                        {item.desc}
                      </p>
                    </div>
                  </div>
                </StaggeredListItem>
              ))}
            </StaggeredList>
          </main>
        </div>
      </div>
    </div>
  );
}