'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 Hizmetler',
    description: 'A.N.Tarchitecture, proaktif entegre tasarım yaklaşımıyla kapsamlı bir profesyonel mimari hizmet yelpazesi sunar:',
    list: [
      'Proje Geliştirme: Saha analizi, potansiyel çalışma, sosyal kabul edilebilirlik stratejileri ve planlama',
      'Plan ve Şartnamelerin Tasarımı ve Üretimi.',
      'Proje Modelleme Yönetimi: Entegre BIM (Yapı Bilgi Modellemesi) tasarımı',
      'Düzenleyici Stratejiler: Yönetmelikler, saha çalışması, enerji ve güneş ışığı analizi',
      'Kentsel Tasarım: Master planlama, peyzaj tasarımı ve inşaat mühendisliği işleri',
      '3D Görselleştirme: 3D perspektifler, modelleme ve animasyonlar',
      'İnşaat Hizmeti ve Yönetimi: İnşaat yönetimi ve saha denetimi'
    ],
    button: 'PROJELERİ GÖRÜNTÜLE',
    image: 'https://images.unsplash.com/photo-1486406146926-c627a92ad1ab?q=80&w=2070&auto=format&fit=crop'
  },
  {
    title: 'İç Mimari Hizmetleri',
    description: 'A.N.Tarchitecture, sürdürülebilirlik, zarafet ve işlevselliği şirketinizin değerleriyle uyumlu akıllı düzenlerle birleştirerek, imajını ve işe alım kapasitesini artıran iç mimari konusunda derin bir uzmanlık sunar:',
    list: [
      'Aktif Müşteri Dinleme: Alan programlama ve planlama, bütçe analizi',
      'Konsept Geliştirme: Plan ve şartnamelerin üretimi, malzeme seçimi, entegre mobilya ve özel objelerin kavramsallaştırılması',
      'Entegre Tabela: Plan ve şartnamelerin modellenmesi ve üretimi',
      '3D Görselleştirme: 3D perspektifler, modelleme ve animasyonlar'
    ],
    button: 'TÜM PROJELER',
    image: 'https://images.unsplash.com/photo-1600210492486-724fe5c67fb0?q=80&w=2070&auto=format&fit=crop'
  },
  {
    title: 'Planlama ve Uzmanlık Hizmetleri',
    description: 'A.N.Tarchitecture, bina planlama, programlama ve denetleme konularında, müşteri ihtiyaçlarını ve gereksinimlerini net bir şekilde tanımlamak için titiz ve sistematik yöntemler kullanarak çeşitli uzmanlıklar sunar.',
    list: [
      'Fonksiyonel ve Teknik Programların (FTP) Geliştirilmesi: Müdahale stratejileri, organizasyonun genel özellikleri, işlevsellik ve alanlar',
      'Fizibilite Çalışması ve Ön Konseptler: Teknik ve düzenleyici koşulların ve kısıtlamaların analizi',
      'Teknik Uzmanlık: Su yalıtım sorunlarının ve erken yaşlanmanın tespiti, yaşam döngüsü analizi'
    ],
    button: null,
    image: 'https://images.unsplash.com/photo-1518780664697-55e3ad937233?q=80&w=2070&auto=format&fit=crop'
  }
]

const projectPhases = [
  { num: '00', title: 'ÖN KAVRAMSAL ÇALIŞMALAR', desc: 'Bir binanın kapsamını belirlemek için ihtiyaçlarını ve işlevlerini anlamaya ve belgelemeye yardımcı olan hazırlık aşaması.' },
  { num: '01', title: 'TASARIM AŞAMASI', desc: 'Bu aşama saha incelemesi, program incelemesi, ilk eskiz tasarımı ve ön bütçe analizini içerir.' },
  { num: '02', title: 'TASARIM GELİŞTİRME', desc: 'Eskizler onaylandıktan sonra, gerekli ön planları, kesitleri ve görünüşleri oluşturarak projeyi daha detaylı geliştiriyoruz.' },
  { num: '03', title: 'İNŞAAT BELGELERİ', desc: 'Bu inşaat için gerekli olan teknik planların gerçek geliştirilme aşamasıdır.' },
  { num: '04', title: 'İHALE', desc: 'Genel yüklenici tekliflerinin analizinde ve inşaat sözleşmesinin imzalanmasında müşteriye yardımcı oluyor ve danışmanlık yapıyoruz.' },
  { num: '05', title: 'SAHA DENETİMİ', desc: 'Projenin planlara sadık kalarak yürütülmesini sağlıyoruz. İnşaat sahasındaki öngörülemeyen sorunlara tasarımı uyarlamak için çözümler sunuyoruz.' }
]

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. Tasarım sürecimde hem iç hem de dış mekân projelerinde bütüncül bir yaklaşımı benimsiyor; projelerimi sadece birer yapı olarak değil, çevresiyle nefes alan yaşam alanları olarak tasarlıyorum.

              Projelerimin teknik omurgasını AutoCAD üzerinde detaylı plan ve kesit çalışmalarıyla oluştururken, 3D modelleme ve görselleştirme süreçlerinde sunduğum gerçekçi sunumlarla tasarıma derinlik kazandırıyorum. Konsept tasarımından uygulama detaylarına kadar her aşamada, mekânın işlevselliğini 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-[13px] md:text-[14px] leading-relaxed text-zinc-400 font-medium">
              2006 yılında Toronto'da CGBWstudio adıyla Charles-Bernard Gagnon tarafından kurulan ve 2008'de Quebec City'ye taşınan firma, felsefesi ve sürecin her aşamasında yüksek kaliteli profesyonel hizmet sunma taahhüdü sayesinde bölge pazarında öne çıkmıştır. Bu yaklaşım, firmanın yenilikçi projelerden oluşan bir portföy oluşturmasını sağlamıştır. 2013 yılında ekip, daha anlamlı bir isim olan A.N.Tarchitecture adını seçmiştir.
            </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 Turhan"
                  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 TURHAN KURUCU <br />MİMAR, OAQ
              </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-black mix-blend-difference tracking-tighter">A.N.T</motion.h1>
          <motion.h1 style={{ fontSize: archFontSize }} className="font-bebas leading-[0.8] text-black mix-blend-difference tracking-tighter">ARCHITECTURE</motion.h1>
        </motion.div>
      </motion.div>

    </main>
  )
}

function ServiceCard({ service, index, scrollYProgress }: { service: any, index: number, scrollYProgress: any }) {
  // Cards start visible but at different Y positions (staggered cascade)
  // Card 0: y=0 (top), Card 1: y=200px lower, Card 2: y=400px lower
  // As user scrolls, each card slides UP to y=0 to align with Card 0
  const initialOffsets = [0, 200, 400]

  // Sequential timing: Card 1 arrives first, Card 2 arrives after
  const ranges: [number, number][] = [
    [0, 0.01],    // Card 0: always in place
    [0, 0.50],    // Card 1: slides up during first half
    [0.15, 0.85], // Card 2: starts after Card 1 is moving, arrives by 85%
  ]

  const y = useTransform(
    scrollYProgress,
    ranges[index],
    [initialOffsets[index], 0]
  )

  return (
    <motion.div
      style={{ y }}
      className="relative w-full h-full bg-white text-black flex flex-col rounded-2xl overflow-hidden"
    >
      {/* Content Area */}
      <div className="flex-1 p-10 lg:p-14 overflow-hidden">
        <h2 className="text-[32px] lg:text-[40px] mb-10 font-normal tracking-tight leading-[1.1]">
          {service.title}
        </h2>
        <p className="text-[15px] mb-10 text-black/80 leading-relaxed font-medium">
          {service.description}
        </p>
        <ul className="space-y-4 mb-12">
          {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>

      {/* Fixed Image at Bottom */}
      <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>
  )
}