"use client";

import { ThemeProvider } from "@/providers/themeProvider/ThemeProvider";
import ReactLenis from "lenis/react";
import NavbarStyleApple from "@/components/navbar/NavbarStyleApple/NavbarStyleApple";
import ContactCTA from "@/components/sections/contact/ContactCTA";
import FaqSplitText from "@/components/sections/faq/FaqSplitText";
import { AtSign, Phone } from "lucide-react";
import Textarea from "@/components/form/Textarea";
import { useState } from "react";
import FooterLogoEmphasis from "@/components/sections/footer/FooterLogoEmphasis";

export default function ContactPage() {
  const [name, setName] = useState("");
  const [email, setEmail] = useState("");
  const [message, setMessage] = useState("");

  const handleSubmit = (e: React.FormEvent) => {
    e.preventDefault();
    console.log("Contact form submitted:", { name, email, message });
    alert("Bedankt voor uw bericht! We nemen spoedig contact met u op.");
    setName("");
    setEmail("");
    setMessage("");
  };

  const navItems = [
    {
      name: "Home",      id: "/"
    },
    {
      name: "Over Pyk",      id: "/over-pyk"
    },
    {
      name: "Webshop",      id: "/shop"
    },
    {
      name: "Events",      id: "/events"
    },
    {
      name: "Blog",      id: "/blog"
    },
    {
      name: "Relatiegeschenken",      id: "/relatiegeschenken"
    },
    {
      name: "Contact",      id: "/contact"
    }
  ];

  return (
    <ThemeProvider
      defaultButtonVariant="text-stagger"
      defaultTextAnimation="background-highlight"
      borderRadius="soft"
      contentWidth="smallMedium"
      sizing="mediumLargeSizeMediumTitles"
      background="fluid"
      cardStyle="subtle-shadow"
      primaryButtonStyle="shadow"
      secondaryButtonStyle="solid"
      headingFontWeight="semibold"
    >
      <ReactLenis root>
        <div id="nav" data-section="nav">
          <NavbarStyleApple navItems={navItems} brandName="Pyk Slyterij" />
        </div>

        <div id="contact-intro" data-section="contact-intro">
          <ContactCTA
            tag="Contact"
            title="Kom langs, bel of mail ons!"
            description="We staan klaar om u te helpen met al uw vragen over onze producten, evenementen of De Wynkantine. U kunt ook het onderstaande contactformulier invullen."
            buttons={[
              {
                text: "Instagram",                href: "https://instagram.com/pykslyterij",                onClick: () =>
                  window.open("https://instagram.com/pykslyterij", "_blank"),
              },
              {
                text: "Facebook",                href: "https://facebook.com/pykslyterij",                onClick: () =>
                  window.open("https://facebook.com/pykslyterij", "_blank"),
              },
            ]}
            background={{
              variant: "radial-gradient"
            }}
            useInvertedBackground={true}
          />
        </div>

        <div
          id="contact-details"
          data-section="contact-details"
          className="py-16 md:py-24 lg:py-32 px-4 sm:px-6 lg:px-8 bg-background"
        >
          <div className="max-w-7xl mx-auto grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-12">
            <div>
              <h3 className="text-2xl font-semibold mb-4 text-foreground">
                Algemene Contactgegevens
              </h3>
              <p className="flex items-center gap-2 text-foreground/80 mb-2">
                <AtSign className="h-5 w-5 text-accent" />
                <span>info@pykslyterij.nl</span>
              </p>
              <p className="flex items-center gap-2 text-foreground/80 mb-2">
                <Phone className="h-5 w-5 text-accent" />
                <span>Regulier: +31 570 123456</span>
              </p>
              <p className="flex items-center gap-2 text-foreground/80 mb-4">
                <Phone className="h-5 w-5 text-accent" />
                <span>Horeca: +31 570 654321</span>
              </p>
              <h3 className="text-2xl font-semibold mb-4 text-foreground">
                Adres
              </h3>
              <p className="text-foreground/80">Hoofdstraat 123</p>
              <p className="text-foreground/80">7411 AB Deventer</p>
            </div>

            <div>
              <h3 className="text-2xl font-semibold mb-4 text-foreground">
                Openingstijden Pyk Slyterij
              </h3>
              <ul className="list-none space-y-2 text-foreground/80">
                <li>Maandag: Gesloten</li>
                <li>Dinsdag - Vrijdag: 10:00 - 18:00</li>
                <li>Zaterdag: 10:00 - 17:00</li>
                <li>Zondag: Gesloten</li>
              </ul>
            </div>

            <div>
              <h3 className="text-2xl font-semibold mb-4 text-foreground">
                Openingstijden De Wynkantine
              </h3>
              <ul className="list-none space-y-2 text-foreground/80">
                <li>Maandag: Gesloten</li>
                <li>Dinsdag - Donderdag: 16:00 - 22:00</li>
                <li>Vrijdag - Zaterdag: 16:00 - 00:00</li>
                <li>Zondag: Gesloten</li>
              </ul>
            </div>
          </div>
        </div>

        <div
          id="contact-form-map"
          data-section="contact-form-map"
          className="py-16 md:py-24 lg:py-32 px-4 sm:px-6 lg:px-8 bg-background-accent"
        >
          <div className="max-w-7xl mx-auto grid grid-cols-1 lg:grid-cols-2 gap-12">
            <div>
              <h3 className="text-3xl font-bold mb-6 text-foreground">
                Stuur ons een bericht
              </h3>
              <form onSubmit={handleSubmit} className="space-y-6">
                <div>
                  <label
                    htmlFor="name"
                    className="block text-sm font-medium text-foreground mb-2"
                  >
                    Naam
                  </label>
                  <input
                    type="text"
                    id="name"
                    value={name}
                    onChange={(e) => setName(e.target.value)}
                    className="block w-full rounded-md border-0 py-2 text-foreground shadow-sm ring-1 ring-inset ring-card placeholder:text-foreground/50 focus:ring-2 focus:ring-inset focus:ring-primary-cta sm:text-sm sm:leading-6 bg-card"
                    placeholder="Uw naam"
                    required
                  />
                </div>
                <div>
                  <label
                    htmlFor="email"
                    className="block text-sm font-medium text-foreground mb-2"
                  >
                    E-mailadres
                  </label>
                  <input
                    type="email"
                    id="email"
                    value={email}
                    onChange={(e) => setEmail(e.target.value)}
                    className="block w-full rounded-md border-0 py-2 text-foreground shadow-sm ring-1 ring-inset ring-card placeholder:text-foreground/50 focus:ring-2 focus:ring-inset focus:ring-primary-cta sm:text-sm sm:leading-6 bg-card"
                    placeholder="Uw e-mailadres"
                    required
                  />
                </div>
                <div>
                  <label
                    htmlFor="message"
                    className="block text-sm font-medium text-foreground mb-2"
                  >
                    Bericht
                  </label>
                  <Textarea
                    value={message}
                    onChange={setMessage}
                    placeholder="Uw bericht"
                    rows={5}
                    required
                    className="block w-full rounded-md border-0 py-2 text-foreground shadow-sm ring-1 ring-inset ring-card placeholder:text-foreground/50 focus:ring-2 focus:ring-inset focus:ring-primary-cta sm:text-sm sm:leading-6 bg-card"
                  />
                </div>
                <button
                  type="submit"
                  className="inline-flex items-center justify-center rounded-md text-sm font-medium transition-colors focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-offset-2 disabled:opacity-50 disabled:pointer-events-none data-[state=open]:bg-primary-cta h-10 px-4 py-2 bg-primary-cta text-primary-cta-foreground hover:bg-primary-cta/90"
                >
                  Verzenden
                </button>
              </form>
            </div>
            <div className="w-full h-96 rounded-lg overflow-hidden shadow-lg">
              <iframe
                src="https://www.google.com/maps/embed?pb=!1m18!1m12!1m3!1d2449.610547701389!2d6.155705315998634!3d52.25301397976865!2m3!1f0!2f0!3f0!3m2!1i1024!2i768!4f13.1!3m3!1m2!1s0x47b86b4a2e5d7633%3A0x6a0c0b8b0e8b0e8b!2sDeventer!5e0!3m2!1sen!2snl!4v1678891234567!5m2!1sen!2snl"
                width="100%"
                height="100%"
                style={{ border: 0 }}
                allowFullScreen={true}
                loading="lazy"
                referrerPolicy="no-referrer-when-downgrade"
                title="Locatie van Pyk Slyterij in Deventer"
              ></iframe>
            </div>
          </div>
        </div>

        <div id="faq" data-section="faq">
          <FaqSplitText
            sideTitle="Veelgestelde Vragen"
            sideDescription="Heeft u nog vragen? Bekijk onze veelgestelde vragen hieronder of neem direct contact met ons op."
            faqsAnimation="slide-up"
            useInvertedBackground={true}
            faqs={[
              {
                id: "faq-1",                title: "Waar kan ik jullie producten online kopen?",                content:
                  "U kunt onze uitgebreide selectie wijnen, sterke dranken en delicatessen vinden in onze webshop op /shop."},
              {
                id: "faq-2",                title: "Organiseren jullie proeverijen of evenementen?",                content:
                  "Jazeker! We organiseren regelmatig proeverijen en masterclasses. Bekijk onze evenementenkalender op /events voor meer informatie."},
              {
                id: "faq-3",                title: "Wat is De Wynkantine?",                content:
                  "De Wynkantine is onze sfeervolle bar waar u kunt genieten van een zorgvuldig samengestelde selectie wijnen, bieren en cocktails, perfect te combineren met kleine gerechtjes. Ideaal voor een gezellige avond uit!"},
              {
                id: "faq-4",                title:
                  "Bieden jullie zakelijke diensten aan, zoals relatiegeschenken?",                content:
                  "Absoluut! Wij helpen u graag met unieke relatiegeschenken op maat voor uw zakelijke partners of evenementen. Meer informatie vindt u op /relatiegeschenken."},
            ]}
          />
        </div>

        <div id="footer" data-section="footer">
          <FooterLogoEmphasis
            columns={[
              {
                items: [
                  {
                    label: "Over Pyk",                    href: "/over-pyk"
                  },
                  {
                    label: "Ons Team",                    href: "/over-pyk#our-team"
                  },
                  {
                    label: "De Wynkantine",                    href: "/wynkantine"
                  },
                ],
              },
              {
                items: [
                  {
                    label: "Webshop",                    href: "/shop"
                  },
                  {
                    label: "Wijnen",                    href: "/shop?category=wijn"
                  },
                  {
                    label: "Sterke Dranken",                    href: "/shop?category=sterkedranken"
                  },
                  {
                    label: "Delicatessen",                    href: "/shop?category=delicatessen"
                  },
                ],
              },
              {
                items: [
                  {
                    label: "Evenementen",                    href: "/events"
                  },
                  {
                    label: "Blog",                    href: "/blog"
                  },
                  {
                    label: "Relatiegeschenken",                    href: "/relatiegeschenken"
                  },
                  {
                    label: "Contact",                    href: "/contact"
                  },
                ],
              },
              {
                items: [
                  {
                    label: "Instagram",                    href: "https://instagram.com/pykslyterij"
                  },
                  {
                    label: "Facebook",                    href: "https://facebook.com/pykslyterij"
                  },
                ],
              },
            ]}
            logoText="Pyk Slyterij"
          />
        </div>
      </ReactLenis>
    </ThemeProvider>
  );
}