Mutual_Fund/frontend/app/page.tsx

"use client";

import Link from "next/link";
import { ArrowRight, BarChart3, Globe2, ShieldCheck, Sparkles, TrendingUp } from "lucide-react";
import { useEffect, useState } from "react";
import { PublicHeader } from "@/components/public-header";
import { apiFetch } from "@/lib/api";
import { normalizeRiskLevel } from "@/lib/risk";
import type { FundProduct, FundProductList } from "@/types/api";

export default function HomePage() {
  const [products, setProducts] = useState<FundProduct[]>([]);
  const [fundState, setFundState] = useState<"loading" | "ready" | "error">("loading");

  useEffect(() => {
    apiFetch<FundProductList>("/products?page=1&page_size=3")
      .then((data) => { setProducts(data.items); setFundState("ready"); })
      .catch(() => setFundState("error"));
  }, []);

  return (
    <main id="top" className="bg-white text-slate-900">
      <PublicHeader />
      <section className="relative isolate flex min-h-[760px] items-end overflow-hidden bg-[var(--brand-navy)] pb-24 pt-40 text-white">
        <div className="absolute inset-0 -z-20 bg-cover bg-center" style={{ backgroundImage: "url('/hero-finance.jpg')" }} />
        <div className="absolute inset-0 -z-10 bg-[linear-gradient(90deg,rgba(4,18,52,.96)_0%,rgba(4,18,52,.78)_40%,rgba(4,18,52,.2)_100%)]" />
        <div className="absolute inset-0 -z-10 hero-grid opacity-20" />
        <div className="mx-auto w-full max-w-7xl px-8">
          <div className="max-w-3xl">
            <p className="mb-6 flex items-center gap-3 text-sm font-medium uppercase tracking-[0.28em] text-blue-100"><span className="h-px w-10 bg-[var(--brand-gold)]" />长期主义的财富伙伴</p>
            <h1 className="max-w-3xl text-6xl font-semibold leading-[1.05] tracking-tight md:text-7xl">让每一份长期信任，<br /><span className="text-blue-100">都拥有专业的答案。</span></h1>
            <p className="mt-8 max-w-xl text-lg leading-8 text-blue-50">华夏基金以专业研究、稳健风控和智能科技，为每一位投资者提供更清晰的基金选择与更长期的财富陪伴。</p>
            <div className="mt-10 flex flex-wrap gap-4"><Link href="#funds" className="flex items-center gap-2 rounded-lg bg-[var(--brand-primary)] px-5 py-3.5 text-sm font-semibold text-white transition hover:bg-[var(--brand-primary-dark)]">查看基金产品 <ArrowRight className="h-4 w-4" /></Link><Link href="/register" className="rounded-lg border border-white/40 px-5 py-3.5 text-sm font-semibold text-white transition hover:bg-white/10">注册账户</Link></div>
          </div>
          <div className="mt-20 flex items-center gap-8 text-xs text-blue-100"><span className="flex items-center gap-2"><ShieldCheck className="h-4 w-4 text-[var(--brand-gold)]" />合规投资服务</span><span className="flex items-center gap-2"><Globe2 className="h-4 w-4 text-[var(--brand-gold)]" />面向长期价值</span></div>
        </div>
      </section>

      <section id="about" className="mx-auto grid max-w-7xl gap-16 px-8 py-28 lg:grid-cols-[.85fr_1.15fr] lg:items-center"><div><p className="text-sm font-semibold uppercase tracking-[0.22em] text-[var(--brand-primary)]">About Huaxia Fund</p><h2 className="mt-4 text-4xl font-semibold leading-tight text-[var(--brand-navy)]">把复杂的市场，<br />变成清晰的选择。</h2><p className="mt-6 max-w-lg text-base leading-8 text-slate-500">让财富管理更智能、更普惠。我们坚持客户至上、诚信为本、专业精进与合规底线，用科技提升每一次投资决策的确定感。</p><Link href="#services" className="mt-8 inline-flex items-center gap-2 text-sm font-semibold text-[var(--brand-primary)]">了解我们的理念 <ArrowRight className="h-4 w-4" /></Link></div><div className="grid gap-4 sm:grid-cols-2"><div className="rounded-2xl bg-slate-50 p-7"><BarChart3 className="h-7 w-7 text-[var(--brand-primary)]" /><p className="mt-10 text-3xl font-semibold text-[var(--brand-navy)]">长期</p><p className="mt-2 text-sm leading-6 text-slate-500">用持续研究穿越周期，陪伴客户建立长期投资习惯。</p></div><div className="rounded-2xl bg-[var(--brand-navy)] p-7 text-white"><ShieldCheck className="h-7 w-7 text-[var(--brand-gold)]" /><p className="mt-10 text-3xl font-semibold">稳健</p><p className="mt-2 text-sm leading-6 text-blue-100">把风险管理放在每一次产品选择与服务流程之前。</p></div><div className="rounded-2xl bg-[var(--brand-primary)] p-7 text-white sm:col-span-2"><Sparkles className="h-7 w-7 text-blue-100" /><div className="mt-8 flex flex-wrap items-end justify-between gap-6"><div><p className="text-3xl font-semibold">科技赋能</p><p className="mt-2 max-w-md text-sm leading-6 text-blue-100">通过数据、智能投顾与数字化服务，让专业能力更容易被每一位投资者使用。</p></div><ArrowRight className="h-8 w-8" /></div></div></div></section>

      <section id="services" className="bg-slate-50 py-28"><div className="mx-auto max-w-7xl px-8"><div className="max-w-2xl"><p className="text-sm font-semibold uppercase tracking-[0.22em] text-[var(--brand-primary)]">Core Services</p><h2 className="mt-4 text-4xl font-semibold text-[var(--brand-navy)]">为每一种目标，<br />提供更合适的方案。</h2></div><div className="mt-14 grid gap-5 md:grid-cols-3"><div className="border-t-2 border-[var(--brand-primary)] pt-6"><TrendingUp className="h-6 w-6 text-[var(--brand-primary)]" /><h3 className="mt-8 text-xl font-semibold text-[var(--brand-navy)]">公募基金</h3><p className="mt-3 text-sm leading-7 text-slate-500">覆盖多种基金类型，帮助投资者按风险偏好和目标筛选产品。</p></div><div className="border-t-2 border-[var(--brand-gold)] pt-6"><ShieldCheck className="h-6 w-6 text-[var(--brand-gold)]" /><h3 className="mt-8 text-xl font-semibold text-[var(--brand-navy)]">风险管理</h3><p className="mt-3 text-sm leading-7 text-slate-500">通过风险测评和适当性服务，让投资选择建立在理解之上。</p></div><div className="border-t-2 border-[var(--brand-navy)] pt-6"><Sparkles className="h-6 w-6 text-[var(--brand-navy)]" /><h3 className="mt-8 text-xl font-semibold text-[var(--brand-navy)]">智能投顾</h3><p className="mt-3 text-sm leading-7 text-slate-500">用智能工具辅助信息理解和资产配置，服务每一段长期旅程。</p></div></div></div></section>

      <section id="funds" className="mx-auto max-w-7xl px-8 py-28"><div className="flex flex-col justify-between gap-5 md:flex-row md:items-end"><div><p className="text-sm font-semibold uppercase tracking-[0.22em] text-[var(--brand-primary)]">Fund Marketplace</p><h2 className="mt-4 text-4xl font-semibold text-[var(--brand-navy)]">从真实数据开始，<br />找到适合自己的基金。</h2></div><Link href="/products" className="inline-flex items-center gap-2 text-sm font-semibold text-[var(--brand-primary)]">查看全部产品 <ArrowRight className="h-4 w-4" /></Link></div><div className="mt-12 overflow-hidden rounded-xl border border-slate-200">{fundState === "loading" && [1, 2, 3].map((item) => <div key={item} className="h-20 animate-pulse border-b border-slate-100 bg-slate-50" />)}{fundState === "error" && <div className="p-6 text-sm text-amber-800">基金数据暂时无法加载，请确认后端服务已启动后重试。</div>}{fundState === "ready" && products.map((product) => <Link href={`/products/${product.product_code}`} key={product.id} className="group flex items-center gap-6 border-b border-slate-100 bg-white px-6 py-5 last:border-b-0 hover:bg-slate-50"><div className="min-w-0 flex-1"><h3 className="truncate font-semibold text-[var(--brand-navy)] group-hover:text-[var(--brand-primary)]">{product.product_name}</h3><p className="mt-1 text-xs text-slate-400">{product.product_code} · {product.product_type}</p></div><span className="rounded-full bg-indigo-50 px-3 py-1 text-xs font-semibold text-[var(--brand-primary)]">{normalizeRiskLevel(product.risk_level)}</span><div className="w-28 text-right"><p className="text-xs text-slate-400">最新净值</p><p className="mt-1 font-semibold text-[var(--brand-navy)]">{product.nav ?? "--"}</p></div><span className="hidden w-24 text-right text-xs text-slate-400 sm:block">{product.nav_date ?? "暂无日期"}</span><ArrowRight className="h-4 w-4 shrink-0 text-slate-300 group-hover:text-[var(--brand-primary)]" /></Link>)}{fundState === "ready" && products.length === 0 && <div className="p-8 text-sm text-slate-500">当前暂无可展示的基金产品。</div>}</div></section>

      <section className="bg-[var(--brand-navy)] py-20 text-white"><div className="mx-auto flex max-w-7xl flex-col justify-between gap-8 px-8 md:flex-row md:items-center"><div><p className="text-sm font-semibold uppercase tracking-[0.22em] text-blue-200">Start With Clarity</p><h2 className="mt-3 text-3xl font-semibold">先了解自己，再做投资选择。</h2><p className="mt-3 max-w-xl text-sm leading-7 text-blue-100">基金投资有风险，投资者应根据自身风险承受能力选择适合的产品。过往业绩不代表未来表现。</p></div><Link href="/register" className="inline-flex shrink-0 items-center gap-2 rounded-lg bg-white px-5 py-3.5 text-sm font-semibold text-[var(--brand-navy)] transition hover:bg-blue-50">开启账户 <ArrowRight className="h-4 w-4" /></Link></div></section>
      <footer className="bg-white"><div className="mx-auto flex max-w-7xl flex-col gap-7 px-8 py-10 text-sm text-slate-500 md:flex-row md:items-center md:justify-between"><div><p className="font-semibold text-[var(--brand-navy)]">华夏基金</p><p className="mt-2 text-xs">让财富管理更智能、更普惠</p></div><div className="flex flex-wrap gap-5"><Link href="/login" className="hover:text-[var(--brand-primary)]">登录</Link><Link href="/register" className="hover:text-[var(--brand-primary)]">注册</Link><span>风险揭示</span></div></div></footer>
    </main>
  );
}