'use client';

import { useRef, useState, useSyncExternalStore } from 'react';
import Link from 'next/link';
import { Swiper, SwiperSlide } from 'swiper/react';
import { A11y, Keyboard, Mousewheel } from 'swiper/modules';
import { ArrowLeft, Play } from 'lucide-react';
import { services } from '../lib/content';
import 'swiper/css';

const desktopQuery = '(min-width: 900px) and (min-height: 650px)';
function subscribe(callback) {
  const query = window.matchMedia(desktopQuery);
  query.addEventListener('change', callback);
  return () => query.removeEventListener('change', callback);
}
const desktopSnapshot = () => window.matchMedia(desktopQuery).matches;
const serverSnapshot = () => false;
function subscribeMotion(callback) {
  const query = window.matchMedia('(prefers-reduced-motion: reduce)');
  query.addEventListener('change', callback);
  return () => query.removeEventListener('change', callback);
}
const motionSnapshot = () => window.matchMedia('(prefers-reduced-motion: reduce)').matches;
const headings = [['ویلایی', 'و آپارتمانی'], ['سالن‌های', 'زیبایی'], ['اداری', 'و تجاری'], ['طراحی', 'فضای سبز'], ['طراحی', 'نما']];
const letters = ['V', 'B', 'O', 'L', 'F'];
const descriptions = [
  'مؤثرترین عامل در طراحی خانه ویلایی، پلان معماری ویلا می‌باشد که باید به دست یک مهندس معمار خلاق و خوش‌ذوق صورت بگیرد؛ فردی که علاوه بر زیبایی به فکر مسائل اجرایی در طراحی ویلا نیز باشد. توجه به اقلیم در طراحی خانه ویلایی بسیار حائز اهمیت می‌باشد.',
  'طراحی دکوراسیون داخلی سالن زیبایی نقش مهمی در انجام صحیح کارها و بهبود شرایط داخلی سالن زیبایی دارد. یکی از نکات مهم و قابل توجه برای طراحی دکوراسیون داخلی سالن‌ها، توجه به نیازها و قوانین کلی چیدمان این فضا می‌باشد.',
  'یکی از مهم‌ترین نکات در طراحی داخلی ساختمان اداری توجه به افرادی است که در آن ساختمان مشغول به کار هستند و ساعت‌ها از روز خود را در آن محل سپری می‌کنند؛ به همین دلیل ایجاد یک فضا با ایده‌های خلاقانه باعث نشاط کارکنان و افزایش راندمان کاری شرکت می‌شود و شرکت‌های بزرگ و خلاق با آماده کردن محیط‌های الهام‌بخش به دنبال بهرهٔ بهینه از سرمایه‌های انسانی خود هستند.',
  'فضای سبز بخشی از فضای باز محیط آپارتمان یا شهر است که عرصه‌های طبیعی یا مصنوعی آن، تحت استقرار درختچه‌ها، درختان، گل‌ها، چمن‌ها و سایر گیاهانی است که بر اساس نظارت و مدیریت انسان، با در نظر گرفتن ضوابط و قوانین برای بهبود شرایط زیستی و رفاهی شهروندان و مراکز جمعیتی غیرروستایی حفظ، نگهداری و احداث می‌شود.',
  'طراحی نمای ساختمان از این رو که اولین آیتم از منظر بیننده می‌باشد از اهمیت ویژه‌ای در بحث معماری ساختمان برخوردار است. در طراحی نمای ساختمان بایستی المان‌های مختلفی نظیر اقلیم منطقه، سبک معماری منطقه، معماری ساختمان‌های مجاور، ضوابط شهری، شرایط جغرافیایی و فرهنگی در نظر گرفته شود.'
];

export default function HomeExperience() {
  const desktop = useSyncExternalStore(subscribe, desktopSnapshot, serverSnapshot);
  const reducedMotion = useSyncExternalStore(subscribeMotion, motionSnapshot, serverSnapshot);
  const swiper = useRef(null);
  const [active, setActive] = useState(0);
  const goTo = index => {
    if (desktop) swiper.current?.slideTo(index);
    else document.getElementById(`home-panel-${index}`)?.scrollIntoView({behavior: window.matchMedia('(prefers-reduced-motion: reduce)').matches ? 'instant' : 'smooth'});
  };

  return <div className={`reference-home ${desktop ? 'is-desktop' : 'is-stacked'}`}>
    <Swiper key={desktop ? 'desktop' : 'stacked'} direction="vertical" modules={[A11y, Keyboard, Mousewheel]} enabled={desktop}
      speed={reducedMotion ? 0 : 650} mousewheel={{enabled:desktop, forceToAxis: true, releaseOnEdges: true, thresholdDelta: 20, thresholdTime: 650}}
      keyboard={{enabled: desktop, onlyInViewport: true}} onSwiper={instance => {swiper.current = instance;}}
      onSlideChange={instance => setActive(instance.activeIndex)}
      a11y={{slideLabelMessage:'بخش {{index}} از {{slidesLength}}',nextSlideMessage:'بخش بعدی',prevSlideMessage:'بخش قبلی'}}>
      <SwiperSlide>
        <section id="home-panel-0" className="reference-hero" inert={desktop && active !== 0}>
          <img src="/img/slider/1.jpg" className="reference-hero-image" alt="طراحی داخلی با دیوار زغالی و جزئیات طلایی" fetchPriority="high"/>
          <div className="reference-hero-copy"><h1>رویای شما تبدیل به<br/>واقعیت می‌شود</h1><Link href="/aboutus/" className="reference-gold-button">بیشتر بدانید</Link></div>
          <button type="button" className="reference-discover" onClick={() => goTo(1)} aria-label="طراحی خاص؛ مشاهدهٔ خدمات"><span>طراحی خاص</span><span className="reference-play"><Play fill="currentColor" size={30}/></span></button>
        </section>
      </SwiperSlide>
      {services.map((service, index) => <SwiperSlide key={service.id}>
        <section id={`home-panel-${index+1}`} className={`reference-feature ${index % 2 ? 'feature-dark' : ''}`} inert={desktop && active !== index+1}>
          <div className="reference-feature-image"><img src={service.image} alt={service.title} loading="lazy"/></div>
          <div className="reference-feature-info">
            <span className="reference-letter" aria-hidden="true" dir="ltr">{letters[index]}</span>
            <div className="reference-feature-copy"><p className="reference-english" dir="ltr">{service.en}</p>
              <h2><span className="reference-number" dir="ltr">0{index+1}</span><Link href={`/ourservices/#${service.id}`}>{headings[index][0]}<br/>{headings[index][1]}</Link></h2>
              <p className="reference-description">{descriptions[index]}</p>
              <Link className="reference-project-link" href={`/portfolios/?category=${service.id}`}>مشاهده نمونه‌کارها <ArrowLeft size={68} strokeWidth={.7}/></Link>
            </div>
          </div>
        </section>
      </SwiperSlide>)}
    </Swiper>
    {desktop && <nav className={`reference-pagination ${active > 0 && active % 2 ? 'on-light' : ''}`} aria-label="بخش‌های صفحهٔ اصلی">
      {['خانه',...services.map(service=>service.title)].map((title,index)=><button key={title} type="button" aria-label={title} aria-current={active===index?'step':undefined} onClick={()=>goTo(index)}><span/></button>)}
    </nav>}
  </div>;
}