// Mid sections: Website builder, Automation, AI Assistant, Mobile, Workflow

// ───────── WEBSITE BUILDER ─────────
function Website() {
  return (
    <section id="website" className="relative py-24 sm:py-28 bg-ink-50 overflow-hidden">
      <div className="absolute inset-0 -z-10">
        <div className="absolute -left-32 top-20 w-[420px] h-[420px] glow-orange opacity-60" />
        <div className="absolute -right-32 bottom-10 w-[420px] h-[420px] glow-blue opacity-60" />
      </div>
      <div className="max-w-7xl mx-auto px-4">
        <div className="grid lg:grid-cols-2 gap-14 items-center">
          <Reveal>
            <Eyebrow color="orange">Site web inclus</Eyebrow>
            <h2 className="font-display text-3xl sm:text-4xl md:text-5xl font-bold text-brand-navy mt-5 leading-[1.08]" style={{ textWrap: "balance" }}>
              Votre site de location, généré et synchronisé automatiquement.
            </h2>
            <p className="mt-5 text-lg text-ink-500 leading-relaxed">
              Yo car crée votre site web à partir de votre catalogue. Quand vous modifiez un prix ou ajoutez un véhicule dans le manager, votre site se met à jour instantanément — sans toucher au code.
            </p>
            <ul className="mt-7 space-y-3">
              {[
                ["Catalogue synchronisé en temps réel", "globe"],
                ["Moteur de réservation 24h/24", "calendar-check"],
                ["Pages véhicules SEO-friendly", "search"],
                ["Domaine personnalisé + SSL inclus", "shield-check"],
                ["Identité visuelle aux couleurs de votre agence", "palette"],
              ].map(([t, ic]) => (
                <li key={t} className="flex items-start gap-3">
                  <span className="mt-0.5 inline-flex items-center justify-center w-6 h-6 rounded-full bg-brand-orange/10 text-brand-orange2 ring-1 ring-brand-orange/20">
                    <Icon name="check" className="w-3.5 h-3.5" strokeWidth={3} />
                  </span>
                  <span className="text-[15.5px] text-ink-700"><strong className="font-semibold text-brand-navy">{t}.</strong></span>
                </li>
              ))}
            </ul>
            <div className="mt-8 flex flex-col sm:flex-row gap-3">
              <CTAButton href="#cta-final" icon="arrow-right">Voir un exemple</CTAButton>
              <CTAButton href="#pricing" variant="outline">Inclus à partir de l’offre Pro</CTAButton>
            </div>
          </Reveal>

          <Reveal delay={120}>
            <div className="relative">
              <img
                src="assets/image 1.png"
                alt="Aperçu du site de location généré par Yo car"
                className="w-full h-auto object-contain"
              />
            </div>
          </Reveal>
        </div>
      </div>
    </section>
  );
}

// ───────── AUTOMATION ─────────
function Automation() {
  const items = [
    { icon: "send", title: "Confirmation automatique", desc: "Email + SMS instantanés au client à la confirmation de réservation." },
    { icon: "bell-ring", title: "Rappels intelligents", desc: "Avant le départ, avant le retour, à l’expiration d’un document." },
    { icon: "file-text", title: "Contrat pré-rempli", desc: "Toutes les infos client + véhicule injectées automatiquement." },
    { icon: "alarm-clock", title: "Alertes documents", desc: "Assurance, visite, carte grise — vous êtes prévenu à l’avance." },
    { icon: "wallet", title: "Suivi des cautions", desc: "Date de restitution, remboursements et impayés automatisés." },
    { icon: "user-check", title: "Onboarding client", desc: "Lien sécurisé pour signer, payer et envoyer ses pièces." },
  ];
  return (
    <section id="automation" className="relative py-24 sm:py-28 bg-white">
      <div className="max-w-7xl mx-auto px-4">
        <div className="grid lg:grid-cols-12 gap-12 items-start">
          <div className="lg:col-span-5 lg:sticky lg:top-28">
            <Reveal>
              <Eyebrow color="navy">Automatisation</Eyebrow>
              <h2 className="font-display text-3xl sm:text-4xl md:text-5xl font-bold text-brand-navy mt-5 leading-[1.08]" style={{ textWrap: "balance" }}>
                Laissez Yo car faire les tâches répétitives à votre place.
              </h2>
              <p className="mt-5 text-lg text-ink-500 leading-relaxed">
                Confirmations, rappels, contrats, alertes : tout part automatiquement au bon moment. Vous gagnez plusieurs heures par semaine.
              </p>
              <div className="mt-7 grid grid-cols-3 gap-3 max-w-md">
                {[
                  ["+12h", "gagnées / semaine"],
                  ["−68%", "tâches manuelles"],
                  ["100%", "clients prévenus"],
                ].map(([k, v]) => (
                  <div key={k} className="rounded-xl bg-ink-50 ring-1 ring-ink-100 p-3">
                    <div className="font-display text-2xl font-bold text-brand-navy">{k}</div>
                    <div className="text-[11px] text-ink-400 uppercase tracking-wider mt-1">{v}</div>
                  </div>
                ))}
              </div>
            </Reveal>
          </div>

          <div className="lg:col-span-7">
            <div className="grid sm:grid-cols-2 gap-4">
              {items.map((it, i) => (
                <Reveal key={it.title} delay={i * 60}>
                  <Card className="p-6 h-full">
                    <div className="flex items-center justify-between">
                      <span className="inline-flex items-center justify-center w-11 h-11 rounded-xl bg-brand-navy text-white">
                        <Icon name={it.icon} className="w-5 h-5" />
                      </span>
                      <span className="text-[10px] uppercase tracking-widest font-semibold text-emerald-600 inline-flex items-center gap-1.5">
                        <span className="w-1.5 h-1.5 rounded-full bg-emerald-500 animate-pulse" /> Actif
                      </span>
                    </div>
                    <h3 className="font-display font-bold text-brand-navy mt-5">{it.title}</h3>
                    <p className="mt-1.5 text-[14.5px] text-ink-500 leading-relaxed">{it.desc}</p>
                  </Card>
                </Reveal>
              ))}
            </div>

            {/* Workflow demo */}
            <Reveal delay={200}>
              <div className="mt-6 rounded-2xl bg-brand-navy text-white p-6 sm:p-8 relative overflow-hidden">
                <div className="absolute -right-20 -top-20 w-80 h-80 glow-orange opacity-50" />
                <div className="relative">
                  <div className="text-[11px] uppercase tracking-widest text-white/60 font-semibold">Exemple d’automatisation</div>
                  <div className="mt-1 font-display text-xl sm:text-2xl font-bold">Quand un client réserve en ligne →</div>
                  <ol className="mt-5 space-y-3">
                    {[
                      ["Email + SMS de confirmation envoyés", "send"],
                      ["Contrat pré-rempli généré", "file-text"],
                      ["Lien de paiement de l’acompte envoyé", "credit-card"],
                      ["Rappel auto envoyé 24h avant le départ", "bell-ring"],
                    ].map(([t, ic], i) => (
                      <li key={t} className="flex items-center gap-4">
                        <span className="inline-flex items-center justify-center w-8 h-8 rounded-full bg-white/10 ring-1 ring-white/15 text-white font-bold text-[12px]">{i + 1}</span>
                        <Icon name={ic} className="w-4 h-4 text-brand-orange" />
                        <span className="text-[14.5px] text-white/90">{t}</span>
                      </li>
                    ))}
                  </ol>
                </div>
              </div>
            </Reveal>
          </div>
        </div>
      </div>
    </section>
  );
}

// ───────── AI ASSISTANT ─────────
function AIAssistant() {
  return (
    <section id="ai" className="relative py-24 sm:py-28 bg-ink-50 overflow-hidden">
      <div className="absolute inset-0 -z-10">
        <div className="absolute left-1/2 -translate-x-1/2 top-0 w-[800px] h-[800px] glow-orange opacity-50" />
      </div>
      <div className="max-w-7xl mx-auto px-4">
        <div className="grid lg:grid-cols-2 gap-14 items-center">
          <Reveal>
            <div className="inline-flex items-center gap-2 px-3 py-1.5 rounded-full bg-white ring-1 ring-ink-100 shadow-soft text-[12px] font-semibold uppercase tracking-widest text-brand-navy">
              <span className="inline-flex items-center justify-center w-5 h-5 rounded-full bg-brand-orange text-white">
                <Icon name="sparkles" className="w-3 h-3" />
              </span>
              Assistant IA
            </div>
            <h2 className="font-display text-3xl sm:text-4xl md:text-5xl font-bold text-brand-navy mt-5 leading-[1.08]" style={{ textWrap: "balance" }}>
              Posez une question, l’IA s’occupe du reste.
            </h2>
            <p className="mt-5 text-lg text-ink-500 leading-relaxed">
              Trouver un véhicule disponible, créer une réservation, générer un contrat, envoyer un devis… votre assistant comprend votre agence en français et en darija.
            </p>
            <ul className="mt-7 space-y-3.5">
              {[
                "« Quels véhicules sont libres ce week-end ? »",
                "« Crée un contrat pour Karim, Clio, 5 jours »",
                "« Quel chiffre d’affaires ce mois ? »",
                "« Envoie un rappel aux clients qui n’ont pas payé »",
              ].map((q) => (
                <li key={q} className="flex items-center gap-3 bg-white rounded-xl ring-1 ring-ink-100 p-3.5 shadow-soft">
                  <Icon name="message-circle" className="w-4 h-4 text-brand-orange shrink-0" />
                  <span className="text-[14.5px] text-ink-700">{q}</span>
                </li>
              ))}
            </ul>
          </Reveal>

          <Reveal delay={120}>
            <div className="relative">
              <Card className="p-5 sm:p-6 shadow-float">
                {/* header */}
                <div className="flex items-center justify-between">
                  <div className="flex items-center gap-3">
                    <span className="relative inline-flex items-center justify-center w-10 h-10 rounded-2xl bg-gradient-to-br from-brand-orange to-rose-500 text-white shadow-lg shadow-orange-300/50">
                      <Icon name="sparkles" className="w-5 h-5" />
                    </span>
                    <div>
                      <div className="font-display font-bold text-brand-navy">Yo IA</div>
                      <div className="text-[11px] text-emerald-600 inline-flex items-center gap-1.5"><span className="w-1.5 h-1.5 rounded-full bg-emerald-500" /> En ligne</div>
                    </div>
                  </div>
                  <span className="text-ink-300"><Icon name="more-horizontal" className="w-4 h-4" /></span>
                </div>

                {/* chat */}
                <div className="mt-5 space-y-3">
                  <div className="flex justify-end">
                    <div className="max-w-[80%] rounded-2xl rounded-br-md bg-brand-navy text-white px-4 py-2.5 text-[14px]">
                      Crée une réservation pour Karim Alaoui, Clio rouge, du 20 au 25 mars.
                    </div>
                  </div>
                  <div className="flex justify-start">
                    <div className="max-w-[88%] rounded-2xl rounded-bl-md bg-ink-50 ring-1 ring-ink-100 px-4 py-3 text-[14px] text-ink-700">
                      C’est fait ✅ — voici le récapitulatif :
                      <div className="mt-2.5 rounded-xl bg-white ring-1 ring-ink-100 p-3 text-[13px]">
                        <div className="flex items-center justify-between">
                          <span className="font-semibold text-brand-navy">Renault Clio · Rouge</span>
                          <span className="text-[10px] uppercase tracking-wider bg-emerald-50 text-emerald-700 px-2 py-0.5 rounded-full ring-1 ring-emerald-100 font-semibold">Réservé</span>
                        </div>
                        <div className="mt-2 grid grid-cols-3 gap-2 text-center">
                          <div>
                            <div className="text-[10px] text-ink-400 uppercase tracking-wider">Du</div>
                            <div className="font-semibold text-brand-navy">20 mars</div>
                          </div>
                          <div>
                            <div className="text-[10px] text-ink-400 uppercase tracking-wider">Au</div>
                            <div className="font-semibold text-brand-navy">25 mars</div>
                          </div>
                          <div>
                            <div className="text-[10px] text-ink-400 uppercase tracking-wider">Total</div>
                            <div className="font-semibold text-brand-orange2">1 200 MAD</div>
                          </div>
                        </div>
                        <div className="mt-2.5 flex gap-2">
                          <button className="flex-1 text-[11px] font-semibold rounded-lg bg-brand-orange text-white py-1.5">Générer le contrat</button>
                          <button className="flex-1 text-[11px] font-semibold rounded-lg bg-white ring-1 ring-ink-200 text-brand-navy py-1.5">Envoyer au client</button>
                        </div>
                      </div>
                    </div>
                  </div>
                  <div className="flex justify-start">
                    <div className="rounded-2xl rounded-bl-md bg-ink-50 ring-1 ring-ink-100 px-4 py-2.5 text-[13px] text-ink-500 inline-flex items-center gap-2">
                      <span className="flex gap-1">
                        <span className="w-1.5 h-1.5 rounded-full bg-brand-orange animate-pulse" />
                        <span className="w-1.5 h-1.5 rounded-full bg-brand-orange animate-pulse" style={{animationDelay:"0.15s"}} />
                        <span className="w-1.5 h-1.5 rounded-full bg-brand-orange animate-pulse" style={{animationDelay:"0.3s"}} />
                      </span>
                      Préparation du contrat…
                    </div>
                  </div>
                </div>

                {/* input */}
                <div className="mt-5 flex items-center gap-2 rounded-2xl bg-ink-50 ring-1 ring-ink-100 px-3.5 py-2.5">
                  <Icon name="message-square" className="w-4 h-4 text-ink-400" />
                  <input readOnly value="Demande à Yo IA…" className="flex-1 bg-transparent text-[14px] text-ink-500 outline-none" />
                  <button className="inline-flex items-center justify-center w-9 h-9 rounded-xl bg-brand-orange text-white">
                    <Icon name="send" className="w-4 h-4" />
                  </button>
                </div>
              </Card>

              {/* small floating chips */}
              <div className="absolute -top-5 -left-5 floaty">
                <div className="bg-white rounded-2xl ring-1 ring-ink-100 shadow-card px-4 py-2.5 flex items-center gap-2.5">
                  <Icon name="zap" className="w-4 h-4 text-amber-500" />
                  <span className="text-[13px] font-semibold text-brand-navy">Réponse en 1.2s</span>
                </div>
              </div>
            </div>
          </Reveal>
        </div>
      </div>
    </section>
  );
}

// ───────── MOBILE ─────────
function Mobile() {
  return (
    <section id="mobile" className="relative py-24 sm:py-28 bg-white overflow-hidden">
      <div className="max-w-7xl mx-auto px-4">
        <div className="grid lg:grid-cols-2 gap-14 items-center">
          <Reveal>
            <div className="relative rounded-3xl overflow-hidden bg-gradient-to-br from-ink-50 via-white to-orange-50 ring-1 ring-ink-100 p-6 sm:p-8 shadow-soft">
              <img src="assets/Mockup product.png" alt="Yo car sur ordinateur et mobile" className="w-full h-auto object-contain" />
            </div>
          </Reveal>
          <Reveal delay={120}>
            <Eyebrow color="orange">Mobile + Bureau</Eyebrow>
            <h2 className="font-display text-3xl sm:text-4xl md:text-5xl font-bold text-brand-navy mt-5 leading-[1.08]" style={{ textWrap: "balance" }}>
              Gérez votre agence depuis l’ordinateur. Réagissez depuis le téléphone.
            </h2>
            <p className="mt-5 text-lg text-ink-500 leading-relaxed">
              L’application mobile vous donne toutes les infos critiques en déplacement : nouvelle réservation, paiement reçu, départ à préparer, retour en retard… vous êtes toujours au courant.
            </p>
            <div className="mt-7 grid sm:grid-cols-2 gap-3">
              {[
                ["bell", "Notifications en temps réel"],
                ["scan-line", "Check-in / Check-out terrain"],
                ["camera", "Photos état du véhicule"],
                ["map-pin", "Géolocalisation des départs"],
              ].map(([ic, t]) => (
                <div key={t} className="flex items-center gap-3 rounded-xl bg-ink-50 ring-1 ring-ink-100 p-3.5">
                  <span className="inline-flex items-center justify-center w-9 h-9 rounded-lg bg-white ring-1 ring-ink-100 text-brand-navy">
                    <Icon name={ic} className="w-4 h-4" />
                  </span>
                  <span className="text-[14px] font-semibold text-brand-navy">{t}</span>
                </div>
              ))}
            </div>
          </Reveal>
        </div>
      </div>
    </section>
  );
}

Object.assign(window, { Website, Automation, AIAssistant, Mobile });