import Image from "next/image";
import Link from "next/link";
import {
    ArrowRight,
    Circle,
    Camera,
    Video,
    Instagram,
    TrendingUp
} from "lucide-react";
import Footer from "@/components/Footer";
import { Metadata } from "next";

export const metadata: Metadata = {
    title: "Hakkımızda | Muğla Dijital Medya & Prodüksiyon Ajansı",
    description: "Muğla Dijital Medya Ajansı'nın hikayesini, değerlerini ve vizyonunu keşfedin. Drone çekimi, video prodüksiyon, sosyal medya yönetimi ve reklam hizmetleri.",
    alternates: {
        canonical: "/about",
    },
    openGraph: {
        title: "Hakkımızda | Muğla Dijital",
        description: "Muğla'nın dijital çözüm ortağı.",
        url: "https://mugladijitalmedya.com/about",
    }
};

const timeline = [
    { year: "2020", title: "Ajans Kuruldu", desc: "Muğla'da küçük bir ekiple yola çıktık. Drone çekimleri ve sosyal medya yönetimi ile ilk projelerimizi tamamladık." },
    { year: "2021", title: "İlk Büyük Projeler", desc: "Bölgedeki oteller ve işletmeler için profesyonel tanıtım çekimleri gerçekleştirdik. Müşteri portföyümüz hızla büyüdü." },
    { year: "2023", title: "Dijital Genişleme", desc: "Reklam yönetimi, SEO ve web tasarım hizmetlerini de ekleyerek tam kapsamlı bir dijital ajansa dönüştük." },
    { year: "2025", title: "Sektörde Güçlü Konum", desc: "150+ mutlu müşteri, 500+ tamamlanmış proje ile Muğla ve çevresinin güvenilir dijital çözüm ortağı olduk." }
];

const highlights = [
    { number: "500+", label: "Tamamlanan Proje" },
    { number: "150+", label: "Mutlu Müşteri" },
    { number: "5+", label: "Yıllık Deneyim" },
    { number: "9", label: "Hizmet Alanı" }
];

export default function AboutPage() {
    return (
        <main className="min-h-screen bg-[#f5f5f0] text-black">

            {/* Hero Section */}
            <section className="pt-48 pb-24 px-6 md:px-12">
                <div className="max-w-7xl mx-auto">
                    <div className="flex justify-between items-center mb-6">
                        <span className="text-[10px] tracking-[0.2em] uppercase text-black/40">Hakkımızda</span>
                        <span className="text-[10px] tracking-[0.1em] text-black/20 italic">Son Güncelleme: 15 Mayıs 2026</span>
                    </div>
                    <h1 className="editorial-headline text-4xl md:text-6xl lg:text-[5.5rem] text-black reveal opacity-0">
                        Muğla&apos;nın Dijital<br />
                        Hikaye <span className="text-primary">Mimarları.</span>
                    </h1>
                </div>
            </section>

            {/* Stats Bar - Editorial Style */}
            <section className="border-y border-black/10">
                <div className="max-w-7xl mx-auto grid grid-cols-2 md:grid-cols-4">
                    {highlights.map((item, idx) => (
                        <div key={idx} className={`py-12 px-8 text-center ${idx < 3 ? 'md:border-r border-black/10' : ''} ${idx % 2 === 0 ? 'border-r md:border-r-0 md:border-r border-black/10' : ''}`}>
                            <div className="text-4xl font-black text-primary mb-2">{item.number}</div>
                            <div className="text-[10px] font-bold uppercase tracking-widest text-black/40">{item.label}</div>
                        </div>
                    ))}
                </div>
            </section>

            {/* Mission Section - Editorial Layout */}
            <section className="py-24 px-6 md:px-12 border-b border-black/10">
                <div className="max-w-7xl mx-auto grid grid-cols-1 lg:grid-cols-12 gap-16 items-center">
                    <div className="lg:col-span-7 space-y-10">
                        <span className="text-[10px] tracking-[0.2em] uppercase text-black/40 block">Misyonumuz</span>
                        <h2 className="editorial-headline text-3xl md:text-5xl text-black uppercase">
                            Markanızı Havadan ve<br /> Yerden <span className="text-primary">Kurguluyoruz.</span>
                        </h2>
                        <div className="space-y-6 max-w-2xl">
                            <p className="text-black/60 text-[14px] leading-relaxed">
                                <strong>Muğla Dijital Medya Ajansı</strong>, Muğla merkezli profesyonel bir dijital medya ve prodüksiyon ajansıdır. İşletmelerin dijital dünyada güçlü bir şekilde var olmasını sağlamak amacıyla; profesyonel drone çekimleri, kurumsal fotoğrafçılık ve video prodüksiyon hizmetleriyle markaların görsel kimliğini inşa ediyoruz.
                            </p>
                            <p className="text-black/60 text-[14px] leading-relaxed">
                                Stratejik sosyal medya yönetimi, Google ve Meta reklam kampanyaları, SEO optimizasyonu ve modern web tasarım çözümlerimizle markanızın dijital varlığını güçlendiriyoruz. Ayrıca düğün ve özel gün çekimleriyle en değerli anlarınızı profesyonel kurgularla ölümsüzleştiriyoruz.
                            </p>
                        </div>
                        <Link href="/services" className="button-primary group">
                            Hizmetlerimiz
                            <ArrowRight className="w-3 h-3 group-hover:translate-x-1 transition-transform" />
                        </Link>
                    </div>
                    <div className="lg:col-span-5 relative">
                        <div className="aspect-[4/5] relative overflow-hidden border border-black/10 grayscale hover:grayscale-0 transition-all duration-1000">
                            <Image src="https://images.unsplash.com/photo-1473968512647-3e447244af8f?q=80&w=800" alt="Muğla Dijital Profesyonel Drone Çekimi ve Havadan Görüntüleme Hizmetleri" fill className="object-cover" />
                        </div>
                        {/* Diagonal decoration */}
                        <div className="absolute -bottom-8 -right-8 w-32 h-32 border-r border-b border-black/10 hidden md:block" />
                    </div>
                </div>
            </section>

            {/* Core Values - Editorial Bento */}
            <section className="py-24 px-6 md:px-12 border-b border-black/10 bg-black/[0.02]">
                <div className="max-w-7xl mx-auto">
                    <div className="mb-16">
                        <span className="text-[10px] tracking-[0.2em] uppercase text-black/40 block mb-4">Değerlerimiz</span>
                        <h2 className="editorial-headline text-3xl md:text-5xl text-black uppercase">Temel İlkelerimiz</h2>
                    </div>

                    <div className="grid grid-cols-1 md:grid-cols-3 border-t border-l border-black/10">
                        {[
                            {
                                title: "Profesyonel Prodüksiyon",
                                desc: "Drone çekimi ve prodüksiyon alanında en son teknolojiyle markanız için unutulmaz görsel içerikler üretiyoruz.",
                                icon: Camera
                            },
                            {
                                title: "Dijital Büyüme",
                                desc: "Sosyal medya yönetimi ve reklam stratejileri ile markanızın sürdürülebilir şekilde büyümesini sağlıyoruz.",
                                icon: TrendingUp
                            },
                            {
                                title: "Müşteri Odaklılık",
                                desc: "Her projeyi müşterimizin ihtiyaçlarına özel tasarlıyor, şeffaf iletişim ve sonuç odaklı çalışma prensibiyle ilerliyoruz.",
                                icon: Circle
                            }
                        ].map((v, idx) => (
                            <div key={idx} className="p-10 border-r border-b border-black/10 relative group hover:bg-black/[0.01] transition-colors overflow-hidden">
                                <div className="w-10 h-10 border border-black/10 flex items-center justify-center text-primary mb-8">
                                    <v.icon className="w-5 h-5" />
                                </div>
                                <h3 className="editorial-headline text-xl text-black mb-4 uppercase">{v.title}</h3>
                                <p className="text-[12px] text-black/40 leading-relaxed font-medium">
                                    {v.desc}
                                </p>
                                {/* Subtle diagonal on hover */}
                                <div className="absolute top-0 right-0 w-16 h-16 opacity-0 group-hover:opacity-100 transition-opacity">
                                    <div className="absolute top-0 right-0 w-px h-24 bg-black/5 rotate-[-45deg] origin-top-right" />
                                </div>
                            </div>
                        ))}
                    </div>
                </div>
            </section>


            {/* FAQ Section - AI Extraction Optimized */}
            <section className="py-24 px-6 md:px-12 border-b border-black/10">
                <div className="max-w-7xl mx-auto">
                    <div className="mb-16">
                        <span className="text-[10px] tracking-[0.2em] uppercase text-black/40 block mb-4">Destek</span>
                        <h2 className="editorial-headline text-3xl md:text-5xl text-black uppercase">Sıkça Sorulan Sorular</h2>
                    </div>

                    <div className="grid grid-cols-1 md:grid-cols-2 gap-x-16 gap-y-12">
                        {[
                            {
                                q: "Muğla Dijital Medya Ajansı nedir?",
                                a: "Muğla Dijital, Muğla merkezli profesyonel bir dijital medya ajansıdır. Drone çekimi, video prodüksiyon, sosyal medya yönetimi, SEO ve dijital reklam yönetimi (Google/Meta) alanlarında markalara yaratıcı ve sonuç odaklı çözümler sunuyoruz."
                            },
                            {
                                q: "Drone çekimi hizmetleriniz neleri kapsıyor?",
                                a: "Drone çekimi hizmetlerimiz; otel tanıtım filmleri, gayrimenkul çekimleri, arazi ve arsa havadan görüntüleme, etkinlik ve düğün çekimlerini kapsamaktadır. Tüm çekimler profesyonel lisanslı pilotlarımız ve 4K/5.4K çözünürlüklü ekipmanlarımızla gerçekleştirilir."
                            },
                            {
                                q: "Sosyal medya yönetimi süreciniz nasıl işliyor?",
                                a: "Sosyal medya yönetimi sürecimiz; marka analizi, içerik planlama, profesyonel çekimler, grafik tasarım, paylaşım yönetimi ve aylık performans raporlamasını içerir. Instagram, Facebook, LinkedIn ve TikTok platformlarında markanızı büyütecek stratejiler uyguluyoruz."
                            },
                            {
                                q: "Muğla dışında hizmet veriyor musunuz?",
                                a: "Evet, merkezimiz Muğla olmakla birlikte başta Aydın, Denizli, Antalya ve İzmir olmak üzere tüm Ege bölgesi ve Türkiye genelinde projeler gerçekleştiriyoruz."
                            },
                            {
                                q: "Dijital reklam yönetimi (Google ve Meta) için bütçe nasıl belirlenir?",
                                a: "Reklam bütçesi; sektörünüze, hedef kitlenize ve hedeflerinize göre analiz edilerek belirlenir. Minimum bütçe ile maksimum dönüşüm alabilmeniz için stratejik planlama yapıyor, kampanyalarınızı günlük olarak optimize ediyoruz."
                            }
                        ].map((faq, idx) => (
                            <div key={idx} className="space-y-4">
                                <h3 className="text-[14px] font-bold uppercase tracking-tight text-black">{faq.q}</h3>
                                <p className="text-[12px] text-black/50 leading-relaxed max-w-lg">{faq.a}</p>
                            </div>
                        ))}
                    </div>
                </div>

                {/* FAQ Schema */}
                <script
                    type="application/ld+json"
                    dangerouslySetInnerHTML={{
                        __html: JSON.stringify({
                            "@context": "https://schema.org",
                            "@type": "FAQPage",
                            "mainEntity": [
                                {
                                    "@type": "Question",
                                    "name": "Muğla Dijital Medya Ajansı nedir?",
                                    "acceptedAnswer": {
                                        "@type": "Answer",
                                        "text": "Muğla Dijital, Muğla merkezli profesyonel bir dijital medya ajansıdır. Drone çekimi, video prodüksiyon, sosyal medya yönetimi, SEO ve dijital reklam yönetimi (Google/Meta) alanlarında markalara yaratıcı ve sonuç odaklı çözümler sunuyoruz."
                                    }
                                },
                                {
                                    "@type": "Question",
                                    "name": "Drone çekimi hizmetleriniz neleri kapsıyor?",
                                    "acceptedAnswer": {
                                        "@type": "Answer",
                                        "text": "Drone çekimi hizmetlerimiz; otel tanıtım filmleri, gayrimenkul çekimleri, arazi ve arsa havadan görüntüleme, etkinlik ve düğün çekimlerini kapsamaktadır."
                                    }
                                },
                                {
                                    "@type": "Question",
                                    "name": "Muğla dışında hizmet veriyor musunuz?",
                                    "acceptedAnswer": {
                                        "@type": "Answer",
                                        "text": "Evet, merkezimiz Muğla olmakla birlikte başta Aydın, Denizli, Antalya ve İzmir olmak üzere tüm Ege bölgesi ve Türkiye genelinde projeler gerçekleştiriyoruz."
                                    }
                                }
                            ]
                        })
                    }}
                />

                {/* AboutPage Schema */}
                <script
                    type="application/ld+json"
                    dangerouslySetInnerHTML={{
                        __html: JSON.stringify({
                            "@context": "https://schema.org",
                            "@type": "AboutPage",
                            "mainEntity": {
                                "@type": "ProfessionalService",
                                "name": "Muğla Dijital Medya Ajansı",
                                "description": "Muğla'nın öncü dijital medya ve prodüksiyon ajansı.",
                                "areaServed": "Ege Bölgesi",
                                "serviceType": ["Drone Çekimi", "Sosyal Medya Yönetimi", "Reklam Yönetimi"]
                            }
                        })
                    }}
                />
            </section>


            {/* CTA Section */}
            <section className="py-24 px-6 text-center">
                <div className="max-w-4xl mx-auto space-y-12">
                    <h2 className="editorial-headline text-4xl md:text-6xl text-black uppercase">
                        Projenizi Hayata <br /> <span className="text-primary">Geçirelim.</span>
                    </h2>
                    <p className="text-black/40 text-[13px] tracking-[0.1em] leading-relaxed max-w-xl mx-auto">
                        Drone çekimi, sosyal medya yönetimi veya dijital reklam — ne ihtiyacınız varsa, birlikte çözüm üretelim.
                    </p>
                    <div className="flex flex-col sm:flex-row items-center justify-center gap-6">
                        <Link href="/contact" className="button-primary px-10">
                            Teklif Al
                        </Link>
                        <Link href="/works" className="button-secondary px-10">
                            Portfolyo
                        </Link>
                    </div>
                </div>
            </section>

            <Footer />
        </main>
    );
}