'use client';

import Link from 'next/link';
import { ArrowRight, Shield, Zap, TrendingUp, Wallet, LineChart, Globe, Crown, Lock, Monitor, Users, BarChart3, CheckCircle2, HelpCircle, Mail, Phone, FileText, Award, Clock, Headphones } from 'lucide-react';
import { Button } from '@/components/ui/button';
import { Card } from '@/components/ui/card';
import { useSystemConfig } from '@/hooks/useSystemConfig';

const FEATURES = [
  { icon: Wallet, title: 'Smart Wallet', desc: 'Manage multiple currencies and assets in one secure wallet with real-time balance tracking.', color: 'from-blue-500 to-cyan-500' },
  { icon: LineChart, title: 'Advanced Trading', desc: 'Professional trading tools with real-time charts, order book depth, and smart order types.', color: 'from-emerald-500 to-teal-500' },
  { icon: Shield, title: 'Enterprise Security', desc: 'Bank-grade encryption, 2FA, device tracking, and advanced fraud protection keep your assets safe.', color: 'from-violet-500 to-purple-500' },
  { icon: Zap, title: 'Instant Execution', desc: 'Execute trades in milliseconds with our high-performance matching engine.', color: 'from-amber-500 to-orange-500' },
  { icon: Globe, title: 'Global Access', desc: 'Trade and transact from anywhere in the world, 24/7 with multi-currency support.', color: 'from-rose-500 to-pink-500' },
  { icon: TrendingUp, title: 'Smart Analytics', desc: 'AI-powered insights and comprehensive reporting to help you make better decisions.', color: 'from-indigo-500 to-blue-500' },
];

const HOW_IT_WORKS = [
  { step: '01', title: 'Create Account', desc: 'Sign up in minutes with email verification and optional referral code.' },
  { step: '02', title: 'Verify Identity', desc: 'Complete quick verification to unlock full platform features.' },
  { step: '03', title: 'Fund Wallet', desc: 'Deposit funds securely using your preferred payment method.' },
  { step: '04', title: 'Start Trading', desc: 'Buy, sell, and manage your portfolio with powerful tools.' },
];

const SECURITY_FEATURES = [
  { icon: Lock, title: 'End-to-End Encryption', desc: 'All data transmitted with TLS 1.3 encryption.' },
  { icon: Shield, title: 'Two-Factor Auth', desc: 'Optional 2FA with TOTP authenticator apps.' },
  { icon: Monitor, title: 'Session Management', desc: 'Monitor and revoke active sessions anytime.' },
  { icon: Award, title: 'Compliance Ready', desc: 'Built with security best practices and audit trails.' },
];

const FAQS = [
  { q: 'How do I create an account?', a: 'Click "Get Started", fill in your details, verify your email, and accept the terms. It takes less than 2 minutes.' },
  { q: 'Is my money safe?', a: 'Yes. We use bank-grade encryption, 2FA, and advanced fraud monitoring. Your funds are protected at all times.' },
  { q: 'What fees do you charge?', a: 'We offer transparent pricing with competitive rates. Check our Fees page for detailed breakdowns.' },
  { q: 'How do referrals work?', a: 'Share your unique referral link. When friends sign up and complete eligible activity, you earn rewards.' },
  { q: 'Can I withdraw anytime?', a: 'Yes, subject to your account status and any applicable processing times. Most withdrawals process within 24 hours.' },
  { q: 'Do you offer customer support?', a: 'Yes. Our support team is available via ticket system. Pro users get priority response times.' },
];

export default function HomePage() {
  const sysConfig = useSystemConfig();
  return (
    <div className="bg-surface-sunken text-foreground">
      {/* Hero */}
      <section className="relative overflow-hidden px-4 py-20 md:py-28">
        <div className="pointer-events-none absolute inset-0">
          <div className="absolute -left-32 -top-32 h-96 w-96 rounded-full bg-primary-500/20 blur-3xl" />
          <div className="absolute -bottom-32 -right-32 h-96 w-96 rounded-full bg-indigo-500/20 blur-3xl" />
          <div className="absolute inset-0 bg-grid opacity-40" />
        </div>
        <div className="relative mx-auto max-w-6xl">
          <div className="text-center">
            <span className="inline-flex items-center gap-2 rounded-full border border-primary-500/30 bg-primary-500/10 px-4 py-1.5 text-sm font-medium text-primary-600 dark:text-primary-300">
              <Zap className="h-4 w-4" />
              Enterprise FinTech Platform
            </span>
            <h1 className="mx-auto mt-6 max-w-3xl text-4xl font-bold leading-tight tracking-tight text-ink md:text-6xl">
              The future of digital <span className="bg-gradient-to-r from-primary-600 to-indigo-500 bg-clip-text text-transparent">wallet</span> management
            </h1>
            <p className="mx-auto mt-6 max-w-2xl text-lg text-ink-muted">
              A secure, enterprise-grade platform to trade, invest, and grow your digital assets with confidence.
            </p>
            <div className="mt-8 flex flex-wrap items-center justify-center gap-3">
              <Link href="/register">
                <Button size="lg">
                  Get Started
                  <ArrowRight className="h-4 w-4" />
                </Button>
              </Link>
              <Link href="/login">
                <Button size="lg" variant="outline">Sign In</Button>
              </Link>
            </div>
            <div className="mt-6 flex flex-wrap items-center justify-center gap-6 text-sm text-ink-faint">
              <span className="flex items-center gap-1.5"><CheckCircle2 className="h-4 w-4 text-emerald-500" /> No credit card required</span>
              <span className="flex items-center gap-1.5"><CheckCircle2 className="h-4 w-4 text-emerald-500" /> Free to sign up</span>
              <span className="flex items-center gap-1.5"><CheckCircle2 className="h-4 w-4 text-emerald-500" /> Cancel anytime</span>
            </div>
          </div>
        </div>
      </section>

      {/* Features */}
      <section className="mx-auto max-w-6xl px-4 py-20">
        <div className="mb-10 text-center">
          <h2 className="text-3xl font-bold tracking-tight text-ink">Everything you need</h2>
          <p className="mt-2 text-ink-muted">A complete financial toolkit built for the modern user</p>
        </div>
        <div className="grid grid-cols-1 gap-4 sm:grid-cols-2 lg:grid-cols-3">
          {FEATURES.map((f) => (
            <Card key={f.title} className="card-hover p-6 group">
              <div className={`flex h-12 w-12 items-center justify-center rounded-2xl bg-gradient-to-br ${f.color} text-white shadow-lg`}>
                <f.icon className="h-6 w-6" />
              </div>
              <h3 className="mt-4 text-lg font-semibold text-ink">{f.title}</h3>
              <p className="mt-2 text-sm text-ink-muted">{f.desc}</p>
            </Card>
          ))}
        </div>
      </section>

      {/* How It Works */}
      <section className="mx-auto max-w-6xl px-4 py-20">
        <div className="mb-10 text-center">
          <h2 className="text-3xl font-bold tracking-tight text-ink">How It Works</h2>
          <p className="mt-2 text-ink-muted">Get started in four simple steps</p>
        </div>
        <div className="grid grid-cols-1 gap-6 sm:grid-cols-2 lg:grid-cols-4">
          {HOW_IT_WORKS.map((item) => (
            <Card key={item.step} className="card-hover p-6 text-center relative overflow-hidden">
              <div className="absolute -top-4 -right-4 text-6xl font-bold text-primary-500/5">{item.step}</div>
              <div className="relative">
                <h3 className="text-lg font-semibold text-ink">{item.title}</h3>
                <p className="mt-2 text-sm text-ink-muted">{item.desc}</p>
              </div>
            </Card>
          ))}
        </div>
      </section>

      {/* Security */}
      <section className="mx-auto max-w-6xl px-4 py-20">
        <div className="mb-10 text-center">
          <h2 className="text-3xl font-bold tracking-tight text-ink">Security First</h2>
          <p className="mt-2 text-ink-muted">Your assets and data are protected by enterprise-grade security</p>
        </div>
        <div className="grid grid-cols-1 gap-4 sm:grid-cols-2 lg:grid-cols-4">
          {SECURITY_FEATURES.map((f) => (
            <Card key={f.title} className="card-hover p-6">
              <div className="flex h-10 w-10 items-center justify-center rounded-xl bg-emerald-100 text-emerald-600 dark:bg-emerald-500/15 dark:text-emerald-300">
                <f.icon className="h-5 w-5" />
              </div>
              <h3 className="mt-3 text-base font-semibold text-ink">{f.title}</h3>
              <p className="mt-1.5 text-sm text-ink-muted">{f.desc}</p>
            </Card>
          ))}
        </div>
      </section>

      {/* Stats / Trust */}
      <section className="mx-auto max-w-6xl px-4 py-20">
        <div className="grid grid-cols-2 gap-4 md:grid-cols-4">
          {[
            { value: '99.9%', label: 'Uptime', icon: Clock },
            { value: '256-bit', label: 'Encryption', icon: Lock },
            { value: '24/7', label: 'Support', icon: Headphones },
            { value: '100K+', label: 'Users', icon: Users },
          ].map((stat) => (
            <Card key={stat.label} className="p-6 text-center">
              <stat.icon className="mx-auto h-6 w-6 text-primary-500" />
              <p className="mt-2 text-2xl font-bold text-ink">{stat.value}</p>
              <p className="text-sm text-ink-muted">{stat.label}</p>
            </Card>
          ))}
        </div>
      </section>

      {/* FAQ */}
      <section className="mx-auto max-w-6xl px-4 py-20">
        <div className="mb-10 text-center">
          <h2 className="text-3xl font-bold tracking-tight text-ink">Frequently Asked Questions</h2>
          <p className="mt-2 text-ink-muted">Quick answers to common questions</p>
        </div>
        <div className="grid grid-cols-1 gap-4 md:grid-cols-2">
          {FAQS.map((item) => (
            <Card key={item.q} className="card-hover p-6">
              <div className="flex items-start gap-3">
                <HelpCircle className="mt-0.5 h-5 w-5 shrink-0 text-primary-500" />
                <div>
                  <h3 className="text-base font-semibold text-ink">{item.q}</h3>
                  <p className="mt-1.5 text-sm text-ink-muted">{item.a}</p>
                </div>
              </div>
            </Card>
          ))}
        </div>
        <div className="mt-8 text-center">
          <Link href="/faq">
            <Button variant="outline" size="lg">
              View All FAQs
              <ArrowRight className="h-4 w-4" />
            </Button>
          </Link>
        </div>
      </section>

      {/* CTA */}
      <section className="mx-auto max-w-6xl px-4 pb-20">
        <Card className="relative overflow-hidden border-0 bg-gradient-to-br from-primary-600 to-indigo-600 p-10 text-center text-white">
          <div className="absolute inset-0 bg-grid opacity-20" />
          <div className="relative">
            <h2 className="text-3xl font-bold">Ready to get started?</h2>
            <p className="mx-auto mt-3 max-w-xl text-white/80">
              Join thousands of users already managing their assets with {sysConfig.projectName}.
            </p>
            <div className="mt-6 flex flex-wrap justify-center gap-3">
              <Link href="/register">
                <Button className="bg-white text-primary-700 hover:bg-white/90" size="lg">
                  Create Account
                  <ArrowRight className="h-4 w-4" />
                </Button>
              </Link>
              <Link href="/login">
                <Button variant="outline" className="border-white/40 text-white hover:bg-white/10" size="lg">
                  Sign In
                </Button>
              </Link>
            </div>
            <div className="mt-6 flex flex-wrap items-center justify-center gap-6 text-sm text-white/70">
              <Link href="/contact" className="hover:text-white flex items-center gap-1.5">
                <Mail className="h-4 w-4" /> Contact Support
              </Link>
              <Link href="/terms" className="hover:text-white flex items-center gap-1.5">
                <FileText className="h-4 w-4" /> Terms of Service
              </Link>
              <Link href="/privacy-policy" className="hover:text-white flex items-center gap-1.5">
                <Shield className="h-4 w-4" /> Privacy Policy
              </Link>
            </div>
          </div>
        </Card>
      </section>
    </div>
  );
}