const [data, setData] = useState({});

const [selectedItem, setSelectedItem] = useState(null);

const [isModalOpen, setIsModalOpen] = useState(false);

const navigate = useNavigate();

useEffect(() => {

const fetchData = async () => {

try {

const response = await fetch('/about-me/transmissions.piml');

if (response.ok) {

const text = await response.text();

const parsed = piml.parse(text);

setData(parsed);

}

} catch (error) {

console.error('Failed to load links:', error);

}

};

fetchData();

}, []);

const handleTileClick = (item) => {

setSelectedItem(item);

setIsModalOpen(true);

};

const getCategoryIcon = (key) => {

switch (key) {

case 'friends':

return (

<Users size={32} weight="duotone" className="text-emerald-500" />

);

case 'books':

return (

<BookOpen size={32} weight="duotone" className="text-cyan-500" />

);

default:

return (

<Broadcast size={32} weight="duotone" className="text-rose-500" />

);

}

};

const getCategoryLabel = (key) => {

switch (key) {

case 'friends':

return 'Parallel Realities';

case 'books':

return 'Archive Access';

default:

return key.charAt(0).toUpperCase() + key.slice(1);

}

};

return (

<div className="min-h-screen bg-[#0c0a09] text-white p-8 md:p-24 selection:bg-emerald-500/30 relative overflow-x-hidden">

<Seo

title="Friends of the Show | Fezcodex"

description="A curated list of signals, portals, and archives from the digital garden."

/>

{/* Structural Grid Background */}

<div

className="fixed inset-0 opacity-[0.05] pointer-events-none"

style={{

backgroundImage:

'linear-gradient(#fff 1px, transparent 1px), linear-gradient(90deg, #fff 1px, transparent 1px)',

backgroundSize: '100px 100px',

}}

/>

{/* Decorative Art Background - Increased visibility */}

<div className="fixed inset-0 opacity-[0.08] pointer-events-none">

<GenerativeArt seed="Friends of the Show 2" className="w-full h-full" />

</div>

{/* Scanline Effect */}

<div className="fixed inset-0 pointer-events-none z-50 overflow-hidden opacity-20">

<motion.div

initial={{ y: -100 }}

animate={{ y: '100vh' }}

transition={{ duration: 8, repeat: Infinity, ease: 'linear' }}

className="w-full h-24 bg-gradient-to-b from-transparent via-emerald-500/10 to-transparent"

/>

</div>

<BrutalistModal

isOpen={isModalOpen}

onClose={() => setIsModalOpen(false)}

maxWidth="max-w-4xl"

title={

<span className="font-playfairDisplay font-bold normal-case text-3xl">

{selectedItem?.title}

</span>

}

>

{' '}

<div className="flex flex-col md:flex-row -m-8 min-h-[400px]">

{/* Left Side: All Generative Art */}

<div className="w-full md:w-5/12 border-b md:border-b-0 md:border-r border-white/10 relative overflow-hidden bg-black">

<div className="absolute inset-0 z-0">

<GenerativeArt

seed={selectedItem?.title || 'void'}

className="w-full h-full"

/>

</div>

{/* Aesthetic Overlays */}

<div className="absolute inset-0 bg-gradient-to-r from-black/20 to-transparent pointer-events-none" />

<div className="absolute inset-0 bg-[radial-gradient(circle_at_center,transparent_0%,rgba(0,0,0,0.4)_100%)] pointer-events-none" />

</div>

{/* Right Side: Detailed Transmission Data */}

<div className="w-full md:w-7/12 p-10 flex flex-col bg-[#050505] relative">

<div className="mb-8">

<div className="flex items-center gap-3 mb-4">

<div className="w-8 h-[1px] bg-emerald-500" />

<span className="font-mono text-[10px] uppercase tracking-[0.4em] text-emerald-500/70">

Secure Transmission

</span>

</div>

{selectedItem?.author && (

<p className="font-mono text-xs uppercase tracking-[0.2em] text-gray-500 border-l border-emerald-500/30 pl-4 py-1">

Origin: {selectedItem.author}

</p>

)}

</div>

<div className="flex-grow">

{selectedItem?.description && (

<p className="font-garamond text-xl md:text-2xl text-gray-300 leading-relaxed opacity-90">

"{selectedItem.description}"

</p>

)}

</div>

{selectedItem?.url && (

<div className="mt-12 pt-8 border-t border-white/5">

<a

href={selectedItem.url}

target="_blank"

rel="noopener noreferrer"

className="group flex items-center justify-between w-full p-4 bg-emerald-950/30 border border-emerald-500/30 hover:bg-emerald-500 hover:border-emerald-500 hover:text-black transition-all duration-300"

>

<span className="font-mono text-xs font-bold uppercase tracking-[0.2em] text-emerald-500 group-hover:text-black transition-colors">

Establish Portal Connection

</span>

<ArrowSquareOut

size={20}

weight="bold"

className="text-emerald-500 group-hover:text-black group-hover:translate-x-1 transition-all"

/>

</a>

</div>

)}

{/* Subtle Corner Decoration */}

<div className="absolute bottom-4 right-4 opacity-10 pointer-events-none">

<Broadcast size={40} weight="thin" className="text-emerald-500" />

</div>

</div>

</div>

</BrutalistModal>

<div className="relative z-10">

{/* Navigation */}

<motion.div

initial={{ opacity: 0, x: -20 }}

animate={{ opacity: 1, x: 0 }}

className="mb-16 flex items-center gap-4"

>

<button

onClick={() => navigate(-1)}

className="group flex items-center gap-3 text-gray-500 hover:text-white transition-all duration-300 font-mono text-xs uppercase tracking-[0.3em] bg-white/5 px-4 py-2 border border-white/10 hover:border-emerald-500/50"

>

<ArrowLeft

weight="bold"

className="group-hover:-translate-x-1 transition-transform"

/>

<span>Return to Archive</span>

</button>

<div className="h-px flex-grow bg-white/10" />

</motion.div>

<div className="max-w-7xl mx-auto">

<header className="mb-32 relative">

<div className="absolute -left-12 top-0 bottom-0 w-1 bg-emerald-500 hidden xl:block" />

<h1 className="text-7xl md:text-9xl font-black font-playfairDisplay italic uppercase tracking-tighter mb-6 leading-none">

<span className="text-emerald-500">Friends</span> of the{' '}

<span className="text-lime-500">Show</span>

</h1>

<p className="text-xl md:text-2xl text-gray-500 font-arvo max-w-2xl leading-relaxed border-l-2 border-white/10 pl-6">

Signals from parallel realities and archived transmissions from

the digital garden.

</p>

</header>

<div className="space-y-48">

{Object.entries(data).map(([key, content], idx) => {

let items = [];

if (Array.isArray(content)) {

items = content;

} else if (

content &&

typeof content === 'object' &&

content.item

) {

items = Array.isArray(content.item)

? content.item

: [content.item];

}

if (items.length === 0) return null;

return (

<motion.section

key={key}

initial={{ opacity: 0, y: 40 }}

whileInView={{ opacity: 1, y: 0 }}

viewport={{ once: true }}

transition={{ duration: 0.8, delay: idx * 0.1 }}

className="space-y-16"

>

<div className="flex items-center gap-8">

<div className="p-6 bg-white/5 border border-white/10 rounded-sm relative group overflow-hidden">

<div className="absolute inset-0 bg-emerald-500/0 group-hover:bg-emerald-500/5 transition-colors" />

{getCategoryIcon(key)}

</div>

<div className="flex-grow">

<div className="flex items-center gap-4 mb-2">

<h2 className="text-4xl md:text-6xl font-normal font-playfairDisplay uppercase tracking-tighter">

{getCategoryLabel(key)}

</h2>

<div className="h-px flex-grow bg-white/10" />

<span className="font-mono text-[10px] text-emerald-500/50 uppercase tracking-[0.2em]">

Section_{idx + 1}

</span>

</div>

<p className="text-xs font-mono text-gray-500 uppercase tracking-[0.4em]">

Transmissions detected in the {key} sector.

</p>

</div>

</div>

<div className="grid grid-cols-1 sm:grid-cols-1 lg:grid-cols-2 xl:grid-cols-3 gap-16">

{items.map((item, iIdx) => (

<TransmissionTile

key={iIdx}

item={item}

categoryKey={key}

onClick={handleTileClick}

/>

))}

</div>

</motion.section>

);

})}

</div>

</div>

<footer className="mt-64 pt-24 border-t border-white/10 relative">

<div className="absolute top-0 left-1/2 -translate-x-1/2 -translate-y-1/2 px-8 bg-[#050505]">

<Broadcast size={32} className="text-emerald-500 animate-pulse" />

</div>

<p className="font-mono text-[10px] text-gray-600 uppercase tracking-[0.5em] text-center mb-4">

End of Line // Transmission Terminated

</p>

<div className="flex justify-center gap-12 opacity-20">

{[...Array(6)].map((_, i) => (

<div key={i} className="w-1 h-1 bg-white rounded-full" />

))}

</div>

</footer>

</div>

</div>

);