import Link from "next/link";
import { Activity, BarChart3, Bot, CheckCircle2, Crown, Shield, Smartphone } from "lucide-react";

export const metadata = {
  title: "Diabetix — Suivi de glycémie intelligent",
  description: "Application de suivi de glycémie avec analyse IA, coach personnel et tableau de bord complet. Disponible sur web et mobile.",
};

export default function LandingPage() {
  return (
    <div className="min-h-screen bg-white">
      {/* Header */}
      <header className="sticky top-0 z-30 border-b border-slate-200 bg-white/90 backdrop-blur">
        <div className="mx-auto flex max-w-5xl items-center justify-between px-4 py-3">
          <div className="flex items-center gap-2 font-semibold text-teal-700">
            <Activity className="h-5 w-5" />
            <span>Diabetix</span>
          </div>
          <nav className="hidden items-center gap-4 text-sm text-slate-600 md:flex">
            <a href="#fonctionnalites" className="hover:text-teal-700">Fonctionnalités</a>
            <a href="#tarifs" className="hover:text-teal-700">Tarifs</a>
            <a href="#faq" className="hover:text-teal-700">FAQ</a>
          </nav>
          <div className="flex items-center gap-2">
            <Link href="/auth/login" className="rounded-lg px-3 py-2 text-sm text-slate-600 hover:text-teal-700">
              Connexion
            </Link>
            <Link href="/auth/register" className="rounded-lg bg-teal-600 px-4 py-2 text-sm font-medium text-white hover:bg-teal-700">
              Commencer gratuitement
            </Link>
          </div>
        </div>
      </header>

      {/* Hero */}
      <section className="bg-gradient-to-b from-teal-50 via-white to-white px-4 py-20 text-center">
        <div className="mx-auto max-w-3xl">
          <div className="mb-4 inline-flex items-center gap-2 rounded-full border border-teal-200 bg-teal-50 px-4 py-1.5 text-xs font-medium text-teal-700">
            <Bot className="h-3.5 w-3.5" />
            Coach IA personnalisé inclus en Premium
          </div>
          <h1 className="text-4xl font-bold leading-tight text-slate-900 sm:text-5xl">
            Prenez le contrôle de votre{" "}
            <span className="text-teal-600">glycémie</span>
          </h1>
          <p className="mt-5 text-lg text-slate-600 leading-relaxed">
            Diabetix vous aide à suivre vos relevés quotidiens, visualiser vos tendances et recevoir des conseils personnalisés grâce à l&apos;intelligence artificielle.
          </p>
          <div className="mt-8 flex flex-wrap items-center justify-center gap-3">
            <Link
              href="/auth/register"
              className="inline-flex items-center gap-2 rounded-xl bg-teal-600 px-6 py-3 text-base font-semibold text-white shadow-md hover:bg-teal-700"
            >
              Commencer gratuitement
            </Link>
            <a
              href="#tarifs"
              className="inline-flex items-center gap-2 rounded-xl border border-slate-300 bg-white px-6 py-3 text-base font-medium text-slate-700 hover:border-teal-400 hover:text-teal-700"
            >
              Voir les tarifs
            </a>
          </div>
          <p className="mt-4 text-xs text-slate-400">Sans carte bancaire · Accès immédiat · Données sécurisées</p>
        </div>
      </section>

      {/* Features */}
      <section id="fonctionnalites" className="px-4 py-20">
        <div className="mx-auto max-w-5xl">
          <h2 className="text-center text-3xl font-bold text-slate-900">Tout ce dont vous avez besoin</h2>
          <p className="mt-3 text-center text-slate-500">
            Une application complète, pensée pour les patients diabétiques au quotidien.
          </p>
          <div className="mt-12 grid gap-8 sm:grid-cols-2 lg:grid-cols-3">
            {[
              {
                icon: BarChart3,
                title: "Tableau de bord complet",
                desc: "Visualisez vos relevés, moyennes, % dans la cible et estimation HbA1c sur 7, 30 et 90 jours.",
              },
              {
                icon: Smartphone,
                title: "Saisie mobile ultra-rapide",
                desc: "Interface dédiée avec pavé numérique, optimisée pour une saisie en quelques secondes sur smartphone.",
              },
              {
                icon: Bot,
                title: "Coach IA Diablo",
                desc: "Un coach bienveillant qui analyse vos données et vous donne des conseils personnalisés en tenant compte de votre profil.",
              },
              {
                icon: Activity,
                title: "Analyse quotidienne IA",
                desc: "Chaque matin, recevez une analyse fraîche de vos tendances glycémiques avec un message d'encouragement.",
              },
              {
                icon: Shield,
                title: "Données sécurisées",
                desc: "Vos données de santé restent les vôtres. Stockage sécurisé, accès chiffré, export CSV à tout moment.",
              },
              {
                icon: CheckCircle2,
                title: "Profil médical complet",
                desc: "Renseignez votre type de diabète, traitement, taille, poids — le coach s'adapte à votre situation.",
              },
            ].map((f) => (
              <div key={f.title} className="rounded-2xl border border-slate-200 bg-white p-6 shadow-sm">
                <div className="mb-4 flex h-11 w-11 items-center justify-center rounded-xl bg-teal-50">
                  <f.icon className="h-5 w-5 text-teal-600" />
                </div>
                <h3 className="text-base font-semibold text-slate-900">{f.title}</h3>
                <p className="mt-2 text-sm text-slate-500 leading-relaxed">{f.desc}</p>
              </div>
            ))}
          </div>
        </div>
      </section>

      {/* Pricing */}
      <section id="tarifs" className="bg-slate-50 px-4 py-20">
        <div className="mx-auto max-w-3xl">
          <h2 className="text-center text-3xl font-bold text-slate-900">Tarifs simples et transparents</h2>
          <p className="mt-3 text-center text-slate-500">Commencez gratuitement, passez Premium quand vous êtes prêt.</p>
          <div className="mt-10 grid gap-6 sm:grid-cols-2">
            {/* Free */}
            <div className="rounded-2xl border border-slate-200 bg-white p-7 shadow-sm">
              <div className="text-sm font-semibold uppercase tracking-wide text-slate-500">Gratuit</div>
              <div className="mt-3 text-4xl font-bold text-slate-900">0 €</div>
              <div className="mt-1 text-sm text-slate-500">pour toujours</div>
              <Link
                href="/auth/register"
                className="mt-6 block rounded-xl border border-slate-300 py-2.5 text-center text-sm font-medium text-slate-700 hover:bg-slate-50"
              >
                Commencer gratuitement
              </Link>
              <ul className="mt-6 space-y-2.5 text-sm text-slate-600">
                {[
                  "Saisie illimitée de relevés",
                  "Tableau de bord 7 jours",
                  "Statistiques hebdomadaires",
                  "Saisie mobile rapide",
                  "Export CSV",
                ].map((f) => (
                  <li key={f} className="flex items-center gap-2">
                    <CheckCircle2 className="h-4 w-4 flex-shrink-0 text-teal-500" />
                    {f}
                  </li>
                ))}
              </ul>
            </div>
            {/* Premium */}
            <div className="relative rounded-2xl border-2 border-teal-500 bg-white p-7 shadow-md">
              <div className="absolute -top-3 left-1/2 -translate-x-1/2">
                <span className="inline-flex items-center gap-1 rounded-full bg-teal-600 px-3 py-1 text-xs font-semibold text-white">
                  <Crown className="h-3 w-3" />
                  Recommandé
                </span>
              </div>
              <div className="text-sm font-semibold uppercase tracking-wide text-teal-600">Premium</div>
              <div className="mt-3 flex items-end gap-1">
                <span className="text-4xl font-bold text-slate-900">4,99 €</span>
                <span className="mb-1 text-slate-500">/mois</span>
              </div>
              <div className="mt-1 text-sm text-slate-500">sans engagement</div>
              <Link
                href="/auth/register"
                className="mt-6 block rounded-xl bg-teal-600 py-2.5 text-center text-sm font-semibold text-white hover:bg-teal-700"
              >
                Essayer Premium
              </Link>
              <ul className="mt-6 space-y-2.5 text-sm text-slate-600">
                {[
                  "Tout le plan Gratuit",
                  "Historique illimité",
                  "Statistiques 30 et 90 jours",
                  "HbA1c estimée (90j)",
                  "Analyse IA quotidienne",
                  "Coach Diablo en temps réel",
                ].map((f) => (
                  <li key={f} className="flex items-center gap-2">
                    <CheckCircle2 className="h-4 w-4 flex-shrink-0 text-teal-500" />
                    {f}
                  </li>
                ))}
              </ul>
            </div>
          </div>
        </div>
      </section>

      {/* FAQ */}
      <section id="faq" className="px-4 py-20">
        <div className="mx-auto max-w-2xl">
          <h2 className="text-center text-3xl font-bold text-slate-900">Questions fréquentes</h2>
          <div className="mt-10 space-y-6">
            {[
              {
                q: "Diabetix remplace-t-il mon médecin ?",
                a: "Non. Diabetix est un outil de suivi et d'aide à la compréhension de vos données. Il ne remplace pas votre équipe soignante et ne donne jamais de conseils médicaux. Consultez toujours votre médecin pour toute décision de santé.",
              },
              {
                q: "Mes données sont-elles sécurisées ?",
                a: "Oui. Vos données sont stockées de façon sécurisée et ne sont jamais partagées avec des tiers. Vous pouvez les exporter ou les supprimer à tout moment.",
              },
              {
                q: "Comment fonctionne le coach IA Diablo ?",
                a: "Diablo utilise l'IA Gemini de Google pour analyser vos relevés, votre profil médical et vous donner des conseils personnalisés. Il ne peut pas modifier votre traitement médical et vous renverra toujours vers votre médecin pour les décisions importantes.",
              },
              {
                q: "Puis-je annuler mon abonnement Premium à tout moment ?",
                a: "Oui, sans engagement. Vous pouvez revenir au plan gratuit à tout moment.",
              },
              {
                q: "L'application fonctionne-t-elle sur mobile ?",
                a: "Oui. Diabetix est une Progressive Web App (PWA) optimisée pour mobile. Une interface de saisie dédiée est disponible pour entrer vos relevés en quelques secondes.",
              },
            ].map(({ q, a }) => (
              <div key={q} className="rounded-xl border border-slate-200 bg-white p-5">
                <h3 className="font-semibold text-slate-900">{q}</h3>
                <p className="mt-2 text-sm text-slate-600 leading-relaxed">{a}</p>
              </div>
            ))}
          </div>
        </div>
      </section>

      {/* CTA */}
      <section className="bg-teal-600 px-4 py-16 text-center text-white">
        <h2 className="text-2xl font-bold">Prêt à mieux gérer votre diabète ?</h2>
        <p className="mt-3 text-teal-100">Rejoignez Diabetix gratuitement et commencez votre suivi aujourd&apos;hui.</p>
        <Link
          href="/auth/register"
          className="mt-6 inline-flex items-center gap-2 rounded-xl bg-white px-6 py-3 text-base font-semibold text-teal-700 hover:bg-teal-50"
        >
          Créer mon compte gratuit
        </Link>
      </section>

      {/* Footer */}
      <footer className="border-t border-slate-200 px-4 py-8 text-center text-xs text-slate-400">
        <div className="flex items-center justify-center gap-2 font-semibold text-teal-700 mb-3">
          <Activity className="h-4 w-4" />
          Diabetix
        </div>
        <p>© {new Date().getFullYear()} Diabetix — Application de suivi de glycémie</p>
        <p className="mt-1">
          Cet outil ne remplace pas un avis médical. Consultez votre médecin pour toute décision de santé.
        </p>
        <div className="mt-3 flex justify-center gap-4">
          <Link href="/legal" className="hover:text-slate-600">CGU &amp; Confidentialité</Link>
        </div>
      </footer>
    </div>
  );
}
