import {LandingLayout} from '@/components/landing/landing-layout';
import {useNavigate} from 'react-router-dom';
import {ArrowRight, Book} from 'lucide-react';

import {useHead} from '@/hooks/useHead';
const TEAM = [
    {name: 'Alex Chen', role: 'Founder & CEO', initials: 'AC'},
    {name: 'Sarah Kim', role: 'CTO', initials: 'SK'},
    {name: 'Marcus Johnson', role: 'Head of Engineering', initials: 'MJ'},
    {name: 'Priya Patel', role: 'Head of Product', initials: 'PP'},
];

export default function AboutPage() {

    useHead({ title: 'About — GitDataAI', description: 'We believe every engineering action should be a versioned command. GitDataAI: Where Humans & Agents Engineer Together.' });
    const navigate = useNavigate();
    return (
        <LandingLayout>
            <section className="pt-24 pb-32">
                <div className="mx-auto max-w-5xl px-6">
                    {/* Hero */}
                    <div className="text-center mb-20">
                        <h1 className="text-4xl md:text-6xl font-semibold tracking-tight mb-4">
                            About GitDataAI
                        </h1>
                        <p className="text-lg text-zinc-500 dark:text-zinc-500 max-w-2xl mx-auto">
                            We believe every engineering action should be a versioned command — auditable, replayable, and human-approved. We are building the Command as Service platform for the agentic era.
                        </p>
                    </div>

                    {/* Mission */}
                    <div
                        className="mb-24 p-10 md:p-14 rounded-3xl border border-zinc-200 dark:border-zinc-800 bg-zinc-50 dark:bg-zinc-900/50 text-center">
                        <h2 className="text-2xl md:text-3xl font-semibold mb-6 max-w-3xl mx-auto leading-tight">
                            "Every action is a command. Every command is versioned and auditable."
                        </h2>
                        <p className="text-sm text-zinc-500 dark:text-zinc-400 max-w-xl mx-auto">
                            GitDataAI was founded to bring Command as Service to the agentic era — every agent decision versioned, every command stream auditable, every human-in-the-loop action approved.
                        </p>
                    </div>

                    {/* Values */}
                    <div className="mb-24">
                        <h2 className="text-2xl font-semibold text-center mb-10">Our Values</h2>
                        <div className="grid md:grid-cols-2 gap-5">
                            {[
                                ['Transparency', 'Every agent decision is logged, versioned, and auditable. No black boxes.'],
                                ['Collaboration', 'Humans and agents are peers. Neither replaces the other — together they achieve more.'],
                                ['Reliability', 'Production-grade infrastructure. Your agents run when you need them to.'],
                                ['Extensibility', 'Open registry, open API. The network grows through community contributions.'],
                            ].map(([title, desc]) => (
                                <div key={title}
                                     className="p-6 rounded-2xl border border-zinc-200 dark:border-zinc-800 bg-white dark:bg-zinc-950">
                                    <h3 className="text-sm font-semibold mb-2">{title}</h3>
                                    <p className="text-xs text-zinc-500 dark:text-zinc-400 leading-relaxed">{desc}</p>
                                </div>
                            ))}
                        </div>
                    </div>

                    {/* Team */}
                    <div className="mb-24">
                        <h2 className="text-2xl font-semibold text-center mb-10">The Team</h2>
                        <div className="grid grid-cols-2 md:grid-cols-4 gap-5">
                            {TEAM.map(member => (
                                <div key={member.name}
                                     className="text-center p-6 rounded-2xl border border-zinc-200 dark:border-zinc-800 bg-white dark:bg-zinc-950">
                                    <div
                                        className="h-12 w-12 rounded-full bg-zinc-100 dark:bg-zinc-800 flex items-center justify-center text-sm font-semibold text-zinc-600 dark:text-zinc-400 mx-auto mb-3">
                                        {member.initials}
                                    </div>
                                    <h3 className="text-sm font-semibold">{member.name}</h3>
                                    <p className="text-xs text-zinc-500">{member.role}</p>
                                </div>
                            ))}
                        </div>
                    </div>

                    {/* CTA */}
                    <div className="text-center">
                        <p className="text-sm text-zinc-500 mb-4">We are hiring. Come build with us.</p>
                        <div className="flex gap-3 justify-center">
                            <button onClick={() => navigate('/auth/register')}
                                    className="h-10 px-6 bg-zinc-900 dark:bg-white text-white dark:text-zinc-900 rounded-full text-sm font-medium hover:bg-zinc-800 dark:hover:bg-zinc-100 transition-colors flex items-center gap-2">
                                Join GitDataAI <ArrowRight className="h-4 w-4"/>
                            </button>
                            <button
                                className="h-10 px-6 rounded-full border border-zinc-200 dark:border-zinc-800 hover:bg-zinc-50 dark:hover:bg-zinc-900/50 text-sm font-medium transition-colors flex items-center gap-2">
                                <Book className="h-4 w-4"/>
                                GitHub
                            </button>
                        </div>
                    </div>
                </div>
            </section>
        </LandingLayout>
    );
}
