// Top sections: Navbar, Hero, Problem, Features

// ───────── NAVBAR ─────────
function Navbar() {
  const [scrolled, setScrolled] = useState(false);
  const [open, setOpen] = useState(false);
  useEffect(() => {
    const onScroll = () => setScrolled(window.scrollY > 8);
    onScroll();
    window.addEventListener("scroll", onScroll, { passive: true });
    return () => window.removeEventListener("scroll", onScroll);
  }, []);
  const links = [
    ["Accueil", "#hero"],
    ["Fonctionnalités", "#features"],
    ["Site web", "#website"],
    ["Automatisation", "#automation"],
    ["IA", "#ai"],
    ["Tarifs", "#pricing"],
    ["Démo", "#cta-final"],
  ];
  return (
    <header className={`fixed top-0 inset-x-0 z-50 transition-all duration-300 ${scrolled ? "py-2.5" : "py-4"}`}>
      <div className={`max-w-7xl mx-auto px-4`}>
        <div className={`flex items-center justify-between gap-4 rounded-2xl px-4 sm:px-5 py-3 transition-all duration-300 ${scrolled ? "glass ring-1 ring-ink-100 shadow-soft" : "bg-transparent"}`}>
          <BrandLogo className="h-12" />
          <nav className="hidden lg:flex items-center gap-1">
            {links.map(([label, href]) => (
              <a key={href} href={href} className="px-3.5 py-2 text-[14px] font-medium text-ink-500 hover:text-brand-navy rounded-full hover:bg-ink-50/80 transition">{label}</a>
            ))}
          </nav>
          <div className="flex items-center gap-2">
            <a href="https://app.yocar.ma" className="hidden sm:inline-flex text-[14px] font-medium text-ink-500 hover:text-brand-navy px-3 py-2">Connexion</a>
            <CTAButton href="#cta-final" size="sm" icon="arrow-right">Demander une démo</CTAButton>
            <button className="lg:hidden ml-1 inline-flex items-center justify-center w-10 h-10 rounded-full ring-1 ring-ink-100 bg-white" onClick={() => setOpen(!open)} aria-label="Menu">
              <Icon name={open ? "x" : "menu"} className="w-5 h-5" />
            </button>
          </div>
        </div>
        {open && (
          <div className="lg:hidden mt-2 rounded-2xl glass ring-1 ring-ink-100 shadow-soft p-3">
            <div className="grid">
              {links.map(([label, href]) => (
                <a key={href} href={href} onClick={() => setOpen(false)} className="px-3 py-2.5 text-sm font-medium text-ink-700 rounded-lg hover:bg-ink-50">{label}</a>
              ))}
              <a href="https://app.yocar.ma" onClick={() => setOpen(false)} className="px-3 py-2.5 text-sm font-medium text-ink-700 rounded-lg hover:bg-ink-50">Connexion</a>
            </div>
          </div>
        )}
      </div>
    </header>
  );
}

// ───────── HERO ─────────
function Hero() {
  const agencyLogos = [
    { src: "assets/agencies/ag1.jpeg", alt: "Agence partenaire Yo car 1" },
    { src: "assets/agencies/ag2.jpeg", alt: "Agence partenaire Yo car 2" },
    { src: "assets/agencies/ag3.jpeg", alt: "Agence partenaire Yo car 3" },
    { src: "assets/agencies/ag4.jpeg", alt: "Agence partenaire Yo car 4" },
  ];
  return (
    <section id="hero" className="relative pt-28 sm:pt-32 lg:pt-36 pb-20 sm:pb-28 overflow-hidden">
      {/* background grid + glows */}
      <div className="absolute inset-0 -z-10">
        <div className="absolute inset-0 bg-gradient-to-b from-white via-white to-ink-50" />
        <div className="absolute inset-0 dots opacity-60" />
        <div className="absolute -top-32 -left-24 w-[520px] h-[520px] glow-orange opacity-80" />
        <div className="absolute top-20 -right-32 w-[520px] h-[520px] glow-blue opacity-80" />
      </div>

      <div className="max-w-7xl mx-auto px-4">
        <Reveal className="max-w-4xl mx-auto text-center">
          <span className="inline-flex items-center gap-2 px-3 py-1.5 rounded-full bg-white ring-1 ring-ink-100 shadow-soft text-[13px] font-medium text-ink-500">
            <span className="inline-flex items-center gap-1 text-brand-orange2">
              <Icon name="sparkles" className="w-3.5 h-3.5" /> Nouveau
            </span>
            <span className="w-px h-3 bg-ink-200" />
            Assistant IA + Site web synchronisé
          </span>
          <h1 className="font-display mt-6 text-4xl sm:text-5xl md:text-6xl lg:text-[68px] font-extrabold text-brand-navy leading-[1.04]" style={{ textWrap: "balance" }}>
            Gérez toute votre agence de
            <span className="relative inline-block mx-2">
              <span className="relative z-10">location</span>
              <svg viewBox="0 0 240 14" preserveAspectRatio="none" className="absolute left-0 right-0 -bottom-1 w-full h-3 text-brand-orange/80" fill="none" stroke="currentColor" strokeWidth="3" strokeLinecap="round">
                <path d="M2 8 C 60 2, 180 2, 238 8" />
              </svg>
            </span>
            depuis une seule plateforme.
          </h1>
          <p className="mt-6 text-lg sm:text-xl text-ink-500 leading-relaxed max-w-2xl mx-auto" style={{ textWrap: "pretty" }}>
            Yo car centralise votre flotte, vos réservations, vos contrats, vos paiements, vos clients et votre site web dans un outil simple, moderne et intelligent.
          </p>
          <div className="mt-8 flex flex-col sm:flex-row items-center justify-center gap-3">
            <CTAButton href="#cta-final" size="lg" icon="arrow-right">Demander une démo</CTAButton>
            <CTAButton href="#features" variant="ghost" size="lg" icon="layout-grid">Voir les fonctionnalités</CTAButton>
          </div>
          <div className="mt-6 flex flex-wrap items-center justify-center gap-x-6 gap-y-2 text-[13px] text-ink-400">
            <span className="inline-flex items-center gap-1.5"><Icon name="check" className="w-4 h-4 text-emerald-500" /> Sans engagement</span>
            <span className="inline-flex items-center gap-1.5"><Icon name="check" className="w-4 h-4 text-emerald-500" /> Configuration en 1 jour</span>
            <span className="inline-flex items-center gap-1.5"><Icon name="check" className="w-4 h-4 text-emerald-500" /> Adapté au Maroc 🇲🇦</span>
          </div>
        </Reveal>

        {/* Agency logos */}
        <div className="mt-14 sm:mt-16 max-w-5xl mx-auto">
          <div className="text-center text-[12px] uppercase tracking-[0.2em] text-ink-400 font-semibold">
            Adopté par les agences modernes
          </div>
          <div className="mt-5 grid grid-cols-2 md:grid-cols-4 gap-3 sm:gap-4">
            {agencyLogos.map((logo) => (
              <div key={logo.src} className="h-20 sm:h-24 rounded-2xl bg-white ring-1 ring-ink-100 shadow-soft px-4 py-3 flex items-center justify-center">
                <img
                  src={logo.src}
                  alt={logo.alt}
                  className="max-h-full max-w-full object-contain"
                  loading="lazy"
                />
              </div>
            ))}
          </div>
        </div>
      </div>
    </section>
  );
}

// ───────── PROBLEM ─────────
function Problem() {
  const issues = [
    { icon: "messages-square", title: "Réservations dispersées", desc: "WhatsApp, appels, fichiers… aucune vue d’ensemble." },
    { icon: "calendar-x", title: "Disponibilités difficiles à suivre", desc: "Doubles réservations et vérifications manuelles." },
    { icon: "file-text", title: "Contrats préparés à la main", desc: "Word, copier/coller, erreurs et perte de temps." },
    { icon: "wallet", title: "Paiements et cautions mal suivis", desc: "Acomptes, impayés, remboursements oubliés." },
    { icon: "shield-alert", title: "Documents véhicules oubliés", desc: "Assurance, visite, carte grise expirées sans alerte." },
    { icon: "globe", title: "Site web non synchronisé", desc: "Catalogue obsolète, prix dépassés, contacts perdus." },
  ];
  return (
    <section id="problem" className="relative py-24 sm:py-28">
      <div className="max-w-7xl mx-auto px-4">
        <SectionTitle
          eyebrow="Le constat"
          title={<>Votre agence mérite mieux qu’<span className="text-brand-orange">Excel</span>, WhatsApp et les papiers.</>}
          subtitle="La gestion d’une agence de location se complique vite. Voici les problèmes que rencontrent la plupart des loueurs aujourd’hui."
        />

        <div className="mt-14 grid sm:grid-cols-2 lg:grid-cols-3 gap-4">
          {issues.map((it, i) => (
            <Reveal key={it.title} delay={i * 60}>
              <Card className="p-6 h-full hover:shadow-card hover:-translate-y-0.5 transition">
                <div className="flex items-start gap-4">
                  <span className="shrink-0 inline-flex items-center justify-center w-11 h-11 rounded-xl bg-rose-50 text-rose-600 ring-1 ring-rose-100">
                    <Icon name={it.icon} className="w-5 h-5" />
                  </span>
                  <div>
                    <h3 className="font-display font-bold text-brand-navy">{it.title}</h3>
                    <p className="mt-1.5 text-[14.5px] text-ink-500 leading-relaxed">{it.desc}</p>
                  </div>
                </div>
              </Card>
            </Reveal>
          ))}
        </div>

        {/* Solution callout */}
        <Reveal delay={150}>
          <div className="mt-16 relative overflow-hidden rounded-3xl bg-brand-navy text-white p-8 sm:p-12">
            <div className="absolute -right-20 -top-20 w-[420px] h-[420px] glow-orange opacity-60" />
            <div className="relative grid md:grid-cols-[1fr_auto] items-center gap-8">
              <div>
                <Eyebrow color="orange">La solution</Eyebrow>
                <h3 className="font-display text-2xl sm:text-3xl md:text-4xl font-bold mt-4 leading-tight" style={{ textWrap: "balance" }}>
                  Yo car rassemble tout dans un seul espace clair, connecté et simple à utiliser.
                </h3>
                <p className="mt-4 text-white/70 max-w-2xl">
                  Une plateforme pensée pour le quotidien d’un loueur : flotte, réservations, contrats, paiements, site web et automatisations. Sans cassette de logiciels.
                </p>
              </div>
              <div className="flex flex-col sm:flex-row md:flex-col gap-3">
                <CTAButton href="#features" size="lg" icon="arrow-right">Voir comment</CTAButton>
                <CTAButton href="#cta-final" variant="ghost" size="lg" className="!bg-white/10 !text-white !ring-white/20 hover:!bg-white/15">Réserver une démo</CTAButton>
              </div>
            </div>
          </div>
        </Reveal>
      </div>
    </section>
  );
}

// ───────── FEATURES OVERVIEW ─────────
function Features() {
  const features = [
    { icon: "layout-dashboard", title: "Tableau de bord", desc: "Vue globale de l’activité, chiffre d’affaires, départs, retours, alertes et tâches importantes.", tone: "orange" },
    { icon: "car-front", title: "Gestion de flotte", desc: "Ajoutez vos véhicules, suivez leur statut, leurs documents, leur kilométrage et leur rentabilité.", tone: "blue" },
    { icon: "calendar-check-2", title: "Réservations", desc: "Demandes, confirmations, dates, lieux de livraison, options et statuts de location.", tone: "violet" },
    { icon: "calendar-range", title: "Calendrier de disponibilité", desc: "Voyez les véhicules disponibles, loués ou en maintenance pour éviter les doubles réservations.", tone: "emerald" },
    { icon: "users", title: "Clients CRM", desc: "Centralisez fiches, documents, historique de location, paiements et notes internes.", tone: "sky" },
    { icon: "file-signature", title: "Contrats de location", desc: "Générez des contrats professionnels avec client, véhicule, prix, caution et signature.", tone: "amber" },
    { icon: "scan-line", title: "Check-in / Check-out", desc: "État du véhicule au départ et au retour : photos, carburant, kilométrage, signature.", tone: "rose" },
    { icon: "credit-card", title: "Paiements & cautions", desc: "Suivez paiements, acomptes, cautions, remboursements, impayés et reçus.", tone: "emerald" },
    { icon: "receipt", title: "Facturation", desc: "Créez factures, devis et reçus automatiquement depuis vos réservations.", tone: "orange" },
    { icon: "wrench", title: "Maintenance", desc: "Vidange, pneus, réparations, nettoyage, visite technique et alertes d’entretien.", tone: "blue" },
    { icon: "shield-check", title: "Documents & alertes", desc: "Assurance, carte grise, visite, permis, CIN, passeport et dates d’expiration.", tone: "violet" },
    { icon: "user-cog", title: "Équipe & permissions", desc: "Rôles, accès, tâches et activités de votre équipe.", tone: "sky" },
  ];
  const tones = {
    orange: "bg-orange-50 text-brand-orange2 ring-orange-100",
    blue:   "bg-sky-50 text-sky-700 ring-sky-100",
    violet: "bg-violet-50 text-violet-700 ring-violet-100",
    emerald:"bg-emerald-50 text-emerald-700 ring-emerald-100",
    sky:    "bg-cyan-50 text-cyan-700 ring-cyan-100",
    amber:  "bg-amber-50 text-amber-700 ring-amber-100",
    rose:   "bg-rose-50 text-rose-600 ring-rose-100",
  };
  return (
    <section id="features" className="relative py-24 sm:py-28 bg-white">
      <div className="absolute inset-x-0 top-0 h-px bg-gradient-to-r from-transparent via-ink-200 to-transparent" />
      <div className="max-w-7xl mx-auto px-4">
        <SectionTitle
          eyebrow="Fonctionnalités"
          title="Tout ce qu’il faut pour piloter votre agence."
          subtitle="Un module pour chaque tâche, tous reliés entre eux. Une seule source de vérité, plus de fichiers éparpillés."
        />
        <div className="mt-14 grid sm:grid-cols-2 lg:grid-cols-3 gap-4">
          {features.map((f, i) => (
            <Reveal key={f.title} delay={i * 30}>
              <div className="group relative h-full rounded-2xl bg-white ring-1 ring-ink-100 p-6 hover:ring-brand-navy/10 hover:shadow-card hover:-translate-y-0.5 transition-all">
                <span className={`inline-flex items-center justify-center w-11 h-11 rounded-xl ring-1 ${tones[f.tone]}`}>
                  <Icon name={f.icon} className="w-5 h-5" />
                </span>
                <h3 className="font-display font-bold text-brand-navy mt-5 text-[17px]">{f.title}</h3>
                <p className="mt-2 text-[14.5px] text-ink-500 leading-relaxed">{f.desc}</p>
                <span className="absolute right-5 top-5 text-ink-200 group-hover:text-brand-orange transition">
                  <Icon name="arrow-up-right" className="w-4 h-4" />
                </span>
              </div>
            </Reveal>
          ))}
        </div>
      </div>
    </section>
  );
}

Object.assign(window, { Navbar, Hero, Problem, Features });