import type { Metadata } from "next";
import Link from "next/link";
import {
  Gauge,
  ShieldCheck,
  LineChart,
  CreditCard,
  LifeBuoy,
  Globe,
  Sparkles,
  ArrowRight,
  Check,
  TrendingUp,
  Eye,
  MousePointerClick,
  Target,
  LayoutDashboard,
  Receipt,
  Settings,
  Search,
} from "@/components/ui/icons";
import type { LucideIcon } from "@/components/ui/icons";
import { Badge } from "@/components/ui/badge";
import { Button } from "@/components/ui/button";
import { Reveal } from "@/components/ui/reveal";
import { SectionStamp } from "@/components/marketing/section-stamp";
import { TornEdge } from "@/components/marketing/torn-edge";

export const metadata: Metadata = {
  title: "L'essentiel",
  description:
    "Tout ce que comprend votre abonnement : performance, hébergement, sécurité, suivi Google Search Console et Analytics, support humain.",
};

export default function CeQuiEstInclusPage() {
  return (
    <div className="relative overflow-hidden">

      {/* Hero asymétrique editorial : casser le centered-stack. Le h1 occupe
          la largeur principale, le SectionStamp + reassurance descendent à droite. */}
      <section className="relative z-10 mx-auto max-w-7xl px-4 sm:px-6 md:px-10 pt-16 pb-12 sm:pt-20 sm:pb-16">
        <div className="grid grid-cols-1 lg:grid-cols-12 gap-8 lg:gap-12 items-end">
          <div className="lg:col-span-8">
            <Reveal>
              <SectionStamp number="0" label="L'essentiel" />
            </Reveal>
            <Reveal delay={100}>
              <h1 className="font-editorial mt-6 text-4xl sm:text-5xl md:text-7xl font-medium text-text leading-[0.98] tracking-tight">
                Tout ce dont votre site a besoin, déjà dans l'abonnement.
              </h1>
            </Reveal>
          </div>
          <div className="lg:col-span-4">
            <Reveal delay={220}>
              <div className="border-t border-border pt-5">
                <p className="text-xxs uppercase tracking-[0.18em] font-semibold text-text-faint">
                  Aucun frais caché
                </p>
                <p className="mt-3 text-sm text-text leading-relaxed">
                  Pas de frais d'installation. Pas de plugin à acheter. Pas de prestataire à appeler quand quelque chose casse. Vous payez chaque mois, on s'occupe de tout.
                </p>
              </div>
            </Reveal>
          </div>
        </div>
      </section>

      {/* Quick grid 6 features */}
      <section className="relative z-10 mx-auto max-w-7xl px-4 sm:px-6 md:px-10 pb-16 sm:pb-20">
        <div className="grid grid-cols-1 sm:grid-cols-2 lg:grid-cols-3 gap-4 sm:gap-5">
          <Reveal><QuickCard icon={Gauge} title="Site haute performance" text="Code sur-mesure, dans la technologie la mieux adaptée à votre projet. Score Lighthouse 95+ par défaut, sans optimisation a posteriori." /></Reveal>
          <Reveal delay={80}><QuickCard icon={Search} title="Visibilité Google" text="Votre site est pensé pour être trouvé facilement par vos futurs clients. Référencement naturel SEO et GEO intégrés dès la conception." /></Reveal>
          <Reveal delay={160}><QuickCard icon={Globe} title="Hébergement & domaine" text="Serveur dédié, certificat SSL, CDN Cloudflare. Tout est inclus, vous n'avez rien à configurer." /></Reveal>
          <Reveal delay={240}><QuickCard icon={ShieldCheck} title="Sécurité & sauvegardes" text="WAF Cloudflare, sauvegardes automatiques quotidiennes, monitoring 24/7. Si ça tombe, on s'en occupe." /></Reveal>
          <Reveal delay={320}><QuickCard icon={LineChart} title="Suivi de votre site" text="Search Console + Analytics + PageSpeed dans votre espace client. Vous voyez ce qui marche." highlight /></Reveal>
          <Reveal delay={400}><QuickCard icon={LifeBuoy} title="Support humain" text="Une équipe française qui vous répond rapidement, par e-mail ou téléphone. Pas de chatbot, pas de service externalisé." /></Reveal>
        </div>
      </section>

      {/* Bloc grand : suivi de votre site */}
      <Section
        number="N°1"
        eyebrow="Le différenciateur"
        title={
          <>
            Vous comprenez enfin{" "}
            ce que fait votre site.
          </>
        }
        text="On branche votre site à Google Search Console et Analytics 4 le jour de la mise en ligne. Vous accédez à un tableau de bord clair, sans jargon, conçu pour quelqu'un qui n'est pas développeur."
      >
        <div className="grid grid-cols-1 lg:grid-cols-2 gap-10 items-center">
          <div>
            <ul className="space-y-4">
              <FeatureLine
                icon={MousePointerClick}
                title="Clics & impressions Google"
                text="Combien de personnes voient votre site dans les résultats de recherche, combien cliquent."
              />
              <FeatureLine
                icon={Eye}
                title="Visiteurs et durée moyenne"
                text="Qui vient, combien de temps ils restent, quelles pages les retiennent le plus."
              />
              <FeatureLine
                icon={Target}
                title="Mots-clés qui amènent du trafic"
                text="Quelles requêtes Google font venir vos clients. La donnée la plus actionnable du SEO."
              />
              <FeatureLine
                icon={TrendingUp}
                title="Performance technique mesurée"
                text="Score Lighthouse mis à jour chaque jour. Performance, accessibilité, SEO, bonnes pratiques."
              />
            </ul>
          </div>
          {/* Vue editoriale : sommaire des metriques affichees dans le vrai portail
              client, sans fake data ni faux delta vert. Liste typographique au
              lieu de dashboard porn. */}
          <div className="relative">
            <div className="paper-card relative panel p-6 sm:p-8">
              <div className="flex items-baseline justify-between border-b border-border pb-4">
                <span className="text-micro uppercase tracking-[0.18em] font-semibold text-text-faint">
                  Ce que vous voyez dans le portail
                </span>
                <span className="font-editorial text-xs tabular-nums text-text-faint">28 j</span>
              </div>
              <ul className="mt-5 space-y-3.5">
                <PortalMetricRow label="Clics organiques" source="Google Search Console" />
                <PortalMetricRow label="Impressions" source="Google Search Console" />
                <PortalMetricRow label="Sessions" source="Google Analytics 4" />
                <PortalMetricRow label="Visiteurs uniques" source="Google Analytics 4" />
                <PortalMetricRow label="Durée moyenne" source="Google Analytics 4" />
                <PortalMetricRow label="Taux de rebond" source="Google Analytics 4" />
                <PortalMetricRow label="Position moyenne" source="Google Search Console" />
                <PortalMetricRow label="Score Lighthouse" source="PageSpeed Insights" />
              </ul>
              <p className="mt-6 pt-4 border-t border-border text-xs text-text-faint italic">
                Les chiffres viennent directement de vos comptes Google. Pas de tracking maison, pas de surcouche.
              </p>
            </div>
          </div>
        </div>
      </Section>

      {/* Bloc espace client */}
      <Section
        number="N°2"
        eyebrow="Espace client"
        title={
          <>
            Une vue d'ensemble propre,{" "}
            accessible 24/7.
          </>
        }
        text="Connectez-vous, vous y voyez tout : votre site, ses performances, vos factures, votre abonnement. Donnez accès à votre comptable ou à un collaborateur en lecture seule si besoin."
        reverse
      >
        <div className="grid grid-cols-1 lg:grid-cols-2 gap-10 items-center">
          {/* Mock visuel espace */}
          <div className="relative order-2 lg:order-1">
            <div className="relative panel divide-y divide-border">
              <MockNavRow icon={LayoutDashboard} label="Tableau de bord" active />
              <MockNavRow icon={CreditCard} label="Abonnement" />
              <MockNavRow icon={Receipt} label="Factures" detail="Toutes payées" />
              <MockNavRow icon={LifeBuoy} label="Support" detail="1 ticket en cours" />
              <MockNavRow icon={Settings} label="Paramètres" />
            </div>
          </div>
          <div className="order-1 lg:order-2">
            <ul className="space-y-4">
              <FeatureLine
                icon={LineChart}
                title="Tableau de bord lisible"
                text="Toutes vos métriques importantes sur une page, sans surcharge. Pas de dashboard qui fait peur."
              />
              <FeatureLine
                icon={CreditCard}
                title="Abonnement & paiement"
                text="Voyez votre prochaine facture, changez de carte ou de RIB en deux clics, téléchargez vos factures PDF."
              />
              <FeatureLine
                icon={LifeBuoy}
                title="Support direct"
                text="Posez votre question depuis votre espace, notre équipe vous répond directement. Suivi des échanges."
              />
              <FeatureLine
                icon={ShieldCheck}
                title="Équipe & rôles"
                text="Donnez accès à un collaborateur ou à votre comptable avec le bon niveau de permissions."
              />
            </ul>
          </div>
        </div>
      </Section>

      {/* Bloc multi-sites */}
      <Section
        number="N°3"
        eyebrow="Multi-sites"
        title={
          <>
            Plusieurs adresses, plusieurs sites,{" "}
            un seul espace.
          </>
        }
        text="Vous avez un cabinet à Lyon et un autre à Bordeaux ? Une boutique et un atelier ? On gère plusieurs sites pour le même compte, avec des tableaux de bord séparés et une seule facture."
      >
        <div className="grid grid-cols-1 md:grid-cols-3 gap-4">
          <Reveal><SmallFeature title="Domaines indépendants" text="Chaque site a son propre nom de domaine, sa propre identité, ses propres données analytiques." /></Reveal>
          <Reveal delay={100}><SmallFeature title="Tarifs dégressifs" text="Le second site bénéficie de l'infrastructure déjà en place. On ne facture pas deux fois ce qui est mutualisé." /></Reveal>
          <Reveal delay={200}><SmallFeature title="Une facture unique" text="Un seul prélèvement mensuel pour tous vos sites. Une seule facture pour votre comptable." /></Reveal>
        </div>
      </Section>

      {/* CTA bas */}
      <section className="relative z-10 mx-auto max-w-4xl px-4 sm:px-6 md:px-10 py-16 sm:py-20 md:py-24 text-center">
        <Reveal>
          <div className="panel relative overflow-hidden p-6 sm:p-10 md:p-14">
            <div className="relative">
              <Sparkles className="size-6 text-accent mx-auto" />
              <h2 className="font-editorial mt-4 text-3xl md:text-4xl font-medium text-text">
                Vous voulez voir un{" "}
                aperçu personnalisé de votre futur site ?
              </h2>
              <p className="mt-4 text-text-muted max-w-xl mx-auto">
                Donnez-nous quelques infos sur votre activité, on vous envoie une maquette de votre site sous 48 h. Sans engagement.
              </p>
              <div className="mt-8 flex flex-wrap items-center justify-center gap-3">
                <Link href="/contact">
                  <Button variant="primary" size="lg">
                    Demander un aperçu
                    <ArrowRight className="size-4" />
                  </Button>
                </Link>
                <Link href="/tarifs">
                  <Button variant="outline" size="lg">
                    Voir les tarifs
                  </Button>
                </Link>
              </div>
            </div>
          </div>
        </Reveal>
      </section>
    </div>
  );
}

function Section({
  number,
  eyebrow,
  title,
  text,
  reverse,
  children,
}: {
  number?: string;
  eyebrow: string;
  title: React.ReactNode;
  text: string;
  reverse?: boolean;
  children: React.ReactNode;
}) {
  return (
    <>
      {reverse && <TornEdge side="bottom" fill="var(--color-surface-2)" />}
      <section className={`relative z-10 ${reverse ? "bg-surface-2/50" : "border-t border-border"}`}>
      <div className="mx-auto max-w-7xl px-4 sm:px-6 md:px-10 py-14 sm:py-16 md:py-20">
        <Reveal>
          <div className="max-w-2xl mb-10">
            {number ? (
              <SectionStamp number={number} label={eyebrow} />
            ) : (
              <Badge tone="muted">{eyebrow}</Badge>
            )}
            <h2 className="font-editorial mt-5 text-3xl md:text-5xl font-medium text-text leading-[1.1]">
              {title}
            </h2>
            <p className="mt-4 text-text-muted leading-relaxed">{text}</p>
          </div>
        </Reveal>
        <Reveal delay={150}>{children}</Reveal>
      </div>
      </section>
    </>
  );
}

function QuickCard({ icon: Icon, title, text, highlight }: { icon: LucideIcon; title: string; text: string; highlight?: boolean }) {
  return (
    <div className={`panel p-6 transition-all hover:-translate-y-0.5 hover:border-accent/30 ${highlight ? "border-accent/30 bg-accent/[0.03]" : ""}`}>
      <span className={`size-10 rounded-md flex items-center justify-center ${highlight ? "bg-accent/15 text-accent" : "bg-stone-900/[0.03] border border-border text-text-muted"}`}>
        <Icon className="size-5" />
      </span>
      <h3 className="mt-4 text-base font-semibold text-text">{title}</h3>
      <p className="mt-1.5 text-sm text-text-muted leading-relaxed">{text}</p>
    </div>
  );
}

function FeatureLine({ icon: Icon, title, text }: { icon: LucideIcon; title: string; text: string }) {
  return (
    <li className="flex gap-4">
      <span className="size-9 shrink-0 rounded-md bg-accent/10 border border-accent/20 flex items-center justify-center text-accent">
        <Icon className="size-4" />
      </span>
      <div>
        <h3 className="text-sm font-semibold text-text">{title}</h3>
        <p className="mt-1 text-sm text-text-muted leading-relaxed">{text}</p>
      </div>
    </li>
  );
}

function SmallFeature({ title, text }: { title: string; text: string }) {
  return (
    <div className="panel p-5">
      <Check className="size-4 text-accent" />
      <h3 className="mt-3 text-sm font-semibold text-text">{title}</h3>
      <p className="mt-1 text-sm text-text-muted leading-relaxed">{text}</p>
    </div>
  );
}

function PortalMetricRow({ label, source }: { label: string; source: string }) {
  return (
    <li className="flex items-baseline justify-between gap-4 text-sm">
      <span className="text-text">{label}</span>
      <span className="text-xxs uppercase tracking-[0.12em] text-text-faint shrink-0">
        {source}
      </span>
    </li>
  );
}

function MockNavRow({ icon: Icon, label, active, detail }: { icon: LucideIcon; label: string; active?: boolean; detail?: string }) {
  return (
    <div className={`px-5 py-3.5 flex items-center gap-3 ${active ? "bg-accent/5" : ""}`}>
      <span className={`size-7 rounded-md border flex items-center justify-center ${active ? "border-accent/30 bg-accent/15 text-accent" : "border-border text-text-faint"}`}>
        <Icon className="size-3.5" />
      </span>
      <span className={`text-sm flex-1 ${active ? "text-text font-medium" : "text-text-muted"}`}>{label}</span>
      {detail && <span className="text-xxs text-text-faint">{detail}</span>}
      {active && <span className="size-1 rounded-full bg-accent" />}
    </div>
  );
}