'use client'

import { useState, useMemo } from 'react'
import { MarketingLayout } from '@/components/layouts/marketing-layout'
import { ServiceTypeToggle } from '@/components/services/service-type-toggle'
import { ProgressStepper } from '@/components/services/progress-stepper'
import { PricingCard } from '@/components/marketing/pricing-card'
import { TrustBadges } from '@/components/services/trust-badges'
import { getPricingPlansByServiceType, type ServiceType } from '@/lib/mock-data'
import { Button } from '@/components/ui/button'
import Link from 'next/link'

export default function ServicesPage() {
  const [serviceType, setServiceType] = useState<ServiceType>('web-design')

  const pricingPlans = useMemo(
    () => getPricingPlansByServiceType(serviceType),
    [serviceType]
  )

  return (
    <MarketingLayout>
      <section className="w-full py-20 min-h-screen">
        <div className="w-full max-w-[1280px] mx-auto px-4 md:px-10">
          {/* Progress Stepper */}
          <ProgressStepper
            currentStep={2}
            totalSteps={4}
            stepLabel="Choose Your Plan"
          />

          {/* Service Type Toggle */}
          <ServiceTypeToggle
            defaultValue="web-design"
            onChange={setServiceType}
          />

          {/* Header */}
          <div className="text-center max-w-2xl mx-auto mb-12">
            <h1 className="text-3xl md:text-5xl font-bold text-foreground mb-4">
              {serviceType === 'web-design' ? 'Web Design Packages' : 'AI Automation Packages'}
            </h1>
            <p className="text-muted-foreground text-lg">
              {serviceType === 'web-design'
                ? 'Professional websites built to convert visitors into customers. Choose the package that fits your needs.'
                : 'Intelligent automation solutions that save time and boost efficiency. Start automating today.'}
            </p>
          </div>

          {/* Pricing Cards */}
          <div className="grid grid-cols-1 md:grid-cols-3 gap-6 max-w-6xl mx-auto mb-12">
            {pricingPlans.map((plan) => (
              <PricingCard
                key={plan.id}
                tier={plan.tier}
                price={plan.price}
                currency={plan.currency}
                features={plan.features}
                popular={plan.popular}
                planId={plan.id}
              />
            ))}
          </div>

          {/* Trust Badges */}
          <TrustBadges />

          {/* Back Button */}
          <div className="flex justify-center mt-12">
            <Button
              variant="outline"
              asChild
              className="bg-card border border-border hover:border-primary text-foreground"
            >
              <Link href="/">← Back to Home</Link>
            </Button>
          </div>
        </div>
      </section>
    </MarketingLayout>
  )
}