const useT = window.useT;
const LangProvider = window.LangProvider;
const LangSwitch = window.LangSwitch;
const { useState, useMemo, useEffect, useRef } = React;

/* ------------------------------- ICONS ------------------------------- */
const I = ({ children, size = 20, className = '' }) => (
  <svg width={size} height={size} viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="1.75" strokeLinecap="round" strokeLinejoin="round" className={className}>{children}</svg>
);
const IconCheck   = (p) => <I {...p}><polyline points="20 6 9 17 4 12"/></I>;
const IconArrow   = (p) => <I {...p}><line x1="5" y1="12" x2="19" y2="12"/><polyline points="12 5 19 12 12 19"/></I>;
const IconPlus    = (p) => <I {...p}><line x1="12" y1="5" x2="12" y2="19"/><line x1="5" y1="12" x2="19" y2="12"/></I>;
const IconShield  = (p) => <I {...p}><path d="M12 3l8 3v6c0 5-3.5 8.5-8 9-4.5-.5-8-4-8-9V6z"/></I>;
const IconLock    = (p) => <I {...p}><rect x="4" y="11" width="16" height="10" rx="2"/><path d="M8 11V7a4 4 0 0 1 8 0v4"/></I>;
const IconCamera  = (p) => <I {...p}><path d="M23 19a2 2 0 0 1-2 2H3a2 2 0 0 1-2-2V8a2 2 0 0 1 2-2h4l2-3h6l2 3h4a2 2 0 0 1 2 2z"/><circle cx="12" cy="13" r="4"/></I>;
const IconBrain   = (p) => <I {...p}><path d="M9 4.5a3 3 0 0 0-3 3v.5a3 3 0 0 0-2 2.83V13a3 3 0 0 0 2 2.83V17a3 3 0 0 0 5.5 1.66"/><path d="M15 4.5a3 3 0 0 1 3 3v.5a3 3 0 0 1 2 2.83V13a3 3 0 0 1-2 2.83V17a3 3 0 0 1-5.5 1.66"/><path d="M12 5v15"/></I>;
const IconBell    = (p) => <I {...p}><path d="M6 8a6 6 0 0 1 12 0c0 7 3 9 3 9H3s3-2 3-9"/><path d="M10.3 21a1.94 1.94 0 0 0 3.4 0"/></I>;
const IconBolt    = (p) => <I {...p}><polygon points="13 2 3 14 12 14 11 22 21 10 12 10 13 2"/></I>;
const IconDb      = (p) => <I {...p}><ellipse cx="12" cy="5" rx="9" ry="3"/><path d="M3 5v14a9 3 0 0 0 18 0V5"/><path d="M3 12a9 3 0 0 0 18 0"/></I>;
const IconWifiOff = (p) => <I {...p}><line x1="2" y1="2" x2="22" y2="22"/><path d="M8.5 16.5a5 5 0 0 1 7 0"/><path d="M2 8.82a15 15 0 0 1 4.17-2.65"/><path d="M10.66 5c4.01-.36 8.14.9 11.34 3.76"/><path d="M16.85 11.25a10 10 0 0 1 2.22 1.68"/><line x1="12" y1="20" x2="12.01" y2="20"/></I>;
const IconUsers   = (p) => <I {...p}><path d="M17 21v-2a4 4 0 0 0-4-4H5a4 4 0 0 0-4 4v2"/><circle cx="9" cy="7" r="4"/><path d="M23 21v-2a4 4 0 0 0-3-3.87"/><path d="M16 3.13a4 4 0 0 1 0 7.75"/></I>;
const IconSend    = (p) => <I {...p}><line x1="22" y1="2" x2="11" y2="13"/><polygon points="22 2 15 22 11 13 2 9 22 2"/></I>;
const IconDoor    = (p) => <I {...p}><path d="M3 21h18"/><path d="M5 21V5a2 2 0 0 1 2-2h10a2 2 0 0 1 2 2v16"/><path d="M14 12h.01"/></I>;
const IconRuler   = (p) => <I {...p}><path d="M21.3 8.7L8.7 21.3a1 1 0 0 1-1.4 0L2.7 16.7a1 1 0 0 1 0-1.4L15.3 2.7a1 1 0 0 1 1.4 0l4.6 4.6a1 1 0 0 1 0 1.4z"/><path d="M7 17l-2-2"/><path d="M11 13l-2-2"/><path d="M15 9l-2-2"/></I>;
const IconScope   = (p) => <I {...p}><circle cx="12" cy="12" r="9"/><circle cx="12" cy="12" r="3"/><line x1="12" y1="3" x2="12" y2="6"/><line x1="12" y1="18" x2="12" y2="21"/><line x1="3" y1="12" x2="6" y2="12"/><line x1="18" y1="12" x2="21" y2="12"/></I>;
const IconStore   = (p) => <I {...p}><path d="M3 9l1-5h16l1 5"/><path d="M4 9v11h16V9"/><path d="M9 20v-6h6v6"/></I>;
const IconFuel    = (p) => <I {...p}><line x1="3" y1="22" x2="15" y2="22"/><line x1="4" y1="9" x2="14" y2="9"/><path d="M14 22V4a2 2 0 0 0-2-2H6a2 2 0 0 0-2 2v18"/><path d="M14 13h2a2 2 0 0 1 2 2v2a2 2 0 0 0 2 2 2 2 0 0 0 2-2V9.83a2 2 0 0 0-.59-1.42L18 5"/></I>;
const IconPill    = (p) => <I {...p}><path d="M10.5 20.5a4.95 4.95 0 1 1 7-7l-7 7z"/><path d="M8.5 8.5l7 7"/></I>;
const IconShirt   = (p) => <I {...p}><path d="M20.38 3.46L16 2a4 4 0 0 1-8 0L3.62 3.46a2 2 0 0 0-1.34 2.23l.58 3.47a1 1 0 0 0 .99.84H6v10c0 1.1.9 2 2 2h8a2 2 0 0 0 2-2V10h2.15a1 1 0 0 0 .99-.84l.58-3.47a2 2 0 0 0-1.34-2.23z"/></I>;
const IconGem     = (p) => <I {...p}><path d="M6 3h12l4 6-10 13L2 9z"/><path d="M11 3L8 9l4 13 4-13-3-6"/><path d="M2 9h20"/></I>;
const IconBuild   = (p) => <I {...p}><rect x="3" y="3" width="8" height="18" rx="1"/><rect x="13" y="8" width="8" height="13" rx="1"/><path d="M6 7h2"/><path d="M6 11h2"/><path d="M6 15h2"/><path d="M16 12h2"/><path d="M16 16h2"/></I>;
const IconStar    = ({ filled = true, size = 14 }) => (
  <svg width={size} height={size} viewBox="0 0 24 24" fill={filled ? '#B7892B' : 'none'} stroke="#B7892B" strokeWidth="1.5" strokeLinejoin="round"><polygon points="12 2 15.09 8.26 22 9.27 17 14.14 18.18 21.02 12 17.77 5.82 21.02 7 14.14 2 9.27 8.91 8.26 12 2"/></svg>
);
const IconPhone   = (p) => <I {...p}><path d="M22 16.92v3a2 2 0 0 1-2.18 2 19.79 19.79 0 0 1-8.63-3.07 19.5 19.5 0 0 1-6-6 19.79 19.79 0 0 1-3.07-8.67A2 2 0 0 1 4.11 2h3a2 2 0 0 1 2 1.72 12.84 12.84 0 0 0 .7 2.81 2 2 0 0 1-.45 2.11L8.09 9.91a16 16 0 0 0 6 6l1.27-1.27a2 2 0 0 1 2.11-.45 12.84 12.84 0 0 0 2.81.7A2 2 0 0 1 22 16.92z"/></I>;

/* ------------------------------- BASE BITS ------------------------------- */
const Section = ({ id, dark = false, children, className = '' }) => (
  <section id={id} className={`${dark ? 'bg-night text-white' : 'bg-paper text-ink'} ${className}`} style={{ paddingTop: 120, paddingBottom: 120 }}>
    <div className="mx-auto max-w-page px-6">{children}</div>
  </section>
);
const Eyebrow = ({ children, dark = false }) => (
  <div className={`text-[11px] font-medium tracking-[0.18em] uppercase ${dark ? 'text-white/60' : 'text-muted'}`}>{children}</div>
);

/* Stronger reveal — fades in EVERY time element scrolls into view */
const Reveal = ({ children, delay = 0, className = '', from = 'up', once = false }) => {
  const ref = useRef(null);
  useEffect(() => {
    const el = ref.current; if (!el) return;
    // If already in viewport at mount (top of page), reveal with delay
    const rect = el.getBoundingClientRect();
    const vh = window.innerHeight || document.documentElement.clientHeight;
    if (rect.top < vh * 0.85 && rect.bottom > 0) {
      const t0 = setTimeout(() => el && el.classList.add('reveal-in'), delay);
      if (once) return () => clearTimeout(t0);
    }
    if (typeof IntersectionObserver === 'undefined') {
      el.classList.add('reveal-in');
      return;
    }
    const io = new IntersectionObserver((es) => {
      es.forEach(e => {
        if (e.isIntersecting) {
          setTimeout(() => el && el.classList.add('reveal-in'), delay);
          if (once) io.unobserve(el);
        } else if (!once) {
          // Reset when scrolled fully out of view (above or below)
          if (e.boundingClientRect.top > vh || e.boundingClientRect.bottom < 0) {
            el.classList.remove('reveal-in');
          }
        }
      });
    }, { threshold: [0, 0.15], rootMargin: '0px 0px -10% 0px' });
    io.observe(el);
    return () => io.disconnect();
  }, [delay, once]);
  return <div ref={ref} className={`reveal reveal-${from} ${className}`}>{children}</div>;
};

const PrimaryBtn = ({ children, href = '#', invert = false, className = '' }) => (
  <a href={href} className={`btn btn-primary inline-flex items-center gap-2 rounded-btn px-5 h-11 text-sm font-medium ${invert ? 'bg-white text-ink hover:bg-white' : 'bg-ink text-white'} ${className}`}>{children}</a>
);
const OutlineBtn = ({ children, href = '#', invert = false, className = '' }) => (
  <a href={href} className={`btn btn-outline inline-flex items-center gap-2 rounded-btn px-5 h-11 text-sm font-medium border-[1.5px] ${invert ? 'border-white/70 text-white hover:bg-white/5' : 'border-ink text-ink hover:bg-ink/[0.03]'} ${className}`}>{children}</a>
);

/* Smooth scroll for anchors */
const smoothScroll = (e, sel) => {
  const target = document.querySelector(sel);
  if (!target) return;
  e.preventDefault();
  const top = target.getBoundingClientRect().top + window.scrollY - 60;
  window.scrollTo({ top, behavior: 'smooth' });
};
const Anchor = ({ href, children, className }) => (
  <a href={href} onClick={(e) => href && href.startsWith('#') && smoothScroll(e, href)} className={className}>{children}</a>
);

/* ------------------------------- NAV ------------------------------- */
const Nav = () => {
  const { t } = useT();
  const [scrolled, setScrolled] = useState(false);
  useEffect(() => { const onS = () => setScrolled(window.scrollY > 4); window.addEventListener('scroll', onS); onS(); return () => window.removeEventListener('scroll', onS); }, []);
  return (
    <header className={`sticky top-0 z-40 bg-white/90 backdrop-blur ${scrolled ? 'border-b border-rule' : ''}`}>
      <div className="mx-auto max-w-page px-6 h-16 flex items-center gap-8">
        <a href="#" className="flex items-center gap-3 shrink-0">
          <span className="inline-flex items-center justify-center w-7 h-7 rounded-[4px] bg-ink text-white text-[11px] font-bold tracking-wider">SE</span>
          <span className="text-[15px] font-semibold">SELECO</span>
          <span className="text-rule">/</span>
          <span className="text-[15px] text-muted">Face Security</span>
        </a>
        <nav className="hidden md:flex items-center gap-7 text-sm text-ink/80 mx-auto">
          <Anchor className="linkline" href="#dla-kogo">{t('nav_dla_kogo')}</Anchor>
          <Anchor className="linkline" href="#jak">{t('nav_jak')}</Anchor>
          <Anchor className="linkline" href="#pakiety">{t('nav_pakiety')}</Anchor>
          <Anchor className="linkline" href="#kamery">{t('nav_kamery')}</Anchor>
          <Anchor className="linkline" href="#roi">{t('nav_roi')}</Anchor>
          <Anchor className="linkline" href="#faq">{t('nav_faq')}</Anchor>
        </nav>
        <div className="ml-auto md:ml-0 flex items-center gap-3">
          <Anchor href="#kontakt" className="hidden sm:inline text-sm text-ink/80 linkline">{t('nav_kontakt')}</Anchor>
          <LangSwitch className="hidden sm:inline-flex"/>
          <PrimaryBtn href="mailto:biuro@seleco.pl">{t('nav_demo')}</PrimaryBtn>
        </div>
      </div>
    </header>
  );
};

/* ------------------------------- HERO ------------------------------- */
const Hero = () => {
  const { t } = useT();
  const kpis = [['0,2s', t('hero_kpi_1')],['<1s', t('hero_kpi_2')],['95%+', t('hero_kpi_3')],['24/7', t('hero_kpi_4')]];
  return (
    <section className="bg-night text-white">
      <div className="mx-auto max-w-page px-6" style={{ paddingTop: 56, paddingBottom: 128 }}>
        <div className="grid grid-cols-12 gap-10 items-end">
          <div className="col-span-12 lg:col-span-8">
            <Reveal><Eyebrow dark>{t('hero_eyebrow')}</Eyebrow></Reveal>
            <Reveal delay={80}>
              <h1 className="mt-6 font-semibold tracking-[-0.02em]" style={{ fontSize: 'clamp(44px, 6.2vw, 84px)', lineHeight: 1.02 }}>
                {t('hero_title_a')}<br/>
                <span className="text-white/70">{t('hero_title_b')}</span>
              </h1>
            </Reveal>
            <Reveal delay={160}>
              <p className="mt-8 text-white/70 max-w-[62ch]" style={{ fontSize: 18, lineHeight: 1.55 }}>
                {t('hero_lead_a')}<span className="text-white font-medium num">{t('hero_lead_time')}</span>{t('hero_lead_b')}
              </p>
            </Reveal>
            <Reveal delay={220}>
              <div className="mt-10 flex flex-wrap gap-3">
                <PrimaryBtn invert href="mailto:biuro@seleco.pl">{t('hero_cta_primary')} <IconArrow size={16}/></PrimaryBtn>
                <a href="#pakiety" onClick={(e) => smoothScroll(e, '#pakiety')} className="btn btn-outline inline-flex items-center gap-2 rounded-btn px-5 h-11 text-sm font-medium border-[1.5px] border-white/70 text-white hover:bg-white/5">{t('hero_cta_secondary')}</a>
              </div>
            </Reveal>
          </div>

          <div className="col-span-12 lg:col-span-4">
            <Reveal delay={260} from="right">
              <div className="border border-white/15 rounded-card overflow-hidden">
                <div className="bg-black/40">
                  <img src={"Face Security_files/cctv-alert.png"} alt="CCTV alert" className="block w-full h-auto"/>
                </div>
                <div className="p-6">
                  <Eyebrow dark>{t('hero_signals')}</Eyebrow>
                  <div className="mt-5 space-y-3 text-[14px]">
                    <div className="flex items-start gap-3">
                      <span className="mt-1 w-1.5 h-1.5 rounded-full bg-brass inline-block shrink-0"/>
                      <div><div className="text-white/90">{t('hero_match')}</div><div className="text-white/50 text-[12px] num">{t('hero_match_meta')}</div></div>
                    </div>
                    <div className="flex items-start gap-3">
                      <span className="mt-1 w-1.5 h-1.5 rounded-full bg-brass inline-block shrink-0"/>
                      <div><div className="text-white/90">{t('hero_telegram')}</div><div className="text-white/50 text-[12px] num">{t('hero_telegram_meta')}</div></div>
                    </div>
                    <div className="flex items-start gap-3">
                      <span className="mt-1 w-1.5 h-1.5 rounded-full bg-white/30 inline-block shrink-0"/>
                      <div><div className="text-white/90">{t('hero_local')}</div><div className="text-white/50 text-[12px] num">{t('hero_local_meta')}</div></div>
                    </div>
                  </div>
                  <div className="mt-6 pt-6 border-t border-white/10 flex items-baseline gap-2">
                    <span className="num text-white" style={{ fontSize: 34, fontWeight: 600 }}>0,2s</span>
                    <span className="text-white/60 text-sm">{t('hero_avg')}</span>
                  </div>
                </div>
              </div>
            </Reveal>
          </div>
        </div>

        <Reveal delay={320}>
          <div className="mt-16 pt-10 border-t border-white/10 grid grid-cols-2 md:grid-cols-4 gap-8">
            {kpis.map(([big, small], i) => (
              <div key={i} className="flex items-baseline gap-3">
                <span className="num text-brass" style={{ fontSize: 40, fontWeight: 600, letterSpacing: '-0.02em' }}>{big}</span>
                <span className="text-white/65 text-sm">{small}</span>
              </div>
            ))}
          </div>
        </Reveal>
      </div>
    </section>
  );
};

/* ------------------------------- DLA KOGO ------------------------------- */
const DlaKogo = () => {
  const { t } = useT();
  const segments = [
    { icon: IconStore, t: t('seg_1_t'), d: t('seg_1_d') },
    { icon: IconFuel,  t: t('seg_2_t'), d: t('seg_2_d') },
    { icon: IconPill,  t: t('seg_3_t'), d: t('seg_3_d') },
    { icon: IconShirt, t: t('seg_4_t'), d: t('seg_4_d') },
    { icon: IconGem,   t: t('seg_5_t'), d: t('seg_5_d') },
    { icon: IconBuild, t: t('seg_6_t'), d: t('seg_6_d') },
  ];
  return (
    <Section id="dla-kogo">
      <div className="grid grid-cols-12 gap-10 items-end">
        <div className="col-span-12 lg:col-span-6">
          <Reveal><Eyebrow>{t('segments_eyebrow')}</Eyebrow></Reveal>
          <Reveal delay={80}>
            <h2 className="mt-4 font-semibold tracking-[-0.015em]" style={{ fontSize: 'clamp(32px, 4vw, 48px)', lineHeight: 1.08 }}>{t('segments_title')}</h2>
          </Reveal>
        </div>
        <div className="col-span-12 lg:col-span-6">
          <Reveal delay={120}><p className="text-muted max-w-[52ch]">{t('segments_lead')}</p></Reveal>
        </div>
      </div>
      <div className="mt-14 grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-5">
        {segments.map((s, i) => (
          <Reveal key={i} delay={80 + i * 60} from={i % 2 === 0 ? 'up' : 'up'}>
            <div className="h-full bg-white border border-rule rounded-card p-7 shadow-soft hover-lift">
              <div className="text-ink"><s.icon size={24}/></div>
              <div className="mt-5 font-semibold text-[16.5px] leading-snug">{s.t}</div>
              <p className="mt-2 text-[14px] text-muted leading-relaxed">{s.d}</p>
            </div>
          </Reveal>
        ))}
      </div>
    </Section>
  );
};

/* ------------------------------- JAK DZIAŁA ------------------------------- */
const Jak = () => {
  const { t } = useT();
  const steps = [
    { icon: IconCamera, t: t('step_1_t'), d: t('step_1_d') },
    { icon: IconBrain,  t: t('step_2_t'), d: t('step_2_d') },
    { icon: IconBell,   t: t('step_3_t'), d: t('step_3_d') },
  ];
  return (
    <Section id="jak" className="border-t border-rule">
      <Reveal><Eyebrow>{t('jak_eyebrow')}</Eyebrow></Reveal>
      <Reveal delay={80}>
        <h2 className="mt-4 font-semibold tracking-[-0.015em]" style={{ fontSize: 'clamp(32px, 4vw, 48px)', lineHeight: 1.08 }}>{t('jak_title')}</h2>
      </Reveal>
      <div className="mt-16 grid grid-cols-1 md:grid-cols-3 gap-6">
        {steps.map((s, i) => (
          <Reveal key={i} delay={80 + i * 80}>
            <div className="h-full">
              <div className="flex items-center gap-3"><span className="num text-muted text-xs">0{i+1}</span><span className="flex-1 hair"/></div>
              <div className="mt-5 text-ink"><s.icon size={28}/></div>
              <div className="mt-5 font-semibold text-[18px]">{s.t}</div>
              <div className="mt-2 text-[14.5px] text-muted leading-relaxed">{s.d}</div>
            </div>
          </Reveal>
        ))}
      </div>
    </Section>
  );
};

/* ------------------------------- SYSTEM W AKCJI ------------------------------- */
const BrowserChrome = ({ url, label, children }) => (
  <div className="rounded-[10px] overflow-hidden border border-rule bg-white shadow-soft">
    <div className="flex items-center gap-3 px-4 h-9 border-b border-rule bg-[#FAFAFA]">
      <div className="flex gap-1.5"><span className="w-2.5 h-2.5 rounded-full bg-[#FF5F57]"/><span className="w-2.5 h-2.5 rounded-full bg-[#FEBC2E]"/><span className="w-2.5 h-2.5 rounded-full bg-[#28C840]"/></div>
      <div className="flex-1 mx-4 h-6 rounded-[4px] flex items-center px-3 text-[11px] num truncate bg-white border border-rule text-muted">
        <span className="opacity-60 mr-1.5">▲</span>{url}
      </div>
      <div className="text-[10.5px] tracking-[0.14em] uppercase text-muted">{label}</div>
    </div>
    <div className="bg-white">{children}</div>
  </div>
);

const PhoneFrame = ({ children, time = '14:23' }) => (
  <div className="relative mx-auto" style={{ width: 280, height: 568, background: '#0A0A0B', borderRadius: 38, padding: 10, boxShadow: '0 24px 60px rgba(15,15,16,0.25), 0 6px 14px rgba(15,15,16,0.12)' }}>
    <div className="absolute top-3 left-1/2 -translate-x-1/2 w-24 h-5 bg-black rounded-[12px] z-10"/>
    <div className="relative w-full h-full overflow-hidden" style={{ borderRadius: 30, background: '#EFEFF1' }}>
      <div className="flex items-center justify-between px-6 pt-2 pb-1 text-[11px] num text-ink/80">
        <span className="font-semibold">{time}</span>
        <div className="flex items-center gap-1 text-[10px]"><span>●●●●</span><span>5G</span><span>▮▮▮</span></div>
      </div>
      {children}
    </div>
  </div>
);

const TelegramAlert = ({ time = '14:23:08', cam = 'CAM 01 · entry', conf = '98.4%', name = 'THIEF_011', tag, urgent = true }) => {
  const { t } = useT();
  return (
    <div className="bg-white rounded-[12px] mx-3 my-2 overflow-hidden shadow-sm border border-black/5">
      <div className="flex items-center gap-2 px-3 py-2 border-b border-black/5">
        <div className="w-7 h-7 rounded-full bg-[#229ED9] flex items-center justify-center text-white text-[11px] font-bold">FS</div>
        <div className="flex-1 min-w-0">
          <div className="text-[11.5px] font-semibold text-ink truncate">Face Security · Bot</div>
          <div className="text-[9.5px] text-muted num">{time}</div>
        </div>
        {urgent && <span className="text-[9px] tracking-wider font-bold text-[#E5484D] bg-[#FFE5E6] px-1.5 py-0.5 rounded">ALERT</span>}
      </div>
      <div className="relative aspect-[4/3] bg-[#1a1a1c] overflow-hidden">
        <div className="absolute inset-0" style={{ background: 'linear-gradient(135deg, #2a2d33 0%, #15171b 100%)' }}/>
        <div className="absolute inset-0 flex items-center justify-center">
          <div className="w-20 h-20 rounded-full" style={{ background: 'radial-gradient(circle at 40% 30%, #6b6b6f 0%, #3a3a3e 60%, #2a2a2d 100%)', filter: 'blur(6px)' }}/>
        </div>
        <div className="absolute top-2 left-2 text-[9px] tracking-widest text-white/70 num">{cam}</div>
        <div className="absolute top-2 right-2 text-[9px] tracking-widest text-[#E5484D] num font-bold">REC ●</div>
        <div className="absolute bottom-2 right-2 text-[9px] num text-white/70">{time}</div>
        <div className="absolute" style={{ left: '40%', top: '28%', width: 50, height: 56, border: '1.5px solid #B7892B', borderRadius: 2 }}>
          <div className="absolute -top-4 left-0 text-[8px] tracking-widest text-[#B7892B] font-bold num">MATCH {conf}</div>
        </div>
      </div>
      <div className="px-3 py-2.5">
        <div className="text-[12px] font-semibold text-ink">{t('flow_alert_detected')} {name}</div>
        <div className="text-[10.5px] text-muted mt-0.5">{t('flow_alert_note')} {tag}</div>
      </div>
    </div>
  );
};

const SystemFlow = () => {
  const { t } = useT();
  return (
    <Section className="border-t border-rule">
      <div className="grid grid-cols-12 gap-10 items-end">
        <div className="col-span-12 lg:col-span-7">
          <Reveal><Eyebrow>{t('flow_eyebrow')}</Eyebrow></Reveal>
          <Reveal delay={80}>
            <h2 className="mt-4 font-semibold tracking-[-0.015em]" style={{ fontSize: 'clamp(32px, 4vw, 48px)', lineHeight: 1.08 }}>
              {t('flow_title_a')}<br/>{t('flow_title_b')}<span className="text-muted">{t('flow_title_c')}</span>
            </h2>
          </Reveal>
        </div>
        <div className="col-span-12 lg:col-span-5">
          <Reveal delay={120}><p className="text-muted max-w-[52ch]">{t('flow_lead')}</p></Reveal>
        </div>
      </div>

      <div className="mt-14 grid grid-cols-12 gap-6 items-stretch">
        <div className="col-span-12 lg:col-span-5">
          <Reveal delay={120} from="left">
            <div className="flex items-center gap-3 mb-4">
              <span className="num text-xs text-muted">01</span>
              <span className="text-[12px] tracking-[0.14em] uppercase font-medium">{t('flow_step_1')}</span>
              <span className="flex-1 hair"/>
            </div>
            <BrowserChrome url="panel.face-security.local/search" label="Web panel">
              <img src="Face Security_files/screen-gallery.png?v=2" alt="Event gallery — faces anonymised" className="block w-full h-auto"/>
            </BrowserChrome>
            <p className="mt-4 text-[13.5px] text-muted leading-relaxed">{t('flow_step_1_d')}</p>
          </Reveal>
        </div>

        <div className="col-span-12 lg:col-span-2 flex flex-col items-center justify-center">
          <Reveal delay={200}>
            <div className="hidden lg:flex flex-col items-center gap-3 py-12">
              <div className="text-[11px] tracking-[0.14em] uppercase text-muted">{t('flow_arrow')}</div>
              <svg width="80" height="40" viewBox="0 0 80 40" fill="none">
                <path d="M2 20 H72" stroke="#B7892B" strokeWidth="1.5" strokeDasharray="4 4"/>
                <path d="M68 12 L78 20 L68 28" stroke="#B7892B" strokeWidth="1.5" strokeLinecap="round" strokeLinejoin="round"/>
              </svg>
              <div className="num text-brass text-[11px]">→ persist</div>
            </div>
            <div className="lg:hidden flex justify-center py-2 text-brass">
              <svg width="20" height="40" viewBox="0 0 20 40" fill="none">
                <path d="M10 2 V32" stroke="#B7892B" strokeWidth="1.5" strokeDasharray="4 4"/>
                <path d="M2 28 L10 38 L18 28" stroke="#B7892B" strokeWidth="1.5" strokeLinecap="round" strokeLinejoin="round"/>
              </svg>
            </div>
          </Reveal>
        </div>

        <div className="col-span-12 lg:col-span-5">
          <Reveal delay={280} from="right">
            <div className="flex items-center gap-3 mb-4">
              <span className="num text-xs text-muted">02</span>
              <span className="text-[12px] tracking-[0.14em] uppercase font-medium">{t('flow_step_2')}</span>
              <span className="flex-1 hair"/>
            </div>
            <BrowserChrome url="panel.face-security.local/thieves" label="Web panel">
              <img src="Face Security_files/screen-database.png?v=2" alt="Offender database — faces anonymised" className="block w-full h-auto"/>
            </BrowserChrome>
            <p className="mt-4 text-[13.5px] text-muted leading-relaxed">{t('flow_step_2_d')}</p>
          </Reveal>
        </div>
      </div>

      <div className="mt-24">
        <Reveal delay={120}>
          <div className="flex items-center gap-3 mb-4">
            <span className="num text-xs text-muted">03</span>
            <span className="text-[12px] tracking-[0.14em] uppercase font-medium">{t('flow_step_3')}</span>
            <span className="flex-1 hair"/>
          </div>
          <div className="grid grid-cols-12 gap-8 items-end">
            <div className="col-span-12 lg:col-span-4">
              <h3 className="font-semibold tracking-[-0.01em] text-[26px] leading-tight">{t('flow_phones_t')}<br/>{t('flow_phones_t2')}</h3>
              <p className="mt-4 text-[14.5px] text-muted leading-relaxed max-w-[42ch]">{t('flow_phones_d')}</p>
              <div className="mt-6 flex items-baseline gap-3">
                <span className="num text-brass" style={{ fontSize: 48, fontWeight: 600, letterSpacing: '-0.02em' }}>0,8s</span>
                <span className="text-muted text-sm">{t('flow_phones_avg')}</span>
              </div>
            </div>
            <div className="col-span-12 lg:col-span-8">
              <div className="grid grid-cols-1 sm:grid-cols-3 gap-6 lg:gap-4">
                <Reveal delay={160}>
                  <div>
                    <PhoneFrame>
                      <div className="px-4 pt-3 pb-2 flex items-center gap-2">
                        <div className="w-6 h-6 rounded-full bg-[#229ED9] text-white text-[9px] font-bold flex items-center justify-center">FS</div>
                        <div className="text-[12px] font-semibold text-ink">Face Security</div>
                      </div>
                      <TelegramAlert tag={t('flow_alert_repeat')}/>
                      <TelegramAlert time="14:23:09" cam="CAM 02 · interior" conf="96.1%" tag={t('flow_alert_dir')} urgent={false}/>
                    </PhoneFrame>
                    <div className="text-center mt-3 text-[12px] text-muted">{t('flow_role_owner')}</div>
                  </div>
                </Reveal>
                <Reveal delay={260}>
                  <div>
                    <PhoneFrame>
                      <div className="px-4 pt-3 pb-2 flex items-center gap-2">
                        <div className="w-6 h-6 rounded-full bg-[#229ED9] text-white text-[9px] font-bold flex items-center justify-center">FS</div>
                        <div className="text-[12px] font-semibold text-ink">Face Security</div>
                      </div>
                      <TelegramAlert tag={t('flow_alert_repeat')}/>
                      <div className="mx-3 mt-1 mb-2 px-3 py-2 bg-white rounded-[10px] border border-black/5 text-[10.5px] text-ink">
                        <span className="font-semibold">{t('flow_alert_shop')}</span><br/>
                        <span className="text-muted">{t('flow_alert_dispatch')}</span>
                      </div>
                    </PhoneFrame>
                    <div className="text-center mt-3 text-[12px] text-muted">{t('flow_role_manager')}</div>
                  </div>
                </Reveal>
                <Reveal delay={360}>
                  <div>
                    <PhoneFrame>
                      <div className="px-4 pt-3 pb-2 flex items-center gap-2">
                        <div className="w-6 h-6 rounded-full bg-[#229ED9] text-white text-[9px] font-bold flex items-center justify-center">FS</div>
                        <div className="text-[12px] font-semibold text-ink">Face Security</div>
                      </div>
                      <TelegramAlert tag={t('flow_alert_repeat')}/>
                      <div className="mx-3 mt-1 px-3 py-2 bg-[#0A0A0B] rounded-[10px] text-[10.5px] text-white">
                        <span className="font-semibold text-brass">{t('flow_role_security')}</span><br/>
                        <span className="text-white/70">{t('flow_alert_confirm')}</span>
                        <div className="mt-1.5 flex gap-1.5">
                          <span className="px-1.5 py-0.5 rounded bg-white/10 text-[9px]">{t('flow_alert_going')}</span>
                          <span className="px-1.5 py-0.5 rounded bg-white/10 text-[9px]">{t('flow_alert_onsite')}</span>
                        </div>
                      </div>
                    </PhoneFrame>
                    <div className="text-center mt-3 text-[12px] text-muted">{t('flow_role_security')}</div>
                  </div>
                </Reveal>
              </div>
            </div>
          </div>
        </Reveal>
      </div>
    </Section>
  );
};

/* ------------------------------- PAKIETY ------------------------------- */
const formatGBP = (n) => '£' + n.toLocaleString('en-GB');

const Pakiety = () => {
  const { t } = useT();
  const plans = [
    { id: 'starter', name: 'Starter', priceM: 99, setup: 299, blurb: t('pak_starter_blurb'), features: t('pak_starter_f'), cta: t('pak_starter_cta') },
    { id: 'standard', name: 'Standard', priceM: 199, setup: 299, popular: true, blurb: t('pak_standard_blurb'), features: t('pak_standard_f'), cta: t('pak_standard_cta') },
    { id: 'pro', name: 'Professional', priceM: 299, setup: 699, blurb: t('pak_pro_blurb'), features: t('pak_pro_f'), cta: t('pak_pro_cta') },
  ];
  return (
    <Section id="pakiety" className="border-t border-rule">
      <div className="flex flex-col md:flex-row md:items-end md:justify-between gap-10">
        <div>
          <Reveal><Eyebrow>{t('pak_eyebrow')}</Eyebrow></Reveal>
          <Reveal delay={80}>
            <h2 className="mt-4 font-semibold tracking-[-0.015em]" style={{ fontSize: 'clamp(32px, 4vw, 48px)', lineHeight: 1.08 }}>{t('pak_title_a')} <br/>{t('pak_title_b')}</h2>
          </Reveal>
        </div>
        <Reveal delay={120}><p className="text-muted max-w-[40ch]">{t('pak_lead')}</p></Reveal>
      </div>

      <Reveal delay={160}>
        <div className="mt-10 rounded-card bg-sand ring-brass p-5 flex gap-4 items-start">
          <span className="mt-0.5 text-brass"><IconShield size={20}/></span>
          <p className="text-[14.5px] text-ink leading-relaxed">
            <span className="font-semibold">{t('pak_callout_a')}</span>{t('pak_callout_b')}
          </p>
        </div>
      </Reveal>

      <div className="mt-10 grid grid-cols-1 md:grid-cols-3 gap-5 items-stretch">
        {plans.map((plan, i) => (
          <Reveal key={plan.id} delay={120 + i * 100}>
            <div className={`relative h-full flex flex-col bg-white rounded-card border ${plan.popular ? 'border-navy shadow-lift' : 'border-rule shadow-soft'} p-7 hover-lift`}>
              {plan.popular && (
                <div className="absolute -top-3 left-7">
                  <span className="inline-flex items-center gap-1.5 bg-navy text-white text-[11px] font-medium tracking-[0.12em] uppercase px-2.5 py-1 rounded-[4px]">
                    <span className="w-1.5 h-1.5 bg-brass rounded-full"/> {t('pak_popular')}
                  </span>
                </div>
              )}
              <div className="text-[13px] font-medium tracking-[0.14em] uppercase text-muted">{plan.name}</div>
              <div className="mt-5 flex items-baseline gap-2">
                <span className="num font-semibold tracking-[-0.02em]" style={{ fontSize: 44 }}>{formatGBP(plan.priceM)}</span>
                <span className="text-muted text-sm">{t('pak_per_month')}</span>
              </div>
              <div className="mt-1 text-xs text-navy num">{t('pak_setup')} {formatGBP(plan.setup)}</div>
              <p className="mt-4 text-[14px] text-muted leading-relaxed min-h-[48px]">{plan.blurb}</p>
              <div className="hair my-6"/>
              <ul className="space-y-3 flex-1">
                {plan.features.map((f, idx) => (
                  <li key={idx} className="flex items-start gap-3 text-[14px]">
                    <span className="mt-0.5 text-navy"><IconCheck size={16}/></span>
                    <span className="text-ink">{f}</span>
                  </li>
                ))}
              </ul>
              <a href="mailto:biuro@seleco.pl" className={`btn mt-7 inline-flex items-center justify-center h-11 rounded-btn text-sm font-medium w-full ${plan.popular ? 'bg-ink text-white btn-primary' : 'border-[1.5px] border-ink text-ink btn-outline'}`}>{plan.cta}</a>
            </div>
          </Reveal>
        ))}
      </div>

      <Reveal delay={300}>
        <div className="mt-10 rounded-card border border-rule bg-white p-6 md:p-8 grid grid-cols-12 gap-6 items-center">
          <div className="col-span-12 md:col-span-8">
            <Eyebrow>{t('pak_addon_eyebrow')}</Eyebrow>
            <div className="mt-3 text-[20px] font-semibold leading-snug">{t('pak_addon_t')}</div>
            <p className="mt-2 text-muted text-[14.5px] leading-relaxed max-w-[68ch]">{t('pak_addon_d')}</p>
          </div>
          <div className="col-span-12 md:col-span-4 flex flex-col md:items-end gap-3">
            <div className="flex items-baseline gap-2">
              <span className="num font-semibold tracking-[-0.02em]" style={{ fontSize: 36 }}>+£99</span>
              <span className="text-muted text-sm">{t('pak_addon_per')}</span>
            </div>
            <PrimaryBtn href="mailto:biuro@seleco.pl">{t('pak_addon_cta')} <IconArrow size={16}/></PrimaryBtn>
          </div>
        </div>
      </Reveal>

      <Reveal delay={340}>
        <div className="mt-6 rounded-card border border-rule bg-white p-6 flex flex-col md:flex-row md:items-center gap-4 md:gap-8">
          <div className="text-[12px] font-medium tracking-[0.14em] uppercase text-muted shrink-0">{t('pak_example_label')}</div>
          <div className="num text-[15px]">
            {t('pak_example_a')}<span className="font-semibold">{t('pak_example_setup')}</span><span className="text-muted">{t('pak_example_plus')}</span><span className="font-semibold">{t('pak_example_monthly')}</span>{t('pak_example_end')}
          </div>
        </div>
      </Reveal>

      <div className="mt-4 text-xs text-muted">{t('pak_footnote')}</div>
    </Section>
  );
};

/* ------------------------------- CO ZAWIERA ------------------------------- */
const CoZawiera = () => {
  const { t } = useT();
  const inclusion = [
    { icon: IconSend,    t: t('inc_1_t'), d: t('inc_1_d') },
    { icon: IconScope,   t: t('inc_2_t'), d: t('inc_2_d') },
    { icon: IconBolt,    t: t('inc_3_t'), d: t('inc_3_d') },
    { icon: IconDb,      t: t('inc_4_t'), d: t('inc_4_d') },
    { icon: IconUsers,   t: t('inc_5_t'), d: t('inc_5_d') },
    { icon: IconLock,    t: t('inc_6_t'), d: t('inc_6_d') },
  ];
  return (
    <Section className="border-t border-rule">
      <Reveal><Eyebrow>{t('inc_eyebrow')}</Eyebrow></Reveal>
      <Reveal delay={80}>
        <h2 className="mt-4 font-semibold tracking-[-0.015em]" style={{ fontSize: 'clamp(28px, 3.6vw, 44px)', lineHeight: 1.08 }}>{t('inc_title')}</h2>
      </Reveal>
      <div className="mt-12 grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-5">
        {inclusion.map((it, i) => (
          <Reveal key={i} delay={60 + i * 60}>
            <div className="h-full bg-white border border-rule rounded-card p-6 hover-lift">
              <div className="text-ink"><it.icon size={22}/></div>
              <div className="mt-5 font-semibold text-[16px]">{it.t}</div>
              <p className="mt-2 text-[14px] text-muted leading-relaxed">{it.d}</p>
            </div>
          </Reveal>
        ))}
      </div>
    </Section>
  );
};

/* ------------------------------- KAMERY ------------------------------- */
const Kamery = () => {
  const { t } = useT();
  const cameraRows = [
    [...t('kam_row_1'), 4],
    [...t('kam_row_2'), 5],
    [...t('kam_row_3'), 5],
    [...t('kam_row_4'), 4],
  ];
  const entranceCards = [
    { icon: IconDoor,  t: t('kam_ent_1_t'), d: t('kam_ent_1_d') },
    { icon: IconRuler, t: t('kam_ent_2_t'), d: t('kam_ent_2_d') },
    { icon: IconScope, t: t('kam_ent_3_t'), d: t('kam_ent_3_d') },
  ];
  return (
    <Section id="kamery">
      <div className="grid grid-cols-12 gap-10 items-end">
        <div className="col-span-12 lg:col-span-6">
          <Reveal><Eyebrow>{t('kam_eyebrow')}</Eyebrow></Reveal>
          <Reveal delay={80}>
            <h2 className="mt-4 font-semibold tracking-[-0.015em]" style={{ fontSize: 'clamp(32px, 4vw, 48px)', lineHeight: 1.08 }}>{t('kam_title')}</h2>
          </Reveal>
        </div>
        <div className="col-span-12 lg:col-span-6">
          <Reveal delay={120}><p className="text-muted max-w-[52ch]">{t('kam_lead')}</p></Reveal>
        </div>
      </div>
      <Reveal delay={160}>
        <div className="mt-12 border border-rule rounded-card overflow-hidden bg-white">
          <div className="overflow-x-auto scroll-x">
            <table className="w-full min-w-[800px] text-[14.5px]">
              <thead>
                <tr className="bg-[#FAFAFA] text-ink">
                  <th className="text-left font-medium px-5 py-4">{t('kam_th_plan')}</th>
                  <th className="text-left font-medium px-5 py-4">{t('kam_th_tier')}</th>
                  <th className="text-left font-medium px-5 py-4">{t('kam_th_best')}</th>
                  <th className="text-left font-medium px-5 py-4">{t('kam_th_spec')}</th>
                  <th className="text-right font-medium px-5 py-4">{t('kam_th_score')}</th>
                </tr>
              </thead>
              <tbody>
                {cameraRows.map((r, i) => (
                  <tr key={i} className="border-t border-rule">
                    <td className="px-5 py-5"><span className="text-[11.5px] font-medium tracking-[0.14em] uppercase text-navy">{r[0]}</span></td>
                    <td className="px-5 py-5 font-medium text-ink">{r[1]}</td>
                    <td className="px-5 py-5 text-muted">{r[2]}</td>
                    <td className="px-5 py-5 text-muted">{r[3]}</td>
                    <td className="px-5 py-5 text-right">
                      <span className="inline-flex items-center gap-0.5">
                        {Array.from({ length: 5 }).map((_, k) => <IconStar key={k} filled={k < r[4]} />)}
                      </span>
                    </td>
                  </tr>
                ))}
              </tbody>
            </table>
          </div>
          <div className="px-5 py-4 border-t border-rule text-sm text-muted flex items-center justify-between">
            <span>{t('kam_foot_a')}</span>
            <span className="text-[12px]">{t('kam_foot_b')}</span>
          </div>
        </div>
      </Reveal>
      <div className="mt-10 grid grid-cols-1 md:grid-cols-3 gap-5">
        {entranceCards.map((c, i) => (
          <Reveal key={i} delay={80 + i * 70}>
            <div className="h-full bg-white border border-rule rounded-card p-6 shadow-soft hover-lift">
              <div className="text-ink"><c.icon size={22}/></div>
              <div className="mt-5 font-semibold text-[16px]">{c.t}</div>
              <p className="mt-2 text-[14px] text-muted leading-relaxed">{c.d}</p>
            </div>
          </Reveal>
        ))}
      </div>
    </Section>
  );
};

/* ------------------------------- LICZBY ------------------------------- */
const Liczby = () => {
  const { t } = useT();
  const stats = [['95%+', t('lic_1')], ['<1s', t('lic_2')], ['0', t('lic_3')], ['24/7', t('lic_4')]];
  return (
    <Section dark>
      <Reveal><Eyebrow dark>{t('lic_eyebrow')}</Eyebrow></Reveal>
      <Reveal delay={80}>
        <h2 className="mt-4 font-semibold tracking-[-0.015em]" style={{ fontSize: 'clamp(32px, 4vw, 48px)', lineHeight: 1.08 }}>{t('lic_title')}</h2>
      </Reveal>
      <div className="mt-14 grid grid-cols-2 md:grid-cols-4 gap-8">
        {stats.map(([big, small], i) => (
          <Reveal key={i} delay={80 + i * 80}>
            <div>
              <div className="num text-brass" style={{ fontSize: 'clamp(40px, 5vw, 64px)', fontWeight: 600, letterSpacing: '-0.02em', lineHeight: 1 }}>{big}</div>
              <div className="mt-3 text-white/65 text-sm leading-snug">{small}</div>
            </div>
          </Reveal>
        ))}
      </div>
    </Section>
  );
};

/* ------------------------------- PRZEWAGI ------------------------------- */
const Przewagi = () => {
  const { t } = useT();
  const advantages = [
    { icon: IconDb,      t: t('adv_1_t'), d: t('adv_1_d') },
    { icon: IconSend,    t: t('adv_2_t'), d: t('adv_2_d') },
    { icon: IconShield,  t: t('adv_3_t'), d: t('adv_3_d') },
    { icon: IconUsers,   t: t('adv_4_t'), d: t('adv_4_d') },
    { icon: IconWifiOff, t: t('adv_5_t'), d: t('adv_5_d') },
  ];
  return (
    <Section className="border-t border-rule">
      <Reveal><Eyebrow>{t('adv_eyebrow')}</Eyebrow></Reveal>
      <Reveal delay={80}>
        <h2 className="mt-4 font-semibold tracking-[-0.015em]" style={{ fontSize: 'clamp(32px, 4vw, 48px)', lineHeight: 1.08 }}>{t('adv_title')}</h2>
      </Reveal>
      <div className="mt-14 grid grid-cols-1 md:grid-cols-2 gap-x-10 gap-y-2">
        {advantages.map((a, i) => (
          <Reveal key={i} delay={60 + i * 60}>
            <div className="border-t border-rule py-7 flex gap-6">
              <span className="num text-muted text-xs w-6 shrink-0 mt-1">0{i+1}</span>
              <div className="flex-1">
                <div className="flex items-start gap-4">
                  <span className="text-ink mt-0.5"><a.icon size={22}/></span>
                  <div>
                    <div className="font-semibold text-[17px] leading-snug">{a.t}</div>
                    <p className="mt-2 text-[14.5px] text-muted leading-relaxed max-w-[58ch]">{a.d}</p>
                  </div>
                </div>
              </div>
            </div>
          </Reveal>
        ))}
      </div>
    </Section>
  );
};

/* ------------------------------- ROI ------------------------------- */
const tierLookup = { starter: 99, standard: 199, pro: 299 };
const tierName = { starter: 'Starter', standard: 'Standard', pro: 'Professional' };

const BarRow = ({ label, color, value, display, max, note, dark }) => {
  const pct = Math.max(2, Math.min(100, (value / max) * 100));
  return (
    <div>
      <div className="flex items-baseline justify-between">
        <div className={`text-[13px] ${dark ? 'text-white/75' : 'text-ink/75'}`}>{label}</div>
        <div className={`num text-sm font-medium ${dark ? 'text-white' : 'text-ink'}`}>{display}</div>
      </div>
      <div className={`mt-2 h-2.5 rounded-[3px] ${dark ? 'bg-white/10' : 'bg-[#F3F4F6]'} overflow-hidden`}>
        <div style={{ width: pct + '%', background: color, height: '100%', transition: 'width 600ms cubic-bezier(.2,.8,.2,1)' }}/>
      </div>
      <div className={`mt-1.5 text-[11px] num ${dark ? 'text-white/45' : 'text-muted'}`}>{note}</div>
    </div>
  );
};

const ROICalc = () => {
  const { t } = useT();
  const [stores, setStores] = useState(3);
  const [tier, setTier] = useState('standard');
  const monthly = stores * tierLookup[tier];
  const lossLow = stores * 600;
  const lossHigh = stores * 2000;
  const roiLow = (lossLow / monthly).toFixed(1);
  const roiHigh = (lossHigh / monthly).toFixed(1);
  const paybackHigh = (monthly / lossLow).toFixed(1);
  const paybackLow = (monthly / lossHigh).toFixed(1);
  const maxVal = lossHigh * 1.05;

  return (
    <Section id="roi" dark>
      <div className="grid grid-cols-12 gap-10 items-start">
        <div className="col-span-12 lg:col-span-5">
          <Reveal><Eyebrow dark>{t('roi_eyebrow')}</Eyebrow></Reveal>
          <Reveal delay={80}>
            <h2 className="mt-4 font-semibold tracking-[-0.015em]" style={{ fontSize: 'clamp(32px, 4vw, 48px)', lineHeight: 1.08 }}>
              {t('roi_title_a')}<br/>{t('roi_title_b')}
            </h2>
          </Reveal>
          <Reveal delay={140}><p className="mt-6 text-white/65 max-w-[44ch]">{t('roi_lead')}</p></Reveal>
        </div>

        <div className="col-span-12 lg:col-span-7">
          <Reveal delay={160} from="right">
            <div className="rounded-card border border-white/15 bg-white/[0.03] p-7">
              <div className="flex items-end justify-between">
                <div>
                  <div className="text-[12px] tracking-[0.14em] uppercase text-white/60">{t('roi_stores')}</div>
                  <div className="num mt-1" style={{ fontSize: 42, fontWeight: 600, letterSpacing: '-0.02em' }}>{stores}</div>
                </div>
                <div className="text-right">
                  <div className="text-[12px] tracking-[0.14em] uppercase text-white/60">{t('roi_avg_plan')}</div>
                  <div className="mt-1 text-white text-lg font-semibold">{tierName[tier]}</div>
                </div>
              </div>
              <input type="range" min="1" max="30" step="1" value={stores}
                onChange={e => setStores(+e.target.value)}
                className="w-full mt-5"
                style={{ WebkitAppearance: 'none', appearance: 'none', height: 4, background: 'linear-gradient(90deg, #B7892B 0%, #B7892B ' + ((stores-1)/29*100) + '%, rgba(255,255,255,0.15) ' + ((stores-1)/29*100) + '%, rgba(255,255,255,0.15) 100%)', borderRadius: 2, outline: 'none' }}
              />
              <div className="flex justify-between text-[11px] text-white/45 mt-2 num">
                <span>1</span><span>10</span><span>20</span><span>30</span>
              </div>
              <div className="mt-6 grid grid-cols-3 gap-2">
                {Object.entries(tierName).map(([k, l]) => (
                  <button key={k} onClick={() => setTier(k)}
                    className={`h-10 rounded-btn text-sm border btn ${tier===k ? 'bg-white text-ink border-white' : 'bg-transparent text-white/80 border-white/20 hover:border-white/50'}`}>
                    {l} <span className="num text-[11px] opacity-70 ml-1">£{tierLookup[k]}</span>
                  </button>
                ))}
              </div>
              <div className="mt-8 space-y-4">
                <BarRow label={t('roi_cost')} color="#E5484D" value={monthly} display={'£' + monthly.toLocaleString('en-GB')} max={maxVal} note={`${stores} × £${tierLookup[tier]}`} dark/>
                <BarRow label={t('roi_loss')} color="#2F8F5A" value={(lossLow + lossHigh)/2} display={`£${lossLow.toLocaleString('en-GB')}–£${lossHigh.toLocaleString('en-GB')}`} max={maxVal} note={t('roi_loss_note')} dark/>
              </div>
              <div className="mt-8 pt-6 border-t border-white/10 flex items-end justify-between gap-6 flex-wrap">
                <div>
                  <div className="text-[12px] tracking-[0.14em] uppercase text-white/60">{t('roi_multiplier')}</div>
                  <div className="mt-1 num text-brass" style={{ fontSize: 64, fontWeight: 600, letterSpacing: '-0.03em', lineHeight: 1 }}>{roiLow}–{roiHigh}×</div>
                </div>
                <div className="flex-1 min-w-[220px] max-w-[360px]">
                  <div className="text-sm text-white/70">{t('roi_payback')} <span className="text-white font-medium num">{paybackLow}–{paybackHigh} {t('roi_payback_unit')}</span></div>
                  <a href="mailto:biuro@seleco.pl" className="btn btn-primary mt-4 inline-flex items-center gap-2 h-11 px-5 bg-white text-ink rounded-btn text-sm font-medium">{t('roi_cta')} <IconArrow size={16}/></a>
                </div>
              </div>
              <div className="mt-6 text-[11px] text-white/45">{t('roi_footnote')}</div>
            </div>
          </Reveal>
        </div>
      </div>
    </Section>
  );
};

/* ------------------------------- GWARANCJA ------------------------------- */
const Guarantee = () => {
  const { t } = useT();
  return (
    <Section>
      <Reveal>
        <div className="rounded-card bg-sand ring-brass p-10 md:p-14 grid grid-cols-12 gap-10 items-center">
          <div className="col-span-12 md:col-span-2 flex md:justify-center">
            <div className="w-16 h-16 rounded-full bg-brass/10 ring-brass flex items-center justify-center text-brass">
              <IconShield size={30}/>
            </div>
          </div>
          <div className="col-span-12 md:col-span-10">
            <div className="text-[12px] font-medium tracking-[0.16em] uppercase text-brass">{t('gua_eyebrow')}</div>
            <h3 className="mt-3 font-semibold tracking-[-0.015em]" style={{ fontSize: 'clamp(26px, 3.2vw, 38px)', lineHeight: 1.1 }}>{t('gua_title')}</h3>
            <p className="mt-5 text-ink/80 text-[16.5px] leading-relaxed max-w-[72ch]">{t('gua_lead')}</p>
          </div>
        </div>
      </Reveal>
    </Section>
  );
};

/* ------------------------------- FAQ ------------------------------- */
const FAQ = () => {
  const { t } = useT();
  const faqs = t('faq_qs');
  return (
    <Section id="faq" className="border-t border-rule">
      <div className="grid grid-cols-12 gap-10">
        <div className="col-span-12 lg:col-span-4">
          <Reveal><Eyebrow>{t('faq_eyebrow')}</Eyebrow></Reveal>
          <Reveal delay={80}>
            <h2 className="mt-4 font-semibold tracking-[-0.015em]" style={{ fontSize: 'clamp(30px, 3.6vw, 44px)', lineHeight: 1.08 }}>{t('faq_title')}</h2>
          </Reveal>
          <Reveal delay={140}>
            <p className="mt-5 text-muted max-w-[38ch]">{t('faq_lead_a')}<a className="text-ink linkline" href="mailto:biuro@seleco.pl">{t('faq_lead_b')}</a>.</p>
          </Reveal>
        </div>
        <div className="col-span-12 lg:col-span-8">
          <div className="border-t border-rule">
            {faqs.map(([q, a], i) => (
              <Reveal key={i} delay={40 + i * 40}>
                <details className="border-b border-rule">
                  <summary className="flex items-start gap-6 py-6">
                    <span className="num text-muted text-xs mt-1 w-6 shrink-0">0{i+1}</span>
                    <span className="flex-1 text-[17px] font-medium">{q}</span>
                    <span className="chev text-ink mt-1"><IconPlus size={18}/></span>
                  </summary>
                  <div className="pl-12 pr-2 pb-6 -mt-2 text-muted leading-relaxed text-[15px] max-w-[66ch]">{a}</div>
                </details>
              </Reveal>
            ))}
          </div>
        </div>
      </div>
    </Section>
  );
};

/* ------------------------------- CTA / KONTAKT ------------------------------- */
const CTA = () => {
  const { t } = useT();
  return (
    <section id="kontakt" className="bg-night text-white">
      <div className="mx-auto max-w-page px-6" style={{ paddingTop: 120, paddingBottom: 120 }}>
        <Reveal><Eyebrow dark>{t('cta_eyebrow')}</Eyebrow></Reveal>
        <div className="grid grid-cols-12 gap-10 mt-6 items-end">
          <div className="col-span-12 lg:col-span-8">
            <Reveal delay={80}>
              <h2 className="font-semibold tracking-[-0.02em]" style={{ fontSize: 'clamp(40px, 5.6vw, 76px)', lineHeight: 1.02 }}>
                {t('cta_title_a')}<br/>{t('cta_title_b')}
              </h2>
            </Reveal>
            <Reveal delay={140}>
              <p className="mt-6 text-white/70 text-lg max-w-[56ch]">{t('cta_lead')}</p>
            </Reveal>
            <Reveal delay={180}>
              <div className="mt-8 flex flex-wrap items-center gap-x-8 gap-y-3 text-[15px]">
                <a href="mailto:biuro@seleco.pl" className="inline-flex items-center gap-2 text-white linkline"><span className="text-brass">@</span> biuro@seleco.pl</a>
                <a href="tel:+48693628765" className="inline-flex items-center gap-2 text-white linkline"><span className="text-brass"><IconPhone size={16}/></span><span className="num">PL +48 693 62 87 65</span></a>
                <a href="tel:+447712147277" className="inline-flex items-center gap-2 text-white linkline"><span className="text-brass"><IconPhone size={16}/></span><span className="num">UK +44 7712 147 277</span></a>
              </div>
            </Reveal>
          </div>
          <div className="col-span-12 lg:col-span-4 flex lg:justify-end">
            <Reveal delay={220}>
              <PrimaryBtn invert href="mailto:biuro@seleco.pl?subject=Demo%20Face%20Security">{t('cta_btn')} <IconArrow size={16}/></PrimaryBtn>
            </Reveal>
          </div>
        </div>
      </div>
    </section>
  );
};

/* ------------------------------- FOOTER ------------------------------- */
const FooterCol = ({ title, items }) => (
  <div className="col-span-6 md:col-span-4 lg:col-span-2">
    <div className="text-[12px] font-medium tracking-[0.14em] uppercase text-muted">{title}</div>
    <ul className="mt-5 space-y-3 text-sm">
      {items.map(([l, h], i) => <li key={i}><a href={h} onClick={(e) => h && h.startsWith('#') && smoothScroll(e, h)} className="linkline text-ink">{l}</a></li>)}
    </ul>
  </div>
);
const Footer = () => {
  const { t } = useT();
  return (
    <footer className="bg-paper border-t border-rule">
      <div className="mx-auto max-w-page px-6 py-20">
        <div className="grid grid-cols-12 gap-10">
          <div className="col-span-12 lg:col-span-6">
            <a href="#" className="flex items-center gap-3">
              <span className="inline-flex items-center justify-center w-7 h-7 rounded-[4px] bg-ink text-white text-[11px] font-bold tracking-wider">SE</span>
              <span className="text-[15px] font-semibold">SELECO</span>
              <span className="text-rule">/</span>
              <span className="text-[15px] text-muted">Face Security</span>
            </a>
            <p className="mt-6 text-muted max-w-[48ch] text-[14.5px] leading-relaxed">{t('foot_about')}</p>
            <div className="mt-6 space-y-2 text-[14px]">
              <div><a href="mailto:biuro@seleco.pl" className="linkline text-ink">biuro@seleco.pl</a></div>
              <div className="flex flex-wrap gap-x-6 gap-y-2">
                <a href="tel:+48693628765" className="inline-flex items-center gap-2 text-ink linkline">
                  <span className="text-[10.5px] tracking-[0.14em] font-semibold text-brass">{t('foot_phone_pl')}</span>
                  <span className="num">+48 693 62 87 65</span>
                </a>
                <a href="tel:+447712147277" className="inline-flex items-center gap-2 text-ink linkline">
                  <span className="text-[10.5px] tracking-[0.14em] font-semibold text-brass">{t('foot_phone_uk')}</span>
                  <span className="num">+44 7712 147 277</span>
                </a>
              </div>
            </div>
            <div className="mt-6 flex items-center gap-3">
              <span className="text-[11px] tracking-[0.14em] uppercase text-muted">{t('foot_lang_label')}</span>
              <LangSwitch/>
            </div>
          </div>
          <FooterCol title={t('foot_col_product')} items={[[t('nav_dla_kogo'),'#dla-kogo'],[t('nav_jak'),'#jak'],[t('nav_pakiety'),'#pakiety'],[t('nav_kamery'),'#kamery'],[t('nav_roi'),'#roi']]}/>
          <FooterCol title={t('foot_col_company')} items={[[t('foot_about_seleco'),'#'],[t('foot_porown'),'https://porownywarka.seleco.pro/'],[t('nav_kontakt'),'#kontakt']]}/>
          <FooterCol title={t('foot_col_docs')} items={[[t('foot_terms'),'#'],[t('foot_privacy'),'#'],[t('foot_rodo'),'#']]}/>
        </div>
        <div className="mt-16 pt-8 border-t border-rule flex flex-col md:flex-row md:items-center justify-between gap-4 text-xs text-muted">
          <div>© {new Date().getFullYear()} SELECO Sp. z o.o. · {t('foot_rights')}</div>
          <div className="flex items-center gap-5">
            <a href="#" className="linkline">{t('foot_rodo')}</a>
            <a href="#" className="linkline">{t('foot_terms')}</a>
            <span className="inline-flex items-center gap-1.5"><IconLock size={14}/> {t('foot_encrypted')}</span>
          </div>
        </div>
      </div>
    </footer>
  );
};

/* ------------------------------- APP ------------------------------- */
const App = () => (
  <LangProvider>
    <div className="bg-paper text-ink">
      <Nav/>
      <Hero/>
      <DlaKogo/>
      <Jak/>
      <SystemFlow/>
      <Pakiety/>
      <CoZawiera/>
      <Kamery/>
      <Liczby/>
      <Przewagi/>
      <ROICalc/>
      <Guarantee/>
      <FAQ/>
      <CTA/>
      <Footer/>
    </div>
  </LangProvider>
);
ReactDOM.createRoot(document.getElementById('root')).render(<App/>);