import { ArrowDown, Terminal } from "lucide-react";
import Link from "next/link";

export function Hero() {
    return (
        <section className="min-h-screen flex flex-col justify-center pt-20 pb-16">
            <div className="max-w-4xl mx-auto px-6 w-full">
                <div className="space-y-8">
                    {/* Terminal Style Intro */}
                    <div className="font-mono text-sm text-muted-foreground flex items-center gap-2">
                        <Terminal size={14} className="text-primary" />
                        <span className="text-primary">~</span>
                        <span>whoami</span>
                    </div>

                    {/* Name */}
                    <h1 className="text-4xl md:text-6xl font-bold text-foreground tracking-tight text-balance">atticl</h1>

                    {/* Tagline */}
                    <p className="text-xl md:text-2xl text-muted-foreground font-light max-w-2xl text-pretty">
                        Backend Developer. Co-Founder.
                        <br />
                        <span className="text-foreground">I build systems that scale.</span>
                    </p>

                    {/* Subtitles */}
                    <div className="font-mono text-sm text-muted-foreground space-y-1">
                        <p>
                            <span className="text-primary">→</span> APIs, databases, architecture
                        </p>
                        <p>
                            <span className="text-primary">→</span> Performance & security at scale
                        </p>
                        <p>
                            <span className="text-primary">→</span> Co-Founder @{" "}
                            <Link href="https://crowware.com" target="_blank" className="text-primary hover:underline">
                                crowware.com
                            </Link>
                        </p>
                    </div>

                    {/* CTA */}
                    <div className="flex flex-wrap gap-4 pt-4">
                        <Link
                            href="#projects"
                            className="inline-flex items-center gap-2 px-5 py-2.5 bg-primary text-primary-foreground font-medium rounded-md hover:bg-primary/90 transition-colors"
                        >
                            View Projects
                        </Link>
                        <Link
                            href="#contact"
                            className="inline-flex items-center gap-2 px-5 py2.5 border border-border text-foreground font-medium rounded-md hover:bg-secondary transition-colors"
                        >
                            Get in Touch
                        </Link>
                    </div>
                </div>

                {/* Scroll indicator */}
                <div className=" mt-20 flex justify-center">
                    <ArrowDown size={20} className="text-muted-foreground animate-bounce" />
                </div>
            </div>
        </section>
    )
}