import { createSignal, onMount, onCleanup } from "solid-js";
import type { JSX } from "solid-js";
import { PageContainer } from "~/components/layout";

interface Testimonial {
  quote: string;
  author: string;
  role: string;
}

const testimonials: Testimonial[] = [
  {
    quote:
      "ShieldAI caught a credential leak before it became a disaster. Essential tool for anyone concerned about their digital identity.",
    author: "Sarah Chen",
    role: "Security Engineer",
  },
  {
    quote:
      "I sleep better knowing ShieldAI is monitoring my personal information 24/7.",
    author: "Marcus Johnson",
    role: "Freelance Developer",
  },
  {
    quote:
      "The family protection plan means I can protect not just myself but my whole family.",
    author: "Emily Rodriguez",
    role: "Mother of three",
  },
];

interface AuthLayoutProps {
  children: JSX.Element;
}

export default function AuthLayout(props: AuthLayoutProps) {
  const [index, setIndex] = createSignal(0);

  onMount(() => {
    const interval = setInterval(() => {
      setIndex((i) => (i + 1) % testimonials.length);
    }, 6000);
    onCleanup(() => clearInterval(interval));
  });

  const t = () => testimonials[index()];

  return (
    <div class="min-h-screen flex items-center justify-center py-8 md:py-12">
      <PageContainer>
        <div class="flex flex-col md:flex-row items-stretch gap-0 md:gap-8 lg:gap-12 max-w-5xl mx-auto">
          <div class="hidden md:flex flex-col justify-center gap-6 flex-1 p-8 lg:p-12">
            <div>
              <h1 class="text-3xl lg:text-4xl font-bold text-gradient-primary">
                ShieldAI
              </h1>
              <p class="text-lg text-[var(--color-text-secondary)] mt-2">
                AI-Powered Identity Protection
              </p>
            </div>
            <div class="flex-1 flex flex-col justify-center">
              <blockquote class="border-l-4 border-[var(--color-brand-primary)] pl-4">
                <p class="text-base text-[var(--color-text-secondary)] italic leading-relaxed">
                  "{t().quote}"
                </p>
                <footer class="mt-3">
                  <p class="text-sm font-medium text-[var(--color-text-primary)]">
                    — {t().author}
                  </p>
                  <p class="text-xs text-[var(--color-text-tertiary)]">
                    {t().role}
                  </p>
                </footer>
              </blockquote>
            </div>
          </div>
          <div class="flex-1 flex items-center justify-center p-4 md:p-0">
            <div class="w-full max-w-md gradient-card border border-[var(--color-border)]/50 rounded-xl p-6 md:p-8">
              {props.children}
            </div>
          </div>
        </div>
      </PageContainer>
    </div>
  );
}
