'use client'
// src/app/_home-client.tsx
// Input: aucun
// Output: contenu landing/dashboard — rendu 100% client (évite SSR crash r3f/framer-motion)
// Rationale: wrapper dynamic ssr:false importé depuis page.tsx

import { motion } from 'framer-motion'
import Link from 'next/link'
import { ArrowRight, ShieldCheck } from 'lucide-react'
import { AppShell } from '@/components/shell/AppShell'
import { Breadcrumbs } from '@/components/shell/Breadcrumbs'
import { Button } from '@/components/ui/Button'
import { HeroSection } from '@/components/home/HeroSection'
import { KpiRow } from '@/components/home/KpiRow'
import { EventsFeed } from '@/components/home/EventsFeed'
import { ActiveProjectsWidget } from '@/components/home/ActiveProjectsWidget'

const EASE_OUT = [0.16, 1, 0.3, 1]

function sectionVariant(delay: number) {
  return {
    initial: { opacity: 0, y: 10 },
    animate: { opacity: 1, y: 0 },
    transition: { duration: 0.35, delay, ease: EASE_OUT },
  }
}

export default function HomeClient() {
  return (
    <AppShell
      topbarContent={<Breadcrumbs items={[{ label: 'Tableau de bord' }]} />}
    >
      <div className="flex flex-col gap-6 max-w-[1440px]">
        <motion.div {...sectionVariant(0)}>
          <HeroSection />
        </motion.div>

        <motion.div {...sectionVariant(0.08)}>
          <KpiRow />
        </motion.div>

        <motion.div className="grid grid-cols-2 gap-4" {...sectionVariant(0.16)}>
          <ActiveProjectsWidget />
          <EventsFeed />
        </motion.div>

        <motion.div {...sectionVariant(0.22)}>
          <div className="relative flex items-center justify-between rounded-xl border border-accent-border bg-accent-subtle px-6 py-4 overflow-hidden">
            <div
              className="absolute inset-0 pointer-events-none"
              style={{
                background:
                  'radial-gradient(ellipse 40% 80% at 0% 50%, rgba(61,184,232,0.07) 0%, transparent 70%)',
              }}
            />
            <div className="relative flex items-center gap-4">
              <span className="p-2 rounded-lg bg-accent/10 border border-accent-border">
                <ShieldCheck size={18} strokeWidth={1.5} className="text-accent" />
              </span>
              <div>
                <p className="text-body text-text-primary font-medium">
                  Diffusez vos outils à vos partenaires, en toute confidentialité
                </p>
                <p className="text-caption text-text-muted mt-0.5">
                  Déploiement chiffré en 2 clics — le code Python reste toujours protégé
                </p>
              </div>
            </div>
            <Link href="/partners" className="relative flex-shrink-0">
              <Button variant="primary" size="md" iconRight={<ArrowRight size={14} strokeWidth={1.5} />}>
                Gérer les partenaires
              </Button>
            </Link>
          </div>
        </motion.div>
      </div>
    </AppShell>
  )
}