import React, { useMemo } from 'react'
import { Link } from 'react-router-dom'
import { FlipBook } from '../components/FlipBook'

type Entry = {
  to: string
  label: string
  desc: string
}

const BookPage: React.FC<{ children: React.ReactNode; align?: 'center' | 'top' }> = ({ children, align = 'center' }) => {
  return (
    <div
      className={[
        'h-full',
        'w-full',
        'px-[clamp(6px,1vw,10px)]',
        align === 'top' ? 'pt-[clamp(6px,1.4vw,18px)]' : 'flex items-center',
      ].join(' ')}
    >
      <div className="w-full max-w-[40ch]">{children}</div>
    </div>
  )
}

const SectionTitle: React.FC<{ children: React.ReactNode; serif?: boolean; center?: boolean }> = ({
  children,
  serif,
  center,
}) => {
  return (
    <h2
      className={[
        serif ? 'font-[var(--tf-font-serif)]' : 'font-medium',
        center ? 'text-center' : 'text-left',
        'text-[clamp(22px,2.4vw,34px)]',
        'leading-[1.18]',
        'tracking-tight',
        'text-[var(--tf-text)]',
      ].join(' ')}
    >
      {children}
    </h2>
  )
}

const LastPage: React.FC<{ entries: Entry[] }> = ({ entries }) => {
  return (
    <div className="flex h-full flex-col justify-between">
      <div>
        <div className="inline-flex items-center gap-2 rounded-full bg-[var(--tf-accent-soft)] px-3 py-1 text-xs font-[var(--tf-font-ui)] tracking-wide text-[var(--tf-accent-link)]">
          Navigation
        </div>
        <h2 className="mt-4 font-[var(--tf-font-serif)] text-[clamp(22px,2.2vw,28px)] leading-[1.25] tracking-tight">
          从这里进入六个板块
        </h2>
        <p className="mt-4 text-sm leading-[1.7] text-[var(--tf-text-muted)]">
          你可以把这页当作目录：继续探索 Why / How / System / Discovery / Solutions / Proof。
        </p>
      </div>

      <div className="mt-6 grid gap-3 sm:grid-cols-2">
        {entries.map((entry) => (
          <Link
            key={entry.to}
            to={entry.to}
            className={[
              'group rounded-2xl border border-[var(--tf-border)] bg-[color-mix(in_srgb,var(--tf-bg)_52%,white)] p-4 transition',
              'hover:border-[var(--tf-accent-border)] hover:bg-[var(--tf-accent-soft)]',
              'focus:outline-none focus-visible:ring-2 focus-visible:ring-[var(--tf-accent-border)] focus-visible:ring-offset-2 focus-visible:ring-offset-[var(--tf-bg)]',
            ].join(' ')}
          >
            <div className="flex items-center justify-between gap-3">
              <div className="text-sm font-[var(--tf-font-ui)] font-semibold tracking-tight text-[var(--tf-text)]">
                {entry.label}
              </div>
              <span className="text-sm text-[var(--tf-text-subtle)] group-hover:text-[var(--tf-accent-strong)]">→</span>
            </div>
            <p className="mt-2 text-xs leading-[1.6] text-[var(--tf-text-muted)]">{entry.desc}</p>
          </Link>
        ))}
      </div>

      <div className="pt-3 text-xs text-[var(--tf-text-subtle)]">
        Tip: 键盘 → 翻到最后页更快。
      </div>
    </div>
  )
}

export const Home: React.FC = () => {
  const entries = useMemo<Entry[]>(
    () => [
      { to: '/why', label: 'Why', desc: '问题的根源与外部环境。' },
      { to: '/how', label: 'How', desc: '方法论与执行路径。' },
      { to: '/system', label: 'System', desc: '系统构成与模块协同。' },
      { to: '/discovery', label: 'Discovery', desc: '持续获取全球决策信号。' },
      { to: '/solutions', label: 'Solutions', desc: '解决方案与落地方式。' },
      { to: '/proof', label: 'Proof', desc: '案例与可信度证据。' },
    ],
    [],
  )

  const sheets = useMemo(
    () => [
      {
        id: 'section-01',
        front: (
          <BookPage>
            <h1 className="font-[var(--tf-font-serif)] font-medium text-[clamp(36px,4.2vw,52px)] leading-[1.06] tracking-tight text-[var(--tf-text)]">
              全球化，正在进入高不确定性时代
            </h1>
            <p className="mt-8 text-[clamp(16px,1.5vw,18px)] leading-[1.85] text-[var(--tf-text-muted)]">
              市场、政策、数据与地缘风险同时叠加，
              <br />
              任何一次跨境决策的失误，代价都在被放大。
            </p>
            <p className="mt-6 text-[clamp(14px,1.3vw,16px)] leading-[1.85] text-[var(--tf-text-subtle)]">
              对中国企业而言，出海不再只是机会判断，
              <br />
              而是一项系统性能力挑战。
            </p>
          </BookPage>
        ),
      },
      {
        id: 'section-02',
        front: (
          <BookPage align="top">
            <SectionTitle>困难的不是走向全球，而是如何在不确定中做出可控决策</SectionTitle>
            <div className="mt-8 grid gap-4">
              {[
                '现在是否适合进入这个国家或区域？',
                '合规风险会不会在后期集中爆发？',
                '当前的增长模式，是否能复制到下一个市场？',
                '如果业务受挫，是战略判断错误，还是信息不足？',
                '是否存在尚未被识别的关键风险？',
              ].map((item) => (
                <div
                  key={item}
                  className="rounded-2xl border border-[var(--tf-border)] bg-[color-mix(in_srgb,var(--tf-bg)_58%,white)] p-4"
                >
                  <p className="text-[clamp(14px,1.3vw,16px)] leading-[1.9] text-[var(--tf-text-muted)]">{item}</p>
                </div>
              ))}
            </div>
          </BookPage>
        ),
      },
      {
        id: 'section-03',
        front: (
          <BookPage>
            <div className="text-center">
              <div className="mx-auto max-w-[34ch]">
                <p className="font-[var(--tf-font-serif)] text-[clamp(28px,3.2vw,40px)] leading-[1.42] tracking-tight text-[var(--tf-text)]">
                  合规，不是成本。
                  <br />
                  它是增长的结构性杠杆。
                </p>
                <p className="mt-8 text-[clamp(14px,1.3vw,16px)] leading-[1.9] text-[var(--tf-text-subtle)]">
                  当合规被前置并系统化，它决定的不是“能否避免风险”，
                  <br />
                  而是企业能否更快进入市场、建立信任，并实现可复制的增长。
                </p>
              </div>
            </div>
          </BookPage>
        ),
      },
      {
        id: 'section-04',
        front: (
          <BookPage align="top">
            <SectionTitle>这是在复杂现实中被反复验证的方法论</SectionTitle>
            <div className="mt-8 space-y-6 text-[clamp(14px,1.3vw,16px)] leading-[1.9] text-[var(--tf-text-muted)]">
              <p>
                这一判断，来自长期服务中国企业全球化过程中的真实实践，
                <br />
                也来自高度复杂、强监管与多变量环境下的系统性经验。
              </p>
              <p>
                我们逐渐意识到：
                <br />
                合规并非增长的对立面，而是增长的前置条件。
              </p>
            </div>
            <div className="mt-10 border-t border-[color-mix(in_srgb,var(--tf-border)_60%,white)] pt-6">
              <p className="font-[var(--tf-font-serif)] text-[clamp(16px,1.5vw,18px)] tracking-tight text-[var(--tf-text)]">
                Compliance as Growth —— 合规即增长
              </p>
            </div>
          </BookPage>
        ),
      },
      {
        id: 'section-05',
        front: (
          <BookPage align="top">
            <SectionTitle>当问题复杂到无法依赖个人经验时，必须用系统解决</SectionTitle>
            <p className="mt-6 text-[clamp(14px,1.3vw,16px)] leading-[1.9] text-[var(--tf-text-muted)]">
              图灵环流（TuringFlow），致力于将复杂的全球化问题，
              <br />
              转化为可执行、可验证、可规模化的系统能力。
            </p>

            <div className="mt-8 grid gap-3 sm:grid-cols-2">
              {[
                { title: 'G-Comply', desc: '我如何合法进入并持续运营一个海外市场？' },
                { title: 'G-Growth', desc: '我如何在合规前提下，实现可持续且可复制的增长？' },
                { title: 'G-Brain', desc: '多个 AI Agent 如何协同，支撑复杂决策？' },
                { title: 'Discovery', desc: '我如何持续获得高质量、可行动的全球决策信号？' },
              ].map((item) => (
                <div
                  key={item.title}
                  className={[
                    'rounded-2xl border border-[var(--tf-border)]',
                    'bg-[color-mix(in_srgb,var(--tf-bg)_58%,white)]',
                    'p-4',
                  ].join(' ')}
                >
                  <div className="text-sm font-[var(--tf-font-ui)] font-semibold tracking-tight text-[var(--tf-text)]">
                    {item.title}
                  </div>
                  <p className="mt-2 text-xs leading-[1.75] text-[var(--tf-text-muted)]">{item.desc}</p>
                </div>
              ))}
            </div>
          </BookPage>
        ),
      },
      {
        id: 'section-06',
        front: (
          <BookPage align="top">
            <SectionTitle serif>Discovery，是我们的全球决策雷达</SectionTitle>
            <p className="mt-6 text-[clamp(14px,1.3vw,16px)] leading-[1.9] text-[var(--tf-text-muted)]">
              我们持续追踪全球政策、市场、行业与地缘变化，
              <br />
              并将大量碎片化信息，深度加工为可用于决策的判断。
            </p>

            <div className="mt-8 flex flex-wrap items-center gap-2 text-xs font-[var(--tf-font-ui)] text-[var(--tf-accent-link)]">
              {['每日晨报', '政策研究', '行业趋势', '深度报告'].map((tag) => (
                <span key={tag} className="rounded-full bg-[var(--tf-accent-soft)] px-3 py-1">
                  {tag}
                </span>
              ))}
            </div>
          </BookPage>
        ),
      },
      {
        id: 'section-07',
        front: (
          <BookPage align="top">
            <SectionTitle>系统带来的，是可以被度量的确定性</SectionTitle>
            <div className="mt-8 grid gap-4">
              {[
                '全球合规与市场进入决策周期显著缩短',
                '关键风险提前识别与预警',
                '增长路径的可复制性明显提升',
                '跨市场决策一致性持续增强',
              ].map((point) => (
                <div key={point} className="flex items-start gap-3">
                  <span aria-hidden="true" className="mt-2 h-2 w-2 rounded-full bg-[var(--tf-border)]" />
                  <p className="text-[clamp(14px,1.3vw,16px)] leading-[1.9] text-[var(--tf-text-muted)]">{point}</p>
                </div>
              ))}
            </div>
          </BookPage>
        ),
      },
      {
        id: 'section-08',
        front: (
          <BookPage align="top">
            <SectionTitle>被用于复杂场景，才有价值</SectionTitle>
            <p className="mt-6 text-[clamp(14px,1.3vw,16px)] leading-[1.9] text-[var(--tf-text-subtle)]">
              图灵环流的能力，已在政府级项目及多行业实践中得到验证。
            </p>

            <div className="mt-8 grid grid-cols-3 gap-3">
              {['Gov', 'Enterprise', 'Consortium', 'ThinkTank', 'Academia', 'Partner'].map((label) => (
                <div
                  key={label}
                  className="rounded-xl border border-[color-mix(in_srgb,var(--tf-border)_65%,white)] bg-[color-mix(in_srgb,var(--tf-bg)_62%,white)] px-3 py-3 text-center text-[10px] font-[var(--tf-font-ui)] tracking-wide text-[var(--tf-text-subtle)] grayscale"
                  aria-label="Logo 占位"
                >
                  {label}
                </div>
              ))}
            </div>
          </BookPage>
        ),
      },
      {
        id: 'section-09',
        front: (
          <BookPage align="top">
            <SectionTitle serif>探讨你的全球化路径</SectionTitle>
            <div className="mt-8 grid gap-3">
              <div className="rounded-2xl border border-[var(--tf-border)] bg-[color-mix(in_srgb,var(--tf-bg)_58%,white)] p-4">
                <p className="text-[clamp(14px,1.3vw,16px)] leading-[1.85] text-[var(--tf-text-muted)]">查看一份真实的全球决策示例</p>
              </div>
              <div className="rounded-2xl border border-[var(--tf-border)] bg-[color-mix(in_srgb,var(--tf-bg)_58%,white)] p-4">
                <p className="text-[clamp(14px,1.3vw,16px)] leading-[1.85] text-[var(--tf-text-muted)]">与我们交流一个具体市场或业务场景</p>
              </div>
            </div>
          </BookPage>
        ),
      },
      {
        id: 'section-10',
        front: <LastPage entries={entries} />,
      },
    ],
    [entries],
  )

  return (
    <div className="relative overflow-hidden">
      <div
        aria-hidden="true"
        className="pointer-events-none absolute inset-0 bg-[radial-gradient(circle_at_top,rgba(30,91,176,0.12),transparent_55%)]"
      />
      <div className="mx-auto flex min-h-[calc(100vh-0px)] max-w-[1200px] items-center px-[clamp(18px,4vw,56px)] py-[clamp(28px,6vh,64px)]">
        <FlipBook title="TuringFlow" sheets={sheets} className="w-full" />
      </div>
    </div>
  )
}
