import React, { useState } from 'react';

const previewAddresses = [
  {
    coin: 'Bitcoin',
    network: 'BTC Mainnet',
    address: 'bc1q8xw7v9m2k4p6r3t8y5u1n0a7c9e2d4f6g8h2jk',
    note: '仅支持 BTC 主网转账',
  },
  {
    coin: 'Lightning',
    network: 'LNURL',
    address: 'lnurl1dp68gurn8ghj7mrww4exctnrdakj7mrv9e3k7mf0d3h82unv9e3k7mfwv4uxzm',
    note: '适合小额快速支付',
  },
  {
    coin: 'Ethereum',
    network: 'ERC-20',
    address: '0x8F2A7c1D4E9b3F6A2C7D1E8B9F4A6D3C2B1E7F9A',
    note: 'ETH 与 ERC-20 代币共用地址',
  },
  {
    coin: 'USDT',
    network: 'TRC-20',
    address: 'TQ4r8Y9m2V6k1X7n3C5p8L0b2D9s4F6w1H',
    note: '请勿转入其他链上的 USDT',
  },
];

function QRCard({ text }) {
  const cells = Array.from({ length: 100 }, (_, i) => i);
  return (
    <div className="w-full max-w-[320px] rounded-[30px] border border-neutral-200 bg-white p-5 shadow-[0_12px_36px_rgba(15,23,42,0.06)]">
      <div className="mb-4 flex items-center justify-between">
        <div>
          <div className="text-sm font-semibold text-neutral-900">地址二维码</div>
          <div className="mt-1 text-xs text-neutral-500">扫码前请再次确认网络类型</div>
        </div>
        <div className="rounded-full border border-amber-200 bg-amber-50 px-3 py-1 text-xs font-medium text-amber-700">
          QR Code
        </div>
      </div>

      <div className="rounded-[24px] border border-neutral-100 bg-neutral-50 p-4">
        <div className="grid grid-cols-10 gap-1 rounded-2xl bg-white p-3">
          {cells.map((i) => {
            const active = ((i * 7 + 13) % 11 < 5) || [0, 1, 2, 10, 20, 77, 88, 99, 97, 79].includes(i);
            return (
              <div
                key={i}
                className={`aspect-square rounded-[3px] ${active ? 'bg-neutral-800' : 'bg-neutral-100'}`}
              />
            );
          })}
        </div>
      </div>

      <div className="mt-4 rounded-2xl border border-neutral-200 bg-neutral-50 px-3 py-3 text-xs leading-6 text-neutral-500 break-all">
        {text}
      </div>
    </div>
  );
}

function AddressCard({ item }) {
  const [copied, setCopied] = useState(false);
  const [showQR, setShowQR] = useState(false);

  const handleCopy = async () => {
    try {
      await navigator.clipboard.writeText(item.address);
      setCopied(true);
      setTimeout(() => setCopied(false), 1800);
    } catch {
      setCopied(false);
    }
  };

  return (
    <div className="rounded-[28px] border border-neutral-200 bg-white p-5 shadow-[0_12px_36px_rgba(15,23,42,0.05)]">
      <div className="flex flex-col gap-5 lg:flex-row lg:items-start lg:justify-between">
        <div className="min-w-0 flex-1">
          <div className="flex flex-wrap items-center gap-3">
            <div className="rounded-2xl bg-amber-100 px-3 py-2 text-sm font-semibold text-amber-700">
              {item.coin}
            </div>
            <div className="rounded-full border border-amber-200 bg-amber-50 px-3 py-1 text-xs text-amber-700">
              {item.network}
            </div>
          </div>

          <div className="mt-4 rounded-2xl border border-neutral-200 bg-neutral-50 px-4 py-4 font-mono text-sm leading-7 text-neutral-700">
            <div className="break-all">{item.address}</div>
          </div>

          <p className="mt-3 text-sm leading-7 text-neutral-500">{item.note}</p>
        </div>

        <div className="flex flex-wrap gap-3 lg:w-[290px] lg:justify-end">
          <button
            onClick={() => setShowQR((v) => !v)}
            className="rounded-2xl border border-neutral-200 bg-white px-4 py-3 text-sm font-medium text-neutral-700 transition hover:bg-neutral-50"
          >
            {showQR ? '收起二维码' : '显示二维码'}
          </button>

          <div className="relative">
            <button
              onClick={handleCopy}
              className="rounded-2xl bg-amber-500 px-4 py-3 text-sm font-medium text-white shadow-sm transition hover:bg-amber-600"
            >
              一键复制
            </button>
            {copied ? (
              <div className="absolute left-1/2 top-[calc(100%+10px)] z-10 -translate-x-1/2 whitespace-nowrap rounded-full bg-neutral-900 px-3 py-1.5 text-xs font-medium text-white shadow-lg">
                地址已复制
              </div>
            ) : null}
          </div>
        </div>
      </div>

      {showQR ? (
        <div className="mt-5 flex justify-start lg:justify-end">
          <QRCard text={item.address} />
        </div>
      ) : null}
    </div>
  );
}

function PreviewPage() {
  return (
    <section className="rounded-[36px] border border-white bg-white/85 p-4 shadow-[0_24px_80px_rgba(15,23,42,0.08)] backdrop-blur sm:p-6">
      <div className="overflow-hidden rounded-[30px] border border-neutral-200 bg-gradient-to-br from-amber-50 via-white to-orange-50">
        <div className="border-b border-neutral-200 bg-white/80 px-5 py-4 backdrop-blur sm:px-6">
          <div className="flex items-center justify-between gap-4">
            <div>
              <div className="text-sm font-semibold text-neutral-900">pay.btchao.com/xw</div>
              <div className="mt-1 text-sm text-neutral-500">个人链上收款页面示例</div>
            </div>
            <div className="rounded-full border border-emerald-200 bg-emerald-50 px-3 py-1 text-xs font-medium text-emerald-700">
              页面在线
            </div>
          </div>
        </div>

        <div className="grid gap-6 p-5 lg:grid-cols-[290px_1fr] lg:p-6">
          <aside className="h-fit rounded-[28px] border border-white bg-white/88 p-5 shadow-[0_14px_40px_rgba(15,23,42,0.05)]">
            <div className="flex items-center gap-4">
              <div className="flex h-16 w-16 items-center justify-center rounded-[22px] bg-amber-500 text-lg font-bold text-white">
                XW
              </div>
              <div>
                <div className="text-2xl font-semibold tracking-tight text-neutral-900">小吴乐意</div>
                <div className="mt-1 text-sm text-neutral-500">pay.btchao.com/xw</div>
              </div>
            </div>

            <p className="mt-6 text-sm leading-7 text-neutral-600">
              长期关注比特币、区块链投资与链上资产安全。以下为常用收款地址，请务必确认网络后再转账。
            </p>

            <div className="mt-6 rounded-[24px] border border-amber-200 bg-amber-50 p-4 text-sm leading-7 text-amber-700">
              转账前请确认币种、链类型与地址信息。数字资产转账不可逆，本页面仅做地址展示与复制辅助。
            </div>
          </aside>

          <main className="space-y-4">
            <div className="rounded-[28px] border border-white bg-white/88 p-6 shadow-[0_14px_40px_rgba(15,23,42,0.05)]">
              <div className="inline-flex rounded-full border border-amber-200 bg-amber-50 px-3 py-1 text-xs font-semibold uppercase tracking-[0.18em] text-amber-700">
                Address Profile
              </div>
              <h3 className="mt-4 text-3xl font-semibold tracking-tight text-neutral-900">
                统一风格的专属收币页面
              </h3>
              <p className="mt-4 max-w-2xl text-base leading-8 text-neutral-600">
                一个短链接，集中展示常用收款地址。适合发给朋友、社群成员、客户或读者，减少反复发送长地址的麻烦。
              </p>
            </div>

            {previewAddresses.map((item) => (
              <AddressCard key={`${item.coin}-${item.network}`} item={item} />
            ))}
          </main>
        </div>
      </div>
    </section>
  );
}

function FeatureCard({ title, text }) {
  return (
    <div className="rounded-[28px] border border-neutral-200 bg-white p-6 shadow-[0_12px_36px_rgba(15,23,42,0.04)]">
      <h3 className="text-lg font-semibold text-neutral-900">{title}</h3>
      <p className="mt-3 text-sm leading-7 text-neutral-600">{text}</p>
    </div>
  );
}

function StepCard({ index, title, text }) {
  return (
    <div className="rounded-[28px] border border-neutral-200 bg-white p-6 shadow-[0_12px_36px_rgba(15,23,42,0.04)]">
      <div className="flex h-10 w-10 items-center justify-center rounded-full bg-amber-500 text-sm font-semibold text-white">
        {index}
      </div>
      <h3 className="mt-4 text-lg font-semibold text-neutral-900">{title}</h3>
      <p className="mt-3 text-sm leading-7 text-neutral-600">{text}</p>
    </div>
  );
}

export default function PayBtchaoHomepage() {
  return (
    <div className="min-h-screen bg-gradient-to-br from-amber-50 via-white to-orange-50 text-neutral-800">
      <header className="sticky top-0 z-30 border-b border-neutral-200 bg-white/80 backdrop-blur">
        <div className="mx-auto flex max-w-6xl items-center justify-between px-5 py-4 sm:px-6 lg:px-8">
          <div>
            <div className="text-base font-semibold tracking-tight text-neutral-900">pay.btchao.com</div>
            <div className="mt-1 text-sm text-neutral-500">数字资产地址展示与复制页面</div>
          </div>
          <div className="hidden rounded-full border border-amber-200 bg-amber-50 px-4 py-2 text-sm font-medium text-amber-700 sm:block">
            专属页面 · 简洁展示 · 便于分享
          </div>
        </div>
      </header>

      <main>
        <section className="mx-auto max-w-6xl px-5 pt-14 sm:px-6 lg:px-8 lg:pt-20">
          <div className="grid gap-10 lg:grid-cols-[1.02fr_0.98fr] lg:items-center">
            <div>
              <div className="inline-flex rounded-full border border-amber-200 bg-amber-50 px-4 py-2 text-sm font-medium text-amber-700">
                pay.btchao.com / 让收币页面更整洁、更专业
              </div>
              <h1 className="mt-6 max-w-3xl text-4xl font-semibold tracking-tight text-neutral-900 sm:text-5xl lg:text-6xl">
                用一个短链接，清晰展示你的常用收款地址。
              </h1>
              <p className="mt-6 max-w-2xl text-base leading-8 text-neutral-600 sm:text-lg">
                pay.btchao.com 为个人创作者、社群主、内容作者与数字资产用户提供统一风格的地址展示页面。
                将常用 BTC、Lightning、ETH、USDT 等地址集中整理，支持完整展示、二维码查看与一键复制。
              </p>

              <div className="mt-8 flex flex-wrap gap-4">
                <button className="rounded-2xl bg-amber-500 px-6 py-3 text-sm font-semibold text-white shadow-sm transition hover:bg-amber-600">
                  申请专属页面
                </button>
                <button className="rounded-2xl border border-neutral-200 bg-white px-6 py-3 text-sm font-semibold text-neutral-700 transition hover:bg-neutral-50">
                  查看页面示例
                </button>
              </div>

              <div className="mt-8 grid gap-3 sm:grid-cols-3">
                <div className="rounded-2xl border border-neutral-200 bg-white px-4 py-4 text-sm text-neutral-600 shadow-[0_8px_24px_rgba(15,23,42,0.03)]">
                  <div className="font-semibold text-neutral-900">专属链接</div>
                  <div className="mt-1">pay.btchao.com/用户名</div>
                </div>
                <div className="rounded-2xl border border-neutral-200 bg-white px-4 py-4 text-sm text-neutral-600 shadow-[0_8px_24px_rgba(15,23,42,0.03)]">
                  <div className="font-semibold text-neutral-900">完整地址展示</div>
                  <div className="mt-1">核对更直接，分享更省事</div>
                </div>
                <div className="rounded-2xl border border-neutral-200 bg-white px-4 py-4 text-sm text-neutral-600 shadow-[0_8px_24px_rgba(15,23,42,0.03)]">
                  <div className="font-semibold text-neutral-900">复制与二维码</div>
                  <div className="mt-1">适合电脑端与移动端使用</div>
                </div>
              </div>
            </div>

            <PreviewPage />
          </div>
        </section>

        <section className="mx-auto mt-20 max-w-6xl px-5 sm:px-6 lg:px-8">
          <div className="max-w-2xl">
            <div className="inline-flex rounded-full border border-amber-200 bg-amber-50 px-3 py-1 text-xs font-semibold uppercase tracking-[0.18em] text-amber-700">
              Why pay.btchao.com
            </div>
            <h2 className="mt-4 text-3xl font-semibold tracking-tight text-neutral-900 sm:text-4xl">
              一个更适合数字资产用户的地址展示方式。
            </h2>
            <p className="mt-4 text-base leading-8 text-neutral-600">
              不再反复发送长地址，不再把多个币种混在一起，不再让对方在聊天记录里翻来翻去。
              用统一页面整理常用地址，让分享和收款都更简单。
            </p>
          </div>

          <div className="mt-8 grid gap-5 lg:grid-cols-3">
            <FeatureCard
              title="统一风格，专业展示"
              text="页面结构固定、信息清晰、视觉干净。适合作为个人链上收款页、内容创作者打赏页或社群收款说明页。"
            />
            <FeatureCard
              title="完整地址直接呈现"
              text="完整展示地址内容，方便核对。不同网络单独分组展示，减少发送错误网络或错误资产的概率。"
            />
            <FeatureCard
              title="复制与二维码并存"
              text="电脑端用户可一键复制，移动端用户可直接扫码。两个入口同时保留，满足更自然的使用习惯。"
            />
          </div>
        </section>

        <section className="mx-auto mt-20 max-w-6xl px-5 sm:px-6 lg:px-8">
          <div className="rounded-[36px] border border-neutral-200 bg-white p-7 shadow-[0_18px_60px_rgba(15,23,42,0.05)] sm:p-10">
            <div className="max-w-2xl">
              <div className="inline-flex rounded-full border border-amber-200 bg-amber-50 px-3 py-1 text-xs font-semibold uppercase tracking-[0.18em] text-amber-700">
                How it works
              </div>
              <h2 className="mt-4 text-3xl font-semibold tracking-tight text-neutral-900 sm:text-4xl">
                先服务好第一批用户，再逐步产品化。
              </h2>
              <p className="mt-4 text-base leading-8 text-neutral-600">
                当前版本采用统一模板交付，先确保页面好看、好用、便于分享。后续再逐步增加后台管理、验证机制与更多自定义能力。
              </p>
            </div>

            <div className="mt-8 grid gap-5 lg:grid-cols-3">
              <StepCard
                index="01"
                title="提交基础资料"
                text="提交昵称、简介与常用收款地址信息，选择你希望公开展示的网络类型与顺序。"
              />
              <StepCard
                index="02"
                title="生成专属页面"
                text="基于统一风格模板生成你的专属地址页面，并分配专属链接用于传播与分享。"
              />
              <StepCard
                index="03"
                title="用于展示与收款"
                text="将页面链接发给朋友、客户、社群成员或读者，让地址查看、复制与扫码都更自然。"
              />
            </div>
          </div>
        </section>

        <section className="mx-auto mt-20 max-w-6xl px-5 pb-20 sm:px-6 lg:px-8">
          <div className="rounded-[36px] border border-amber-200 bg-amber-50/70 p-7 sm:p-10">
            <div className="max-w-3xl">
              <h2 className="text-3xl font-semibold tracking-tight text-neutral-900 sm:text-4xl">
                专注于地址展示与复制体验，不托管任何用户资产。
              </h2>
              <p className="mt-4 text-base leading-8 text-neutral-700">
                pay.btchao.com 仅用于展示用户主动提供的数字资产地址信息，并提供更清晰的浏览、复制与扫码体验。
                数字资产转账不可逆，请在转账前自行确认币种、网络与地址内容。
              </p>
            </div>
          </div>
        </section>
      </main>
    </div>
  );
}