'use client';

import Link from 'next/link';
import { Shield, Users, Zap, TrendingUp, Globe, Award, ArrowRight } from 'lucide-react';
import { Card, CardContent, CardHeader, CardTitle, CardDescription } from '@/components/ui/card';
import { Button } from '@/components/ui/button';
import { useSystemConfig } from '@/hooks/useSystemConfig';

const VALUES = [
  { icon: Shield, title: 'Security First', desc: 'We prioritize the safety of your assets and data with enterprise-grade protection.' },
  { icon: Users, title: 'User Centric', desc: 'Built for users of all levels, from beginners to experienced traders.' },
  { icon: Zap, title: 'Performance', desc: 'Lightning-fast execution and real-time updates keep you ahead.' },
  { icon: TrendingUp, title: 'Transparency', desc: 'Clear fees, honest communication, and no hidden charges.' },
  { icon: Globe, title: 'Global Access', desc: 'Access your account from anywhere in the world, 24/7.' },
  { icon: Award, title: 'Excellence', desc: 'Committed to continuous improvement and exceptional service.' },
];

export default function AboutPage() {
  const sysConfig = useSystemConfig();
  return (
    <div className="bg-surface-sunken min-h-screen">
      <div className="mx-auto max-w-4xl px-4 py-12">
        <div className="text-center mb-12">
          <h1 className="text-3xl font-bold text-ink">About {sysConfig.projectName}</h1>
          <p className="mt-3 text-ink-muted max-w-2xl mx-auto">
            {sysConfig.projectName} is an enterprise-grade digital wallet platform designed to make managing digital assets simple, secure, and accessible for everyone.
          </p>
        </div>

        <div className="grid gap-6 md:grid-cols-2 mb-12">
          {VALUES.map((v) => (
            <Card key={v.title} className="card-hover">
              <CardContent className="p-6">
                <div className="flex items-start gap-4">
                  <div className="flex h-10 w-10 shrink-0 items-center justify-center rounded-xl bg-primary-100 text-primary-600 dark:bg-primary-500/15 dark:text-primary-300">
                    <v.icon className="h-5 w-5" />
                  </div>
                  <div>
                    <h3 className="text-base font-semibold text-ink">{v.title}</h3>
                    <p className="mt-1 text-sm text-ink-muted">{v.desc}</p>
                  </div>
                </div>
              </CardContent>
            </Card>
          ))}
        </div>

        <Card className="mb-8">
          <CardHeader>
            <CardTitle>Our Mission</CardTitle>
          </CardHeader>
          <CardContent>
            <p className="text-sm text-ink-muted leading-relaxed">
              To empower individuals and businesses with a secure, transparent, and efficient platform for managing digital assets. We believe that everyone deserves access to professional-grade financial tools, regardless of their experience level. Our platform combines cutting-edge technology with intuitive design to deliver an experience that is both powerful and accessible.
            </p>
          </CardContent>
        </Card>

        <div className="text-center">
          <Link href="/register">
            <Button size="lg">
              Get Started <ArrowRight className="h-4 w-4" />
            </Button>
          </Link>
        </div>
      </div>
    </div>
  );
}