page.tsx

"use client";

import Link from "next/link";
import { useEffect, useState } from "react";

export default function LandingPage() {
  const [scrolled, setScrolled] = useState(false);
  const [mobileMenuOpen, setMobileMenuOpen] = useState(false);

  useEffect(() => {
    const handleScroll = () => setScrolled(window.scrollY > 20);
    window.addEventListener("scroll", handleScroll);
    return () => window.removeEventListener("scroll", handleScroll);
  }, []);

  return (
    <>
      {/* Top Nav */}
      <nav className={`h-header-height fixed top-0 right-0 left-0 z-50 transition-all duration-500 ${
        scrolled ? "bg-surface-container-lowest shadow-sm py-2" : "bg-surface-container-lowest/80 backdrop-blur-md"
      } flex justify-between items-center px-4 lg:px-8 w-full`}>
        <div className="flex items-center gap-2">
          <span className="material-symbols-outlined text-primary text-xl animate-spin-reveal" style={{ fontVariationSettings: "'FILL' 1" }}>account_balance</span>
          <span className="font-bold text-lg text-primary tracking-tight">RemitX</span>
        </div>
        <div className="hidden md:flex items-center gap-6">
          <Link href="#" className="text-sm font-semibold text-primary">Personal</Link>
          <Link href="#" className="text-sm text-gray-500 hover:text-primary transition-colors">Business</Link>
          <Link href="#" className="text-sm text-gray-500 hover:text-primary transition-colors">Developers</Link>
          <Link href="#" className="text-sm text-gray-500 hover:text-primary transition-colors">Institutional</Link>
        </div>
        <div className="flex items-center gap-3">
          <button className="hidden sm:block px-4 py-2 text-sm font-semibold text-primary hover:bg-primary/5 rounded-lg transition-all active:scale-95">Sign In</button>
          <Link href="/dashboard" className="px-5 py-2 text-sm font-semibold bg-primary text-white rounded-lg shadow-sm hover:shadow-md transition-all active:scale-95 flex items-center gap-2">
            <span className="material-symbols-outlined text-lg" style={{ fontVariationSettings: "'FILL' 1" }}>wallet</span>
            <span className="hidden sm:inline">Connect Wallet</span>
            <span className="sm:hidden">Wallet</span>
          </Link>
          <button onClick={() => setMobileMenuOpen(!mobileMenuOpen)} className="md:hidden p-2 text-gray-500 hover:text-primary rounded-lg hover:bg-gray-50 transition-all">
            <span className="material-symbols-outlined">{mobileMenuOpen ? "close" : "menu"}</span>
          </button>
        </div>
      </nav>

      {/* Mobile Menu */}
      <div className={`fixed top-[72px] left-0 right-0 z-40 bg-white border-b border-gray-200 shadow-lg transition-all duration-300 md:hidden ${
        mobileMenuOpen ? "opacity-100 translate-y-0" : "opacity-0 -translate-y-4 pointer-events-none"
      }`}>
        <div className="p-4 space-y-1">
          {["Personal", "Business", "Developers", "Institutional"].map((item, i) => (
            <Link key={item} href="#" className="block px-4 py-3 rounded-lg text-sm text-gray-600 hover:text-primary hover:bg-gray-50 transition-all" onClick={() => setMobileMenuOpen(false)}>{item}</Link>
          ))}
          <hr className="border-gray-100 my-2" />
          <button className="w-full text-left px-4 py-3 text-sm font-semibold text-primary" onClick={() => setMobileMenuOpen(false)}>Sign In</button>
        </div>
      </div>

      <main className="pt-[72px]">
        {/* Hero */}
        <section className="relative overflow-hidden bg-gradient-to-br from-blue-50 to-gray-50 min-h-[600px] lg:min-h-[800px] flex items-center px-4 lg:px-8">
          {/* Animated particles */}
          <div className="absolute inset-0 overflow-hidden pointer-events-none">
            {[...Array(6)].map((_, i) => (
              <div key={i} className="absolute w-1.5 h-1.5 rounded-full bg-emerald-400/30 animate-particle" style={{ left: `${15 + i * 18}%`, top: `${30 + i * 12}%`, animationDelay: `${i * 1.2}s`, animationDuration: `${6 + i * 2}s` }} />
            ))}
            <div className="absolute top-20 left-10 w-64 h-64 bg-primary/5 rounded-full blur-[100px] animate-breath-glow"></div>
            <div className="absolute bottom-20 right-10 w-80 h-80 bg-secondary/5 rounded-full blur-[100px] animate-breath-glow" style={{ animationDelay: "2s" }}></div>
          </div>

          <div className="max-w-6xl mx-auto grid grid-cols-1 lg:grid-cols-2 gap-8 lg:gap-12 items-center w-full relative z-10">
            <div className="py-8 lg:py-12">
              <div className="inline-flex items-center gap-1.5 px-3 py-1 rounded-full bg-emerald-50 text-emerald-700 text-xs font-semibold mb-4 animate-elastic">
                <span className="material-symbols-outlined text-sm">bolt</span>
                Stellar Network Live
              </div>
              <h1 className="text-4xl lg:text-5xl font-bold text-primary mb-4 leading-tight animate-slide-blur">
                Send money <br />
                <span className="animate-shimmer-text">smarter, cheaper, faster.</span>
              </h1>
              <p className="text-lg text-gray-500 max-w-lg mb-6 animate-slide-blur delay-100">
                RemitX leverages the Stellar Network to deliver instant cross-border settlements with 99% lower fees.
              </p>
              <div className="flex flex-wrap gap-3 animate-slide-blur delay-200">
                <Link href="/dashboard" className="px-6 py-3 text-sm font-semibold bg-primary text-white rounded-xl shadow-lg hover:shadow-xl transition-all active:scale-95">
                  Get Started
                </Link>
                <button className="px-6 py-3 text-sm font-semibold border-2 border-gray-200 text-gray-700 hover:bg-gray-50 rounded-xl transition-all active:scale-95">
                  View Rates
                </button>
              </div>
              <div className="mt-6 flex flex-wrap items-center gap-4 text-xs text-gray-400 animate-slide-blur delay-300">
                <div className="flex items-center gap-1"><span className="material-symbols-outlined text-sm">verified_user</span>SEC Compliant</div>
                <div className="flex items-center gap-1"><span className="material-symbols-outlined text-sm">security</span>Bank-Grade Security</div>
              </div>
            </div>

            {/* Stellar Visual */}
            <div className="relative h-[350px] lg:h-[450px] w-full flex items-center justify-center animate-scale-cascade delay-200">
              <div className="absolute inset-0 bg-primary/5 rounded-full blur-[100px] animate-breath-glow"></div>
              <div className="relative w-full h-full max-w-sm float-animation">
                <div className="absolute top-1/2 left-0 -translate-y-1/2 glass-card p-3 rounded-xl shadow-lg z-20 card-magnetic">
                  <div className="flex items-center gap-2.5">
                    <div className="w-8 h-8 rounded-full bg-primary flex items-center justify-center text-white"><span className="material-symbols-outlined text-lg">person</span></div>
                    <div><p className="text-[9px] text-gray-400 uppercase font-semibold">Sender (USD)</p><p className="text-sm font-bold text-primary">$1,000.00</p></div>
                  </div>
                </div>
                <svg className="absolute inset-0 w-full h-full" fill="none" viewBox="0 0 400 400">
                  <path className="stellar-line opacity-20" d="M100 200 C 150 200, 150 100, 200 100" stroke="#000666" strokeWidth="2" />
                  <path className="stellar-line opacity-20" d="M100 200 C 150 200, 150 300, 200 300" stroke="#000666" strokeWidth="2" />
                  <path className="stellar-line opacity-20" d="M200 100 C 250 100, 250 200, 300 200" stroke="#000666" strokeWidth="2" />
                  <path className="stellar-line opacity-20" d="M200 300 C 250 300, 250 200, 300 200" stroke="#000666" strokeWidth="2" />
                  <circle cx="200" cy="100" fill="#006b5c" r="4" />
                  <circle cx="200" cy="300" fill="#006b5c" r="4" />
                </svg>
                <div className="absolute top-1/2 left-1/2 -translate-x-1/2 -translate-y-1/2 glass-card p-2.5 rounded-full border-2 border-secondary shadow-xl z-30 animate-ripple-wave">
                  <span className="material-symbols-outlined text-secondary text-2xl" style={{ fontVariationSettings: "'FILL' 1" }}>hub</span>
                </div>
                <div className="absolute top-1/2 right-0 -translate-y-1/2 glass-card p-3 rounded-xl shadow-lg z-20 card-magnetic">
                  <div className="flex items-center gap-2.5">
                    <div className="w-8 h-8 rounded-full bg-secondary flex items-center justify-center text-white"><span className="material-symbols-outlined text-lg">payments</span></div>
                    <div><p className="text-[9px] text-gray-400 uppercase font-semibold">Receiver (NGN)</p><p className="text-sm font-bold text-secondary">₦1,580,000</p></div>
                  </div>
                </div>
              </div>
            </div>
          </div>
        </section>

        {/* Currency Cards */}
        <section className="py-12 lg:py-16 px-4 lg:px-8 bg-white">
          <div className="max-w-6xl mx-auto">
            <div className="text-center mb-8 animate-slide-blur">
              <h2 className="text-2xl lg:text-3xl font-bold text-primary mb-2">Supported Corridors</h2>
              <p className="text-sm text-gray-500">Real-time liquidity across major economies.</p>
            </div>
            <div className="grid grid-cols-2 md:grid-cols-4 gap-3 lg:gap-4">
              {[
                { icon: "attach_money", code: "USD", name: "US Dollar" },
                { icon: "payments", code: "NGN", name: "Nigerian Naira" },
                { icon: "currency_pound", code: "GBP", name: "British Pound" },
                { icon: "currency_exchange", code: "PHP", name: "Philippine Peso" },
              ].map((currency, i) => (
                <div key={currency.code} className="glass-card p-5 rounded-xl flex flex-col items-center text-center hover:shadow-md transition-all group card-magnetic animate-elastic" style={{ animationDelay: `${i * 150}ms` }}>
                  <div className="w-10 h-10 rounded-full bg-primary/5 flex items-center justify-center mb-2 group-hover:bg-primary transition-all duration-500">
                    <span className="material-symbols-outlined text-primary group-hover:text-white transition-colors duration-500">{currency.icon}</span>
                  </div>
                  <p className="text-sm font-bold text-primary">{currency.code}</p>
                  <p className="text-xs text-gray-500">{currency.name}</p>
                </div>
              ))}
            </div>
          </div>
        </section>

        {/* Bento Grid */}
        <section className="py-12 lg:py-16 px-4 lg:px-8">
          <div className="max-w-6xl mx-auto">
            <div className="grid grid-cols-1 md:grid-cols-3 gap-4">
              <div className="md:col-span-2 glass-card p-6 lg:p-8 rounded-2xl flex flex-col justify-between overflow-hidden relative card-magnetic animate-scale-cascade">
                <div className="relative z-10">
                  <h3 className="text-xl font-bold text-primary mb-3">Institutional-Grade Infrastructure</h3>
                  <p className="text-sm text-gray-500 max-w-md">We provide the same level of security and compliance expected by major financial institutions.</p>
                </div>
                <div className="mt-6 flex flex-wrap gap-4 z-10">
                  <div className="flex items-center gap-1.5"><span className="material-symbols-outlined text-sm text-secondary" style={{ fontVariationSettings: "'FILL' 1" }}>shield_lock</span><span className="text-xs font-semibold">Encryption</span></div>
                  <div className="flex items-center gap-1.5"><span className="material-symbols-outlined text-sm text-secondary" style={{ fontVariationSettings: "'FILL' 1" }}>account_balance</span><span className="text-xs font-semibold">Regulated Anchors</span></div>
                </div>
                <div className="absolute -right-10 -bottom-10 opacity-5"><span className="material-symbols-outlined text-[200px]">security</span></div>
              </div>
              <div className="bg-primary p-6 lg:p-8 rounded-2xl text-white card-magnetic animate-scale-cascade delay-100">
                <span className="material-symbols-outlined text-2xl mb-3 animate-orbit">speed</span>
                <h3 className="text-lg font-bold mb-1">Sub-5 Second</h3>
                <p className="text-sm opacity-80">Transactions finalized in seconds, not days.</p>
              </div>
              <div className="glass-card p-6 lg:p-8 rounded-2xl border-2 border-emerald-100 card-magnetic animate-scale-cascade delay-200">
                <span className="material-symbols-outlined text-2xl text-secondary mb-3">savings</span>
                <h3 className="text-lg font-bold text-primary mb-1">Zero Hidden Fees</h3>
                <p className="text-sm text-gray-500">Exact amounts, total transparency.</p>
              </div>
              <div className="md:col-span-2 glass-card p-6 lg:p-8 rounded-2xl flex flex-col lg:flex-row items-start lg:items-center justify-between gap-4 card-magnetic animate-scale-cascade delay-300">
                <div>
                  <h3 className="text-lg font-bold text-primary mb-1">Developer Ready API</h3>
                  <p className="text-sm text-gray-500">Robust SDK and documentation.</p>
                </div>
                <button className="px-5 py-2.5 bg-gray-100 rounded-lg text-sm font-semibold hover:bg-gray-200 transition-all">Read Docs</button>
              </div>
            </div>
          </div>
        </section>
      </main>

      {/* Footer */}
      <footer className="bg-gray-50 w-full py-4 border-t border-gray-200 mt-8">
        <div className="max-w-6xl mx-auto flex flex-col md:flex-row justify-between items-center px-4 lg:px-8 gap-3">
          <div className="flex flex-col md:flex-row items-center gap-3">
            <div className="flex items-center gap-1.5">
              <span className="material-symbols-outlined text-primary text-lg" style={{ fontVariationSettings: "'FILL' 1" }}>account_balance</span>
              <span className="text-sm font-bold text-gray-800">RemitX</span>
            </div>
            <span className="text-xs text-gray-400">© 2024 RemitX. Powered by Stellar.</span>
          </div>
          <div className="flex flex-wrap items-center justify-center gap-4">
            <Link href="#" className="text-xs text-gray-400 hover:text-primary transition-colors">Privacy</Link>
            <Link href="#" className="text-xs text-gray-400 hover:text-primary transition-colors">Terms</Link>
            <Link href="#" className="text-xs text-gray-400 hover:text-primary transition-colors">Compliance</Link>
            <Link href="#" className="text-xs text-gray-400 hover:text-primary transition-colors">Security</Link>
          </div>
        </div>
      </footer>
    </>
  );
}