"use client";

import { ThemeProvider } from "@/providers/themeProvider/ThemeProvider";
import NavbarStyleFullscreen from "@/components/navbar/NavbarStyleFullscreen/NavbarStyleFullscreen";
import ContactText from "@/components/sections/contact/ContactText";
import FooterLogoEmphasis from "@/components/sections/footer/FooterLogoEmphasis";
import Link from "next/link";

export default function ContactPage() {
  return (
    <ThemeProvider
      defaultButtonVariant="icon-arrow"
      defaultTextAnimation="background-highlight"
      borderRadius="rounded"
      contentWidth="mediumSmall"
      sizing="largeSmallSizeLargeTitles"
      background="circleGradient"
      cardStyle="inset"
      primaryButtonStyle="diagonal-gradient"
      secondaryButtonStyle="glass"
      headingFontWeight="light"
    >
      <div id="nav" data-section="nav">
        <NavbarStyleFullscreen
          brandName="DEZORT"
          navItems={[
            { name: "Domů", id: "/" },
            { name: "Služby", id: "/sluzby" },
            { name: "Portfolio", id: "/portfolio" },
            { name: "O nás", id: "/o-nas" },
            { name: "Kontakt", id: "/kontakt" },
          ]}
          bottomLeftText="Strašice, Plzeňsko"
          bottomRightText="info@kovovyroba.eu"
        />
      </div>

      <div id="cta" data-section="cta">
        <ContactText
          text="Máte projekt, který vyžaduje přesnost a kvalitu? Kontaktujte nás ještě dnes pro bezplatnou konzultaci a nabídku."
          animationType="background-highlight"
          background={{
            variant: "plain"}}
          useInvertedBackground={false}
          buttons={[
            {
              text: "Poslat poptávku",              href: "mailto:info@kovovyroba.eu"},
            {
              text: "Zavolat +420 XXX XXX XXX",              href: "tel:+420XXXXXXXXX"},
          ]}
        />
      </div>

      <div id="contact-form" data-section="contact-form" className="mx-auto px-4 md:px-6 py-20">
        <div className="w-full md:w-3/4 mx-auto">
          <h2 className="text-4xl font-light mb-8 text-foreground">Kontaktní formulář</h2>
          
          <form className="space-y-6">
            <div className="grid grid-cols-1 md:grid-cols-2 gap-6">
              <div>
                <label htmlFor="name" className="block text-sm font-medium text-foreground mb-2">
                  Jméno *
                </label>
                <input
                  type="text"
                  id="name"
                  name="name"
                  required
                  className="w-full px-4 py-3 border border-card bg-accent text-foreground rounded-lg focus:outline-none focus:ring-2 focus:ring-primary-cta"
                  placeholder="Vaše jméno"
                />
              </div>
              <div>
                <label htmlFor="company" className="block text-sm font-medium text-foreground mb-2">
                  Společnost *
                </label>
                <input
                  type="text"
                  id="company"
                  name="company"
                  required
                  className="w-full px-4 py-3 border border-card bg-accent text-foreground rounded-lg focus:outline-none focus:ring-2 focus:ring-primary-cta"
                  placeholder="Název firmy"
                />
              </div>
            </div>

            <div className="grid grid-cols-1 md:grid-cols-2 gap-6">
              <div>
                <label htmlFor="email" className="block text-sm font-medium text-foreground mb-2">
                  Email *
                </label>
                <input
                  type="email"
                  id="email"
                  name="email"
                  required
                  className="w-full px-4 py-3 border border-card bg-accent text-foreground rounded-lg focus:outline-none focus:ring-2 focus:ring-primary-cta"
                  placeholder="vase@email.com"
                />
              </div>
              <div>
                <label htmlFor="phone" className="block text-sm font-medium text-foreground mb-2">
                  Telefon
                </label>
                <input
                  type="tel"
                  id="phone"
                  name="phone"
                  className="w-full px-4 py-3 border border-card bg-accent text-foreground rounded-lg focus:outline-none focus:ring-2 focus:ring-primary-cta"
                  placeholder="+420 XXX XXX XXX"
                />
              </div>
            </div>

            <div>
              <label htmlFor="service" className="block text-sm font-medium text-foreground mb-2">
                Jakou službu vás zajímá? *
              </label>
              <select
                id="service"
                name="service"
                required
                className="w-full px-4 py-3 border border-card bg-accent text-foreground rounded-lg focus:outline-none focus:ring-2 focus:ring-primary-cta"
              >
                <option value="">-- Vyberte službu --</option>
                <option value="industrial">Průmyslová řešení</option>
                <option value="veterinary">Veterinární technika</option>
                <option value="sports">Sportovní infrastruktura</option>
                <option value="custom">Speciální projekt</option>
              </select>
            </div>

            <div>
              <label htmlFor="message" className="block text-sm font-medium text-foreground mb-2">
                Vaše zpráva *
              </label>
              <textarea
                id="message"
                name="message"
                required
                rows={6}
                className="w-full px-4 py-3 border border-card bg-accent text-foreground rounded-lg focus:outline-none focus:ring-2 focus:ring-primary-cta resize-none"
                placeholder="Popište svůj projekt a požadavky..."
              ></textarea>
            </div>

            <div>
              <button
                type="submit"
                className="w-full md:w-auto px-8 py-3 bg-primary-cta text-primary-cta-text font-medium rounded-lg hover:opacity-90 transition-opacity"
              >
                Odeslat poptávku
              </button>
            </div>
          </form>
        </div>
      </div>

      <div id="contact-info" data-section="contact-info" className="mx-auto px-4 md:px-6 py-20 bg-secondary-cta">
        <div className="grid grid-cols-1 md:grid-cols-3 gap-12 w-full max-w-[1200px] mx-auto">
          <div>
            <h3 className="text-xl font-medium text-foreground mb-4">Kontaktní údaje</h3>
            <p className="text-foreground mb-2">
              <strong>Adresa:</strong><br />
              DEZORT Kovovýroba<br />
              Strašice, Plzeňsko<br />
              Česká Republika
            </p>
          </div>

          <div>
            <h3 className="text-xl font-medium text-foreground mb-4">Komunikace</h3>
            <p className="text-foreground mb-2">
              <strong>Email:</strong><br />
              <a href="mailto:info@kovovyroba.eu" className="text-primary-cta hover:underline">
                info@kovovyroba.eu
              </a>
            </p>
            <p className="text-foreground">
              <strong>Telefon:</strong><br />
              <a href="tel:+420XXXXXXXXX" className="text-primary-cta hover:underline">
                +420 XXX XXX XXX
              </a>
            </p>
          </div>

          <div>
            <h3 className="text-xl font-medium text-foreground mb-4">Pracovní doba</h3>
            <p className="text-foreground">
              <strong>Pondělí - Pátek:</strong><br />
              8:00 - 16:30
            </p>
            <p className="text-foreground mt-2">
              <strong>Sobota - Neděle:</strong><br />
              Zavřeno
            </p>
          </div>
        </div>
      </div>

      <div id="footer" data-section="footer">
        <FooterLogoEmphasis
          logoText="DEZORT"
          columns={[
            {
              items: [
                { label: "Domů", href: "/" },
                { label: "O nás", href: "/o-nas" },
                { label: "Služby", href: "/sluzby" },
              ],
            },
            {
              items: [
                { label: "Portfolio", href: "/portfolio" },
                { label: "Kontakt", href: "/kontakt" },
                { label: "Dotazy", href: "mailto:info@kovovyroba.eu" },
              ],
            },
            {
              items: [
                { label: "Strašice, Plzeňsko", href: "#" },
                { label: "info@kovovyroba.eu", href: "mailto:info@kovovyroba.eu" },
                { label: "+420 XXX XXX XXX", href: "tel:+420XXXXXXXXX" },
              ],
            },
            {
              items: [
                { label: "Podmínky služeb", href: "#" },
                { label: "Ochrana osobních údajů", href: "#" },
                { label: "Cookies", href: "#" },
              ],
            },
          ]}
        />
      </div>
    </ThemeProvider>
  );
}