import type { Metadata } from 'next'
import Link from 'next/link'
import { GlassCard } from '@/components/shared/GlassCard'
import { CheckCircle2, ArrowRight } from 'lucide-react'

export const metadata: Metadata = {
  title: 'Thank You | DaliTek',
  description: 'Your strategy session request has been received.',
}

export default function ThankYouPage() {
  return (
    <main className="min-h-screen flex items-center justify-center pt-16 pb-20">
      <div className="section-container max-w-2xl">
        <GlassCard className="p-10 text-center">
          <div
            className="w-16 h-16 rounded-2xl flex items-center justify-center mx-auto mb-6"
            style={{
              background: 'rgba(34, 197, 94, 0.12)',
              border: '1px solid rgba(34, 197, 94, 0.30)',
            }}
          >
            <CheckCircle2 className="w-8 h-8" style={{ color: '#22c55e' }} />
          </div>

          <h1 className="text-3xl font-bold mb-3" style={{ color: 'var(--dt-text-primary)' }}>
            You&apos;re on our list.
          </h1>
          <p className="text-base leading-relaxed mb-2" style={{ color: 'var(--dt-text-secondary)' }}>
            We received your strategy session request and will follow up within 24 hours to schedule your call.
          </p>
          <p className="text-sm mb-8" style={{ color: 'var(--dt-text-muted)' }}>
            In the meantime, feel free to explore the ROI calculator on our homepage to see
            what automation could mean for your business.
          </p>

          <div className="flex flex-col sm:flex-row gap-3 justify-center">
            <Link
              href="/#roi"
              className="inline-flex items-center justify-center px-6 py-2.5 rounded-lg text-sm font-medium text-white"
              style={{ background: 'var(--dt-gradient-accent)' }}
            >
              See ROI Calculator
            </Link>
            <Link
              href="/"
              className="inline-flex items-center justify-center gap-2 px-6 py-2.5 rounded-lg text-sm font-medium transition-colors"
              style={{
                border: '1px solid var(--dt-border-subtle)',
                color: 'var(--dt-text-secondary)',
              }}
            >
              Back to home
              <ArrowRight className="w-4 h-4" />
            </Link>
          </div>
        </GlassCard>
      </div>
    </main>
  )
}