import { Code } from "lucide-react"

const principles = [
  {
    title: "Reliability over cleverness",
    description:
      "Clever code is fun to write and painful to debug. I optimize for systems that fail gracefully and recover quickly.",
  },
  {
    title: "Measure before optimizing",
    description:
      "Intuition about performance is usually wrong. Profile first, optimize the actual bottleneck, verify the improvement.",
  },
  {
    title: "Boring technology",
    description:
      "New tools have unknown failure modes. I prefer proven solutions unless there's a compelling reason to experiment.",
  },
  {
    title: "Make it debuggable",
    description:
      "Good logs, clear error messages, and observability aren't afterthoughts. They're how you survive production.",
  },
]

export function Philosophy() {
    return (
        <section id="philosophy" 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">How I Build</h2>
                        <div className="mt-2 w-12 h-px bg-primary" />
                    </div>

                    {/* Content */}
                    <div className="space-y-8">
                        {/* Code block syle quote */}
                        <div className="bg-card border border-border rounded-lg p-4 font-mono text-sm">
                            <div className="flex items-center gap-2 text-muted-foreground mb-3">
                                <Code size={14} className="text-primary" />
                                <span>philosophy.md</span>
                            </div>
                            <pre className="text-muted-foreground whitespace-pre-wrap">
                                <code>
                                    {`# Engineering principles

The best code is code you don't have to think about.
It handles edge cases, logs what matters, and
fails in predictable ways.

Ship small, ship often, and always have a rollback plan.`}
                                </code>
                            </pre>
                        </div>

                        {/* Principles grid */}
                        <div className="grid sm:grid-cols-2 gap-6">
                            {principles.map((principle) => (
                                <div key={principle.title} className="space-y-2">
                                    <h3 className="font-medium text-foreground">{principle.title}</h3>
                                    <p className="text-sm text-muted-foreground leading-relaxed">{principle.description}</p>
                                </div>
                            ))}
                        </div>
                    </div>
                </div>
            </div>
        </section>
    )
}