const { useState, useEffect, useRef } = React;

const HARMFUL_TEXT = "A napi kapszulahegyet és az utánajárásra szánt értékes idődet — hogy kutató biológussá kelljen képezned magad, ha törődni akarsz magaddal. Kihagytunk mindent, ami nem Téged szolgál.";
const CONCEPT_WORDS = ["Nyomulás","Piramisjáték","Toborzás","Győzködés","Csodaszer-ígéret","Gyors meggazdagodás","Kötelező rendezvény","Jutalékhajsza","Behálózás","Szkriptelt beszéd","Végtelen lánc","Csillogás-hajhászás"];

function CloudRow({ words, show }) {
  return (
    <div aria-hidden="true" style={{
      display: 'flex', flexWrap: 'wrap', gap: '6px 14px', justifyContent: 'flex-start',
      maxWidth: 400, overflow: 'hidden', pointerEvents: 'none',
      opacity: show ? 1 : 0, maxHeight: show ? 160 : 0, marginTop: show ? 16 : 0,
      transition: 'opacity 500ms ease, max-height 500ms ease, margin-top 500ms ease',
    }}>
      {words.map((w) => <span key={w} className="ps-cloud-word">{w}</span>)}
    </div>
  );
}

function CloudText({ text, show, progress, reserve = false }) {
  const words = String(text).split(' ');
  const shown = progress == null ? (show ? words.length : 0) : Math.round(progress * words.length);
  const open = progress == null ? show : progress > 0.02;
  return (
    <div aria-hidden="true" className="ps-cloud-text" style={{
      overflow: 'hidden', pointerEvents: 'none',
      opacity: open ? 1 : 0, maxHeight: reserve || open ? 320 : 0, marginTop: reserve || open ? 18 : 0,
      transition: reserve ? 'opacity 700ms ease' : 'opacity 500ms ease, max-height 500ms ease, margin-top 500ms ease',
    }}>
      <p style={{ margin: 0, maxWidth: '34ch', fontFamily: 'var(--font-sans)', fontSize: 'clamp(1rem,1.7vw,1.15rem)', lineHeight: 1.55, letterSpacing: '0.005em', color: '#F0E7D2', textWrap: 'pretty' }}>
        {words.map((w, i) => (
          <span key={i} style={{ opacity: i < shown ? 1 : 0.08, transition: 'opacity 420ms var(--ease-out)' }}>{w}{' '}</span>
        ))}
      </p>
    </div>
  );
}


function ParticleWord({ text, startDelay = 0, cloudWords = [], cloudText, onCloudChange, active = true, persistOnHover = false }) {
  const canvasRef = useRef(); const measureRef = useRef();
  const particlesRef = useRef([]);
  const [phase, setPhase] = useState('waiting');
  const [box, setBox] = useState({ w: 0, h: 0, fs: 0 });
  const [revealed, setRevealed] = useState(false);

  useEffect(() => {
    const el = measureRef.current; if (!el) return;
    const r = el.getBoundingClientRect();
    const fs = parseFloat(getComputedStyle(el).fontSize) || 40;
    setBox({ w: Math.ceil(r.width) + 8, h: Math.ceil(r.height) + 8, fs });
  }, [text]);

  useEffect(() => {
    if (!box.w || !active) return;
    const reduce = true;
    if (reduce) { setPhase('done'); return; }
    let cancelled = false;
    const t = setTimeout(() => { if (!cancelled) { setPhase('building'); onCloudChange && onCloudChange(true); } }, startDelay);
    return () => { cancelled = true; clearTimeout(t); };
  }, [box.w, startDelay, active]);

  useEffect(() => {
    if (phase !== 'building' || !box.w) return;
    let cancelled = false;
    const canvas = canvasRef.current;
    const W = box.w, H = box.h, fs = box.fs;
    const dpr = Math.min(window.devicePixelRatio || 1, 2);
    canvas.width = W * dpr; canvas.height = H * dpr; canvas.style.width = W + 'px'; canvas.style.height = H + 'px';
    const ctx = canvas.getContext('2d'); ctx.scale(dpr, dpr);
    const off = document.createElement('canvas'); off.width = W; off.height = H;
    const octx = off.getContext('2d');
    octx.fillStyle = '#fff'; octx.textAlign = 'center'; octx.textBaseline = 'middle';
    octx.font = `300 ${fs}px Cormorant, Georgia, serif`;
    octx.fillText(text, W / 2, H / 2);
    const data = octx.getImageData(0, 0, W, H).data;
    const pts = []; const step = 3;
    for (let y = 0; y < H; y += step) for (let x = 0; x < W; x += step) { if (data[(y * W + x) * 4 + 3] > 120) pts.push({ x, y }); }
    for (let i = pts.length - 1; i > 0; i--) { const j = (Math.random() * (i + 1)) | 0; const t = pts[i]; pts[i] = pts[j]; pts[j] = t; }
    const N = Math.min(pts.length, 420);
    const particles = pts.slice(0, N).map((p) => ({
      tx: p.x, ty: p.y,
      x: p.x + (Math.random() - 0.5) * W * 1.6, y: p.y + (Math.random() - 0.5) * H * 1.6,
      delay: Math.random() * 380,
    }));
    particlesRef.current = particles;
    let start = null; const dur = 1700;
    function frame(t) {
      if (cancelled) return;
      if (!start) start = t;
      const el = t - start;
      ctx.clearRect(0, 0, W, H);
      ctx.fillStyle = '#D9B96A';
      let allDone = true;
      particles.forEach((p) => {
        const pe = Math.max(0, Math.min(1, (el - p.delay) / dur));
        if (pe < 1) allDone = false;
        const ease = 1 - Math.pow(1 - pe, 3);
        const x = p.x + (p.tx - p.x) * ease, y = p.y + (p.ty - p.y) * ease;
        ctx.globalAlpha = 0.3 + 0.7 * ease;
        ctx.beginPath(); ctx.arc(x, y, 1.4, 0, Math.PI * 2); ctx.fill();
      });
      ctx.globalAlpha = 1;
      if (!allDone) requestAnimationFrame(frame);
      else { onCloudChange && onCloudChange(false); setTimeout(() => { if (!cancelled) setPhase('settled'); }, 650); }
    }
    requestAnimationFrame(frame);
    return () => { cancelled = true; };
  }, [phase, box, text]);

  useEffect(() => {
    if (phase !== 'settled') return;
    const t = setTimeout(() => setPhase('dispersing'), 750);
    return () => clearTimeout(t);
  }, [phase]);

  useEffect(() => {
    if (phase !== 'dispersing') return;
    let cancelled = false;
    const canvas = canvasRef.current;
    const W = box.w, H = box.h;
    const ctx = canvas.getContext('2d');
    const particles = particlesRef.current.map((p) => {
      const angle = Math.random() * Math.PI * 2;
      const dist = 40 + Math.random() * 70;
      return { ...p, ex: Math.cos(angle) * dist, ey: Math.sin(angle) * dist };
    });
    let start = null; const dur = 750;
    function frame(t) {
      if (cancelled) return;
      if (!start) start = t;
      const el = t - start;
      const pe = Math.max(0, Math.min(1, el / dur));
      const ease = pe * pe;
      ctx.clearRect(0, 0, W, H);
      ctx.fillStyle = '#D9B96A';
      particles.forEach((p) => {
        const x = p.tx + p.ex * ease, y = p.ty + p.ey * ease;
        ctx.globalAlpha = 1 - ease;
        ctx.beginPath(); ctx.arc(x, y, 1.4, 0, Math.PI * 2); ctx.fill();
      });
      ctx.globalAlpha = 1;
      if (pe < 1) requestAnimationFrame(frame);
      else setPhase('done');
    }
    requestAnimationFrame(frame);
    return () => { cancelled = true; };
  }, [phase, box]);

  useEffect(() => {
    if (!revealed || persistOnHover) return;
    const t = setTimeout(() => { setRevealed(false); onCloudChange && onCloudChange(false); }, 2400);
    return () => clearTimeout(t);
  }, [revealed, persistOnHover]);

  const textVisible = phase === 'dispersing' || phase === 'done';
  const canvasVisible = false;
  const interactive = phase === 'done';

  return (
    <span
      style={{ position: 'relative', display: 'inline-block', verticalAlign: 'bottom', cursor: interactive ? 'pointer' : 'default' }}
      onMouseEnter={() => { if (interactive) { setRevealed(true); onCloudChange && onCloudChange(true); } }}
      onMouseLeave={() => { if (interactive) { setRevealed(false); onCloudChange && onCloudChange(false); } }}
      onClick={() => { if (interactive) { setRevealed((r) => { const nr = !r; onCloudChange && onCloudChange(nr); return nr; }); } }}
    >
      <span ref={measureRef} className="ps-display" style={{ visibility: 'hidden', whiteSpace: 'nowrap', fontStyle: 'italic' }}>{text}</span>
      <span className="ps-display" style={{
        position: 'absolute', left: 0, top: 0, whiteSpace: 'nowrap', color: '#D9B96A', fontStyle: 'italic',
        opacity: textVisible ? 1 : 0, transition: 'opacity 700ms ease',
        borderBottom: interactive ? '1px dashed rgba(217,185,106,0.55)' : 'none', paddingBottom: 2,
      }}>{text}</span>
      {box.w > 0 && <canvas ref={canvasRef} style={{ position: 'absolute', left: -4, top: -4, opacity: canvasVisible ? 1 : 0, transition: 'opacity 200ms ease', pointerEvents: 'none' }} aria-hidden="true" />}
    </span>
  );
}

function HeroStatement({ preText, emphasisText, cloudWords, cloudText, secondary, baseDelay = 300, persistOnHover = false, scrollProgress = null, holdCloud = false }) {
  const wrapRef = useRef();
  const [visible, setVisible] = useState(false);
  const [cloud, setCloud] = useState(false);
  const [showSecondary, setShowSecondary] = useState(false);
  useEffect(() => {
    const el = wrapRef.current; if (!el) return;
    const io = new IntersectionObserver((entries) => {
      entries.forEach((e) => { if (e.isIntersecting) { setVisible(true); io.disconnect(); } });
    }, { threshold: 0.35 });
    io.observe(el);
    return () => io.disconnect();
  }, []);
  useEffect(() => {
    if (!visible) return;
    const reduce = window.matchMedia && window.matchMedia('(prefers-reduced-motion: reduce)').matches;
    const t = setTimeout(() => setShowSecondary(true), reduce ? 300 : 500);
    return () => clearTimeout(t);
  }, [visible, baseDelay]);
  useEffect(() => {
    if (!visible || !cloudText || scrollProgress != null) return;
    const reduce = window.matchMedia && window.matchMedia('(prefers-reduced-motion: reduce)').matches;
    if (reduce) return;
    const open = setTimeout(() => setCloud(true), 1200);
    if (holdCloud) return () => clearTimeout(open);
    const close = setTimeout(() => setCloud(false), 9000);
    return () => { clearTimeout(open); clearTimeout(close); };
  }, [visible, cloudText, scrollProgress, holdCloud]);
  return (
    <div ref={wrapRef} style={{ position: 'relative', zIndex: 1, width: '100%', textAlign: 'left' }}>
      <h2 className="ps-display ps-hero-h" style={{ margin: 0, color: '#F3ECDA', lineHeight: 1.22 }}>
        {preText || 'A Te luxusod az, amit kihagytunk'} <span style={{ whiteSpace: 'nowrap' }}><ParticleWord text={emphasisText} startDelay={baseDelay} cloudWords={cloudWords} cloudText={cloudText} onCloudChange={(v) => setCloud((c) => (holdCloud ? c || v : v))} active={visible} persistOnHover={persistOnHover} />.</span>
      </h2>
      {cloudText ? <CloudText text={cloudText} show={cloud} progress={scrollProgress} reserve={holdCloud} /> : <CloudRow words={cloudWords} show={cloud} />}
      {cloudText && !cloud && (scrollProgress == null || scrollProgress < 0.02) && !holdCloud && (
        <span className="ps-tick" style={{ display: 'inline-block', marginTop: 12, color: 'var(--accent)', opacity: 0.85, letterSpacing: '0.16em' }}>＋ MIT HAGYTUNK KI?</span>
      )}
      {secondary && (
        <div className="ps-hero-sub" style={{ marginTop: 14, opacity: showSecondary ? 1 : 0, transform: showSecondary ? 'none' : 'translateY(10px)', transition: 'opacity 900ms var(--ease-out), transform 900ms var(--ease-out)' }}>
          {(Array.isArray(secondary) ? secondary : [secondary]).map((line, i) => {
            const accentLine = line === 'Elég jó vagy úgy, ahogy vagy.' || line === 'Akár 3 perc, kész is vagy.' || line === 'Megosztod a tapasztalatod. Ennyi.';
            const emphasized = /^Fedezd fel/.test(line);
            const parts = line.split(/(folyékony|charity marketinget|charity marketing|egyszerűen és gyorsan törődhess a testeddel\?)/i);
            return (
              <p key={i} style={{
                margin: i === 0 ? 0 : '6px 0 0', fontFamily: 'var(--font-sans)',
                fontWeight: emphasized ? 700 : (i < 2 ? 600 : 500),
                fontSize: emphasized ? 'clamp(1.3rem,2.4vw,1.7rem)' : (i < 2 ? 'clamp(1.05rem,1.9vw,1.3rem)' : 'clamp(0.85rem,1.4vw,0.98rem)'),
                color: accentLine ? 'var(--accent)' : '#F3ECDA',
              }}>
                {parts.map((part, j) => /^(folyékony|charity marketinget|charity marketing|egyszerűen és gyorsan törődhess a testeddel\?)$/i.test(part) ? <span key={j} style={{ color: 'var(--accent)' }}>{part}</span> : part)}
              </p>
            );
          })}
        </div>
      )}
    </div>
  );
}

function PhotoHeroPanel({ children, imgAlt, img = 'assets/hero-products.jpg', aspect = '1672 / 941', scrim = false }) {
  const [isMobile, setIsMobile] = useState(false);
  useEffect(() => {
    const mq = window.matchMedia('(max-width: 820px)');
    const on = () => setIsMobile(mq.matches);
    on(); mq.addEventListener('change', on);
    return () => mq.removeEventListener('change', on);
  }, []);
  if (isMobile) {
    return (
      <div style={{ position: 'relative', width: '100%', background: 'var(--ink-900)', border: '1px solid rgba(201,168,106,0.45)', padding: 10 }}>
        <CornerMarks inset={4} color="var(--accent)" />
        <div aria-hidden="true" className="ps-hero-blueprint" />
        <div style={{ position: 'relative', width: '100%', aspectRatio: '4 / 3', overflow: 'hidden' }}>
          <img src={img} alt={imgAlt || ''} style={{ position: 'absolute', inset: 0, width: '100%', height: '100%', objectFit: 'cover' }} />
        </div>
        <div style={{ position: 'relative', padding: 'var(--sp-6) var(--sp-5)' }}>{children}</div>
      </div>
    );
  }
  return (
    <div style={{ position: 'relative', width: '100%', maxWidth: 'var(--container)', margin: '0 auto', background: 'var(--ink-900)', border: '1px solid rgba(201,168,106,0.45)', padding: 14 }}>
      <CornerMarks inset={5} color="var(--accent)" />
      <div aria-hidden="true" className="ps-hero-blueprint" />
      <div style={{ position: 'relative', width: '100%', aspectRatio: aspect, maxHeight: '82vh', overflow: 'hidden' }}>
        <img src={img} alt={imgAlt || ''} style={{ position: 'absolute', inset: 0, width: '100%', height: '100%', objectFit: 'cover' }} />
        <div aria-hidden="true" className="ps-hero-blueprint-in" />
        {scrim ? <div aria-hidden="true" style={{ position: 'absolute', inset: 0, background: 'linear-gradient(90deg, rgba(11,12,14,0.92) 0%, rgba(11,12,14,0.78) 34%, rgba(11,12,14,0.28) 58%, transparent 76%)', zIndex: 1 }} /> : null}
        <div style={{ position: 'absolute', top: '50%', left: '5%', transform: 'translateY(-50%)', width: '44%', minWidth: 240, zIndex: 2 }}>
          {children}
        </div>
      </div>
    </div>
  );
}

function PinnedHero({ children, extra = 420 }) {
  const outerRef = useRef();
  const [progress, setProgress] = useState(0);
  const [isMobile, setIsMobile] = useState(false);
  useEffect(() => {
    const mq = window.matchMedia('(max-width: 820px)');
    const on = () => setIsMobile(mq.matches);
    on(); mq.addEventListener('change', on);
    return () => mq.removeEventListener('change', on);
  }, []);
  useEffect(() => {
    if (isMobile) return;
    const el = outerRef.current; if (!el) return;
    let raf = null;
    const compute = () => {
      const r = el.getBoundingClientRect();
      setProgress(Math.max(0, Math.min(1, -r.top / extra)));
    };
    const onScroll = () => { if (raf) return; raf = requestAnimationFrame(() => { compute(); raf = null; }); };
    window.addEventListener('scroll', onScroll, { passive: true });
    window.addEventListener('resize', onScroll);
    compute();
    return () => { window.removeEventListener('scroll', onScroll); window.removeEventListener('resize', onScroll); if (raf) cancelAnimationFrame(raf); };
  }, [extra, isMobile]);
  return (
    <div ref={outerRef} style={{ position: 'relative', height: isMobile ? 'auto' : `calc(100vh + ${extra}px)` }}>
      <div style={{ position: isMobile ? 'static' : 'sticky', top: 0, minHeight: isMobile ? 0 : '100vh', display: 'flex', alignItems: 'center' }}>
        <div style={{ width: '100%' }}>{children(isMobile ? null : progress)}</div>
      </div>
    </div>
  );
}

function FoundationDiagram({ show }) {
  const t = (d) => `opacity 900ms var(--ease-out) ${d}ms, transform 900ms var(--ease-out) ${d}ms`;
  const tick = { position: 'absolute', bottom: 0, width: 1, height: 9, background: 'currentColor' };
  const [now, setNow] = useState(() => new Date());
  useEffect(() => {
    const id = setInterval(() => setNow(new Date()), 30000);
    return () => clearInterval(id);
  }, []);
  const pct = ((now.getHours() * 60 + now.getMinutes()) / 1440) * 100;
  const clock = `${String(now.getHours()).padStart(2, '0')}:${String(now.getMinutes()).padStart(2, '0')}`;
  const anchor = pct < 16 ? { transform: 'translateX(0)', pad: 8 } : pct > 84 ? { transform: 'translateX(-100%)', pad: -8 } : { transform: 'translateX(-50%)', pad: 0 };
  return (
    <div aria-hidden="true" style={{ marginTop: 30, position: 'relative' }}>
      <div style={{ position: 'relative', height: 96, width: '100%' }}>
        <div style={{ position: 'absolute', left: 0, bottom: 0, width: '2.4%', height: 9, color: '#D9B96A', opacity: show ? 1 : 0, transition: t(500) }}>
          <span style={{ ...tick, left: 0 }} /><span style={{ ...tick, right: 0 }} />
          <span style={{ position: 'absolute', bottom: 0, left: 0, right: 0, height: 1, background: 'currentColor' }} />
        </div>
        <div style={{ position: 'absolute', left: '2.4%', bottom: 9, width: 1, height: show ? 44 : 0, background: 'rgba(217,185,106,0.55)', transition: 'height 800ms var(--ease-out) 700ms' }} />
        <span className="ps-tick" style={{ position: 'absolute', left: 'calc(2.4% + 10px)', bottom: 47, color: '#D9B96A', letterSpacing: '0.2em', whiteSpace: 'nowrap', opacity: show ? 1 : 0, transform: show ? 'none' : 'translateY(6px)', transition: t(900) }}>NAPI 3 PERC</span>
        <div style={{ position: 'absolute', left: '2.4%', right: 0, bottom: 0, height: 9, color: 'rgba(233,227,214,0.32)', opacity: show ? 1 : 0, transition: t(1100) }}>
          <span style={{ ...tick, left: 0 }} /><span style={{ ...tick, right: 0 }} />
          <span style={{ position: 'absolute', bottom: 0, left: 0, right: 0, height: 1, background: 'currentColor' }} />
        </div>
        <span className="ps-tick" style={{ position: 'absolute', right: 0, bottom: 13, textAlign: 'right', color: 'rgba(233,227,214,0.68)', letterSpacing: '0.2em', whiteSpace: 'nowrap', opacity: show ? 1 : 0, transition: t(1300) }}>ÉS A NAP MARADÉKA — A TIÉD</span>
      </div>
      <div style={{ position: 'absolute', left: `${pct}%`, top: 84, height: show ? 26 : 0, width: 1, background: 'rgba(217,185,106,0.75)', opacity: show ? 1 : 0, transition: 'height 700ms var(--ease-out) 1500ms, opacity 600ms ease 1500ms' }} />
      <span style={{ position: 'absolute', left: `calc(${pct}% - 5px)`, top: 96, width: 11, height: 1, background: '#D9B96A', opacity: show ? 1 : 0, transition: 'opacity 600ms ease 1800ms' }} />
      <span style={{ position: 'absolute', left: `${pct}%`, top: 20, height: show ? 8 : 0, width: 1, background: 'rgba(217,185,106,0.45)', transition: 'height 600ms var(--ease-out) 1700ms' }} />
      <span className="ps-tick" style={{ position: 'absolute', left: `calc(${pct}% + ${anchor.pad}px)`, top: 0, transform: show ? anchor.transform : `${anchor.transform} translateY(6px)`, color: '#D9B96A', letterSpacing: '0.2em', whiteSpace: 'nowrap', opacity: show ? 1 : 0, transition: t(1600) }}>MOST · {clock}</span>
      <div style={{ position: 'relative', height: 1, background: '#D9B96A', width: show ? '100%' : '0%', transition: 'width 1200ms var(--ease-out) 120ms' }} />
      <div style={{ marginTop: 0, height: 7, width: '100%', opacity: show ? 1 : 0, transition: 'opacity 900ms ease 500ms', backgroundImage: 'repeating-linear-gradient(90deg, rgba(217,185,106,0.55) 0 1px, transparent 1px 14px)' }} />
      <span className="ps-tick" style={{ display: 'inline-block', marginTop: 9, color: '#D9B96A', letterSpacing: '0.22em', opacity: show ? 1 : 0, transition: 'opacity 900ms ease 1000ms' }}>AZ ÉVEK · AMIT KITÖLTESZ</span>
    </div>
  );
}

const PS_START = new Date('2015-08-04T11:00:00+02:00').getTime();

function NoCompromiseCounter() {
  const [now, setNow] = useState(() => Date.now());
  useEffect(() => {
    const id = setInterval(() => setNow(Date.now()), 1000);
    return () => clearInterval(id);
  }, []);
  const s = Math.max(0, Math.floor((now - PS_START) / 1000));
  const d = Math.floor(s / 86400), h = Math.floor((s % 86400) / 3600), m = Math.floor((s % 3600) / 60), sec = s % 60;
  const num = { fontVariantNumeric: 'tabular-nums', color: '#D9B96A' };
  return (
    <span style={{ fontVariantNumeric: 'tabular-nums' }}>
      <span style={num}>{d.toLocaleString('hu-HU')}</span> NAPJA, <span style={num}>{h}</span> ÓRÁJA, <span style={num}>{m}</span> PERCE ÉS <span style={num}>{sec}</span> MÁSODPERCE AZON DOLGOZUNK, HOGY TÖBBÉ NE KELLJEN MEGALKUDNOD
    </span>
  );
}

function HeroFoundation() {
  const ref = useRef();
  const [show, setShow] = useState(false);
  useEffect(() => {
    const el = ref.current; if (!el) return;
    const t = setTimeout(() => setShow(true), 220);
    return () => clearTimeout(t);
  }, []);
  return (
    <div ref={ref} style={{ position: 'relative', zIndex: 1, width: '100%', textAlign: 'left' }}>
      <span className="ps-tick" style={{ display: 'block', marginBottom: 16, color: '#D9B96A', letterSpacing: '0.26em', opacity: show ? 1 : 0, transition: 'opacity 900ms ease' }}>POSITEAM · 2015 ÓTA</span>
      <h1 className="ps-display ps-hero-h" style={{ margin: 0, color: '#F3ECDA', lineHeight: 1.16, opacity: show ? 1 : 0, transform: show ? 'none' : 'translateY(16px)', transition: 'opacity 1100ms var(--ease-out), transform 1100ms var(--ease-out)' }}>
        <span style={{ color: '#F5EEDD' }}>Amit kihagytunk,</span>
        <br />
        <span style={{ position: 'relative', display: 'inline-block', fontStyle: 'italic', color: '#D9B96A' }}>
          az a kompromisszum.
          <span aria-hidden="true" style={{ position: 'absolute', left: 0, bottom: '-0.12em', height: 1, background: 'rgba(217,185,106,0.5)', width: show ? '100%' : '0%', transition: 'width 1100ms var(--ease-out) 900ms' }} />
        </span>
      </h1>
      <p style={{ margin: '18px 0 0', fontFamily: 'var(--font-sans)', fontWeight: 500, fontSize: 'clamp(1.1rem,1.9vw,1.35rem)', lineHeight: 1.5, color: '#E9E3D6', maxWidth: '34ch', opacity: show ? 1 : 0, transform: show ? 'none' : 'translateY(12px)', transition: 'opacity 1100ms var(--ease-out) 300ms, transform 1100ms var(--ease-out) 300ms' }}>
        Mert az egészséged és a jövőd <span style={{ color: '#D9B96A', fontWeight: 600 }}>közös ügyünk</span>.
      </p>
      <span className="ps-tick" style={{ display: 'block', marginTop: 26, color: 'rgba(233,227,214,0.62)', letterSpacing: '0.16em', lineHeight: 1.8, maxWidth: '48ch', opacity: show ? 1 : 0, transition: 'opacity 900ms ease 700ms' }}><NoCompromiseCounter /></span>
    </div>
  );
}

function Hero() {
  return (
    <section id="hero" data-screen-label="Hero" style={{ padding: 'var(--sp-9) var(--gutter) var(--sp-6)', background: 'var(--bg)' }}>
      <PhotoHeroPanel imgAlt="A Positeam fő termékei">
        <HeroFoundation />
      </PhotoHeroPanel>
      <div aria-hidden="true" style={{ display: 'flex', flexDirection: 'column', alignItems: 'center', gap: 8, marginTop: 'var(--sp-6)' }}>
        <span className="ps-tick ps-scroll-cta">GÖRGESS, ÉS FEDEZD FEL AZ EGYSZERŰ TÖRŐDÉST</span>
        <span style={{ width: 1, height: 34, background: 'var(--line-gold)', position: 'relative', overflow: 'hidden', display: 'block' }}>
          <span className="ps-scroll-dot" />
        </span>
      </div>
    </section>
  );
}
Object.assign(window, { Hero, HeroFoundation, FoundationDiagram, NoCompromiseCounter, HeroStatement, PhotoHeroPanel, PinnedHero, CloudRow, CloudText, ParticleWord });