/* global React */

/* ============================================
   HODNOCENÍ — auto-advancing carousel
   ============================================ */

function SourceBadge({ source, url }) {
  const logo = source === 'google'
    ? React.createElement('svg', { width: 18, height: 18, viewBox: '0 0 48 48', style: { display: 'block' } },
        React.createElement('path', { fill: '#EA4335', d: 'M24 9.5c3.54 0 6.71 1.22 9.21 3.6l6.85-6.85C35.9 2.38 30.47 0 24 0 14.62 0 6.51 5.38 2.56 13.22l7.98 6.19C12.43 13.72 17.74 9.5 24 9.5z' }),
        React.createElement('path', { fill: '#4285F4', d: 'M46.98 24.55c0-1.57-.15-3.09-.38-4.55H24v9.02h12.94c-.58 2.96-2.26 5.48-4.78 7.18l7.73 6c4.51-4.18 7.09-10.36 7.09-17.65z' }),
        React.createElement('path', { fill: '#FBBC05', d: 'M10.53 28.59c-.48-1.45-.76-2.99-.76-4.59s.27-3.14.76-4.59l-7.98-6.19C.92 16.46 0 20.12 0 24c0 3.88.92 7.54 2.56 10.78l7.97-6.19z' }),
        React.createElement('path', { fill: '#34A853', d: 'M24 48c6.48 0 11.93-2.13 15.89-5.81l-7.73-6c-2.18 1.48-4.97 2.34-8.16 2.34-6.26 0-11.57-4.22-13.47-9.91l-7.98 6.19C6.51 42.62 14.62 48 24 48z' })
      )
    : React.createElement('img', {
        src: 'https://www.recenze-kuchyne.cz/img/logo.png',
        alt: 'recenze-kuchyne.cz',
        style: { height: '18px', display: 'block', width: 'auto' },
      });

  return React.createElement('a', {
    href: url,
    target: '_blank',
    rel: 'noopener noreferrer',
    title: source === 'google' ? 'Zobrazit originál na Google' : 'Zobrazit originál na recenze-kuchyne.cz',
    style: {
      display: 'inline-flex', alignItems: 'center',
      textDecoration: 'none', opacity: 0.7,
      transition: 'opacity 0.2s',
    },
    onMouseEnter: e => { e.currentTarget.style.opacity = '1'; },
    onMouseLeave: e => { e.currentTarget.style.opacity = '0.7'; },
  }, logo);
}

function Reviews() {
  const mobile = useIsMobile();

  const reviews = [

    { name: 'Petra D.',           city: 'Olomouc',  stars: 5, text: 'Můžeme pochválit rychlost dodání, dále paní Klukovou, která nám se vším poradila a doporučila to nejlepší řešení pro náš prostor. Montáž proběhla výborně. Se značkou Gorenje jsme spokojeni.', image: 'images/reviews/r1283.webp', source: 'recenze-kuchyne.cz', url: 'https://www.recenze-kuchyne.cz/recenze/kuchyne-gorenje/gorenje-olomouc/1283' },
    { name: 'Vít Zachariáš',      city: 'Jihlava',  stars: 5, text: 'Chci pochválit návrhářku Kateřinu Kabelkovou za skvělé návrhy a nápady. Dále pak montéry Jiřího Stádníka a Petra Malého za profesionalitu a milý přístup po celou dobu. Studio vřele doporučuji.', image: 'images/reviews/r959.webp', source: 'recenze-kuchyne.cz', url: 'https://www.recenze-kuchyne.cz/recenze/kuchyne-gorenje/gorenje-jihlava/959' },

    { name: 'Marcela V.',         city: 'Brno',     stars: 5, text: 'Chci pochválit výbornou spolupráci s paní Kopeckou. Přestože jsme zpočátku neměli jasno v návrhu, návrhářka nám po konzultaci předložila skvělý návrh. Montážní tým dokončil práci i úklid za jeden den.', image: 'images/reviews/r857.webp', source: 'recenze-kuchyne.cz', url: 'https://www.recenze-kuchyne.cz/recenze/kuchyne-gorenje/gorenje-brno-centrum/857' },
    { name: 'D. B.',              city: 'Praha 2',  stars: 5, text: 'Velice spokojení s instalací kuchyně. Návrhářka paní Junková odváděla výbornou práci, věnovala pozornost detailům a potřebám. Montáž proběhla bez problémů v dohodnutém termínu. Profesionální přístup a kvalitní provedení.', image: 'images/reviews/r1113.webp', source: 'recenze-kuchyne.cz', url: 'https://www.recenze-kuchyne.cz/recenze/kuchyne-gorenje/gorenje-praha-2-vinohradska/1113' },

    { name: 'M. Š.',              city: 'Olomouc',  stars: 5, text: 'Celkově jsem maximálně spokojena a rozhodně všem doporučuji. Pochvala pro návrhářku paní Tichou a montéra pana Šošolíka.', image: 'images/reviews/r1221.webp', source: 'recenze-kuchyne.cz', url: 'https://www.recenze-kuchyne.cz/recenze/kuchyne-gorenje/gorenje-olomouc/1221' },
    { name: 'Peter B.',           city: 'Praha 2',  stars: 5, text: 'Od návrhu až po realizaci bylo vše v termínu. Návrh zpracovala profesionálně paní Kristýna Junková s doporučeními na detaily kuchyně. Montáž proběhla bez problémů pod vedením pana Altmana ve výborné kvalitě za jeden den.', image: 'images/reviews/r939.webp', source: 'recenze-kuchyne.cz', url: 'https://www.recenze-kuchyne.cz/recenze/kuchyne-gorenje/gorenje-praha-2-vinohradska/939' },
    { name: 'Kateřina Průchyšová',city: 'Praha',    stars: 5, text: 'Z naší kuchyně jsem naprosto nadšená. Spolupráce s kuchyňským studiem Gorenje byla po celou dobu příjemná. Přístup Kristýny Junkové byl výborný. Kuchyňské studio vřele doporučuji.', image: 'images/google%20recenze/o6.webp', source: 'google', url: 'https://share.google/wiwZwRrx8iDcehk5J' },
    { name: 'Hana P.',            city: 'Jihlava',  stars: 5, text: 'Spokojena s radami a doporučeními návrhářky. Montážní tým byl zkušený a profesionální.', image: 'images/reviews/r1062.webp', source: 'recenze-kuchyne.cz', url: 'https://www.recenze-kuchyne.cz/recenze/kuchyne-gorenje/gorenje-jihlava/1062' },
    { name: 'Jan M.',             city: 'Brno',     stars: 5, text: 'Velmi spokojen s kvalitou dodávky, montáží, designem, technickou dokumentací i řešením reklamací. Zkušený montér sestavil celou kuchyňskou linku výborně.', image: 'images/reviews/r839.webp', source: 'recenze-kuchyne.cz', url: 'https://www.recenze-kuchyne.cz/recenze/kuchyne-gorenje/gorenje-brno-centrum/839' },
    { name: 'Barbora Červenka',   city: 'Praha',    stars: 5, text: 'Rada bych touto cestou poděkovala kuchyňskému studiu Gorenje Praha za naší novou kuchyni. Celá spolupráce probíhala velmi příjemně a odborně. Návrh i montáž proběhly bez problémů. Kuchyni doporučuji.', image: 'images/google%20recenze/o2.webp', source: 'google', url: 'https://share.google/YC777Xq48QiLyLnil' },
    { name: 'Markéta P.',         city: 'Olomouc',  stars: 5, text: 'Doporučujeme kuchyně Gorenje. Kvalita materiálu je výborná. Využili jsme slevu v akci. Všechny dekory jsou k nahlédnutí, jsme moc spokojeni.', image: 'images/reviews/r1134.webp', source: 'recenze-kuchyne.cz', url: 'https://www.recenze-kuchyne.cz/recenze/kuchyne-gorenje/gorenje-olomouc/1134' },
    { name: 'J. G.',              city: 'Praha 2',  stars: 5, text: 'Návrh kuchyně, zaměření i montáž proběhli bez problémů. Každý detail byl promyšlený a odpovídal našim potřebám. Kvalita materiálů a provedení je vynikající. Montážní tým pracoval precizně a profesionálně.', image: 'images/reviews/r1093.webp', source: 'recenze-kuchyne.cz', url: 'https://www.recenze-kuchyne.cz/recenze/kuchyne-gorenje/gorenje-praha-2-vinohradska/1093' },
    { name: 'Katka Mlezivá',      city: 'Jihlava',  stars: 5, text: 'S kuchyní Gorenje Jihlava jsem velmi spokojená. Návrhářka Kabelková dokázala realizovat přesně to, co jsme potřebovali. Montáž proběhla rychle a profesionálně. Doporučuji.', image: 'images/google%20recenze/o11.webp', source: 'google', url: 'https://share.google/CEuWGuDuz8FxW3BCw' },
    { name: 'Alena N.',           city: 'Praha 7',  stars: 5, text: 'Moc milá návrhářka Zuzana nám pomohla si ujasnit, co od kuchyně očekáváme, a ukázala nám několik variant. Komunikace byla příjemná a rychlá. Montáž kuchyně proběhla v termínu — parta přijela včas, ten samý den měli hotovo, vyzkoušeli spotřebiče a uklidili po sobě.', image: 'images/reviews/r513.webp', source: 'recenze-kuchyne.cz', url: 'https://www.recenze-kuchyne.cz/recenze/kuchyne-gorenje/gorenje-praha-7/513' },
    { name: 'Radek N.',           city: 'Brno',     stars: 5, text: 'Konzultace s návrhářem panem Jurkem se vyplatila. Kuchyně je bez úchytek, v bílém lakovaném materiálu kombinovaném s dřevem. Dodávka přišla v termínu, montér pan Malý odvedl výbornou práci. Výsledek: praktická kuchyně s dostatkem pracovní plochy.', image: 'images/reviews/r437.webp', source: 'recenze-kuchyne.cz', url: 'https://www.recenze-kuchyne.cz/recenze/kuchyne-gorenje/gorenje-brno-centrum/437' },
    { name: 'Tereza Jeřábková',   city: 'Praha',    stars: 5, text: 'Pořízení kuchyně proběhlo naprosto hladce. Přístup celého týmu byl profesionální a vstřícný. Návrhářka paní Kristýna Junková se nám věnovala na výbornou. Studio doporučuji.', image: 'images/google%20recenze/o7.webp', source: 'google', url: 'https://share.google/bllahZWHJ1aVNarnF' },
    { name: 'Štěpánka M.',        city: 'Jihlava',  stars: 5, text: 'Kuchyně odpovídá očekávání na výbornou. Návrhářka Kabelková byla nápomocná a vstřícná. Vše proběhlo hladce od návrhu přes dodání až po montáž. Vřele doporučuji.', image: 'images/reviews/r1069.webp', source: 'recenze-kuchyne.cz', url: 'https://www.recenze-kuchyne.cz/recenze/kuchyne-gorenje/gorenje-jihlava/1069' },
    { name: 'J. P.',              city: 'Praha 2',  stars: 5, text: 'Od návrhu kuchyně až po samotnou montáž vše v pořádku a bez problémů. Pokud budu realizovat další novou kuchyň, tak se určitě vrátím.', image: 'images/reviews/r1074.webp', source: 'recenze-kuchyne.cz', url: 'https://www.recenze-kuchyne.cz/recenze/kuchyne-gorenje/gorenje-praha-2-vinohradska/1074' },
    { name: 'Anna Homolková',     city: 'Praha',    stars: 5, text: 'S kuchyňským studiem spolupracujeme již podruhé a opět jsme naprosto spokojeni. Přístup byl vždy profesionální a montáž proběhla bez problémů. Doporučuji všem zájemcům.', image: 'images/google%20recenze/o5.webp', source: 'google', url: 'https://share.google/nbZx0ZP3Qsa09qbjo' },
    { name: 'Josef P.',           city: 'Olomouc',  stars: 5, text: 'Se značkou Gorenje jsme spokojeni. Návrhářka nám pomohla s výběrem. Kvalita je vynikající. Montáž byla hotová za dva dny — profesionálně odvedená práce.', image: 'images/reviews/r1135.webp', source: 'recenze-kuchyne.cz', url: 'https://www.recenze-kuchyne.cz/recenze/kuchyne-gorenje/gorenje-olomouc/1135' },
    { name: 'P. P.',              city: 'Praha 7',  stars: 5, text: 'Kuchyňská linka splnila očekávání. Výborný design a přesná montáž. Celkově velmi spokojeni se servisem i výsledkem. Doporučujeme pro kvalitu a flexibilitu.', image: 'images/reviews/r1083.webp', source: 'recenze-kuchyne.cz', url: 'https://www.recenze-kuchyne.cz/recenze/kuchyne-gorenje/gorenje-praha-7/1083' },
    { name: 'Markéta Mejzlíková', city: 'Jihlava',  stars: 5, text: 'Chci pochválit profesionální přístup celého týmu. Návrhářka Kabelková a montéři odvedli výbornou práci. S výsledkem jsme velmi spokojeni a kuchyni doporučuji.', image: 'images/google%20recenze/o12.webp', source: 'google', url: 'https://share.google/5XW3tnn2IBfc7Al5y' },
    { name: 'Petra P.',           city: 'Brno',     stars: 5, text: 'Moc děkuji celému týmu za skvělý, příjemný a profesionální přístup jak během vytváření návrhu, tak i během montáže.', image: 'images/reviews/r801.webp', source: 'recenze-kuchyne.cz', url: 'https://www.recenze-kuchyne.cz/recenze/kuchyne-gorenje/gorenje-brno-centrum/801' },
    { name: 'A. U.',              city: 'Praha 2',  stars: 5, text: 'Spolupráce s paní Junkovou z Vinohradského studia byla příkladná. Vše proběhlo v pořádku. Doporučuji.', image: 'images/reviews/r1053.webp', source: 'recenze-kuchyne.cz', url: 'https://www.recenze-kuchyne.cz/recenze/kuchyne-gorenje/gorenje-praha-2-vinohradska/1053' },

    { name: 'Lucie Džama',        city: 'Praha 2',  stars: 5, text: 'Spolupráce s Kristýnou Junkovou na návrhu kuchyní je výborná již po několik let. Profesionální a příjemný přístup, řešení šitá na míru konkrétním požadavkům. Všichni klienti byli se svými kuchyněmi spokojeni a případné problémy byly řešeny efektivně.', image: 'images/reviews/r1037.webp', source: 'recenze-kuchyne.cz', url: 'https://www.recenze-kuchyne.cz/recenze/kuchyne-gorenje/gorenje-praha-2-vinohradska/1037' },
    { name: 'Gio Gio',            city: 'Praha',    stars: 5, text: 'Flawless kitchen purchase from design to installation! Krystina was absolutely fantastic, she supported us throughout the process and gave us excellent ideas that we successfully implemented. We are really happy we chose them!', image: 'images/google%20recenze/o3.webp', source: 'google', url: 'https://share.google/e1dOg6ECrJi4eBnqH' },
    { name: 'Jan Pulz',           city: 'Praha 7',  stars: 5, text: 'Opravdu skvělá spolupráce při přípravě návrhu i při vlastní instalaci. Paní návrhářka měla svatou trpělivost s úpravami návrhů. Úpravy prostoru i vlastní realizaci prováděli skuteční profesionálové; dodávka byla provedena před termínem.', image: 'images/reviews/r301.webp', source: 'recenze-kuchyne.cz', url: 'https://www.recenze-kuchyne.cz/recenze/kuchyne-gorenje/gorenje-praha-7/301' },
    { name: 'Vlastimila Perna',   city: 'Jihlava',  stars: 5, text: 'Velice spokojená. Montáž i výsledek předčily naše očekávání. Vše proběhlo bez problémů a přesně v termínu.', image: 'images/google%20recenze/o10.webp', source: 'google', url: 'https://share.google/5rt06HiFnwydCgCna' },
    { name: 'N. V.',              city: 'Praha 2',  stars: 5, text: 'Kuchyni navrhla Kristýna Junková Janatová. Montáž byla hotová za jeden den. Moderní design, vše doporučuji.', image: 'images/reviews/r1007.webp', source: 'recenze-kuchyne.cz', url: 'https://www.recenze-kuchyne.cz/recenze/kuchyne-gorenje/gorenje-praha-2-vinohradska/1007' },
    { name: 'Dominika Fišerová',  city: 'Jihlava',  stars: 5, text: 'Jsem naprosto spokojená s kuchyňským studiem Gorenje Jihlava. Přístup byl velice přátelský a realizace proběhla hladce. Výsledek je skvělý. Jen doporučuji.', image: 'images/google%20recenze/o13.webp', source: 'google', url: 'https://share.google/BD1b4J6vWO96d1WL7' },
    { name: 'M. M.',              city: 'Praha 2',  stars: 5, text: 'Profesionální přístup studia i návrhářky Evy Kačeňákové. Počáteční koncept byl rozpracován do detailního návrhu v řádu dní. Kuchyně dodána před termínem. Montáž skvělá. Vřele doporučuji.', image: 'images/reviews/r969.webp', source: 'recenze-kuchyne.cz', url: 'https://www.recenze-kuchyne.cz/recenze/kuchyne-gorenje/gorenje-praha-2-vinohradska/969' },
    { name: 'Michal P.',          city: 'Jihlava',  stars: 5, text: 'Profesionální a vstřícný přístup návrhářky. Realizace přesně splnila očekávání. Drobný problém s dodávkou byl rychle vyřešen. Výsledek předčil očekávání.', image: 'images/reviews/r1020.webp', source: 'recenze-kuchyne.cz', url: 'https://www.recenze-kuchyne.cz/recenze/kuchyne-gorenje/gorenje-jihlava/1020' },
    { name: 'Vlastislav Š.',      city: 'Praha 7',  stars: 5, text: 'Pořízení kuchyně Gorenje můžeme všem jen doporučit. Od počátku při jejím plánování jsme byli spokojeni s přístupem a profesionalitou paní architektky na pobočce v Praze 7. Oceňujeme včasnost, kvalitu montáže a výborné provedení. Děkujeme celému týmu — manželé Šebestovi.', image: 'images/reviews/r1176.webp', source: 'recenze-kuchyne.cz', url: 'https://www.recenze-kuchyne.cz/recenze/kuchyne-gorenje/gorenje-praha-7/1176' },
  ];

  const visible = mobile ? 1 : 3;
  const gap = mobile ? 16 : 24;
  const maxIndex = reviews.length - visible;

  const [index, setIndex] = React.useState(0);
  const timerRef = React.useRef(null);
  const trackRef = React.useRef(null);   // outer overflow:hidden wrapper
  const innerRef = React.useRef(null);   // translating flex div
  const dragStartX = React.useRef(null);
  const dragStartY = React.useRef(null);
  const isDragging = React.useRef(false);
  const isDirectionSet = React.useRef(false);
  // store the React-controlled transform so we can restore it after an aborted drag
  const baseTransform = `translateX(calc(-${index} * (calc((100% - ${24 * (mobile ? 0 : 2)}px) / ${mobile ? 1 : 3}) + ${gap}px)))`;

  const startTimer = () => {
    clearInterval(timerRef.current);
    timerRef.current = setInterval(() => {
      setIndex(i => i >= maxIndex ? 0 : i + 1);
    }, 4500);
  };

  React.useEffect(() => {
    startTimer();
    return () => clearInterval(timerRef.current);
  }, [mobile]);

  const go = (dir) => {
    setIndex(i => {
      const next = i + dir;
      return next < 0 ? maxIndex : next > maxIndex ? 0 : next;
    });
    startTimer();
  };

  const onPointerDown = (e) => {
    dragStartX.current = e.clientX;
    dragStartY.current = e.clientY;
    isDragging.current = e.pointerType !== 'touch';
    isDirectionSet.current = e.pointerType !== 'touch';
    clearInterval(timerRef.current);
    if (innerRef.current) innerRef.current.style.transition = 'none';
    if (trackRef.current) trackRef.current.style.cursor = 'grabbing';
    if (e.pointerType !== 'touch') {
      e.preventDefault();
      trackRef.current?.setPointerCapture?.(e.pointerId);
    }
  };

  const onPointerMove = (e) => {
    if (e.pointerType === 'touch' && !isDirectionSet.current) {
      const dx = Math.abs(e.clientX - dragStartX.current);
      const dy = Math.abs(e.clientY - dragStartY.current);
      if (dx < 5 && dy < 5) return;
      isDirectionSet.current = true;
      if (dx >= dy * 1.2) {
        isDragging.current = true;
        trackRef.current?.setPointerCapture?.(e.pointerId);
      } else {
        return; // vertical scroll — don't capture
      }
    }
    if (!isDragging.current) return;
    const delta = e.clientX - dragStartX.current;
    if (innerRef.current && trackRef.current) {
      const containerW = trackRef.current.clientWidth;
      const cardW = (containerW - gap * (visible - 1)) / visible;
      const baseOffset = -index * (cardW + gap);
      innerRef.current.style.transform = `translateX(${baseOffset + delta}px)`;
    }
  };

  const onPointerUp = (e) => {
    if (trackRef.current) trackRef.current.style.cursor = 'grab';
    // Re-enable CSS transition before we snap
    if (innerRef.current) innerRef.current.style.transition = 'transform 0.5s cubic-bezier(0.4, 0, 0.2, 1)';

    if (!isDragging.current) { isDirectionSet.current = false; return; }
    isDragging.current = false;
    isDirectionSet.current = false;

    const delta = dragStartX.current - e.clientX; // positive = swipe left = forward
    if (Math.abs(delta) > 30 && trackRef.current) {
      const containerW = trackRef.current.clientWidth;
      const cardW = (containerW - gap * (visible - 1)) / visible;
      const cardsToMove = Math.max(1, Math.round(Math.abs(delta) / (cardW + gap)));
      const dir = delta > 0 ? 1 : -1;
      // setIndex triggers re-render which applies the CSS-transform + transition → smooth snap
      setIndex(i => Math.max(0, Math.min(maxIndex, i + dir * cardsToMove)));
    } else {
      // Snap back: restore current transform with transition
      if (innerRef.current && trackRef.current) {
        const containerW = trackRef.current.clientWidth;
        const cardW = (containerW - gap * (visible - 1)) / visible;
        innerRef.current.style.transform = `translateX(${-index * (cardW + gap)}px)`;
      }
      startTimer();
    }
  };

  // Card takes 1/visible of container (minus gaps)
  const cardPct = `calc((100% - ${gap * (visible - 1)}px) / ${visible})`;

  const NavBtn = ({ dir }) => (
    <button
      onClick={() => go(dir)}
      style={{
        width: mobile ? '40px' : '44px',
        height: mobile ? '40px' : '44px',
        borderRadius: '50%',
        border: '1px solid var(--line)',
        background: '#ffffff',
        cursor: 'pointer',
        display: 'flex',
        alignItems: 'center',
        justifyContent: 'center',
        flexShrink: 0,
        transition: 'background 0.15s, border-color 0.15s',
      }}
      onMouseEnter={e => { e.currentTarget.style.background = 'var(--ink)'; e.currentTarget.style.borderColor = 'var(--ink)'; e.currentTarget.querySelector('svg').style.color = '#fff'; }}
      onMouseLeave={e => { e.currentTarget.style.background = '#ffffff'; e.currentTarget.style.borderColor = 'var(--line)'; e.currentTarget.querySelector('svg').style.color = 'var(--ink)'; }}
    >
      <svg width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="var(--ink)" strokeWidth="2" strokeLinecap="round" strokeLinejoin="round" style={{ transition: 'color 0.15s' }}>
        {dir === -1
          ? <polyline points="15 18 9 12 15 6" />
          : <polyline points="9 18 15 12 9 6" />}
      </svg>
    </button>
  );

  return (
    <section id="recenze" style={{ padding: mobile ? '60px 0' : '80px 0', background: '#ffffff', overflowX: 'hidden' }}>
      <div className="container">
        <div style={{ marginBottom: mobile ? '32px' : '48px' }}>
          <div className="eyebrow" style={{ marginBottom: '14px' }}>1 000+ hodnocení</div>
          <h2 className="display-l" style={{ margin: '0' }}>
            Ověřeno vámi
          </h2>
          <p className="body-text" style={{ marginTop: '16px', marginBottom: 0, maxWidth: mobile ? undefined : '60%' }}>
            Za 30 let naší práce jsme předali klíče od více než <strong>7 000 nových kuchyní</strong>. Každá recenze je pro nás závazkem – i díky tomu si dlouhodobě držíme výjimečný průměr <strong>4,8 z 5 hvězdiček</strong>.
          </p>
        </div>

        {/* Carousel track */}
        <div style={mobile ? { overflow: 'hidden', margin: '0 -20px', padding: '0 28px' } : {}}>
        <div
          ref={trackRef}
          onPointerDown={onPointerDown}
          onPointerMove={onPointerMove}
          onPointerUp={onPointerUp}
          onPointerCancel={onPointerUp}
          style={{ overflow: mobile ? 'visible' : 'hidden', cursor: 'grab', userSelect: 'none', touchAction: 'pan-y', WebkitUserDrag: 'none' }}
          onDragStart={e => e.preventDefault()}
        >
          <div ref={innerRef} style={{
            display: 'flex',
            gap: gap + 'px',
            transform: `translateX(calc(-${index} * (${cardPct} + ${gap}px)))`,
            transition: 'transform 0.5s cubic-bezier(0.4, 0, 0.2, 1)',
          }}>
            {reviews.map((r, i) => (
              <div key={i} style={{
                minWidth: cardPct,
                maxWidth: cardPct,
                flexShrink: 0,
                display: 'flex',
                flexDirection: 'column',
              }}>
                <img src={r.image} alt={r.name} draggable={false} style={{
                  width: '100%',
                  aspectRatio: '4 / 3',
                  objectFit: 'cover',
                  borderRadius: '10px',
                  display: 'block',
                  pointerEvents: 'none',
                }} />
                <div style={{
                  padding: mobile ? '18px 4px 0' : '24px 4px 0',
                  display: 'flex',
                  flexDirection: 'column',
                  gap: mobile ? '10px' : '14px',
                }}>
                  <div style={{ display: 'flex', alignItems: 'center', gap: '12px', fontSize: '13px' }}>
                    <div style={{ display: 'flex', gap: '2px', color: 'var(--star)' }}>
                      {[...Array(r.stars || 5)].map((_, j) => (
                        <svg key={j} width="12" height="12" viewBox="0 0 24 24" fill="currentColor">
                          <path d="M12 3l2.7 5.7 6.3.9-4.5 4.4 1.1 6.3L12 17.3l-5.6 3 1.1-6.3L3 9.6l6.3-.9z"/>
                        </svg>
                      ))}
                    </div>
                    <span style={{ fontWeight: 500, color: 'var(--ink)' }}>{r.name}</span>
                    <span style={{ color: 'var(--ink-muted)', marginLeft: 'auto' }}>{r.city}</span>
                  </div>
                  <p style={{
                    fontFamily: 'var(--serif)',
                    fontSize: mobile ? '15px' : '17px',
                    lineHeight: 1.45,
                    color: 'var(--ink-muted)',
                    fontWeight: 300,
                    margin: 0,
                  }}>"{r.text}"</p>
                  {r.url && (
                    <div style={{ marginTop: '4px', display: 'flex', justifyContent: 'flex-end' }}>
                      <SourceBadge source={r.source} url={r.url} />
                    </div>
                  )}
                </div>
              </div>
            ))}
          </div>
        </div>
        </div>

        {/* Slider navigator */}
        {(() => {
          const sliderDragging = React.useRef(false);
          const thumbRef = React.useRef(null);

          const getIndexFromPointer = (e, el) => {
            const rect = el.getBoundingClientRect();
            const x = Math.max(0, Math.min(rect.width, e.clientX - rect.left));
            return Math.round((x / rect.width) * maxIndex);
          };

          const onSliderDown = (e) => {
            sliderDragging.current = true;
            e.currentTarget.setPointerCapture(e.pointerId);
            clearInterval(timerRef.current);
            if (thumbRef.current) thumbRef.current.style.transition = 'none';
            setIndex(getIndexFromPointer(e, e.currentTarget));
          };
          const onSliderMove = (e) => {
            if (!sliderDragging.current) return;
            setIndex(getIndexFromPointer(e, e.currentTarget));
          };
          const onSliderUp = () => {
            sliderDragging.current = false;
            if (thumbRef.current) thumbRef.current.style.transition = 'left 0.4s cubic-bezier(0.4, 0, 0.2, 1)';
            startTimer();
          };

          return (
            <div style={{ margin: mobile ? '28px auto 0' : '36px auto 0', width: mobile ? '80%' : '30%' }}>
              {/* Outer frosted pill — matches realizations switcher */}
              <div style={{
                display: 'flex',
                alignItems: 'center',
                padding: mobile ? '16px 24px' : '21px 34px',
                borderRadius: '999px',
                background: 'rgba(242,242,242,0.72)',
                backdropFilter: 'blur(24px) saturate(170%)',
                WebkitBackdropFilter: 'blur(24px) saturate(170%)',
              }}>
                <div
                  onPointerDown={onSliderDown}
                  onPointerMove={onSliderMove}
                  onPointerUp={onSliderUp}
                  onPointerCancel={onSliderUp}
                  style={{
                    flex: 1,
                    height: mobile ? '18px' : '10px',
                    borderRadius: '999px',
                    background: 'rgba(88,88,88,0.22)',
                    position: 'relative',
                    cursor: 'pointer',
                    overflow: 'hidden',
                    touchAction: 'none',
                  }}
                >
                  <div ref={thumbRef} style={{
                    position: 'absolute',
                    top: 0,
                    height: '100%',
                    borderRadius: '999px',
                    background: 'rgba(52,52,52,0.72)',
                    width: `${(visible / reviews.length) * 100}%`,
                    left: `${(index / reviews.length) * 100}%`,
                    transition: 'left 0.4s cubic-bezier(0.4, 0, 0.2, 1)',
                    pointerEvents: 'none',
                  }} />
                </div>
              </div>
            </div>
          );
        })()}
      </div>
    </section>
  );
}

/* ============================================
   CTA — formulář ke schůzce
   ============================================ */
function CtaForm({ headline } = {}) {
  const mobile = useIsMobile();

  React.useEffect(() => {
    if (!document.getElementById('dot-lead-form-script')) {
      const s = document.createElement('script');
      s.id = 'dot-lead-form-script';
      s.src = 'https://crm.dotkuchyne.cz/iframe/embed.js';
      s.async = true;
      document.head.appendChild(s);
    }
  }, []);
  const benefits = [
    {
      icon: (<svg width="22" height="22" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="1.4"><path d="M20 21v-2a4 4 0 0 0-4-4H8a4 4 0 0 0-4 4v2"/><circle cx="12" cy="7" r="4"/></svg>),
      t: 'Konzultaci a prohlídku našich kuchyní',
      d: 'S designérem proberete své představy, prostor i rozpočet a naživo si prohlédnete materiály, vybavení a funkční řešení.',
    },
    {
      icon: (<svg width="22" height="22" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="1.4"><path d="M21 16V8a2 2 0 0 0-1-1.73l-7-4a2 2 0 0 0-2 0l-7 4A2 2 0 0 0 3 8v8a2 2 0 0 0 1 1.73l7 4a2 2 0 0 0 2 0l7-4A2 2 0 0 0 21 16z"/><polyline points="3.27 6.96 12 12.01 20.73 6.96"/><line x1="12" y1="22.08" x2="12" y2="12"/></svg>),
      t: '3D návrh zdarma',
      d: 'Uvidíte svou budoucí kuchyni v návrhu vytvořeném podle vašich rozměrů, vkusu a potřeb.',
    },
    {
      icon: (<svg width="22" height="22" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="1.4"><path d="M14 2H6a2 2 0 0 0-2 2v16a2 2 0 0 0 2 2h12a2 2 0 0 0 2-2V8z"/><polyline points="14 2 14 8 20 8"/><line x1="16" y1="13" x2="8" y2="13"/><line x1="16" y1="17" x2="8" y2="17"/><polyline points="10 9 9 9 8 9"/></svg>),
      t: 'Konkrétní nacenění',
      d: 'Připravíme přehlednou kalkulaci zvoleného řešení včetně vybavení a spotřebičů.',
    },
  ];

  const promoDeadline = new Date('2026-09-01T00:00:00');
  const [countdown, setCountdown] = React.useState({ d: 0, h: 0, m: 0, s: 0 });
  React.useEffect(() => {
    function tick() {
      const diff = promoDeadline - Date.now();
      if (diff <= 0) { setCountdown({ d: 0, h: 0, m: 0, s: 0 }); return; }
      setCountdown({
        d: Math.floor(diff / 86400000),
        h: Math.floor((diff % 86400000) / 3600000),
        m: Math.floor((diff % 3600000) / 60000),
        s: Math.floor((diff % 60000) / 1000),
      });
    }
    tick();
    const id = setInterval(tick, 1000);
    return () => clearInterval(id);
  }, []);

  const bgColor = '#f0ebe4';
  const imgH = mobile ? 650 : 1397;

  return (
    <section id="kontakt" style={{ background: bgColor, padding: 0 }}>

      {/* ── Hero image with overlaid headline ── */}
      <div style={{ position: 'relative', height: imgH + 'px', overflow: 'hidden' }}>
        <img
          src="images/blankkitchen.webp"
          alt="3D návrh kuchyně"
          style={{
            width: '100%',
            height: '100%',
            objectFit: 'cover',
            objectPosition: 'center top',
            display: 'block',
          }}
        />
        {/* Headline */}
        <div style={{
          position: 'absolute',
          top: mobile ? '46px' : '90px',
          left: 0, right: 0,
          textAlign: 'center',
        }}>
          <div className="container">
            <div className="eyebrow" style={{ color: 'rgba(255,255,255,0.75)', marginBottom: mobile ? '6px' : '14px' }}>3D návrh zdarma</div>
            <h2 className="display-l" style={{ margin: '0 auto', color: '#ffffff', maxWidth: mobile ? undefined : '780px', fontSize: mobile ? '34px' : undefined }}>
              {headline || (<>Jak bude vypadat vaše nová kuchyň?</>)}
            </h2>
          </div>
        </div>
      </div>

      {/* ── Form + benefits ── */}
      <div className="container" style={{ paddingTop: mobile ? '32px' : '48px', paddingBottom: mobile ? '60px' : '100px', marginTop: mobile ? '-100px' : '-230px', position: 'relative', zIndex: 1 }}>
        <div style={{
          display: 'grid',
          gridTemplateColumns: mobile ? '1fr' : '1fr 1fr',
          gap: mobile ? '40px' : '80px',
          maxWidth: '1180px',
          margin: '0 auto',
          alignItems: 'start',
        }}>
          <div>
            <h2 id="cta-heading" className="display-s" style={{ marginBottom: mobile ? '34px' : '36px', fontWeight: 500, fontSize: mobile ? '32px' : undefined, lineHeight: 1.3 }}>
              Přijďte si prohlédnout naše studio a získejte:
            </h2>
            <div style={{ display: 'flex', flexDirection: 'column', gap: mobile ? '20px' : '24px' }}>
              {benefits.map((b, i) => (
                <div key={i} style={{
                  display: 'grid',
                  gridTemplateColumns: '48px 1fr',
                  gap: mobile ? '14px' : '20px',
                  alignItems: 'flex-start',
                }}>
                  <div style={{
                    width: '44px', height: '44px',
                    borderRadius: '8px',
                    background: '#e3d8ca',
                    border: 'none',
                    display: 'flex', alignItems: 'center', justifyContent: 'center',
                    color: 'var(--ink)',
                    flexShrink: 0,
                  }}>
                    {b.icon}
                  </div>
                  <div>
                    <div className="serif" style={{ fontSize: mobile ? '18px' : '20px', marginBottom: '4px', fontWeight: 500, lineHeight: 1.3 }}>{b.t}</div>
                    <div className="body-small" style={{ fontSize: '16px', fontWeight: 300, lineHeight: 1.3 }}>{b.d}</div>
                  </div>
                </div>
              ))}

              {/* Promo box */}
              <div style={{
                marginTop: mobile ? '4px' : '8px',
                borderRadius: '12px',
                background: '#b59e81',
                padding: mobile ? '28px 14px 74px' : '48px 48px 68px',
                color: '#ffffff',
                display: 'flex',
                flexDirection: mobile ? 'column' : 'row',
                gap: mobile ? '12px' : '24px',
                alignItems: mobile ? 'center' : 'center',
                textAlign: mobile ? 'center' : 'left',
                position: 'relative',
              }}>
                {/* Large icon */}
                <div style={{ flexShrink: 0, display: 'flex', alignItems: 'center', justifyContent: 'center' }}>
                  <svg width={mobile ? 40 : 64} height={mobile ? 40 : 64} viewBox="0 0 24 24" fill="none" stroke="#ffffff" strokeWidth="1.1" strokeLinecap="round" strokeLinejoin="round">
                    <path d="M20 12v10H4V12"/><path d="M22 7H2v5h20V7z"/><path d="M12 22V7"/><path d="M12 7H7.5a2.5 2.5 0 0 1 0-5C11 2 12 7 12 7z"/><path d="M12 7h4.5a2.5 2.5 0 0 0 0-5C13 2 12 7 12 7z"/>
                  </svg>
                </div>
                {/* Text */}
                <div>
                  <div style={{ fontWeight: 400, fontSize: mobile ? '19px' : '24px', lineHeight: 1.2, marginBottom: '8px' }}>
                    Získejte slevu 30 % na kuchyni a 3 spotřebiče zdarma
                  </div>
                  <div style={{ fontSize: '15px', color: 'rgba(255,255,255,0.5)', marginTop: '4px', marginBottom: mobile ? '10px' : undefined }}>Akce platí při objednání do 28. 7. 2026</div>
                  <div style={{ position: 'absolute', bottom: mobile ? '25px' : '8px', right: mobile ? '50%' : '28px', transform: mobile ? 'translateX(50%)' : 'none', display: 'flex', alignItems: 'center', gap: '6px' }}>
                    <span style={{ fontSize: '14px', fontWeight: 400, letterSpacing: '0.12em', textTransform: 'uppercase', color: 'rgba(255,255,255,0.4)' }}>Více na studiu</span>
                    <span style={{ color: 'rgba(255,255,255,0.4)', animation: mobile ? 'arrowSlideDown 1.4s ease-in-out infinite' : 'arrowSlide 1.4s ease-in-out infinite', display: 'inline-block', fontSize: '26px' }}>{mobile ? '↓' : '→'}</span>
                    <style>{`@keyframes arrowSlideDown { 0%, 100% { transform: translateY(0); } 50% { transform: translateY(5px); } }`}</style>
                    <style>{`@keyframes arrowSlide { 0%, 100% { transform: translateX(0); } 50% { transform: translateX(5px); } }`}</style>
                  </div>
                </div>
              </div>
            </div>
          </div>

          <div style={{ borderRadius: '12px', overflow: 'hidden', margin: mobile ? '0 -15px' : undefined }}>
            {/* Heading inside red box */}
            <div style={{ background: '#a6192e', padding: mobile ? '39px 24px 20px' : '47px 32px 20px', textAlign: 'left' }}>
              <div style={{ fontFamily: 'var(--sans)', fontSize: mobile ? '32px' : '28px', fontWeight: 500, color: '#ffffff', marginBottom: '8px', lineHeight: 1.15 }}>
                Domluvit nezávaznou návštěvu:
              </div>
              <div style={{ fontFamily: 'var(--sans)', fontSize: '16px', fontWeight: 300, color: 'rgba(255,255,255,0.65)', lineHeight: 1.5 }}>
                Po odeslání formuláře se vám do 24 hodin ozveme na domluvení termínu.
              </div>
            </div>
            <style>{`[data-dot-lead-form] textarea { max-height: 80px !important; min-height: 80px !important; resize: none !important; }`}</style>
            <div
              data-dot-lead-form
              data-source="29"
              data-css-file={`${window.location.origin}/na-miru2/crm-form.css`}
              data-redirect={`${window.location.origin}/dekujeme`}
              style={{ borderRadius: 0 }}
            >
              <div style={{ background: '#efefef', minHeight: '280px', textAlign: 'center', color: '#999', lineHeight: '280px' }}>
                načítá se objednávkový formulář
              </div>
            </div>
          </div>
        </div>

      </div>
    </section>
  );
}


/* ============================================
   FOOTER
   ============================================ */
function Footer() {
  const mobile = useIsMobile();

  return (
    <footer style={{
      background: 'var(--ink)',
      color: '#cccccc',
      padding: mobile ? '60px 0 82px' : '100px 0 90px',
    }}>
      <div className="container">
        <div style={{
          display: 'grid',
          gridTemplateColumns: mobile ? '1fr' : '1fr 1fr 1fr 1fr',
          gap: mobile ? '40px' : '48px',
          alignItems: 'center',
        }}>
          {/* Logo */}
          <div>
            <Logo inverted />
          </div>

          {/* Název a adresa */}
          <div style={{ display: 'flex', flexDirection: 'column', gap: '6px', fontSize: '14px', alignItems: mobile ? 'flex-start' : 'center', textAlign: mobile ? 'left' : 'center' }}>
            <div style={{ color: '#cccccc' }}>DOT interiors, s.r.o.</div>
            <div style={{ color: '#cccccc' }}>Jindřicha Bubeníčka 1598/7, 104 00 Praha</div>
          </div>

          {/* Kontakty */}
          <div style={{ display: 'flex', flexDirection: 'column', gap: '6px', fontSize: '14px', alignItems: mobile ? 'flex-start' : 'center', textAlign: mobile ? 'left' : 'center' }}>
            <div style={{ color: '#cccccc' }}>+420 793 991 995</div>
            <div style={{ color: '#cccccc' }}>info@dotinteriors.cz</div>
          </div>

          {/* Sociální sítě */}
          <div style={{ display: 'flex', flexDirection: 'column', alignItems: mobile ? 'flex-start' : 'flex-end' }}>
            <div style={{ display: 'flex', flexDirection: 'column', gap: '14px', fontSize: '14px' }}>
              <a href="https://www.instagram.com/dot_kuchyne_a_interiery/" target="_blank" rel="noopener noreferrer" style={{ color: '#cccccc' }}>Instagram</a>
              <a href="https://www.facebook.com/profile.php?id=61590459371092" target="_blank" rel="noopener noreferrer" style={{ color: '#cccccc' }}>Facebook</a>
            </div>
          </div>
        </div>
      </div>
    </footer>
  );
}

/* ============================================
   STUDIOS BAR
   ============================================ */
function StudiosBar() {
  const mobile = useIsMobile();
  const studios = [
    { name: 'Praha Vinohrady', address: 'Vinohradská 2165/48', image: 'images/studia/praha-vinohrady.jpg' },
    { name: 'Praha Letná', address: 'Kamenická 599/26', image: 'images/studia/praha-letna.jpg' },
    { name: 'Brno Centrum', address: 'Dominikánské nám. 186/4', image: 'images/studia/brno-centrum.jpg' },
    { name: 'Jihlava', address: 'Romana Havelky 4957/5b', image: 'images/studia/jihlava.jpg' },
    { name: 'Olomouc', address: 'Masarykova tř. 936/50', image: 'images/studia/olomouc.jpg' },
  ];

  return (
    <section id="nase-studia" style={{
      background: '#2a2a2a',
      padding: mobile ? '40px 0' : '48px 0',
    }}>
      <div className="container">
        <div className="eyebrow" style={{ color: 'rgba(255,255,255,0.45)', marginBottom: mobile ? '20px' : '28px' }}>Naše studia</div>
        <div
          className="no-scrollbar"
          style={{
            display: 'flex',
            gap: mobile ? '12px' : '16px',
            overflowX: 'auto',
            cursor: 'default',
            userSelect: 'none',
            paddingBottom: '8px',
          }}
        >
          {studios.map((s, i) => (
            <div
              key={i}
              style={{
                flex: mobile ? '0 0 58vw' : '0 0 calc(20% - 14px)',
                position: 'relative',
                borderRadius: '10px',
                overflow: 'hidden',
                aspectRatio: '3 / 4',
                flexShrink: 0,
              }}
            >
              <img
                src={s.image}
                alt={s.name}
                style={{
                  position: 'absolute', inset: 0,
                  width: '100%',
                  height: '100%',
                  objectFit: 'cover',
                  display: 'block',
                }}
              />
              {/* gradient overlay bottom */}
              <div style={{
                position: 'absolute', inset: 0,
                background: 'linear-gradient(to top, rgba(0,0,0,0.62) 0%, rgba(0,0,0,0.18) 40%, rgba(0,0,0,0) 60%)',
              }} />
              {/* text bottom-left */}
              <div style={{
                position: 'absolute',
                bottom: mobile ? '12px' : '16px',
                left: mobile ? '12px' : '16px',
                display: 'flex',
                flexDirection: 'column',
                gap: '3px',
              }}>
                <span style={{
                  fontFamily: 'var(--sans)',
                  fontSize: mobile ? '19px' : '17px',
                  fontWeight: 400,
                  color: '#ffffff',
                  lineHeight: 1.2,
                }}>{s.name}</span>
                <span style={{
                  fontFamily: 'var(--sans)',
                  fontSize: mobile ? '15px' : '14px',
                  fontWeight: 400,
                  color: 'rgba(255,255,255,0.75)',
                  lineHeight: 1.4,
                }}>{s.address}</span>
              </div>
            </div>
          ))}
        </div>
      </div>
    </section>
  );
}

/* ============================================
   NAŠI DESIGNÉŘI
   ============================================ */
function DesignersSection() {
  const mobile = useIsMobile();
  const [canPrev, setCanPrev] = React.useState(false);
  const [canNext, setCanNext] = React.useState(true);

  const designers = [
    { name: 'Kristýna Junková Janatová', title: 'Interiérová designérka', studio: 'Praha Vinohrady', photo: 'images/designers/kristyna-junkova.jpg' },
    { name: 'Adema Kassymova',           title: 'Interiérová designérka', studio: 'Praha Vinohrady', photo: 'images/designers/adema-kassymova.jpg' },
    { name: 'Zdenka Tichá',             title: 'Interiérová návrhářka',  studio: 'Brno Centrum',    photo: 'images/56edacb043de4fe8ba4c6d9831411736.webp' },
    { name: 'Markéta Kluková',           title: 'Interiérová designérka', studio: 'Olomouc',         photo: 'images/14e1555935ff4f07ba4a9d9fd4cbaaa2.webp' },
    { name: 'MgA. Rudolf Janák',         title: 'Interiérový designér',   studio: 'Praha Letná',     photo: 'images/designers/rudolf-janak.jpg' },
    { name: 'Zita Ježdíková',            title: 'Interiérová designérka', studio: 'Praha Vinohrady', photo: 'images/designers/zita-jezdikova.jpg' },
    { name: 'Kateřina Kabelková',        title: 'Interiérová návrhářka',  studio: 'Jihlava',         photo: 'images/678715305d204b46874827d72e40ef94.webp' },
    { name: 'Eva Kačeňáková',            title: 'Interiérová designérka', studio: 'Praha Vinohrady', photo: 'images/designers/eva-kacenakova.jpg' },
    { name: 'Gabriela Fišarová',         title: 'Interiérová designérka', studio: 'Praha Letná',     photo: null },
  ];

  function initials(name) {
    return name.replace(/^MgA\.\s*/, '').split(' ').slice(0, 2).map(p => p[0]).join('');
  }

  const cardW = mobile ? Math.round(window.innerWidth * 0.72) : 220;
  const cardGap = mobile ? 14 : 20;

  const trackRef = React.useRef(null);
  const isDragging = React.useRef(false);
  const dragStartX = React.useRef(0);
  const dragStartScroll = React.useRef(0);

  const onPointerDown = (e) => {
    isDragging.current = true;
    dragStartX.current = e.clientX;
    dragStartScroll.current = trackRef.current.scrollLeft;
    trackRef.current.style.cursor = 'grabbing';
    trackRef.current.setPointerCapture?.(e.pointerId);
  };
  const onPointerMove = (e) => {
    if (!isDragging.current) return;
    trackRef.current.scrollLeft = dragStartScroll.current - (e.clientX - dragStartX.current);
    updateArrows();
  };
  const onPointerUp = () => {
    isDragging.current = false;
    if (trackRef.current) trackRef.current.style.cursor = 'grab';
  };

  const updateArrows = () => {
    const el = trackRef.current;
    if (!el) return;
    setCanPrev(el.scrollLeft > 4);
    setCanNext(el.scrollLeft < el.scrollWidth - el.clientWidth - 4);
  };

  const scroll = (dir) => {
    const el = trackRef.current;
    if (!el) return;
    el.scrollBy({ left: dir * (cardW + cardGap) * 3, behavior: 'smooth' });
    setTimeout(updateArrows, 350);
  };

  const ArrowBtn = ({ dir }) => {
    const disabled = dir === -1 ? !canPrev : !canNext;
    return (
      <button
        onClick={() => scroll(dir)}
        disabled={disabled}
        style={{
          width: '44px',
          height: '44px',
          borderRadius: '50%',
          border: 'none',
          background: disabled ? 'rgba(88,88,88,0.10)' : 'rgba(88,88,88,0.18)',
          cursor: disabled ? 'default' : 'pointer',
          display: 'flex',
          alignItems: 'center',
          justifyContent: 'center',
          flexShrink: 0,
          opacity: disabled ? 0.35 : 1,
          transition: 'background 0.15s, opacity 0.2s',
        }}
        onMouseEnter={e => {
          if (!disabled) e.currentTarget.style.background = 'rgba(52,52,52,0.72)';
        }}
        onMouseLeave={e => {
          if (!disabled) e.currentTarget.style.background = 'rgba(88,88,88,0.18)';
        }}
      >
        <svg width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="var(--ink)" strokeWidth="2.2" strokeLinecap="round" strokeLinejoin="round"
          style={{ transition: 'stroke 0.15s' }}>
          {dir === -1
            ? <polyline points="15 18 9 12 15 6" />
            : <polyline points="9 18 15 12 9 6" />}
        </svg>
      </button>
    );
  };

  return (
    <section id="nas-tym" style={{ padding: mobile ? '60px 0' : '100px 0', background: 'var(--bg)' }}>
      <div className="container">
        <div className="section-header" style={{ marginBottom: mobile ? '36px' : '60px' }}>
          <div className="eyebrow" style={{ marginBottom: '14px' }}>Tým DOT</div>
          <h2 className="display-l" style={{ marginTop: '0' }}>
            Naši <em style={{ fontStyle: 'normal', color: 'var(--ink)' }}>designéři</em>
          </h2>
        </div>
        {/* Scrollable track — overflows to the right, clipped by section overflow:hidden */}
        <div style={{ overflow: 'hidden', marginRight: mobile ? '-20px' : '-80px' }}>
          <div
            ref={trackRef}
            className="no-scrollbar"
            onPointerDown={onPointerDown}
            onPointerMove={onPointerMove}
            onPointerUp={onPointerUp}
            onPointerLeave={onPointerUp}
            onScroll={updateArrows}
            style={{
              display: 'flex',
              gap: cardGap + 'px',
              overflowX: 'scroll',
              cursor: 'grab',
              userSelect: 'none',
              paddingRight: mobile ? '20px' : '80px',
            }}
          >
          {designers.map((d, i) => (
            <div key={i} style={{ display: 'flex', flexDirection: 'column', flexShrink: 0, width: cardW + 'px' }}>
              {/* Photo */}
              <div style={{
                aspectRatio: '3/4',
                borderRadius: '10px',
                overflow: 'hidden',
                background: '#e8e4df',
                position: 'relative',
                marginBottom: mobile ? '10px' : '14px',
              }}>
                {d.photo ? (
                  <img
                    src={d.photo}
                    alt={d.name}
                    draggable={false}
                    style={{
                      width: '100%',
                      height: '100%',
                      objectFit: 'cover',
                      objectPosition: 'top center',
                      display: 'block',
                      filter: 'grayscale(20%)',
                      pointerEvents: 'none',
                      userSelect: 'none',
                    }}
                  />
                ) : (
                  <div style={{
                    width: '100%',
                    height: '100%',
                    display: 'flex',
                    alignItems: 'center',
                    justifyContent: 'center',
                    fontSize: mobile ? '28px' : '40px',
                    fontWeight: 700,
                    color: 'rgba(10,10,10,0.2)',
                    letterSpacing: '0.02em',
                  }}>{initials(d.name)}</div>
                )}
              </div>

              {/* Info */}
              <div style={{ paddingLeft: '2px' }}>
                <div style={{
                  fontSize: mobile ? '10px' : '11px',
                  color: '#a6192e',
                  fontWeight: 500,
                  letterSpacing: '0.12em',
                  textTransform: 'uppercase',
                  marginBottom: '5px',
                }}>{d.studio}</div>
                <div style={{
                  fontFamily: 'var(--serif)',
                  fontSize: mobile ? '14px' : '17px',
                  fontWeight: 400,
                  color: 'var(--ink)',
                  lineHeight: 1.2,
                }}>{d.name.replace(/^MgA\.\s*/, '')}</div>
              </div>
            </div>
          ))}
          </div>
        </div>
        {/* Arrow controls */}
        <div style={{ display: 'flex', justifyContent: 'center', marginTop: mobile ? '24px' : '32px' }}>
          <div style={{ display: 'inline-flex', alignItems: 'center', gap: '8px' }}>
            <ArrowBtn dir={-1} />
            <ArrowBtn dir={1} />
          </div>
        </div>
      </div>
    </section>
  );
}

window.Reviews = Reviews;
window.CtaForm = CtaForm;
window.DesignersSection = DesignersSection;
window.StudiosBar = StudiosBar;
window.Footer = Footer;
