"use client";

import { ThemeProvider } from "@/providers/themeProvider/ThemeProvider";
import NavbarStyleFullscreen from "@/components/navbar/NavbarStyleFullscreen/NavbarStyleFullscreen";
import ContactText from "@/components/sections/contact/ContactText";
import FooterLogoReveal from "@/components/sections/footer/FooterLogoReveal";
import { Mail, Phone, MapPin, Clock } from "lucide-react";
import Link from "next/link";

export default function ContactPage() {
  const navItems = [
    { name: "Ana Sayfa", id: "/" },
    { name: "Öğretmenler", id: "/teachers" },
    { name: "Etkinlikler", id: "/events" },
    { name: "Çalışma Programı", id: "/schedule" },
  ];

  return (
    <ThemeProvider
      defaultButtonVariant="text-shift"
      defaultTextAnimation="entrance-slide"
      borderRadius="rounded"
      contentWidth="compact"
      sizing="mediumSizeLargeTitles"
      background="circleGradient"
      cardStyle="layered-gradient"
      primaryButtonStyle="shadow"
      secondaryButtonStyle="layered"
      headingFontWeight="light"
    >
      {/* Breadcrumb */}
      <nav className="hidden md:flex items-center gap-2 p-4 text-sm text-gray-600" aria-label="Breadcrumb">
        <Link href="/" className="hover:text-primary-cta">Ana Sayfa</Link>
        <span>/</span>
        <span className="text-gray-900 font-semibold">İletişim</span>
      </nav>

      <div id="nav" data-section="nav">
        <NavbarStyleFullscreen
          navItems={navItems}
          brandName="Öğretmen Platformu"
          bottomLeftText="Eğitim Topluluğu"
          bottomRightText="info@platform.com"
        />
      </div>

      <div className="py-12 px-4 md:py-20">
        <div className="max-w-6xl mx-auto">
          {/* Header */}
          <div className="text-center mb-12 md:mb-16">
            <h1 className="text-4xl md:text-5xl font-bold text-foreground mb-4">Bize Ulaşın</h1>
            <p className="text-lg text-gray-600 max-w-2xl mx-auto">
              Sorularınız mı var? Destek ekibimiz size yardımcı olmaktan mutluluk duyacaktır.
            </p>
          </div>

          {/* Contact Info Cards */}
          <div className="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-4 gap-4 mb-12">
            <div className="bg-card p-6 rounded-lg border border-border">
              <div className="flex items-center gap-3 mb-4">
                <Mail className="text-primary-cta" size={24} />
                <h3 className="font-semibold text-foreground">Email</h3>
              </div>
              <p className="text-sm text-gray-600">info@platform.com</p>
              <p className="text-xs text-gray-500 mt-2">Yanıt süresi: 2 saat</p>
            </div>

            <div className="bg-card p-6 rounded-lg border border-border">
              <div className="flex items-center gap-3 mb-4">
                <Phone className="text-primary-cta" size={24} />
                <h3 className="font-semibold text-foreground">Telefon</h3>
              </div>
              <p className="text-sm text-gray-600">+90 (212) 555-0123</p>
              <p className="text-xs text-gray-500 mt-2">Haftada 7 gün açık</p>
            </div>

            <div className="bg-card p-6 rounded-lg border border-border">
              <div className="flex items-center gap-3 mb-4">
                <MapPin className="text-primary-cta" size={24} />
                <h3 className="font-semibold text-foreground">Adres</h3>
              </div>
              <p className="text-sm text-gray-600">İstanbul, Türkiye</p>
              <p className="text-xs text-gray-500 mt-2">Merkez ofis</p>
            </div>

            <div className="bg-card p-6 rounded-lg border border-border">
              <div className="flex items-center gap-3 mb-4">
                <Clock className="text-primary-cta" size={24} />
                <h3 className="font-semibold text-foreground">Saatler</h3>
              </div>
              <p className="text-sm text-gray-600">24/7 Müşteri Desteği</p>
              <p className="text-xs text-gray-500 mt-2">Her zaman buradayız</p>
            </div>
          </div>

          {/* Contact Form Section */}
          <div id="contact-form" data-section="contact-form" className="mt-16">
            <ContactText
              text="Mesajınızı bize gönderin ve en kısa sürede yanıt alalım."
              background={{ variant: "plain" }}
              useInvertedBackground={false}
              buttons={[{ text: "İletişim Formu", href: "https://example.com/contact" }]}
            />
          </div>
        </div>
      </div>

      <div id="footer" data-section="footer">
        <FooterLogoReveal
          logoText="Öğretmen Platformu"
          leftLink={{
            text: "Gizlilik Politikası",            href: "#"
          }}
          rightLink={{
            text: "Kullanım Şartları",            href: "#"
          }}
        />
      </div>
    </ThemeProvider>
  );
}
