/* global React */
const { useState, useEffect, createContext, useContext } = React;

// ============ TEAM CONTEXT =============================================
const TeamCtx = createContext({ team: 'pivo', setTeam: () => {} });

function TeamProvider({ children }) {
  const [team, setTeam] = useState(() => {
    if (typeof localStorage !== 'undefined') return localStorage.getItem('pv_team') || 'pivo';
    return 'pivo';
  });
  useEffect(() => {
    document.documentElement.setAttribute('data-team', team);
    if (typeof localStorage !== 'undefined') localStorage.setItem('pv_team', team);
  }, [team]);
  return <TeamCtx.Provider value={{ team, setTeam }}>{children}</TeamCtx.Provider>;
}
const useTeam = () => useContext(TeamCtx);

// ============ TEAM TOGGLE ==============================================
function TeamToggle() {
  const { team, setTeam } = useTeam();
  return (
    <div style={ttStyles.wrap} role="tablist" aria-label="Team toggle">
      <div style={{...ttStyles.thumb, transform: team === 'vejce' ? 'translateX(100%)' : 'translateX(0)'}}/>
      <button onClick={() => setTeam('pivo')} style={{...ttStyles.btn, color: team === 'pivo' ? 'var(--foam)' : 'var(--ink)'}} aria-pressed={team==='pivo'}>
        🍺&nbsp;TÝM&nbsp;PIVO
      </button>
      <button onClick={() => setTeam('vejce')} style={{...ttStyles.btn, color: team === 'vejce' ? 'var(--ink)' : 'var(--ink)'}} aria-pressed={team==='vejce'}>
        ◓&nbsp;TÝM&nbsp;VEJCE
      </button>
    </div>
  );
}
const ttStyles = {
  wrap: { position:'relative', display:'flex', border:'3px solid var(--ink)', background:'var(--shell-cool)', boxShadow:'3px 3px 0 var(--ink)', height:38, width:280, flexShrink:0 },
  thumb: { position:'absolute', top:0, left:0, width:'50%', height:'100%', background:'var(--team-accent)', transition:'transform 320ms cubic-bezier(.34,1.56,.64,1)', zIndex:0 },
  btn: { position:'relative', zIndex:1, flex:1, fontFamily:'var(--font-mono)', fontWeight:700, fontSize:11, letterSpacing:'0.12em', background:'transparent', border:'none', cursor:'pointer', whiteSpace:'nowrap' },
};

// ============ TOP BAR ===================================================
function TopBar({ onRSVP }) {
  return (
    <header style={tbStyles.bar}>
      <a href="#" style={tbStyles.wordmark}>
        <img src="assets/egg-mark.svg" height="32" alt=""/>
        <span>PIVO A VEJCE</span>
      </a>
      <div style={tbStyles.right}>
        <TeamToggle/>
        <nav style={tbStyles.nav}>
          <a href="#popups" style={tbStyles.link}>Pop-upy</a>
          <a href="#menu" style={tbStyles.link}>Lístek</a>
          <button onClick={onRSVP} style={tbStyles.rsvp}>REZERVACE</button>
        </nav>
      </div>
    </header>
  );
}
const tbStyles = {
  bar: { display:'flex', alignItems:'center', justifyContent:'space-between', padding:'14px 32px', borderBottom:'3px solid var(--ink)', background:'var(--shell)', position:'sticky', top:0, zIndex:10, gap:18, flexWrap:'wrap' },
  wordmark: { display:'flex', alignItems:'center', gap:10, fontFamily:'var(--font-display)', fontSize:20, color:'var(--ink)', textDecoration:'none', letterSpacing:'-0.01em', whiteSpace:'nowrap', flexShrink:0 },
  right: { display:'flex', alignItems:'center', gap:18, flexWrap:'wrap' },
  nav: { display:'flex', alignItems:'center', gap:22, whiteSpace:'nowrap', flexShrink:0 },
  link: { fontFamily:'var(--font-sans)', fontWeight:600, fontSize:14, color:'var(--ink)', textDecoration:'none', textTransform:'uppercase', letterSpacing:'0.06em' },
  rsvp: { fontFamily:'var(--font-display)', fontSize:14, padding:'8px 16px', border:'3px solid var(--ink)', background:'var(--yolk)', color:'var(--ink)', boxShadow:'var(--sh-hard-sm)', cursor:'pointer', letterSpacing:'0.02em' },
};

// ============ COMING SOON / NEWSLETTER ==================================
function ComingSoon() {
  const { team } = useTeam();
  const [email, setEmail] = useState('');
  const [done, setDone] = useState(false);
  const submit = async (e) => {
    e.preventDefault();
    if (typeof window !== 'undefined' && typeof window.__pivoSubmitEmail === 'function') {
      await window.__pivoSubmitEmail(email, team);
    }
    setDone(true);
  };
  const tickerWord = team === 'pivo' ? 'NA ZDRAVÍ' : 'DOBROU CHUŤ';
  const headline = team === 'pivo'
    ? <>Pípu <em style={csStyles.em}>chladíme</em>,<br/>brzy <em style={csStyles.em}>otvíráme</em>.</>
    : <>Pánvičku <em style={csStyles.em}>hřejeme</em>,<br/>brzy <em style={csStyles.em}>servírujeme</em>.</>;
  const intro = team === 'pivo'
    ? 'Chcete vědět, kdy poteče první půllitr? Napište nám e-mail.'
    : 'Chcete vědět, kdy se rozpustí první kostka másla? Napište nám e-mail.';
  const tickerText = `BRZY ·  ${tickerWord} ·  BRZY ·  ${tickerWord} ·  BRZY ·  ${tickerWord} ·  BRZY ·  ${tickerWord} ·  `;
  return (
    <section style={csStyles.wrap}>
      <div style={csStyles.ticker} aria-hidden="true">
        <span style={csStyles.tickerSpan}>{tickerText}</span>
        <span style={csStyles.tickerSpan}>{tickerText}</span>
      </div>
      <div className="cs-body" style={csStyles.body}>
        <div style={csStyles.copy}>
          <div style={csStyles.eyebrow}>★ MEZI NÁMI ★</div>
          <h2 style={csStyles.h2}>{headline}</h2>
          <p style={csStyles.p}>{intro} Posíláme málokdy a jenom když se něco opravdu děje.</p>
        </div>
        <div style={csStyles.formWrap}>
          {done ? (
            <div style={csStyles.success}>
              <div style={csStyles.checkStamp}>✓</div>
              <div style={csStyles.successH}>Hotovo.</div>
              <div style={csStyles.successP}>Dáme vědět, až pustíme další pop-up.</div>
            </div>
          ) : (
            <form onSubmit={submit} style={csStyles.form}>
              <label style={csStyles.lbl}>VÁŠ E-MAIL · TÝM {team === 'pivo' ? 'PIVO 🍺' : 'VEJCE ◓'}</label>
              <div style={csStyles.row}>
                <input type="email" required placeholder="vase@adresa.cz" value={email} onChange={e=>setEmail(e.target.value)} style={csStyles.input}/>
                <button type="submit" style={csStyles.btn}>PŘIDAT&nbsp;SE →</button>
              </div>
              <p style={csStyles.fine}>Žádný spam. Maximálně 1× za pop-up. <em>Opravdu.</em></p>
            </form>
          )}
        </div>
      </div>
    </section>
  );
}
const csStyles = {
  wrap: { background:'var(--team-bg-dark)', color:'var(--shell)', borderBottom:'6px solid var(--ink)', position:'relative', overflow:'hidden' },
  ticker: { display:'flex', gap:0, padding:'10px 0', background:'var(--team-accent)', color:'var(--foam)', fontFamily:'var(--font-mono)', fontWeight:700, fontSize:13, letterSpacing:'0.18em', borderBottom:'3px solid var(--ink)', whiteSpace:'nowrap', overflow:'hidden' },
  tickerSpan: { display:'inline-block', animation:'cs-marquee 28s linear infinite', flexShrink:0 },
  body: { display:'grid', gridTemplateColumns:'1.1fr 1fr', gap:56, padding:'56px 48px', alignItems:'center' },
  copy: {},
  eyebrow: { fontFamily:'var(--font-mono)', fontSize:12, letterSpacing:'0.24em', color:'var(--team-accent-soft)', fontWeight:700, marginBottom:18 },
  h2: { fontFamily:'var(--font-display)', fontSize:'clamp(40px, 5.2vw, 68px)', lineHeight:0.96, letterSpacing:'-0.02em', color:'var(--shell)', margin:0 },
  em: { fontFamily:'"Fraunces", serif', fontStyle:'italic', fontWeight:900, color:'var(--team-accent-soft)' },
  p: { fontFamily:'var(--font-serif)', fontSize:18, color:'var(--shell-warm)', marginTop:22, lineHeight:1.5, maxWidth:460 },
  formWrap: { position:'relative' },
  form: { background:'var(--foam)', color:'var(--ink)', border:'4px solid var(--team-accent-soft)', boxShadow:'8px 8px 0 var(--team-accent)', padding:'28px 28px 22px', display:'flex', flexDirection:'column', gap:10 },
  lbl: { fontFamily:'var(--font-mono)', fontSize:11, fontWeight:700, letterSpacing:'0.18em', color:'var(--team-accent)' },
  row: { display:'flex', gap:10, flexWrap:'nowrap' },
  input: { flex:1, minWidth:0, fontFamily:'var(--font-sans)', fontSize:17, padding:'14px 16px', border:'3px solid var(--ink)', background:'var(--shell-cool)', color:'var(--ink)', outline:'none' },
  btn: { fontFamily:'var(--font-display)', fontSize:15, padding:'14px 18px', border:'3px solid var(--ink)', background:'var(--team-accent-soft)', color:'var(--ink)', boxShadow:'4px 4px 0 var(--ink)', cursor:'pointer', letterSpacing:'0.02em', whiteSpace:'nowrap', flexShrink:0 },
  fine: { fontFamily:'var(--font-serif)', fontStyle:'italic', fontSize:13, color:'var(--ink-mute)', margin:'4px 0 0' },
  success: { background:'var(--team-accent-soft)', border:'4px solid var(--ink)', boxShadow:'8px 8px 0 var(--team-accent)', padding:'32px 28px', textAlign:'center' },
  checkStamp: { fontFamily:'var(--font-display)', fontSize:72, color:'var(--team-accent)', lineHeight:1, marginBottom:8 },
  successH: { fontFamily:'var(--font-display)', fontSize:34, color:'var(--ink)', letterSpacing:'-0.01em' },
  successP: { fontFamily:'var(--font-serif)', fontStyle:'italic', fontSize:16, color:'var(--ink-soft)', marginTop:6 },
};

if (typeof document !== 'undefined' && !document.getElementById('cs-keyframes')) {
  const st = document.createElement('style');
  st.id = 'cs-keyframes';
  st.textContent = `@keyframes cs-marquee { from { transform: translateX(0); } to { transform: translateX(-100%); } } @media (max-width: 900px) { .cs-body { grid-template-columns: 1fr !important; gap: 32px !important; padding: 40px 28px !important; } }`;
  document.head.appendChild(st);
}

// ============ HERO ======================================================
function Hero({ onRSVP }) {
  const { team } = useTeam();
  const heroCopy = team === 'pivo'
    ? { eyebrow: 'PIVO A VEJCE · POP-UP Č. 14 · PRAHA',
        h1a: 'PIVO', h1b: 'A VEJCE.',
        line1: 'Studené.',
        line2: 'Plzeňské. Ticho.',
        sub: 'dvě věci. navždy.  — pij a mlč.',
        cta: 'NA ZDRAVÍ — REZERVOVAT',
        stamp: '40 MÍST · PLZEŇ ZA 65 Kč' }
    : { eyebrow: 'PIVO A VEJCE · POP-UP Č. 14 · PRAHA',
        h1a: 'VEJCE', h1b: 'A PIVO.',
        line1: 'Měkká.',
        line2: 'Máslová. Ráno.',
        sub: 'dvě věci. navždy.  — jezte pomalu.',
        cta: 'DOBROU CHUŤ — REZERVOVAT',
        stamp: '40 MÍST · VEJCE ZA 120 Kč' };
  return (
    <section style={heroStyles.wrap}>
      <div style={heroStyles.eyebrow}>{heroCopy.eyebrow}</div>
      <h1 style={heroStyles.h1}>{heroCopy.h1a}<br/>{heroCopy.h1b}<br/><span style={heroStyles.thats}>{heroCopy.line1}</span><br/><span style={heroStyles.thats}>{heroCopy.line2}</span></h1>
      <p style={heroStyles.sub}><em>{heroCopy.sub}</em></p>
      <div style={heroStyles.row}>
        <button onClick={onRSVP} style={heroStyles.cta}>{heroCopy.cta}</button>
        <span style={heroStyles.stamp}>{heroCopy.stamp}</span>
      </div>
      <img src="assets/stamp-approved.svg" style={heroStyles.float} alt=""/>
    </section>
  );
}
const heroStyles = {
  wrap: { position:'relative', background:'var(--team-bg-hero)', padding:'72px 48px 88px', borderBottom:'6px solid var(--ink)', overflow:'hidden' },
  eyebrow: { fontFamily:'var(--font-mono)', fontSize:12, letterSpacing:'0.18em', color:'var(--ink)', marginBottom:18, fontWeight:700 },
  h1: { fontFamily:'var(--font-display)', fontSize:'clamp(72px, 11vw, 168px)', lineHeight:0.84, color:'var(--ink)', letterSpacing:'-0.03em', margin:0 },
  thats: { fontFamily:'"Fraunces", serif', fontStyle:'italic', fontWeight:900 },
  sub: { fontFamily:'var(--font-serif)', fontSize:22, color:'var(--ink-soft)', marginTop:24, fontStyle:'italic' },
  row: { display:'flex', alignItems:'center', gap:20, marginTop:36, flexWrap:'wrap' },
  cta: { fontFamily:'var(--font-display)', fontSize:22, padding:'18px 32px', border:'4px solid var(--ink)', background:'var(--ink)', color:'var(--team-accent-soft)', boxShadow:'6px 6px 0 var(--team-accent)', cursor:'pointer', letterSpacing:'0.02em' },
  stamp: { fontFamily:'var(--font-mono)', fontWeight:700, fontSize:13, letterSpacing:'0.16em', color:'var(--team-accent)', border:'2px solid var(--team-accent)', padding:'8px 14px', transform:'rotate(-3deg)', whiteSpace:'nowrap' },
  float: { position:'absolute', top:40, right:60, height:140, transform:'rotate(10deg)' },
};

// ============ POPUP CARD ===============================================
function PopupCard({ num, day, date, time, place, addr, seats, soldOut, onRSVP }) {
  return (
    <article style={{...pcStyles.card, ...(soldOut ? pcStyles.soldCard : {})}}>
      <div style={pcStyles.num}>No. {num}</div>
      <div style={pcStyles.date}>
        <div style={pcStyles.day}>{day}</div>
        <div style={pcStyles.dateMain}>{date}</div>
        <div style={pcStyles.time}>{time}</div>
      </div>
      <div style={pcStyles.body}>
        <div style={pcStyles.place}>{place}</div>
        <div style={pcStyles.addr}>{addr}</div>
      </div>
      <div style={pcStyles.foot}>
        {soldOut ? (
          <span style={pcStyles.sold}>VYPRODÁNO</span>
        ) : (
          <>
            <span style={pcStyles.seats}>zbývá {seats} míst</span>
            <button onClick={onRSVP} style={pcStyles.rsvp}>REZERVOVAT →</button>
          </>
        )}
      </div>
    </article>
  );
}
const pcStyles = {
  card: { position:'relative', background:'var(--foam)', border:'4px solid var(--ink)', boxShadow:'var(--sh-hard)', padding:'22px 24px', display:'flex', flexDirection:'column', gap:14, transition:'transform 160ms var(--ease-pop), box-shadow 160ms' },
  soldCard: { background:'var(--shell-warm)', opacity:0.82 },
  num: { fontFamily:'var(--font-mono)', fontSize:11, letterSpacing:'0.16em', color:'var(--team-accent)', fontWeight:700 },
  date: { display:'flex', alignItems:'baseline', gap:12, flexWrap:'nowrap' },
  day: { fontFamily:'var(--font-display)', fontSize:28, color:'var(--ink)', letterSpacing:'-0.02em', whiteSpace:'nowrap' },
  dateMain: { fontFamily:'var(--font-serif)', fontStyle:'italic', fontWeight:900, fontSize:20, color:'var(--ink)', whiteSpace:'nowrap' },
  time: { fontFamily:'var(--font-mono)', fontSize:12, color:'var(--ink-mute)', marginLeft:'auto', whiteSpace:'nowrap' },
  body: { borderTop:'2px solid var(--ink)', borderBottom:'2px solid var(--ink)', padding:'12px 0' },
  place: { fontFamily:'var(--font-sans)', fontSize:18, fontWeight:700, color:'var(--ink)' },
  addr: { fontFamily:'var(--font-sans)', fontSize:13, color:'var(--ink-mute)', marginTop:4 },
  foot: { display:'flex', alignItems:'center', justifyContent:'space-between', gap:12 },
  seats: { fontFamily:'var(--font-mono)', fontSize:11, letterSpacing:'0.12em', color:'var(--ink-mute)', textTransform:'uppercase' },
  rsvp: { fontFamily:'var(--font-display)', fontSize:14, padding:'8px 14px', border:'3px solid var(--ink)', background:'var(--team-accent-soft)', color:'var(--ink)', boxShadow:'3px 3px 0 var(--ink)', cursor:'pointer' },
  sold: { fontFamily:'var(--font-mono)', fontWeight:700, fontSize:11, letterSpacing:'0.12em', color:'var(--foam)', background:'var(--team-accent)', padding:'6px 12px', transform:'rotate(-2deg)', display:'inline-block', whiteSpace:'nowrap' },
};

// ============ MENU STRIPE ==============================================
function MenuStripe() {
  const { team } = useTeam();
  const items = team === 'pivo'
    ? [ { num:1, name:'Plzeňské, studené', note:'0,5 l · z pípy, kterou jsme přivezli', price:'65 Kč' },
        { num:2, name:'Míchaná vejce na másle', note:'dvě vejce · špetka soli · domácí chleba', price:'120 Kč' } ]
    : [ { num:1, name:'Míchaná vejce na másle', note:'dvě vejce · špetka soli · domácí chleba', price:'120 Kč' },
        { num:2, name:'Plzeňské, studené', note:'0,5 l · z pípy, kterou jsme přivezli', price:'65 Kč' } ];
  return (
    <section style={msStyles.wrap} id="menu">
      <div style={msStyles.header}>
        <h2 style={msStyles.h2}>JÍDELNÍ LÍSTEK</h2>
        <span style={msStyles.cz}><em>{team === 'pivo' ? 'pivo první, vejce druhý' : 'vejce první, pivo druhý'}</em></span>
      </div>
      <div style={msStyles.items}>
        {items.map(it => (
          <div key={it.num} style={msStyles.item}>
            <div style={msStyles.n}>{it.num}</div>
            <div>
              <div style={msStyles.name}>{it.name}</div>
              <div style={msStyles.note}>{it.note}</div>
            </div>
            <div style={msStyles.price}>{it.price}</div>
          </div>
        ))}
      </div>
      <p style={msStyles.foot}>A to je vše. Žádnou třetí položku neschováváme. <em>Opravdu.</em></p>
    </section>
  );
}
const msStyles = {
  wrap: { background:'var(--shell-cool)', padding:'80px 48px', borderBottom:'6px solid var(--ink)' },
  header: { display:'flex', alignItems:'baseline', gap:18, marginBottom:40, flexWrap:'wrap' },
  h2: { fontFamily:'var(--font-display)', fontSize:'clamp(48px, 7vw, 72px)', color:'var(--ink)', letterSpacing:'-0.02em', margin:0, whiteSpace:'nowrap', flexShrink:0 },
  cz: { fontFamily:'var(--font-serif)', fontSize:22, color:'var(--team-accent)', fontStyle:'italic' },
  items: { display:'flex', flexDirection:'column', gap:0, border:'4px solid var(--ink)', background:'var(--foam)', boxShadow:'var(--sh-hard-lg)' },
  item: { display:'grid', gridTemplateColumns:'80px 1fr 140px', alignItems:'center', padding:'28px 28px', borderBottom:'2px solid var(--ink)', gap:20 },
  n: { fontFamily:'var(--font-display)', fontSize:56, color:'var(--team-accent)', lineHeight:0.9 },
  name: { fontFamily:'var(--font-serif)', fontStyle:'italic', fontWeight:900, fontSize:30, color:'var(--ink)' },
  note: { fontFamily:'var(--font-sans)', fontSize:14, color:'var(--ink-mute)', marginTop:4 },
  price: { fontFamily:'var(--font-mono)', fontWeight:700, fontSize:16, color:'var(--team-accent)', textAlign:'right' },
  foot: { fontFamily:'var(--font-serif)', fontStyle:'italic', fontSize:18, color:'var(--ink-mute)', marginTop:24, textAlign:'center' },
};

// ============ MERCH STRIP ==============================================
function MerchStrip() {
  const { team } = useTeam();
  const product = team === 'pivo'
    ? { name: 'Tričko „Plzeň navždy"', price: '680 Kč', glyph: '🍺', bg: 'var(--team-accent)', tag: 'TÝM PIVO', desc: 'Tmavě zelené, bavlněné, s kondenzovanou typografií. Voní pivem (po 3. vyprání jen mírně).' }
    : { name: 'Tričko „Vejce navždy"', price: '680 Kč', glyph: '◓', bg: 'var(--team-accent-soft)', tag: 'TÝM VEJCE', desc: 'Krémové, bavlněné, s tlustým ampersandem. Voní jen čistě (do 1. snídaně).' };
  return (
    <section style={mxStyles.wrap}>
      <div style={mxStyles.head}>
        <h2 style={mxStyles.h2}>MERCH PRO {team === 'pivo' ? 'TÝM PIVO' : 'TÝM VEJCE'}</h2>
        <em style={mxStyles.em}>vyber si stranu, vezmi si tričko</em>
      </div>
      <article style={mxStyles.card}>
        <div style={{...mxStyles.imgBox, background: product.bg}}>
          <div style={mxStyles.glyph}>{product.glyph}</div>
        </div>
        <div style={mxStyles.body}>
          <span style={mxStyles.tagPill}>{product.tag}</span>
          <h3 style={mxStyles.name}>{product.name}</h3>
          <p style={mxStyles.desc}>{product.desc}</p>
          <div style={mxStyles.row}>
            <span style={mxStyles.price}>{product.price}</span>
            <button style={mxStyles.btn}>DO KOŠÍKU →</button>
          </div>
        </div>
      </article>
    </section>
  );
}
const mxStyles = {
  wrap: { background:'var(--shell)', padding:'80px 48px', borderBottom:'6px solid var(--ink)' },
  head: { display:'flex', alignItems:'baseline', gap:18, marginBottom:36, flexWrap:'wrap' },
  h2: { fontFamily:'var(--font-display)', fontSize:'clamp(40px, 6vw, 60px)', color:'var(--ink)', letterSpacing:'-0.02em', margin:0, whiteSpace:'nowrap', flexShrink:0 },
  em: { fontFamily:'var(--font-serif)', fontSize:20, color:'var(--team-accent)' },
  card: { display:'grid', gridTemplateColumns:'1fr 1fr', border:'4px solid var(--ink)', background:'var(--foam)', boxShadow:'10px 10px 0 var(--team-accent)', overflow:'hidden' },
  imgBox: { aspectRatio:'1 / 1', display:'flex', alignItems:'center', justifyContent:'center', borderRight:'4px solid var(--ink)' },
  glyph: { fontSize:200, lineHeight:1 },
  body: { padding:'40px 36px', display:'flex', flexDirection:'column', gap:14, justifyContent:'center' },
  tagPill: { display:'inline-block', alignSelf:'flex-start', fontFamily:'var(--font-mono)', fontWeight:700, fontSize:11, letterSpacing:'0.16em', color:'var(--foam)', background:'var(--team-accent)', padding:'6px 12px', transform:'rotate(-2deg)' },
  name: { fontFamily:'var(--font-display)', fontSize:42, color:'var(--ink)', margin:0, letterSpacing:'-0.02em' },
  desc: { fontFamily:'var(--font-serif)', fontStyle:'italic', fontSize:17, color:'var(--ink-soft)', lineHeight:1.5, margin:0 },
  row: { display:'flex', alignItems:'center', gap:16, marginTop:8 },
  price: { fontFamily:'var(--font-mono)', fontWeight:700, fontSize:22, color:'var(--team-accent)' },
  btn: { fontFamily:'var(--font-display)', fontSize:16, padding:'14px 22px', border:'4px solid var(--ink)', background:'var(--team-accent-soft)', color:'var(--ink)', boxShadow:'5px 5px 0 var(--ink)', cursor:'pointer', letterSpacing:'0.02em' },
};

// ============ RSVP MODAL ================================================
function RSVPModal({ open, onClose }) {
  const [step, setStep] = useState('form');
  const [name, setName] = useState('');
  const [size, setSize] = useState(2);
  const [day, setDay] = useState('PÁ');
  if (!open) return null;
  const submit = (e) => { e.preventDefault(); setStep('done'); };
  const reset = () => { setStep('form'); setName(''); setSize(2); setDay('PÁ'); onClose(); };
  return (
    <div style={rmStyles.scrim} onClick={reset}>
      <div style={rmStyles.modal} onClick={e=>e.stopPropagation()}>
        <button onClick={reset} style={rmStyles.close}>×</button>
        {step === 'form' ? (
          <form onSubmit={submit} style={rmStyles.form}>
            <div style={rmStyles.eyebrow}>REZERVACE · POP-UP Č. 14</div>
            <h3 style={rmStyles.h3}>Schovejte mi <em>vejce</em>.</h3>
            <label style={rmStyles.field}><span style={rmStyles.lbl}>Jméno</span><input required value={name} onChange={e=>setName(e.target.value)} style={rmStyles.input} placeholder="Tomáš Novák"/></label>
            <label style={rmStyles.field}><span style={rmStyles.lbl}>Počet lidí</span><input type="number" min="1" max="6" value={size} onChange={e=>setSize(+e.target.value)} style={rmStyles.input}/></label>
            <div style={rmStyles.field}><span style={rmStyles.lbl}>Který den</span><div style={rmStyles.days}>{['PÁ','SO','NE'].map(d => (<button type="button" key={d} onClick={()=>setDay(d)} style={{...rmStyles.day, ...(day===d ? rmStyles.dayOn : {})}}>{d}</button>))}</div></div>
            <button type="submit" style={rmStyles.submit}>POTVRDIT →</button>
            <p style={rmStyles.fine}>Potvrzovací e-mail neposíláme. Prostě přijďte. Když nepřijdete, vaše vejce dostane někdo jiný. <em>Opravdu.</em></p>
          </form>
        ) : (
          <div style={rmStyles.done}>
            <img src="assets/stamp-approved.svg" style={{height:140, transform:'rotate(-6deg)'}}/>
            <h3 style={rmStyles.h3}>Děkujeme, {name || 'příteli'}.</h3>
            <p style={rmStyles.doneP}>Uvidíme se {day} · Karlín · 17:00. Stůl pro {size}.</p>
            <button onClick={reset} style={rmStyles.submit}>ZAVŘÍT</button>
          </div>
        )}
      </div>
    </div>
  );
}
const rmStyles = {
  scrim: { position:'fixed', inset:0, background:'rgba(26,22,19,0.4)', display:'flex', alignItems:'center', justifyContent:'center', zIndex:100, padding:20 },
  modal: { position:'relative', background:'var(--foam)', border:'4px solid var(--ink)', boxShadow:'8px 8px 0 var(--team-accent)', padding:'36px 32px', maxWidth:480, width:'100%' },
  close: { position:'absolute', top:10, right:14, background:'none', border:'none', fontSize:32, cursor:'pointer', color:'var(--ink)', lineHeight:1 },
  form: { display:'flex', flexDirection:'column', gap:18 },
  eyebrow: { fontFamily:'var(--font-mono)', fontSize:11, letterSpacing:'0.18em', color:'var(--team-accent)', fontWeight:700 },
  h3: { fontFamily:'var(--font-display)', fontSize:40, color:'var(--ink)', margin:0, letterSpacing:'-0.02em' },
  field: { display:'flex', flexDirection:'column', gap:6 },
  lbl: { fontFamily:'var(--font-mono)', fontSize:11, letterSpacing:'0.14em', textTransform:'uppercase', color:'var(--ink-mute)' },
  input: { fontFamily:'var(--font-sans)', fontSize:16, padding:'10px 14px', border:'3px solid var(--ink)', background:'var(--shell-cool)', color:'var(--ink)', boxShadow:'3px 3px 0 var(--ink)', outline:'none' },
  days: { display:'flex', gap:8 },
  day: { flex:1, fontFamily:'var(--font-mono)', fontWeight:700, fontSize:13, padding:'10px', border:'3px solid var(--ink)', background:'var(--shell-cool)', cursor:'pointer', letterSpacing:'0.12em', color:'var(--ink)' },
  dayOn: { background:'var(--ink)', color:'var(--team-accent-soft)' },
  submit: { fontFamily:'var(--font-display)', fontSize:18, padding:'14px', border:'4px solid var(--ink)', background:'var(--team-accent-soft)', color:'var(--ink)', boxShadow:'5px 5px 0 var(--ink)', cursor:'pointer', letterSpacing:'0.02em', marginTop:6 },
  fine: { fontFamily:'var(--font-serif)', fontStyle:'italic', fontSize:13, color:'var(--ink-mute)', marginTop:8, lineHeight:1.4 },
  done: { display:'flex', flexDirection:'column', alignItems:'center', gap:16, textAlign:'center' },
  doneP: { fontFamily:'var(--font-sans)', fontSize:16, color:'var(--ink-soft)', margin:0 },
};

// ============ FOOTER ===================================================
function Footer() {
  return (
    <footer style={ftStyles.wrap}>
      <div style={ftStyles.left}>
        <div style={ftStyles.big}>&amp;</div>
        <div>
          <div style={ftStyles.wm}>PIVO A VEJCE</div>
          <div style={ftStyles.tag}>založeno v Praze · dvě věci · navždy</div>
        </div>
      </div>
      <div style={ftStyles.right}>
        <a style={ftStyles.link} href="#">Instagram</a>
        <a style={ftStyles.link} href="#">Tisk</a>
        <a style={ftStyles.link} href="#">Merch</a>
        <a style={ftStyles.link} href="#">Napište nám</a>
      </div>
    </footer>
  );
}
const ftStyles = {
  wrap: { background:'var(--ink)', color:'var(--shell)', padding:'48px 48px', display:'flex', alignItems:'center', justifyContent:'space-between', gap:24, flexWrap:'wrap' },
  left: { display:'flex', alignItems:'center', gap:18 },
  big: { fontFamily:'var(--font-serif)', fontStyle:'italic', fontWeight:900, fontSize:96, color:'var(--team-accent-soft)', lineHeight:0.9 },
  wm: { fontFamily:'var(--font-display)', fontSize:26, color:'var(--shell)', letterSpacing:'-0.01em' },
  tag: { fontFamily:'var(--font-serif)', fontStyle:'italic', fontSize:14, color:'var(--shell-warm)', marginTop:4 },
  right: { display:'flex', gap:22, flexWrap:'wrap' },
  link: { fontFamily:'var(--font-sans)', fontSize:14, color:'var(--shell)', textDecoration:'none', textTransform:'uppercase', letterSpacing:'0.08em' },
};

// Expose useTeam under window.usePivoTeam for sibling files (intro.jsx)
window.usePivoTeam = useTeam;

Object.assign(window, { TeamProvider, useTeam, TeamToggle, ComingSoon, TopBar, Hero, PopupCard, MenuStripe, MerchStrip, RSVPModal, Footer });