import { A } from "@solidjs/router";
import { createSignal, onMount, createMemo, Show, For } from "solid-js";
import { useI18n } from "../providers/i18n-provider";
import { BookraCharacter } from "../components/bookra-character";

// Lucide-like icon components (lightweight SVG)
const CalendarIcon = () => (
  <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round">
    <rect x="3" y="4" width="18" height="18" rx="2" ry="2" />
    <line x1="16" y1="2" x2="16" y2="6" />
    <line x1="8" y1="2" x2="8" y2="6" />
    <line x1="3" y1="10" x2="21" y2="10" />
  </svg>
);

const ClockIcon = () => (
  <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round">
    <circle cx="12" cy="12" r="10" />
    <polyline points="12 6 12 12 16 14" />
  </svg>
);

const UsersIcon = () => (
  <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round">
    <path d="M17 21v-2a4 4 0 0 0-4-4H5a4 4 0 0 0-4 4v2" />
    <circle cx="9" cy="7" r="4" />
    <path d="M23 21v-2a4 4 0 0 0-3-3.87" />
    <path d="M16 3.13a4 4 0 0 1 0 7.75" />
  </svg>
);

const BellIcon = () => (
  <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round">
    <path d="M18 8A6 6 0 0 0 6 8c0 7-3 9-3 9h18s-3-2-3-9" />
    <path d="M13.73 21a2 2 0 0 1-3.46 0" />
  </svg>
);

const ShieldIcon = () => (
  <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round">
    <path d="M12 22s8-4 8-10V5l-8-3-8 3v7c0 6 8 10 8 10z" />
  </svg>
);

const ZapIcon = () => (
  <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round">
    <polygon points="13 2 3 14 12 14 11 22 21 10 12 10 13 2" />
  </svg>
);

const ArrowRightIcon = () => (
  <svg xmlns="http://www.w3.org/2000/svg" width="20" height="20" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round">
    <line x1="5" y1="12" x2="19" y2="12" />
    <polyline points="12 5 19 12 12 19" />
  </svg>
);

const CheckIcon = () => (
  <svg xmlns="http://www.w3.org/2000/svg" width="20" height="20" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
    <polyline points="20 6 9 17 4 12" />
  </svg>
);

const SunIcon = () => (
  <svg xmlns="http://www.w3.org/2000/svg" width="20" height="20" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round">
    <circle cx="12" cy="12" r="5" />
    <line x1="12" y1="1" x2="12" y2="3" />
    <line x1="12" y1="21" x2="12" y2="23" />
    <line x1="4.22" y1="4.22" x2="5.64" y2="5.64" />
    <line x1="18.36" y1="18.36" x2="19.78" y2="19.78" />
    <line x1="1" y1="12" x2="3" y2="12" />
    <line x1="21" y1="12" x2="23" y2="12" />
    <line x1="4.22" y1="19.78" x2="5.64" y2="18.36" />
    <line x1="18.36" y1="5.64" x2="19.78" y2="4.22" />
  </svg>
);

const MoonIcon = () => (
  <svg xmlns="http://www.w3.org/2000/svg" width="20" height="20" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round">
    <path d="M21 12.79A9 9 0 1 1 11.21 3 7 7 0 0 0 21 12.79z" />
  </svg>
);

// Step card component
interface StepCardProps {
  number: number;
  title: string;
  description: string;
}

const StepCard = (props: StepCardProps) => (
  <div class="relative flex gap-5 lg:gap-6">
    <div class="flex flex-col items-center">
      <div class="w-10 h-10 rounded-full bg-ink text-canvas flex items-center justify-center text-sm font-semibold shrink-0 font-display">
        {props.number}
      </div>
      <div class="w-px flex-1 bg-border my-3" />
    </div>
    <div class="pb-10">
      <h3 class="font-display text-lg font-semibold text-ink mb-2">{props.title}</h3>
      <p class="text-ink-muted leading-relaxed">{props.description}</p>
    </div>
  </div>
);


// Main home route component
export function HomeRoute() {
  const i18n = useI18n();
  const [billingInterval, setBillingInterval] = createSignal<"monthly" | "yearly">("monthly");

  const isYearly = () => billingInterval() === "yearly";
  const isCs = () => i18n.locale() === "cs";

  const ComparisonValue = (props: { value: string; highlight?: boolean }) => {
    const v = props.value.toLowerCase();
    const yesLabel = i18n.t("pricing.compare.yes").toLowerCase();
    const noLabel = i18n.t("pricing.compare.no").toLowerCase();
    if (v === "yes" || v === yesLabel) {
      return (
        <span class={`inline-flex items-center justify-center w-6 h-6 rounded-full ${props.highlight ? 'bg-accent/15 text-accent' : 'bg-success/15 text-success'}`}>
          <svg xmlns="http://www.w3.org/2000/svg" width="14" height="14" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="3" stroke-linecap="round" stroke-linejoin="round">
            <path d="M20 6 9 17l-5-5"/>
          </svg>
        </span>
      );
    }
    if (v === "no" || v === noLabel) {
      return (
        <span class="inline-flex items-center justify-center w-6 h-6 rounded-full bg-ink/5 text-ink-muted">
          <svg xmlns="http://www.w3.org/2000/svg" width="14" height="14" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2.5" stroke-linecap="round" stroke-linejoin="round">
            <path d="M18 6 6 18"/>
            <path d="m6 6 12 12"/>
          </svg>
        </span>
      );
    }
    return (
      <span class={`text-sm font-medium ${props.highlight ? 'text-accent' : 'text-ink'}`}>
        {props.value}
      </span>
    );
  };

  // Pricing data with monthly and yearly options
  const plans = createMemo(() => [
    {
      id: "starter",
      name: isCs() ? "Starter" : "Starter",
      desc: isCs() ? "Pro jednotlivce a malé podniky" : "For individuals and small businesses",
      monthly: isCs() ? "199 Kč" : "$9",
      yearly: isCs() ? "1 990 Kč" : "$90",
      period: isCs() ? "/měsíc" : "/mo",
      yearlyPeriod: isCs() ? "/rok" : "/yr",
      savings: isCs() ? "Ušetřete 398 Kč" : "Save $18",
      savingsPercent: "17%",
      trial: isCs() ? "15 dní zdarma po registraci" : "15 days free after sign-up",
      features: [
        isCs() ? "Do 50 rezervací/měsíc" : "Up to 50 bookings/month",
        isCs() ? "1 lokace, 1 zaměstnanec" : "1 location, 1 staff member",
        isCs() ? "E-mailová podpora" : "Email support",
      ],
      cta: isCs() ? "Začít zdarma" : "Start for free",
      popular: false,
    },
    {
      id: "pro",
      name: isCs() ? "Pro" : "Pro",
      desc: isCs() ? "Pro rostoucí podniky" : "For growing businesses",
      monthly: isCs() ? "399 Kč" : "$19",
      yearly: isCs() ? "3 990 Kč" : "$190",
      period: isCs() ? "/měsíc" : "/mo",
      yearlyPeriod: isCs() ? "/rok" : "/yr",
      savings: isCs() ? "Ušetřete 798 Kč" : "Save $38",
      savingsPercent: "17%",
      trial: isCs() ? "15 dní zdarma po registraci" : "15 days free after sign-up",
      features: [
        isCs() ? "Neomezené rezervace" : "Unlimited bookings",
        isCs() ? "3 lokace, 10 zaměstnanců" : "3 locations, 10 staff",
        isCs() ? "E-mailová připomenutí" : "Email reminders",
        isCs() ? "Prioritní podpora" : "Priority support",
        isCs() ? "Analytika a reporty" : "Analytics & reports",
      ],
      cta: isCs() ? "Začít 15denní zkoušku" : "Start 15-day trial",
      popular: true,
    },
    {
      id: "business",
      name: isCs() ? "Business" : "Business",
      desc: isCs() ? "Pro větší týmy a franšízy" : "For larger teams and franchises",
      monthly: isCs() ? "799 Kč" : "$39",
      yearly: isCs() ? "7 990 Kč" : "$390",
      period: isCs() ? "/měsíc" : "/mo",
      yearlyPeriod: isCs() ? "/rok" : "/yr",
      savings: isCs() ? "Ušetřete 1 598 Kč" : "Save $78",
      savingsPercent: "17%",
      trial: isCs() ? "Individuální řešení na míru" : "Custom enterprise solutions",
      features: [
        isCs() ? "Neomezené vše" : "Unlimited everything",
        isCs() ? "Více lokací" : "Multiple locations",
        isCs() ? "API přístup" : "API access",
        isCs() ? "Dedikovaný manažer" : "Dedicated manager",
      ],
      cta: isCs() ? "Kontaktovat prodej" : "Contact sales",
      popular: false,
    },
  ]);

  const [isVisible, setIsVisible] = createSignal(false);
  const [currentDate, setCurrentDate] = createSignal(new Date());

  onMount(() => {
    setIsVisible(true);
  });

  // Calendar helpers
  const calendarMonth = createMemo(() => currentDate().getMonth());
  const calendarYear = createMemo(() => currentDate().getFullYear());

  const prevMonth = () => {
    const newDate = new Date(currentDate());
    newDate.setMonth(newDate.getMonth() - 1);
    setCurrentDate(newDate);
  };

  const nextMonth = () => {
    const newDate = new Date(currentDate());
    newDate.setMonth(newDate.getMonth() + 1);
    setCurrentDate(newDate);
  };

  // Generate calendar days for current month
  const calendarDays = createMemo(() => {
    const year = calendarYear();
    const month = calendarMonth();
    const firstDay = new Date(year, month, 1);
    const lastDay = new Date(year, month + 1, 0);
    const daysInMonth = lastDay.getDate();
    const startingDay = firstDay.getDay(); // 0 = Sunday, 1 = Monday, etc.

    // Adjust for Monday start (0 = Monday)
    const adjustedStart = startingDay === 0 ? 6 : startingDay - 1;

    const days = [];
    // Empty slots for days before the first day of month
    for (let i = 0; i < adjustedStart; i++) {
      days.push({ day: 0, isCurrentMonth: false });
    }
    // Days of the month
    const today = new Date();
    for (let i = 1; i <= daysInMonth; i++) {
      const isToday = today.getDate() === i &&
                      today.getMonth() === month &&
                      today.getFullYear() === year;
      // Generate some mock bookings (deterministic based on day)
      const hasBooking = [3, 7, 12, 15, 18, 22, 26, 29].includes(i);
      const hasMultiple = [7, 15, 22].includes(i);
      days.push({
        day: i,
        isCurrentMonth: true,
        isToday,
        hasBooking,
        hasMultiple
      });
    }
    return days;
  });

  const features = [
    {
      icon: CalendarIcon,
      title: i18n.t("home.feature.scheduling.title"),
      description: i18n.t("home.feature.scheduling.desc"),
    },
    {
      icon: UsersIcon,
      title: i18n.t("home.feature.customers.title"),
      description: i18n.t("home.feature.customers.desc"),
    },
    {
      icon: BellIcon,
      title: i18n.t("home.feature.reminders.title"),
      description: i18n.t("home.feature.reminders.desc"),
    },
    {
      icon: ClockIcon,
      title: i18n.t("home.feature.availability.title"),
      description: i18n.t("home.feature.availability.desc"),
    },
    {
      icon: ZapIcon,
      title: i18n.t("home.feature.quick.title"),
      description: i18n.t("home.feature.quick.desc"),
    },
    {
      icon: ShieldIcon,
      title: i18n.t("home.feature.secure.title"),
      description: i18n.t("home.feature.secure.desc"),
    },
  ];

  const steps = [
    {
      title: i18n.t("home.step1.title"),
      description: i18n.t("home.step1.desc"),
    },
    {
      title: i18n.t("home.step2.title"),
      description: i18n.t("home.step2.desc"),
    },
    {
      title: i18n.t("home.step3.title"),
      description: i18n.t("home.step3.desc"),
    },
  ];

  const testimonials = [
    {
      quote: i18n.t("home.testimonial1.quote"),
      author: i18n.t("home.testimonial1.author"),
      role: i18n.t("home.testimonial1.role"),
    },
    {
      quote: i18n.t("home.testimonial2.quote"),
      author: i18n.t("home.testimonial2.author"),
      role: i18n.t("home.testimonial2.role"),
    },
    {
      quote: i18n.t("home.testimonial3.quote"),
      author: i18n.t("home.testimonial3.author"),
      role: i18n.t("home.testimonial3.role"),
    },
  ];

  return (
    <div class="animate-fade-in">
      {/* Hero Section */}
      <section class="relative pt-16 pb-20 lg:pt-24 lg:pb-32 overflow-hidden">
        <div
          class="absolute inset-0 pointer-events-none animate-pulse-soft"
          style={{ background: "var(--gradient-hero)" }}
        />
        <div class="section-container relative">
          <div class="max-w-3xl mx-auto text-center">
            <span class="inline-flex items-center gap-2 px-4 py-1.5 mb-8 text-sm font-medium tracking-wide text-accent bg-accent-subtle/80 rounded-full border border-accent/10 backdrop-blur-sm">
              <span class="w-2 h-2 rounded-full bg-accent animate-pulse" />
              {i18n.t("home.badge")}
            </span>
            <h1 class="text-display-xl font-semibold text-ink mb-6 tracking-tight animate-slide-up" style={{ "animation-delay": "0.1s" }}>
              {i18n.t("home.hero.title")}
            </h1>
            <p class="text-lg lg:text-xl text-ink-muted mb-10 max-w-2xl mx-auto leading-relaxed animate-slide-up" style={{ "animation-delay": "0.2s" }}>
              {i18n.t("home.hero.subtitle")}
            </p>
            <div class="flex flex-col sm:flex-row items-center justify-center gap-4 animate-slide-up" style={{ "animation-delay": "0.3s" }}>
              <A
                href="/dashboard"
                class="btn-primary inline-flex items-center gap-2 text-base px-8 py-4 group"
              >
                {i18n.t("home.hero.cta.primary")}
                <span class="transition-transform duration-200 group-hover:translate-x-1">
                  <ArrowRightIcon />
                </span>
              </A>
              <a
                href="https://demo.bookra.eu"
                target="_blank"
                rel="noopener noreferrer"
                class="btn-secondary inline-flex items-center gap-2 text-base px-8 py-4"
              >
                {i18n.locale() === 'cs' ? 'Otevřít demo mod' : 'Open demo mode'}
                <svg xmlns="http://www.w3.org/2000/svg" width="18" height="18" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2">
                  <path d="M18 13v6a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2V8a2 2 0 0 1 2-2h6"/>
                  <polyline points="15 3 21 3 21 9"/>
                  <line x1="10" y1="14" x2="21" y2="3"/>
                </svg>
              </a>
            </div>
          </div>

          {/* Hero visual - abstract booking UI mockup with mascot */}
          <div class="mt-16 lg:mt-20 max-w-4xl mx-auto animate-slide-up relative" style={{ "animation-delay": "0.4s" }}>
            <div class="surface-glass rounded-panel p-1.5 lg:p-2 shadow-2xl border border-border/50 relative">
              <div class="bg-canvas rounded-card overflow-hidden">
                {/* Calendar Header */}
                <div class="flex items-center justify-between px-4 py-3 border-b border-border/50 bg-canvas-subtle/50">
                  <div class="flex items-center gap-3">
                    <div class="w-8 h-8 rounded-lg bg-accent/10 flex items-center justify-center">
                      <CalendarIcon />
                    </div>
                    <span class="font-display font-semibold text-ink">
                      {i18n.t(`calendar.months.${calendarMonth()}`)} {calendarYear()}
                    </span>
                  </div>
                  <div class="flex items-center gap-2">
                    <button
                      class="w-8 h-8 rounded-lg border border-border flex items-center justify-center text-ink-muted hover:bg-canvas-subtle transition-colors"
                      onClick={prevMonth}
                      aria-label={i18n.t("calendar.prevMonth")}
                    >
                      <svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><path d="m15 18-6-6 6-6"/></svg>
                    </button>
                    <button
                      class="w-8 h-8 rounded-lg border border-border flex items-center justify-center text-ink-muted hover:bg-canvas-subtle transition-colors"
                      onClick={nextMonth}
                      aria-label={i18n.t("calendar.nextMonth")}
                    >
                      <svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><path d="m9 18 6-6-6-6"/></svg>
                    </button>
                  </div>
                </div>
                <div class="grid grid-cols-7 gap-px bg-border/50">
                  {[0, 1, 2, 3, 4, 5, 6].map((dayIndex) => (
                    <div class="bg-canvas-subtle/50 p-3 text-center text-xs font-medium text-ink-subtle uppercase tracking-wider">
                      {i18n.t(`calendar.days.${dayIndex}`)}
                    </div>
                  ))}
                  {calendarDays().map((dayInfo) => {
                    if (!dayInfo.isCurrentMonth) {
                      return <div class="p-3 min-h-[80px] lg:min-h-[100px] bg-canvas/50" />;
                    }
                    return (
                      <div
                        class={`p-3 min-h-[80px] lg:min-h-[100px] bg-canvas transition-all duration-200 hover:bg-canvas-subtle group cursor-pointer ${
                          dayInfo.isToday ? "ring-2 ring-inset ring-accent bg-accent-soft" : ""
                        }`}
                      >
                        <span class={`text-sm transition-colors ${dayInfo.isToday ? "font-semibold text-accent" : "text-ink-muted group-hover:text-ink"}`}>
                          {dayInfo.day}
                        </span>
                        {dayInfo.hasBooking && (
                          <div class="mt-2 space-y-1.5">
                            <div class="h-2 bg-accent/30 rounded-full w-full group-hover:bg-accent/40 transition-colors" />
                            {dayInfo.hasMultiple && <div class="h-2 bg-accent/20 rounded-full w-3/4 group-hover:bg-accent/30 transition-colors" />}
                            <div class="h-2 bg-accent/10 rounded-full w-1/2 group-hover:bg-accent/20 transition-colors" />
                          </div>
                        )}
                      </div>
                    );
                  })}
                </div>
              </div>
              {/* Floating mascot at bottom-right */}
              <div class="absolute -bottom-6 -right-4 lg:-right-8 z-20 hidden md:block">
                <BookraCharacter pose="hello" size="md" animate={true} />
              </div>
            </div>
          </div>
        </div>
      </section>

      {/* Social proof / Logos */}
      <section class="py-12 border-y border-border/50 bg-canvas-subtle/50">
        <div class="section-container">
          <div class="mb-6 flex justify-center">
            <img
              src="/bookra-illustrations/logo_text_horizontal.svg"
              alt="Bookra"
              class="h-9 w-auto opacity-75"
            />
          </div>
          <p class="text-center text-sm text-ink-subtle mb-8 tracking-wide uppercase">
            {i18n.t("home.trust")}
          </p>
          <div class="flex flex-wrap items-center justify-center gap-8 lg:gap-16 opacity-60">
            {["Salon Ella", "Physio Care", "Massage Studio", "Yoga Flow", "Repair Pro"].map((name) => (
              <span class="text-lg lg:text-xl font-medium text-ink-muted tracking-tight">
                {name}
              </span>
            ))}
          </div>
        </div>
      </section>

      {/* Features Section */}
      <section id="features" class="py-20 lg:py-32">
        <div class="section-container">
          <div class="max-w-2xl mx-auto text-center mb-16 lg:mb-20">
            <span class="text-sm font-medium text-accent mb-3 block tracking-wide uppercase animate-fade-in">
              {i18n.t("home.features.eyebrow")}
            </span>
            <h2 class="text-display-md font-semibold text-ink mb-4 animate-slide-up" style={{ "animation-delay": "0.1s" }}>
              {i18n.t("home.features.title")}
            </h2>
            <p class="text-lg text-ink-muted animate-slide-up" style={{ "animation-delay": "0.2s" }}>
              {i18n.t("home.features.subtitle")}
            </p>
          </div>
          <div class="grid md:grid-cols-2 lg:grid-cols-3 gap-6 lg:gap-8">
            {features.map((feature, index) => (
              <div
                class="group surface-elevated p-6 lg:p-8 rounded-card transition-all duration-500 hover:scale-[1.02] animate-slide-up"
                style={{ "animation-delay": `${0.1 * (index + 3)}s` }}
              >
                <div class="w-12 h-12 rounded-xl bg-gradient-to-br from-accent-subtle to-accent-soft flex items-center justify-center text-accent mb-5 transition-all duration-300 group-hover:scale-110 group-hover:shadow-lg">
                  <feature.icon />
                </div>
                <h3 class="font-display text-lg font-semibold text-ink mb-2">{feature.title}</h3>
                <p class="text-ink-muted leading-relaxed">{feature.description}</p>
              </div>
            ))}
          </div>
        </div>
      </section>

      {/* How it works */}
      <section class="py-20 lg:py-32 bg-canvas-subtle/30">
        <div class="section-container">
          <div class="grid lg:grid-cols-2 gap-12 lg:gap-20 items-center">
            <div>
              <span class="text-sm font-medium text-accent mb-3 block tracking-wide uppercase">
                {i18n.t("home.how.eyebrow")}
              </span>
              <h2 class="text-display-md font-semibold text-ink mb-6">
                {i18n.t("home.how.title")}
              </h2>
              <p class="text-lg text-ink-muted mb-8">
                {i18n.t("home.how.subtitle")}
              </p>
              <div class="flex items-center gap-4 mb-8">
                <A
                  href="/dashboard"
                  class="btn-primary inline-flex items-center gap-2"
                >
                  {i18n.t("home.how.cta")}
                  <ArrowRightIcon />
                </A>
                {/* Character guide */}
                <div class="hidden sm:block">
                  <BookraCharacter pose="walk" size="sm" animate={true} />
                </div>
              </div>
            </div>
            <div class="lg:pl-8">
              {steps.map((step, index) => (
                <StepCard
                  number={index + 1}
                  title={step.title}
                  description={step.description}
                />
              ))}
              <div class="flex gap-5 lg:gap-6">
                <div class="w-10 h-10 rounded-full bg-accent text-white flex items-center justify-center">
                  <CheckIcon />
                </div>
                <div>
                  <h3 class="text-lg font-semibold text-ink mb-1">
                    {i18n.t("home.step4.title")}
                  </h3>
                  <p class="text-accent font-medium">
                    {i18n.t("home.step4.desc")}
                  </p>
                </div>
              </div>
            </div>
          </div>
        </div>
      </section>

      {/* Testimonials */}
      <section class="py-20 lg:py-32">
        <div class="section-container">
          <div class="max-w-2xl mx-auto text-center mb-16">
            <span class="text-sm font-medium text-accent mb-3 block tracking-wide uppercase animate-fade-in">
              {i18n.t("home.testimonials.eyebrow")}
            </span>
            <h2 class="text-display-md font-semibold text-ink animate-slide-up" style={{ "animation-delay": "0.1s" }}>
              {i18n.t("home.testimonials.title")}
            </h2>
          </div>
          <div class="grid md:grid-cols-3 gap-6 lg:gap-8">
            {testimonials.map((t, index) => (
              <div
                class="group surface-elevated p-6 lg:p-8 rounded-card transition-all duration-500 hover:shadow-xl animate-slide-up"
                style={{ "animation-delay": `${0.15 * (index + 1)}s` }}
              >
                <div class="flex items-start gap-1 mb-4">
                  <svg class="w-6 h-6 text-accent/40" viewBox="0 0 24 24" fill="currentColor">
                    <path d="M14.017 21v-7.391c0-5.704 3.731-9.57 8.983-10.609l.995 2.151c-2.432.917-3.995 3.638-3.995 5.849h4v10h-9.983zm-14.017 0v-7.391c0-5.704 3.748-9.57 9-10.609l.996 2.151c-2.433.917-3.996 3.638-3.996 5.849h3.983v10h-9.983z"/>
                  </svg>
                </div>
                <p class="text-ink-muted mb-6 leading-relaxed font-sans text-lg italic">{t.quote}</p>
                <div class="flex items-center gap-3 pt-4 border-t border-border/50">
                  <div class="w-10 h-10 rounded-full bg-gradient-to-br from-accent-subtle to-accent-soft flex items-center justify-center">
                    <span class="font-display font-semibold text-accent text-sm">
                      {t.author.split(' ').map(n => n[0]).join('')}
                    </span>
                  </div>
                  <div>
                    <p class="font-display font-semibold text-ink text-sm">{t.author}</p>
                    <p class="text-ink-subtle text-xs">{t.role}</p>
                  </div>
                </div>
              </div>
            ))}
          </div>
        </div>
      </section>

      {/* Pricing */}
      <section id="pricing" class="py-20 lg:py-32 bg-canvas-subtle/30">
        <div class="section-container">
          <div class="max-w-2xl mx-auto text-center mb-16">
            <span class="text-sm font-medium text-accent mb-3 block tracking-wide uppercase animate-fade-in">
              {i18n.t("home.pricing.eyebrow")}
            </span>
            <h2 class="text-display-md font-semibold text-ink mb-4 animate-slide-up" style={{ "animation-delay": "0.1s" }}>
              {i18n.t("home.pricing.title")}
            </h2>
            <p class="text-lg text-ink-muted animate-slide-up" style={{ "animation-delay": "0.2s" }}>
              {i18n.t("home.pricing.subtitle")}
            </p>
          </div>

          {/* Billing Toggle */}
          <div class="flex items-center justify-center mb-12 animate-slide-up" style={{ "animation-delay": "0.25s" }}>
            <div class="relative inline-flex items-center gap-4">
              <span class={`text-sm font-semibold transition-colors ${!isYearly() ? 'text-ink' : 'text-ink-muted'}`}>
                {isCs() ? "Měsíčně" : "Monthly"}
              </span>
              <button
                type="button"
                onClick={() => setBillingInterval(isYearly() ? "monthly" : "yearly")}
                class={`relative w-14 h-7 rounded-full transition-colors duration-300 cursor-pointer ${isYearly() ? 'bg-accent' : 'bg-ink/30'}`}
                role="switch"
                aria-checked={isYearly()}
                aria-label={isYearly() ? (isCs() ? "Ročně" : "Yearly") : (isCs() ? "Měsíčně" : "Monthly")}
              >
                <span
                  class={`absolute top-1 left-1 w-5 h-5 bg-white rounded-full shadow-md transition-transform duration-300 ease-spring ${isYearly() ? 'translate-x-7' : 'translate-x-0'}`}
                />
              </button>
              <span class={`text-sm font-semibold transition-colors ${isYearly() ? 'text-ink' : 'text-ink-muted'}`}>
                {isCs() ? "Ročně" : "Yearly"}
              </span>
              <div class="absolute left-full ml-3 top-1/2 -translate-y-1/2">
                <Show when={isYearly()}>
                  <span class="inline-flex items-center gap-1 px-2 py-0.5 bg-accent text-white text-xs font-bold rounded-full shadow-sm whitespace-nowrap">
                    <svg xmlns="http://www.w3.org/2000/svg" width="12" height="12" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2.5" stroke-linecap="round" stroke-linejoin="round">
                      <path d="m12 3-1.912 5.813a2 2 0 0 1-1.275 1.275L3 12l5.813 1.912a2 2 0 0 1 1.275 1.275L12 21l1.912-5.813a2 2 0 0 1 1.275-1.275L21 12l-5.813-1.912a2 2 0 0 1-1.275-1.275L12 3Z"/>
                    </svg>
                    {isCs() ? "-17%" : "-17%"}
                  </span>
                </Show>
              </div>
            </div>
          </div>

          <div class="grid md:grid-cols-3 gap-6 lg:gap-8 max-w-5xl mx-auto items-center">
            {plans().map((plan, index) => (
              <div
                class={`group relative p-6 lg:p-8 rounded-card transition-all duration-500 animate-slide-up ${plan.popular ? 'hover:shadow-2xl hover:-translate-y-2 lg:scale-105' : 'hover:shadow-xl hover:-translate-y-1'}`}
                style={{ "animation-delay": `${0.3 + index * 0.1}s` }}
              >
                {/* Gradient background for popular card */}
                <Show when={plan.popular}>
                  <div class="absolute inset-0 bg-gradient-to-b from-ink to-ink/95 rounded-card" />
                </Show>
                <Show when={!plan.popular}>
                  <div class="absolute inset-0 surface-elevated rounded-card" />
                </Show>

                {/* Popular badge */}
                <Show when={plan.popular}>
                  <div class="absolute -top-3 left-1/2 -translate-x-1/2 z-10">
                    <span class="px-3 py-1 bg-accent text-white text-xs font-display font-medium rounded-full shadow-lg">
                      {i18n.t("home.pricing.popular")}
                    </span>
                  </div>
                </Show>

                <div class="relative z-10">
                  <div class="mb-6">
                    <h3 class={`font-display text-lg font-semibold mb-1 ${plan.popular ? 'text-canvas' : 'text-ink'}`}>
                      {plan.name}
                    </h3>
                    <p class={plan.popular ? 'text-canvas/70' : 'text-ink-muted'}>{plan.desc}</p>
                  </div>
                  <div class="mb-6">
                    <div class="flex items-baseline gap-1">
                      <span class={`font-display text-4xl font-semibold ${plan.popular ? 'text-canvas' : 'text-ink'}`}>
                        {isYearly() ? plan.yearly : plan.monthly}
                      </span>
                      <span class={plan.popular ? 'text-canvas/60' : 'text-ink-muted'}>
                        {isYearly() ? plan.yearlyPeriod : plan.period}
                      </span>
                    </div>
                    <Show when={isYearly()}>
                      <div class="mt-2 flex items-center gap-1.5">
                        <span class="inline-flex items-center gap-1 px-2 py-0.5 bg-accent-subtle text-accent text-xs font-semibold rounded-full border border-accent/10">
                          <svg xmlns="http://www.w3.org/2000/svg" width="12" height="12" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2.5" stroke-linecap="round" stroke-linejoin="round"><path d="m12 3-1.912 5.813a2 2 0 0 1-1.275 1.275L3 12l5.813 1.912a2 2 0 0 1 1.275 1.275L12 21l1.912-5.813a2 2 0 0 1 1.275-1.275L21 12l-5.813-1.912a2 2 0 0 1-1.275-1.275L12 3Z"/></svg>
                          {plan.savingsPercent}
                        </span>
                        <span class="text-xs text-ink-subtle">{isCs() ? 'sleva při roční platbě' : 'discount on yearly billing'}</span>
                      </div>
                    </Show>
                    <Show when={!isYearly()}>
                      <p class="mt-1 text-xs text-accent font-medium">{plan.trial}</p>
                    </Show>
                  </div>
                  <ul class="space-y-3 mb-8">
                    {plan.features.map((feature) => (
                      <li class={`flex items-start gap-3 ${plan.popular ? 'text-canvas/80' : 'text-ink-muted'}`}>
                        <span class="mt-0.5 text-accent shrink-0">
                          <CheckIcon />
                        </span>
                        <span class="text-sm">{feature}</span>
                      </li>
                    ))}
                  </ul>
                  <A
                    href="/dashboard"
                    class={`block text-center py-3 px-6 rounded-button font-display font-medium transition-all duration-200 w-full ${plan.popular ? 'bg-canvas text-ink hover:bg-canvas-subtle shadow-lg group-hover:shadow-xl' : 'btn-secondary'}`}
                  >
                    {plan.cta}
                  </A>
                </div>
              </div>
            ))}
          </div>
        </div>
      </section>

      {/* Comparison Table */}
      <section class="py-16 px-4">
        <div class="section-container">
          <div class="max-w-4xl mx-auto">
            <div class="text-center mb-10">
              <span class="text-sm font-medium text-accent mb-2 block tracking-wide uppercase">
                {i18n.t("pricing.compare.eyebrow")}
              </span>
              <h2 class="text-2xl sm:text-3xl font-display font-bold text-ink">
                {i18n.t("pricing.compare.title")}
              </h2>
            </div>
            <div class="surface-elevated rounded-card overflow-hidden border border-border/50 shadow-sm">
              {/* Header */}
              <div class="grid grid-cols-[1fr_100px_100px_100px] sm:grid-cols-[1.5fr_1fr_1fr_1fr] gap-2 p-4 sm:p-5 bg-canvas-subtle/60 border-b border-border/50">
                <div class="text-sm font-semibold text-ink-muted self-center">{i18n.t("pricing.compare.feature")}</div>
                <div class="text-center font-display font-semibold text-ink text-sm">Starter</div>
                <div class="text-center">
                  <span class="inline-block px-3 py-1 bg-accent/10 text-accent font-display font-semibold text-sm rounded-full">
                    Pro
                  </span>
                </div>
                <div class="text-center font-display font-semibold text-ink text-sm">Business</div>
              </div>
              {/* Rows */}
              <For each={[
                { key: "pricing.compare.locations", starter: "1", pro: "3", business: "∞" },
                { key: "pricing.compare.staff", starter: "1", pro: "10", business: "∞" },
                { key: "pricing.compare.bookings", starter: "50", pro: "∞", business: "∞" },
                { key: "pricing.compare.emailSupport", starter: i18n.t("pricing.compare.yes"), pro: i18n.t("pricing.compare.priority"), business: i18n.t("pricing.compare.dedicated") },
                { key: "pricing.compare.reminders", starter: "no", pro: "yes", business: "yes" },
                { key: "pricing.compare.analytics", starter: "no", pro: "yes", business: i18n.t("pricing.compare.advanced") },
                { key: "pricing.compare.api", starter: "no", pro: "no", business: "yes" },
                { key: "pricing.compare.branding", starter: "no", pro: "yes", business: "yes" },
                { key: "pricing.compare.whiteLabel", starter: "no", pro: "no", business: "yes" },
                { key: "pricing.compare.manager", starter: "no", pro: "no", business: "yes" },
              ]}>
                {(feature, i) => (
                  <div class={`grid grid-cols-[1fr_100px_100px_100px] sm:grid-cols-[1.5fr_1fr_1fr_1fr] gap-2 p-4 sm:p-5 items-center border-b border-border/30 last:border-0 transition-colors ${i() % 2 === 0 ? 'bg-canvas/30' : ''} hover:bg-canvas-subtle/40`}>
                    <span class="text-sm text-ink font-medium">{i18n.t(feature.key)}</span>
                    <div class="flex justify-center">
                      <ComparisonValue value={feature.starter} />
                    </div>
                    <div class="flex justify-center">
                      <ComparisonValue value={feature.pro} highlight />
                    </div>
                    <div class="flex justify-center">
                      <ComparisonValue value={feature.business} />
                    </div>
                  </div>
                )}
              </For>
            </div>
          </div>
        </div>
      </section>

      {/* CTA Section */}
      <section class="py-20 lg:py-32">
        <div class="section-container">
          <div class="max-w-3xl mx-auto text-center">
            {/* Celebratory mascot */}
            <div class="flex justify-center mb-6">
              <BookraCharacter pose="like" size="lg" animate={true} />
            </div>
            <h2 class="text-display-md font-semibold text-ink mb-6 animate-slide-up">
              {i18n.t("home.cta.title")}
            </h2>
            <p class="text-lg text-ink-muted mb-10 max-w-xl mx-auto animate-slide-up" style={{ "animation-delay": "0.1s" }}>
              {i18n.t("home.cta.subtitle")}
            </p>
            <div class="flex flex-col sm:flex-row items-center justify-center gap-4 animate-slide-up" style={{ "animation-delay": "0.2s" }}>
              <A
                href="/dashboard"
                class="btn-primary inline-flex items-center gap-2 text-base px-8 py-4 group shadow-lg hover:shadow-xl transition-all duration-300"
              >
                {i18n.t("home.cta.primary")}
                <span class="transition-transform duration-200 group-hover:translate-x-1">
                  <ArrowRightIcon />
                </span>
              </A>
              <a
                href="https://demo.bookra.eu"
                target="_blank"
                rel="noopener noreferrer"
                class="btn-secondary inline-flex items-center gap-2 text-base px-8 py-4"
              >
                {i18n.locale() === 'cs' ? 'Otevřít demo mod' : 'Open demo mode'}
                <svg xmlns="http://www.w3.org/2000/svg" width="18" height="18" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2">
                  <path d="M18 13v6a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2V8a2 2 0 0 1 2-2h6"/>
                  <polyline points="15 3 21 3 21 9"/>
                  <line x1="10" y1="14" x2="21" y2="3"/>
                </svg>
              </a>
            </div>
          </div>
        </div>
      </section>
    </div>
  );
}
