import { Head, Link } from '@inertiajs/react';
import AltivateLayout from '@/Layouts/AltivateLayout';
import { ArrowRight, CheckCircle2, AlertCircle, ChevronDown } from 'lucide-react';
import { useState } from 'react';
import CTASection from '@/Components/CTASection';

interface ServiceProp {
    slug: string;
    name: string;
    headline: string;
    intro: string;
    problem: string;
    what_we_do: string;
    steps: Array<{ name: string; description: string }>;
    what_you_get: string;
    proof_interim: string;
    faqs: Array<{ q: string; a: string }>;
}

export default function Show({ service }: { service: ServiceProp }) {
    const [openFaq, setOpenFaq] = useState<number | null>(0);

    const handleAuditClick = () => {
        // Trigger GA4 event if gtag is available
        if (typeof window !== 'undefined' && typeof (window as any).gtag !== 'undefined') {
            (window as any).gtag('event', 'generate_lead', {
                'event_category': 'engagement',
                'event_label': 'growth_audit',
                'value': 1
            });
        }
    };

    return (
        <AltivateLayout title={service.name} description={service.headline}>
            {/* HERO */}
            <section className="pt-32 pb-16 md:pt-40 md:pb-24 px-6 relative overflow-hidden bg-[#FAFAF8]">
                <div className="max-w-4xl mx-auto text-center relative z-10">
                    <div className="inline-block px-3 py-1 rounded-full bg-accent/10 text-accent text-sm font-semibold tracking-wider uppercase mb-6">
                        {service.name}
                    </div>
                    <h1 className="font-display text-4xl md:text-6xl text-ink leading-[1.1] tracking-tight mb-8">
                        {service.headline}
                    </h1>
                    <p className="text-lg md:text-xl text-[#8C92AC] leading-relaxed max-w-2xl mx-auto mb-10">
                        {service.intro}
                    </p>
                    <Link
                        href={route('audit')}
                        onClick={handleAuditClick}
                        className="inline-flex items-center justify-center bg-accent text-white px-8 py-4 rounded-full text-lg font-medium hover:bg-red-700 transition-colors shadow-lg shadow-accent/25 hover:shadow-xl hover:shadow-accent/30 hover:-translate-y-0.5 active:translate-y-0"
                    >
                        Get your free Growth Audit
                        <ArrowRight className="ml-2 h-5 w-5" />
                    </Link>
                </div>
            </section>

            {/* THE PROBLEM & WHAT WE DO */}
            <section className="py-24 px-6 bg-white">
                <div className="max-w-6xl mx-auto grid md:grid-cols-2 gap-16 items-start">
                    <div>
                        <div className="flex items-center gap-3 text-accent mb-6">
                            <AlertCircle className="h-6 w-6" />
                            <h2 className="font-display text-3xl text-ink">The Problem</h2>
                        </div>
                        <p className="text-[#8C92AC] text-lg leading-relaxed">
                            {service.problem}
                        </p>
                    </div>
                    <div>
                        <div className="flex items-center gap-3 text-accent mb-6">
                            <CheckCircle2 className="h-6 w-6" />
                            <h2 className="font-display text-3xl text-ink">What We Do</h2>
                        </div>
                        <p className="text-ink text-lg leading-relaxed">
                            {service.what_we_do}
                        </p>
                    </div>
                </div>
            </section>

            {/* HOW IT WORKS */}
            <section className="py-24 px-6 bg-ink text-white">
                <div className="max-w-6xl mx-auto">
                    <div className="text-center mb-16">
                        <h2 className="font-display text-4xl md:text-5xl mb-4">How it works</h2>
                        <p className="text-gray-400 text-lg">A clear path from chaos to clarity.</p>
                    </div>
                    
                    <div className="grid md:grid-cols-3 gap-8 relative">
                        {/* Connecting line for desktop */}
                        <div className="hidden md:block absolute top-8 left-[16.66%] right-[16.66%] h-0.5 bg-gray-800"></div>
                        
                        {service.steps.map((step, idx) => (
                            <div key={idx} className="relative z-10 text-center">
                                <div className="w-16 h-16 rounded-full bg-accent text-white flex items-center justify-center text-2xl font-display font-bold mx-auto mb-6 shadow-xl shadow-accent/20">
                                    {idx + 1}
                                </div>
                                <h3 className="text-xl font-bold mb-3">{step.name}</h3>
                                <p className="text-gray-400 leading-relaxed">{step.description}</p>
                            </div>
                        ))}
                    </div>
                </div>
            </section>

            {/* WHAT YOU GET */}
            <section className="py-24 px-6 bg-[#FAFAF8]">
                <div className="max-w-4xl mx-auto text-center">
                    <h2 className="font-display text-4xl md:text-5xl text-ink mb-12">What you get</h2>
                    <div className="bg-white rounded-3xl p-8 md:p-12 shadow-xl shadow-ink/5 text-left border border-[#E8E6DF]">
                        <p className="text-xl text-ink leading-relaxed">
                            {service.what_you_get}
                        </p>
                    </div>
                </div>
            </section>

            {/* PROOF / CASE STUDY HOOK */}
            <section className="py-24 px-6 bg-white border-y border-[#E8E6DF]">
                <div className="max-w-4xl mx-auto text-center">
                    <p className="text-[#8C92AC] font-medium uppercase tracking-widest text-sm mb-6">Trusted by ambitious brands</p>
                    <h2 className="font-display text-3xl md:text-4xl text-ink mb-8">
                        {service.proof_interim}
                    </h2>
                    <Link
                        href={route('case_studies')}
                        className="inline-flex items-center text-accent font-semibold hover:text-red-700 transition-colors"
                    >
                        Read our case studies
                        <ArrowRight className="ml-2 h-5 w-5" />
                    </Link>
                </div>
            </section>

            {/* FAQs */}
            {service.faqs && service.faqs.length > 0 && (
                <section className="py-24 px-6 bg-white">
                    <div className="max-w-3xl mx-auto">
                        <h2 className="font-display text-4xl md:text-5xl text-ink text-center mb-16">Frequently Asked Questions</h2>
                        <div className="space-y-4">
                            {service.faqs.map((faq, idx) => (
                                <div key={idx} className="border border-[#E8E6DF] rounded-2xl overflow-hidden bg-[#FAFAF8]">
                                    <button
                                        onClick={() => setOpenFaq(openFaq === idx ? null : idx)}
                                        className="w-full text-left px-6 py-5 flex items-center justify-between font-medium text-lg text-ink hover:bg-white transition-colors"
                                    >
                                        <span>{faq.q}</span>
                                        <ChevronDown className={`h-5 w-5 text-[#8C92AC] transition-transform duration-300 ${openFaq === idx ? 'rotate-180' : ''}`} />
                                    </button>
                                    <div 
                                        className={`px-6 overflow-hidden transition-all duration-300 ease-in-out ${openFaq === idx ? 'max-h-[500px] pb-6 opacity-100' : 'max-h-0 opacity-0'}`}
                                    >
                                        <p className="text-[#8C92AC] leading-relaxed pt-2 border-t border-[#E8E6DF]">
                                            {faq.a}
                                        </p>
                                    </div>
                                </div>
                            ))}
                        </div>
                    </div>
                </section>
            )}

            {/* CTA */}
            <CTASection 
                title="Ready to fix your foundation?" 
                subtitle="Book a free Growth Audit. We'll map the gaps in your strategy, and you'll leave with clarity on exactly what to do next."
                buttonText="Get your free Growth Audit"
            />
        </AltivateLayout>
    );
}