"use client"

import { useState } from "react"
import { Button } from "@/components/ui/button"
import { Card, CardContent, CardDescription, CardHeader, CardTitle } from "@/components/ui/card"
import { Badge } from "@/components/ui/badge"
import { Accordion, AccordionContent, AccordionItem, AccordionTrigger } from "@/components/ui/accordion"
import {
  CheckCircle,
  BarChart3,
  Smartphone,
  Users,
  ShoppingCart,
  Package,
  CreditCard,
  Star,
  ArrowRight,
  Menu,
  X,
} from "lucide-react"

export default function KibiposLanding() {
  const [isMenuOpen, setIsMenuOpen] = useState(false)

  const scrollToPricing = () => {
    document.getElementById("pricing")?.scrollIntoView({ behavior: "smooth" })
  }

  return (
    <div className="min-h-screen bg-background">
      {/* Header */}
      <header className="sticky top-0 z-50 bg-primary/95 backdrop-blur-sm border-b">
        <div className="container mx-auto px-4 py-4 flex items-center justify-between">
          <div className="flex items-center space-x-2">
            <div className="w-8 h-8 bg-accent rounded-lg flex items-center justify-center">
              <ShoppingCart className="w-5 h-5 text-primary-foreground" />
            </div>
            <span className="text-xl font-bold text-primary-foreground font-serif">Kibipos</span>
          </div>

          <nav className="hidden md:flex items-center space-x-6">
            <a href="#features" className="text-primary-foreground hover:text-accent transition-colors">
              Fonctionnalités
            </a>
            <a href="#pricing" className="text-primary-foreground hover:text-accent transition-colors">
              Tarifs
            </a>
            <a href="#support" className="text-primary-foreground hover:text-accent transition-colors">
              Support
            </a>
            <Button variant="secondary" onClick={scrollToPricing}>
              Commencer maintenant
            </Button>
          </nav>

          <button className="md:hidden text-primary-foreground" onClick={() => setIsMenuOpen(!isMenuOpen)}>
            {isMenuOpen ? <X className="w-6 h-6" /> : <Menu className="w-6 h-6" />}
          </button>
        </div>

        {/* Mobile Menu */}
        {isMenuOpen && (
          <div className="md:hidden bg-primary border-t">
            <nav className="container mx-auto px-4 py-4 flex flex-col space-y-4">
              <a href="#features" className="text-primary-foreground hover:text-accent transition-colors">
                Fonctionnalités
              </a>
              <a href="#pricing" className="text-primary-foreground hover:text-accent transition-colors">
                Tarifs
              </a>
              <a href="#support" className="text-primary-foreground hover:text-accent transition-colors">
                Support
              </a>
              <Button variant="secondary" onClick={scrollToPricing} className="w-full">
                Commencer maintenant
              </Button>
            </nav>
          </div>
        )}
      </header>

      {/* Hero Section */}
      <section className="gradient-bg py-20 px-4">
        <div className="container mx-auto text-center">
          <div className="animate-fade-in-up">
            <h1 className="text-4xl md:text-6xl font-bold text-foreground mb-6 font-serif">
              La gestion de votre commerce n'a jamais été aussi simple
            </h1>
            <p className="text-xl md:text-2xl text-muted-foreground mb-8 max-w-3xl mx-auto">
              Kibipos est un logiciel de point de vente complet, rapide et abordable, conçu pour les commerçants
              africains.
            </p>
            <div className="mb-12">
              <img
                src="/placeholder-k5x2n.png"
                alt="Kibipos sur PC, tablette et smartphone"
                className="mx-auto rounded-lg shadow-2xl"
              />
            </div>
            <Button size="lg" className="animate-pulse-glow text-lg px-8 py-4" onClick={scrollToPricing}>
              Choisir mon plan maintenant <ArrowRight className="ml-2 w-5 h-5" />
            </Button>
          </div>
        </div>
      </section>

      {/* Social Proof */}
      <section className="py-16 px-4 bg-card">
        <div className="container mx-auto text-center">
          <div className="flex items-center justify-center mb-8">
            {[...Array(5)].map((_, i) => (
              <Star key={i} className="w-8 h-8 text-accent fill-current" />
            ))}
          </div>
          <h2 className="text-3xl font-bold mb-8 font-serif">Déjà adopté par +100 commerçants en Afrique</h2>
          <div className="grid md:grid-cols-3 gap-8">
            {[
              {
                name: "Marie K.",
                business: "Boutique de mode",
                text: "Kibipos a révolutionné ma gestion quotidienne. Plus de calculs manuels !",
              },
              {
                name: "Ahmed S.",
                business: "Épicerie",
                text: "Enfin un logiciel qui comprend nos besoins en Afrique. Simple et efficace.",
              },
              {
                name: "Fatou D.",
                business: "Pharmacie",
                text: "Le suivi des stocks en temps réel m'a fait économiser beaucoup d'argent.",
              },
            ].map((testimonial, i) => (
              <Card key={i} className="text-left">
                <CardContent className="pt-6">
                  <p className="mb-4 italic">"{testimonial.text}"</p>
                  <div>
                    <p className="font-semibold">{testimonial.name}</p>
                    <p className="text-sm text-muted-foreground">{testimonial.business}</p>
                  </div>
                </CardContent>
              </Card>
            ))}
          </div>
        </div>
      </section>

      {/* Problem → Solution */}
      <section className="py-16 px-4">
        <div className="container mx-auto">
          <div className="grid md:grid-cols-2 gap-12 items-center">
            <div className="bg-muted/50 p-8 rounded-lg">
              <h3 className="text-2xl font-bold mb-4 text-destructive font-serif">Le Problème</h3>
              <p className="text-lg">
                Vous perdez du temps à gérer vos ventes, vos stocks et vos clients manuellement ? Les erreurs de calcul
                et la perte de données vous coûtent cher ?
              </p>
            </div>
            <div className="bg-accent/10 p-8 rounded-lg">
              <h3 className="text-2xl font-bold mb-4 text-accent font-serif">La Solution</h3>
              <p className="text-lg">
                Avec Kibipos, tout est automatisé, centralisé et accessible sur n'importe quel appareil. Gagnez du temps
                et de l'argent dès aujourd'hui.
              </p>
            </div>
          </div>
        </div>
      </section>

      {/* Benefits */}
      <section className="py-16 px-4 bg-card">
        <div className="container mx-auto">
          <h2 className="text-4xl font-bold text-center mb-12 font-serif">Pourquoi choisir Kibipos ?</h2>
          <div className="grid md:grid-cols-2 lg:grid-cols-4 gap-8">
            {[
              {
                icon: <CheckCircle className="w-12 h-12 text-accent" />,
                title: "Gagnez du temps",
                desc: "Automatisation complète de vos processus",
              },
              {
                icon: <BarChart3 className="w-12 h-12 text-accent" />,
                title: "Suivi en temps réel",
                desc: "Ventes et stocks toujours à jour",
              },
              {
                icon: <Smartphone className="w-12 h-12 text-accent" />,
                title: "Multi-appareils",
                desc: "PC, tablette et smartphone",
              },
              {
                icon: <CreditCard className="w-12 h-12 text-accent" />,
                title: "Paiement unique",
                desc: "Payez une fois, profitez à vie",
              },
            ].map((benefit, i) => (
              <Card key={i} className="text-center hover:shadow-lg transition-shadow">
                <CardContent className="pt-6">
                  <div className="mb-4 flex justify-center">{benefit.icon}</div>
                  <h3 className="text-xl font-semibold mb-2">{benefit.title}</h3>
                  <p className="text-muted-foreground">{benefit.desc}</p>
                </CardContent>
              </Card>
            ))}
          </div>
        </div>
      </section>

      {/* Features */}
      <section id="features" className="py-16 px-4">
        <div className="container mx-auto">
          <h2 className="text-4xl font-bold text-center mb-12 font-serif">Fonctionnalités complètes</h2>
          <div className="grid md:grid-cols-2 lg:grid-cols-3 gap-8">
            {[
              {
                icon: <BarChart3 className="w-8 h-8" />,
                title: "Tableau de bord intuitif",
                desc: "Vue globale de votre activité en un coup d'œil",
              },
              {
                icon: <ShoppingCart className="w-8 h-8" />,
                title: "Gestion des ventes",
                desc: "Ventes, achats, retours simplifiés",
              },
              {
                icon: <Package className="w-8 h-8" />,
                title: "Gestion des stocks",
                desc: "Alertes automatiques et suivi précis",
              },
              {
                icon: <Users className="w-8 h-8" />,
                title: "Multi-utilisateurs",
                desc: "Plusieurs employés, plusieurs boutiques",
              },
              { icon: <CreditCard className="w-8 h-8" />, title: "Codes-barres", desc: "Scan et impression intégrés" },
              {
                icon: <BarChart3 className="w-8 h-8" />,
                title: "Rapports détaillés",
                desc: "Analyses de performance complètes",
              },
            ].map((feature, i) => (
              <Card key={i} className="hover:shadow-lg transition-shadow">
                <CardHeader>
                  <div className="flex items-center space-x-3">
                    <div className="p-2 bg-accent/10 rounded-lg text-accent">{feature.icon}</div>
                    <CardTitle className="text-lg">{feature.title}</CardTitle>
                  </div>
                </CardHeader>
                <CardContent>
                  <CardDescription className="text-base">{feature.desc}</CardDescription>
                </CardContent>
              </Card>
            ))}
          </div>
        </div>
      </section>

      {/* Pricing */}
      <section id="pricing" className="py-16 px-4 bg-card">
        <div className="container mx-auto">
          <h2 className="text-4xl font-bold text-center mb-4 font-serif">Des tarifs adaptés à vos besoins</h2>
          <p className="text-center text-muted-foreground mb-12 text-lg">Paiement unique - Aucun abonnement mensuel</p>

          <div className="grid md:grid-cols-2 lg:grid-cols-4 gap-8">
            {[
              { name: "Boutique unique", price: "49 000", desc: "1 seule boutique", popular: false },
              { name: "2 boutiques", price: "80 000", desc: "Jusqu'à 2 boutiques", popular: true },
              { name: "3 boutiques", price: "100 000", desc: "Jusqu'à 3 boutiques", popular: false },
              { name: "Illimité", price: "150 000", desc: "Boutiques illimitées", popular: false },
            ].map((plan, i) => (
              <Card key={i} className={`relative ${plan.popular ? "ring-2 ring-accent shadow-lg scale-105" : ""}`}>
                {plan.popular && (
                  <Badge className="absolute -top-3 left-1/2 transform -translate-x-1/2 bg-accent">
                    Plus populaire
                  </Badge>
                )}
                <CardHeader className="text-center">
                  <CardTitle className="text-xl font-serif">{plan.name}</CardTitle>
                  <div className="text-3xl font-bold text-primary">
                    {plan.price} <span className="text-sm font-normal text-muted-foreground">F CFA</span>
                  </div>
                  <CardDescription>{plan.desc}</CardDescription>
                </CardHeader>
                <CardContent>
                  <Button className="w-full" variant={plan.popular ? "default" : "outline"}>
                    Choisir ce plan
                  </Button>
                </CardContent>
              </Card>
            ))}
          </div>
        </div>
      </section>

      {/* Demo */}
      <section className="py-16 px-4">
        <div className="container mx-auto text-center">
          <h2 className="text-4xl font-bold mb-8 font-serif">Découvrez Kibipos en action</h2>
          <p className="text-xl mb-8 text-muted-foreground">
            Transformez votre façon de gérer votre commerce en 3 étapes simples :
          </p>

          <div className="grid md:grid-cols-3 gap-8 mb-12">
            {[
              { step: "1", title: "Installez et configurez", desc: "Configuration rapide de votre boutique" },
              { step: "2", title: "Ajoutez vos produits", desc: "Importez facilement votre inventaire" },
              { step: "3", title: "Suivez en temps réel", desc: "Ventes et stocks toujours à jour" },
            ].map((step, i) => (
              <div key={i} className="text-center">
                <div className="w-16 h-16 bg-accent text-accent-foreground rounded-full flex items-center justify-center text-2xl font-bold mx-auto mb-4">
                  {step.step}
                </div>
                <h3 className="text-xl font-semibold mb-2">{step.title}</h3>
                <p className="text-muted-foreground">{step.desc}</p>
              </div>
            ))}
          </div>

          <div className="bg-muted/30 p-8 rounded-lg">
            <img
              src="/software-demo-thumbnail.png"
              alt="Démonstration vidéo Kibipos"
              className="mx-auto rounded-lg shadow-lg"
            />
          </div>
        </div>
      </section>

      {/* Guarantee */}
      <section id="support" className="py-16 px-4 bg-card">
        <div className="container mx-auto text-center">
          <div className="max-w-2xl mx-auto">
            <div className="w-20 h-20 bg-accent/10 rounded-full flex items-center justify-center mx-auto mb-6">
              <CheckCircle className="w-10 h-10 text-accent" />
            </div>
            <h2 className="text-3xl font-bold mb-4 font-serif">Garantie & Support</h2>
            <p className="text-xl mb-6">Satisfait ou remboursé sous 7 jours</p>
            <div className="grid md:grid-cols-3 gap-6 text-left">
              <div>
                <h4 className="font-semibold mb-2">Support WhatsApp</h4>
                <p className="text-sm text-muted-foreground">Assistance rapide par message</p>
              </div>
              <div>
                <h4 className="font-semibold mb-2">Formation vidéo</h4>
                <p className="text-sm text-muted-foreground">Tutoriels complets inclus</p>
              </div>
              <div>
                <h4 className="font-semibold mb-2">Installation guidée</h4>
                <p className="text-sm text-muted-foreground">Nous vous accompagnons</p>
              </div>
            </div>
          </div>
        </div>
      </section>

      {/* FAQ */}
      <section className="py-16 px-4">
        <div className="container mx-auto">
          <h2 className="text-4xl font-bold text-center mb-12 font-serif">Questions fréquentes</h2>
          <div className="max-w-3xl mx-auto">
            <Accordion type="single" collapsible>
              <AccordionItem value="item-1">
                <AccordionTrigger>Est-ce que Kibipos fonctionne sans internet ?</AccordionTrigger>
                <AccordionContent>
                  Oui, Kibipos fonctionne partiellement en mode hors ligne. Vous pouvez continuer à enregistrer des
                  ventes qui se synchroniseront automatiquement une fois la connexion rétablie.
                </AccordionContent>
              </AccordionItem>
              <AccordionItem value="item-2">
                <AccordionTrigger>Puis-je l'utiliser sur mon téléphone ?</AccordionTrigger>
                <AccordionContent>
                  Absolument ! Kibipos est compatible avec tous les appareils : PC, tablettes et smartphones.
                  L'interface s'adapte automatiquement à votre écran.
                </AccordionContent>
              </AccordionItem>
              <AccordionItem value="item-3">
                <AccordionTrigger>Dois-je payer chaque mois ?</AccordionTrigger>
                <AccordionContent>
                  Non, Kibipos fonctionne avec un paiement unique à vie. Aucun abonnement mensuel, aucune surprise. Vous
                  payez une fois et profitez du logiciel pour toujours.
                </AccordionContent>
              </AccordionItem>
              <AccordionItem value="item-4">
                <AccordionTrigger>Comment installer le logiciel ?</AccordionTrigger>
                <AccordionContent>
                  Nous vous guidons pas à pas dans l'installation. De plus, vous recevez des tutoriels vidéo complets et
                  notre support est disponible pour vous accompagner.
                </AccordionContent>
              </AccordionItem>
            </Accordion>
          </div>
        </div>
      </section>

      {/* Final CTA */}
      <section className="py-16 px-4 bg-primary text-primary-foreground">
        <div className="container mx-auto text-center">
          <h2 className="text-3xl md:text-4xl font-bold mb-4 font-serif">
            Rejoignez déjà +100 commerçants qui gèrent leur business avec Kibipos
          </h2>
          <p className="text-xl mb-8 opacity-90">Simplifiez votre gestion commerciale dès aujourd'hui</p>
          <Button
            size="lg"
            variant="secondary"
            className="animate-pulse-glow text-lg px-8 py-4"
            onClick={scrollToPricing}
          >
            Commencez maintenant <ArrowRight className="ml-2 w-5 h-5" />
          </Button>
        </div>
      </section>

      {/* Footer */}
      <footer className="bg-foreground text-background py-12 px-4">
        <div className="container mx-auto">
          <div className="grid md:grid-cols-4 gap-8">
            <div>
              <div className="flex items-center space-x-2 mb-4">
                <div className="w-8 h-8 bg-accent rounded-lg flex items-center justify-center">
                  <ShoppingCart className="w-5 h-5 text-background" />
                </div>
                <span className="text-xl font-bold font-serif">Kibipos</span>
              </div>
              <p className="text-sm opacity-80">Le logiciel de point de vente conçu pour les commerçants africains.</p>
            </div>

            <div>
              <h4 className="font-semibold mb-4">Contact</h4>
              <div className="space-y-2 text-sm opacity-80">
                <p>WhatsApp: +XXX XXX XXX</p>
                <p>Email: contact@kibipos.com</p>
              </div>
            </div>

            <div>
              <h4 className="font-semibold mb-4">Liens utiles</h4>
              <div className="space-y-2 text-sm opacity-80">
                <p>
                  <a href="#" className="hover:text-accent transition-colors">
                    Formation
                  </a>
                </p>
                <p>
                  <a href="#" className="hover:text-accent transition-colors">
                    Support
                  </a>
                </p>
                <p>
                  <a href="#" className="hover:text-accent transition-colors">
                    Tutoriels
                  </a>
                </p>
              </div>
            </div>

            <div>
              <h4 className="font-semibold mb-4">Légal</h4>
              <div className="space-y-2 text-sm opacity-80">
                <p>
                  <a href="#" className="hover:text-accent transition-colors">
                    Mentions légales
                  </a>
                </p>
                <p>
                  <a href="#" className="hover:text-accent transition-colors">
                    CGV
                  </a>
                </p>
                <p>
                  <a href="#" className="hover:text-accent transition-colors">
                    Confidentialité
                  </a>
                </p>
              </div>
            </div>
          </div>

          <div className="border-t border-background/20 mt-8 pt-8 text-center text-sm opacity-60">
            <p>&copy; 2024 Kibipos. Tous droits réservés.</p>
          </div>
        </div>
      </footer>
    </div>
  )
}