'use client'

import { useState } from 'react'
import { motion } from 'framer-motion'
import { Menu, X, ChevronRight, MessageSquare, User, LogIn } from 'lucide-react'
import { Button } from "@/components/ui/button"
import { Input } from "@/components/ui/input"
import { Textarea } from "@/components/ui/textarea"
import {
  Dialog,
  DialogContent,
  DialogDescription,
  DialogHeader,
  DialogTitle,
  DialogTrigger,
} from "@/components/ui/dialog"
import {
  Card,
  CardContent,
  CardDescription,
  CardFooter,
  CardHeader,
  CardTitle,
} from "@/components/ui/card"
import { Label } from "@/components/ui/label"
import { Tabs, TabsContent, TabsList, TabsTrigger } from "@/components/ui/tabs"

export default function ImprovedEvacuationEquipmentForum() {
  const [isMenuOpen, setIsMenuOpen] = useState(false)

  return (
    <div className="min-h-screen bg-gradient-to-b from-background to-secondary">
      <header className="sticky top-0 z-50 w-full border-b bg-background/95 backdrop-blur supports-[backdrop-filter]:bg-background/60">
        <div className="container flex h-16 items-center justify-between">
          <a className="flex items-center space-x-2" href="/">
            <motion.div
              className="h-8 w-8 rounded-full bg-primary"
              whileHover={{ scale: 1.1 }}
              whileTap={{ scale: 0.9 }}
            />
            <span className="font-bold text-xl">SafeEscape</span>
          </a>
          <nav className="hidden md:flex space-x-6 text-sm font-medium">
            <a className="transition-colors hover:text-primary" href="#reviews">Reviews</a>
            <a className="transition-colors hover:text-primary" href="#qa">Q&A</a>
            <a className="transition-colors hover:text-primary" href="#contact">Contact</a>
          </nav>
          <div className="flex items-center space-x-4">
            <Dialog>
              <DialogTrigger asChild>
                <Button variant="outline" size="sm" className="hidden md:inline-flex">
                  <LogIn className="mr-2 h-4 w-4" />
                  Login / Register
                </Button>
              </DialogTrigger>
              <DialogContent>
                <DialogHeader>
                  <DialogTitle>Login or Register</DialogTitle>
                  <DialogDescription>
                    Join our community to share your experiences and ask questions.
                  </DialogDescription>
                </DialogHeader>
                <Tabs defaultValue="login">
                  <TabsList className="grid w-full grid-cols-2">
                    <TabsTrigger value="login">Login</TabsTrigger>
                    <TabsTrigger value="register">Register</TabsTrigger>
                  </TabsList>
                  <TabsContent value="login">
                    <form className="space-y-4">
                      <div className="space-y-2">
                        <Label htmlFor="email">Email</Label>
                        <Input id="email" type="email" placeholder="john@example.com" required />
                      </div>
                      <div className="space-y-2">
                        <Label htmlFor="password">Password</Label>
                        <Input id="password" type="password" required />
                      </div>
                      <Button type="submit" className="w-full">Login</Button>
                    </form>
                  </TabsContent>
                  <TabsContent value="register">
                    <form className="space-y-4">
                      <div className="space-y-2">
                        <Label htmlFor="name">Name</Label>
                        <Input id="name" placeholder="John Doe" required />
                      </div>
                      <div className="space-y-2">
                        <Label htmlFor="email">Email</Label>
                        <Input id="email" type="email" placeholder="john@example.com" required />
                      </div>
                      <div className="space-y-2">
                        <Label htmlFor="password">Password</Label>
                        <Input id="password" type="password" required />
                      </div>
                      <Button type="submit" className="w-full">Register</Button>
                    </form>
                  </TabsContent>
                </Tabs>
              </DialogContent>
            </Dialog>
            <Button
              variant="ghost"
              size="icon"
              className="md:hidden"
              onClick={() => setIsMenuOpen(!isMenuOpen)}
            >
              {isMenuOpen ? <X /> : <Menu />}
            </Button>
          </div>
        </div>
      </header>

      {isMenuOpen && (
        <motion.div
          className="fixed inset-0 top-16 z-50 grid h-[calc(100vh-4rem)] grid-flow-row auto-rows-max overflow-auto p-6 pb-32 shadow-md md:hidden"
          initial={{ opacity: 0, y: -20 }}
          animate={{ opacity: 1, y: 0 }}
          exit={{ opacity: 0, y: -20 }}
        >
          <div className="relative z-20 grid gap-6 rounded-md bg-popover p-4 text-popover-foreground shadow-md">
            <nav className="grid grid-flow-row auto-rows-max text-sm">
              <a className="flex w-full items-center rounded-md p-2 text-sm font-medium hover:underline" href="#reviews">
                Reviews
              </a>
              <a className="flex w-full items-center rounded-md p-2 text-sm font-medium hover:underline" href="#qa">
                Q&A
              </a>
              <a className="flex w-full items-center rounded-md p-2 text-sm font-medium hover:underline" href="#contact">
                Contact
              </a>
            </nav>
            <Button variant="outline" size="sm">
              <LogIn className="mr-2 h-4 w-4" />
              Login / Register
            </Button>
          </div>
        </motion.div>
      )}

      <main>
        <section className="container mx-auto px-4 py-24 text-center">
          <motion.h1 
            className="text-5xl font-bold mb-6 bg-clip-text text-transparent bg-gradient-to-r from-primary to-secondary"
            initial={{ opacity: 0, y: -20 }}
            animate={{ opacity: 1, y: 0 }}
            transition={{ duration: 0.5 }}
          >
            Your Safety, Our Priority
          </motion.h1>
          <motion.p 
            className="text-xl mb-8 max-w-2xl mx-auto"
            initial={{ opacity: 0, y: -20 }}
            animate={{ opacity: 1, y: 0 }}
            transition={{ duration: 0.5, delay: 0.2 }}
          >
            Join the SafeEscape community to share experiences, ask questions, and learn about our life-saving evacuation equipment.
          </motion.p>
          <motion.div
            initial={{ opacity: 0, scale: 0.8 }}
            animate={{ opacity: 1, scale: 1 }}
            transition={{ duration: 0.5, delay: 0.4 }}
          >
            <Button size="lg" className="bg-primary text-primary-foreground hover:bg-primary/90">
              Explore SafeEscape
              <ChevronRight className="ml-2 h-4 w-4" />
            </Button>
          </motion.div>
        </section>

        <section id="reviews" className="py-24 bg-secondary/20">
          <div className="container mx-auto px-4">
            <h2 className="text-4xl font-bold mb-12 text-center">User Experiences</h2>
            <div className="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-8">
              {[
                { name: "John D.", content: "The SafeEscape kit gave me peace of mind during our recent building evacuation. Easy to use and compact!", rating: 5 },
                { name: "Sarah M.", content: "I never thought I'd need evacuation equipment, but when I did, SafeEscape was a lifesaver. Literally.", rating: 5 },
                { name: "Robert L.", content: "As a safety manager, I highly recommend SafeEscape. It's now a crucial part of our emergency preparedness plan.", rating: 4 }
              ].map((review, index) => (
                <motion.div 
                  key={index} 
                  className="bg-card rounded-lg shadow-lg overflow-hidden"
                  initial={{ opacity: 0, y: 50 }}
                  animate={{ opacity: 1, y: 0 }}
                  transition={{ duration: 0.5, delay: index * 0.1 }}
                >
                  <div className="p-6">
                    <p className="mb-4 text-muted-foreground">{review.content}</p>
                    <div className="flex items-center justify-between">
                      <p className="font-semibold">{review.name}</p>
                      <div className="flex">
                        {[...Array(review.rating)].map((_, i) => (
                          <svg key={i} className="w-5 h-5 fill-primary" viewBox="0 0 20 20">
                            <path d="M9.049 2.927c.3-.921 1.603-.921 1.902 0l1.07 3.292a1 1 0 00.95.69h3.462c.969 0 1.371 1.24.588 1.81l-2.8 2.034a1 1 0 00-.364 1.118l1.07 3.292c.3.921-.755 1.688-1.54 1.118l-2.8-2.034a1 1 0 00-1.175 0l-2.8 2.034c-.784.57-1.838-.197-1.539-1.118l1.07-3.292a1 1 0 00-.364-1.118L2.98 8.72c-.783-.57-.38-1.81.588-1.81h3.461a1 1 0 00.951-.69l1.07-3.292z" />
                          </svg>
                        ))}
                      </div>
                    </div>
                  </div>
                </motion.div>
              ))}
            </div>
          </div>
        </section>

        <section id="qa" className="py-24">
          <div className="container mx-auto px-4">
            <h2 className="text-4xl font-bold mb-12 text-center">Q&A Forum</h2>
            <div className="max-w-3xl mx-auto space-y-8">
              <Card>
                <CardHeader>
                  <CardTitle>Ask a Question</CardTitle>
                  <CardDescription>Share your queries about SafeEscape products or emergency preparedness.</CardDescription>
                </CardHeader>
                <CardContent>
                  <form>
                    <div className="space-y-4">
                      <div className="space-y-2">
                        <Label htmlFor="question">Your Question</Label>
                        <Textarea id="question" placeholder="Type your question here..." />
                      </div>
                      <Button type="submit">Submit Question</Button>
                    </div>
                  </form>
                </CardContent>
              </Card>
              
              {[
                { 
                  question: "How do I properly store my SafeEscape kit?",
                  answer: "Store your SafeEscape kit in a cool, dry place that's easily accessible in case of an emergency. Avoid exposure to direct sunlight or extreme temperatures.",
                  author: "SafetyExpert",
                  date: "2023-05-15"
                },
                {
                  question: "Is training required to use SafeEscape equipment?",
                  answer: "While SafeEscape equipment is designed to be intuitive, we strongly recommend familiarizing yourself with the equipment before an emergency. We offer online training videos and in-person workshops for comprehensive instruction.",
                  author: "TrainingCoordinator",
                  date: "2023-05-10"
                }
              ].map((item, index) => (
                <Card key={index}>
                  <CardHeader>
                    <CardTitle>{item.question}</CardTitle>
                    <CardDescription>Asked on {item.date}</CardDescription>
                  </CardHeader>
                  <CardContent>
                    <p>{item.answer}</p>
                  </CardContent>
                  <CardFooter>
                    <p className="text-sm text-muted-foreground">Answered by {item.author}</p>
                  </CardFooter>
                </Card>
              ))}
            </div>
          </div>
        </section>

        <section id="contact" className="py-24 bg-secondary/20">
          <div className="container mx-auto px-4 text-center">
            <h2 className="text-4xl font-bold mb-8">Get in Touch</h2>
            <p className="mb-8 text-xl">Have more questions? Our support team is here to help.</p>
            <Button size="lg" className="bg-primary text-primary-foreground hover:bg-primary/90">
              Contact Support
              <MessageSquare className="ml-2 h-4 w-4" />
            </Button>
          </div>
        </section>
      </main>

      <footer className="bg-background text-foreground py-12">
        <div className="container mx-auto px-4">
          <div className="flex flex-col md:flex-row justify-between items-center">
            <div className="mb-8 md:mb-0">
              <h3 className="text-2xl font-bold mb-2">SafeEscape</h3>
              <p className="text-muted-foreground">Ensuring your safety when it matters most.</p>
            </div>
            <nav className="flex flex-wrap justify-center md:justify-end space-x-6">
              <a href="#" className="text-sm hover:text-primary">Privacy Policy</a>
              <a href="#" className="text-sm hover:text-primary">Terms of Service</a>
              <a href="#" className="text-sm hover:text-primary">FAQ</a>
              <a href="#" className="text-sm hover:text-primary">Sitemap</a>
            </nav>
          </div>
          <div className="mt-8 text-center text-sm text-muted-foreground">
            © {new Date().getFullYear()} SafeEscape. All rights reserved.
          </div>
        </div>
      </footer>
    </div>
  )
}