import React from "react";

// PawnFi — Luxury Vault Landing (Pre‑Launch)
// Single‑file React component (drop into Next.js as src/app/page.tsx or pages/index.tsx)
// Tailwind CSS recommended. No external UI libs required.

export default function PawnFiLanding() {
  return (
    <main className="min-h-screen bg-black text-white selection:bg-yellow-400/30 selection:text-yellow-200">
      {/* Top gradient glow */}
      <div className="pointer-events-none fixed inset-0 -z-10">
        <div className="absolute -top-40 left-1/2 h-80 w-[60rem] -translate-x-1/2 rounded-full bg-gradient-to-r from-yellow-500/10 via-yellow-400/10 to-yellow-300/10 blur-3xl" />
      </div>

      {/* NAVBAR */}
      <header className="sticky top-0 z-20 backdrop-blur supports-[backdrop-filter]:bg-black/40 border-b border-white/10">
        <div className="mx-auto flex max-w-7xl items-center justify-between px-4 py-4">
          <a href="#" className="flex items-center gap-3">
            <VaultLogo className="h-8 w-8" />
            <span className="text-lg font-semibold tracking-wide">PawnFi</span>
          </a>
          <nav className="hidden items-center gap-8 text-sm md:flex">
            <a href="#how" className="text-white/80 hover:text-white">How it works</a>
            <a href="#features" className="text-white/80 hover:text-white">Features</a>
            <a href="#token" className="text-white/80 hover:text-white">$PAWN</a>
            <a href="#roadmap" className="text-white/80 hover:text-white">Roadmap</a>
            <a href="#faq" className="text-white/80 hover:text-white">FAQ</a>
          </nav>
          <div className="flex items-center gap-3">
            <a href="mailto:reinventg@gmail.com" className="hidden rounded-xl border border-yellow-500/30 px-4 py-2 text-sm text-yellow-200 hover:border-yellow-400/60 hover:text-yellow-100 md:inline">Contact</a>
            <a href="#waitlist" className="rounded-xl bg-gradient-to-b from-yellow-400 to-yellow-600 px-4 py-2 text-sm font-semibold text-black shadow-[0_0_0_1px_rgba(234,179,8,0.4)] hover:brightness-110">Join Waitlist</a>
          </div>
        </div>
      </header>

      {/* HERO */}
      <section className="relative overflow-hidden">
        <div className="mx-auto grid max-w-7xl items-center gap-12 px-4 py-20 md:grid-cols-2 md:py-28">
          <div>
            <p className="mb-4 inline-flex items-center gap-2 rounded-full border border-yellow-400/30 px-3 py-1 text-xs text-yellow-200/90">
              <span className="h-2 w-2 animate-pulse rounded-full bg-yellow-400" /> Pre‑Launch • BNB → ETH/BTC
            </p>
            <h1 className="text-balance text-4xl font-semibold leading-tight md:text-6xl">
              The <span className="bg-gradient-to-b from-yellow-200 to-yellow-500 bg-clip-text text-transparent">Luxury Vault</span> of
              <br /> Decentralized Pawn Finance
            </h1>
            <p className="mt-5 max-w-xl text-white/70">
              Borrow against <span className="text-yellow-300">crypto, NFTs, and tokenized assets</span>. Instant liquidity.
              Transparent terms. Governed by holders of <span className="text-yellow-300">$PAWN</span>.
            </p>
            <div className="mt-7 flex flex-wrap gap-3">
              <a href="#waitlist" className="rounded-xl bg-gradient-to-b from-yellow-400 to-yellow-600 px-5 py-3 font-semibold text-black hover:brightness-110">Join the Waitlist</a>
              <a href="#litepaper" className="rounded-xl border border-white/15 px-5 py-3 font-semibold text-white/90 hover:border-white/30">Read Whitepaper</a>
            </div>
            <div className="mt-6 flex items-center gap-4 text-xs text-white/60">
              <div className="flex items-center gap-2"><ShieldIcon className="h-4 w-4" /> Audited before mainnet</div>
              <div className="flex items-center gap-2"><ChainIcon className="h-4 w-4" /> BNB → ETH / BTC Expansion</div>
            </div>
          </div>
          <div className="relative">
            <div className="absolute -inset-6 -z-10 rounded-3xl bg-gradient-to-tr from-yellow-500/20 via-yellow-300/10 to-transparent blur-2xl" />
            <div className="rounded-3xl border border-white/10 bg-gradient-to-b from-zinc-900 to-black p-6 shadow-2xl">
              <VaultIllustration />
            </div>
            <p className="mt-3 text-center text-sm text-white/60">Secure vault architecture • Oracle pricing • DAO governance</p>
          </div>
        </div>
      </section>

      {/* HOW IT WORKS */}
      <section id="how" className="border-t border-white/10">
        <div className="mx-auto max-w-7xl px-4 py-16">
          <h2 className="text-2xl font-semibold md:text-3xl">How PawnFi Works</h2>
          <div className="mt-8 grid gap-6 md:grid-cols-3">
            <Card icon={<LockIcon />} title="Deposit Collateral" desc="Lock crypto, NFTs, or tokenized assets into audited smart contracts." />
            <Card icon={<FlashIcon />} title="Borrow Instantly" desc="Receive USDT, USDC, or DAI with transparent LTV and on‑chain terms." />
            <Card icon={<KeyIcon />} title="Redeem Anytime" desc="Repay principal + interest to unlock your assets—fully trustless." />
          </div>
        </div>
      </section>

      {/* FEATURES */}
      <section id="features" className="border-t border-white/10 bg-gradient-to-b from-black to-zinc-950">
        <div className="mx-auto max-w-7xl px-4 py-16">
          <h2 className="text-2xl font-semibold md:text-3xl">Designed for Power, Built for Trust</h2>
          <div className="mt-8 grid gap-6 md:grid-cols-2 lg:grid-cols-3">
            <Feature title="Luxury Vault Security" desc="Protocol‑level collateral vaults with conservative LTVs and circuit breakers." />
            <Feature title="Oracle‑Driven Pricing" desc="Chainlink‑powered price feeds for crypto; curated indices for NFTs & RWAs." />
            <Feature title="Multi‑Chain by Design" desc="Launch on BNB; expand to Ethereum & BTC layers for institutional reach." />
            <Feature title="$PAWN Utility" desc="Fee discounts, staking rewards, governance, and liquidation marketplace access." />
            <Feature title="DAO Governance" desc="Token holders steer parameters, listings, and treasury initiatives." />
            <Feature title="Mobile dApp (Roadmap)" desc="A vault in your pocket: borrow and repay on the go." />
          </div>
        </div>
      </section>

      {/* TOKEN */}
      <section id="token" className="border-t border-white/10">
        <div className="mx-auto max-w-7xl px-4 py-16">
          <div className="grid items-center gap-10 md:grid-cols-2">
            <div>
              <h2 className="text-2xl font-semibold md:text-3xl">$PAWN Token</h2>
              <ul className="mt-4 space-y-2 text-white/75">
                <li>• Total Supply: <span className="text-white">1,000,000,000 $PAWN</span></li>
                <li>• Utility: fee discounts, staking rewards, governance voting, marketplace access</li>
                <li>• Policy: 1% burn on protocol fees; quarterly buybacks tied to revenue</li>
                <li>• Vesting: team/advisors 12–36 months; partner & community aligned</li>
              </ul>
              <div className="mt-6 flex gap-3">
                <a href="#litepaper" className="rounded-xl border border-white/15 px-5 py-3 font-semibold text-white/90 hover:border-white/30">View Tokenomics</a>
                <a href="#waitlist" className="rounded-xl bg-gradient-to-b from-yellow-400 to-yellow-600 px-5 py-3 font-semibold text-black hover:brightness-110">Join Presale Waitlist</a>
              </div>
            </div>
            <div className="relative">
              <div className="absolute -inset-6 -z-10 rounded-3xl bg-gradient-to-tr from-yellow-500/20 via-yellow-300/10 to-transparent blur-2xl" />
              <div className="rounded-3xl border border-white/10 bg-gradient-to-b from-zinc-900 to-black p-6 shadow-2xl">
                <TokenomicsRings />
              </div>
            </div>
          </div>
        </div>
      </section>

      {/* ROADMAP */}
      <section id="roadmap" className="border-t border-white/10 bg-gradient-to-b from-zinc-950 to-black">
        <div className="mx-auto max-w-7xl px-4 py-16">
          <h2 className="text-2xl font-semibold md:text-3xl">Roadmap</h2>
          <div className="mt-8 grid gap-6 md:grid-cols-3">
            <Milestone q="Q1 2025" t="BNB MVP" d="Crypto & NFT collateral, instant stablecoin loans, audits" />
            <Milestone q="Q2 2025" t="$PAWN Launch" d="Staking, fee discounts, governance bootstrapped" />
            <Milestone q="Q3 2025" t="RWA On‑Ramp" d="Gold/watches custody partners, valuation oracles" />
            <Milestone q="Q4 2025" t="Mobile dApp" d="iOS/Android release, global partnerships" />
            <Milestone q="2026" t="Multi‑Chain" d="Ethereum & BTC layers, DAO council" />
            <Milestone q="2027" t="Institutional" d="Real estate/equity tokenization; enterprise vault APIs" />
          </div>
        </div>
      </section>

      {/* FAQ */}
      <section id="faq" className="border-t border-white/10">
        <div className="mx-auto max-w-7xl px-4 py-16">
          <h2 className="text-2xl font-semibold md:text-3xl">FAQ</h2>
          <div className="mt-6 space-y-4">
            <FAQ q="Is this live yet?" a="This is the pre‑launch site. Mainnet follows audits and community testing on BNB Chain." />
            <FAQ q="Which assets can I use as collateral?" a="Crypto (BNB/ETH majors), blue‑chip NFTs, and select tokenized RWAs with custody partners." />
            <FAQ q="What is $PAWN used for?" a="Fee discounts, staking rewards, governance voting, and marketplace access for liquidations." />
            <FAQ q="Who builds PawnFi?" a="Blockchain Gorillas LLC — Founder & CEO: Giovani Alzugaray." />
          </div>
        </div>
      </section>

      {/* WAITLIST */}
      <section id="waitlist" className="border-t border-white/10 bg-gradient-to-b from-black to-zinc-950">
        <div className="mx-auto max-w-3xl px-4 py-16 text-center">
          <h2 className="text-2xl font-semibold md:text-3xl">Secure Early Access</h2>
          <p className="mt-3 text-white/70">Join the presale + beta waitlist. We’ll notify you before launch.</p>
          <form onSubmit={(e)=>e.preventDefault()} className="mx-auto mt-6 flex max-w-xl gap-3">
            <input type="email" placeholder="your@email.com" className="w-full rounded-xl border border-white/15 bg-black/40 px-4 py-3 text-white placeholder-white/40 outline-none focus:border-yellow-400" />
            <button className="rounded-xl bg-gradient-to-b from-yellow-400 to-yellow-600 px-5 py-3 font-semibold text-black hover:brightness-110">Join</button>
          </form>
          <p className="mt-3 text-xs text-white/50">By joining you agree to receive updates. Unsubscribe anytime.</p>
        </div>
      </section>

      {/* FOOTER */}
      <footer className="border-t border-white/10">
        <div className="mx-auto flex max-w-7xl flex-col items-center justify-between gap-4 px-4 py-10 md:flex-row">
          <div className="flex items-center gap-3">
            <VaultLogo className="h-6 w-6" />
            <span className="text-sm text-white/70">© 2025 Blockchain Gorillas LLC</span>
          </div>
          <div className="flex items-center gap-5 text-sm text-white/70">
            <a className="hover:text-white" href="https://blockchaingorillas.com" target="_blank" rel="noreferrer">blockchaingorillas.com</a>
            <a className="hover:text-white" href="mailto:reinventg@gmail.com">reinventg@gmail.com</a>
            <a className="hover:text-white" href="#litepaper">Whitepaper</a>
          </div>
        </div>
      </footer>
    </main>
  );
}

// ————— UI Subcomponents —————
function Card({ icon, title, desc }:{ icon: React.ReactNode; title: string; desc: string }){
  return (
    <div className="group rounded-2xl border border-white/10 bg-gradient-to-b from-zinc-900 to-black p-6 transition hover:border-yellow-400/40">
      <div className="mb-4 inline-flex h-10 w-10 items-center justify-center rounded-xl bg-yellow-400/10 text-yellow-300">
        {icon}
      </div>
      <h3 className="text-lg font-semibold">{title}</h3>
      <p className="mt-1 text-sm text-white/70">{desc}</p>
    </div>
  )
}

function Feature({ title, desc }:{ title:string; desc:string }){
  return (
    <div className="rounded-2xl border border-white/10 bg-gradient-to-b from-zinc-900 to-black p-6">
      <h3 className="font-semibold text-yellow-300">{title}</h3>
      <p className="mt-2 text-sm text-white/70">{desc}</p>
    </div>
  );
}

function Milestone({ q, t, d }:{ q:string; t:string; d:string }){
  return (
    <div className="rounded-2xl border border-white/10 bg-gradient-to-b from-zinc-900 to-black p-6">
      <p className="text-xs uppercase tracking-wide text-white/50">{q}</p>
      <h4 className="mt-1 text-lg font-semibold">{t}</h4>
      <p className="mt-2 text-sm text-white/70">{d}</p>
    </div>
  );
}

function FAQ({ q, a }:{ q:string; a:string }){
  return (
    <div className="rounded-2xl border border-white/10 p-5">
      <p className="font-semibold">{q}</p>
      <p className="mt-1 text-sm text-white/70">{a}</p>
    </div>
  );
}

// ————— Icons & Illustrations —————
function VaultLogo({ className = "" }:{ className?: string }){
  return (
    <svg viewBox="0 0 64 64" className={className}>
      <defs>
        <linearGradient id="g" x1="0" x2="1">
          <stop offset="0%" stopColor="#facc15" stopOpacity="1" />
          <stop offset="100%" stopColor="#a16207" stopOpacity="1" />
        </linearGradient>
      </defs>
      <circle cx="32" cy="32" r="28" fill="url(#g)" opacity="0.2" />
      <circle cx="32" cy="32" r="22" fill="none" stroke="#facc15" strokeOpacity="0.8" strokeWidth="2" />
      <path d="M32 18a10 10 0 100 20 10 10 0 000-20Zm0 6a4 4 0 110 8 4 4 0 010-8Z" fill="#facc15" fillOpacity="0.9" />
    </svg>
  );
}

function VaultIllustration(){
  return (
    <div className="relative grid place-items-center">
      <div className="absolute h-56 w-56 rounded-full bg-yellow-500/10 blur-3xl" />
      <svg viewBox="0 0 400 300" className="h-[320px] w-full">
        <defs>
          <radialGradient id="rg" cx="50%" cy="50%" r="60%">
            <stop offset="0%" stopColor="#fde68a" stopOpacity="0.35" />
            <stop offset="100%" stopColor="#18181b" stopOpacity="0.05" />
          </radialGradient>
        </defs>
        <rect x="0" y="0" width="400" height="300" fill="url(#rg)" />
        {/* Vault ring */}
        <circle cx="200" cy="150" r="90" stroke="#f5d04e" strokeWidth="3" fill="none" opacity="0.8" />
        <circle cx="200" cy="150" r="120" stroke="#f5d04e" strokeWidth="1" fill="none" opacity="0.25" />
        {/* Spokes */}
        {[...Array(8)].map((_,i)=>{
          const angle = (i*Math.PI)/4; const x = 200 + 80*Math.cos(angle); const y = 150 + 80*Math.sin(angle);
          return <line key={i} x1="200" y1="150" x2={x} y2={y} stroke="#facc15" strokeWidth="2" opacity="0.7" />
        })}
        {/* Center hub */}
        <circle cx="200" cy="150" r="24" fill="#facc15" opacity="0.9" />
      </svg>
    </div>
  );
}

function TokenomicsRings(){
  return (
    <svg viewBox="0 0 300 300" className="h-[320px] w-full">
      <defs>
        <linearGradient id="g1" x1="0" x2="1">
          <stop offset="0%" stopColor="#fde047" />
          <stop offset="100%" stopColor="#f59e0b" />
        </linearGradient>
      </defs>
      <circle cx="150" cy="150" r="100" stroke="url(#g1)" strokeWidth="14" fill="none" opacity="0.35" />
      <circle cx="150" cy="150" r="70" stroke="#facc15" strokeWidth="6" fill="none" opacity="0.7" />
      <circle cx="150" cy="150" r="40" fill="#facc15" opacity="0.9" />
    </svg>
  );
}

// Simple outline icons
function ShieldIcon({ className = "h-5 w-5" }:{ className?: string }){
  return (
    <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="1.5" className={className}>
      <path d="M12 3l7 3v5c0 5-3.5 9-7 10-3.5-1-7-5-7-10V6l7-3z" />
    </svg>
  );
}
function ChainIcon({ className = "h-5 w-5" }:{ className?: string }){
  return (
    <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="1.5" className={className}>
      <path d="M10 14l-3 3a4 4 0 105.7 5.6l3-3M14 10l3-3A4 4 0 1011.3 1.4l-3 3" />
    </svg>
  );
}
function LockIcon({ className = "h-5 w-5" }:{ className?: string }){
  return (
    <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="1.5" className={className}>
      <rect x="4" y="11" width="16" height="9" rx="2" />
      <path d="M8 11V8a4 4 0 118 0v3" />
    </svg>
  );
}
function FlashIcon({ className = "h-5 w-5" }:{ className?: string }){
  return (
    <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="1.5" className={className}>
      <path d="M7 13l5-10 0 7h5l-5 10 0-7H7z" />
    </svg>
  );
}
function KeyIcon({ className = "h-5 w-5" }:{ className?: string }){
  return (
    <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="1.5" className={className}>
      <circle cx="8" cy="8" r="3" />
      <path d="M11 8h10m-4 0v4m0-4v-4" />
    </svg>
  );
}