'use client'

import { motion, AnimatePresence } from 'motion/react'
import {
  ArrowRight, Menu, X, Check, BrainCircuit,
  Network, GraduationCap, Bot, KeyRound, Globe, ChevronDown
} from 'lucide-react'
import Link from 'next/link'
import Image from 'next/image'
import { useLanguage } from '@/lib/i18n'
import type { SupportedLanguage } from '@/lib/i18n/load-translations'
import { SUBSCRIPTION_TRIAL_DAYS } from '@/lib/billing/trial-constants'
import { useEffect, useRef, useState, type ReactNode } from 'react'
import { useQuery } from '@tanstack/react-query'

const ECHO_LINES = ['echo0', 'echo1', 'echo2'] as const

const LANDING_LANGS: { code: SupportedLanguage; labelKey: string }[] = [
  { code: 'fr', labelKey: 'languages.fr' },
  { code: 'en', labelKey: 'languages.en' },
  { code: 'es', labelKey: 'languages.es' },
  { code: 'de', labelKey: 'languages.de' },
  { code: 'it', labelKey: 'languages.it' },
  { code: 'pt', labelKey: 'languages.pt' },
  { code: 'nl', labelKey: 'languages.nl' },
  { code: 'pl', labelKey: 'languages.pl' },
  { code: 'ru', labelKey: 'languages.ru' },
  { code: 'zh', labelKey: 'languages.zh' },
  { code: 'ja', labelKey: 'languages.ja' },
  { code: 'ko', labelKey: 'languages.ko' },
  { code: 'ar', labelKey: 'languages.ar' },
  { code: 'fa', labelKey: 'languages.fa' },
  { code: 'hi', labelKey: 'languages.hi' },
]

export function LandingPage() {
  const { t, language, setLanguage } = useLanguage()
  const [billingInterval, setBillingInterval] = useState<'monthly' | 'annual'>('monthly')
  const [menuOpen, setMenuOpen] = useState(false)
  const [langOpen, setLangOpen] = useState(false)
  const [echoIndex, setEchoIndex] = useState(0)
  const langRef = useRef<HTMLDivElement>(null)
  const { data: byokCatalog } = useQuery({
    queryKey: ['public', 'byok-catalog'],
    queryFn: async () => {
      const res = await fetch('/api/public/byok-catalog')
      if (!res.ok) throw new Error('catalog')
      return res.json() as Promise<{ providers: { id: string; name: string }[] }>
    },
    staleTime: 60_000,
  })
  const byokProviders = byokCatalog?.providers ?? []

  useEffect(() => {
    if (!langOpen) return
    const onPointer = (e: MouseEvent) => {
      if (langRef.current && !langRef.current.contains(e.target as Node)) setLangOpen(false)
    }
    const onKey = (e: KeyboardEvent) => {
      if (e.key === 'Escape') setLangOpen(false)
    }
    document.addEventListener('mousedown', onPointer)
    document.addEventListener('keydown', onKey)
    return () => {
      document.removeEventListener('mousedown', onPointer)
      document.removeEventListener('keydown', onKey)
    }
  }, [langOpen])
  useEffect(() => {
    const id = setInterval(() => setEchoIndex((i) => (i + 1) % ECHO_LINES.length), 3200)
    return () => clearInterval(id)
  }, [])

  useEffect(() => {
    const root = document.querySelector<HTMLElement>('[data-public-scroll-root]')
    if (!root) return
    const prev = root.style.overflow
    if (menuOpen) root.style.overflow = 'hidden'
    else root.style.overflow = prev || ''
    return () => { root.style.overflow = prev }
  }, [menuOpen])

  const trialDays = SUBSCRIPTION_TRIAL_DAYS
  const PLANS = [
    { key: 'basic', popular: false, hasTrial: false, price: t('landing.pricing.basicPrice'), period: '' },
    {
      key: 'pro',
      popular: true,
      hasTrial: true,
      price: billingInterval === 'monthly' ? t('landing.pricing.proMonthly') : t('landing.pricing.proAnnualMonthly'),
      period: billingInterval === 'monthly' ? t('landing.pricing.perMonth') : t('landing.pricing.perMonthAnnual'),
    },
    {
      key: 'business',
      popular: false,
      hasTrial: true,
      price: billingInterval === 'monthly' ? t('landing.pricing.businessMonthly') : t('landing.pricing.businessAnnualMonthly'),
      period: billingInterval === 'monthly' ? t('landing.pricing.perMonth') : t('landing.pricing.perMonthAnnual'),
    },
    {
      key: 'enterprise',
      popular: false,
      hasTrial: false,
      price: t('landing.pricing.enterprisePrice'),
      period: '',
    },
  ]

  const NAV = [
    { href: '#product', label: t('landing.nav.secondBrain') },
    { href: '#echo', label: t('landing.nav.echo') },
    { href: '#agents', label: t('landing.nav.agents') },
    { href: '#pricing', label: t('landing.nav.pricing') },
  ]

  const scrollPublicHash = (hash: string) => {
    const id = hash.replace(/^#/, '')
    const target = document.getElementById(id)
    const root = document.querySelector<HTMLElement>('[data-public-scroll-root]')
    if (!target || !root) return
    const top = target.getBoundingClientRect().top - root.getBoundingClientRect().top + root.scrollTop - 88
    root.scrollTo({ top, behavior: 'smooth' })
  }

  useEffect(() => {
    const hash = window.location.hash
    if (!hash) return
    const id = window.requestAnimationFrame(() => scrollPublicHash(hash))
    return () => window.cancelAnimationFrame(id)
  }, [])

  return (
    <div className="min-h-screen bg-[#0B0A09] text-[#F4F1EA] font-[family-name:var(--font-manrope)] selection:bg-[#D4A373]/40 selection:text-white">
      {/* Nav */}
      <nav className="fixed top-0 left-0 right-0 z-[100] px-5 sm:px-8 py-4 flex items-center justify-between bg-[#0B0A09]/70 backdrop-blur-xl border-b border-white/[0.06]">
        <Link href="/" className="flex items-center gap-2.5 group">
          <div className="w-9 h-9 bg-[#F4F1EA] text-[#0B0A09] flex items-center justify-center rounded-lg transition-transform group-hover:scale-105">
            <span className="font-serif text-xl font-bold leading-none">M</span>
          </div>
          <span className="font-serif text-xl font-medium tracking-tight text-[#F4F1EA]">Memento</span>
        </Link>
        <div className="hidden lg:flex items-center gap-8">
          {NAV.map((l) => (
            <a
              key={l.href}
              href={l.href}
              onClick={(event) => {
                event.preventDefault()
                scrollPublicHash(l.href)
                window.history.replaceState(null, '', l.href)
              }}
              className="text-[13px] text-white/75 hover:text-white transition-colors"
            >
              {l.label}
            </a>
          ))}
        </div>
        <div className="flex items-center gap-2 sm:gap-3">
          {/* Language switcher */}
          <div ref={langRef} className="relative">
            <button
              type="button"
              onClick={() => setLangOpen((o) => !o)}
              aria-expanded={langOpen}
              aria-haspopup="listbox"
              aria-label={t('landing.nav.language')}
              className="inline-flex items-center gap-1.5 px-3 py-2 rounded-full border border-white/15 text-[12px] text-white/70 hover:text-white hover:border-white/30 transition-colors"
            >
              <Globe size={14} />
              <span className="uppercase font-semibold tracking-wide">{language}</span>
              <ChevronDown size={12} className={`opacity-60 transition-transform ${langOpen ? 'rotate-180' : ''}`} />
            </button>
            <AnimatePresence>
              {langOpen && (
                <motion.ul
                  role="listbox"
                  initial={{ opacity: 0, y: 6 }}
                  animate={{ opacity: 1, y: 0 }}
                  exit={{ opacity: 0, y: 6 }}
                  transition={{ duration: 0.15 }}
                  className="absolute end-0 mt-2 w-48 max-h-72 overflow-y-auto rounded-2xl border border-white/10 bg-[#141210] shadow-2xl py-1.5 z-[110]"
                >
                  {LANDING_LANGS.map((lang) => (
                    <li key={lang.code} role="option" aria-selected={language === lang.code}>
                      <button
                        type="button"
                        onClick={() => {
                          setLanguage(lang.code)
                          setLangOpen(false)
                        }}
                        className={`w-full text-start px-4 py-2.5 text-[13px] transition-colors ${
                          language === lang.code
                            ? 'bg-[#D4A373]/15 text-[#D4A373]'
                            : 'text-white/70 hover:bg-white/5 hover:text-white'
                        }`}
                      >
                        {t(lang.labelKey)}
                      </button>
                    </li>
                  ))}
                </motion.ul>
              )}
            </AnimatePresence>
          </div>

          <Link href="/login" className="hidden sm:inline text-[13px] text-white/75 hover:text-white transition-colors px-2">
            {t('landing.nav.login')}
          </Link>
          <Link
            href="/register"
            className="hidden sm:inline-flex items-center gap-2 px-5 py-2.5 rounded-full bg-[#F4F1EA] text-[#0B0A09] text-[13px] font-semibold hover:bg-white transition-colors"
          >
            {t('landing.nav.cta')}
          </Link>
          <button
            type="button"
            aria-label={menuOpen ? t('landing.nav.closeMenu') : t('landing.nav.openMenu')}
            onClick={() => setMenuOpen((o) => !o)}
            className="lg:hidden w-10 h-10 rounded-full border border-white/15 flex items-center justify-center text-white/80"
          >
            {menuOpen ? <X size={18} /> : <Menu size={18} />}
          </button>
        </div>
      </nav>

      <AnimatePresence>
        {menuOpen && (
          <motion.div
            initial={{ opacity: 0 }}
            animate={{ opacity: 1 }}
            exit={{ opacity: 0 }}
            className="fixed inset-0 z-[99] bg-[#0B0A09] pt-24 px-8 lg:hidden"
          >
            <div className="flex flex-col gap-1">
              {NAV.map((l) => (
                <a
                  key={l.href}
                  href={l.href}
                  onClick={(event) => {
                    event.preventDefault()
                    setMenuOpen(false)
                    scrollPublicHash(l.href)
                    window.history.replaceState(null, '', l.href)
                  }}
                  className="py-4 text-3xl font-serif border-b border-white/10"
                >
                  {l.label}
                </a>
              ))}
              <Link
                href="/login"
                onClick={() => setMenuOpen(false)}
                className="mt-10 py-4 text-2xl font-serif text-white/80 text-center border-b border-white/10"
              >
                {t('landing.nav.login')}
              </Link>
              <Link href="/register" onClick={() => setMenuOpen(false)} className="mt-4 py-4 rounded-2xl bg-[#F4F1EA] text-[#0B0A09] text-center font-semibold">
                {t('landing.nav.cta')}
              </Link>
            </div>
          </motion.div>
        )}
      </AnimatePresence>

      {/* ── HERO ── */}
      <section className="relative min-h-[100dvh] flex flex-col justify-center pt-28 pb-16 px-5 sm:px-8 overflow-hidden">
        {/* Atmosphere — warm, not purple neon */}
        <div className="pointer-events-none absolute inset-0">
          <div className="absolute -top-32 left-1/2 -translate-x-1/2 w-[900px] h-[500px] bg-[#D4A373]/15 blur-[120px] rounded-full" />
          <div className="absolute bottom-0 right-0 w-[500px] h-[400px] bg-[#A47148]/10 blur-[100px] rounded-full" />
          <div
            className="absolute inset-0 opacity-[0.07]"
            style={{
              backgroundImage: 'radial-gradient(circle at 1px 1px, #F4F1EA 1px, transparent 0)',
              backgroundSize: '28px 28px',
            }}
          />
        </div>

        <div className="relative z-10 max-w-5xl mx-auto w-full text-center">
          <div className="inline-flex items-center gap-2 px-3.5 py-1.5 rounded-full border border-[#D4A373]/35 bg-[#D4A373]/10 mb-7">
            <BrainCircuit size={14} className="text-[#D4A373]" />
            <span className="text-[12px] tracking-[0.18em] uppercase text-[#D4A373] font-semibold">
              {t('landing.hero.badge')}
            </span>
          </div>

          <p className="text-[13px] tracking-[0.12em] uppercase text-white/70 mb-5 font-medium">
            {t('landing.hero.eyebrow')}
          </p>

          <h1 className="font-serif text-[clamp(2.5rem,7.5vw,5.4rem)] font-medium tracking-tight leading-[1.05] text-[#F4F1EA] mb-6">
            {t('landing.hero.headline')}
            <br />
            <span className="italic text-[#D4A373]">{t('landing.hero.headlineAccent')}</span>
          </h1>

          <p className="max-w-xl mx-auto text-[17px] sm:text-lg text-white/75 leading-relaxed mb-10">
            {t('landing.hero.subtitle')}
          </p>

          <div className="flex flex-col items-center gap-3">
            <Link
              href="/register"
              className="group inline-flex items-center justify-center gap-3 px-9 py-4 rounded-full bg-[#F4F1EA] text-[#0B0A09] text-[15px] font-semibold hover:bg-white transition-all hover:scale-[1.02] shadow-[0_0_40px_-8px_rgba(212,163,115,0.45)]"
            >
              {t('landing.hero.cta')}
              <ArrowRight size={18} className="transition-transform group-hover:translate-x-0.5" />
            </Link>
            <p className="text-[12px] text-white/60">{t('landing.hero.ctaHint')}</p>
          </div>
        </div>

        {/* Product stage */}
        <div className="relative z-10 mt-14 sm:mt-20 max-w-5xl mx-auto w-full">
          <div className="relative rounded-[20px] sm:rounded-[28px] overflow-hidden border border-white/10 shadow-[0_40px_100px_-20px_rgba(0,0,0,0.7)]">
            <div className="absolute inset-0 bg-gradient-to-t from-[#0B0A09] via-transparent to-transparent z-10 pointer-events-none" />
            <Image
              src="/images/workspace-hero.jpg"
              alt={t('landing.hero.imageAlt')}
              width={2000}
              height={1200}
              priority
              className="w-full h-auto object-cover aspect-[16/10] opacity-90"
            />
            {/* Live Memory Echo chip */}
            <div className="absolute bottom-5 left-5 right-5 sm:bottom-8 sm:left-8 sm:right-auto sm:max-w-md z-20">
              <div className="rounded-2xl border border-white/15 bg-[#0B0A09]/85 backdrop-blur-xl p-4 sm:p-5 text-left shadow-2xl">
                <div className="flex items-center gap-2 mb-2">
                  <span className="relative flex h-2 w-2">
                    <span className="animate-ping absolute inline-flex h-full w-full rounded-full bg-[#D4A373] opacity-60" />
                    <span className="relative inline-flex rounded-full h-2 w-2 bg-[#D4A373]" />
                  </span>
                  <span className="text-[11px] font-semibold uppercase tracking-[0.2em] text-[#D4A373]">
                    {t('landing.hero.echoLive')}
                  </span>
                </div>
                <AnimatePresence mode="wait">
                  <motion.p
                    key={ECHO_LINES[echoIndex]}
                    initial={{ opacity: 0, y: 8 }}
                    animate={{ opacity: 1, y: 0 }}
                    exit={{ opacity: 0, y: -8 }}
                    transition={{ duration: 0.35 }}
                    className="text-sm sm:text-[15px] font-serif italic text-[#F4F1EA]/90 leading-relaxed"
                  >
                    {t(`landing.hero.${ECHO_LINES[echoIndex]}`)}
                  </motion.p>
                </AnimatePresence>
              </div>
            </div>
          </div>
        </div>
      </section>

      {/* Trust strip */}
      <section className="px-5 sm:px-8 py-10 border-y border-white/[0.06]">
        <div className="max-w-5xl mx-auto flex flex-wrap items-center justify-center gap-x-10 gap-y-4 text-[12px] sm:text-[13px] text-white/70 tracking-wide">
          {['trust0', 'trust1', 'trust2', 'trust3'].map((k) => (
            <span key={k} className="flex items-center gap-2">
              <Check size={14} className="text-[#D4A373]" />
              {t(`landing.trust.${k}`)}
            </span>
          ))}
        </div>
      </section>

      {/* Pain → Promise */}
      <section className="px-5 sm:px-8 py-24 sm:py-32">
        <div className="max-w-3xl mx-auto text-center">
          <p className="text-[12px] uppercase tracking-[0.25em] text-[#D4A373] mb-5 font-medium">{t('landing.pain.label')}</p>
          <h2 className="font-serif text-3xl sm:text-5xl tracking-tight leading-[1.15] mb-6">
            {t('landing.pain.title')}
          </h2>
          <p className="text-lg text-white/70 leading-relaxed mb-8">{t('landing.pain.desc')}</p>
          <p className="text-base sm:text-lg font-serif italic text-[#D4A373]/90 leading-relaxed">
            {t('landing.pain.secondBrain')}
          </p>
        </div>
      </section>

      {/* Product moments — large narrative blocks, not wireframe cards */}
      <section id="product" className="px-5 sm:px-8 pb-8">
        <div className="max-w-6xl mx-auto space-y-4">
          <ProductMoment
            id="echo"
            eyebrow={t('landing.moments.echo.eyebrow')}
            title={t('landing.moments.echo.title')}
            desc={t('landing.moments.echo.desc')}
            dark
          >
            <div className="space-y-3 p-2">
              {[0, 1, 2].map((i) => (
                <div
                  key={i}
                  className={`rounded-xl border p-4 ${i === 0 ? 'border-[#D4A373]/40 bg-[#D4A373]/10' : 'border-white/10 bg-white/[0.03]'}`}
                >
                  <p className="text-[11px] uppercase tracking-wider text-[#D4A373] mb-1">
                    {t(`landing.moments.echo.card${i}Label`)}
                  </p>
                  <p className="text-sm text-white/75 font-serif italic leading-relaxed">
                    {t(`landing.moments.echo.card${i}`)}
                  </p>
                </div>
              ))}
            </div>
          </ProductMoment>

          <ProductMoment
            eyebrow={t('landing.moments.dashboard.eyebrow')}
            title={t('landing.moments.dashboard.title')}
            desc={t('landing.moments.dashboard.desc')}
          >
            <div className="grid grid-cols-2 gap-2 p-2">
              {['w0', 'w1', 'w2', 'w3'].map((w) => (
                <div key={w} className="rounded-xl bg-[#0B0A09]/40 border border-black/10 p-4 min-h-[88px]">
                  <p className="text-[13px] font-medium text-[#A47148] mb-2">{t(`landing.moments.dashboard.${w}Label`)}</p>
                  <p className="text-sm font-medium text-[#0B0A09]/80">{t(`landing.moments.dashboard.${w}`)}</p>
                </div>
              ))}
            </div>
          </ProductMoment>

          <div className="grid grid-cols-1 md:grid-cols-2 gap-4">
            <ProductMoment
              compact
              eyebrow={t('landing.moments.insights.eyebrow')}
              title={t('landing.moments.insights.title')}
              desc={t('landing.moments.insights.desc')}
              dark
            >
              <div className="relative h-36 flex items-center justify-center">
                <Network className="text-[#D4A373]/80" size={48} strokeWidth={1.25} />
                <p className="absolute bottom-2 left-4 text-[13px] font-medium text-white/75">
                  {t('landing.moments.insights.chip')}
                </p>
              </div>
            </ProductMoment>
            <ProductMoment
              compact
              eyebrow={t('landing.moments.revision.eyebrow')}
              title={t('landing.moments.revision.title')}
              desc={t('landing.moments.revision.desc')}
            >
              <div className="rounded-xl bg-white border border-black/5 p-5 mx-2 mb-2">
                <GraduationCap className="text-[#A47148] mb-3" size={22} />
                <p className="font-serif text-[#0B0A09] text-base mb-3">{t('landing.moments.revision.card')}</p>
                <div className="flex gap-2">
                  <span className="flex-1 py-2 rounded-lg bg-[#0B0A09]/5 text-center text-[11px] font-semibold text-[#0B0A09]/50">?</span>
                  <span className="flex-1 py-2 rounded-lg bg-[#0B0A09] text-center text-[13px] font-semibold text-[#F4F1EA]">{t('landing.moments.revision.badge')}</span>
                </div>
              </div>
            </ProductMoment>
          </div>
        </div>
      </section>

      {/* How it works */}
      <section className="px-5 sm:px-8 py-28">
        <div className="max-w-5xl mx-auto">
          <h2 className="font-serif text-3xl sm:text-4xl tracking-tight text-center mb-16">
            {t('landing.how.title')}
          </h2>
          <div className="grid grid-cols-1 md:grid-cols-3 gap-10 md:gap-6">
            {['s0', 's1', 's2'].map((s, i) => (
              <div key={s} className="relative text-center md:text-left">
                <div className="text-[13px] font-semibold text-[#D4A373] mb-4 tracking-widest">0{i + 1}</div>
                <h3 className="font-serif text-xl mb-3">{t(`landing.how.${s}.title`)}</h3>
                <p className="text-sm text-white/70 leading-relaxed">{t(`landing.how.${s}.desc`)}</p>
              </div>
            ))}
          </div>
        </div>
      </section>

      {/* Agents */}
      <section id="agents" className="px-5 sm:px-8 py-28 border-t border-white/[0.06]">
        <div className="max-w-5xl mx-auto">
          <div className="max-w-2xl mb-14">
            <p className="text-[12px] uppercase tracking-[0.25em] text-[#D4A373] mb-4 font-medium">{t('landing.agents.label')}</p>
            <h2 className="font-serif text-3xl sm:text-5xl tracking-tight mb-5">{t('landing.agents.title')}</h2>
            <p className="text-white/70 text-lg leading-relaxed">{t('landing.agents.desc')}</p>
          </div>
          <div className="grid grid-cols-1 sm:grid-cols-2 lg:grid-cols-3 gap-3">
            {(['scraper', 'researcher', 'slideGen', 'monitor', 'diagramGen', 'custom'] as const).map((key) => (
              <div key={key} className="p-6 rounded-2xl border border-white/[0.08] bg-white/[0.03] hover:bg-white/[0.06] transition-colors">
                <Bot size={18} className="text-[#D4A373] mb-4" />
                <h4 className="font-serif text-lg mb-2">{t(`landing.agents.${key}.title`)}</h4>
                <p className="text-sm text-white/70 leading-relaxed">{t(`landing.agents.${key}.desc`)}</p>
              </div>
            ))}
          </div>
        </div>
      </section>

      {/* BYOK */}
      <section className="px-5 sm:px-8 py-20">
        <div className="max-w-5xl mx-auto rounded-[28px] border border-white/10 bg-gradient-to-br from-[#1a1612] to-[#0B0A09] p-8 sm:p-12 flex flex-col md:flex-row gap-10 items-start">
          <div className="flex-1">
            <div className="flex items-center gap-2 text-[#D4A373] mb-4">
              <KeyRound size={18} />
              <span className="text-[12px] uppercase tracking-[0.2em] font-semibold">{t('landing.byok.label')}</span>
            </div>
            <h3 className="font-serif text-3xl tracking-tight mb-4">{t('landing.byok.title')}</h3>
            <p className="text-white/70 leading-relaxed">{t('landing.byok.desc')}</p>
          </div>
          <div className="w-full md:w-[320px] text-[13px] text-white/70 space-y-4 rounded-2xl border border-white/10 bg-black/40 p-5">
            {byokProviders.length > 0 ? (
              <ul className="grid grid-cols-1 gap-2 text-sm text-[#F4F1EA]">
                {byokProviders.map((p) => (
                  <li key={p.id}>{p.name}</li>
                ))}
              </ul>
            ) : (
              <p className="text-white/70">{t('landing.byok.pointProvider')}</p>
            )}
            <p className="text-[#D4A373]">{t('landing.byok.pointYours')}</p>
          </div>
        </div>
      </section>

      {/* Pricing */}
      <section id="pricing" className="px-5 sm:px-8 py-28 border-t border-white/[0.06]">
        <div className="max-w-6xl mx-auto">
          <div className="text-center mb-12">
            <h2 className="font-serif text-3xl sm:text-5xl tracking-tight mb-4">{t('landing.pricing.title')}</h2>
            <p className="text-white/70 mb-8">{t('landing.pricing.desc')}</p>
            <div className="inline-flex p-1 rounded-full border border-white/10 bg-white/[0.03]">
              <button
                type="button"
                onClick={() => setBillingInterval('monthly')}
                className={`px-5 py-2 rounded-full text-[12px] font-semibold transition-all ${billingInterval === 'monthly' ? 'bg-[#F4F1EA] text-[#0B0A09]' : 'text-white/70'}`}
              >
                {t('landing.pricing.monthly')}
              </button>
              <button
                type="button"
                onClick={() => setBillingInterval('annual')}
                className={`px-5 py-2 rounded-full text-[12px] font-semibold transition-all relative ${billingInterval === 'annual' ? 'bg-[#F4F1EA] text-[#0B0A09]' : 'text-white/70'}`}
              >
                {t('landing.pricing.annual')}
                <span className="absolute -top-3 -right-1 text-[10px] text-[#D4A373] whitespace-nowrap">
                  {t('landing.pricing.savePercent')}
                </span>
              </button>
            </div>
          </div>
          <div className="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-4 gap-3">
            {PLANS.map((plan) => (
              <div
                key={plan.key}
                className={`rounded-2xl border p-6 flex flex-col ${
                  plan.popular
                    ? 'border-[#D4A373]/50 bg-[#D4A373]/10'
                    : 'border-white/[0.08] bg-white/[0.02]'
                }`}
              >
                {plan.popular && (
                  <span className="text-[10px] font-bold uppercase tracking-widest text-[#D4A373] mb-3">
                    {t('landing.pricing.popular')}
                  </span>
                )}
                <h4 className="text-[13px] font-medium tracking-wide text-white/80 mb-2">
                  {t(`landing.pricing.${plan.key}.name`)}
                </h4>
                <div className="flex items-baseline gap-1 mb-2">
                  <span className="text-3xl font-serif">{plan.price}</span>
                  {plan.period && <span className="text-sm text-white/70">{plan.period}</span>}
                </div>
                {plan.hasTrial && (
                  <p className="text-[11px] font-semibold text-[#D4A373] mb-3">
                    {t('landing.pricing.trialBadge', { days: trialDays })}
                  </p>
                )}
                <p className="text-sm text-white/70 mb-6">{t(`landing.pricing.${plan.key}.desc`)}</p>
                <ul className="space-y-2.5 mb-8 flex-1">
                  {plan.hasTrial && (
                    <li className="flex gap-2 text-xs text-[#D4A373]/90">
                      <Check size={12} className="text-[#D4A373] mt-0.5 shrink-0" />
                      {t('landing.pricing.trialFeature', { days: trialDays })}
                    </li>
                  )}
                  {[0, 1, 2, 3, 4, 5].map((j) => {
                    const feat = t(`landing.pricing.${plan.key}.feature${j}`, {
                      count: byokProviders.length || '…',
                    })
                    if (!feat || feat.startsWith('landing.')) return null
                    return (
                      <li key={j} className="flex gap-2 text-sm text-white/80">
                        <Check size={12} className="text-[#D4A373] mt-0.5 shrink-0" />
                        {feat}
                      </li>
                    )
                  })}
                </ul>
                <Link
                  href="/register"
                  className={`py-3 rounded-xl text-center text-[13px] font-semibold transition-colors ${
                    plan.popular
                      ? 'bg-[#F4F1EA] text-[#0B0A09] hover:bg-white'
                      : 'bg-white/10 text-white hover:bg-white/15'
                  }`}
                >
                  {plan.hasTrial
                    ? t('landing.pricing.trialCta', { days: trialDays })
                    : t(`landing.pricing.${plan.key}.cta`)}
                </Link>
              </div>
            ))}
          </div>
        </div>
      </section>

      {/* Final CTA */}
      <section className="relative px-5 sm:px-8 py-36 text-center overflow-hidden">
        <div className="pointer-events-none absolute inset-0">
          <div className="absolute left-1/2 top-1/2 -translate-x-1/2 -translate-y-1/2 w-[600px] h-[300px] bg-[#D4A373]/20 blur-[100px] rounded-full" />
        </div>
        <div className="relative z-10 max-w-2xl mx-auto">
          <BrainCircuit className="mx-auto text-[#D4A373] mb-6" size={32} strokeWidth={1.25} />
          <h2 className="font-serif text-4xl sm:text-6xl tracking-tight leading-tight mb-6">
            {t('landing.cta.title')}
          </h2>
          <p className="text-white/70 text-lg mb-10">{t('landing.cta.desc')}</p>
          <Link
            href="/register"
            className="inline-flex items-center gap-3 px-10 py-4 rounded-full bg-[#F4F1EA] text-[#0B0A09] text-[15px] font-semibold hover:bg-white transition-all hover:scale-[1.02]"
          >
            {t('landing.cta.button')}
            <ArrowRight size={18} />
          </Link>
          <p className="mt-4 text-[12px] text-white/75">{t('landing.hero.ctaHint')}</p>
        </div>
      </section>

      <footer className="px-5 sm:px-8 py-14 border-t border-white/[0.06]">
        <div className="max-w-6xl mx-auto flex flex-col md:flex-row justify-between gap-10">
          <div className="max-w-xs">
            <div className="flex items-center gap-2 mb-3">
              <div className="w-7 h-7 bg-[#F4F1EA] text-[#0B0A09] flex items-center justify-center rounded-md">
                <span className="font-serif font-bold text-sm">M</span>
              </div>
              <span className="font-serif text-lg">Memento</span>
            </div>
            <p className="text-sm text-white/60">{t('landing.footer.desc')}</p>
          </div>
          <div className="grid grid-cols-3 gap-10 text-sm">
            {(['product', 'community', 'legal'] as const).map((section) => (
              <div key={section}>
                <p className="text-[13px] font-medium tracking-wide text-white/70 mb-3">
                  {t(`landing.footer.${section}.title`)}
                </p>
                <ul className="space-y-2 text-white/70">
                  {[0, 1, 2].map((j) => {
                    const label = t(`landing.footer.${section}.link${j}`)
                    const href = t(`landing.footer.${section}.link${j}Href`)
                    if (!label || label.startsWith('landing.')) return null
                    return (
                      <li key={j}>
                        {href.startsWith('/') ? (
                          <Link href={href} className="hover:text-white transition-colors">{label}</Link>
                        ) : (
                          <a href={href} className="hover:text-white transition-colors">{label}</a>
                        )}
                      </li>
                    )
                  })}
                </ul>
              </div>
            ))}
          </div>
        </div>
        <p className="max-w-6xl mx-auto mt-12 pt-8 border-t border-white/[0.06] text-[13px] text-white/70 tracking-wide">
          © 2026 Memento. {t('landing.footer.rights')}
        </p>
      </footer>
    </div>
  )
}

function ProductMoment({
  id,
  eyebrow,
  title,
  desc,
  children,
  dark,
  compact,
}: {
  id?: string
  eyebrow: string
  title: string
  desc: string
  children: ReactNode
  dark?: boolean
  compact?: boolean
}) {
  return (
    <motion.div
      id={id}
      initial={{ opacity: 0, y: 28 }}
      whileInView={{ opacity: 1, y: 0 }}
      viewport={{ once: true, margin: '-60px' }}
      transition={{ duration: 0.55 }}
      className={`rounded-[24px] sm:rounded-[32px] border overflow-hidden ${
        dark
          ? 'bg-[#141210] border-white/[0.08] text-[#F4F1EA]'
          : 'bg-[#EDE8DF] border-transparent text-[#0B0A09]'
      } ${compact ? '' : 'grid grid-cols-1 lg:grid-cols-2'}`}
    >
      <div className={`p-8 sm:p-10 flex flex-col justify-center ${compact ? 'pb-4' : ''}`}>
        <p className={`text-[11px] uppercase tracking-[0.22em] font-semibold mb-3 ${dark ? 'text-[#D4A373]' : 'text-[#A47148]'}`}>
          {eyebrow}
        </p>
        <h3 className="font-serif text-2xl sm:text-3xl tracking-tight mb-3 leading-tight">{title}</h3>
        <p className={`text-[15px] leading-relaxed ${dark ? 'text-white/70' : 'text-[#0B0A09]/75'}`}>{desc}</p>
      </div>
      <div className={`${compact ? 'px-4 pb-6' : 'p-6 sm:p-8'} flex items-center`}>
        <div className="w-full">{children}</div>
      </div>
    </motion.div>
  )
}