import { Button } from "@/components/ui/button";
import { Card } from "@/components/ui/card";
import { Phone, Check, ArrowRight } from "lucide-react";
import { useState } from "react";

/**
 * DESIGN PHILOSOPHY: Luxury Minimalist
 * - Asymmetric layouts with ample whitespace
 * - Premium serif typography (Playfair Display) for headings
 * - Teal accent color (#0B7BA8) from Modemanagement logo
 * - Subtle shadows and depth effects
 */

interface PricingPackage {
  id: string;
  name: string;
  price: number;
  description: string;
  features: string[];
  cta: string;
  highlighted?: boolean;
  duration?: string;
  externalUrl?: string;
  priceNote?: string;
}

const pricingPackages: PricingPackage[] = [
  {
    id: "webinar",
    name: "Online Webinar",
    price: 67,
    description: "Leer de basis van budgettering en maandanalyse",
    duration: "Eenmalig",
    features: [
      "24/7 Coaching Webinar",
      "Inzicht in budgettering",
      "Maandanalyse technieken",
      "Q&A sessie",
      "Opname beschikbaar",
    ],
    cta: "Meld je aan",
    externalUrl: "https://www.modemanagement.nl/product/qa-webinar-inkoopplanning-budgetteren-maandanalyse-coaching/",
  },
  {
    id: "consult",
    name: "Consult",
    price: 97,
    description: "Persoonlijk gesprek over jouw inkoopstrategie",
    duration: "Eenmalig",
    features: [
      "Beeldbellen of telefonisch",
      "30-45 minuten consult",
      "Persoonlijke aanbevelingen",
      "Geen verplichtingen",
      "Direct inplannen",
    ],
    cta: "Plan je consult",
    externalUrl: "https://www.modemanagement.nl/product/beeldbellen-of-bellen-met-modemanagement-cor-van-laar-97-euro-p-u-2/",
  },
  {
    id: "excel",
    name: "Excel Inkoopplan",
    price: 997,
    description: "Maak zelf je inkoopplan met online ondersteuning",
    duration: "Eenmalig",
    features: [
      "Excel template",
      "Online ondersteuning",
      "Directe resultaten",
      "Persoonlijke begeleiding",
      "Lifetime access",
    ],
    cta: "Start nu",
    highlighted: true,
    externalUrl: "https://www.modemanagement.nl/product/excel-mode-inkoopplan-budget-live-hulp/",
  },
  {
    id: "workshop",
    name: "Live Workshop",
    price: 497,
    description: "Op locatie workshop in regio Leiden-Den Haag - €497 per persoon",
    duration: "Eenmalig",
    features: [
      "Live op locatie",
      "Praktische training",
      "Groepsinteractie",
      "Handouts en materiaal",
      "Netwerken met collega's",
    ],
    cta: "Reserveer plaats",
    priceNote: "per persoon",
  },
  {
    id: "coaching",
    name: "Jaarabonnement",
    price: 334,
    description: "Dagelijks sparren over inkoop en brutowinst",
    duration: "Per maand",
    features: [
      "Dagelijks sparren",
      "Maandelijkse analyse",
      "Persoonlijke begeleiding",
      "Voortgang tracking",
      "Flexibel opzeggen",
    ],
    cta: "Start abonnement",
    highlighted: true,
  },
  {
    id: "together",
    name: "Samen Inkoopplan",
    price: 1297,
    description: "Professioneel inkoopplan met volledige begeleiding",
    duration: "Eenmalig",
    features: [
      "Volledig inkoopplan",
      "Persoonlijke begeleiding",
      "Implementatie ondersteuning",
      "Maandanalyse",
      "Prioriteit support",
    ],
    cta: "Neem contact op",
  },
];

export default function Pricing() {
  const [selectedPackage, setSelectedPackage] = useState<string | null>(null);

  const handleBooking = (packageId: string) => {
    setSelectedPackage(packageId);
    // Open Koalendar for all products
    window.open("https://koalendar.com/e/cor-van-laar", "_blank");
  };

  return (
    <div className="min-h-screen flex flex-col">
      {/* Header */}
      <header className="sticky top-0 z-50 bg-background border-b border-border">
        <div className="container flex items-center justify-between py-4">
          <div className="flex items-center gap-8">
            <a href="/" className="flex items-center gap-2 hover:opacity-80 transition-opacity">
              <img
                src="https://d2xsxph8kpxj0f.cloudfront.net/310519663183885862/MATkf3xTWf8GjeFQgJipRW/logo_modemanagement_e3e1a3c6.png"
                alt="Modemanagement"
                className="h-8"
              />
            </a>
            <nav className="hidden md:flex items-center gap-6">
              <a href="/" className="text-foreground hover:text-primary transition-colors text-sm font-medium">
                Home
              </a>
              <a href="/#kpi-dashboard" className="text-foreground hover:text-primary transition-colors text-sm font-medium">
                KPI Calculator
              </a>
              <a href="/#testimonials" className="text-foreground hover:text-primary transition-colors text-sm font-medium">
                Testimonials
              </a>
              <a href="/pricing" className="text-primary font-medium text-sm">
                Prijzen
              </a>
            </nav>
          </div>
          <Button
            className="bg-primary text-primary-foreground hover:bg-primary/90 px-6 py-2"
            onClick={() => window.open("https://koalendar.com/e/cor-van-laar", "_blank")}
          >
            <Phone className="w-4 h-4 mr-2" />
            Gratis belafspraak
          </Button>
        </div>
      </header>

      <main className="flex-1">
        {/* Hero Section */}
        <section className="py-20 lg:py-32 bg-background border-b border-border">
          <div className="container max-w-4xl">
            <div className="space-y-6 text-center">
              <h1 className="text-5xl lg:text-6xl leading-tight">
                Transparante Prijzen
              </h1>
              <p className="text-xl text-muted-foreground max-w-2xl mx-auto">
                Kies het pakket dat het beste bij jouw bedrijf past. Alle services zijn ontworpen om je brutowinst te verhogen.
              </p>
            </div>
          </div>
        </section>

        {/* Video Section */}
        <section className="py-20 lg:py-32 border-b border-border bg-secondary/30">
          <div className="container">
            <div className="mb-16 text-center">
              <h2 className="text-4xl lg:text-5xl mb-4">Bekijk wat mijn klanten bereiken</h2>
              <p className="text-lg text-muted-foreground">
                Echte resultaten van modeondernemers die hun inkoopstrategie hebben geoptimaliseerd
              </p>
            </div>

            <div className="max-w-4xl mx-auto">
              <div className="relative rounded-lg overflow-hidden shadow-2xl bg-black">
                <video
                  width="100%"
                  height="auto"
                  controls
                  autoPlay
                  muted
                  loop
                  playsInline
                  className="w-full h-auto"
                >
                  <source src="https://d2xsxph8kpxj0f.cloudfront.net/310519663183885862/MATkf3xTWf8GjeFQgJipRW/1000027501_f2658af9.mp4" type="video/mp4" />
                  Your browser does not support the video tag.
                </video>
              </div>
            </div>
          </div>
        </section>

        {/* Pricing Grid */}
        <section className="py-20 lg:py-32 bg-background border-b border-border">
          <div className="container">
            <div className="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-8">
              {pricingPackages.map((pkg) => (
                <Card
                  key={pkg.id}
                  className={`kpi-card flex flex-col transition-all hover:shadow-lg ${
                    pkg.highlighted ? "lg:col-span-1 lg:scale-105 border-primary" : ""
                  }`}
                >
                  <div className="flex-1 space-y-6">
                    {pkg.highlighted && (
                      <div className="inline-block bg-primary text-primary-foreground px-3 py-1 rounded-full text-sm font-semibold">
                        Populair
                      </div>
                    )}

                    <div className="space-y-2">
                      <h3 className="text-2xl font-semibold text-foreground">{pkg.name}</h3>
                      <p className="text-muted-foreground">{pkg.description}</p>
                    </div>

                    <div className="space-y-2">
                      <div className="flex items-baseline gap-2">
                        <span className="text-4xl font-bold text-foreground">€{pkg.price}</span>
                        {pkg.priceNote && (
                          <span className="text-muted-foreground text-sm">{pkg.priceNote}</span>
                        )}
                        {pkg.duration && !pkg.priceNote && (
                          <span className="text-muted-foreground text-sm">{pkg.duration}</span>
                        )}
                      </div>
                    </div>

                    <div className="space-y-3">
                      <p className="text-sm font-semibold text-foreground">Inclusief:</p>
                      <ul className="space-y-2">
                        {pkg.features.map((feature, idx) => (
                          <li key={idx} className="flex items-start gap-3">
                            <Check className="w-5 h-5 text-primary flex-shrink-0 mt-0.5" />
                            <span className="text-foreground text-sm">{feature}</span>
                          </li>
                        ))}
                      </ul>
                    </div>
                  </div>

                  <Button
                    className={`luxury-button w-full mt-8 ${
                      pkg.highlighted
                        ? "bg-primary text-primary-foreground hover:bg-primary/90"
                        : ""
                    }`}
                    onClick={() => handleBooking(pkg.id)}
                  >
                    {pkg.cta}
                    <ArrowRight className="w-4 h-4 ml-2" />
                  </Button>
                </Card>
              ))}
            </div>
          </div>
        </section>

        {/* Testimonials Section */}
        <section id="testimonials" className="py-20 lg:py-32 border-b border-border">
          <div className="container">
            <div className="space-y-12">
              <div className="text-center space-y-4">
                <h2 className="text-4xl lg:text-5xl">Wat zeggen mijn klanten</h2>
                <p className="text-lg text-muted-foreground">
                  Echte resultaten van echte ondernemers
                </p>
              </div>

              <div className="grid md:grid-cols-3 gap-6">
                <Card className="kpi-card">
                  <div className="space-y-4">
                    <div className="flex gap-1">
                      {[...Array(5)].map((_, i) => (
                        <span key={i} className="text-primary">★</span>
                      ))}
                    </div>
                    <p className="text-foreground italic">"Cor heeft mijn brutowinst van 48% naar 56% gebracht. Ongelooflijk!"</p>
                    <p className="font-semibold text-foreground">Joke</p>
                  </div>
                </Card>
                <Card className="kpi-card">
                  <div className="space-y-4">
                    <div className="flex gap-1">
                      {[...Array(5)].map((_, i) => (
                        <span key={i} className="text-primary">★</span>
                      ))}
                    </div>
                    <p className="text-foreground italic">"Het inkoopplan van Cor is een game changer voor mijn zaak. Echt top!"</p>
                    <p className="font-semibold text-foreground">Theo</p>
                  </div>
                </Card>
                <Card className="kpi-card">
                  <div className="space-y-4">
                    <div className="flex gap-1">
                      {[...Array(5)].map((_, i) => (
                        <span key={i} className="text-primary">★</span>
                      ))}
                    </div>
                    <p className="text-foreground italic">"Dankzij Cor's advies kan ik veel beter mijn voorraad beheren. Aanrader!"</p>
                    <p className="font-semibold text-foreground">Marlie</p>
                  </div>
                </Card>
              </div>
              <div className="text-center">
                <a href="https://www.modemanagement.nl/advies/" target="_blank" rel="noopener noreferrer" className="text-primary hover:text-primary/80 font-semibold transition-colors">
                  Bekijk meer klantreacties →
                </a>
              </div>
            </div>
          </div>
        </section>

        {/* FAQ Section */}
        <section className="py-20 lg:py-32 bg-secondary/30 border-b border-border">
          <div className="container max-w-3xl">
            <div className="space-y-12">
              <div className="text-center space-y-4">
                <h2 className="text-4xl lg:text-5xl">Veelgestelde vragen</h2>
                <p className="text-lg text-muted-foreground">
                  Antwoorden op vragen over onze services en prijzen
                </p>
              </div>

              <div className="space-y-6">
                <Card className="kpi-card">
                  <div className="space-y-3">
                    <h3 className="text-lg font-semibold text-foreground">
                      Kan ik een pakket combineren?
                    </h3>
                    <p className="text-foreground">
                      Ja! Veel klanten combineren bijvoorbeeld een webinar met een persoonlijk consult. Neem contact op voor een maatwerk pakket.
                    </p>
                  </div>
                </Card>

                <Card className="kpi-card">
                  <div className="space-y-3">
                    <h3 className="text-lg font-semibold text-foreground">
                      Wat als ik niet tevreden ben?
                    </h3>
                    <p className="text-foreground">
                      Je tevredenheid is mijn prioriteit. Bij het jaarabonnement kun je zonder verplichtingen opzeggen. Bij eenmalige services bieden we volledige ondersteuning.
                    </p>
                  </div>
                </Card>

                <Card className="kpi-card">
                  <div className="space-y-3">
                    <h3 className="text-lg font-semibold text-foreground">
                      Zijn er kortingen voor groepen?
                    </h3>
                    <p className="text-foreground">
                      Ja! Voor groepstrainingen en workshops bieden we speciale groepstarieven. Neem contact op voor meer informatie.
                    </p>
                  </div>
                </Card>

                <Card className="kpi-card">
                  <div className="space-y-3">
                    <h3 className="text-lg font-semibold text-foreground">
                      Hoe kan ik betalen?
                    </h3>
                    <p className="text-foreground">
                      We accepteren alle gangbare betaalmethoden. Na je bestelling ontvang je een factuur en betaalinstructies.
                    </p>
                  </div>
                </Card>
              </div>
            </div>
          </div>
        </section>

        {/* CTA Section */}
        <section className="py-20 lg:py-32 bg-primary text-primary-foreground">
          <div className="container text-center space-y-8">
            <div className="space-y-4">
              <h2 className="text-4xl lg:text-5xl">Klaar om te starten?</h2>
              <p className="text-lg text-primary-foreground/90 max-w-2xl mx-auto">
                Plan een gratis consult in en ontdek welk pakket het beste voor jou werkt.
              </p>
            </div>

            <Button
              className="bg-primary-foreground text-primary hover:bg-primary-foreground/90 px-10 py-4 text-base font-semibold"
              onClick={() => window.open("https://koalendar.com/e/cor-van-laar", "_blank")}
            >
              <Phone className="w-5 h-5 mr-3" />
              Plan je gratis belafspraak
            </Button>
          </div>
        </section>
      </main>

      {/* Footer */}
      <footer className="bg-secondary text-secondary-foreground py-12 border-t border-border">
        <div className="container text-center space-y-4">
          <p className="text-sm">
            © 2026 Modemanagement Cor van Laar. Alle rechten voorbehouden.
          </p>
          <p className="text-xs text-muted-foreground">
            <a href="/" className="hover:underline">Terug naar home</a>
          </p>
        </div>
      </footer>
    </div>
  );
}