"use client";

import { Container } from "@/components/container";
import { Heading } from "@/components/heading";
import { MapPin, Clock, Phone, Mail } from "lucide-react";

export function Info() {
  return (
    <section className="py-20 bg-stone-900 text-stone-100">
      <Container>
        <div className="grid md:grid-cols-3 gap-12">
          {/* Location */}
          <div className="text-center md:text-left">
            <div className="flex justify-center md:justify-start mb-4">
              <div className="p-3 bg-amber-600/20 rounded-full text-amber-500">
                <MapPin className="w-6 h-6" />
              </div>
            </div>
            <h3 className="text-xl font-serif mb-4 text-amber-50">Location</h3>
            <p className="text-stone-400 mb-2">123 Avenue des Champs-Élysées</p>
            <p className="text-stone-400">75008 Paris, France</p>
          </div>

          {/* Hours */}
          <div className="text-center md:text-left">
            <div className="flex justify-center md:justify-start mb-4">
              <div className="p-3 bg-amber-600/20 rounded-full text-amber-500">
                <Clock className="w-6 h-6" />
              </div>
            </div>
            <h3 className="text-xl font-serif mb-4 text-amber-50">Opening Hours</h3>
            <div className="text-stone-400 space-y-1">
              <p><span className="text-stone-300 w-24 inline-block">Mon - Thu:</span> 18:00 - 23:00</p>
              <p><span className="text-stone-300 w-24 inline-block">Fri - Sat:</span> 17:00 - 00:00</p>
              <p><span className="text-stone-300 w-24 inline-block">Sunday:</span> Closed</p>
            </div>
          </div>

          {/* Contact */}
          <div className="text-center md:text-left">
            <div className="flex justify-center md:justify-start mb-4">
              <div className="p-3 bg-amber-600/20 rounded-full text-amber-500">
                <Phone className="w-6 h-6" />
              </div>
            </div>
            <h3 className="text-xl font-serif mb-4 text-amber-50">Contact</h3>
            <p className="text-stone-400 mb-2 flex items-center justify-center md:justify-start gap-2">
              <Phone className="w-4 h-4" /> +33 1 23 45 67 89
            </p>
            <p className="text-stone-400 flex items-center justify-center md:justify-start gap-2">
              <Mail className="w-4 h-4" /> reservations@lumiere.com
            </p>
          </div>
        </div>
      </Container>
    </section>
  );
}