'use client'

import { useEarlyAccessCapture } from '../hooks/useEarlyAccessCapture'
import TeaserHero from '../components/TeaserHero'
import MissionStatement from '../components/MissionStatement'
import EarlyAccessForm from '../components/EarlyAccessForm'
import ThemeToggle from '../components/ThemeToggle'

export default function HomePage() {
  const { isModalOpen, currentLeadSource, openModal, closeModal } = useEarlyAccessCapture()

  return (
    <main className="min-h-screen bg-white dark:bg-carbon-950 text-carbon-950 dark:text-white overflow-x-hidden font-sans antialiased">
      {/* Hero Section */}
      <TeaserHero onEarlyAccess={openModal} />
      
      {/* Mission Statement */}
      <MissionStatement />
      
      {/* Coming Soon Footer */}
      <section className="py-chorus-xxl px-chorus-lg border-t border-mulberry-800/30 dark:border-mulberry-800/30 border-sand-300/50 bg-gradient-to-b from-sand-200 to-white dark:from-carbon-950 dark:to-mulberry-950">
        <div className="max-w-4xl mx-auto text-center">
          <p className="text-carbon-700 dark:text-mulberry-200 text-lg font-light mb-chorus-xl leading-relaxed">
            CHORUS Services is currently in development.<br/>
            Join our waitlist to be first to experience the future of contextual AI orchestration.
          </p>
          
          <div className="flex gap-chorus-md justify-center flex-wrap">
            <button 
              onClick={() => openModal('request_early_access')}
              className="btn-primary text-lg px-chorus-xl py-chorus-md"
            >
              Request Early Access
            </button>
            <button 
              onClick={() => openModal('early_access_waitlist')}
              className="btn-secondary text-lg px-chorus-xl py-chorus-md"
            >
              Join Waitlist
            </button>
          </div>
        </div>
      </section>

      {/* Minimal Footer */}
      <footer className="py-chorus-xl px-chorus-lg border-t border-sand-300/30 dark:border-mulberry-800/20 bg-sand-100 dark:bg-mulberry-950">
        <div className="max-w-6xl mx-auto">
          <div className="flex flex-col md:flex-row justify-between items-center space-y-4 md:space-y-0">
            <div className="text-carbon-600 dark:text-mulberry-300 text-sm font-medium">
              © 2025 Anthony Rawlins. All rights reserved.
            </div>
            
            <div className="flex space-x-chorus-lg text-sm">
              <a 
                href="mailto:contact@chorus.services" 
                className="text-carbon-600 dark:text-mulberry-300 hover:text-carbon-950 dark:hover:text-white transition-colors duration-300 ease-out font-medium"
              >
                Contact
              </a>
              <a 
                href="/privacy" 
                className="text-carbon-600 dark:text-mulberry-300 hover:text-carbon-950 dark:hover:text-white transition-colors duration-300 ease-out font-medium"
              >
                Privacy
              </a>
            </div>
          </div>
          
          {/* Business Details */}
          <div className="mt-chorus-lg pt-chorus-lg border-t border-sand-300/30 dark:border-mulberry-800/30">
            <div className="text-xs text-carbon-500 dark:text-mulberry-400 space-y-1 leading-relaxed">
              <p className="font-medium">CHORUS.services - Anthony Lewis Rawlins</p>
              <p>ABN: 38558842858 | Lucas, Victoria 3350, Australia</p>
              <p className="text-carbon-400 dark:text-mulberry-500">AI Development & IT Consultancy</p>
            </div>
          </div>
        </div>
      </footer>

      {/* Theme Toggle */}
      <ThemeToggle />

      {/* Early Access Form Modal */}
      <EarlyAccessForm isOpen={isModalOpen} onClose={closeModal} leadSource={currentLeadSource} />
    </main>
  )
}