"use client";

import Image from "next/image";
import Link from "next/link";
import { MapPin, Mail, Phone, Facebook } from "lucide-react";

import { Button } from "@/components/ui/button";
import { Card, CardHeader, CardTitle, CardDescription, CardContent } from "@/components/ui/card";

export function Section() {
  const openMapsApp = () => {
    const coordinates = "500 Broadway East, Little Falls, MN 56345"; 
  
    const userAgent = navigator.userAgent || navigator.vendor;
  
    if (/android/i.test(userAgent)) {
      window.location.href = `google.navigation:q=${coordinates}`;
    } else if (/iPad|iPhone|iPod/.test(userAgent)) {
      console.log('Opening Apple Maps...');
      window.location.href = `https://maps.apple.com/?q=${encodeURIComponent(coordinates)}`;
    } else {
      window.open("https://maps.app.goo.gl/FQSY4ww5WZ9mATRP9", "_blank");
    }
  };
  
  return (
    <div className="min-h-screen">
      <section className="relative h-[600px]">
        <Image
          alt="Cafe interior"
          src="/images/coffee1.jpg"
          fill
          className="object-cover brightness-50"
        />
        <div className="absolute inset-0 flex flex-col items-center justify-center text-center">
          <div className="flex items-center justify-center p-8">
            <Image
              alt="Company Logo"
              src="/images/lucys.png"
              width={480}
              height={128}
              className="h-128 w-auto object-contain h-128"
            />
          </div>
          <h1 className="font-heading text-4xl md:text-6xl font-bold text-white mb-4">
            Welcome to Lucy&apos;s
          </h1>
          <p className="text-lg md:text-xl text-white mb-8 max-w-2xl mx-auto">Brewed Fresh, Just Around the Corner</p>
          <Button
            size="lg"
            asChild
            variant="outline"
            className="flex items-center gap-2 rounded-lg"
          >
            <Link href="/menu">
              <span>View Menu</span>
            </Link>
          </Button>
        </div>
      </section>
      <section className="py-24 px-6">
        <div className="max-w-6xl mx-auto grid grid-cols-1 md:grid-cols-3 gap-12">
          <Card className="text-center">
            <CardHeader>
              <CardTitle className="font-heading">Fresh Coffee</CardTitle>
              <CardDescription className="text-muted-foreground">
                Locally roasted beans, expertly prepared
              </CardDescription>
            </CardHeader>
            <CardContent>
              <Image
                alt="Coffee"
                src="/images/coffee2.jpg"
                width={200}
                height={200}
                className="mx-auto rounded-full"
              />
            </CardContent>
          </Card>
          <Card className="text-center">
            <CardHeader>
              <CardTitle className="font-heading">Hand Crafted Sandwiches</CardTitle>
              <CardDescription className="text-muted-foreground">
                Made fresh daily with premium ingredients 
              </CardDescription>
            </CardHeader>
            <CardContent>
              <Image
                alt="Sandwiches"
                src="/images/sandwich.jpg"
                width={200}
                height={200}
                className="mx-auto rounded-full"
              />
            </CardContent>
          </Card>
          <Card className="text-center">
            <CardHeader>
              <CardTitle className="font-heading">Cozy Atmosphere</CardTitle>
              <CardDescription className="text-muted-foreground">
                Perfect for work or relaxation
              </CardDescription>
            </CardHeader>
            <CardContent>
              <Image
                alt="Cafe interior"
                src="/images/interior.jpg"
                width={200}
                height={200}
                className="mx-auto rounded-full"
              />
            </CardContent>
          </Card>
        </div>
      </section>
      <section className="bg-muted py-16 px-6">
        <div className="max-w-4xl mx-auto text-center">
          <h2 className="font-heading text-3xl font-bold mb-8">Visit Us Today</h2>
          <p className="text-muted-foreground mb-6">500 Broadway East, Little Falls, MN 56345</p>
          <p className="text-muted-foreground mb-6">Open Monday - Saturday: 7am -2pm</p>
          <div className="flex justify-center">
            <Button
              variant="outline"
              size="sm"
              className="flex gap-1"
              onClick={openMapsApp} // Add onClick to open the maps app
            >
              <MapPin className="h-3 w-3" />
              <span className="text-muted-foreground text-xs">Get Directions</span>
            </Button>
          </div>
        </div>
      </section>
      <section className="py-16 px-6">
        <div className="max-w-4xl mx-auto text-center">
          <h2 className="font-heading text-3xl font-bold mb-8">Contact Us</h2>
          <div className="flex flex-col items-center gap-4">
            <Link href="mailto:lucys56344@gmail.com">
            <div className="flex items-center gap-2">
              <Mail className="h-5 w-5 text-muted-foreground" />
              <p className="text-muted-foreground">lucys56345@gmail.com</p>
            </div>
            </Link>
            <Link href="tel:3204140400">
            <div className="flex items-center gap-2">
              <Phone className="h-5 w-5 text-muted-foreground" />
              <p className="text-muted-foreground">(320) 414-0400</p>
            </div>
            </Link>
          </div>
        </div>
        <div className="flex items-center justify-center p-4">
          <a
            href="https://www.facebook.com/people/Lucys/61572709646000/"
            target="_blank"
            rel="noopener noreferrer"
            className="inline-flex items-center gap-2 px-4 py-2 text-sm font-medium transition-colors rounded-md hover:bg-accent hover:text-accent-foreground bg-background"
          >
            <Facebook className="w-5 h-5" />
            <span>Follow us on Facebook</span>
          </a>
        </div>
      </section>
      <footer className="bg-background border-t py-8 px-6">
        <div className="max-w-6xl mx-auto text-center">
          <p className="text-muted-foreground">© 2025 Lucys. All rights reserved.</p>
        </div>
      </footer>
    </div>
  );
}