import { useGSAP } from '@gsap/react';
import { Head, useForm, usePage } from '@inertiajs/react';
import gsap from 'gsap';
import { ScrollTrigger } from 'gsap/ScrollTrigger';
import { SplitText } from 'gsap/SplitText';
import { Mail, MapPin, Phone, PianoIcon } from 'lucide-react';
import { useRef, useState } from 'react';
import type { FormEvent, PointerEvent, TouchEvent } from 'react';
import InputError from '@/components/input-error';
import NavBar from '@/components/nav-bar';
import { Alert, AlertDescription, AlertTitle } from '@/components/ui/alert';
import { Input } from '@/components/ui/input';

gsap.registerPlugin(ScrollTrigger, SplitText, useGSAP);

const floatIcons = [
    {
        cls: 'float-icon-1',
        emoji: '🎹',
        top: '20%',
        left: '15%',
        size: 'text-4xl',
        opacity: 'opacity-20',
    },
    {
        cls: 'float-icon-2',
        emoji: '🎵',
        top: '35%',
        right: '12%',
        size: 'text-5xl',
        opacity: 'opacity-15',
    },
    {
        cls: 'float-icon-3',
        emoji: '🎶',
        bottom: '30%',
        left: '10%',
        size: 'text-3xl',
        opacity: 'opacity-20',
    },
    {
        cls: 'float-icon-4',
        emoji: '🎼',
        top: '15%',
        right: '25%',
        size: 'text-4xl',
        opacity: 'opacity-10',
    },
];

const stats = [
    { value: '1:1', label: 'Private lessons tailored to each student' },
    { value: 'Ages 5+', label: 'Children, teens, and adult learners welcome' },
    { value: 'In Person', label: 'Lessons at 1107 Ridge Ave, Philadelphia' },
    { value: 'Flexible', label: 'Online, in-person, or hybrid scheduling' },
];

const courseCards = [
    {
        title: 'Beginner Piano',
        description:
            'Build your foundation with proper technique, music reading, and thoughtful early repertoire.',
        curriculum: [
            'Hand posture and finger placement',
            'Reading notation and keyboard geography',
            'Simple melodies and chord patterns',
            'Rhythm, listening, and musical phrasing',
            'Healthy practice habits at home',
        ],
    },
    {
        title: 'Intermediate and Continuing Study',
        description:
            'Expand technique, repertoire, and expression with lessons shaped around the student’s level and goals.',
        curriculum: [
            'Technical development and tone production',
            'Classical and contemporary repertoire planning',
            'Sight-reading and efficient practice',
            'Pedaling, voicing, and dynamics',
            'Preparation for auditions, recitals, or milestones',
        ],
    },
];

const leftHighlights = [
    'Calm, detail-oriented teaching',
    'Technique and expression together',
    'Structured support for practice',
    'Lessons built for long-term growth',
];

const rightHighlights = [
    'Philadelphia-based private studio',
    'Welcoming to beginners and adults',
    'Goal-based lesson planning',
    'Musicianship centered on listening',
];

type TestimonialCard = {
    id: number | string;
    quote: string;
    name: string;
    role: string | null;
};

type FeaturedTeacher = {
    name?: string | null;
    title?: string | null;
    bio?: string | null;
    highlightImageUrl?: string | null;
};

const OFFSETS = [
    { x: 0, y: 0, rotate: 0, scale: 1, zIndex: 30, blur: 0 },
    { x: -220, y: 30, rotate: -8, scale: 0.88, zIndex: 10, blur: 4 },
    { x: 220, y: 30, rotate: 8, scale: 0.88, zIndex: 10, blur: 4 },
    { x: -260, y: 40, rotate: -12, scale: 0.82, zIndex: 5, blur: 8 },
    { x: 260, y: 40, rotate: 12, scale: 0.82, zIndex: 5, blur: 8 },
];

const faqs = [
    {
        q: 'Do I need prior experience to enroll?',
        a: 'Not at all. The studio welcomes complete beginners as well as experienced students looking for more focused guidance.',
    },
    {
        q: 'How long are the lessons?',
        a: 'Lesson length depends on the student’s age, level, and goals, and can be discussed after the initial inquiry.',
    },
    {
        q: 'Are lessons offered online or in person?',
        a: 'Both are available depending on fit, location, and scheduling needs.',
    },
    {
        q: 'What age groups do you teach?',
        a: 'Lessons are available for children, teens, and adults, with pacing and expectations adjusted to the student.',
    },
    {
        q: 'How do I get started?',
        a: 'Submit the inquiry form below with the student’s goals, experience, and availability, and the studio can follow up with the next best step.',
    },
];

type InquiryForm = {
    first_name: string;
    last_name: string;
    student_name: string;
    student_age: string;
    email: string;
    phone: string;
    preferred_contact_method: string;
    lesson_format: string;
    experience_level: string;
    goals: string;
    availability: string;
};

export default function Welcome() {
    const pageRef = useRef<HTMLDivElement | null>(null);
    const cardRefs = useRef<Array<HTMLDivElement | null>>([]);
    const isAnimating = useRef(false);
    const dragStart = useRef<number | null>(null);
    const {
        flash,
        featuredTeacher,
        testimonials: pageTestimonials = [],
    } = usePage<{
        flash: { success?: string | null };
        featuredTeacher?: FeaturedTeacher;
        testimonials?: TestimonialCard[];
    }>().props;
    const testimonials = pageTestimonials;
    const teacherName = featuredTeacher?.name ?? 'Xuelin Wang';
    const teacherTitle = featuredTeacher?.title ?? 'Pianist & Educator';
    const teacherBio =
        featuredTeacher?.bio ??
        'A thoughtful pianist and educator guiding students with care, clarity, and a strong foundation in musicianship.';
    const teacherHighlightImageUrl = featuredTeacher?.highlightImageUrl ?? null;
    const [order, setOrder] = useState<number[]>(() =>
        testimonials.map((_, index) => index),
    );
    const { data, setData, post, processing, errors, reset } =
        useForm<InquiryForm>({
            first_name: '',
            last_name: '',
            student_name: '',
            student_age: '',
            email: '',
            phone: '',
            preferred_contact_method: 'email',
            lesson_format: 'in_person',
            experience_level: 'beginner',
            goals: '',
            availability: '',
        });

    const startFloating = () => {
        const configs = [
            { cls: 'float-icon-1', y: 40, scale: 1.3, duration: 1.6 },
            { cls: 'float-icon-2', y: 60, scale: 0.8, duration: 2.2 },
            { cls: 'float-icon-3', y: 30, scale: 1.5, duration: 1.2 },
            { cls: 'float-icon-4', y: 50, scale: 0.7, duration: 2.8 },
        ];

        configs.forEach(({ cls, y, scale, duration }) => {
            gsap.to(`.${cls}`, {
                y: -y,
                scale,
                duration,
                ease: 'sine.inOut',
                repeat: -1,
                yoyo: true,
            });
        });
    };

    const applyPositions = (newOrder: number[], animate = true) => {
        newOrder.forEach((cardIndex, stackPos) => {
            const el = cardRefs.current[cardIndex];

            if (!el || stackPos >= OFFSETS.length) {
                return;
            }

            const { x, y, rotate, scale, zIndex, blur } = OFFSETS[stackPos];
            gsap.to(el, {
                x,
                y,
                rotate,
                scale,
                zIndex,
                filter: `blur(${blur}px)`,
                opacity: stackPos === 0 ? 1 : 0.7,
                duration: animate ? 0.55 : 0,
                ease: 'power3.out',
            });
        });
    };

    const rotate = (direction: 'left' | 'right') => {
        if (isAnimating.current || order.length < 2) {
            return;
        }

        isAnimating.current = true;

        const frontCardIndex = order[0];
        const frontEl = cardRefs.current[frontCardIndex];

        if (!frontEl) {
            isAnimating.current = false;

            return;
        }

        gsap.to(frontEl, {
            x: direction === 'left' ? -420 : 420,
            opacity: 0,
            rotate: direction === 'left' ? -20 : 20,
            filter: 'blur(8px)',
            duration: 0.35,
            ease: 'power2.in',
            onComplete: () => {
                const newOrder =
                    direction === 'left'
                        ? [...order.slice(1), order[0]]
                        : [order[order.length - 1], ...order.slice(0, -1)];

                const snapPos =
                    direction === 'left' ? OFFSETS[2] : OFFSETS[1];

                gsap.set(frontEl, {
                    x: snapPos.x,
                    y: snapPos.y,
                    rotate: snapPos.rotate,
                    scale: snapPos.scale,
                    zIndex: snapPos.zIndex,
                    filter: `blur(${snapPos.blur}px)`,
                    opacity: 0.7,
                });

                setOrder(newOrder);
                applyPositions(newOrder, true);
                isAnimating.current = false;
            },
        });
    };

    const handlePointerDown = (
        event: PointerEvent<HTMLDivElement> | TouchEvent<HTMLDivElement>,
    ) => {
        if ('touches' in event) {
            dragStart.current = event.touches[0]?.clientX ?? null;

            return;
        }

        dragStart.current = event.clientX;
    };

    const handlePointerUp = (
        event: PointerEvent<HTMLDivElement> | TouchEvent<HTMLDivElement>,
    ) => {
        if (dragStart.current === null) {
            return;
        }

        const endX =
            'changedTouches' in event
                ? event.changedTouches[0]?.clientX
                : event.clientX;

        if (typeof endX !== 'number') {
            dragStart.current = null;

            return;
        }

        const diff = endX - dragStart.current;

        if (Math.abs(diff) > 50) {
            rotate(diff < 0 ? 'left' : 'right');
        }

        dragStart.current = null;
    };

    useGSAP(
        () => {
            ScrollTrigger.defaults({ scroller: '.scroll-container' });

            const titleSplit = new SplitText('.hero-title', { type: 'chars' });

            gsap.from(titleSplit.chars, {
                yPercent: 120,
                opacity: 0,
                duration: 1.6,
                ease: 'expo.out',
                stagger: 0.05,
            });

            gsap.from('.hero-subtitle', {
                opacity: 0,
                y: 30,
                duration: 1.4,
                ease: 'expo.out',
                delay: 0.8,
            });

            ScrollTrigger.create({
                trigger: '#home',
                start: 'top 80%',
                once: true,
                onEnter: () => {
                    gsap.from(
                        [
                            '.float-icon-1',
                            '.float-icon-2',
                            '.float-icon-3',
                            '.float-icon-4',
                        ],
                        {
                            opacity: 0,
                            scale: 0.3,
                            y: 30,
                            duration: 1.4,
                            ease: 'expo.out',
                            stagger: 0.2,
                            onComplete: startFloating,
                        },
                    );
                },
            });

            gsap.to('.scroll-indicator', {
                y: 10,
                repeat: -1,
                yoyo: true,
                duration: 0.9,
                ease: 'sine.inOut',
            });

            gsap.to('.scroll-indicator', {
                opacity: 0,
                duration: 0.3,
                scrollTrigger: {
                    trigger: '#home',
                    start: '5% top',
                    toggleActions: 'play none none reverse',
                },
            });

            gsap.to('.hero-content', {
                opacity: 0,
                y: -60,
                scrollTrigger: {
                    trigger: '#home',
                    start: '20% top',
                    end: '60% top',
                    scrub: true,
                },
            });

            const highlightsTimeline = gsap.timeline({
                scrollTrigger: {
                    trigger: '#highlights',
                    start: 'top top',
                    end: 'bottom center',
                    scrub: 1.5,
                    pin: true,
                },
            });

            highlightsTimeline
                .to('.highlights-fade', {
                    opacity: 0,
                    stagger: 0.2,
                    ease: 'power1.inOut',
                })
                .to('.masked-img', {
                    scale: 1.3,
                    maskPosition: 'center',
                    maskSize: '600%',
                    WebkitMaskPosition: 'center',
                    WebkitMaskSize: '600%',
                    duration: 1,
                    ease: 'power1.inOut',
                })
                .to('#highlights-caption', {
                    opacity: 1,
                    duration: 1,
                    ease: 'power1.inOut',
                });

            applyPositions(order, false);

            const frontCard = cardRefs.current[order[0]];

            if (frontCard) {
                gsap.from(frontCard, {
                    y: 60,
                    opacity: 0,
                    duration: 0.8,
                    ease: 'expo.out',
                });
            }

            return () => {
                titleSplit.revert();
            };
        },
        { scope: pageRef },
    );

    const submit = (event: FormEvent<HTMLFormElement>) => {
        event.preventDefault();

        post('/inquire', {
            preserveScroll: true,
            onSuccess: () => reset(),
        });
    };

    return (
        <>
            <Head title="Xuelin Wang Música | Private Piano Lessons in Philadelphia">
                <meta
                    name="description"
                    content="Private piano lessons with Xuelin Wang Música in Philadelphia for children, teens, and adults. Inquire about lesson fit, schedule, and study goals."
                />
                <link rel="preconnect" href="https://fonts.googleapis.com" />
                <link
                    rel="preconnect"
                    href="https://fonts.gstatic.com"
                    crossOrigin="anonymous"
                />
                <link
                    rel="stylesheet"
                    href="https://fonts.googleapis.com/css2?family=Inter:ital,opsz,wght@0,14..32,100..900;1,14..32,100..900&display=swap"
                />
            </Head>

            <main ref={pageRef}>
                <NavBar />

                <div className="scroll-container h-screen overflow-y-scroll">
                    <section
                        id="home"
                        className="relative flex min-h-[calc(100vh-4rem)] w-full items-center justify-center overflow-hidden bg-white"
                    >
                        {floatIcons.map((icon) => (
                            <span
                                key={icon.cls}
                                className={`${icon.cls} pointer-events-none absolute select-none ${icon.size} ${icon.opacity}`}
                                style={{
                                    top: icon.top,
                                    left: icon.left,
                                    right: icon.right,
                                    bottom: icon.bottom,
                                }}
                            >
                                {icon.emoji}
                            </span>
                        ))}

                        <div className="hero-content relative z-10 flex flex-col items-center gap-6 px-6 text-center">
                            <p className="text-sm font-medium tracking-[0.3em] text-gray-400 uppercase">
                                Welcome to
                            </p>
                            <h1 className="hero-title pb-2 text-6xl leading-none font-bold tracking-tight text-gray-900 md:text-8xl">
                                Xuelin Wang Música
                            </h1>
                            <p className="hero-subtitle max-w-md text-lg leading-relaxed text-gray-500 md:text-xl">
                                Where music meets mastery. Begin your journey
                                with us.
                            </p>
                        </div>

                        <div className="scroll-indicator absolute bottom-10 left-1/2 flex -translate-x-1/2 flex-col items-center gap-2 text-gray-400">
                            <span className="text-xs tracking-widest uppercase">
                                Scroll Down
                            </span>
                            <svg
                                width="24"
                                height="32"
                                viewBox="0 0 24 32"
                                fill="none"
                            >
                                <ellipse
                                    cx="8"
                                    cy="26"
                                    rx="6"
                                    ry="4"
                                    fill="currentColor"
                                    transform="rotate(-15 8 26)"
                                />
                                <line
                                    x1="13.5"
                                    y1="24"
                                    x2="13.5"
                                    y2="4"
                                    stroke="currentColor"
                                    strokeWidth="2"
                                    strokeLinecap="round"
                                />
                                <path
                                    d="M13.5 4 Q22 8 18 16"
                                    stroke="currentColor"
                                    strokeWidth="2"
                                    fill="none"
                                    strokeLinecap="round"
                                />
                            </svg>
                        </div>
                    </section>

                    <section
                        id="about"
                        className="min-h-[calc(100vh-4rem)] snap-start scroll-mt-16 bg-white px-6 py-24"
                    >
                        <div className="mx-auto flex max-w-7xl flex-col gap-16">
                            <div className="max-w-3xl">
                                <p className="mb-4 text-sm font-medium tracking-[0.3em] text-gray-400 uppercase">
                                    About Us
                                </p>
                                <h2 className="mb-6 text-4xl font-bold tracking-tight text-gray-900 md:text-6xl">
                                    Music is a journey,
                                    <br /> not a destination.
                                </h2>
                                <p className="text-lg leading-relaxed text-gray-500">
                                    At Xuelin Wang Música, we believe every
                                    student can create something beautiful. The
                                    approach blends classical technique with
                                    thoughtful expression, guiding beginners and
                                    advanced players alike toward their musical
                                    goals.
                                </p>
                            </div>

                            <div className="grid grid-cols-2 gap-4 md:grid-cols-4">
                                {stats.map((stat) => (
                                    <div
                                        key={stat.label}
                                        className="flex flex-col gap-2 rounded-2xl border border-gray-200 p-8"
                                    >
                                        <span className="text-4xl font-bold text-gray-900">
                                            {stat.value}
                                        </span>
                                        <span className="text-sm leading-snug text-gray-500">
                                            {stat.label}
                                        </span>
                                    </div>
                                ))}
                            </div>

                            <div className="grid grid-cols-2 gap-4 md:grid-cols-4">
                                {[
                                    'Individual attention in every lesson',
                                    'Clear expectations and supportive pacing',
                                    'Repertoire shaped around the student',
                                    'A studio culture centered on artistry',
                                ].map((item) => (
                                    <div
                                        key={item}
                                        className="aspect-[4/3] overflow-hidden rounded-2xl bg-gray-100 p-6"
                                    >
                                        <div className="flex h-full items-end rounded-xl bg-[linear-gradient(180deg,#f8fafc_0%,#e5e7eb_100%)] p-4">
                                            <p className="text-base leading-7 font-medium text-gray-700">
                                                {item}
                                            </p>
                                        </div>
                                    </div>
                                ))}
                            </div>
                        </div>
                    </section>

                    <section
                        id="courses"
                        className="min-h-[calc(100vh-4rem)] snap-start scroll-mt-16 bg-white px-6 py-24"
                    >
                        <div className="mx-auto flex max-w-7xl flex-col gap-12">
                            <div className="max-w-2xl">
                                <p className="mb-4 text-sm font-medium tracking-[0.3em] text-gray-400 uppercase">
                                    What We Offer
                                </p>
                                <h2 className="text-4xl font-bold tracking-tight text-gray-900 md:text-6xl">
                                    Find your <br /> perfect course.
                                </h2>
                            </div>

                            <div className="grid grid-cols-1 gap-6 md:grid-cols-2">
                                {courseCards.map((course) => (
                                    <div
                                        key={course.title}
                                        className="overflow-hidden rounded-2xl border border-gray-200"
                                    >
                                        <div className="aspect-video overflow-hidden bg-gray-100">
                                            <div className="flex h-full w-full items-center justify-center bg-[linear-gradient(135deg,#f8fafc_0%,#e5e7eb_100%)]">
                                                <PianoIcon className="h-16 w-16 text-gray-700" />
                                            </div>
                                        </div>

                                        <div className="flex flex-col gap-4 p-6">
                                            <div>
                                                <h3 className="mb-1 text-xl font-bold text-gray-900">
                                                    {course.title}
                                                </h3>
                                                <p className="text-sm leading-relaxed text-gray-500">
                                                    {course.description}
                                                </p>
                                            </div>

                                            <ul className="flex flex-col gap-2">
                                                {course.curriculum.map(
                                                    (item) => (
                                                        <li
                                                            key={item}
                                                            className="flex items-center gap-2 text-sm text-gray-600"
                                                        >
                                                            <span className="h-1.5 w-1.5 shrink-0 rounded-full bg-gray-400" />
                                                            {item}
                                                        </li>
                                                    ),
                                                )}
                                            </ul>
                                        </div>
                                    </div>
                                ))}
                            </div>
                        </div>
                    </section>

                    <section
                        id="highlights"
                        className="relative flex min-h-screen w-full items-center justify-center overflow-hidden bg-white"
                    >
                        <div className="relative container mx-auto h-full">
                            <div className="highlights-fade absolute top-16 left-1/2 z-10 -translate-x-1/2 text-center whitespace-nowrap">
                                <p className="mb-2 text-sm font-medium tracking-[0.3em] text-gray-400 uppercase">
                                    Meet the Teacher
                                </p>
                                <h2 className="text-4xl font-bold tracking-tight text-gray-900 md:text-6xl">
                                    {teacherName}
                                </h2>
                            </div>

                            <div className="flex h-screen items-center justify-between px-10">
                                <ul className="highlights-fade hidden space-y-5 md:block">
                                    {leftHighlights.map((item) => (
                                        <li
                                            key={item}
                                            className="flex items-center gap-3 text-sm text-gray-400"
                                        >
                                            <span className="h-1.5 w-1.5 shrink-0 rounded-full bg-gray-300" />
                                            {item}
                                        </li>
                                    ))}
                                </ul>

                                <div className="absolute top-1/2 left-1/2 max-h-[40vh] max-w-[50vw] -translate-x-1/2 -translate-y-1/2">
                                    <div
                                        className="masked-img h-[320px] w-[320px] bg-[radial-gradient(circle_at_top,rgba(255,255,255,0.75),rgba(17,24,39,0.95)),linear-gradient(135deg,#dbe4ee_0%,#111827_100%)] bg-cover bg-center bg-no-repeat md:h-[420px] md:w-[420px]"
                                        style={{
                                            backgroundImage:
                                                teacherHighlightImageUrl
                                                    ? `url('${teacherHighlightImageUrl}')`
                                                    : undefined,
                                            backgroundPosition:
                                                'center top',
                                            maskImage:
                                                "url('/images/piano-mask.png')",
                                            maskRepeat: 'no-repeat',
                                            maskPosition: 'center',
                                            maskSize: '30%',
                                            WebkitMaskImage:
                                                "url('/images/piano-mask.png')",
                                            WebkitMaskRepeat: 'no-repeat',
                                            WebkitMaskPosition: 'center',
                                            WebkitMaskSize: '30%',
                                        }}
                                    />
                                </div>

                                <ul className="highlights-fade hidden space-y-5 md:block">
                                    {rightHighlights.map((item) => (
                                        <li
                                            key={item}
                                            className="flex items-center gap-3 text-sm text-gray-400"
                                        >
                                            <span className="h-1.5 w-1.5 shrink-0 rounded-full bg-gray-300" />
                                            {item}
                                        </li>
                                    ))}
                                </ul>
                            </div>

                            <div
                                id="highlights-caption"
                                className="absolute bottom-8 left-1/2 z-10 w-[min(92vw,38rem)] -translate-x-1/2 opacity-0"
                            >
                                <div className="rounded-[2rem] border border-white/70 bg-white/86 px-6 py-5 text-center shadow-[0_24px_60px_rgba(15,23,42,0.14)] backdrop-blur-md md:px-8">
                                    <p className="text-2xl font-bold tracking-tight text-gray-900 md:text-3xl">
                                        {teacherName}
                                    </p>
                                    <p className="mt-2 text-xs tracking-[0.35em] text-gray-400 uppercase md:text-sm">
                                        {teacherTitle}
                                    </p>
                                    <p className="mx-auto mt-4 max-w-2xl text-sm leading-7 text-gray-600 md:text-base">
                                        {teacherBio}
                                    </p>
                                </div>
                            </div>
                        </div>
                    </section>

                    <section
                        id="stories"
                        className="flex min-h-[calc(100vh-4rem)] snap-start scroll-mt-16 flex-col items-center justify-center overflow-hidden bg-white px-6 py-24"
                    >
                        <div className="mb-20 text-center">
                            <p className="mb-4 text-sm font-medium tracking-[0.3em] text-gray-400 uppercase">
                                Testimonials
                            </p>
                            <h2 className="text-4xl font-bold tracking-tight text-gray-900 md:text-6xl">
                                What people say.
                            </h2>
                        </div>

                        <div
                            className="relative h-72 w-full max-w-md cursor-grab select-none active:cursor-grabbing"
                            onPointerDown={handlePointerDown}
                            onPointerUp={handlePointerUp}
                            onTouchStart={handlePointerDown}
                            onTouchEnd={handlePointerUp}
                        >
                            {testimonials.map((testimonial, index) => (
                                <div
                                    key={`${testimonial.id}-${index}`}
                                    ref={(el) => {
                                        cardRefs.current[index] = el;
                                    }}
                                    className="absolute inset-0 flex flex-col justify-between rounded-2xl border border-gray-200 bg-white p-8 shadow-md"
                                    style={{ willChange: 'transform, filter' }}
                                >
                                    <p className="text-base leading-relaxed text-gray-700">
                                        "{testimonial.quote}"
                                    </p>
                                    <div className="mt-6 flex items-center gap-4">
                                        <div className="flex h-12 w-12 items-center justify-center rounded-full bg-gray-100 text-sm font-semibold text-gray-700">
                                            {testimonial.name
                                                .split(' ')
                                                .slice(0, 2)
                                                .map((part) => part[0])
                                                .join('')}
                                        </div>
                                        <div>
                                            <p className="text-sm font-semibold text-gray-900">
                                                {testimonial.name}
                                            </p>
                                            <p className="text-xs text-gray-400">
                                                {testimonial.role}
                                            </p>
                                        </div>
                                    </div>
                                </div>
                            ))}
                        </div>

                        <div className="mt-16 flex items-center gap-6">
                            <button
                                onClick={() => rotate('right')}
                                className="flex h-12 w-12 cursor-pointer items-center justify-center rounded-full border border-gray-200 text-gray-600 transition-colors hover:bg-gray-50"
                                aria-label="Previous"
                            >
                                ←
                            </button>

                            <div className="flex gap-2">
                                {testimonials.map((testimonial, index) => (
                                    <span
                                        key={`${testimonial.id}-indicator-${index}`}
                                        className={`h-2 rounded-full transition-all duration-300 ${
                                            order[0] === index
                                                ? 'w-4 bg-gray-900'
                                                : 'w-2 bg-gray-300'
                                        }`}
                                    />
                                ))}
                            </div>

                            <button
                                onClick={() => rotate('left')}
                                className="flex h-12 w-12 cursor-pointer items-center justify-center rounded-full border border-gray-200 text-gray-600 transition-colors hover:bg-gray-50"
                                aria-label="Next"
                            >
                                →
                            </button>
                        </div>
                    </section>

                    <section
                        id="faq"
                        className="min-h-[calc(100vh-4rem)] snap-start scroll-mt-16 bg-white px-6 py-24"
                    >
                        <div className="mx-auto flex max-w-3xl flex-col gap-12">
                            <div>
                                <p className="mb-4 text-sm font-medium tracking-[0.3em] text-gray-400 uppercase">
                                    FAQ
                                </p>
                                <h2 className="text-4xl font-bold tracking-tight text-gray-900 md:text-6xl">
                                    Common questions.
                                </h2>
                            </div>

                            <div className="flex flex-col gap-2">
                                {faqs.map((faq) => (
                                    <details
                                        key={faq.q}
                                        className="overflow-hidden rounded-xl border border-gray-200 px-5"
                                    >
                                        <summary className="cursor-pointer py-4 text-sm font-semibold text-gray-900">
                                            {faq.q}
                                        </summary>
                                        <p className="pb-4 text-sm leading-relaxed text-gray-500">
                                            {faq.a}
                                        </p>
                                    </details>
                                ))}
                            </div>
                        </div>
                    </section>

                    <section
                        id="contact"
                        className="flex min-h-[calc(100vh-4rem)] scroll-mt-16 flex-col"
                    >
                        <div className="flex-1 bg-white px-6 py-24">
                            <div className="mx-auto flex max-w-7xl flex-col gap-16 md:flex-row">
                                <div className="flex w-full flex-col gap-8 md:w-1/2">
                                    <div>
                                        <p className="mb-4 text-sm font-medium tracking-[0.3em] text-gray-400 uppercase">
                                            Get in Touch
                                        </p>
                                        <h2 className="mb-4 text-4xl font-bold tracking-tight text-gray-900 md:text-5xl">
                                            Let&apos;s start your journey.
                                        </h2>
                                        <p className="text-lg leading-relaxed text-gray-500">
                                            Have questions or want to book a
                                            free intro call? We&apos;ll get back
                                            to you with the next best step.
                                        </p>
                                    </div>

                                    <div className="flex flex-col gap-4">
                                        <div className="flex items-center gap-3 text-gray-500">
                                            <div className="flex h-9 w-9 shrink-0 items-center justify-center rounded-full border border-gray-200">
                                                <Mail size={14} />
                                            </div>
                                            <span className="text-sm">
                                                Inquire by email, phone, or text
                                            </span>
                                        </div>
                                        <div className="flex items-center gap-3 text-gray-500">
                                            <div className="flex h-9 w-9 shrink-0 items-center justify-center rounded-full border border-gray-200">
                                                <Phone size={14} />
                                            </div>
                                            <span className="text-sm">
                                                Share the best callback number
                                            </span>
                                        </div>
                                        <div className="flex items-center gap-3 text-gray-500">
                                            <div className="flex h-9 w-9 shrink-0 items-center justify-center rounded-full border border-gray-200">
                                                <MapPin size={14} />
                                            </div>
                                            <span className="text-sm">
                                                1107 Ridge Ave, Philadelphia
                                            </span>
                                        </div>
                                    </div>
                                </div>

                                <div className="w-full md:w-1/2">
                                    {flash.success ? (
                                        <Alert className="mb-6 border-emerald-200 bg-emerald-50">
                                            <AlertTitle>
                                                Inquiry sent
                                            </AlertTitle>
                                            <AlertDescription>
                                                {flash.success}
                                            </AlertDescription>
                                        </Alert>
                                    ) : null}

                                    <form
                                        className="flex flex-col gap-4"
                                        onSubmit={submit}
                                    >
                                        <div className="flex flex-col gap-4 sm:flex-row">
                                            <div className="flex w-full flex-col gap-1.5">
                                                <label className="text-xs font-medium tracking-wide text-gray-500 uppercase">
                                                    First Name
                                                </label>
                                                <Input
                                                    value={data.first_name}
                                                    onChange={(event) =>
                                                        setData(
                                                            'first_name',
                                                            event.target.value,
                                                        )
                                                    }
                                                    placeholder="Maria"
                                                    className="rounded-xl border-gray-200 px-4 py-3 text-sm text-gray-900 placeholder:text-gray-300"
                                                />
                                                <InputError
                                                    message={errors.first_name}
                                                />
                                            </div>
                                            <div className="flex w-full flex-col gap-1.5">
                                                <label className="text-xs font-medium tracking-wide text-gray-500 uppercase">
                                                    Last Name
                                                </label>
                                                <Input
                                                    value={data.last_name}
                                                    onChange={(event) =>
                                                        setData(
                                                            'last_name',
                                                            event.target.value,
                                                        )
                                                    }
                                                    placeholder="Taylor"
                                                    className="rounded-xl border-gray-200 px-4 py-3 text-sm text-gray-900 placeholder:text-gray-300"
                                                />
                                                <InputError
                                                    message={errors.last_name}
                                                />
                                            </div>
                                        </div>

                                        <div className="flex flex-col gap-1.5">
                                            <label className="text-xs font-medium tracking-wide text-gray-500 uppercase">
                                                Student Name
                                            </label>
                                            <Input
                                                value={data.student_name}
                                                onChange={(event) =>
                                                    setData(
                                                        'student_name',
                                                        event.target.value,
                                                    )
                                                }
                                                placeholder="Student name"
                                                className="rounded-xl border-gray-200 px-4 py-3 text-sm text-gray-900 placeholder:text-gray-300"
                                            />
                                            <InputError
                                                message={errors.student_name}
                                            />
                                        </div>

                                        <div className="flex flex-col gap-4 sm:flex-row">
                                            <div className="flex w-full flex-col gap-1.5">
                                                <label className="text-xs font-medium tracking-wide text-gray-500 uppercase">
                                                    Student Age
                                                </label>
                                                <Input
                                                    value={data.student_age}
                                                    onChange={(event) =>
                                                        setData(
                                                            'student_age',
                                                            event.target.value,
                                                        )
                                                    }
                                                    placeholder="Age"
                                                    className="rounded-xl border-gray-200 px-4 py-3 text-sm text-gray-900 placeholder:text-gray-300"
                                                />
                                                <InputError
                                                    message={errors.student_age}
                                                />
                                            </div>
                                            <div className="flex w-full flex-col gap-1.5">
                                                <label className="text-xs font-medium tracking-wide text-gray-500 uppercase">
                                                    Email
                                                </label>
                                                <Input
                                                    type="email"
                                                    value={data.email}
                                                    onChange={(event) =>
                                                        setData(
                                                            'email',
                                                            event.target.value,
                                                        )
                                                    }
                                                    placeholder="jane@example.com"
                                                    className="rounded-xl border-gray-200 px-4 py-3 text-sm text-gray-900 placeholder:text-gray-300"
                                                />
                                                <InputError
                                                    message={errors.email}
                                                />
                                            </div>
                                        </div>

                                        <div className="flex flex-col gap-1.5">
                                            <label className="text-xs font-medium tracking-wide text-gray-500 uppercase">
                                                Phone
                                            </label>
                                            <Input
                                                value={data.phone}
                                                onChange={(event) =>
                                                    setData(
                                                        'phone',
                                                        event.target.value,
                                                    )
                                                }
                                                placeholder="(555) 123-4567"
                                                className="rounded-xl border-gray-200 px-4 py-3 text-sm text-gray-900 placeholder:text-gray-300"
                                            />
                                            <InputError
                                                message={errors.phone}
                                            />
                                        </div>

                                        <div className="grid gap-4 sm:grid-cols-3">
                                            <div className="flex flex-col gap-1.5">
                                                <label className="text-xs font-medium tracking-wide text-gray-500 uppercase">
                                                    Contact Method
                                                </label>
                                                <select
                                                    value={
                                                        data.preferred_contact_method
                                                    }
                                                    onChange={(event) =>
                                                        setData(
                                                            'preferred_contact_method',
                                                            event.target.value,
                                                        )
                                                    }
                                                    className="cursor-pointer rounded-xl border border-gray-200 bg-white px-4 py-3 text-sm text-gray-900 outline-none focus:border-gray-400"
                                                >
                                                    <option value="email">
                                                        Email
                                                    </option>
                                                    <option value="phone">
                                                        Phone
                                                    </option>
                                                    <option value="text">
                                                        Text
                                                    </option>
                                                </select>
                                                <InputError
                                                    message={
                                                        errors.preferred_contact_method
                                                    }
                                                />
                                            </div>

                                            <div className="flex flex-col gap-1.5">
                                                <label className="text-xs font-medium tracking-wide text-gray-500 uppercase">
                                                    Lesson Format
                                                </label>
                                                <select
                                                    value={data.lesson_format}
                                                    onChange={(event) =>
                                                        setData(
                                                            'lesson_format',
                                                            event.target.value,
                                                        )
                                                    }
                                                    className="cursor-pointer rounded-xl border border-gray-200 bg-white px-4 py-3 text-sm text-gray-900 outline-none focus:border-gray-400"
                                                >
                                                    <option value="in_person">
                                                        In person
                                                    </option>
                                                    <option value="online">
                                                        Online
                                                    </option>
                                                    <option value="either">
                                                        Either
                                                    </option>
                                                </select>
                                                <InputError
                                                    message={
                                                        errors.lesson_format
                                                    }
                                                />
                                            </div>

                                            <div className="flex flex-col gap-1.5">
                                                <label className="text-xs font-medium tracking-wide text-gray-500 uppercase">
                                                    Experience
                                                </label>
                                                <select
                                                    value={
                                                        data.experience_level
                                                    }
                                                    onChange={(event) =>
                                                        setData(
                                                            'experience_level',
                                                            event.target.value,
                                                        )
                                                    }
                                                    className="cursor-pointer rounded-xl border border-gray-200 bg-white px-4 py-3 text-sm text-gray-900 outline-none focus:border-gray-400"
                                                >
                                                    <option value="beginner">
                                                        Beginner
                                                    </option>
                                                    <option value="some_experience">
                                                        Some experience
                                                    </option>
                                                    <option value="intermediate">
                                                        Intermediate
                                                    </option>
                                                    <option value="advanced">
                                                        Advanced
                                                    </option>
                                                </select>
                                                <InputError
                                                    message={
                                                        errors.experience_level
                                                    }
                                                />
                                            </div>
                                        </div>

                                        <div className="flex flex-col gap-1.5">
                                            <label className="text-xs font-medium tracking-wide text-gray-500 uppercase">
                                                What are the student&apos;s
                                                goals?
                                            </label>
                                            <textarea
                                                rows={4}
                                                value={data.goals}
                                                onChange={(event) =>
                                                    setData(
                                                        'goals',
                                                        event.target.value,
                                                    )
                                                }
                                                placeholder="Tell us a bit about the student, their background, and what you hope lessons will build."
                                                className="resize-none rounded-xl border border-gray-200 px-4 py-3 text-sm text-gray-900 transition-colors outline-none placeholder:text-gray-300 focus:border-gray-400"
                                            />
                                            <InputError
                                                message={errors.goals}
                                            />
                                        </div>

                                        <div className="flex flex-col gap-1.5">
                                            <label className="text-xs font-medium tracking-wide text-gray-500 uppercase">
                                                Availability
                                            </label>
                                            <textarea
                                                rows={3}
                                                value={data.availability}
                                                onChange={(event) =>
                                                    setData(
                                                        'availability',
                                                        event.target.value,
                                                    )
                                                }
                                                placeholder="Preferred days, times, and anything helpful about scheduling."
                                                className="resize-none rounded-xl border border-gray-200 px-4 py-3 text-sm text-gray-900 transition-colors outline-none placeholder:text-gray-300 focus:border-gray-400"
                                            />
                                            <InputError
                                                message={errors.availability}
                                            />
                                        </div>

                                        <button
                                            type="submit"
                                            disabled={processing}
                                            className="mt-1 w-full cursor-pointer rounded-xl bg-gray-900 py-3 text-sm font-medium tracking-widest text-white uppercase transition-colors hover:bg-gray-700 disabled:cursor-not-allowed disabled:opacity-70"
                                        >
                                            {processing
                                                ? 'Sending...'
                                                : 'Send Message'}
                                        </button>
                                    </form>
                                </div>
                            </div>
                        </div>

                        <footer className="bg-gray-950 px-6 py-12">
                            <div className="mx-auto flex max-w-7xl flex-col gap-10">
                                <div className="flex flex-col items-start justify-between gap-8 md:flex-row md:items-center">
                                    <div className="flex items-center gap-2 text-lg font-semibold text-white">
                                        <PianoIcon className="h-6 w-auto" />
                                        <span>Xuelin Wang Música</span>
                                    </div>

                                    <ul className="flex flex-wrap gap-x-8 gap-y-2">
                                        {[
                                            'about',
                                            'courses',
                                            'highlights',
                                            'stories',
                                            'faq',
                                            'contact',
                                        ].map((id) => (
                                            <li key={id}>
                                                <button
                                                    onClick={() =>
                                                        document
                                                            .getElementById(id)
                                                            ?.scrollIntoView({
                                                                behavior:
                                                                    'smooth',
                                                            })
                                                    }
                                                    className="cursor-pointer text-sm text-gray-400 transition-colors hover:text-white"
                                                >
                                                    {id
                                                        .charAt(0)
                                                        .toUpperCase() +
                                                        id.slice(1)}
                                                </button>
                                            </li>
                                        ))}
                                    </ul>
                                </div>

                                <div className="flex flex-col items-start justify-between gap-4 border-t border-gray-800 pt-6 sm:flex-row sm:items-center">
                                    <p className="text-xs text-gray-500">
                                        © {new Date().getFullYear()} Xuelin Wang
                                        Música. All rights reserved.
                                    </p>
                                    <p className="text-xs text-gray-600">
                                        Designed with ♪ for music lovers
                                        everywhere.
                                    </p>
                                </div>
                            </div>
                        </footer>
                    </section>
                </div>
            </main>
        </>
    );
}