'use client'

import { useRef, useState, useEffect } from 'react'
import { motion, useScroll, useTransform } from 'framer-motion'
import Image from 'next/image'
import Link from 'next/link'

const services = [
  {
    title: 'Mimari Tasarım',
    description: 'A.N.T Architecture, Fethiye merkezli modern bir mimari yaklaşım ile kapsamlı tasarım hizmetleri sunar:',
    list: [
      'Konsept Tasarımı ve Geliştirme: Saha analizi, potansiyel çalışmaları ve master planlama',
      'Mimari Plan ve Proje Hazırlama: Detaylı uygulama projeleri ve teknik şartnameler',
      'BIM Destekli Tasarım: Yapı Bilgi Modellemesi ile entegre proje yönetimi',
      'Ruhsat ve İzin Süreçleri: Yerel yönetmeliklere uygun strateji geliştirme',
      '3D Görselleştirme: Fotorealistik renderlar, 360° turlar ve video animasyonlar',
      'Şantiye Yönetimi ve Denetimi: Projenin uygulama aşamasında sahada kalite kontrolü'
    ],
    button: 'PROJELERİ GÖRÜNTÜLE',
    image: 'https://images.unsplash.com/photo-1486406146926-c627a92ad1ab?q=80&w=2070&auto=format&fit=crop'
  },
  {
    title: 'İç Mimari ve Dekorasyon',
    description: 'A.N.T Architecture, yaşam alanlarınıza ruh katan, işlevsel ve estetik iç mekan çözümleri üretir. Fethiye ve çevresindeki lüks villa ve ticari projelerde derin uzmanlık sunuyoruz:',
    list: [
      'Mekan Planlama: İhtiyaç analizi ve fonksiyonel yerleşim planları',
      'Malzeme ve Mobilya Seçimi: Kişiye özel mobilya tasarımı ve malzeme kürasyonu',
      'Aydınlatma Tasarımı: Atmosferik ve teknik aydınlatma çözümleri',
      'Anahtar Teslim Uygulama: Tasarımdan montaj aşamasına kadar tam kontrol'
    ],
    button: 'TÜM PROJELER',
    image: 'https://images.unsplash.com/photo-1600210492486-724fe5c67fb0?q=80&w=2070&auto=format&fit=crop'
  },
  {
    title: 'Danışmanlık ve Uzmanlık',
    description: 'Gayrimenkul yatırımlarınızdan önce teknik ve mimari değerlendirmeler yaparak riskleri minimize etmenize yardımcı oluyoruz.',
    list: [
      'Fizibilite Çalışmaları: Teknik ve yasal kısıtlamaların analizi',
      'Yatırım Danışmanlığı: Arsa ve bina potansiyel değerlendirmesi',
      'Yenileme ve Restorasyon: Mevcut yapıların modernizasyonu ve korunması'
    ],
    button: null,
    image: 'https://images.unsplash.com/photo-1518780664697-55e3ad937233?q=80&w=2070&auto=format&fit=crop'
  }
]

const projectPhases = [
  { num: '00', title: 'ÖN ANALİZ VE KONCEPT', desc: 'İhtiyaçların belirlenmesi, arazi etüdü ve ilk fikirlerin eskizlerle somutlaştırıldığı hazırlık aşaması.' },
  { num: '01', title: 'TASARIM SÜRECİ', desc: 'Saha incelemeleri, program analizi ve bütçe planlamasının yapıldığı temel tasarım aşaması.' },
  { num: '02', title: 'DETAYLI GELİŞTİRME', desc: 'Taslakların onaylanmasının ardından plan, kesit ve görünüşlerin teknik detaylarla zenginleştirilmesi.' },
  { num: '03', title: 'UYGULAMA PROJELERİ', desc: 'İnşaat aşamasında kullanılacak tüm teknik detayların ve imalat çizimlerinin hazırlanması.' },
  { num: '04', title: 'TEKLİF VE SÖZLEŞME', desc: 'Yüklenici firma seçimi, maliyet analizi ve inşaat sözleşmelerinin yönetimi konusunda danışmanlık.' },
  { num: '05', title: 'SAHA DENETİMİ', desc: 'Uygulamanın projeye uygun ilerlemesinin sağlanması ve sahada karşılaşılan sorunlara mimari çözümler üretilmesi.' }
]

export default function AboutPage() {
  const targetRef = useRef<HTMLDivElement>(null)
  const { scrollY } = useScroll()
  const [isAtBottom, setIsAtBottom] = useState(false)

  useEffect(() => {
    const handleScroll = () => {
      const windowHeight = window.innerHeight
      const documentHeight = document.documentElement.scrollHeight
      const scrollPosition = window.scrollY + windowHeight
      setIsAtBottom(scrollPosition > documentHeight - 150)
    }
    window.addEventListener('scroll', handleScroll)
    return () => window.removeEventListener('scroll', handleScroll)
  }, [])

  const cargoFontSize = useTransform(scrollY, [0, 300], ["10vw", "4vw"])
  const archFontSize = useTransform(scrollY, [0, 300], ["8vw", "3vw"])
  const bottomPadding = useTransform(scrollY, [0, 300], ["2.5rem", "1rem"])

  const { scrollYProgress } = useScroll({
    target: targetRef,
    offset: ["start start", "end end"]
  })

  return (
    <main className="relative bg-[#0a0a0a] text-white selection:bg-white selection:text-black" style={{ overflowX: 'clip' }}>

      {/* SECTION 1: Intro */}
      <section className="relative min-h-screen flex items-center justify-center pt-40 pb-32 px-6 md:px-16">
        <div className="max-w-[1400px] w-full grid grid-cols-1 lg:grid-cols-[1fr_400px] gap-12 lg:gap-24 items-start">
          <motion.div
            initial={{ opacity: 0, y: 30 }}
            whileInView={{ opacity: 1, y: 0 }}
            viewport={{ once: true }}
            transition={{ duration: 1.2, ease: [0.22, 1, 0.36, 1] }}
          >
            <p className="text-[24px] md:text-[36px] lg:text-[42px] leading-[1.2] font-normal tracking-tight text-white/95">
              Mimariyi, teknik disiplin ile yaratıcı vizyonun kusursuz dengesi olarak tanımlıyorum. Fethiye merkezli tasarım sürecimde, her projemde bütüncül bir yaklaşımı benimsiyor; yapıları sadece betonarme kütleler değil, çevresiyle nefes alan yaşam alanları olarak tasarlıyorum.
              <br /><br />
              Projelerimin teknik omurgasını AutoCAD üzerinde detaylı plan ve kesit çalışmalarıyla kurgularken, 3D modelleme süreçlerinde sunduğum gerçekçi sunumlarla hayalleri somuta dönüştürüyorum. Konseptten uygulamaya her aşamada işlevselliği estetik bir değerle harmanlamayı amaçlıyorum.
            </p>
          </motion.div>

          <motion.div
            initial={{ opacity: 0, x: 20 }}
            whileInView={{ opacity: 1, x: 0 }}
            viewport={{ once: true }}
            transition={{ duration: 1.2, delay: 0.3, ease: [0.22, 1, 0.36, 1] }}
            className="flex flex-col space-y-12 lg:space-y-16 mt-4"
          >
            <p className="text-[14px] md:text-[15px] leading-relaxed text-zinc-300 font-medium italic border-l border-white/20 pl-6">
              2025 yılında Fethiye'de temelleri atılan A.N.T Architecture, mimar Ayça Nur Turan'ın modern tasarım vizyonunu ve teknik disiplinini bir araya getirerek kurulmuştur. Yerel dokuyu modern çizgilerle buluşturan ofisimiz, villa projelerinden ticari mekanlara kadar her ölçekte mimari ve iç mimari çözümler sunmaktadır.
            </p>

            <div className="flex flex-col space-y-6">
              <div className="relative w-full aspect-[3/4] rounded-[1px] overflow-hidden grayscale border border-white/10 group max-w-[300px] lg:max-w-none">
                <Image
                  src="https://images.unsplash.com/photo-1595392756136-ba72c36bcfe0?q=80&w=1974&auto=format&fit=crop"
                  alt="Ayça Nur Turan"
                  fill
                  sizes="(max-width: 1024px) 300px, 400px"
                  className="object-cover transition-transform duration-1000 group-hover:scale-105"
                />
              </div>
              <div className="text-[10px] md:text-[11px] font-bold uppercase tracking-[0.2em] leading-[1.5] text-white/60">
                AYÇA NUR Turan <br />KURUCU MİMAR
              </div>
            </div>
          </motion.div>
        </div>
      </section>

      {/* SECTION 2: Services – Sequential Scroll Animation */}
      <section ref={targetRef} className="relative md:h-[180vh] bg-[#0a0a0a]">
        <div className="hidden md:block sticky top-0 h-screen w-full p-4">
          <div className="grid grid-cols-3 gap-4 w-full h-full">
            {services.map((service, index) => (
              <ServiceCard
                key={index}
                index={index}
                service={service}
                scrollYProgress={scrollYProgress}
              />
            ))}
          </div>
        </div>

        {/* Mobile Vertical Stack */}
        <div className="md:hidden flex flex-col space-y-1 px-4 pb-20">
          {services.map((service, index) => (
            <ServiceCardMobile key={index} service={service} />
          ))}
        </div>
      </section>

      {/* SECTION 3: Project Phases */}
      <section className="relative min-h-screen bg-[#0a0a0a] pt-24 md:pt-40 pb-40 md:pb-60 px-6 md:px-16 border-t border-white/10">
        <div className="max-w-[1400px] mx-auto grid grid-cols-1 lg:grid-cols-[1fr_2fr] gap-12 md:gap-20">
          <div className="flex flex-col items-start space-y-6 md:space-y-8">
            <h2 className="text-[36px] md:text-[52px] font-normal tracking-tight">Proje Aşamaları</h2>
            <Link
              href="/contact"
              className="bg-white text-black px-6 py-2.5 text-[10px] font-extrabold tracking-[0.2em] uppercase hover:bg-zinc-200 transition-colors rounded-[1px]"
            >
              PROJENİZİ BAŞLATIN
            </Link>
          </div>

          <div className="flex flex-col">
            {projectPhases.map((phase, idx) => (
              <div
                key={idx}
                className="grid grid-cols-1 sm:grid-cols-[60px_1.2fr_2fr] gap-4 md:gap-8 py-8 md:py-10 border-t border-white/20 first:border-t-0 px-4 md:px-6 -mx-4 md:-mx-6 hover:bg-white hover:text-black transition-all duration-300 group cursor-default"
              >
                <div className="text-[12px] font-bold text-white/40 group-hover:text-black/40">{phase.num}</div>
                <div className="text-[12px] font-extrabold tracking-widest uppercase">{phase.title}</div>
                <div className="text-[13px] md:text-[14px] leading-relaxed text-zinc-400 group-hover:text-black md:pr-10">{phase.desc}</div>
              </div>
            ))}
            <div className="border-t border-white/20 w-full" />
          </div>
        </div>
      </section>

      {/* BOTTOM BRANDING */}
      <motion.div
        animate={{ opacity: isAtBottom ? 0 : 1 }}
        transition={{ duration: 0.3 }}
        className="fixed bottom-0 left-0 w-full pointer-events-none z-50 overflow-hidden pt-10"
      >
        <motion.div
          style={{ padding: bottomPadding }}
          className="flex justify-between items-end"
        >
          <motion.h1 style={{ fontSize: cargoFontSize }} className="font-bebas leading-[0.8] text-white mix-blend-difference tracking-tighter">A.N.T</motion.h1>
          <motion.h1 style={{ fontSize: archFontSize }} className="font-bebas leading-[0.8] text-white mix-blend-difference tracking-tighter">ARCHITECTURE</motion.h1>
        </motion.div>
      </motion.div>

    </main>
  )
}

function ServiceCard({ service, index, scrollYProgress }: { service: any, index: number, scrollYProgress: any }) {
  const initialOffsets = [0, 200, 400]
  const ranges: [number, number][] = [
    [0, 0.40],
    [0.10, 0.60],
    [0.20, 0.80],
  ]

  const x = useTransform(
    scrollYProgress,
    ranges[index],
    [index === 0 ? -300 : index === 2 ? 300 : 0, 0]
  )

  const y = useTransform(
    scrollYProgress,
    ranges[index],
    [index === 1 ? 400 : 200, 0]
  )

  const opacity = useTransform(
    scrollYProgress,
    ranges[index],
    [0, 1]
  )

  const scale = useTransform(
    scrollYProgress,
    ranges[index],
    [0.8, 1]
  )

  return (
    <motion.div
      style={{ x, y, opacity, scale }}
      className="relative w-full h-full bg-white text-black flex flex-col rounded-2xl overflow-hidden shadow-2xl"
    >
      <div className="flex-1 p-10 lg:p-14 overflow-hidden">
        <h2 className="text-[32px] lg:text-[40px] mb-8 font-normal tracking-tight leading-[1.1]">
          {service.title}
        </h2>
        <p className="text-[15px] mb-8 text-black/80 leading-relaxed font-medium">
          {service.description}
        </p>
        <ul className="space-y-4 mb-10">
          {service.list.map((item: string, i: number) => (
            <li key={i} className="text-[14px] text-black/70 flex items-start border-b border-black/5 pb-2 last:border-0 leading-snug">
              <span className="mr-3 text-black/30">•</span>
              <span>{item}</span>
            </li>
          ))}
        </ul>
        {service.button && (
          <Link href="/projects" className="inline-block border border-black text-[10px] font-bold tracking-[0.2em] px-8 py-3.5 uppercase hover:bg-black hover:text-white transition-all duration-300">
            {service.button}
          </Link>
        )}
      </div>

      <div className="h-[35%] lg:h-[40%] relative w-full overflow-hidden grayscale group hover:grayscale-0 transition-all duration-700">
        <Image
          src={service.image}
          alt={service.title}
          fill
          sizes="33vw"
          className="object-cover scale-110 group-hover:scale-100 transition-transform duration-1000"
        />
      </div>
    </motion.div>
  )
}

function ServiceCardMobile({ service }: { service: any }) {
  return (
    <div className="w-full bg-white text-black flex flex-col overflow-hidden rounded-[1px] mb-1">
      <div className="p-8">
        <h2 className="text-[26px] mb-6 font-normal tracking-tight leading-tight">{service.title}</h2>
        <p className="text-[14px] mb-6 text-black/80 leading-relaxed">{service.description}</p>
        <ul className="space-y-3 mb-8">
          {service.list.map((item: string, i: number) => (
            <li key={i} className="text-[13px] text-black/70 flex items-start border-b border-black/5 pb-2 last:border-0">
              <span className="mr-2 text-black/30">•</span>
              <span>{item}</span>
            </li>
          ))}
        </ul>
        {service.button && (
          <Link href="/projects" className="inline-block border border-black text-[9px] font-bold tracking-widest px-6 py-3 uppercase">
            {service.button}
          </Link>
        )}
      </div>
      <div className="h-[250px] relative w-full grayscale">
        <Image src={service.image} alt={service.title} fill sizes="100vw" className="object-cover" />
      </div>
    </div>
  )
}