const { useState } = React;

function FeaturedSection({ activeId, onSelect }) {
  const products = window.AZ_ALAP_ORDER.filter((id) => !window.PS_PRODUCTS[id].soon)
    .concat(window.A_CELZAS_ORDER.filter((id) => !window.PS_PRODUCTS[id].soon))
    .map((id) => window.PS_PRODUCTS[id]);
  return (
    <section id="products" data-screen-label="Termékfeltárás" style={{ background: 'var(--bg)', borderBottom: '1px solid var(--line)', padding: 'var(--sp-7) var(--gutter) var(--sp-10)' }}>
      <div style={{ maxWidth: 'var(--container)', margin: '0 auto' }}>
        <Reveal><Eyebrow gold style={{ marginBottom: 18 }}>A SZERKEZET</Eyebrow></Reveal>
        <Reveal delay={60}><h2 className="ps-h1" style={{ margin: '0 0 16px', maxWidth: 760 }}>Téged nem lehet <em style={{ fontStyle: 'italic', color: 'var(--accent)' }}>részletekben kezelni.</em><br />De nézd meg <em style={{ fontStyle: 'italic', color: 'var(--accent)' }}>részletesen</em> a termékeket.</h2></Reveal>
        <Reveal delay={180}><p className="ps-lead" style={{ margin: '0 0 20px', maxWidth: 640, color: 'var(--fg-2)' }}>A tested minden nap dolgozik érted — a kérdés az, hogy megkapja-e tőled azt, amire szüksége van. <span style={{ color: 'var(--accent)' }}>Napi 3 perc elég lesz.</span></p></Reveal>
        <FeaturedStage products={products} activeId={activeId} onSelect={onSelect} />
      </div>
    </section>
  );
}

function BanList() {
  const [open, setOpen] = useState(false);
  const items = ['Parabének', 'Ftalátok', 'SLS / SLES szulfátok', 'Szintetikus illatanyagok', 'Ásványolaj-származékok', 'Paraffin', 'Szilikonok', 'Mesterséges színezékek', 'Azoszínezékek', 'Formaldehid', 'Formaldehid-felszabadító tartósítók', 'Mikroműanyagok', 'Triklozán', 'Aszpartám', 'Aceszulfám-K', 'Szacharin', 'Ciklamát', 'Nátrium-glutamát', 'Magas fruktóztartalmú kukoricaszirup', 'Hidrogénezett zsírok', 'Transzzsírok', 'GMO-alapanyagok', 'Titán-dioxid', 'Talkum', 'BHA', 'BHT', 'EDTA', 'Propilénglikol', 'DEA / TEA vegyületek', 'Oxibenzon', 'Hidrokinon', 'Rezorcin', 'Toluol', 'Alumíniumsók', 'Magnézium-sztearát', 'Szintetikus édesítő töltőanyagok'];
  return (
    <div style={{ marginTop: 'var(--sp-8)' }}>
      <button onClick={() => setOpen((o) => !o)} className="ps-details-cta" style={{ animation: open ? 'none' : undefined }}>
        {open ? 'Bezárás' : 'Mi az, ami soha nem kerülhet a termékeinkbe?'}
      </button>
      <Drawer open={open}>
        <div style={{ position: 'relative', marginTop: 'var(--sp-6)', border: '1px solid var(--line-strong)', background: 'var(--ink-900)', padding: 'var(--sp-7) var(--sp-6)', textAlign: 'left' }}>
          <CornerMarks inset={10} />
          <Eyebrow gold style={{ marginBottom: 16 }}>AMIT NEM ENGEDÜNK BE</Eyebrow>
          <p style={{ margin: '0 0 var(--sp-6)', fontFamily: 'var(--font-sans)', fontSize: 'clamp(0.95rem,1.5vw,1.05rem)', lineHeight: 1.9, color: 'var(--bone-200)' }}>
            {items.map((it, i) => (
              <span key={it} style={{ animation: `psFadeUp 600ms var(--ease-out) ${i * 45}ms both`, display: 'inline' }}>
                {it}{i < items.length - 1 ? ' · ' : '.'}
              </span>
            ))}
          </p>
          <p className="ps-small" style={{ margin: 0, color: 'var(--fg-faint)' }}>Ez nem hatósági minősítés, hanem a saját receptúráink döntése — és nem teljes lista.</p>
          <div style={{ textAlign: 'center', marginTop: 'var(--sp-7)' }}>
            <button onClick={() => setOpen(false)} className="ps-details-cta open">Bezárás</button>
          </div>
        </div>
      </Drawer>
    </div>
  );
}

const CERT_INFO = [
  ['HACCP', 'Élelmiszer-biztonsági önellenőrzési rendszer: a gyártás minden pontján előre azonosítják és kezelik a kockázatokat.'],
  ['GMO FREE', 'Génmódosított szervezetből származó alapanyagot nem tartalmaz — a beszállítói lánc végig igazolt.'],
  ['GMP', 'Good Manufacturing Practice — helyes gyártási gyakorlat: dokumentált, auditált gyártási és higiéniai eljárásrend.'],
  ['ISO 22000', 'Nemzetközi élelmiszer-biztonsági menedzsmentrendszer — a HACCP-re épül, a teljes ellátási láncra kiterjed.'],
  ['ISO 9001', 'Minőségmenedzsment-standard: a folyamatok szabályozottak, visszakövethetők és rendszeresen auditáltak.'],
  ['HALAL', 'Az iszlám előírásoknak megfelelő alapanyag- és gyártásfelügyelet, független tanúsító szervezet igazolásával.'],
  ['KOSHER', 'A zsidó étkezési előírásoknak megfelelő minősítés — rabbinikus felügyelet az alapanyagoktól a csomagolásig.'],
  ['ECOCERT COSMOS ORGANIC', 'Nemzetközi bio-kozmetikai standard: az összetevők meghatározott aránya ellenőrzött ökológiai gazdálkodásból származik.'],
  ['SOIL ASSOCIATION', 'Brit ökológiai tanúsító testület — talaj-, termelés- és feldolgozás-szintű bio-ellenőrzés.'],
];

function PrimeSource() {
  const [hovered, setHovered] = useState(null);
  return (
    <section id="prime-source" data-screen-label="Prime Source" style={{ position: 'relative', background: 'var(--bg-deep)', borderBottom: '1px solid var(--line)', padding: 'var(--sp-10) var(--gutter)' }}>
      <BlueprintGrid opacity={0.3} gap={60} />
      <div style={{ position: 'relative', maxWidth: 820, margin: '0 auto', textAlign: 'center' }}>
        <Reveal><Eyebrow gold style={{ justifyContent: 'center', marginBottom: 18 }}>PRIME SOURCE</Eyebrow></Reveal>
        <Reveal delay={80}><h2 className="ps-h1" style={{ margin: '0 0 var(--sp-7)' }}>Milliónyi csepp <em style={{ fontStyle: 'italic', color: 'var(--accent)' }}>megalkuvás nélkül.</em></h2></Reveal>
        <Reveal delay={120}>
          <p className="ps-lead" style={{ margin: '0 auto var(--sp-8)', maxWidth: 700, color: 'var(--fg-2)' }}>
            A <span style={{ color: 'var(--accent)', letterSpacing: '0.08em' }}>PRIME SOURCE</span> kötelez bennünket arra a törekvésre, hogy beszállító partnereink és — termékeinkben található — alapanyagaink a világon elérhető mindenkori legmagasabb minőségi sztenderdekkel és minősítésekkel rendelkezzenek.
          </p>
        </Reveal>
        <Reveal delay={160}>
          <div className="ps-nextstep-grid" style={{ display: 'grid', gridTemplateColumns: '1fr 1fr', gap: 'var(--sp-7)', textAlign: 'left', marginBottom: 'var(--sp-8)' }}>
            <div>
              <Eyebrow style={{ marginBottom: 12 }}>GONDOSAN VÁLOGATOTT ALAPANYAGOK</Eyebrow>
              <p className="ps-small" style={{ margin: '0 0 12px', color: 'var(--fg-2)' }}>A beszállítók kiválasztása a minősítéseik alapján történik — a forrásnál kezdődik minden.</p>
              <p className="ps-small" style={{ margin: 0, color: 'var(--fg-2)', fontStyle: 'italic' }}>Olyan alapanyagot sem használunk fel, amiben nem vagyunk teljesen biztosak. Van, akinek elég az elég — <span style={{ color: 'var(--accent)' }}>nekünk a jó sem elég.</span></p>
            </div>
            <div style={{ borderLeft: '1px solid var(--line-strong)', paddingLeft: 'var(--sp-7)' }}>
              <Eyebrow style={{ marginBottom: 12 }}>KIHAGYÁS-ELV</Eyebrow>
              <p className="ps-small" style={{ margin: '0 0 12px', color: 'var(--fg-2)' }}>Nem receptúrakérdés, hanem elv: ami akár csak kicsit is kétséges, az nem kerül be.</p>
              <p className="ps-small" style={{ margin: 0, color: 'var(--fg-2)', fontStyle: 'italic' }}>Inkább kihagyunk egy divatos összetevőt, mint hogy engedjünk a mércéből. Nálunk a kétely is <span style={{ color: 'var(--accent)' }}>kizáró ok.</span></p>
            </div>
          </div>
        </Reveal>
        <Reveal delay={200}>
          <div style={{ position: 'relative', border: '1px solid var(--line-strong)', padding: 'var(--sp-6) var(--sp-5)' }}>
            <CornerMarks inset={10} />
            <div style={{ display: 'flex', flexWrap: 'wrap', justifyContent: 'center', gap: '10px 22px' }}>
              {CERT_INFO.map(([c, desc], i) => (
                <span key={c} onMouseEnter={() => setHovered(i)} onMouseLeave={() => setHovered(null)} className="ps-tick" style={{ position: 'relative', cursor: 'help', color: hovered === i ? 'var(--accent)' : 'var(--fg-3)', letterSpacing: '0.16em', borderBottom: '1px dotted', borderBottomColor: hovered === i ? 'var(--line-gold)' : 'var(--line)', paddingBottom: 2, transition: 'color 280ms ease, border-color 280ms ease' }}>
                  {c}
                  <span style={{ position: 'absolute', bottom: 'calc(100% + 12px)', left: '50%', transform: `translate(-50%, ${hovered === i ? '0' : '4px'})`, width: 'min(300px, 68vw)', padding: '12px 14px', background: 'var(--bg-deep, #0B0C0E)', border: '1px solid var(--line-strong)', borderTop: '1px solid var(--line-gold)', fontFamily: 'var(--font-sans)', fontSize: '0.78rem', lineHeight: 1.5, letterSpacing: '0.01em', textTransform: 'none', color: 'var(--fg-2)', textAlign: 'left', opacity: hovered === i ? 1 : 0, pointerEvents: 'none', transition: 'opacity 280ms ease, transform 280ms ease', zIndex: 20, boxShadow: '0 24px 60px -24px rgba(0,0,0,.7)' }}>{desc}</span>
                </span>
              ))}
            </div>
          </div>
        </Reveal>
        <BanList />
      </div>
    </section>
  );
}

function ClosingHero() {
  const text = "Se a terméknél, se a közösségnél, se a jövedelemnél — mindhármat úgy terveztük, hogy Téged támogasson.";
  return (
    <section id="closing-hero" style={{ background: 'var(--bg)', borderBottom: '1px solid var(--line)', padding: 'var(--sp-10) var(--gutter) var(--sp-6)' }}>
      <window.PinnedHero extra={160}>
        {() => (
          <window.PhotoHeroPanel imgAlt="Positeam közösség" img="assets/closing-hero-bg.jpg" aspect="1735 / 906" scrim>
            <window.HeroStatement preText="A célodhoz itt nem kell" emphasisText="megalkudnod" cloudText={text} persistOnHover holdCloud secondary={["Fedezd fel a charity marketinget."]} baseDelay={300} />
          </window.PhotoHeroPanel>
        )}
      </window.PinnedHero>
    </section>
  );
}

function FounderStatement() {
  return (
    <section id="alapitoi-uzenet" data-screen-label="Alapítói üzenet" style={{ position: 'relative', background: 'var(--bg)', borderTop: '1px solid var(--line)', padding: 'var(--sp-10) var(--gutter)' }}>
      <BlueprintGrid opacity={0.25} gap={64} />
      <div style={{ position: 'relative', maxWidth: 760, margin: '0 auto', textAlign: 'center' }}>
        <Reveal><Eyebrow gold style={{ justifyContent: 'center', marginBottom: 20 }}>ALAPÍTÓI ÜZENET</Eyebrow></Reveal>
        <Reveal delay={60}>
          <p className="ps-display" style={{ margin: '0 0 var(--sp-8)', fontStyle: 'italic', fontSize: 'clamp(1.25rem,2.4vw,1.8rem)', lineHeight: 1.45 }}>
            „A Positeam arcát azon termékforgalmazók alkotják, akik nap mint nap személyes kapcsolatban állnak egymással és fogyasztóinkkal. E termékforgalmazók egymással együttműködve egy olyan álom megvalósításán dolgoznak, mely <span style={{ color: 'var(--accent)' }}>valóságot alkot</span>. Olyan valóságot, mely sokaknak segít álmodni és valóságot alkotni."
          </p>
        </Reveal>
        <Reveal delay={120}>
          <img src="assets/slogan-ink.png" alt="Változz, hogy változtathass!" style={{ width: 'min(320px, 70%)', height: 'auto', display: 'block', margin: '0 auto', opacity: 0.9 }} />
        </Reveal>
      </div>
    </section>
  );
}

function InfinityBackdrop() {
  const [y, setY] = React.useState(0);
  React.useEffect(() => {
    const reduce = window.matchMedia && window.matchMedia('(prefers-reduced-motion: reduce)').matches;
    if (reduce) return;
    let raf = null;
    const onScroll = () => { if (raf) return; raf = requestAnimationFrame(() => { setY(window.scrollY || 0); raf = null; }); };
    window.addEventListener('scroll', onScroll, { passive: true });
    onScroll();
    return () => { window.removeEventListener('scroll', onScroll); if (raf) cancelAnimationFrame(raf); };
  }, []);
  const marks = [
    { top: '6vh', left: '-10%', size: 'min(58vw, 620px)', speed: 0.05, rot: -8, op: 0.06 },
    { top: '120vh', left: '62%', size: 'min(46vw, 520px)', speed: 0.09, rot: 14, op: 0.055 },
    { top: '250vh', left: '-6%', size: 'min(52vw, 560px)', speed: 0.06, rot: 6, op: 0.05 },
    { top: '380vh', left: '58%', size: 'min(60vw, 640px)', speed: 0.1, rot: -12, op: 0.055 },
    { top: '520vh', left: '4%', size: 'min(44vw, 480px)', speed: 0.07, rot: 18, op: 0.05 },
    { top: '660vh', left: '55%', size: 'min(50vw, 540px)', speed: 0.08, rot: -6, op: 0.05 },
    { top: '800vh', left: '-8%', size: 'min(56vw, 600px)', speed: 0.06, rot: 10, op: 0.05 },
  ];
  return (
    <div aria-hidden="true" style={{ position: 'absolute', inset: 0, overflow: 'hidden', pointerEvents: 'none', zIndex: 0 }}>
      {marks.map((m, i) => (
        <img key={i} src="assets/mark-black.png" alt="" style={{
          position: 'absolute', top: m.top, left: m.left, width: m.size, height: 'auto',
          opacity: m.op, transform: `translate3d(0, ${-y * m.speed}px, 0) rotate(${m.rot}deg)`, willChange: 'transform',
        }} />
      ))}
    </div>
  );
}

function ClosingRibbon() {
  const legal = [
    ['Frequency Microflora', 'OGYÉI 16566-1/2018'],
    ['NeedMax', 'OGYÉI 71236-2/2019'],
    ['SPG Supra', 'OGYÉI 69750-2/2020'],
    ['Pulse Spike', 'NNGYK/38975/2025'],
  ];
  return (
    <footer style={{ background: 'var(--bg-deep)', borderTop: '1px solid var(--line)', padding: 'var(--sp-8) var(--gutter) var(--sp-6)' }}>
      <div style={{ maxWidth: 'var(--container)', margin: '0 auto' }}>
        <div className="ps-footer-grid" style={{ display: 'grid', gridTemplateColumns: 'repeat(3, 1fr)', gap: 'var(--sp-7)' }}>
          <div>
            <Eyebrow style={{ marginBottom: 14 }}>POSITEAM</Eyebrow>
            <p className="ps-small" style={{ margin: 0, color: 'var(--fg-3)' }}>Magyar fejlesztésű étrendkiegészítők és kozmetikumok, 2015 óta.</p>
          </div>
          <div>
            <Eyebrow style={{ marginBottom: 14 }}>JOGI</Eyebrow>
            <div style={{ display: 'flex', flexDirection: 'column', gap: 8 }}>
              <a className="ps-small" href="#">Adatkezelési tájékoztató</a>
              <a className="ps-small" href="#">ÁSZF</a>
              <a className="ps-small" href="#">Impresszum</a>
            </div>
            <p className="ps-small" style={{ margin: '14px 0 0', color: 'var(--fg-faint)' }}>Az étrendkiegészítő nem helyettesíti a vegyes étrendet és az egészséges életmódot.</p>
          </div>
          <div>
            <Eyebrow style={{ marginBottom: 14 }}>NYILVÁNTARTÁSI SZÁMOK</Eyebrow>
            <div style={{ display: 'flex', flexDirection: 'column', gap: 6 }}>
              {legal.map(([n, num]) => (
                <p key={n} className="ps-small" style={{ margin: 0, color: 'var(--fg-faint)' }}>{n} · {num}</p>
              ))}
            </div>
          </div>
        </div>
        <div style={{ marginTop: 'var(--sp-8)', paddingTop: 'var(--sp-6)', borderTop: '1px solid var(--line)', textAlign: 'center' }}>
          <img src="assets/mark-gold.png" alt="Positeam" style={{ height: 22, opacity: 0.6, display: 'block', margin: '0 auto 14px' }} />
          <p className="ps-tick" style={{ margin: 0, color: 'var(--fg-faint)', letterSpacing: '0.2em' }}>A PIAC VÉLETLEN. EZ TERV.</p>
        </div>
      </div>
    </footer>
  );
}

function LangPicker({ compact }) {
  const [open, setOpen] = useState(false);
  const langs = [['HU', '\uD83C\uDDED\uD83C\uDDFA'], ['EN', '\uD83C\uDDEC\uD83C\uDDE7'], ['DE', '\uD83C\uDDE9\uD83C\uDDEA'], ['RO', '\uD83C\uDDF7\uD83C\uDDF4'], ['SR', '\uD83C\uDDF7\uD83C\uDDF8'], ['PL', '\uD83C\uDDF5\uD83C\uDDF1'], ['SK', '\uD83C\uDDF8\uD83C\uDDF0'], ['CS', '\uD83C\uDDE8\uD83C\uDDFF']];
  return (
    <div style={{ position: 'relative' }}>
      <button onClick={() => setOpen((o) => !o)} className="ps-tick" style={{ background: 'transparent', border: 'none', cursor: 'pointer', color: 'var(--fg-3)', letterSpacing: '0.18em', display: 'flex', alignItems: 'center', gap: 7 }}>
        <span style={{ fontSize: 15, lineHeight: 1 }}>{'\uD83C\uDDED\uD83C\uDDFA'}</span>HU ▾
      </button>
      {open && (
        <div style={{ position: 'absolute', top: '100%', right: compact ? 0 : 'auto', left: compact ? 'auto' : 0, marginTop: 8, background: 'var(--bg-panel)', border: '1px solid var(--line-strong)', minWidth: 158, padding: '6px 0', zIndex: 40 }}>
          {langs.map(([l, flag]) => (
            <div key={l} style={{ display: 'flex', alignItems: 'center', gap: 10, padding: '7px 14px' }}>
              <span style={{ fontSize: 15, lineHeight: 1 }}>{flag}</span>
              <span className="ps-tick" style={{ color: l === 'HU' ? 'var(--accent)' : 'var(--fg-faint)', flex: 1 }}>{l}</span>
              {l !== 'HU' && <span className="ps-tick" style={{ color: 'var(--fg-faint)', fontSize: 9, opacity: 0.7 }}>HAMAROSAN</span>}
            </div>
          ))}
        </div>
      )}
    </div>
  );
}

function ScrollRail() {
  const items = [
    { id: 'hero', label: 'KEZDŐLAP' },
    { id: 'products', label: 'TERMÉKEK' },
    { id: 'prime-source', label: 'PRIME SOURCE' },
    { id: 'mi-ez', label: 'ŐSZINTÉN' },
    { id: 'closing-hero', label: 'A KONCEPCIÓ' },
    { id: 'next-step', label: 'KÖVETKEZŐ LÉPÉS' },
  ];
  const [active, setActive] = useState('hero');
  const [scrolled, setScrolled] = useState(false);
  const [menuOpen, setMenuOpen] = useState(false);
  const [prog, setProg] = useState(0);
  const [secOpen, setSecOpen] = useState(false);
  useEffect(() => {
    const onScroll = () => {
      const y = window.scrollY || 0;
      setScrolled(y > 120);
      const h = document.documentElement.scrollHeight - window.innerHeight;
      setProg(h > 0 ? Math.min(1, Math.max(0, y / h)) : 0);
      let cur = items[0].id;
      for (const it of items) {
        const el = document.getElementById(it.id);
        if (el && el.offsetTop - 90 <= y) cur = it.id;
      }
      setActive(cur);
    };
    onScroll();
    window.addEventListener('scroll', onScroll, { passive: true });
    return () => window.removeEventListener('scroll', onScroll);
  }, []);
  useEffect(() => { if (!scrolled) setMenuOpen(false); }, [scrolled]);
  const go = (id) => { const el = document.getElementById(id); if (el) { setActive(id); window.scrollTo({ top: el.getBoundingClientRect().top + window.scrollY - 8, behavior: 'smooth' }); } };
  const atEnd = prog >= 0.995;
  const idx = atEnd ? items.length - 1 : Math.max(0, items.findIndex((x) => x.id === active));
  const botnavRow = (fill) => (
    <div className={`ps-botnav-layer ${fill ? 'fill' : ''}`}>
      <button className="ps-botnav-bar" onClick={() => setSecOpen((o) => !o)} aria-expanded={secOpen} aria-label="Szakaszok" tabIndex={fill ? -1 : 0}>
        <span className="ps-botnav-count">{String(idx + 1).padStart(2, '0')} / {String(items.length).padStart(2, '0')}</span>
        <span className="ps-botnav-name">{items[idx].label}</span>
        <span className="ps-botnav-hint">SZAKASZOK</span>
        <span className="ps-botnav-caret">{secOpen ? '▴' : '▾'}</span>
      </button>
      <button className="ps-botnav-next" tabIndex={fill ? -1 : 0} onClick={() => { setSecOpen(false); if (idx < items.length - 1) go(items[idx + 1].id); else window.scrollTo({ top: 0, behavior: 'smooth' }); }}>
        {idx < items.length - 1 ? 'KÖVETKEZŐ ↓' : 'AZ ELEJÉRE ↑'}
      </button>
    </div>
  );
  return (
    <React.Fragment>
      {!scrolled && (
        <div style={{ position: 'fixed', top: 20, left: '50%', transform: 'translateX(-50%)', zIndex: 30, display: 'flex', alignItems: 'center', gap: 18 }}>
          <a href="#top" aria-label="Positeam — vissza a tetejére" style={{ display: 'flex', alignItems: 'center', gap: 10 }}>
            <img src="assets/mark-gold.png" alt="" style={{ height: 24, opacity: 0.9, display: 'block' }} />
            <span className="ps-label" style={{ color: 'var(--fg-bright)', letterSpacing: '0.2em' }}>POSITEAM</span>
          </a>
          <a href="https://positeam.com/positeam/net/welcome.php" target="_blank" rel="noopener noreferrer" className="ps-tick ps-pulse" style={{ border: '1px solid var(--line-gold)', padding: '7px 14px', color: 'var(--accent)', letterSpacing: '0.16em', whiteSpace: 'nowrap' }}>WEBIRODA →</a>
          <LangPicker />
        </div>
      )}
      {scrolled && (
        <div style={{ position: 'fixed', top: 18, left: 'var(--gutter)', zIndex: 32 }}>
          <button onClick={() => setMenuOpen((o) => !o)} aria-label="Menü" className="ps-pulse" style={{
            display: 'flex', flexDirection: 'column', justifyContent: 'center', gap: 5, width: 44, height: 44,
            border: '1px solid var(--line-gold)', background: 'rgba(243,236,218,0.86)', backdropFilter: 'blur(10px)', WebkitBackdropFilter: 'blur(10px)', cursor: 'pointer', padding: '0 11px',
          }}>
            <span style={{ display: 'block', height: 1, background: 'var(--fg-bright)', transform: menuOpen ? 'translateY(6px) rotate(45deg)' : 'none', transition: 'transform 280ms var(--ease)' }} />
            <span style={{ display: 'block', height: 1, background: 'var(--fg-bright)', opacity: menuOpen ? 0 : 1, transition: 'opacity 200ms var(--ease)' }} />
            <span style={{ display: 'block', height: 1, background: 'var(--fg-bright)', transform: menuOpen ? 'translateY(-6px) rotate(-45deg)' : 'none', transition: 'transform 280ms var(--ease)' }} />
          </button>
          {menuOpen && (
            <div style={{ marginTop: 10, minWidth: 210, border: '1px solid var(--line-strong)', background: 'var(--bg-panel)', padding: 'var(--sp-4) 0', boxShadow: '0 24px 60px -24px rgba(0,0,0,0.4)' }}>
              <a href="#top" onClick={() => setMenuOpen(false)} style={{ display: 'flex', alignItems: 'center', gap: 10, padding: '10px 16px' }}>
                <img src="assets/mark-gold.png" alt="" style={{ height: 18 }} />
                <span className="ps-label" style={{ color: 'var(--fg-bright)', letterSpacing: '0.18em' }}>POSITEAM</span>
              </a>
              <a href="https://positeam.com/positeam/net/welcome.php" target="_blank" rel="noopener noreferrer" className="ps-tick" style={{ display: 'block', padding: '10px 16px', color: 'var(--accent)', letterSpacing: '0.16em' }}>WEBIRODA →</a>
              <div style={{ padding: '6px 16px 0', borderTop: '1px solid var(--line)', marginTop: 6 }}>
                <LangPicker />
              </div>
            </div>
          )}
        </div>
      )}
      <div className="ps-botnav">
        {secOpen && (
          <div className="ps-botnav-list">
            {items.map((it, i) => (
              <button key={it.id} onClick={() => { setSecOpen(false); go(it.id); }} className={`ps-botnav-row ${i === idx ? 'active' : ''}`}>
                <span className="n">{String(i + 1).padStart(2, '0')}</span>
                <span className="t">{it.label}</span>
              </button>
            ))}
          </div>
        )}
        <div className="ps-botnav-row-wrap">
          {botnavRow(false)}
          <div className="ps-botnav-fillmask" aria-hidden="true" style={{ clipPath: `inset(0 ${(1 - prog) * 100}% 0 0)` }}>{botnavRow(true)}</div>
        </div>
      </div>
    </React.Fragment>
  );
}

function NewsFeedRibbon() {
  const items = [
    { icon: 'minus', label: 'A luxus az, amit kihagytunk.' },
    { icon: 'clock', label: 'Napi 3 perc. Kívül és belül.' },
    { icon: 'check', label: 'Elég jó vagy úgy, ahogy vagy.' },
    { icon: 'compass', label: 'Nincs kényszer — itt Te döntesz.' },
    { icon: 'flask', label: 'Minden alapanyagot megvizsgálunk beérkezéskor.' },
    { icon: 'handshake', label: 'Közösségi vállalkozás értünk, 2015 óta.' },
    { icon: 'crystal', label: 'A piac véletlen. Ez terv.' },
  ];
  const loop = [...items, ...items, ...items];
  return (
    <div style={{ position: 'relative', background: 'var(--ink-900)', borderTop: '1px solid var(--line-gold)', borderBottom: '1px solid var(--line-gold)', padding: 'var(--sp-8) 0', overflow: 'hidden' }}>
      <div className="ps-marquee-track" style={{ display: 'flex', gap: 'clamp(56px,7vw,110px)', width: 'max-content' }}>
        {loop.map((it, i) => (
          <span key={i} style={{ display: 'flex', alignItems: 'center', gap: 18, flex: 'none' }}>
            <IconGlyph kind={it.icon} size={32} color="var(--gold-bright)" />
            <span className="ps-h3" style={{ margin: 0, fontSize: 'clamp(1.15rem,1.8vw,1.5rem)', color: 'var(--bone-100)' }}>{it.label}</span>
          </span>
        ))}
      </div>
    </div>
  );
}

function CommunityStatement() {
  return (
    <section style={{ background: 'var(--bg)', padding: 'var(--sp-7) var(--gutter)', textAlign: 'center' }}>
      <Reveal><Eyebrow gold style={{ justifyContent: 'center', marginBottom: 18 }}>MI A POSITEAM CHARITY MARKETING NETWORK?</Eyebrow></Reveal>
      <Reveal delay={60}>
        <p className="ps-display" style={{ maxWidth: 720, margin: '0 auto var(--sp-6)', fontStyle: 'italic', fontSize: 'clamp(1.7rem,3.4vw,2.6rem)', lineHeight: 1.3 }}>
          Akár vagyont is építhetsz, nem kell adakoznod. <span style={{ color: 'var(--accent)' }}>Mégis segítesz másokon.</span>
        </p>
      </Reveal>
      <Reveal delay={120}>
        <p className="ps-lead" style={{ maxWidth: 640, margin: '0 auto', color: 'var(--fg-2)' }}>
          A Positeam egy közösségi elosztási modellre épül — a termékeinkből származó bevétel legjelentősebb része feléd, azaz a közösség felé és egy közös társadalmi cél felé irányul.
        </p>
      </Reveal>
    </section>
  );
}

function WhatThisIs() {
  const isRows = [
    'Termékek, amiket magadnak használsz.',
    'Hozzáférés olyan minőséghez, ami átlagembernek nehezen elérhető.',
    'Lehetőség arra, hogy megoszd másokkal.',
    'Közösségi, szociális célú vállalkozás 2015 óta.',
    'Ezzel akár vagyont is építhetsz.',
  ];
  const isNotRows = [
    'Nincs kötelező vásárlás.',
    'Nem azzal hívogatunk, hogy olcsó — hasonlítsd össze, mi van egy adagban.',
    'Nincs csodaígéret.',
    'Nincs kötelező részvétel, nem kell adakoznod.',
    'Nincs nyomás feléd.',
  ];
  return (
    <section id="mi-ez" data-screen-label="Mi ez" style={{ position: 'relative', background: 'var(--bg-deep)', borderTop: '2px solid var(--line-gold)', borderBottom: '1px solid var(--line)', padding: 'var(--sp-10) var(--gutter)' }}>
      <div style={{ position: 'relative', maxWidth: 'var(--container)', margin: '0 auto' }}>
        <Reveal><Eyebrow gold style={{ marginBottom: 18 }}>ŐSZINTÉN</Eyebrow></Reveal>
        <Reveal delay={60}><h2 className="ps-h1" style={{ margin: '0 0 var(--sp-8)', maxWidth: 640 }}>Mi ez — <em style={{ fontStyle: 'italic', color: 'var(--accent)' }}>és mi nem ez.</em></h2></Reveal>
        <div className="ps-nextstep-grid" style={{ display: 'grid', gridTemplateColumns: '1fr 1fr', gap: 1, background: 'var(--line-strong)', border: '1px solid var(--line-strong)' }}>
          <div style={{ background: 'var(--bg-panel)', padding: 'var(--sp-7)' }}>
            <Eyebrow gold style={{ marginBottom: 18 }}>EZ EZ</Eyebrow>
            <div style={{ display: 'flex', flexDirection: 'column', gap: 14 }}>
              {isRows.map((r) => (
                <p key={r} className="ps-body" style={{ margin: 0, color: 'var(--fg)', display: 'flex', gap: 12 }}>
                  <span style={{ color: 'var(--accent)' }}>＋</span>{r}
                </p>
              ))}
            </div>
          </div>
          <div style={{ background: 'var(--bg-panel)', padding: 'var(--sp-7)' }}>
            <Eyebrow style={{ marginBottom: 18 }}>EZ NEM EZ</Eyebrow>
            <div style={{ display: 'flex', flexDirection: 'column', gap: 14 }}>
              {isNotRows.map((r) => (
                <p key={r} className="ps-body" style={{ margin: 0, color: 'var(--fg-3)', display: 'flex', gap: 12 }}>
                  <span style={{ opacity: 0.5 }}>—</span>{r}
                </p>
              ))}
            </div>
          </div>
        </div>
        <Reveal delay={140}>
          <div style={{ position: 'relative', marginTop: 'var(--sp-8)', border: '1px solid var(--line-gold)', background: 'rgba(201,168,106,0.1)', padding: 'var(--sp-7) var(--sp-6)', textAlign: 'center' }}>
            <CornerMarks inset={10} />
            <p className="ps-display" style={{ margin: 0, fontStyle: 'italic', fontSize: 'clamp(1.5rem,3vw,2.2rem)', color: 'var(--fg-bright)', lineHeight: 1.3 }}>
              Mindezzel hozzájárulsz társadalmi célokhoz — <span style={{ color: 'var(--gold-deep)', fontStyle: 'normal', fontWeight: 500 }}>ez a Charity Marketing.</span>
            </p>
          </div>
        </Reveal>
      </div>
    </section>
  );
}

function NextStep() {
  return (
    <section id="next-step" data-screen-label="Következő lépés" style={{ position: 'relative', background: 'var(--ink-900)', borderTop: '1px solid var(--line)', padding: 'var(--sp-9) var(--gutter)' }}>
      <div style={{ position: 'relative', maxWidth: 860, margin: '0 auto', textAlign: 'center' }}>
        <Reveal><Eyebrow gold style={{ justifyContent: 'center', marginBottom: 16 }}>INNEN KÉT ÚT VAN</Eyebrow></Reveal>
        <Reveal delay={60}>
          <h2 className="ps-display" style={{ margin: '0 0 var(--sp-8)', fontStyle: 'italic', fontSize: 'clamp(1.5rem,3vw,2.2rem)', color: 'var(--bone-100)' }}>
            Most ennyi elég. <span style={{ color: 'var(--accent)' }}>Nem raboljuk az idődet.</span>
          </h2>
        </Reveal>
        <div className="ps-nextstep-grid" style={{ display: 'grid', gridTemplateColumns: '1fr 1fr', gap: 'var(--sp-8)' }}>
          <div style={{ display: 'flex', flexDirection: 'column', alignItems: 'center', gap: 14 }}>
            <span className="ps-display" style={{ fontSize: 'clamp(2.4rem,5vw,3.4rem)', color: 'var(--accent)', lineHeight: 1, borderBottom: '1px solid var(--line-gold)', paddingBottom: 6, minWidth: 54, textAlign: 'center' }}>1</span>
            <IconGlyph kind="handshake" size={40} color="var(--gold-bright)" />
            <p className="ps-body" style={{ margin: 0, color: 'var(--bone-200)' }}>Beszélj azzal, aki meghívott.</p>
            <p className="ps-small" style={{ margin: 0, color: 'rgba(233,227,214,0.6)' }}>A leggyorsabb és legszemélyesebb út. Erre épül az egész.</p>
          </div>
          <div style={{ display: 'flex', flexDirection: 'column', alignItems: 'center', gap: 14, borderLeft: '1px solid var(--line-strong)' }}>
            <span className="ps-display" style={{ fontSize: 'clamp(2.4rem,5vw,3.4rem)', color: 'var(--accent)', lineHeight: 1, borderBottom: '1px solid var(--line-gold)', paddingBottom: 6, minWidth: 54, textAlign: 'center' }}>2</span>
            <IconGlyph kind="screen" size={40} color="var(--gold-bright)" />
            <p className="ps-body" style={{ margin: 0, color: 'var(--bone-200)' }}>Hallgass meg minket Zoomon — minden csütörtökön 18:00-kor, élőben.</p>
            <p className="ps-small" style={{ margin: 0, color: 'rgba(233,227,214,0.6)' }}>Ha ez még kevés a döntéshez.</p>
            <Button variant="solid" href="https://us02web.zoom.us/j/4100205728">OK, MEGNÉZEM</Button>
          </div>
        </div>
      </div>
    </section>
  );
}

function MeetUsCta() {
  return (
    <div style={{ textAlign: 'center', padding: 'var(--sp-7) var(--gutter)', background: 'var(--bg)' }}>
      <Button variant="solid" href="#">ISMERD MEG KÖZELEBBRŐL, KIK VAGYUNK →</Button>
    </div>
  );
}

Object.assign(window, { FeaturedSection, PrimeSource, BanList, WhatThisIs, CommunityStatement, NewsFeedRibbon, NextStep, MeetUsCta, FounderStatement, InfinityBackdrop, ClosingHero, ClosingRibbon, ScrollRail, LangPicker });
