'use client';

import React from 'react';
import Link from 'next/link';
import { Container } from '../../../src/components/Layout';
import { Label } from '../../../src/components/Typography';
import { Check, ArrowLeft, Zap, ExternalLink } from 'lucide-react';
import { technologies } from './data';

export default function TechnologyContent({ slug }: { slug: string }) {
    const tech = technologies[slug];

    if (!tech) {
        return (
            <div className="min-h-screen flex items-center justify-center">
                <div className="text-center">
                    <h1 className="text-4xl font-bold mb-4">Technology Not Found</h1>
                    <Link href="/" className="text-blue-600 hover:underline">Return Home</Link>
                </div>
            </div>
        );
    }

    const Icon = tech.icon;

    return (
        <div className="bg-white min-h-screen text-slate-900 pb-24">
            <div className="bg-slate-50 border-b border-slate-200">
                <Container className="py-24">
                    <Link href="/case-studies/klz-cables" className="inline-flex items-center text-sm font-bold text-slate-500 hover:text-slate-900 mb-8 transition-colors">
                        <ArrowLeft className="w-4 h-4 mr-2" /> Back to Case Study
                    </Link>

                    <div className="flex flex-col md:flex-row items-start gap-8">
                        <div className={`p-6 rounded-2xl shadow-lg ${tech.color}`}>
                            <Icon className="w-12 h-12" />
                        </div>
                        <div className="flex-1">
                            <Label className="text-slate-400 mb-2">TECHNOLOGY DEEP DIVE</Label>
                            <h1 className="text-4xl md:text-5xl font-bold tracking-tight mb-4">{tech.title}</h1>
                            <p className="text-xl text-slate-500 font-medium">{tech.subtitle}</p>
                        </div>
                    </div>
                </Container>
            </div>

            <Container className="py-16">
                <div className="grid grid-cols-1 lg:grid-cols-12 gap-16">
                    <div className="lg:col-span-8 space-y-12">
                        <section>
                            <h2 className="text-2xl font-bold mb-4">What is it?</h2>
                            <p className="text-xl leading-relaxed text-slate-700">{tech.description}</p>
                        </section>

                        <section>
                            <h2 className="text-2xl font-bold mb-6 flex items-center gap-3">
                                <Zap className="w-6 h-6 text-amber-500" /> Why I use it
                            </h2>
                            <div className="grid grid-cols-1 md:grid-cols-2 gap-4">
                                {tech.benefits.map((benefit, i) => (
                                    <div key={i} className="flex gap-3 p-4 bg-slate-50 rounded-xl border border-slate-100">
                                        <Check className="w-5 h-5 text-green-600 shrink-0" />
                                        <span className="font-medium text-slate-700">{benefit}</span>
                                    </div>
                                ))}
                            </div>
                        </section>

                        <section className="bg-blue-50 border border-blue-100 rounded-2xl p-8">
                            <Label className="text-blue-600 mb-2">CUSTOMER IMPACT</Label>
                            <h3 className="text-2xl font-bold text-slate-900 mb-4">What does this mean for you?</h3>
                            <p className="text-lg text-slate-700 leading-relaxed">
                                {tech.customerValue}
                            </p>
                        </section>
                    </div>

                    <div className="lg:col-span-4 space-y-8">
                        <div className="bg-slate-50 border border-slate-200 rounded-2xl p-6 sticky top-24">
                            <h3 className="font-bold text-slate-900 mb-4">Related Technologies</h3>
                            <div className="space-y-2">
                                {tech.related.map((item) => (
                                    <Link
                                        key={item.slug}
                                        href={`/technologies/${item.slug}`}
                                        className="flex items-center justify-between p-3 bg-white border border-slate-200 rounded-lg hover:border-slate-400 hover:shadow-sm transition-all group"
                                    >
                                        <span className="font-medium text-slate-700 group-hover:text-slate-900">{item.name}</span>
                                        <ExternalLink className="w-4 h-4 text-slate-400 group-hover:text-slate-600" />
                                    </Link>
                                ))}
                            </div>
                        </div>
                    </div>
                </div>
            </Container>
        </div>
    );
}