/* global React */
// ============================================
// A_LIZ HAIRDRESSER — Home page
// ============================================

const { SERVICES, PARTNERS, REVIEWS, GALLERY } = window.AL_DATA;
const { useLang, useT, useRoute, useReveal, useTilt, useCountUp, Icon, CtaStrip, WA_LINK, BrandLogo, usePageSEO } = window;
const { useState, useEffect, useRef, useMemo, useCallback } = React;

// ========== PETALS ==========
function Petals({ count = 18 }) {
  // Pre-compute petal placements so they're stable across renders
  const petals = React.useMemo(
    () =>
      Array.from({ length: count }).map((_, i) => {
        const left = Math.random() * 100;
        const delay = -Math.random() * 18;
        const fall = 16 + Math.random() * 14;
        const sway = 4 + Math.random() * 5;
        const scale = 0.6 + Math.random() * 0.9;
        const op = 0.12 + Math.random() * 0.22;
        return { left, delay, fall, sway, scale, op, key: i };
      }),
    [count]
  );
  return (
    <div className="hero-petals">
      {petals.map((p) => (
        <span
          key={p.key}
          className="petal"
          style={{
            left: `${p.left}%`,
            opacity: p.op,
            animation: `petal-fall ${p.fall}s linear ${p.delay}s infinite`,
            transform: `scale(${p.scale})`,
          }}
        />
      ))}
    </div>
  );
}

// ========== FLOW DIVIDER ==========
function FlowDivider() {
  return (
    <div className="flow-divider" aria-hidden="true">
      <svg viewBox="0 0 1200 60" preserveAspectRatio="none">
        <path className="strand-1" d="M0,30 Q120,8 240,30 T480,30 T720,30 T960,30 T1200,30" />
        <path className="strand-2" d="M0,38 Q150,14 300,38 T600,38 T900,38 T1200,38" />
        <path className="strand-3" d="M0,22 Q100,42 200,22 T400,22 T600,22 T800,22 T1000,22 T1200,22" />
        <path className="strand-2" d="M0,46 Q180,28 360,46 T720,46 T1080,46 T1200,46" />
      </svg>
    </div>
  );
}

// ========== HERO ==========
function Hero() {
  const t = useT();
  const { lang } = useLang();
  const { go } = useRoute();
  const stageRef = useRef(null);
  const [slide, setSlide] = useState(0);
  const [prevSlide, setPrevSlide] = useState(null);
  const slideIdxRef = useRef(0);
  slideIdxRef.current = slide;

  const goToSlide = useCallback((next) => {
    if (next === slideIdxRef.current) return;
    setPrevSlide(slideIdxRef.current);
    setSlide(next);
    setTimeout(() => setPrevSlide(null), 980);
  }, []);
  const slidesData = [
    { src: "assets/img/hero-2.webp",  label: "SALON",   title: "Behind the chair" },
    { src: "assets/img/style-3.webp", label: "RENK",      title: "Honey highlights" },
    { src: "assets/img/style-1.webp", label: "FÖN",       title: "Soft volume wave" },
    { src: "assets/img/style-6.webp", label: "OMBRÉ",     title: "Caramel gradient" },
  ];

  // Hero marquee: rAF ile kaydir
  useEffect(() => {
    const el = document.querySelector('.marquee-track');
    if (!el) return;
    if (el.getAnimations) el.getAnimations().forEach(a => a.cancel());
    let offset = 0, lastTs = null, paused = false, raf;
    const step = (ts) => {
      if (lastTs !== null && !paused) {
        const dt = Math.min(ts - lastTs, 50);
        const total = el.scrollWidth / 2;
        if (total > 0) {
          offset -= (total / 42000) * dt;
          if (offset < -total) offset += total;
          el.style.cssText = `transform: translateX(${offset}px) !important;`;
        }
      }
      lastTs = ts;
      raf = requestAnimationFrame(step);
    };
    raf = requestAnimationFrame(step);
    const p = () => { paused = true; };
    const r = () => { paused = false; lastTs = null; };
    el.addEventListener('mouseenter', p);
    el.addEventListener('mouseleave', r);
    return () => { cancelAnimationFrame(raf); el.removeEventListener('mouseenter', p); el.removeEventListener('mouseleave', r); el.style.transform = ''; };
  }, []);

  // Slide carousel
  useEffect(() => {
    const tm = setInterval(() => {
      const next = (slideIdxRef.current + 1) % slidesData.length;
      goToSlide(next);
    }, 5800);
    return () => clearInterval(tm);
  }, [slidesData.length, goToSlide]);

  // Mouse parallax tilt
  useEffect(() => {
    const el = stageRef.current;
    if (!el) return;
    const onMove = (e) => {
      const rect = el.getBoundingClientRect();
      const x = (e.clientX - rect.left) / rect.width - 0.5;
      const y = (e.clientY - rect.top) / rect.height - 0.5;
      el.style.transform = `rotateX(${-y * 6}deg) rotateY(${x * 6}deg) translateZ(0)`;
    };
    const onLeave = () => {
      el.style.transform = `rotateX(0) rotateY(0) translateZ(0)`;
    };
    const parent = el.parentElement;
    parent.addEventListener("mousemove", onMove);
    parent.addEventListener("mouseleave", onLeave);
    return () => {
      parent.removeEventListener("mousemove", onMove);
      parent.removeEventListener("mouseleave", onLeave);
    };
  }, []);

  // Hero phrase tokens per lang (5 spans)
  const phraseMap = {
    tr: ["Boğaz'ın", "yakınında", "seçkin bir", "lüks", "salon."],
    en: ["Quiet", "luxury,", "by the", "Bosphorus", "salon."],
    ar: ["هدوء", "الفخامة", "على ضفاف", "البوسفور", "."],
    ru: ["Тихая", "роскошь", "у", "Босфора", "."],
    it: ["Lusso", "silenzioso", "sul", "Bosforo", "."],
    de: ["Stille", "Eleganz", "am", "Bosporus", "."],
    fr: ["Le luxe", "discret,", "au bord du", "Bosphore", "."],
    es: ["Lujo", "silencioso", "junto al", "Bósforo", "."],
  };
  const phrase = phraseMap[lang] || phraseMap.tr;

  return (
    <section className="hero hero-c" data-screen-label="01 Hero">

      {/* ── TOP: Full-width cinematic image carousel ── */}
      <div className="hero-c-stage">
        <div className="hero-grain" />
        <Petals count={12} />
        {slidesData.map((s, i) => (
          <img
            key={s.src}
            src={s.src}
            alt={`A_Liz Hairdresser — Luxury hair salon Sultanahmet Istanbul${i === 0 ? ', expert stylists at work' : i === 1 ? ', premium hair colouring' : ', hair care services'}`}
            className={`hero-slide${i === slide ? " active" : i === prevSlide ? " exiting" : ""}`}
          />
        ))}
        <div className="hero-slide-progress hero-c-progress">
          {slidesData.map((_, i) => (
            <span
              key={i}
              className={`hero-slide-bar ${i === slide ? "active" : i < slide ? "done" : ""}`}
              onClick={() => goToSlide(i)}
            />
          ))}
        </div>
      </div>

      {/* ── BOTTOM: Text content on clean background ── */}
      <div className="hero-c-content">
        <div className="shell hero-c-inner">
          <div>
            <div className="eyebrow">{t("hero_eyebrow")}</div>
            <h1 className="hero-title hero-c-title">
              <span className="word"><span>{phrase[0]}</span></span>{" "}
              <span className="word"><span>{phrase[1]}</span></span>{" "}
              <span className="word"><span>{phrase[2]}</span></span>{" "}
              <span className="word"><span><em>{phrase[3]}</em></span></span>{" "}
              <span className="word"><span>{phrase[4]}</span></span>
            </h1>
            <p className="lede hero-c-lede">{t("hero_lede")}</p>
          </div>
          <div className="hero-c-right">
            <div className="hero-actions">
              <a className="btn btn-primary hero-c-btn" onClick={() => go('appointment')}>
                <span>{t("cta_book")}</span>
              </a>
              <a className="btn-link hero-c-link" onClick={() => go('services')}>
                {t("nav_services")} <span className="arrow" />
              </a>
            </div>
            <div className="hero-meta hero-c-meta">
              <div className="hero-meta-item">
                <span className="k">{t("hero_meta_1_k")}</span>
                <span className="v">{t("hero_meta_1_v")}</span>
              </div>
              <div className="hero-meta-item">
                <span className="k">{t("hero_meta_2_k")}</span>
                <span className="v">{t("hero_meta_2_v")}</span>
              </div>
              <div className="hero-meta-item">
                <span className="k">{t("hero_meta_3_k")}</span>
                <span className="v">{t("hero_meta_3_v")}</span>
              </div>
            </div>
          </div>
        </div>
      </div>

      {/* ── Brand marquee ── */}
      <div className="hero-marquee">
        <div className="marquee-track">
          {[1, 2].map((dup) => (
            <div className="marquee-item brands" key={dup}>
              <BrandLogo name="schwarzkopf" />
              <span className="m-sep" />
              <BrandLogo name="loreal" />
              <span className="m-sep" />
              <BrandLogo name="olaplex" />
              <span className="m-sep" />
              <BrandLogo name="kerastase" />
              <span className="m-sep" />
              <BrandLogo name="wella" />
              <span className="m-sep" />
              <BrandLogo name="rallis" />
              <span className="m-sep" />
            </div>
          ))}
        </div>
      </div>
    </section>
  );
}

// Tiltable service card
function ServiceCard({ svc, idx, lang }) {
  const tilt = useTilt({ max: 6, scale: 1.03 });
  const { go } = useRoute();
  return (
    <a className="service-card" ref={tilt} onClick={() => go('services')}>
      <span className="shimmer" />
      <div>
        <div className="service-num">{String(idx + 1).padStart(2, "0")} / 14</div>
        <h3 className="service-name" style={{ marginTop: 18 }}>{svc.names[lang] || svc.names.tr}</h3>
        {lang !== "en" && <div className="service-name-alt">{svc.names.en}</div>}
      </div>
      <div className="service-arrow">
        <Icon.Arrow />
      </div>
    </a>
  );
}

// ========== SERVICES (home preview) ==========
function ServicesPreview() {
  const t = useT();
  const { lang } = useLang();
  const { go } = useRoute();
  const ref = useReveal();
  const [isMobile, setIsMobile] = useState(false);

  useEffect(() => {
    const check = () => setIsMobile(window.innerWidth <= 640);
    check();
    window.addEventListener('resize', check);
    return () => window.removeEventListener('resize', check);
  }, []);

  // Mobile: show 4, Desktop: show 8
  const showing = SERVICES.slice(0, isMobile ? 4 : 8);

  return (
    <section className="section services-bg" ref={ref} data-screen-label="02 Services">
      <div className="shell">
        <div className="services-head">
          <div className="reveal">
            <div className="eyebrow brush-under reveal-watch">{t("svc_eyebrow")}</div>
            <h2 className="display display-lg" style={{ marginTop: 16 }}>{t("svc_title")}</h2>
          </div>
          <div className="reveal reveal-delay-1" style={{ display: "flex", flexDirection: "column", gap: 24, alignItems: "flex-start" }}>
            <p className="lede">{t("svc_lede")}</p>
            <a className="btn-link" onClick={() => go('services')}>
              {t("cta_view_all")} ({SERVICES.length}) <span className="arrow" />
            </a>
          </div>
        </div>

        <div className="services-grid reveal reveal-delay-2">
          {showing.map((svc, i) => (
            <ServiceCard key={svc.id} svc={svc} idx={i} lang={lang} />
          ))}
        </div>

        {/* Mobile only: "Tüm Hizmetler" CTA */}
        {isMobile && (
          <div className="svc-mobile-cta">
            <a className="btn btn-primary svc-mobile-btn" onClick={() => go('services')}>
              {t("cta_view_all")} ({SERVICES.length})
            </a>
          </div>
        )}
      </div>
    </section>
  );
}

// ========== BEFORE / AFTER ==========
function BeforeAfter() {
  const t = useT();
  const { lang } = useLang();
  const { go } = useRoute();
  const ref = useReveal();
  const sliderRef = useRef(null);
  const [pos, setPos] = useState(50);
  const [pairIdx, setPairIdx] = useState(0);

  const pairs = [
    {
      before: "assets/img/style-6.webp",
      after: "assets/img/style-8.webp",
      cat: { tr: "Renk", en: "Colour", ar: "صبغة", ru: "Цвет", it: "Colore", de: "Farbe", fr: "Couleur", es: "Color" },
      label: { tr: "Koyu → Bakır Kızıl", en: "Dark → Copper Red", ar: "غامق → نحاسي", ru: "Тёмный → Медный", it: "Scuro → Ramato", de: "Dunkel → Kupferrot", fr: "Foncé → Cuivré", es: "Oscuro → Cobrizo" },
    },
    {
      before: "assets/img/style-4.webp",
      after: "assets/img/style-1.webp",
      cat: { tr: "Kesim", en: "Cut", ar: "قص", ru: "Стрижка", it: "Taglio", de: "Schnitt", fr: "Coupe", es: "Corte" },
      label: { tr: "Uzun → Soft Bob", en: "Long → Soft Bob", ar: "طويل → بوب ناعم", ru: "Длинный → Софт Боб", it: "Lungo → Soft Bob", de: "Lang → Soft Bob", fr: "Long → Soft Bob", es: "Largo → Soft Bob" },
    },
    {
      before: "https://images.unsplash.com/photo-1508214751196-bcfd4ca60f91?w=600&h=750&fit=crop&crop=faces,top",
      after: "https://images.unsplash.com/photo-1487412947147-5cebf100ffc2?w=600&h=750&fit=crop&crop=faces,top",
      cat: { tr: "Makyaj", en: "Makeup", ar: "مكياج", ru: "Макияж", it: "Trucco", de: "Makeup", fr: "Maquillage", es: "Maquillaje" },
      label: { tr: "Doğal → Editorial", en: "Natural → Editorial", ar: "طبيعي → تحريري", ru: "Натуральный → Editorial", it: "Naturale → Editorial", de: "Natürlich → Editorial", fr: "Naturel → Éditorial", es: "Natural → Editorial" },
    },
    {
      before: "assets/img/style-4.webp",
      after: "assets/img/style-7.webp",
      cat: { tr: "Ombré", en: "Ombré", ar: "أومبري", ru: "Омбре", it: "Ombré", de: "Ombré", fr: "Ombré", es: "Ombré" },
      label: { tr: "Tek Ton → Caramel", en: "Solid → Caramel", ar: "لون واحد → كراميل", ru: "Один тон → Карамель", it: "Uniforme → Caramello", de: "Einfarbig → Karamell", fr: "Uni → Caramel", es: "Liso → Caramelo" },
    },
    {
      before: "https://images.pexels.com/photos/3997388/pexels-photo-3997388.jpeg?auto=compress&cs=tinysrgb&w=600&h=750&fit=crop",
      after: "https://images.pexels.com/photos/704815/pexels-photo-704815.jpeg?auto=compress&cs=tinysrgb&w=600&h=750&fit=crop",
      cat: { tr: "Tırnak", en: "Nails", ar: "أظافر", ru: "Ногти", it: "Unghie", de: "Nägel", fr: "Ongles", es: "Uñas" },
      label: { tr: "Klasik → Couture", en: "Classic → Couture", ar: "كلاسيكي → كوتور", ru: "Классика → Couture", it: "Classico → Couture", de: "Klassisch → Couture", fr: "Classique → Couture", es: "Clásico → Couture" },
    },
  ];

  const current = pairs[pairIdx];

  const move = (clientX) => {
    if (!sliderRef.current) return;
    const rect = sliderRef.current.getBoundingClientRect();
    const x = clientX - rect.left;
    const p = Math.max(0, Math.min(100, (x / rect.width) * 100));
    setPos(p);
  };
  const onMouseMove = (e) => { if (e.buttons === 1) move(e.clientX); };
  const onMouseDown = (e) => { move(e.clientX); };
  const onTouchMove = (e) => { if (e.touches[0]) move(e.touches[0].clientX); };

  // Switching pair: keep handle position, just swap images
  const changePair = (idx) => {
    setPairIdx(idx);
    setPos(50);
  };

  return (
    <section className="section gallery-bg" ref={ref} data-screen-label="03 Before/After">
      <div className="shell">
        <div className="ba-wrap">
          <div className="reveal" style={{ display: "flex", flexDirection: "column", gap: 24 }}>
            <div className="eyebrow">{t("ga_eyebrow")}</div>
            <h2 className="display display-lg">{t("ga_title")}</h2>
            <p className="lede">{t("svc_lede")}</p>

            <div className="ba-tabs">
              {pairs.map((p, i) => (
                <button
                  key={i}
                  type="button"
                  className={`ba-tab ${i === pairIdx ? "active" : ""}`}
                  onClick={() => changePair(i)}
                >
                  <span className="ba-tab-num">{String(i + 1).padStart(2, "0")}</span>
                  <span className="ba-tab-cat">{p.cat[lang] || p.cat.tr}</span>
                </button>
              ))}
            </div>

            <a className="btn-link" onClick={() => go('gallery')}>
              {t("cta_view_all")} <span className="arrow" />
            </a>
          </div>

          <div
            className="ba-slider reveal reveal-delay-1"
            ref={sliderRef}
            style={{ "--pos": pos + "%" }}
            onMouseMove={onMouseMove}
            onMouseDown={onMouseDown}
            onTouchMove={onTouchMove}
          >
            <img loading="eager" decoding="async" src={current.before} alt="Before hair transformation at A_Liz Hairdresser Istanbul" key={`b-${pairIdx}`} />
            <img loading="eager" decoding="async" src={current.after} className="ba-after" alt="After hair transformation at A_Liz Hairdresser Istanbul" key={`a-${pairIdx}`} />
            <div className="ba-label ba-label-before">Before</div>
            <div className="ba-label ba-label-after">After</div>
            <div className="ba-current-label" key={`l-${pairIdx}`}>
              <span className="cat">{current.cat[lang] || current.cat.tr}</span>
              <span className="lbl">{current.label[lang] || current.label.tr}</span>
            </div>
            <div className="ba-handle">
              <div className="ba-knob" />
            </div>
          </div>
        </div>
      </div>
    </section>
  );
}

// ========== RESULTS (Hakiki Sonuçlar) — web only ==========
function Results() {
  const t = useT();
  const { lang } = useLang();
  const ref = useReveal();
  const results = window.AL_DATA?.RESULTS_GALLERY || GALLERY.slice(0, 6);

  return (
    <section className="section results-bg results-web-only" ref={ref} data-screen-label="04 Results">
      <div className="shell">
        <div className="reveal" style={{ textAlign: "center" }}>
          <div className="eyebrow centered brush-under reveal-watch">{t("rv_eyebrow")}</div>
          <h2 className="display display-lg" style={{ marginTop: 16, marginBottom: 48 }}>Hakiki Sonuçlar</h2>
        </div>

        <div className="results-grid reveal reveal-delay-1">
          {results.map((item, i) => (
            <a key={i} className="results-tile" href="#gallery" onClick={(e) => { e.preventDefault(); window.AL_NAV('gallery'); }}>
              <img loading="lazy" decoding="async" src={item.img} alt={`A_Liz Hairdresser — hair transformation ${i + 1}`} />
              <div className="results-overlay">
                <span className="results-label">{item.t || item.name?.[lang] || item.name?.en || ""}</span>
              </div>
            </a>
          ))}
        </div>

        <div style={{ textAlign: "center", marginTop: 48 }}>
          <p style={{ fontSize: 14, color: "rgba(255,255,255,.5)", fontStyle: "italic", marginBottom: 24 }}>
            Sözsüz testimonial — sonuçlar kendisi için konuşuyor
          </p>
          <a className="btn btn-primary" href="#gallery" onClick={(e) => { e.preventDefault(); window.AL_NAV('gallery'); }}>
            Tüm Sonuçları Gör
          </a>
        </div>
      </div>
    </section>
  );
}

// ========== PARTNERS ==========
function Partners() {
  const t = useT();
  const ref = useReveal();
  const brands = ["schwarzkopf", "loreal", "olaplex", "kerastase", "wella", "rallis"];
  return (
    <section className="section-tight partners-bg" ref={ref} data-screen-label="05 Partners">
      <div className="shell">
        <div className="partners-wrap">
          <div className="reveal">
            <div className="eyebrow">{t("pt_eyebrow")}</div>
          </div>
          <div className="partners-list reveal reveal-delay-1">
            {brands.map((b) => <BrandLogo key={b} name={b} />)}
          </div>
        </div>
      </div>
    </section>
  );
}

// ========== SCROLLING SHOWCASE (alternating marquee) ==========
function Showcase() {
  const t = useT();

  // Force autoplay across all browsers — solves Safari/iOS/Chrome edge cases
  useEffect(() => {
    const videos = document.querySelectorAll('.showcase-video');
    const tryPlay = (v) => {
      v.muted = true;
      const p = v.play();
      if (p && p.catch) p.catch(() => {});
    };
    videos.forEach(v => {
      v.muted = true;
      v.playsInline = true;
      v.setAttribute('webkit-playsinline', '');
      tryPlay(v);
      v.addEventListener('canplay', () => tryPlay(v));
      v.addEventListener('loadeddata', () => tryPlay(v));
    });
    // Retry on first user gesture (iOS Low Power Mode fallback)
    const onGesture = () => videos.forEach(tryPlay);
    window.addEventListener('touchstart', onGesture, { once: true, passive: true });
    window.addEventListener('click', onGesture, { once: true });

    // Pause when off-screen to save CPU/battery
    const obs = new IntersectionObserver(entries => {
      entries.forEach(e => {
        if (e.isIntersecting) tryPlay(e.target);
        else e.target.pause();
      });
    }, { threshold: 0.1 });
    videos.forEach(v => obs.observe(v));

    return () => {
      window.removeEventListener('touchstart', onGesture);
      window.removeEventListener('click', onGesture);
      obs.disconnect();
    };
  }, []);

  return (
    <section className="showcase" data-screen-label="Showcase">
      <div className="shell showcase-head">
        <div className="eyebrow centered">{t("sc_eyebrow")}</div>
        <h2 className="display display-lg">{t("sc_title")}</h2>
      </div>

      {/* Video Promo Block */}
      <div className="showcase-videos">
        <div className="showcase-video-wrap">
          <video
            src="assets/video/salon-promo-1.mp4?v=2"
            poster="assets/video/poster-1.jpg"
            autoPlay loop muted playsInline preload="auto"
            disablePictureInPicture
            className="showcase-video"
          />
        </div>
        <div className="showcase-video-wrap">
          <video
            src="assets/video/salon-promo-2.mp4?v=2"
            poster="assets/video/poster-2.jpg"
            autoPlay loop muted playsInline preload="auto"
            disablePictureInPicture
            className="showcase-video"
          />
        </div>
      </div>

    </section>
  );
}

// ========== INSTAGRAM ==========
const IG_PROFILE = "https://www.instagram.com/a_lizhairdresser";
function InstagramFeed() {
  const t = useT();
  const { lang } = useLang();
  const ref = useReveal();

  const copy = {
    sub:  { tr: "Istanbul'dan anlık kareler.", en: "Live moments from Istanbul.", ar: "لحظات حية من إسطنبول.", ru: "Живые моменты из Стамбула.", de: "Livebilder aus Istanbul.", fr: "Moments en direct d'Istanbul.", it: "Momenti live da Istanbul.", es: "Momentos en vivo desde Istanbul." },
    followers: { tr: "Takipçi", en: "Followers", ar: "متابع", ru: "Подписчиков", it: "Follower", de: "Follower", fr: "Abonnés", es: "Seguidores" },
    posts:     { tr: "Gönderi", en: "Posts", ar: "منشور", ru: "Постов", it: "Post", de: "Beiträge", fr: "Posts", es: "Posts" },
    cta:       { tr: "Takip Et", en: "Follow", ar: "تابعنا", ru: "Подписаться", it: "Seguici", de: "Folgen", fr: "Suivre", es: "Seguir" },
  };
  const L = (o) => o[lang] || o.en;

  return (
    <section className="ig-pro-section" ref={ref} data-screen-label="06 Instagram">

      {/* ── MOBILE: Stories Ring Layout ── */}
      <div className="ig-stories-wrap reveal">
        <a className="ig-stories-ring" href={IG_PROFILE} target="_blank" rel="noopener" aria-label="Instagram">
          <div className="ig-stories-ring-inner">
            <img loading="lazy" decoding="async" src="assets/logo-final.png" alt="A_Liz Hairdresser" />
          </div>
        </a>
        <div className="ig-stories-handle">@a_lizhairdresser</div>
        <div className="ig-stories-name">A_Liz Hairdresser · Istanbul</div>
        <div className="ig-stories-stats">
          <div className="ig-stories-stat">
            <span className="ig-stories-stat-n">120+</span>
            <span className="ig-stories-stat-l">{L(copy.posts)}</span>
          </div>
          <div className="ig-stories-stat-sep" />
          <div className="ig-stories-stat">
            <span className="ig-stories-stat-n">4.800+</span>
            <span className="ig-stories-stat-l">{L(copy.followers)}</span>
          </div>
          <div className="ig-stories-stat-sep" />
          <div className="ig-stories-stat">
            <span className="ig-stories-stat-n">4.9★</span>
            <span className="ig-stories-stat-l">Google</span>
          </div>
        </div>
        <a className="ig-stories-btn" href={IG_PROFILE} target="_blank" rel="noopener">
          {L(copy.cta)}
        </a>
        <p className="ig-stories-sub">{L(copy.sub)}</p>
      </div>

      {/* ── WEB & TABLET: Existing Pro Layout ── */}
      <div className="shell">
        <div className="ig-pro-inner reveal">

          {/* Top row: eyebrow + handle */}
          <div className="ig-pro-top">
            <span className="ig-pro-eyebrow">{t("ig_eyebrow")}</span>
            <a className="ig-pro-handle" href={IG_PROFILE} target="_blank" rel="noopener">
              @a_lizhairdresser
            </a>
          </div>

          {/* Divider */}
          <div className="ig-pro-divider" />

          {/* Middle: stats + tagline */}
          <div className="ig-pro-mid">
            <div className="ig-pro-stats">
              <div className="ig-pro-stat">
                <span className="ig-pro-stat-n">4.800+</span>
                <span className="ig-pro-stat-l">{L(copy.followers)}</span>
              </div>
              <div className="ig-pro-stat-dot" />
              <div className="ig-pro-stat">
                <span className="ig-pro-stat-n">120+</span>
                <span className="ig-pro-stat-l">{L(copy.posts)}</span>
              </div>
              <div className="ig-pro-stat-dot" />
              <div className="ig-pro-stat">
                <span className="ig-pro-stat-n">4.9 ★</span>
                <span className="ig-pro-stat-l">Google</span>
              </div>
            </div>
            <p className="ig-pro-sub">{L(copy.sub)}</p>
          </div>

          {/* Divider */}
          <div className="ig-pro-divider" />

          {/* Bottom: CTA */}
          <div className="ig-pro-bottom">
            <a className="ig-pro-btn" href={IG_PROFILE} target="_blank" rel="noopener">
              <Icon.Instagram />
              <span>{L(copy.cta)} · @a_lizhairdresser</span>
            </a>
            <span className="ig-pro-istanbul">Istanbul · Sultanahmet · 2018</span>
          </div>

        </div>
      </div>{/* end shell */}

    </section>
  );
}

// ========== LOCATION / MAP ==========
function Location() {
  const t = useT();
  const { go } = useRoute();
  const ref = useReveal();
  return (
    <section className="section location-bg" ref={ref} data-screen-label="07 Location">
      <div className="shell">
        <div className="location-wrap">
          <div className="location-info reveal">
            <div>
              <div className="eyebrow">{t("loc_eyebrow")}</div>
              <h2 className="display display-lg" style={{ marginTop: 16, color: "white" }}>{t("loc_title")}</h2>
            </div>
            <div className="location-rows">
              <div className="location-row">
                <span className="k">{t("loc_address_k")}</span>
                <span className="v">
                  {t("loc_address_v")}
                  <small>{t("loc_address_sub")}</small>
                </span>
              </div>
              <div className="location-row">
                <span className="k">{t("loc_hours_k")}</span>
                <span className="v">
                  {t("loc_hours_v")}
                  <small>{t("loc_hours_sub")}</small>
                </span>
              </div>
              <div className="location-row">
                <span className="k">{t("loc_phone_k")}</span>
                <span className="v">{t("loc_phone_v")}</span>
              </div>
              <div className="location-row">
                <span className="k">{t("loc_email_k")}</span>
                <span className="v">{t("loc_email_v")}</span>
              </div>
            </div>
            <div>
              <a className="btn btn-primary" onClick={() => go('appointment')}>
                <span>{t("cta_book")}</span>
              </a>
            </div>
          </div>

          <div className="map-frame reveal reveal-delay-1">
            <iframe
              className="map-iframe"
              src="https://maps.google.com/maps?q=Alemdar+Mahallesi+Divanyolu+Caddesi+No+50+Fatih+Istanbul&t=h&z=18&output=embed"
              loading="lazy"
              referrerPolicy="no-referrer-when-downgrade"
              allowFullScreen
              title="A_Liz Hairdresser — Konum"
            />
            <a className="map-overlay" href="https://maps.google.com/?q=Alemdar+Mahallesi+Divanyolu+Caddesi+No+50+Fatih+Istanbul" target="_blank" rel="noopener">
              <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2"><path d="M21 10c0 7-9 13-9 13s-9-6-9-13a9 9 0 0118 0z"/><circle cx="12" cy="10" r="3"/></svg>
              Google Maps'te Aç
            </a>
          </div>
        </div>
      </div>
    </section>
  );
}

// ========== TRUST STRIP ==========
function TrustStrip() {
  const t = useT();
  const { lang } = useLang();
  const [years, yearsRef] = useCountUp(15);
  const [langs, langsRef] = useCountUp(8);
  const [services, servicesRef] = useCountUp(14);

  const labels = {
    exp:   { tr: "Yıl Usta Tecrübesi", en: "Years of Master Craft", ar: "سنة خبرة", ru: "лет мастерства", it: "Anni di Maestria", de: "Jahre Meisterhandwerk", fr: "Ans de Savoir-Faire", es: "Años de Maestría" },
    lang:  { tr: "Dilde Hizmet", en: "Languages Spoken", ar: "لغات الخدمة", ru: "языков сервиса", it: "Lingue Parlate", de: "Sprachen im Service", fr: "Langues Parlées", es: "Idiomas" },
    svc:   { tr: "Uzmanlık Alanı", en: "Disciplines", ar: "تخصص", ru: "направлений", it: "Discipline", de: "Disziplinen", fr: "Disciplines", es: "Disciplinas" },
    open:  { tr: "Her Gün Açık", en: "Open Every Day", ar: "مفتوح يومياً", ru: "Открыто каждый день", it: "Aperto Ogni Giorno", de: "Täglich Geöffnet", fr: "Ouvert Tous les Jours", es: "Abierto Cada Día" },
    openSub: { tr: "10:00 – 24:00", en: "10:00 – 24:00", ar: "10:00 – 24:00", ru: "10:00 – 24:00", it: "10:00 – 24:00", de: "10:00 – 24:00", fr: "10h – 24h", es: "10:00 – 24:00" },
  };
  const L = (o) => o[lang] || o.tr;

  return (
    <section className="trust-strip" data-screen-label="Trust">
      <div className="shell">
        <div className="trust-grid">
          <div className="trust-item" ref={yearsRef}>
            <span className="v">{Math.round(years)}+</span>
            <span className="k">{L(labels.exp)}</span>
          </div>
          <div className="trust-item" ref={langsRef}>
            <span className="v">{Math.round(langs)}</span>
            <span className="k">{L(labels.lang)}</span>
          </div>
          <div className="trust-item" ref={servicesRef}>
            <span className="v">{Math.round(services)}</span>
            <span className="k">{L(labels.svc)}</span>
          </div>
          <div className="trust-item">
            <span className="v">2'</span>
            <span className="k">{L({ tr: "Sultanahmet'e", en: "To Sultanahmet", de: "Bis Sultanahmet", fr: "De Sultanahmet", ar: "إلى السلطان أحمد", ru: "До Султанахмет", it: "Da Sultanahmet", es: "A Sultanahmet" })}</span>
          </div>
        </div>
      </div>
    </section>
  );
}

// ========== PRESS STRIP ==========
function PressStrip() {
  const t = useT();
  const press = ["vogue", "cosmo", "elle", "timeout", "marie", "harpers"];

  // Press logos marquee: rAF ile kaydir
  useEffect(() => {
    const el = document.querySelector('.press-logos-track');
    if (!el) return;
    if (el.getAnimations) el.getAnimations().forEach(a => a.cancel());
    let offset = 0, lastTs = null, paused = false, raf;
    const step = (ts) => {
      if (lastTs !== null && !paused) {
        const dt = Math.min(ts - lastTs, 50);
        const total = el.scrollWidth / 2;
        if (total > 0) {
          offset -= (total / 38000) * dt;
          if (offset < -total) offset += total;
          el.style.cssText = `transform: translateX(${offset}px) !important;`;
        }
      }
      lastTs = ts;
      raf = requestAnimationFrame(step);
    };
    raf = requestAnimationFrame(step);
    const parent = el.closest('.press-strip');
    const p = () => { paused = true; };
    const r = () => { paused = false; lastTs = null; };
    parent?.addEventListener('mouseenter', p);
    parent?.addEventListener('mouseleave', r);
    return () => { cancelAnimationFrame(raf); parent?.removeEventListener('mouseenter', p); parent?.removeEventListener('mouseleave', r); el.style.transform = ''; };
  }, []);

  return (
    <section className="press-strip" data-screen-label="Press">
      <div className="shell press-strip-inner">
        <span className="label">{t("press_eyebrow")}</span>
        {/* Desktop: static logos */}
        <div className="press-logos press-logos-desktop">
          {press.map((p) => <BrandLogo key={p} name={p} />)}
        </div>
        {/* Mobile: infinite scroll marquee */}
        <div className="press-logos-marquee-wrap">
          <div className="press-logos-track">
            {[...press, ...press].map((p, i) => <BrandLogo key={i} name={p} />)}
          </div>
        </div>
      </div>
    </section>
  );
}

// ========== FAQ ==========
function FAQ() {
  const t = useT();
  const { go } = useRoute();
  const ref = useReveal();
  const [openIdx, setOpenIdx] = useState(0);
  const faqs = [
    ["faq_1_q", "faq_1_a"],
    ["faq_2_q", "faq_2_a"],
    ["faq_3_q", "faq_3_a"],
    ["faq_4_q", "faq_4_a"],
    ["faq_5_q", "faq_5_a"],
    ["faq_6_q", "faq_6_a"],
  ];
  return (
    <section className="section faq-bg" ref={ref} data-screen-label="FAQ">
      <div className="shell">
        <div className="faq-grid">
          <div className="reveal">
            <div className="eyebrow">{t("faq_eyebrow")}</div>
            <h2 className="display display-lg" style={{ marginTop: 16 }}>{t("faq_title")}</h2>
            <p className="lede" style={{ marginTop: 24 }}>{t("ann_msg")}</p>
            <div style={{ marginTop: 32 }}>
              <a className="btn-link" onClick={() => go('appointment')}>
                {t("cta_book")} <span className="arrow" />
              </a>
            </div>
          </div>
          <div className="faq-list reveal reveal-delay-1">
            {faqs.map(([qk, ak], i) => (
              <div key={i} className={`faq-item ${openIdx === i ? "open" : ""}`}>
                <button className="faq-trigger" onClick={() => setOpenIdx(openIdx === i ? -1 : i)}>
                  <span>{t(qk)}</span>
                  <span className="faq-icon" />
                </button>
                <div className="faq-body">
                  <div className="faq-body-inner">{t(ak)}</div>
                </div>
              </div>
            ))}
          </div>
        </div>
      </div>
    </section>
  );
}

// ========== FEATURED OFFER (Ayak Masajı · €10) ==========
function FeaturedOffer() {
  const t = useT();
  const { lang } = useLang();
  const ref = useReveal();
  const offerMsgMap = {
    tr: "Merhaba, sezon önerisi 30 dakikalık ayak masajı (€10) için randevu almak istiyorum.",
    en: "Hello, I'd like to book the seasonal foot massage (30 min · €10).",
    ar: "مرحباً، أود حجز جلسة تدليك القدمين الموسمية (30 دقيقة · €10).",
    ru: "Здравствуйте, хочу записаться на сезонный массаж стоп (30 мин · €10).",
    it: "Ciao, vorrei prenotare il massaggio plantare (30 min · €10).",
    de: "Hallo, ich möchte die Fußmassage (30 Min · €10) buchen.",
    fr: "Bonjour, je souhaite réserver le massage des pieds (30 min · €10).",
    es: "Hola, quisiera reservar el masaje de pies (30 min · €10).",
  };
  const offerWaLink = `https://wa.me/905388745166`;

  return (
    <section className="section offer-bg" ref={ref} data-screen-label="Featured Offer">
      <div className="shell">
        <div className="offer-wrap">
          <a className="offer-image" href={offerWaLink} target="_blank" rel="noopener">
            <img loading="eager" decoding="async" src="assets/img/style-5.webp" alt="Foot massage" />
            <div className="offer-tag reveal">{t("offer_eyebrow")}</div>
            <div className="offer-price-overlay">
              <span className="amt">€10</span>
              <span className="lbl">{t("offer_duration")}</span>
            </div>
          </a>

          <div className="offer-content reveal reveal-delay-1">
            <div className="eyebrow">{t("offer_eyebrow")}</div>
            <h2 className="display display-lg">{t("offer_title")}</h2>
            <p className="lede">{t("offer_lede")}</p>

            <div className="offer-meta">
              <div className="offer-meta-item"><span className="dot" /><span>{t("offer_small_1")}</span></div>
              <div className="offer-meta-item"><span className="dot" /><span>{t("offer_small_2")}</span></div>
              <div className="offer-meta-item"><span className="dot" /><span>{t("offer_small_3")}</span></div>
            </div>

            <div className="offer-cta-row">
              <a className="btn btn-primary" href={offerWaLink} target="_blank" rel="noopener">
                <span><Icon.Wa /> {t("offer_cta")}</span>
              </a>
              <span className="offer-fine">{t("offer_price_label")}: €10 · {t("offer_duration")}</span>
            </div>
          </div>
        </div>
      </div>
    </section>
  );
}

// ========== HOME PAGE ==========
function HomePage() {
  usePageSEO('home');
  return (
    <>
      <Hero />
      <TrustStrip />
      <FlowDivider />
      <ServicesPreview />
      <BeforeAfter />
      <FlowDivider />
      <Showcase />
      <Results />
      <PressStrip />
      <InstagramFeed />
      <FlowDivider />
      <FAQ />
      <Location />
      <CtaStrip />
    </>
  );
}

window.HomePage = HomePage;