import { Server, Database, Shield, Gauge } from "lucide-react"

const highlights = [
  { icon: Server, label: "Backend Architecture" },
  { icon: Database, label: "Database Design" },
  { icon: Shield, label: "Security" },
  { icon: Gauge, label: "Performance" },
]

export function About() {
    return (
        <section id="about" className="py-24 border-t border-border">
            <div className="max-w-4xl mx-auto px-6">
                <div className="grid md:grid-cols-[200px_1fr] gap-8 md:gap-12">
                    {/* Section label */}
                    <div>
                        <h2 className="font-mono text-sm text-muted-foreground uppercase tracking-wider">About</h2>
                        <div className="mt-2 w-12 h-px bg-primary" />
                    </div>

                    {/* Content */}
                    <div className="space-y-6">
                        <p className="text-lg text-foreground leading-relaxed">
                            I'm a backend developer who cares about what happens after the request hits the server. My work is focused
                            on building reliable, maintainable systems. APIs that don't break, databases that stay fast, infrastructure
                            that handles real-world load.
                        </p>

                        <p className="text-muted-foreground leading-relaxed">
                            As co-founder of{" "}
                            <a
                                href="https://crowware.com"
                                target="_blank"
                                rel="noopener noreferrer"
                                className="text-primary hover:underline"
                            >
                                crowware.com
                            </a>
                            , I've learnt that good engineering isn't about using the newest tools. 
                            It's about making pragmatic choices that serve the product and the team. 
                            I prefer boring technology that works over shiny frameworks that don't.
                        </p>

                        <p className="text-muted-foreground leading-relaxed">
                            When I write code, I think about the person who has to maintain it at 2am. I optimize for clarity,
                            readability and the ability to debug production issues without losing sleep. (also for my own sanity)
                        </p>

                        {/* Highlight badges */}
                        <div className="flex flex-wrap gap-3 pt-4">
                            {highlights.map((item) => (
                                <div key={item.label} className="flex items-center gap-2 px-3 py-1.5 bg-secondary rounded-md">
                                    <item.icon size={14} className="text-primary" />
                                    <span className="text-sm text-secondary-foreground">{item.label}</span>
                                </div>
                            ))}
                        </div>
                    </div>
                </div>
            </div>
        </section>
    )
}