import { createSignal, For, Show } from "solid-js";
import { Title } from "@solidjs/meta";
import { A, useSearchParams } from "@solidjs/router";
import { cn } from "~/lib/utils";
import { Badge, Button, Card } from "~/components/ui";
import PageContainer from "~/components/layout/PageContainer";

const plans = [
  {
    name: "Basic",
    price: "$9",
    period: "/month",
    description: "Essential identity protection for individuals",
    features: ["Dark web monitoring", "Email breach alerts", "Basic scam call blocking", "Monthly reports"],
    cta: "Start Free Trial",
    popular: false,
  },
  {
    name: "Plus",
    price: "$19",
    period: "/month",
    description: "Advanced protection for you and your family",
    features: ["Everything in Basic", "VoicePrint AI detection", "HomeTitle fraud alerts", "RemoveBrokers automation", "Family sharing (up to 5)"],
    cta: "Start Free Trial",
    popular: true,
  },
  {
    name: "Premium",
    price: "$39",
    period: "/month",
    description: "Maximum security for the whole household",
    features: ["Everything in Plus", "Unlimited family members", "Priority support 24/7", "Real-time alert correlation", "Advanced analytics dashboard", "Data broker suppression"],
    cta: "Start Free Trial",
    popular: false,
  },
];

const faqs = [
  {
    q: "How does ShieldAI detect voice clones?",
    a: "VoicePrint analyzes over 200 acoustic features in real-time, including micro-tremors and breathing patterns that AI clones can't replicate accurately.",
  },
  {
    q: "Is my data encrypted?",
    a: "Yes. All data is encrypted at rest using AES-256 and in transit using TLS 1.3. We never share or sell your personal information.",
  },
  {
    q: "Can I protect my whole family?",
    a: "Absolutely. Plus and Premium plans include family sharing with centralized monitoring and alert management for all household members.",
  },
  {
    q: "How does dark web monitoring work?",
    a: "DarkWatch continuously scans dark web forums, marketplaces, and data dumps for your email addresses, phone numbers, and other personal data.",
  },
  {
    q: "What happens after my free trial?",
    a: "Your trial includes full access to your selected plan for 14 days. You can cancel anytime before the trial ends with no charge.",
  },
  {
    q: "Can I remove my data from brokers?",
    a: "Yes. RemoveBrokers automates opt-out requests to over 200 data broker sites and verifies removal on your behalf.",
  },
];

export default function AdsPage() {
  const [searchParams] = useSearchParams();
  const [openFaq, setOpenFaq] = createSignal<string | null>(null);

  return (
    <main>
      <Title>ShieldAI — Stop AI Scams Before They Reach You</Title>

      <section class="relative py-20 md:py-28 overflow-hidden">
        <div class="absolute inset-0 bg-gradient-to-b from-[var(--color-brand-primary)]/10 via-[var(--color-brand-accent)]/5 to-transparent" />
        <PageContainer class="relative z-10">
          <div class="text-center max-w-3xl mx-auto">
            <Badge variant="info" class="mb-4">AI-Powered Protection</Badge>
            <h1 class="text-4xl md:text-5xl lg:text-6xl font-bold text-[var(--color-text-primary)] mb-6">
              Stop AI Scams Before{" "}
              <span class="text-gradient-primary">They Reach You</span>
            </h1>
            <p class="text-xl text-[var(--color-text-secondary)] mb-8 max-w-2xl mx-auto">
              ShieldAI uses advanced artificial intelligence to detect and block voice clones, dark web leaks, and identity threats in real-time.
            </p>
            <div class="flex flex-col sm:flex-row gap-4 justify-center mb-8">
              <A href={`/signup${searchParams.utm_source ? `?utm_source=${searchParams.utm_source}&utm_medium=${searchParams.utm_medium || ""}&utm_campaign=${searchParams.utm_campaign || ""}` : ""}`}>
                <Button variant="primary" size="lg">
                  Start Your Free Trial
                </Button>
              </A>
              <A href="#pricing">
                <Button variant="ghost" size="lg">
                  See Plans
                </Button>
              </A>
            </div>
            <div class="flex flex-wrap items-center justify-center gap-x-6 gap-y-2 text-sm text-[var(--color-text-tertiary)]">
              <span class="flex items-center gap-1.5">
                <svg width="16" height="16" viewBox="0 0 16 16" fill="none"><path d="M6.5 11.5L3 8l1.1-1.1L6.5 9.3l5.9-5.9L13.5 4.5l-7 7z" fill="var(--color-success)"/></svg>
                14-day free trial
              </span>
              <span class="flex items-center gap-1.5">
                <svg width="16" height="16" viewBox="0 0 16 16" fill="none"><path d="M6.5 11.5L3 8l1.1-1.1L6.5 9.3l5.9-5.9L13.5 4.5l-7 7z" fill="var(--color-success)"/></svg>
                No credit card required
              </span>
              <span class="flex items-center gap-1.5">
                <svg width="16" height="16" viewBox="0 0 16 16" fill="none"><path d="M6.5 11.5L3 8l1.1-1.1L6.5 9.3l5.9-5.9L13.5 4.5l-7 7z" fill="var(--color-success)"/></svg>
                Cancel anytime
              </span>
            </div>
          </div>
        </PageContainer>
      </section>

      <section class="py-16 bg-[var(--color-bg-secondary)]">
        <PageContainer>
          <div class="grid grid-cols-1 md:grid-cols-3 gap-8">
            <div class="text-center">
              <div class="text-3xl font-bold text-[var(--color-brand-primary)] mb-1">99.7%</div>
              <p class="text-sm text-[var(--color-text-secondary)]">Voice clone detection accuracy</p>
            </div>
            <div class="text-center">
              <div class="text-3xl font-bold text-[var(--color-brand-primary)] mb-1">200+</div>
              <p class="text-sm text-[var(--color-text-secondary)]">Dark web sources monitored</p>
            </div>
            <div class="text-center">
              <div class="text-3xl font-bold text-[var(--color-brand-primary)] mb-1">50K+</div>
              <p class="text-sm text-[var(--color-text-secondary)]">Threats blocked daily</p>
            </div>
          </div>
        </PageContainer>
      </section>

      <section id="pricing" class="py-20 md:py-28 scroll-mt-16">
        <PageContainer>
          <div class="text-center mb-12">
            <h2 class="text-3xl md:text-4xl font-bold text-[var(--color-text-primary)] mb-4">
              Simple, Transparent Pricing
            </h2>
            <p class="text-lg text-[var(--color-text-secondary)] max-w-2xl mx-auto">
              Start with a 14-day free trial. No credit card required. Cancel anytime.
            </p>
          </div>
          <div class="grid grid-cols-1 md:grid-cols-3 gap-6 max-w-5xl mx-auto">
            <For each={plans}>
              {(plan) => (
                <Card
                  class={cn(
                    "relative flex flex-col",
                    plan.popular && "ring-2 ring-[var(--color-brand-primary)] shadow-glow-primary",
                  )}
                >
                  <Show when={plan.popular}>
                    <div class="absolute -top-3 left-1/2 -translate-x-1/2">
                      <Badge variant="info">Most Popular</Badge>
                    </div>
                  </Show>
                  <div class="mb-6">
                    <h3 class="text-lg font-semibold text-[var(--color-text-primary)] mb-1">{plan.name}</h3>
                    <p class="text-sm text-[var(--color-text-secondary)] mb-4">{plan.description}</p>
                    <div class="flex items-baseline gap-0.5">
                      <span class="text-4xl font-bold text-[var(--color-text-primary)]">{plan.price}</span>
                      <span class="text-sm text-[var(--color-text-tertiary)]">{plan.period}</span>
                    </div>
                  </div>
                  <ul class="space-y-3 mb-8 flex-1">
                    <For each={plan.features}>
                      {(feature) => (
                        <li class="flex items-start gap-2 text-sm text-[var(--color-text-secondary)]">
                          <svg width="16" height="16" viewBox="0 0 16 16" fill="none" class="mt-0.5 flex-shrink-0">
                            <path d="M6.5 11.5L3 8l1.1-1.1L6.5 9.3l5.9-5.9L13.5 4.5l-7 7z" fill="var(--color-success)"/>
                          </svg>
                          {feature}
                        </li>
                      )}
                    </For>
                  </ul>
                  <A href={`/signup${searchParams.utm_source ? `?utm_source=${searchParams.utm_source}&utm_medium=${searchParams.utm_medium || ""}&utm_campaign=${searchParams.utm_campaign || ""}` : ""}`}>
                    <Button variant={plan.popular ? "primary" : "secondary"} class="w-full">
                      {plan.cta}
                    </Button>
                  </A>
                </Card>
              )}
            </For>
          </div>
        </PageContainer>
      </section>

      <section class="py-16 bg-[var(--color-bg-secondary)]">
        <PageContainer>
          <div class="text-center mb-12">
            <h2 class="text-3xl md:text-4xl font-bold text-[var(--color-text-primary)] mb-4">
              Trusted by Thousands
            </h2>
            <p class="text-lg text-[var(--color-text-secondary)] max-w-2xl mx-auto">
              See what our users say about ShieldAI
            </p>
          </div>
          <div class="grid grid-cols-1 md:grid-cols-3 gap-6 max-w-5xl mx-auto">
            <Card>
              <div class="flex gap-1 mb-3">
                {[1, 2, 3, 4, 5].map(() => (
                  <svg width="16" height="16" viewBox="0 0 16 16" fill="var(--color-brand-primary)">
                    <path d="M8 1.5l1.8 3.7 4.2.6-3 3 1 4.2L8 11l-3 1.8 1-4.2-3-3 4.2-.6L8 1.5z"/>
                  </svg>
                ))}
              </div>
              <p class="text-sm text-[var(--color-text-secondary)] mb-4">
                "VoicePrint caught a deepfake call from someone impersonating my CEO. This technology is incredible."
              </p>
              <div class="flex items-center gap-2">
                <div class="w-8 h-8 rounded-full bg-[var(--color-brand-primary)]/20 flex items-center justify-center text-xs font-bold text-[var(--color-brand-primary)]">JD</div>
                <div>
                  <p class="text-sm font-medium text-[var(--color-text-primary)]">James D.</p>
                  <p class="text-xs text-[var(--color-text-tertiary)]">CEO, TechStart</p>
                </div>
              </div>
            </Card>
            <Card>
              <div class="flex gap-1 mb-3">
                {[1, 2, 3, 4, 5].map(() => (
                  <svg width="16" height="16" viewBox="0 0 16 16" fill="var(--color-brand-primary)">
                    <path d="M8 1.5l1.8 3.7 4.2.6-3 3 1 4.2L8 11l-3 1.8 1-4.2-3-3 4.2-.6L8 1.5z"/>
                  </svg>
                ))}
              </div>
              <p class="text-sm text-[var(--color-text-secondary)] mb-4">
                "DarkWatch alerted me that my email was in a data breach within hours. ShieldAI saved me from a potential hack."
              </p>
              <div class="flex items-center gap-2">
                <div class="w-8 h-8 rounded-full bg-[var(--color-brand-primary)]/20 flex items-center justify-center text-xs font-bold text-[var(--color-brand-primary)]">MK</div>
                <div>
                  <p class="text-sm font-medium text-[var(--color-text-primary)]">Maria K.</p>
                  <p class="text-xs text-[var(--color-text-tertiary)]">Freelancer</p>
                </div>
              </div>
            </Card>
            <Card>
              <div class="flex gap-1 mb-3">
                {[1, 2, 3, 4, 5].map(() => (
                  <svg width="16" height="16" viewBox="0 0 16 16" fill="var(--color-brand-primary)">
                    <path d="M8 1.5l1.8 3.7 4.2.6-3 3 1 4.2L8 11l-3 1.8 1-4.2-3-3 4.2-.6L8 1.5z"/>
                  </svg>
                ))}
              </div>
              <p class="text-sm text-[var(--color-text-secondary)] mb-4">
                "The family plan is a game-changer. I can monitor my parents' and kids' accounts from one dashboard."
              </p>
              <div class="flex items-center gap-2">
                <div class="w-8 h-8 rounded-full bg-[var(--color-brand-primary)]/20 flex items-center justify-center text-xs font-bold text-[var(--color-brand-primary)]">TR</div>
                <div>
                  <p class="text-sm font-medium text-[var(--color-text-primary)]">Tom R.</p>
                  <p class="text-xs text-[var(--color-text-tertiary)]">Father of 3</p>
                </div>
              </div>
            </Card>
          </div>
        </PageContainer>
      </section>

      <section id="faq" class="py-20 md:py-28 scroll-mt-16">
        <PageContainer>
          <div class="max-w-3xl mx-auto">
            <div class="text-center mb-12">
              <h2 class="text-3xl md:text-4xl font-bold text-[var(--color-text-primary)] mb-4">
                Frequently Asked Questions
              </h2>
            </div>
            <div class="space-y-3">
              <For each={faqs}>
                {(faq) => {
                  const isOpen = () => openFaq() === faq.q;
                  return (
                    <div class="border border-[var(--color-border)] rounded-xl overflow-hidden">
                      <button
                        type="button"
                        class="w-full flex items-center justify-between px-5 py-4 text-left text-sm font-medium text-[var(--color-text-primary)] hover:bg-[var(--color-bg-secondary)] transition-colors"
                        onClick={() => setOpenFaq(isOpen() ? null : faq.q)}
                      >
                        {faq.q}
                        <svg
                          width="16"
                          height="16"
                          viewBox="0 0 16 16"
                          fill="none"
                          xmlns="http://www.w3.org/2000/svg"
                          class={cn("transition-transform duration-200", isOpen() && "rotate-180")}
                        >
                          <path d="M4 6l4 4 4-4" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"/>
                        </svg>
                      </button>
                      <Show when={isOpen()}>
                        <div class="px-5 pb-4 text-sm text-[var(--color-text-secondary)] leading-relaxed">
                          {faq.a}
                        </div>
                      </Show>
                    </div>
                  );
                }}
              </For>
            </div>
          </div>
        </PageContainer>
      </section>

      <section class="py-16 bg-[var(--color-brand-primary)]">
        <PageContainer>
          <div class="text-center">
            <h2 class="text-3xl md:text-4xl font-bold text-white mb-4">
              Ready to protect your identity?
            </h2>
            <p class="text-lg text-white/80 mb-8 max-w-2xl mx-auto">
              Join 50,000+ users who trust ShieldAI for AI-powered identity protection.
            </p>
            <A href={`/signup${searchParams.utm_source ? `?utm_source=${searchParams.utm_source}&utm_medium=${searchParams.utm_medium || ""}&utm_campaign=${searchParams.utm_campaign || ""}` : ""}`}>
              <Button variant="primary" size="lg" class="bg-white text-[var(--color-brand-primary)] hover:bg-white/90 shadow-lg">
                Get Started Free
              </Button>
            </A>
          </div>
        </PageContainer>
      </section>
    </main>
  );
}
