import type { Metadata } from 'next'
import { BookingForm } from '@/components/booking/BookingForm'
import { GlassCard } from '@/components/shared/GlassCard'
import { SectionLabel } from '@/components/shared/SectionLabel'
import { CheckCircle2, MapPin, Clock, Zap } from 'lucide-react'

export const metadata: Metadata = {
  title: 'Book a Strategy Session | DaliTek',
  description: 'Book a free 30-minute strategy session with DaliTek. We\'ll map your bottleneck and show you what a custom system would look like for your business.',
}

const trustPoints = [
  {
    icon: Clock,
    text: '30-minute focused session — no fluff, no sales pitch',
  },
  {
    icon: Zap,
    text: 'Leave with a clear picture of what a system would do for you',
  },
  {
    icon: MapPin,
    text: 'Serving Central Florida first — Orlando, Winter Garden, Clermont, and beyond',
  },
]

export default function BookingPage() {
  return (
    <main className="min-h-screen pt-24 pb-20 relative">
      {/* Background */}
      <div
        className="absolute inset-0 pointer-events-none"
        style={{ background: 'var(--dt-gradient-hero)' }}
        aria-hidden="true"
      />

      <div className="section-container relative z-10">
        <div className="grid md:grid-cols-2 gap-12 md:gap-16 items-start">
          {/* Left: Copy */}
          <div className="md:pt-8">
            <SectionLabel>Free Strategy Session</SectionLabel>

            <h1 className="text-4xl md:text-5xl font-bold leading-tight tracking-tight mt-4 mb-6">
              <span style={{ color: 'var(--dt-text-primary)' }}>
                Let&apos;s map your bottleneck.
              </span>
              <br />
              <span
                style={{
                  background: 'var(--dt-gradient-accent)',
                  WebkitBackgroundClip: 'text',
                  backgroundClip: 'text',
                  WebkitTextFillColor: 'transparent',
                }}
              >
                No cost. No obligation.
              </span>
            </h1>

            <p className="text-lg leading-relaxed mb-8" style={{ color: 'var(--dt-text-secondary)' }}>
              This session is for Central Florida business owners and entrepreneurs who are tired of
              working around their tools instead of with them. We&apos;ll spend 30 minutes understanding
              your workflow and show you exactly what a custom system could do for your business.
            </p>

            <div className="space-y-4 mb-8">
              {trustPoints.map((point, i) => (
                <div key={i} className="flex items-start gap-3">
                  <div
                    className="w-8 h-8 rounded-lg flex items-center justify-center shrink-0 mt-0.5"
                    style={{
                      background: 'rgba(99,102,241,0.12)',
                      border: '1px solid var(--dt-border-accent)',
                    }}
                  >
                    <point.icon className="w-4 h-4" style={{ color: 'var(--dt-accent-primary)' }} />
                  </div>
                  <p className="text-sm leading-relaxed" style={{ color: 'var(--dt-text-secondary)' }}>
                    {point.text}
                  </p>
                </div>
              ))}
            </div>

            <div
              className="p-4 rounded-xl"
              style={{
                background: 'rgba(99,102,241,0.06)',
                border: '1px solid var(--dt-border-accent)',
              }}
            >
              <div className="flex items-center gap-2 mb-2">
                <CheckCircle2 className="w-4 h-4" style={{ color: '#22c55e' }} />
                <p className="text-sm font-semibold" style={{ color: 'var(--dt-text-primary)' }}>
                  What to expect
                </p>
              </div>
              <ul className="space-y-1">
                {[
                  'We review your current workflow and tools',
                  'We identify your highest-impact automation opportunity',
                  'You get a clear, actionable system concept — custom to your business',
                ].map((item, i) => (
                  <li key={i} className="text-xs flex items-start gap-2" style={{ color: 'var(--dt-text-secondary)' }}>
                    <span style={{ color: 'var(--dt-accent-primary)' }}>→</span>
                    {item}
                  </li>
                ))}
              </ul>
            </div>
          </div>

          {/* Right: Form */}
          <div>
            <GlassCard className="p-6 md:p-8">
              <h2 className="text-xl font-semibold mb-2" style={{ color: 'var(--dt-text-primary)' }}>
                Request your session
              </h2>
              <p className="text-sm mb-8" style={{ color: 'var(--dt-text-muted)' }}>
                Takes 2 minutes. We&apos;ll reach out within 24 hours.
              </p>
              <BookingForm />
            </GlassCard>
          </div>
        </div>
      </div>
    </main>
  )
}