import { WizardContainer } from '@/components/wizard/WizardContainer'
import { Shield, Phone, MapPin } from 'lucide-react'

function App() {
  return (
    <div className="min-h-screen bg-[#f8f9fb] flex flex-col">
      {/* Header */}
      <header className="bg-white border-b border-gray-200">
        <div className="max-w-6xl mx-auto px-4 sm:px-6 py-4 flex items-center justify-between">
          <div className="flex items-center gap-3">
            <div className="flex items-center justify-center w-10 h-10 rounded-lg bg-gradient-accent">
              <span className="text-white font-extrabold text-sm tracking-tight" style={{ fontFamily: "'Plus Jakarta Sans', sans-serif" }}>
                AZ
              </span>
            </div>
            <div>
              <h1 className="text-lg font-bold text-[#333d49] leading-tight" style={{ fontFamily: "'Plus Jakarta Sans', sans-serif" }}>
                AZ Computer Guru
              </h1>
              <p className="text-xs text-gray-400 leading-tight">IT Services Quote Builder</p>
            </div>
          </div>
          <div className="hidden sm:flex items-center gap-5 text-xs text-gray-500">
            <a href="tel:15203048300" className="flex items-center gap-1.5 hover:text-[#fe7400] transition-colors">
              <Phone className="w-3.5 h-3.5 text-[#fe7400]" />
              (520) 304-8300
            </a>
            <span className="flex items-center gap-1.5">
              <MapPin className="w-3.5 h-3.5 text-[#fe7400]" />
              Serving Arizona
            </span>
          </div>
        </div>
      </header>

      {/* Main content */}
      <main className="flex-1 py-8 sm:py-10">
        <WizardContainer />
      </main>

      {/* Footer */}
      <footer className="bg-gradient-navy text-white py-8 px-4 sm:px-6">
        <div className="max-w-6xl mx-auto">
          <div className="flex flex-col sm:flex-row items-center justify-between gap-4">
            <div className="flex items-center gap-3">
              <div className="flex items-center justify-center w-8 h-8 rounded-md bg-white/10">
                <span className="text-white font-bold text-xs" style={{ fontFamily: "'Plus Jakarta Sans', sans-serif" }}>
                  AZ
                </span>
              </div>
              <div>
                <p className="text-sm font-medium text-white/90">AZ Computer Guru</p>
                <p className="text-xs text-white/50">Managed IT Services for Arizona Businesses</p>
              </div>
            </div>
            <div className="flex items-center gap-6 text-xs text-white/50">
              <span className="flex items-center gap-1.5">
                <Shield className="w-3.5 h-3.5" />
                Your data is encrypted & secure
              </span>
              <span>&copy; {new Date().getFullYear()} AZ Computer Guru</span>
            </div>
          </div>
        </div>
      </footer>
    </div>
  )
}

export default App