/* global React, ReactDOM, TweaksPanel, useTweaks, TweakSection, TweakRadio, TweakColor, TweakToggle, TweakSelect */
const { useState, useEffect, useRef, useMemo, useCallback, useContext, createContext } = React;

/* ============== FEATURE FLAGS ============== */
const SHOW_METAMORFOZY = false; // PO: włącz gdy zdjęcia będą gotowe (2026-06)

/* ============== Default tweak values (persisted) ============== */
const TWEAK_DEFAULTS = /*EDITMODE-BEGIN*/{
  "heroTreatment": "photo",
  "accentEmphasis": "navy",
  "showGold": true,
  "darkAI": true,
  "showCursor": false
}/*EDITMODE-END*/;

/* ============== I18N — context, provider, hook ============== */
const LanguageContext = createContext({ lang: 'pl', setLang: () => {}, t: (k) => k });

function detectInitialLang() {
  try {
    const saved = localStorage.getItem('sdc_lang');
    if (saved && window.SDC_I18N && window.SDC_I18N.available.indexOf(saved) !== -1) return saved;
    const nav = (navigator.language || 'pl').toLowerCase().split('-')[0];
    if (window.SDC_I18N && window.SDC_I18N.available.indexOf(nav) !== -1) return nav;
  } catch (e) {}
  return 'pl';
}

function LanguageProvider({ children }) {
  const [lang, setLangState] = useState(detectInitialLang);
  const setLang = useCallback((l) => {
    if (!window.SDC_I18N || window.SDC_I18N.available.indexOf(l) === -1) return;
    setLangState(l);
    try { localStorage.setItem('sdc_lang', l); } catch (e) {}
  }, []);
  useEffect(() => {
    const meta = (window.SDC_I18N && window.SDC_I18N.dict[lang] && window.SDC_I18N.dict[lang].meta) || {};
    document.documentElement.lang = meta.html_lang || lang;
    if (meta.html_title) document.title = meta.html_title;
  }, [lang]);
  const t = useCallback((key) => {
    if (!window.SDC_I18N) return key;
    const parts = key.split('.');
    const resolve = (root) => {
      let cur = root;
      for (let i = 0; i < parts.length; i++) {
        if (cur == null || typeof cur !== 'object') return undefined;
        cur = cur[parts[i]];
      }
      return cur;
    };
    const v = resolve(window.SDC_I18N.dict[lang]);
    if (v !== undefined && v !== null) return v;
    const fb = resolve(window.SDC_I18N.dict[window.SDC_I18N.default]);
    return fb != null ? fb : key;
  }, [lang]);
  return <LanguageContext.Provider value={{ lang, setLang, t }}>{children}</LanguageContext.Provider>;
}

function useT() { return useContext(LanguageContext); }

/* ============== COOKIE CONSENT ============== */
const CONSENT_VERSION = '2026.06';
const CONSENT_KEY = 'sdc_consent';
const CONSENT_TTL_MS = 365 * 24 * 60 * 60 * 1000; // 12 months per UODO rec

function _loadConsent() {
  try {
    const raw = localStorage.getItem(CONSENT_KEY);
    if (!raw) return null;
    const c = JSON.parse(raw);
    if (!c || c.version !== CONSENT_VERSION) return null;
    if (!c.timestamp_iso) return null;
    if (Date.now() - new Date(c.timestamp_iso).getTime() > CONSENT_TTL_MS) return null;
    return c;
  } catch (e) { return null; }
}

function _saveConsent(categories, method) {
  const c = {
    version: CONSENT_VERSION,
    timestamp_iso: new Date().toISOString(),
    categories: { maps: !!categories.maps, fonts: false, analytics: false },
    method,
  };
  try { localStorage.setItem(CONSENT_KEY, JSON.stringify(c)); } catch (e) {}
  return c;
}

const ConsentContext = createContext({
  consent: null,
  mapsAllowed: false,
  openSettings: () => {},
  grantMaps: () => {},
});

function ConsentProvider({ children }) {
  const [consent, setConsent] = useState(null);
  const [showBanner, setShowBanner] = useState(false);
  const [bannerMode, setBannerMode] = useState('main'); // 'main' | 'manage'

  useEffect(() => {
    const saved = _loadConsent();
    if (saved) {
      setConsent(saved);
    } else {
      setShowBanner(true);
    }
  }, []);

  const acceptAll = useCallback(() => {
    const c = _saveConsent({ maps: true }, 'accept_all');
    setConsent(c);
    setShowBanner(false);
  }, []);

  const rejectAll = useCallback(() => {
    const c = _saveConsent({ maps: false }, 'reject_all');
    setConsent(c);
    setShowBanner(false);
  }, []);

  const saveManage = useCallback((cats) => {
    const c = _saveConsent(cats, 'manage');
    setConsent(c);
    setShowBanner(false);
    setBannerMode('main');
  }, []);

  const openSettings = useCallback(() => {
    setBannerMode('main');
    setShowBanner(true);
  }, []);

  const grantMaps = useCallback(() => {
    const current = _loadConsent();
    const cats = current ? { ...current.categories, maps: true } : { maps: true };
    const c = _saveConsent(cats, 'per_embed');
    setConsent(c);
    setShowBanner(false);
  }, []);

  const mapsAllowed = !!(consent && consent.categories && consent.categories.maps);

  return (
    <ConsentContext.Provider value={{ consent, mapsAllowed, openSettings, grantMaps }}>
      {children}
      {showBanner && (
        <CookieConsentBanner
          mode={bannerMode}
          onMode={setBannerMode}
          onAcceptAll={acceptAll}
          onRejectAll={rejectAll}
          onSaveManage={saveManage}
        />
      )}
    </ConsentContext.Provider>
  );
}

function useConsent() { return useContext(ConsentContext); }

/* --- Cookie Consent Banner --- */
function CookieConsentBanner({ mode, onMode, onAcceptAll, onRejectAll, onSaveManage }) {
  const { t } = useT();
  const [mapsOn, setMapsOn] = useState(false);
  const bannerRef = useRef(null);

  // Focus trap
  useEffect(() => {
    const el = bannerRef.current;
    if (!el) return;
    const focusable = el.querySelectorAll('button, a, input[type="checkbox"]');
    if (focusable.length) focusable[0].focus();
    const trap = (e) => {
      if (e.key !== 'Tab') return;
      const items = Array.from(el.querySelectorAll('button, a, input[type="checkbox"]'));
      if (!items.length) return;
      const first = items[0], last = items[items.length - 1];
      if (e.shiftKey) { if (document.activeElement === first) { e.preventDefault(); last.focus(); } }
      else { if (document.activeElement === last) { e.preventDefault(); first.focus(); } }
    };
    el.addEventListener('keydown', trap);
    return () => el.removeEventListener('keydown', trap);
  }, [mode]);

  // ESC = reject
  useEffect(() => {
    const onKey = (e) => { if (e.key === 'Escape') onRejectAll(); };
    window.addEventListener('keydown', onKey);
    return () => window.removeEventListener('keydown', onKey);
  }, [onRejectAll]);

  return (
    <div className="cookie-overlay" role="dialog" aria-modal="true" aria-labelledby="cookie-title">
      <div className="cookie-banner" ref={bannerRef}>
        {/* X = reject (SHOULD-1) */}
        <button className="cookie-close-btn" onClick={onRejectAll} aria-label={t('cookies.reject')}>
          <svg width="18" height="18" viewBox="0 0 18 18" fill="none"><path d="M14 4 4 14M4 4l10 10" stroke="currentColor" strokeWidth="1.8" strokeLinecap="round"/></svg>
        </button>

        <h3 id="cookie-title">{t('cookies.banner_title')}</h3>
        <p>{t('cookies.banner_text')}</p>

        {mode === 'main' && (
          <div className="cookie-actions">
            <button className="btn-reject" onClick={onRejectAll}>{t('cookies.reject')}</button>
            <button className="btn-accept" onClick={onAcceptAll}>{t('cookies.accept')}</button>
            <button className="btn-manage" onClick={() => onMode('manage')}>{t('cookies.manage')}</button>
          </div>
        )}

        {mode === 'manage' && (
          <div className="cookie-manage">
            {/* Essential — always on */}
            <div className="cookie-category">
              <div className="cookie-cat-info">
                <strong>{t('cookies.essential_label')}</strong>
                <span>{t('cookies.essential_desc')}</span>
              </div>
              <div className="cookie-toggle-wrap">
                <label className="cookie-toggle" data-locked="1">
                  <input type="checkbox" checked readOnly disabled aria-label={t('cookies.essential_label')}/>
                  <div className="cookie-toggle-track"/>
                  <div className="cookie-toggle-thumb"/>
                </label>
                <span className="cookie-toggle-label">{t('cookies.always_on')}</span>
              </div>
            </div>
            {/* Maps */}
            <div className="cookie-category">
              <div className="cookie-cat-info">
                <strong>{t('cookies.maps_label')}</strong>
                <span>{t('cookies.maps_desc')}</span>
              </div>
              <div className="cookie-toggle-wrap">
                <label className="cookie-toggle">
                  <input type="checkbox" checked={mapsOn} onChange={e => setMapsOn(e.target.checked)} aria-label={t('cookies.maps_label')}/>
                  <div className="cookie-toggle-track"/>
                  <div className="cookie-toggle-thumb"/>
                </label>
              </div>
            </div>
            {/* Fonts (self-hosted, inactive) */}
            <div className="cookie-category">
              <div className="cookie-cat-info">
                <strong>{t('cookies.fonts_label')}</strong>
                <span>{t('cookies.fonts_desc')}</span>
              </div>
              <div className="cookie-toggle-wrap">
                <label className="cookie-toggle" data-locked="1">
                  <input type="checkbox" checked readOnly disabled aria-label={t('cookies.fonts_label')}/>
                  <div className="cookie-toggle-track"/>
                  <div className="cookie-toggle-thumb"/>
                </label>
                <span className="cookie-toggle-label">{t('cookies.always_on')}</span>
              </div>
            </div>
            <div className="cookie-save-row">
              <button className="btn-reject" onClick={onRejectAll}>{t('cookies.reject')}</button>
              <button className="btn-accept" onClick={() => onSaveManage({ maps: mapsOn })}>{t('cookies.save')}</button>
            </div>
          </div>
        )}

        <span className="cookie-policy-link">
          <a href="/polityka-cookies.html" target="_blank" rel="noopener">{t('cookies.policy_link')}</a>
          {' · '}{t('cookies.withdraw_note')}
        </span>
      </div>
    </div>
  );
}

/* --- Map With Consent --- */
function MapWithConsent() {
  const { t } = useT();
  const { mapsAllowed, grantMaps } = useConsent();

  if (mapsAllowed) {
    return (
      <div style={{borderRadius:'20px',overflow:'hidden',border:'1px solid var(--line)',boxShadow:'0 4px 24px rgba(0,0,0,.07)'}}>
        <iframe
          title="Dental Clinic Smaga — lokalizacja / location / Lage / placering / beliggenhet"
          src="https://www.google.com/maps?q=53.3814659,14.6644754&z=16&output=embed"
          width="100%"
          height="340"
          style={{border:0,display:'block'}}
          referrerPolicy="no-referrer-when-downgrade"
          allowFullScreen
        />
      </div>
    );
  }

  return (
    <div className="map-placeholder">
      <svg className="map-placeholder-icon" viewBox="0 0 48 48" fill="none" xmlns="http://www.w3.org/2000/svg" aria-hidden="true">
        <path d="M24 4C16.27 4 10 10.27 10 18c0 10.5 14 26 14 26s14-15.5 14-26c0-7.73-6.27-14-14-14zm0 19a5 5 0 1 1 0-10 5 5 0 0 1 0 10z" fill="currentColor" opacity=".6"/>
      </svg>
      <h4>{t('cookies.map_placeholder_title')}</h4>
      <p>{t('cookies.map_placeholder_text')}</p>
      <div className="map-placeholder-actions">
        <button className="btn outline" style={{fontSize:13,padding:'11px 20px',cursor:'pointer',textAlign:'center'}} onClick={grantMaps}>
          {t('cookies.map_show_btn')}
        </button>
        <a href="https://maps.app.goo.gl/e44seVNGqEhG168r9" target="_blank" rel="noopener noreferrer" className="btn outline" style={{fontSize:13,padding:'10px 20px',textAlign:'center'}}>
          {t('cookies.map_open_gmaps')}
        </a>
      </div>
    </div>
  );
}

/* ============== Reveal hook ============== */
function useReveal() {
  useEffect(() => {
    const els = document.querySelectorAll('.reveal');
    const io = new IntersectionObserver((entries) => {
      entries.forEach(e => {
        if (e.isIntersecting) {
          e.target.classList.add('in');
          io.unobserve(e.target);
        }
      });
    }, { threshold: 0.12 });
    els.forEach(el => io.observe(el));
    return () => io.disconnect();
  });
}

/* ============== Counter ============== */
function Counter({ to, suffix = '', dur = 1800 }) {
  const ref = useRef(null);
  const [val, setVal] = useState(0);
  useEffect(() => {
    const node = ref.current;
    if (!node) return;
    let started = false;
    const io = new IntersectionObserver(([e]) => {
      if (e.isIntersecting && !started) {
        started = true;
        const start = performance.now();
        const tick = (t) => {
          const p = Math.min(1, (t - start) / dur);
          const eased = 1 - Math.pow(1 - p, 3);
          setVal(Math.round(to * eased));
          if (p < 1) requestAnimationFrame(tick);
        };
        requestAnimationFrame(tick);
      }
    }, { threshold: 0.4 });
    io.observe(node);
    return () => io.disconnect();
  }, [to, dur]);
  return <span ref={ref}>{val}{suffix && <span className="suffix">{suffix}</span>}</span>;
}

/* ============== Custom cursor ============== */
function Cursor({ on }) {
  useEffect(() => {
    if (!on) return;
    const dot = document.createElement('div');
    dot.className = 'cursor-dot';
    const ring = document.createElement('div');
    ring.className = 'cursor-ring';
    document.body.appendChild(dot);
    document.body.appendChild(ring);
    let rx = 0, ry = 0, tx = 0, ty = 0;
    const move = (e) => {
      tx = e.clientX; ty = e.clientY;
      dot.style.transform = `translate(${tx}px,${ty}px) translate(-50%,-50%)`;
    };
    const loop = () => {
      rx += (tx - rx) * 0.18;
      ry += (ty - ry) * 0.18;
      ring.style.transform = `translate(${rx}px,${ry}px) translate(-50%,-50%)`;
      raf = requestAnimationFrame(loop);
    };
    let raf = requestAnimationFrame(loop);
    const over = (e) => {
      const t = e.target;
      if (t.closest && t.closest('a,button,.svc-row,.faq-row summary,.doc,.tech-card,.chip,input,textarea')) ring.classList.add('hover');
      else ring.classList.remove('hover');
    };
    window.addEventListener('mousemove', move);
    window.addEventListener('mouseover', over);
    return () => {
      window.removeEventListener('mousemove', move);
      window.removeEventListener('mouseover', over);
      cancelAnimationFrame(raf);
      dot.remove(); ring.remove();
    };
  }, [on]);
  useEffect(() => {
    if (on) document.body.classList.add('custom-cursor');
    else document.body.classList.remove('custom-cursor');
  }, [on]);
  return null;
}

/* ============== NAV ============== */
function Nav({ active, onJump, darkMode }) {
  const { t, lang, setLang } = useT();
  const [scrolled, setScrolled] = useState(false);
  const [mobOpen, setMobOpen] = useState(false);
  const [langOpen, setLangOpen] = useState(false);
  const langRef = useRef(null);
  useEffect(() => {
    const onScroll = () => setScrolled(window.scrollY > 80);
    onScroll();
    window.addEventListener('scroll', onScroll, { passive: true });
    return () => window.removeEventListener('scroll', onScroll);
  }, []);
  useEffect(() => {
    if (!langOpen) return;
    const onDoc = (e) => { if (langRef.current && !langRef.current.contains(e.target)) setLangOpen(false); };
    const onKey = (e) => { if (e.key === 'Escape') setLangOpen(false); };
    document.addEventListener('mousedown', onDoc);
    document.addEventListener('keydown', onKey);
    return () => { document.removeEventListener('mousedown', onDoc); document.removeEventListener('keydown', onKey); };
  }, [langOpen]);
  const links = [
    ['uslugi', t('nav.uslugi')],
    ['technologia', t('nav.technologia')],
    ['zespol', t('nav.zespol')],
    ...(SHOW_METAMORFOZY ? [['metamorfozy', t('nav.metamorfozy')]] : []),
    ['kontakt', t('nav.kontakt')]
  ];
  const LANGS = (window.SDC_I18N && window.SDC_I18N.available) || ['pl'];
  const LABELS = (window.SDC_I18N && window.SDC_I18N.labels) || {};
  const FLAGS = { pl:'\u{1F1F5}\u{1F1F1}', en:'\u{1F1EC}\u{1F1E7}', de:'\u{1F1E9}\u{1F1EA}', da:'\u{1F1E9}\u{1F1F0}', no:'\u{1F1F3}\u{1F1F4}' };
  return (
    <>
      <nav className={`nav ${scrolled ? 'scrolled' : ''} ${darkMode ? 'dark-mode' : ''}`} style={{ color: darkMode ? '#fff' : 'var(--ink)' }}>
        <div className="container nav-row">
          <a href="#top" className="nav-brand" onClick={(e)=>{e.preventDefault(); window.scrollTo({top:0,behavior:'smooth'})}}>
            <img src="assets/smaga-logo.png" alt="Dental Clinic Smaga" className="nav-logo-img"/>
          </a>
          <div className="nav-links">
            {links.map(([id, l]) => (
              <a key={id} href={`#${id}`} className={active === id ? 'active' : ''} onClick={(e)=>{e.preventDefault(); onJump(id)}}>{l}</a>
            ))}
          </div>
          <div className="nav-right">
            <div className={`lang-dd ${langOpen ? 'open' : ''}`} ref={langRef}>
              <button className="lang-dd-trigger" onClick={()=>setLangOpen(o=>!o)} aria-haspopup="listbox" aria-expanded={langOpen} aria-label={t('nav.lang_label')}>
                <span className="flag" aria-hidden="true">{FLAGS[lang] || ''}</span>
                <span className="code">{LABELS[lang] || lang.toUpperCase()}</span>
                <svg className="chev" width="10" height="6" viewBox="0 0 10 6" aria-hidden="true"><path d="M1 1l4 4 4-4" stroke="currentColor" strokeWidth="1.4" fill="none" strokeLinecap="round"/></svg>
              </button>
              {langOpen && (
                <div className="lang-dd-menu" role="listbox" aria-label={t('nav.lang_label')}>
                  {LANGS.map(l => (
                    <button key={l} role="option" aria-selected={lang === l} className={lang === l ? 'on' : ''} onClick={()=>{setLang(l); setLangOpen(false)}}>
                      <span className="flag" aria-hidden="true">{FLAGS[l] || ''}</span>
                      <span className="code">{LABELS[l] || l.toUpperCase()}</span>
                    </button>
                  ))}
                </div>
              )}
            </div>
            <a href="#kontakt" className="btn blue" onClick={(e)=>{e.preventDefault(); onJump('kontakt')}}>
              {t('nav.book')} <span className="arrow"/>
            </a>
            <button className="burger" onClick={()=>setMobOpen(true)}><span/></button>
          </div>
        </div>
      </nav>
      <div className={`mob ${mobOpen ? 'open' : ''}`}>
        <div className="top">
          <img src="assets/smaga-logo.png" alt="Dental Clinic Smaga" style={{height:36,filter:'brightness(0) invert(1)'}}/>
          <button className="close" onClick={()=>setMobOpen(false)}>×</button>
        </div>
        <div className="links">
          {links.map(([id, l]) => (
            <a key={id} href={`#${id}`} onClick={(e)=>{e.preventDefault(); setMobOpen(false); onJump(id)}}>{l}</a>
          ))}
        </div>
        <div className="langs" role="group" aria-label={t('nav.lang_label')} style={{marginTop:20}}>
          {LANGS.map(l => (
            <button key={l} className={lang === l ? 'on' : ''} onClick={()=>setLang(l)} title={LABELS[l] || l.toUpperCase()}>
              <span className="flag" aria-hidden="true">{FLAGS[l] || ''}</span>
              <span className="code">{LABELS[l] || l.toUpperCase()}</span>
            </button>
          ))}
        </div>
        <div style={{display:'flex',gap:14,marginTop:24}}>
          <a className="btn blue" href="tel:+48602301711">{t('nav.call')}</a>
          <a className="btn ghost-light" href="#kontakt" onClick={(e)=>{e.preventDefault(); setMobOpen(false); onJump('kontakt')}}>{t('nav.book_short')}</a>
        </div>
      </div>
    </>
  );
}

/* ============== HERO ============== */
function Hero({ treatment }) {
  const { t } = useT();
  const ref = useRef(null);
  const bgRef = useRef(null);
  const h1Ref = useRef(null);
  useEffect(() => {
    const tm = setTimeout(() => {
      if (ref.current) ref.current.classList.add('in');
      if (h1Ref.current) h1Ref.current.classList.add('in');
    }, 120);
    return () => clearTimeout(tm);
  }, []);
  useEffect(() => {
    if (window.matchMedia('(max-width:900px)').matches) return;
    const onScroll = () => {
      if (!bgRef.current) return;
      const y = window.scrollY;
      bgRef.current.style.transform = `translate3d(0, ${y * 0.25}px, 0) scale(${1 + y * 0.0003})`;
    };
    window.addEventListener('scroll', onScroll, { passive: true });
    return () => window.removeEventListener('scroll', onScroll);
  }, []);
  const words = t('hero.h1');
  const wordsArr = Array.isArray(words) ? words : [];
  return (
    <header className="hero" ref={ref} id="top">
      <div className={`hero-bg ${treatment}`} ref={bgRef}>
        {treatment === 'mesh' && <div className="mesh"/>}
        {treatment === 'photo' && (
          <div className="img" style={{
            backgroundImage:`url(assets/hero.jpeg)`,
            backgroundPosition:'30% center'
          }}/>
        )}
        {treatment === 'cinemagraph' && (
          <>
            <div className="mesh" style={{filter:'hue-rotate(10deg) saturate(120%)'}}/>
            <div className="particles">
              {Array.from({length:14}).map((_,i)=>(
                <span key={i} style={{
                  left:`${(i*7+5)%100}%`,
                  top:`${(i*13+10)%100}%`,
                  animationDelay:`${i*0.6}s`,
                  animationDuration:`${8+i%6}s`
                }}/>
              ))}
            </div>
          </>
        )}
        <div className="grain"/>
      </div>
      <div className="container hero-inner">
        <div className="hero-eyebrow">
          <span className="bar"/>
          <span>{t('hero.eyebrow')}</span>
        </div>
        <h1 className="display" ref={h1Ref}>
          {wordsArr.map((w, i) => (
            <span className="word" key={i}><span>{w}</span></span>
          ))}
        </h1>
        <p className="hero-sub">{t('hero.sub')}</p>
        <div className="hero-ctas">
          <a href="tel:+48602301711" className="btn outline"><span>{t('hero.cta_call')}</span></a>
          <a href="#kontakt" className="btn blue" onClick={(e)=>{e.preventDefault(); document.getElementById('kontakt')?.scrollIntoView({behavior:'smooth'})}}>{t('hero.cta_book')} <span className="arrow"/></a>
          <a href="#ai" className="btn filled" onClick={(e)=>{e.preventDefault(); document.getElementById('ai')?.scrollIntoView({behavior:'smooth'})}}>{t('hero.cta_ai')}</a>
        </div>
        <div className="hero-stats">
          <div className="hero-stat"><div className="num"><Counter to={25}/><span className="roman">{t('hero.stat_years_suffix')}</span></div><div className="lbl">{t('hero.stat_years')}</div></div>
          <div className="hero-stat"><div className="num"><Counter to={200}/><span className="roman">+</span></div><div className="lbl">{t('hero.stat_certs')}</div></div>
          <div className="hero-stat"><div className="num"><Counter to={7}/></div><div className="lbl">{t('hero.stat_specialists')}</div></div>
          <div className="hero-stat"><div className="num" style={{fontStyle:'italic'}}>3D</div><div className="lbl">{t('hero.stat_3d')}</div></div>
        </div>
      </div>
      <div className="scroll-ind"><span>{t('hero.scroll')}</span><span className="ln"/></div>
    </header>
  );
}

/* ============== ABOUT ============== */
function About() {
  const { t } = useT();
  return (
    <section className="section-pad" id="o-nas">
      <div className="container">
        <div className="twocol">
          <div>
            <div className="eyebrow reveal"><span className="dot"/>{t('about.eyebrow')}</div>
            <h2 className="display reveal" data-d="1" style={{marginTop:24}}>
              {t('about.title_a')}<br/><span className="roman">{t('about.title_b')}</span> {t('about.title_c')}
            </h2>
            <div className="reveal" data-d="3" style={{marginTop:36,display:'flex',gap:14,flexWrap:'wrap'}}>
              <a className="btn outline" href="#zespol">{t('about.cta_team')} <span className="arrow"/></a>
              <a className="btn outline" href="#uslugi">{t('about.cta_services')}</a>
            </div>
          </div>
          <div>
            <p className="lead reveal" data-d="2" style={{fontSize:'clamp(18px,1.5vw,24px)',color:'var(--ink)',lineHeight:1.5}}>
              {t('about.lead1')}
            </p>
            <p className="lead reveal" data-d="3" style={{marginTop:24}}>
              {t('about.lead2')}
            </p>
          </div>
        </div>
      </div>
    </section>
  );
}

/* ============== SERVICES ============== */
const SERVICE_INDICES = ['01','02','03','04','05','06'];

function Services() {
  const { t } = useT();
  const [open, setOpen] = useState(0);
  const items = t('services.items');
  const list = Array.isArray(items) ? items : [];
  return (
    <section className="section-pad" id="uslugi" style={{background:'var(--white)'}}>
      <div className="container">
        <div className="sec-head">
          <div>
            <div className="eyebrow reveal"><span className="dot"/>{t('services.eyebrow')}</div>
            <h2 className="display reveal" data-d="1" style={{marginTop:20}}>
              {t('services.title_a')}<br/><span className="roman">{t('services.title_b')}</span>
            </h2>
          </div>
          <p className="lead reveal" data-d="2">{t('services.lead')}</p>
        </div>
        <div className="svc reveal" data-d="2">
          {list.map((s, i) => (
            <div key={i} className={`svc-row ${open === i ? 'open' : ''}`} onClick={() => setOpen(open === i ? -1 : i)}>
              <div className="ix">{SERVICE_INDICES[i] || String(i+1).padStart(2,'0')}</div>
              <div>
                <div className="t">{s.t} <span className="roman">{s.t2}</span></div>
                <div className="body">
                  <p dangerouslySetInnerHTML={{__html: s.d}}/>
                  <div className="tags">{(s.tags || []).map(tag => <span key={tag}>{tag}</span>)}</div>
                </div>
              </div>
              <div className="plus" aria-hidden/>
            </div>
          ))}
        </div>
      </div>
    </section>
  );
}

/* ============== TECHNOLOGY ============== */
const TECH_META = [
  { n:'01', ic:'scan', img:'assets/tech-skaner.webp' },
  { n:'02', ic:'ct',   img:'assets/tech-cbct.webp' },
  { n:'03', ic:'smile', img:'assets/tech-dsd.webp' },
];

function TechIcon({ k }) {
  const common = { width: 26, height: 26, viewBox: '0 0 26 26', fill: 'none', stroke: 'currentColor', strokeWidth: 1.2, strokeLinecap: 'round' };
  if (k === 'scan') return <svg {...common}><rect x="4" y="4" width="18" height="18" rx="2"/><path d="M4 9h18M9 4v18"/></svg>;
  if (k === 'ct') return <svg {...common}><circle cx="13" cy="13" r="9"/><path d="M13 4v18M4 13h18"/></svg>;
  if (k === 'smile') return <svg {...common}><circle cx="13" cy="13" r="9"/><path d="M8 14c1.5 2.5 4 4 5 4s3.5-1.5 5-4"/><circle cx="9" cy="10" r=".8" fill="currentColor"/><circle cx="17" cy="10" r=".8" fill="currentColor"/></svg>;
  return <svg {...common}><path d="M4 8l9-4 9 4-9 4-9-4z"/><path d="M4 14l9 4 9-4M4 19l9 4 9-4"/></svg>;
}

function Technology() {
  const { t } = useT();
  const [active, setActive] = useState(0);
  const [open, setOpen] = useState(-1);
  useEffect(() => {
    const id = setInterval(() => setActive(a => (a + 1) % TECH_META.length), 4000);
    return () => clearInterval(id);
  }, []);
  useEffect(() => {
    if (open >= 0) {
      document.body.style.overflow = 'hidden';
      const onKey = (e) => { if (e.key === 'Escape') setOpen(-1); };
      window.addEventListener('keydown', onKey);
      return () => { document.body.style.overflow = ''; window.removeEventListener('keydown', onKey); };
    }
  }, [open]);
  const items = t('tech.items');
  const list = Array.isArray(items) ? items : [];
  return (
    <section className="section-pad" id="technologia" style={{background:'linear-gradient(180deg,#EBF4FF 0%,#F4F9FF 100%)'}}>
      <div className="container">
        <div className="sec-head">
          <div>
            <div className="eyebrow reveal"><span className="dot"/>{t('tech.eyebrow')}</div>
            <h2 className="display reveal" data-d="1" style={{marginTop:20}}>
              {t('tech.title_a')} <span className="roman">{t('tech.title_a2')}</span>{t('tech.title_b')}<br/>{t('tech.title_c')} <span className="roman">{t('tech.title_c2')}</span>
            </h2>
          </div>
          <p className="lead reveal" data-d="2">{t('tech.lead')}</p>
        </div>
        <div className="tech-grid reveal" data-d="2">
          {TECH_META.map((meta, i) => {
            const it = list[i] || {};
            return (
              <div key={meta.n} className={`tech-card ${active === i ? 'active' : ''}`}
                   onMouseEnter={()=>setActive(i)}
                   onClick={()=>setOpen(i)}
                   role="button" tabIndex={0}
                   onKeyDown={(e)=>{ if (e.key==='Enter') setOpen(i) }}>
                <div className="ic"><TechIcon k={meta.ic}/></div>
                <div>
                  <div className="nx">{meta.n}</div>
                  <div className="tt">{it.t}</div>
                  <div className="dx">{it.d}</div>
                </div>
                <div className="tech-expand">
                  <span>{t('tech.expand')}</span>
                  <svg width="14" height="14" viewBox="0 0 14 14" fill="none" stroke="currentColor" strokeWidth="1.4"><path d="M3 11L11 3M5 3h6v6"/></svg>
                </div>
                <div className="progress"><span/></div>
              </div>
            );
          })}
        </div>
      </div>
      <TechModal open={open} setOpen={setOpen}/>
    </section>
  );
}

function TechModal({ open, setOpen }) {
  const { t } = useT();
  const items = t('tech.items');
  const list = Array.isArray(items) ? items : [];
  const meta = open >= 0 ? TECH_META[open] : null;
  const it = open >= 0 ? (list[open] || {}) : null;
  const close = () => setOpen(-1);
  const prev = () => setOpen((open - 1 + TECH_META.length) % TECH_META.length);
  const next = () => setOpen((open + 1) % TECH_META.length);
  useEffect(() => {
    if (open < 0) return;
    const onKey = (e) => {
      if (e.key === 'ArrowLeft') prev();
      if (e.key === 'ArrowRight') next();
    };
    window.addEventListener('keydown', onKey);
    return () => window.removeEventListener('keydown', onKey);
  }, [open]);
  return (
    <div className={`tech-modal ${open >= 0 ? 'on' : ''}`} onClick={close}>
      <div className="tech-modal-inner" onClick={(e)=>e.stopPropagation()}>
        {meta && it && <>
          <button className="tm-close" onClick={close} aria-label={t('techmodal.close')}>
            <svg width="16" height="16" viewBox="0 0 16 16" fill="none" stroke="currentColor" strokeWidth="1.6"><path d="M3 3l10 10M13 3L3 13"/></svg>
          </button>
          <div className="tm-grid">
            <div className="tm-photo">
              {meta.img
                ? <img src={meta.img} alt={it.t} style={{position:'absolute',inset:0,width:'100%',height:'100%',objectFit:'contain'}}/>
                : <image-slot id={`tech-${meta.n}`} shape="rect" placeholder={it.t}></image-slot>}
              <div className="tm-photo-meta">
                <span className="tm-num">{meta.n}</span>
                <span className="tm-cat">{t('techmodal.cat')}</span>
              </div>
            </div>
            <div className="tm-body">
              <div className="tm-ic"><TechIcon k={meta.ic}/></div>
              <h3 className="display" style={{fontSize:'clamp(36px,5vw,72px)',marginTop:18}}>{it.t}</h3>
              <p style={{fontSize:'clamp(16px,1.2vw,18px)',lineHeight:1.6,color:'var(--ink-2)',marginTop:20,maxWidth:'52ch'}}>{it.long}</p>
              <div className="tm-twocol">
                <div>
                  <div className="tm-h">{t('techmodal.h_features')}</div>
                  <ul className="tm-list">
                    {(it.features || []).map(f => <li key={f}><span className="dot"/>{f}</li>)}
                  </ul>
                </div>
                <div>
                  <div className="tm-h">{t('techmodal.h_cases')}</div>
                  <ul className="tm-list">
                    {(it.cases || []).map(c => <li key={c}><span className="dot"/>{c}</li>)}
                  </ul>
                </div>
              </div>
              <div className="tm-ctas">
                <a href="#kontakt" className="btn blue" onClick={(e)=>{e.preventDefault(); close(); document.getElementById('kontakt')?.scrollIntoView({behavior:'smooth'})}}>{t('techmodal.cta_book')} <span className="arrow"/></a>
                <button className="btn outline" onClick={next}>{t('techmodal.cta_next')} <span className="arrow"/></button>
              </div>
            </div>
          </div>
          <div className="tm-nav">
            <button onClick={prev} aria-label={t('techmodal.prev')}>
              <svg width="16" height="16" viewBox="0 0 16 16" fill="none" stroke="currentColor" strokeWidth="1.6"><path d="M10 3L3 8l7 5"/></svg>
            </button>
            <span className="tm-count">{String(open+1).padStart(2,'0')} / {String(TECH_META.length).padStart(2,'0')}</span>
            <button onClick={next} aria-label={t('techmodal.next')}>
              <svg width="16" height="16" viewBox="0 0 16 16" fill="none" stroke="currentColor" strokeWidth="1.6"><path d="M6 3l7 5-7 5"/></svg>
            </button>
          </div>
        </>}
      </div>
    </div>
  );
}

/* ============== METAMORFOZY ============== */
const META_GRADIENTS = {
  implantologia: { a:'linear-gradient(135deg,#9aa7b8,#4a5868)', b:'linear-gradient(135deg,#e6efff,#bcd6f0)' },
  licowki:       { a:'linear-gradient(135deg,#b8a585,#7a6849)', b:'linear-gradient(135deg,#fff5e6,#f0dcc2)' },
  wybielanie:    { a:'linear-gradient(135deg,#a8b5c4,#5a6a7a)', b:'linear-gradient(135deg,#e8f4ff,#bcd6f0)' }
};

function Metamorfozy() {
  const { t } = useT();
  const [tab, setTab] = useState('implantologia');
  const [x, setX] = useState(0.5);
  const ref = useRef(null);
  const drag = useRef(false);
  const update = (clientX) => {
    if (!ref.current) return;
    const r = ref.current.getBoundingClientRect();
    setX(Math.max(0, Math.min(1, (clientX - r.left) / r.width)));
  };
  useEffect(() => {
    const move = (e) => { if (drag.current) update(e.touches ? e.touches[0].clientX : e.clientX); };
    const up = () => { drag.current = false; };
    window.addEventListener('mousemove', move);
    window.addEventListener('mouseup', up);
    window.addEventListener('touchmove', move);
    window.addEventListener('touchend', up);
    return () => {
      window.removeEventListener('mousemove', move);
      window.removeEventListener('mouseup', up);
      window.removeEventListener('touchmove', move);
      window.removeEventListener('touchend', up);
    };
  }, []);
  const grad = META_GRADIENTS[tab];
  const tabs = t('meta.tabs') || {};
  return (
    <section className="section-pad" id="metamorfozy" style={{background:'var(--bg-2)'}}>
      <div className="container">
        <div className="sec-head">
          <div>
            <div className="eyebrow reveal"><span className="dot"/>{t('meta.eyebrow')}</div>
            <h2 className="display reveal" data-d="1" style={{marginTop:20}}>
              {t('meta.title_a')}<br/>{t('meta.title_b')} <span className="roman">{t('meta.title_c')}</span>
            </h2>
          </div>
          <p className="lead reveal" data-d="2">{t('meta.lead')}</p>
        </div>
        <div className="meta-tabs reveal" data-d="2">
          {Object.keys(META_GRADIENTS).map(k => (
            <button key={k} className={tab === k ? 'on' : ''} onClick={()=>setTab(k)}>
              {tabs[k] || k}
            </button>
          ))}
        </div>
        <div className="ba reveal" data-d="3" ref={ref}
             onMouseDown={(e)=>{drag.current=true; update(e.clientX)}}
             onTouchStart={(e)=>{drag.current=true; update(e.touches[0].clientX)}}>
          <div className="layer before" style={{background:grad.a}}>
            <div style={{position:'absolute',inset:0,background:`repeating-linear-gradient(45deg,transparent 0 24px,rgba(0,0,0,.05) 24px 25px)`}}/>
            <div style={{position:'absolute',inset:0,display:'grid',placeItems:'center',fontFamily:'Courier New, monospace',fontSize:12,color:'rgba(255,255,255,.6)',letterSpacing:'.2em',textTransform:'uppercase'}}>[ photo · before · {tab} ]</div>
          </div>
          <div className="layer after" style={{background:grad.b, clipPath:`inset(0 0 0 ${x*100}%)`}}>
            <div style={{position:'absolute',inset:0,background:`repeating-linear-gradient(45deg,transparent 0 24px,rgba(10,35,66,.05) 24px 25px)`}}/>
            <div style={{position:'absolute',inset:0,display:'grid',placeItems:'center',fontFamily:'Courier New, monospace',fontSize:12,color:'rgba(10,35,66,.5)',letterSpacing:'.2em',textTransform:'uppercase'}}>[ photo · after · {tab} ]</div>
          </div>
          <span className="lbl l">{t('meta.before')}</span>
          <span className="lbl r">{t('meta.after')}</span>
          <div className="handle" style={{left:`${x*100}%`}}/>
        </div>
      </div>
    </section>
  );
}

/* ============== TEAM ============== */
/* `id` keys into i18n team.roles + team.bios. Names/photos stay as-is. */
const TEAM = [
  { id:'AS', n:'Dr Aleksandra Smaga',     i:'AS', feat:true,  img:'assets/Ola.png' },
  { id:'CP', n:'Dr Cyryl Popowski',       i:'CP',             img:'assets/Cyryl.png' },
  { id:'KS', n:'Dr Klaudia Stępniak',     i:'KS',             img:'assets/Klaudia_2.png' },
  { id:'KJ', n:'Dr Katarzyna Juszczuk',   i:'KJ',             img:'assets/Kasia_J.png' },
  { id:'GB', n:'Dr Grzegorz Bartoszek',   i:'GB',             img:'assets/Grzegorz.png' },
  { id:'TS', n:'Dr Teresa Stephan-Smaga', i:'TS',             img:'assets/Teresa.png' },
  { id:'PS', n:'Dr Patryk Sobczyk',       i:'PS',             img:'assets/Patryk.png' },
];

/* ============== DOCTOR CV DATA (extensible — add more entries as needed) ============== */
const DOCTORS_CV = {
  AS: {
    name: 'Aleksandra Smaga',
    subtitle: 'Lekarz Stomatolog',
    pills: ['Stomatologia estetyczna', 'Protetyka', 'Implantoprotetyka', 'Stomatologia cyfrowa'],
    paragraphs: [
      'Absolwentka Wydziału Stomatologii Pomorskiej Akademii Medycznej w Szczecinie (1999). Od 2000 roku prowadzi Dental Clinic Smaga.',
      'W swojej pracy wykorzystuje nowoczesne technologie rekonstrukcji i projektowania uśmiechu (DSD – Digital Smile Design) oraz cyfrowe systemy skanowania 3Shape TRIOS 3D, zapewniając swoim pacjentom precyzyjne, estetyczne i trwałe efekty leczenia.',
      'Specjalizuje się w stomatologii estetycznej, protetyce i implantoprotetyce, łącząc wiedzę kliniczną z najnowocześniejszymi technologiami cyfrowymi.',
      'W 2010 roku uzyskała certyfikat New York University College of Dentistry oraz ukończyła Międzynarodowy Program Edukacyjny ITI na Uniwersytecie w Bernie (Szwajcaria).',
      'W 2011 ukończyła z wyróżnieniem Curriculum Implantologiczne PSI (Polskie Stowarzyszenie Implantologiczne).',
      'Jest członkinią ITI (International Team for Implantology) – międzynarodowej, prestiżowej organizacji naukowej z siedzibą w Szwajcarii, skupiającej ekspertów w dziedzinie implantologii stomatologicznej, DGOI (Deutsche Gesellschaft für Orale Implantologie) oraz ICOI (International Congress of Oral Implantologists) oraz Polskiego Stowarzyszenia Stomatologii Estetycznej (PASE).',
      'W 2013 roku obroniła pracę dyplomową na Uniwersytecie w Sienie, uzyskując tytuł Master of Prosthodontics.',
      'Stale doskonali swoje umiejętności na międzynarodowych szkoleniach i konferencjach. Posiada ponad 200 certyfikatów potwierdzających najwyższy poziom kwalifikacji.',
      'W 2019 ukończyła podyplomowe studia z medycyny estetycznej w Poznaniu, co poszerzyło jej kompetencje w zakresie kompleksowej estetyki twarzy i uśmiechu.',
    ],
  },
};

function Doc({ d, idx, rolePath, bioPath, onClick }) {
  const { t } = useT();
  const ref = useRef(null);
  const onMove = (e) => {
    const el = ref.current; if (!el) return;
    const r = el.getBoundingClientRect();
    const px = (e.clientX - r.left) / r.width - 0.5;
    const py = (e.clientY - r.top) / r.height - 0.5;
    el.style.transform = `perspective(900px) rotateX(${-py*4}deg) rotateY(${px*5}deg) translateY(-4px)`;
  };
  const onLeave = () => { if (ref.current) ref.current.style.transform = ''; };
  const role = t(`${rolePath}.${d.id}`);
  const bio = d.feat ? t(`${bioPath}.${d.id}`) : null;
  return (
    <div className={`doc ${d.feat ? 'feat' : ''} reveal`} data-d={Math.min(idx,5)} ref={ref}
         onMouseMove={onMove} onMouseLeave={onLeave}
         onClick={onClick}
         role={onClick ? 'button' : undefined}
         tabIndex={onClick ? 0 : undefined}
         onKeyDown={onClick ? (e) => { if (e.key === 'Enter' || e.key === ' ') { e.preventDefault(); onClick(); } } : undefined}>
      <div className="ph">
        {d.img
          ? <img src={d.img} alt={d.n} style={{position:'absolute',inset:0,width:'100%',height:'100%',objectFit:'cover'}}/>
          : <div className="label">[ photo · {d.i.toLowerCase()} ]</div>}
      </div>
      <span className="ini">{d.i}</span>
      <span className="arrow-r">
        <svg width="14" height="14" viewBox="0 0 14 14" fill="none" stroke="currentColor" strokeWidth="1.3"><path d="M3 11L11 3M5 3h6v6"/></svg>
      </span>
      <div className="info">
        <div className="nm">{d.n}</div>
        <div className="rl">{role}</div>
        {d.feat && bio && <p style={{marginTop:14,color:'rgba(255,255,255,.78)',maxWidth:'40ch',lineHeight:1.55,fontSize:15}}>{bio}</p>}
      </div>
    </div>
  );
}

/* ============== DOCTOR CV MODAL ============== */
function DoctorModal({ doctor, onClose }) {
  const cv = doctor && DOCTORS_CV[doctor.id];
  const on = !!cv;
  useEffect(() => {
    if (!on) return;
    document.body.style.overflow = 'hidden';
    const onKey = (e) => { if (e.key === 'Escape') onClose(); };
    window.addEventListener('keydown', onKey);
    return () => {
      document.body.style.overflow = '';
      window.removeEventListener('keydown', onKey);
    };
  }, [on]);
  if (!doctor) return null;
  return (
    <div className={`cv-bd ${on ? 'on' : ''}`} onClick={onClose} role="dialog" aria-modal="true" aria-label={cv ? cv.name : ''}>
      <div className="cv-panel" onClick={(e) => e.stopPropagation()}>
        {doctor.img && (
          <div className="cv-photo" style={{ backgroundImage: `url(${doctor.img})` }}/>
        )}
        <div className="cv-glass"/>
        <button className="cv-close" onClick={onClose} aria-label="Zamknij">
          <svg width="14" height="14" viewBox="0 0 14 14" fill="none" stroke="currentColor" strokeWidth="1.6">
            <path d="M3 3l8 8M11 3L3 11"/>
          </svg>
        </button>
        {cv && (
          <div className="cv-scroll">
            <p className="cv-name">{cv.name}</p>
            <p className="cv-sub">{cv.subtitle}</p>
            <div className="cv-pills">
              {cv.pills.map((p) => <span key={p} className="cv-pill">{p}</span>)}
            </div>
            <div className="cv-rule"/>
            {cv.paragraphs.map((p, i) => <p key={i} className="cv-p">{p}</p>)}
          </div>
        )}
      </div>
    </div>
  );
}

function Team() {
  const { t } = useT();
  const [openDoc, setOpenDoc] = useState(null);
  return (
    <>
      <section className="section-pad" id="zespol">
        <div className="container">
          <div className="sec-head">
            <div>
              <div className="eyebrow reveal"><span className="dot"/>{t('team.eyebrow')}</div>
              <h2 className="display reveal" data-d="1" style={{marginTop:20}}>
                {t('team.title_a')} <span className="roman">{t('team.title_b')}</span><br/>{t('team.title_c')}
              </h2>
            </div>
            <p className="lead reveal" data-d="2">{t('team.lead')}</p>
          </div>
          <div className="team">
            {TEAM.map((d, i) => (
              <Doc key={d.id} d={d} idx={i} rolePath="team.roles" bioPath="team.bios"
                onClick={DOCTORS_CV[d.id] ? () => setOpenDoc(d) : undefined}/>
            ))}
          </div>
        </div>
      </section>
      <DoctorModal doctor={openDoc} onClose={() => setOpenDoc(null)}/>
    </>
  );
}

/* ============== STAFF (asystentki / recepcja / manager) ============== */
const STAFF = [
  { id:'AL', n:'Anna Lasko',          i:'AL', feat:true, img:'assets/staff/Ania.png' },
  { id:'PK', n:'Patrycja Kozicka',    i:'PK',           img:'assets/staff/Patrycja.png' },
  { id:'OV', n:'Oksana Vodian',       i:'OV',           img:'assets/staff/Oksana.png' },
  { id:'AR', n:'Małgorzata Tymińska', i:'AR',           img:'assets/staff/Gosia-t.png' },
  { id:'MT', n:'Anastazja Romanets',  i:'MT',           img:'assets/staff/Anastazja.png' },
  { id:'HS', n:'Helena Stephan',      i:'HS',           img:'assets/staff/Helena.png' },
];

function Staff() {
  const { t } = useT();
  return (
    <section className="section-pad" id="zespol-wsparcia" style={{background:'var(--white)'}}>
      <div className="container">
        <div className="sec-head">
          <div>
            <div className="eyebrow reveal"><span className="dot"/>{t('staff.eyebrow')}</div>
            <h2 className="display reveal" data-d="1" style={{marginTop:20}}>
              {t('staff.title')}
            </h2>
          </div>
          <p className="lead reveal" data-d="2">{t('staff.lead')}</p>
        </div>
        <div className="team">
          {STAFF.map((d, i) => <Doc key={d.id} d={d} idx={i} rolePath="staff.roles" bioPath="staff.bios"/>)}
        </div>
      </div>
    </section>
  );
}

/* ============== OPINIONS ============== */
function Opinions() {
  const { t } = useT();
  const items = t('opinions.items');
  const list = Array.isArray(items) ? items : [];
  return (
    <section className="section-pad" id="opinie" style={{background:'var(--white)'}}>
      <div className="container">
        <div className="sec-head">
          <div>
            <div className="eyebrow reveal"><span className="dot"/>{t('opinions.eyebrow')}</div>
            <h2 className="display reveal" data-d="1" style={{marginTop:20}}>
              {t('opinions.title_a')}<br/><span className="roman">{t('opinions.title_b')}</span>
            </h2>
          </div>
        </div>
        <div className="ops">
          {list.map((o, i) => {
            const parts = (o.n || '').split(' ');
            const initials = (parts[0]||'').slice(0,1) + (parts[1]||'').slice(0,1);
            return (
              <div key={i} className="op reveal" data-d={i+1}>
                <span className="stars">★★★★★</span>
                <p>"{o.p}"</p>
                <div className="who">
                  <span className="av">{initials}</span>
                  <div>
                    <div className="nm">{o.n}</div>
                    <div className="meta">{o.d}</div>
                  </div>
                </div>
              </div>
            );
          })}
        </div>
      </div>
    </section>
  );
}

/* ============== AI ASSISTANT (live — wired to /api/chat proxy → FastAPI) ============== */
function AIAssistant() {
  const { t, lang } = useT();
  // messages: { role: 'bot' | 'usr', text }
  const [messages, setMessages] = useState([{ role: 'bot', text: t('ai.greeting') }]);
  const [input, setInput] = useState('');
  const [status, setStatus] = useState('idle'); // idle | loading | error
  const sessionRef = useRef(null);              // server-authoritative session id (ADR-013)
  const bodyRef = useRef(null);
  const inputRef = useRef(null);
  const isLoading = status === 'loading';

  // The greeting follows the active page language while the conversation hasn't started.
  useEffect(() => {
    setMessages((prev) => (prev.length === 1 && prev[0].role === 'bot')
      ? [{ role: 'bot', text: t('ai.greeting') }] : prev);
    // eslint-disable-next-line react-hooks/exhaustive-deps
  }, [lang]);

  // Keep the transcript scrolled to the latest message.
  useEffect(() => {
    const el = bodyRef.current;
    if (el) el.scrollTop = el.scrollHeight;
  }, [messages, status]);

  const send = async (raw) => {
    const message = (raw ?? input).trim();
    if (!message || isLoading) return;
    setInput('');
    setStatus('loading');
    setMessages((m) => [...m, { role: 'usr', text: message }]);
    try {
      const res = await fetch('/api/chat', {
        method: 'POST',
        headers: { 'Content-Type': 'application/json' },
        body: JSON.stringify({
          session_id: sessionRef.current,   // null on first turn; backend mints + echoes it
          lang,                             // AC-3.3: page selector decides answer language
          message,
        }),
      });
      if (!res.ok) throw new Error('http_' + res.status);
      const data = await res.json();
      if (data && typeof data.session_id === 'string' && data.session_id) {
        sessionRef.current = data.session_id;
      }
      const text = (data && typeof data.content === 'string' && data.content.trim())
        ? data.content : t('ai.error');
      setMessages((m) => [...m, { role: 'bot', text }]);
      setStatus('idle');
    } catch (err) {
      console.error('[ai-chat] request failed', err);
      setMessages((m) => [...m, { role: 'bot', text: t('ai.error') }]);
      setStatus('error');
    }
  };

  const submit = (e) => { e.preventDefault(); send(); };
  const chips = [t('ai.chip_1'), t('ai.chip_2'), t('ai.chip_3')];

  return (
    <section className="section-pad" id="ai" style={{background:'linear-gradient(180deg,#FFFFFF 0%,#F4F9FF 100%)'}}>
      <div className="container">
        <div className="chat">
          <div>
            <div className="eyebrow reveal"><span className="dot"/>{t('ai.eyebrow')}</div>
            <h2 className="display reveal" data-d="1" style={{marginTop:20}}>
              {t('ai.title_a')}<br/><span className="roman">{t('ai.title_b')}</span> ✦
            </h2>
            <p className="lead reveal" data-d="2" style={{marginTop:28}}>{t('ai.lead')}</p>
          </div>
          <div className="chat-window reveal" data-d="2" style={{position:'relative'}}>
            <div className="chat-head">
              <span className="av">S</span>
              <div>
                <div className="tt">{t('ai.head_name')}</div>
                <div className="st">{t('ai.head_status')}</div>
              </div>
            </div>
            <div className="chat-body" ref={bodyRef} aria-live="polite" aria-label={t('ai.head_name')}>
              {messages.map((m, i) => (
                <div key={i} className={'msg ' + (m.role === 'usr' ? 'usr' : 'bot')} style={{whiteSpace:'pre-wrap'}}>{m.text}</div>
              ))}
              {isLoading && (
                <div className="msg bot" aria-label={t('ai.thinking')} style={{opacity:.7}}>…</div>
              )}
              {messages.length <= 1 && !isLoading && (
                <div className="chips">
                  {chips.map((c, i) => (
                    <button key={i} type="button" className="chip" onClick={() => send(c)}>{c}</button>
                  ))}
                </div>
              )}
            </div>
            <form className="chat-input" onSubmit={submit}>
              <input
                ref={inputRef}
                value={input}
                onChange={(e) => setInput(e.target.value)}
                placeholder={t('ai.input_placeholder')}
                aria-label={t('ai.input_placeholder')}
                disabled={isLoading}
                autoComplete="off"
                maxLength={1000}
              />
              <button type="submit" disabled={isLoading || !input.trim()} aria-label={t('ai.send_label')} style={(isLoading || !input.trim())?{opacity:.5,cursor:'not-allowed'}:undefined}>
                <svg width="18" height="18" viewBox="0 0 18 18" fill="none" stroke="currentColor" strokeWidth="1.6"><path d="M2 9h14M10 3l6 6-6 6"/></svg>
              </button>
            </form>
          </div>
        </div>
      </div>
    </section>
  );
}

/* ============== CONTACT ============== */
function Contact() {
  const { t, lang } = useT();
  const [form, setForm] = useState({ name: '', email: '', phone: '', message: '' });
  const [status, setStatus] = useState('idle'); // idle | loading | success | error
  const update = (k) => (e) => setForm((f) => ({ ...f, [k]: e.target.value }));

  const submit = async (e) => {
    e.preventDefault();
    if (status === 'loading') return;
    setStatus('loading');
    try {
      const res = await fetch('/api/contact-form', {
        method: 'POST',
        headers: { 'Content-Type': 'application/json' },
        body: JSON.stringify({
          name: form.name.trim(),
          email: form.email.trim(),
          phone: form.phone.trim(),
          message: form.message.trim(),
          language: lang,
          source: 'contact_form',
        }),
      });
      if (!res.ok) throw new Error('http_' + res.status);
      setStatus('success');
      setForm({ name: '', email: '', phone: '', message: '' });
      setTimeout(() => setStatus('idle'), 6000);
    } catch (err) {
      console.error('[contact-form] submit failed', err);
      setStatus('error');
    }
  };

  const isLoading = status === 'loading';
  const isSent = status === 'success';
  const btnLabel = isLoading ? t('contact.btn_sending') : (isSent ? t('contact.btn_sent') : t('contact.btn_send'));

  return (
    <section className="section-pad" id="kontakt" style={{background:'var(--bg-2)'}}>
      <div className="container">
        <div className="sec-head">
          <div>
            <div className="eyebrow reveal"><span className="dot"/>{t('contact.eyebrow')}</div>
            <h2 className="display reveal" data-d="1" style={{marginTop:20}}>
              {t('contact.title_a')}<br/><span className="roman">{t('contact.title_b')}</span>
            </h2>
          </div>
          <p className="lead reveal" data-d="2">{t('contact.lead')}</p>
        </div>
        <div className="contact">
          <div className="ci reveal" data-d="2">
            <div className="ci-row">
              <div className="k">{t('contact.label_addr')}</div>
              <div className="v">{t('contact.addr_street')}<small>{t('contact.addr_city')}</small></div>
            </div>
            <div className="ci-row">
              <div className="k">{t('contact.label_phone')}</div>
              <div className="v">{t('contact.phone_value')}<small>{t('contact.phone_hours')}</small></div>
            </div>
            <div className="ci-row">
              <div className="k">{t('contact.label_email')}</div>
              <div className="v" style={{fontSize:'24px'}}>recepcja@smaga-dent.pl</div>
            </div>
            <div className="ci-row" style={{borderBottom:'none'}}>
              <div className="k">{t('contact.label_social')}</div>
              <div style={{display:'flex',gap:10,marginTop:8}}>
                <a className="btn outline" href="#" style={{padding:'12px 18px',fontSize:12}}>Instagram</a>
                <a className="btn outline" href="#" style={{padding:'12px 18px',fontSize:12}}>Facebook</a>
              </div>
            </div>
          </div>
          <form className="cf reveal" data-d="3" onSubmit={submit} noValidate>
            <div className="cf-grid">
              <div className="field"><label>{t('contact.field_name')}</label><input required value={form.name} onChange={update('name')} disabled={isLoading} placeholder={t('contact.field_name_ph')}/></div>
              <div className="field"><label>{t('contact.field_email')}</label><input required type="email" value={form.email} onChange={update('email')} disabled={isLoading} placeholder={t('contact.field_email_ph')}/></div>
            </div>
            <div className="field"><label>{t('contact.field_phone')}</label><input value={form.phone} onChange={update('phone')} disabled={isLoading} placeholder={t('contact.field_phone_ph')}/></div>
            <div className="field"><label>{t('contact.field_msg')}</label><textarea required value={form.message} onChange={update('message')} disabled={isLoading} placeholder={t('contact.field_msg_ph')}/></div>
            {status === 'success' && (
              <div role="status" aria-live="polite" style={{fontSize:13,color:'#15803d',background:'rgba(34,197,94,.08)',border:'1px solid rgba(34,197,94,.25)',padding:'10px 14px',borderRadius:10,marginTop:8}}>
                {t('contact.success_msg')}
              </div>
            )}
            {status === 'error' && (
              <div role="alert" aria-live="assertive" style={{fontSize:13,color:'#b91c1c',background:'rgba(239,68,68,.08)',border:'1px solid rgba(239,68,68,.25)',padding:'10px 14px',borderRadius:10,marginTop:8}}>
                {t('contact.error_msg')}
              </div>
            )}
            <div style={{display:'flex',justifyContent:'space-between',alignItems:'center',marginTop:10,flexWrap:'wrap',gap:12}}>
              <span style={{fontSize:12,color:'var(--ink-2)',maxWidth:'40ch',lineHeight:1.5}}>{t('contact.policy')}</span>
              <button type="submit" className="btn blue" disabled={isLoading} style={isLoading?{opacity:.7,cursor:'wait'}:undefined}>
                {btnLabel} <span className="arrow"/>
              </button>
            </div>
          </form>
        </div>

        {/* Google Maps — consent-gated (RODO/ePrivacy) */}
        <div className="reveal" data-d="4" style={{marginTop:'48px'}}>
          <MapWithConsent/>
        </div>
      </div>
    </section>
  );
}

/* ============== FAQ ============== */
function FAQSection() {
  const { t } = useT();
  const items = t('faq.items');
  const list = Array.isArray(items) ? items : [];
  return (
    <section className="section-pad" id="faq" style={{background:'var(--white)'}}>
      <div className="container" style={{maxWidth:980}}>
        <div className="sec-head" style={{gridTemplateColumns:'1fr',marginBottom:48}}>
          <div>
            <div className="eyebrow reveal"><span className="dot"/>{t('faq.eyebrow')}</div>
            <h2 className="display reveal" data-d="1" style={{marginTop:20}}>
              {t('faq.title_a')}<br/>{t('faq.title_b')} <span className="roman">{t('faq.title_c')}</span>
            </h2>
          </div>
        </div>
        {list.map((row, i) => {
          const q = Array.isArray(row) ? row[0] : (row && row.q) || '';
          const a = Array.isArray(row) ? row[1] : (row && row.a) || '';
          return (
            <details key={i} className="faq-row reveal" data-d={Math.min(i,5)}>
              <summary>{q}<span className="pls">+</span></summary>
              <p>{a}</p>
            </details>
          );
        })}
      </div>
    </section>
  );
}

/* ============== FOOTER ============== */
function Footer() {
  const { t } = useT();
  const { openSettings } = useConsent();
  return (
    <footer className="foot" id="footer">
      <div className="container">
        <p className="foot-disp reveal">{t('footer.disp_a')}<br/><span className="roman">{t('footer.disp_b')}</span> {t('footer.disp_c')}</p>
        <div className="foot-grid">
          <div>
            <img src="assets/smaga-logo.png" alt="Dental Clinic Smaga" className="foot-logo"/>
            <p style={{fontSize:14,lineHeight:1.7,maxWidth:'34ch',marginTop:0}}>{t('footer.tagline')}</p>
          </div>
          <div>
            <h5>{t('footer.h_menu')}</h5>
            <ul>
              <li><a href="#uslugi">{t('nav.uslugi')}</a></li>
              <li><a href="#technologia">{t('nav.technologia')}</a></li>
              <li><a href="#zespol">{t('nav.zespol')}</a></li>
              {SHOW_METAMORFOZY && <li><a href="#metamorfozy">{t('nav.metamorfozy')}</a></li>}
              <li><a href="#ai">{t('footer.menu_ai')}</a></li>
            </ul>
          </div>
          <div>
            <h5>{t('footer.h_contact')}</h5>
            <ul>
              <li>{t('contact.addr_street')}</li>
              <li>{t('contact.addr_city')}</li>
              <li>{t('contact.phone_value')}</li>
              <li>recepcja@smaga-dent.pl</li>
            </ul>
          </div>
          <div>
            <h5>{t('footer.h_social')}</h5>
            <ul>
              <li><a href="#">Instagram</a></li>
              <li><a href="#">Facebook</a></li>
            </ul>
          </div>
        </div>
        <div className="foot-bot">
          <span>{t('footer.copyright')}</span>
          <span style={{display:'flex',gap:'16px',flexWrap:'wrap',alignItems:'center'}}>
            <button
              onClick={openSettings}
              style={{background:'none',border:'none',color:'inherit',fontSize:'inherit',cursor:'pointer',padding:0,textDecoration:'underline',textDecorationColor:'rgba(255,255,255,.4)',opacity:.75}}
            >
              {t('footer.cookie_settings')}
            </button>
            <a href="/polityka-cookies.html" target="_blank" rel="noopener" style={{color:'inherit',opacity:.75,textDecoration:'underline',textDecorationColor:'rgba(255,255,255,.4)'}}>
              {t('footer.cookie_policy')}
            </a>
            <span>{t('footer.made')}</span>
          </span>
        </div>
      </div>
    </footer>
  );
}

/* ============== APP LAYOUT (inside LanguageProvider) ============== */
function AppLayout() {
  const { t } = useT();
  const [tw, setTweak] = useTweaks(TWEAK_DEFAULTS);
  useReveal();
  const [active, setActive] = useState('top');
  useEffect(() => {
    const ids = ['top','uslugi','technologia','zespol',...(SHOW_METAMORFOZY ? ['metamorfozy'] : []),'kontakt'];
    const io = new IntersectionObserver((entries) => {
      entries.forEach(e => {
        if (e.isIntersecting) setActive(e.target.id);
      });
    }, { rootMargin: '-40% 0px -55% 0px' });
    ids.forEach(id => { const el = document.getElementById(id); if (el) io.observe(el); });
    return () => io.disconnect();
  }, []);

  const jump = (id) => {
    const el = document.getElementById(id);
    if (el) el.scrollIntoView({ behavior: 'smooth' });
  };

  const darkSections = new Set([]);
  const navDark = darkSections.has(active);

  useEffect(() => {
    document.documentElement.style.setProperty('--gold', tw.showGold ? '#C9A96E' : 'transparent');
  }, [tw.showGold]);

  useEffect(() => {
    if (tw.accentEmphasis === 'sky') {
      document.documentElement.style.setProperty('--blue', '#4FA3E8');
    } else if (tw.accentEmphasis === 'gold') {
      document.documentElement.style.setProperty('--blue', '#C9A96E');
    } else {
      document.documentElement.style.setProperty('--blue', '#1A5FAD');
    }
  }, [tw.accentEmphasis]);

  return (
    <>
      <Cursor on={tw.showCursor}/>
      <Nav active={active} onJump={jump} darkMode={navDark}/>
      <Hero treatment={tw.heroTreatment}/>
      <About/>
      <Services/>
      <Technology/>
      {SHOW_METAMORFOZY && <Metamorfozy/>}
      <Team/>
      <Staff/>
      <Opinions/>
      <AIAssistant/>
      <Contact/>
      <FAQSection/>
      <Footer/>
      <a className="fab" href="tel:+48602301711" aria-label={t('fab_label')}>
        <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="1.6"><path d="M5 4h4l2 5-3 2a12 12 0 0 0 5 5l2-3 5 2v4a2 2 0 0 1-2 2A16 16 0 0 1 3 6a2 2 0 0 1 2-2z"/></svg>
      </a>

      <TweaksPanel title="Tweaks">
        <TweakSection label="Hero">
          <TweakRadio label="Tło hero" value={tw.heroTreatment} onChange={v=>setTweak('heroTreatment', v)}
            options={[{value:'mesh',label:'Mesh'},{value:'cinemagraph',label:'Cinema'},{value:'photo',label:'Photo'}]}/>
        </TweakSection>
        <TweakSection label="Brand">
          <TweakRadio label="Akcent" value={tw.accentEmphasis} onChange={v=>setTweak('accentEmphasis', v)}
            options={[{value:'navy',label:'Navy'},{value:'sky',label:'Sky'},{value:'gold',label:'Gold'}]}/>
          <TweakToggle label="Złote akcenty" value={tw.showGold} onChange={v=>setTweak('showGold', v)}/>
        </TweakSection>
        <TweakSection label="Interakcja">
          <TweakToggle label="Custom cursor" value={tw.showCursor} onChange={v=>setTweak('showCursor', v)}/>
        </TweakSection>
      </TweaksPanel>
    </>
  );
}

/* ============== APP ROOT (wraps everything in LanguageProvider + ConsentProvider) ============== */
function App() {
  return (
    <LanguageProvider>
      <ConsentProvider>
        <AppLayout/>
      </ConsentProvider>
    </LanguageProvider>
  );
}

const root = ReactDOM.createRoot(document.getElementById('root'));
root.render(<App/>);