// Signal family — 3 variants sharing one stark, single-accent system.
// Differences: field (light / dark / flooded), instrument, and grid hardness.
(() => {
const LANG = window.SITE_LANG === "en" ? "en" : "pl";
const C = (LANG === "en" && window.ZELCONTENT_EN) ? window.ZELCONTENT_EN : window.ZELCONTENT;
// Fallback PL (gdy strona nie ładuje content-en.js, np. podglądy robocze)
const L_FALLBACK = {
  navContact: "→ Kontakt", langLabel: "EN", langHref: "en.html",
  hero1: ["Przestań", "zgadywać."], hero2: ["Zacznij", "mierzyć."],
  caps: { c1: "Authorized SCA Trainer", c2: "miejsc na kurs", c3: "maks. dofinansowania", c4: "poziomy certyfikacji" },
  photo: "ZDJĘCIE", ctaPrimary: "Sprawdź dofinansowanie", ctaSecondary: "Zobacz kursy",
  sensoTitle: ["Sensoryka to", "świadomość."], brewTitle: ["Parzenie to", "powtarzalność."],
  certsLabel: "Certyfikaty", specLabel: "Specjalizacja",
  fundDo: "do", fundWord: "finansowania",
  b2bPre: "Szkolenia ", b2bIt: "in-house", b2bPost: " dla firm",
  who: "Dla kogo", about: "O czym", gain: "Co zyskujesz", enrol: "Zapisz się",
  levelsH: ["Poziomy.", "Foundation → Professional."], colTime: "Czas", colPre: "Wymagania", preRequired: "Wymagany", preAdvised: "Zalecany",
  contactH: ["Napisz.", "Odezwę się w 24 godz."], modalTitle: "Jak wolisz się skontaktować?", close: "Zamknij ✕",
  flavorIndex: "Flavor index · SCA Wheel",
  coursesPage: "kursy.html", detailsLabel: "Program kursu",
};
const L = Object.assign({}, L_FALLBACK, (window.ZEL_L || {})[LANG] || {});

const mono = "'JetBrains Mono', monospace";
const display = "'Archivo', sans-serif";
const serif = "'Fraunces', serif";
const ORANGE = "#4169FF"; // posterowy niebieski (historyczna nazwa stałej)

const T = {
  light: { bg:"#FAFAF7", ink:"#0A0A0A", muted:"#8A8A8A", line:"#0A0A0A16", panel:"#0A0A0A", panelInk:"#FAFAF7" },
  night: { bg:"#0A0A0A", ink:"#FAFAF7", muted:"#7E7E7E", line:"#FAFAF722", panel:"#FAFAF7", panelInk:"#0A0A0A" },
};

const Shell = ({t, children}) => <div style={{background:t.bg, color:t.ink, fontFamily:display, width:"100%", height:"100%"}}>{children}</div>;

// Treść trzyma szerokość projektu (1440), tła sekcji idą na pełny ekran.
const Inner = ({children, style}) => <div style={{maxWidth:1440, margin:"0 auto", ...style}}>{children}</div>;

const Mark = ({children, style}) => <div style={{fontFamily:mono, fontSize:11, letterSpacing:".3em", textTransform:"uppercase", color:ORANGE, ...style}}>{children}</div>;

const Reveal = ({children, delay=0}) => {
  const ref = React.useRef(null);
  const [on, setOn] = React.useState(false);
  React.useEffect(()=>{
    const el = ref.current; if(!el) return;
    const io = new IntersectionObserver(([e])=>{ if(e.isIntersecting){ setOn(true); io.disconnect(); } }, {threshold:.3});
    io.observe(el);
    return ()=>io.disconnect();
  },[]);
  return (
    <div ref={ref} style={{opacity: on?1:0, transform: on?"none":"translateY(24px)", transition:`opacity .7s ${delay}s cubic-bezier(.16,1,.3,1), transform .7s ${delay}s cubic-bezier(.16,1,.3,1)`}}>
      {children}
    </div>
  );
};

const Nav = ({t, wordmark="Capyberry"}) => (
  <div style={{padding:"14px 48px"}}>
  <Inner style={{display:"flex", justifyContent:"space-between", alignItems:"center"}}>
    <div style={{display:"flex", alignItems:"center", gap:12}}>
      <img src="public/capy-mark.png" alt="Capyexpert" style={{height:40, width:"auto", display:"block"}} onError={e=>{e.currentTarget.style.display="none";}}/>
      <div style={{fontFamily:display, fontSize:18, fontWeight:800, letterSpacing:"-.01em"}}>{wordmark}</div>
    </div>
    <div style={{display:"flex", gap:30, fontFamily:mono, fontSize:11, letterSpacing:".2em", textTransform:"uppercase"}}>
      {C.nav.map(n=><a key={n.id} href={`#${n.id}`} style={{color:t.ink, textDecoration:"none"}}>{n.label}</a>)}
    </div>
    <div style={{display:"flex", alignItems:"center", gap:26}}>
      <a href={L.langHref} style={{fontFamily:mono, fontSize:11, letterSpacing:".2em", textTransform:"uppercase", color:t.ink, textDecoration:"none", border:`1.5px solid ${t.ink}`, padding:"5px 10px"}}>{L.langLabel}</a>
      <a href="#kontakt" style={{fontFamily:mono, fontSize:11, letterSpacing:".2em", textTransform:"uppercase", color:ORANGE, textDecoration:"none"}}>{L.navContact}</a>
    </div>
  </Inner>
  </div>
);

// Instrument 1 — dial gauge
const Gauge = ({t, size=620, value=85}) => {
  const r = size/2, start=-210, end=30;
  const rad = (start+(end-start)*(value/100))*Math.PI/180;
  const arc = (from,to,ro,ri) => {
    const a0=(start+(end-start)*from)*Math.PI/180, a1=(start+(end-start)*to)*Math.PI/180;
    return `M ${r+ro*Math.cos(a0)} ${r+ro*Math.sin(a0)} A ${ro} ${ro} 0 0 1 ${r+ro*Math.cos(a1)} ${r+ro*Math.sin(a1)} L ${r+ri*Math.cos(a1)} ${r+ri*Math.sin(a1)} A ${ri} ${ri} 0 0 0 ${r+ri*Math.cos(a0)} ${r+ri*Math.sin(a0)} Z`;
  };
  return (
    <svg viewBox={`0 0 ${size} ${size}`} style={{width:"100%",height:"100%"}}>
      {Array.from({length:121}).map((_,i)=>{
        const a=(start+(end-start)*(i/120))*Math.PI/180, maj=i%10===0, mid=i%5===0, len=maj?24:(mid?14:6);
        return <line key={i} x1={r+(r-6)*Math.cos(a)} y1={r+(r-6)*Math.sin(a)} x2={r+(r-6-len)*Math.cos(a)} y2={r+(r-6-len)*Math.sin(a)} stroke={t.ink} strokeWidth={maj?2:1}/>;
      })}
      {[0,25,50,75,100].map(v=>{
        const a=(start+(end-start)*(v/100))*Math.PI/180;
        return <text key={v} x={r+(r-70)*Math.cos(a)} y={r+(r-70)*Math.sin(a)} textAnchor="middle" dominantBaseline="middle" fontFamily={mono} fontSize="18" fill={t.ink}>{v}</text>;
      })}
      <path d={arc(0,.25,r-36,r-46)} fill={t.muted} opacity=".35"/>
      <path d={arc(.7,1,r-36,r-46)} fill={ORANGE}/>
      <line x1={r} y1={r} x2={r+(r-80)*Math.cos(rad)} y2={r+(r-80)*Math.sin(rad)} stroke={ORANGE} strokeWidth="6" strokeLinecap="round"/>
      <circle cx={r} cy={r} r="16" fill={t.ink}/><circle cx={r} cy={r} r="6" fill={ORANGE}/>
      <text x={r} y={r-118} textAnchor="middle" fontFamily={display} fontWeight="800" fontSize="56" fill={t.ink} letterSpacing="-2">{value}</text>
      <text x={r} y={r+120} textAnchor="middle" fontFamily={mono} fontSize="12" fill={t.muted} letterSpacing="4">SENSORY CALIBRATION · %</text>
    </svg>
  );
};


// Instrument 3 — horizontal calibration scale (S3 · Block)
const Scale = ({t, w=680, h=260, value=85}) => {
  const base = h-46;
  return (
    <svg viewBox={`0 0 ${w} ${h}`} style={{width:"100%",height:"auto",overflow:"visible"}}>
      <text x={0} y={84} fontFamily={mono} fontSize="11" fill={t.muted} letterSpacing="4">SENSORY CALIBRATION · %</text>
      <line x1={0} y1={base} x2={w} y2={base} stroke={t.ink} strokeWidth="2"/>
      {Array.from({length:101}).map((_,i)=>{
        const maj=i%10===0, mid=i%5===0, len=maj?30:(mid?18:9);
        const x=(w/100)*i, filled=i<=value;
        return <line key={i} x1={x} y1={base} x2={x} y2={base-len} stroke={filled?ORANGE:t.ink} strokeWidth={maj?3:1.5} opacity={filled?1:(maj?1:.35)}/>;
      })}
      {[0,25,50,75,100].map(v=>{
        const x=(w/100)*v;
        return <text key={v} x={x} y={h-6} textAnchor="middle" fontFamily={mono} fontSize="10" fill={t.muted}>{v}</text>;
      })}
      <circle cx={(w/100)*value} cy={base-38} r="6" fill={ORANGE}/>
    </svg>
  );
};

// Instrument 2 — VU / level meter (bars)
const Meter = ({t, size=560}) => {
  const bars = 26;
  return (
    <svg viewBox={`0 0 ${size} ${size*0.62}`} style={{width:"100%",height:"100%"}}>
      {Array.from({length:bars}).map((_,i)=>{
        const h = 18 + Math.pow(i/bars, 1.7) * (size*0.42);
        const lit = i < bars*0.85;
        return <rect key={i} x={i*(size/bars)+3} y={size*0.56-h} width={size/bars-7} height={h} fill={lit?ORANGE:t.line} />;
      })}
      <line x1="0" y1={size*0.56+1} x2={size} y2={size*0.56+1} stroke={t.ink} strokeWidth="2"/>
      {[0,25,50,75,100].map(v=>(
        <text key={v} x={(v/100)*size} y={size*0.56+22} textAnchor={v===0?"start":v===100?"end":"middle"} fontFamily={mono} fontSize="12" fill={t.muted} letterSpacing="2">{v}</text>
      ))}
      <text x={size} y={22} textAnchor="end" fontFamily={mono} fontSize="12" fill={ORANGE} letterSpacing="3">PEAK 85 · CALIBRATED</text>
    </svg>
  );
};

const FlavorWheel = ({t, size=240}) => {
  const cx=size/2, cy=size/2, r=size/2-3, ri=size*0.2;
  const segs=C.flavors, n=segs.length;
  const arc=(i)=>{
    const a0=(i/n)*2*Math.PI-Math.PI/2, a1=((i+1)/n)*2*Math.PI-Math.PI/2;
    const x0=cx+r*Math.cos(a0), y0=cy+r*Math.sin(a0), x1=cx+r*Math.cos(a1), y1=cy+r*Math.sin(a1);
    const xi0=cx+ri*Math.cos(a1), yi0=cy+ri*Math.sin(a1), xi1=cx+ri*Math.cos(a0), yi1=cy+ri*Math.sin(a0);
    return `M ${x0} ${y0} A ${r} ${r} 0 0 1 ${x1} ${y1} L ${xi0} ${yi0} A ${ri} ${ri} 0 0 0 ${xi1} ${yi1} Z`;
  };
  return (
    <svg viewBox={`0 0 ${size} ${size}`} style={{width:"100%", height:"auto", display:"block"}}>
      {segs.map((f,i)=><path key={f.name} d={arc(i)} fill={f.color} stroke={t.bg} strokeWidth="2.5"/>)}
      <circle cx={cx} cy={cy} r={ri-7} fill="none" stroke={t.ink} strokeWidth="2"/>
    </svg>
  );
};

const FlavorWheelArt = ({t}) => {
  const [failed, setFailed] = React.useState(0); // 0: svg, 1: png, 2: rysowane kółko
  if (failed >= 2) return <FlavorWheel t={t} size={240}/>;
  const src = failed === 0 ? "public/flavor-wheel.svg" : "public/flavor-wheel.png";
  return <img src={src} alt="Koło smaków" onError={()=>setFailed(f=>f+1)} style={{width:"100%", height:"auto", display:"block"}}/>;
};

const FlavorIndex = ({t}) => (
  <div style={{width:"100%"}}>
    <div style={{fontFamily:mono, fontSize:11, letterSpacing:".25em", textTransform:"uppercase", color:t.muted, marginBottom:14}}>{L.flavorIndex}</div>
    {C.flavors.map(f=>(
      <div key={f.name} style={{display:"flex", alignItems:"center", gap:14, padding:"9px 0", borderTop:`1px solid ${t.line}`}}>
        <span style={{width:16, height:16, background:f.color, flex:"none"}}/>
        <span style={{fontFamily:display, fontSize:15, fontWeight:700, textTransform:"uppercase", letterSpacing:".02em", flex:"none", width:104}}>{f.name}</span>
        <span style={{fontFamily:mono, fontSize:10, letterSpacing:".06em", color:t.muted, textTransform:"uppercase"}}>{f.items.join(" · ")}</span>
      </div>
    ))}
  </div>
);

const StatRow = ({t, label, value, accent}) => (
  <div style={{display:"flex", justifyContent:"space-between", padding:"22px 0", borderTop:`1px solid ${t.ink}`, alignItems:"baseline"}}>
    <span style={{fontFamily:mono, fontSize:12, letterSpacing:".2em", textTransform:"uppercase", color:t.muted}}>{label}</span>
    <span style={{fontFamily:display, fontSize:28, fontWeight:700, letterSpacing:"-.01em", color:accent?ORANGE:t.ink}}>{value}</span>
  </div>
);

// ── shared lower sections ─────────────────────────────────────────
const Trainer = ({t}) => (
  <div id="trainer" style={{padding:"100px 48px", borderTop:`2px solid ${t.ink}`}}>
  <Inner style={{display:"grid", gridTemplateColumns:"1fr 1.5fr", gap:56}}>
    <div>
      <Mark style={{marginBottom:16, fontSize:16}}>Trainer</Mark>
      <div style={{aspectRatio:"3/4", background:t.panel, position:"relative", overflow:"hidden"}}>
        <div style={{position:"absolute", inset:0, display:"flex", alignItems:"center", justifyContent:"center", fontFamily:mono, fontSize:11, color:t.muted, letterSpacing:".3em"}}>[ ZDJĘCIE ]</div>
        <img src="public/trainer.jpg" alt="Maryia Zeliankova — trenerka SCA" onError={e=>{e.currentTarget.style.display="none";}} style={{position:"absolute", inset:0, width:"100%", height:"100%", objectFit:"cover", transform:"scale(1.45)", transformOrigin:"38% 40%"}}/>
        <div style={{position:"absolute", top:16, left:16, fontFamily:mono, fontSize:10, color:ORANGE, letterSpacing:".2em"}}>● MZ.01</div>
      </div>
    </div>
    <div>
      <h2 style={{fontFamily:display, fontSize:54, fontWeight:800, lineHeight:1.05, letterSpacing:"-.02em", margin:0}}>Maryia Zeliankova</h2>
      <p style={{fontFamily:display, fontSize:27, fontWeight:400, fontStyle:"italic", lineHeight:1.3, letterSpacing:"-.01em", margin:"30px 0 0", maxWidth:720, borderLeft:`4px solid ${ORANGE}`, paddingLeft:22}}>
        „{C.trainer.quote}"
      </p>
      <div style={{marginTop:36, maxWidth:760}}>
        {C.trainer.about.map((s,i)=>(
          <Reveal key={i} delay={i*0.18}>
            <p style={{fontFamily:display, fontSize:19, lineHeight:1.5, margin:0, padding:"14px 0", borderTop:`1px solid ${t.line}`}}>{s}</p>
          </Reveal>
        ))}
      </div>
      <div style={{marginTop:44, display:"grid", gridTemplateColumns:"1fr 1fr", gap:36}}>
        <div>
          <div style={{fontFamily:mono, fontSize:11, letterSpacing:".2em", textTransform:"uppercase", color:t.muted, marginBottom:12}}>{L.certsLabel}</div>
          {C.trainer.certs.map(c=><div key={c} style={{padding:"13px 0", borderTop:`1px solid ${t.line}`, fontFamily:display, fontSize:17, fontWeight:500}}>{c}</div>)}
        </div>
        <div>
          <div style={{fontFamily:mono, fontSize:11, letterSpacing:".2em", textTransform:"uppercase", color:t.muted, marginBottom:12}}>{L.specLabel}</div>
          {C.trainer.spec.map(c=><div key={c} style={{padding:"13px 0", borderTop:`1px solid ${t.line}`, fontFamily:display, fontSize:17, fontWeight:500}}>{c}</div>)}
        </div>
      </div>
      <div style={{marginTop:44, paddingTop:24, borderTop:`1px solid ${t.line}`, display:"flex", alignItems:"center", gap:44, flexWrap:"wrap"}}>
        <img src="public/ast-logo.png" alt="Authorized SCA Trainer" style={{height:104, width:"auto", display:"block"}} onError={e=>{const el=e.currentTarget; if(!el.dataset.fb){el.dataset.fb=1; el.src="public/ast-mark.png";} else {el.style.display="none";}}}/>
        <img src="public/csp-skills.png" alt="Coffee Skills Program" style={{height:92, width:"auto", display:"block"}} onError={e=>{const el=e.currentTarget; if(!el.dataset.fb){el.dataset.fb=1; el.src="public/csp-program.png";} else {el.style.display="none";}}}/>
        {["sensory","brewing","roasting"].map(m=>(
          <img key={m} src={`public/module-${m}.png`} alt={`SCA ${m} module`} style={{height:96, width:"auto", display:"block"}} onError={e=>{e.currentTarget.style.display="none";}}/>
        ))}
      </div>
    </div>
  </Inner>
  </div>
);

const Sensoryka = ({t, mobile}) => (
  <div id="sensoryka" style={{padding: mobile?"48px 20px":"100px 48px"}}>
    <Inner>
    <div style={{fontFamily:mono, fontSize: mobile?10:11, letterSpacing:".22em", textTransform:"uppercase", color:t.muted, marginBottom: mobile?10:14}}>{C.sensoryka.kicker}</div>
    <h2 style={{fontFamily:display, fontSize: mobile?44:110, fontWeight:900, lineHeight:.9, letterSpacing:"-.045em", textTransform:"uppercase", margin:0}}>
      {L.sensoTitle[0]}<br/><span style={{color:ORANGE, fontStyle:"italic", fontWeight:400, display:"inline-block", marginLeft: mobile?"16%":"30%"}}>{L.sensoTitle[1]}</span>
    </h2>
    <div style={{marginTop: mobile?20:44, display:"grid", gridTemplateColumns: mobile?"1fr":"1fr 1fr", gap: mobile?16:44, maxWidth: mobile?"100%":980, marginLeft:"auto"}}>
      {C.sensoryka.body.map((p,i)=>(
        <p key={i} style={{fontFamily:display, fontSize: mobile?15:21, lineHeight:1.5, margin:0, borderTop:`1px solid ${t.line}`, paddingTop: mobile?14:20}}>{p}</p>
      ))}
    </div>
    </Inner>
  </div>
);

const Brewing = ({t, mobile}) => (
  <div style={{padding: mobile?"48px 20px":"100px 48px", background:t.panel, color:t.panelInk}}>
    <Inner>
    <div style={{fontFamily:mono, fontSize: mobile?10:11, letterSpacing:".22em", textTransform:"uppercase", color:"#8A8A8A", marginBottom: mobile?10:14}}>{C.brewing.kicker}</div>
    <h2 style={{fontFamily:display, fontSize: mobile?44:110, fontWeight:900, lineHeight:.9, letterSpacing:"-.045em", textTransform:"uppercase", margin:0}}>
      {L.brewTitle[0]}<br/><span style={{color:ORANGE, fontStyle:"italic", fontWeight:400, display:"inline-block", marginLeft: mobile?"16%":"30%"}}>{L.brewTitle[1]}</span>
    </h2>
    <div style={{marginTop: mobile?20:44, display:"grid", gridTemplateColumns: mobile?"1fr":"1fr 1fr", gap: mobile?16:44, maxWidth: mobile?"100%":980, marginLeft:"auto"}}>
      {C.brewing.body.map((p,i)=>(
        <p key={i} style={{fontFamily:display, fontSize: mobile?15:21, lineHeight:1.5, margin:0, borderTop:"1px solid rgba(250,250,247,.25)", paddingTop: mobile?14:20}}>{p}</p>
      ))}
    </div>
    </Inner>
  </div>
);

const B2B = ({t, mobile, onSignUp}) => (
  <div style={{padding: mobile?"48px 20px":"84px 48px", background:ORANGE, color:"#FAFAF7"}}>
    <Inner>
    <Mark style={{marginBottom: mobile?14:16, color:"rgba(250,250,247,.8)"}}>In-house</Mark>
    <h2 style={{fontFamily:display, fontSize: mobile?38:84, fontWeight:900, lineHeight:.98, letterSpacing:"-.01em", textTransform:"uppercase", margin:0}}>
      {L.b2bPre}<span style={{fontFamily:serif, fontStyle:"italic", fontWeight:500, textTransform:"none", letterSpacing:"0"}}>{L.b2bIt}</span>{L.b2bPost}
    </h2>
    <p style={{fontFamily:display, fontSize: mobile?15:22, lineHeight:1.4, margin: mobile?"14px 0 0":"22px 0 0", maxWidth:860}}>{C.b2b.sub}</p>
    <div style={{marginTop: mobile?18:34, display:"flex", flexWrap:"wrap", gap: mobile?8:12}}>
      {C.b2b.segments.map(s=>(
        <span key={s} style={{fontFamily:mono, fontSize: mobile?10:12, letterSpacing:".14em", textTransform:"uppercase", border:"2px solid #FAFAF7", padding: mobile?"8px 12px":"12px 18px"}}>{s}</span>
      ))}
    </div>
    <a onClick={onSignUp} style={{display:"inline-flex", marginTop: mobile?20:36, padding: mobile?"14px 20px":"18px 28px", background:"#0A0A0A", color:"#FAFAF7", fontFamily:mono, fontSize: mobile?11:12, fontWeight:700, letterSpacing:".2em", textTransform:"uppercase", textDecoration:"none", gap:12, cursor:"pointer"}}>{C.b2b.cta} <span>→</span></a>
    </Inner>
  </div>
);

const Funding = ({t, invert}) => {
  const bg = invert ? t.panel : t.bg, fg = invert ? t.panelInk : t.ink;
  const mut = invert ? (t===T.light ? "#999" : "#777") : t.muted;
  const ln = invert ? (t===T.light ? "#222" : "#ddd") : t.line;
  return (
    <div id="cofin" style={{padding:"100px 48px", background:bg, color:fg}}>
      <Inner>
      <Mark style={{marginBottom:16}}>Funding</Mark>
      <h2 style={{fontFamily:display, fontSize:230, fontWeight:900, lineHeight:.92, letterSpacing:"-.02em", margin:"0 0 36px"}}>
        <span style={{fontFamily:serif, fontStyle:"italic", fontWeight:400, fontSize:96, letterSpacing:"0"}}>{L.fundDo}</span> <span style={{color:ORANGE}}>100%</span> <span style={{fontFamily:serif, fontStyle:"italic", fontWeight:400, fontSize:92, letterSpacing:"0"}}>{L.fundWord}</span>
      </h2>
      <p style={{fontFamily:display, fontSize:23, lineHeight:1.4, maxWidth:900, margin:"0 0 56px"}}>{C.cofin.sub}</p>
      <div style={{display:"grid", gridTemplateColumns:"repeat(3,1fr)", gap:44}}>
        {C.cofin.sizes.map(s=>{
          const pct = parseInt(s.pct.replace(/\D/g,""));
          return <div key={s.id}>
            <div style={{display:"flex", justifyContent:"space-between", fontFamily:mono, fontSize:12, letterSpacing:".12em", textTransform:"uppercase", marginBottom:8}}>
              <span>{s.label}</span><span style={{color:ORANGE, fontWeight:700}}>{s.pct}</span>
            </div>
            <div style={{height:4, background:ln}}><div style={{width:`${pct}%`, height:"100%", background:ORANGE}}/></div>
          </div>;
        })}
      </div>
      <div style={{display:"grid", gridTemplateColumns:"repeat(4,1fr)", gap:28, marginTop:72}}>
        {C.cofin.steps.map((s,i)=>(
          <div key={i} style={{borderTop:`1px solid ${ln}`, paddingTop:22}}>
            <div style={{fontFamily:display, fontSize:46, fontWeight:900, color:ORANGE, lineHeight:1}}>{s.n}</div>
            <div style={{fontFamily:display, fontSize:20, fontWeight:700, textTransform:"uppercase", letterSpacing:"-.01em", marginTop:14}}>{s.t}</div>
            <div style={{fontFamily:mono, fontSize:11, color:mut, marginTop:6, letterSpacing:".08em"}}>{s.d}</div>
          </div>
        ))}
      </div>
      </Inner>
    </div>
  );
};

const SignUpModal = ({open, onClose, t}) => {
  if (!open) return null;
  const email = C.contact.links.find(l=>l.kind==="email");
  const ig = C.contact.links.find(l=>l.kind==="instagram");
  return ReactDOM.createPortal(
    <div onClick={onClose} style={{position:"fixed", inset:0, background:"rgba(10,10,10,.72)", display:"flex", alignItems:"center", justifyContent:"center", zIndex:100, padding:20}}>
      <div onClick={e=>e.stopPropagation()} style={{background:t.bg, color:t.ink, border:`2px solid ${t.ink}`, maxWidth:520, width:"100%", padding:40}}>
        <div style={{fontFamily:mono, fontSize:11, letterSpacing:".25em", textTransform:"uppercase", color:ORANGE, marginBottom:16}}>{L.enrol}</div>
        <h3 style={{fontFamily:display, fontSize:30, fontWeight:900, letterSpacing:"-.03em", textTransform:"uppercase", margin:"0 0 24px"}}>{L.modalTitle}</h3>
        <a href={email.href} style={{display:"flex", justifyContent:"space-between", alignItems:"center", padding:"22px 0", borderTop:`2px solid ${t.ink}`, color:t.ink, textDecoration:"none"}}>
          <span style={{fontFamily:display, fontSize:24, fontWeight:800}}>E-mail</span><span style={{color:ORANGE, fontSize:28}}>→</span>
        </a>
        <a href={ig.href} target="_blank" rel="noopener noreferrer" style={{display:"flex", justifyContent:"space-between", alignItems:"center", padding:"22px 0", borderTop:`2px solid ${t.ink}`, borderBottom:`2px solid ${t.ink}`, color:t.ink, textDecoration:"none"}}>
          <span style={{fontFamily:display, fontSize:24, fontWeight:800}}>Instagram</span><span style={{color:ORANGE, fontSize:28}}>→</span>
        </a>
        <button onClick={onClose} style={{marginTop:22, background:"none", border:"none", fontFamily:mono, fontSize:11, letterSpacing:".2em", textTransform:"uppercase", color:t.muted, cursor:"pointer", padding:0}}>{L.close}</button>
      </div>
    </div>,
    document.body
  );
};

const Courses = ({t, onSignUp}) => (
  <div id="kursy" style={{padding:"100px 48px"}}>
    <Inner>
    <Mark style={{marginBottom:16}}>Curriculum</Mark>
    <h2 style={{fontFamily:display, fontSize:92, fontWeight:900, lineHeight:.9, letterSpacing:"-.045em", textTransform:"uppercase", margin:"0 0 44px"}}>
      Sensory Skills.<br/><span style={{color:ORANGE}}>Brewing Skills.</span>
    </h2>
    <div style={{display:"grid", gridTemplateColumns:"minmax(0,1fr) minmax(0,1fr)", gap:24}}>
      {C.courses.map((c,i)=>{
        const flood = i===1;
        return (
          <div key={c.name} style={{background: flood?ORANGE:t.bg, color: flood?"#0A0A0A":t.ink, border: flood?"none":`2px solid ${t.ink}`, padding:38, display:"flex", flexDirection:"column"}}>
            <div style={{display:"flex", justifyContent:"space-between", alignItems:"center", fontFamily:mono, fontSize:11, letterSpacing:".2em", textTransform:"uppercase", marginBottom:28}}>
              <img src={`public/module-${c.code==="SS"?"sensory":"brewing"}.png`} alt={c.code} style={{height:46, width:"auto", display:"block", flex:"none"}} onError={e=>{e.currentTarget.style.display="none";}}/>
              <span>{c.levels}</span>
            </div>
            <h3 style={{fontFamily:display, fontSize:64, fontWeight:900, letterSpacing:"-.045em", textTransform:"uppercase", margin:"0 0 4px", lineHeight:.92}}>{c.name}</h3>
            {[[L.who,c.who],[L.about,c.what],[L.gain,c.gain]].map(([l,tx])=>(
              <div key={l} style={{padding:"17px 0", borderTop:`1px solid ${flood?"rgba(0,0,0,.22)":t.line}`, marginTop:17}}>
                <div style={{fontFamily:mono, fontSize:11, fontWeight:700, letterSpacing:".22em", textTransform:"uppercase", opacity:.95, marginBottom:6}}>{l}</div>
                <div style={{fontFamily:display, fontSize:15, lineHeight:1.55}}>{tx}</div>
              </div>
            ))}
            <div style={{marginTop:"auto", paddingTop:26, display:"flex", gap:14, flexWrap:"wrap", alignItems:"center"}}>
              <a onClick={onSignUp} style={{display:"inline-flex", padding:"16px 24px", background: flood?"#0A0A0A":ORANGE, color:"#FAFAF7", fontFamily:mono, fontSize:12, fontWeight:700, letterSpacing:".2em", textTransform:"uppercase", textDecoration:"none", gap:12, cursor:"pointer"}}>{L.enrol} <span>→</span></a>
              <a href={`${L.coursesPage}#${c.code==="SS"?"sensory":"brewing"}`} style={{display:"inline-flex", padding:"14px 22px", border:`2px solid ${flood?"#0A0A0A":t.ink}`, color: flood?"#0A0A0A":t.ink, fontFamily:mono, fontSize:12, fontWeight:700, letterSpacing:".2em", textTransform:"uppercase", textDecoration:"none", gap:12}}>{L.detailsLabel} <span>→</span></a>
            </div>
          </div>
        );
      })}
    </div>
    {/* rozpiska szczegółowa — cel dla „Zobacz kursy” */}
    <div style={{marginTop:72, paddingTop:56, borderTop:`2px solid ${t.ink}`}}>
      <h3 style={{fontFamily:display, fontSize:56, fontWeight:900, lineHeight:.94, letterSpacing:"-.04em", textTransform:"uppercase", margin:"0 0 20px"}}>
        {L.levelsH[0]}<br/><span style={{color:"#2FBF5B"}}>Foundation</span> <span>→</span> <span style={{color:"#D92D20"}}>Professional.</span>
      </h3>
      <p style={{fontFamily:display, fontSize:21, lineHeight:1.4, maxWidth:820, margin:"0 0 40px", color:t.muted}}>{C.courseDetail.intro}</p>

      <div style={{display:"grid", gridTemplateColumns:"repeat(3,1fr)", border:`2px solid ${t.ink}`}}>
        {C.courseDetail.rows.map((r,i)=>(
          <div key={r.level} style={{padding:"30px 28px", borderRight: i<2?`2px solid ${t.ink}`:"none", display:"flex", flexDirection:"column", gap:18}}>
            <div style={{display:"flex", justifyContent:"space-between", alignItems:"baseline"}}>
              <span style={{fontFamily:display, fontSize:26, fontWeight:900, letterSpacing:"-.02em", textTransform:"uppercase", color:{Foundation:"#2FBF5B", Intermediate:"#F97316", Professional:"#D92D20"}[r.level]||t.ink}}>{r.level}</span>
              <span style={{fontFamily:display, fontSize:22, fontWeight:800, color:ORANGE}}>{r.pts}</span>
            </div>
            <div style={{display:"grid", gridTemplateColumns:"104px 1fr", rowGap:8, columnGap:14, fontFamily:mono, fontSize:12}}>
              <span style={{color:t.muted, textTransform:"uppercase", letterSpacing:".14em"}}>{L.colTime}</span><span>{r.days}</span>
              <span style={{color:t.muted, textTransform:"uppercase", letterSpacing:".14em"}}>{L.colPre}</span><span style={r.pre.startsWith(L.preRequired)?{fontWeight:700, color:"#D92D20"}: r.pre.startsWith(L.preAdvised)?{fontWeight:700, color:"#D97706"}:undefined}>{r.pre}</span>
            </div>
          </div>
        ))}
      </div>

      <p style={{fontFamily:mono, fontSize:12, lineHeight:1.7, letterSpacing:".04em", color:t.muted, margin:"24px 0 0", maxWidth:820}}>{C.courseDetail.note}</p>
    </div>
    </Inner>
  </div>
);

const Dates = ({t, onSignUp}) => (
  <div id="terminy" style={{padding:"100px 48px", borderTop:`2px solid ${t.ink}`}}>
    <Inner>
    <Mark style={{marginBottom:16}}>Schedule</Mark>
    <p style={{fontFamily:display, fontSize:16, color:t.muted, margin:"0 0 32px", maxWidth:640}}>{C.datesNote}</p>
    {C.dates.map((d,i)=>(
      <a key={i} onClick={onSignUp} style={{display:"grid", gridTemplateColumns:"78px 2fr 1fr 1fr 190px 56px", gap:16, padding:"38px 0", borderTop:`1px solid ${t.ink}`, alignItems:"center", textDecoration:"none", color:t.ink, cursor: onSignUp?"pointer":"default"}}>
        <span style={{fontFamily:display, fontSize:54, fontWeight:900, color:ORANGE, letterSpacing:"-.03em", lineHeight:1}}>{String(i+1).padStart(2,"0")}</span>
        <span style={{fontFamily:display, fontSize:27, fontWeight:700, letterSpacing:"-.02em", textTransform:"uppercase"}}>{d.name}</span>
        <span style={{fontFamily:display, fontSize:19, fontWeight:500}}>{d.date}</span>
        <span style={{fontFamily:mono, fontSize:12, letterSpacing:".15em", textTransform:"uppercase", color:t.muted}}>{d.loc}</span>
        <span style={{display:"flex", gap:6}}>
          {Array.from({length:d.total}).map((_,k)=>(<span key={k} style={{width:14, height:14, background: k<d.total-d.spots?ORANGE:t.line}}/>))}
        </span>
        <span style={{fontSize:38, color:ORANGE}}>→</span>
      </a>
    ))}
    </Inner>
  </div>
);

const IconIG = ({s=26}) => (
  <svg width={s} height={s} viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2" style={{display:"block"}}>
    <rect x="3" y="3" width="18" height="18" rx="5"/><circle cx="12" cy="12" r="4"/><circle cx="17.2" cy="6.8" r="1.3" fill="currentColor" stroke="none"/>
  </svg>
);
const IconMail = ({s=26}) => (
  <svg width={s} height={s} viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2" style={{display:"block"}}>
    <rect x="3" y="5" width="18" height="14" rx="2"/><path d="M3 7.5l9 6 9-6"/>
  </svg>
);

const Contact = ({t, size=210}) => (
  <div id="kontakt" style={{padding:"120px 48px 56px"}}>
    <Inner>
    <h2 style={{fontFamily:display, fontSize:size*0.85, fontWeight:900, lineHeight:1.02, letterSpacing:"-.02em", textTransform:"uppercase", margin:"0 0 56px"}}>
      {L.contactH[0]}<br/><span style={{color:ORANGE}}>{L.contactH[1]}</span>
    </h2>
    {C.contact.links.map((l)=>(
      <a key={l.kind} href={l.href} target={l.kind==="instagram"?"_blank":undefined} rel="noopener noreferrer" style={{display:"grid", gridTemplateColumns:"200px 1fr auto", gap:36, padding:"30px 0", borderTop:`2px solid ${t.ink}`, alignItems:"center", color:t.ink, textDecoration:"none"}}>
        <span style={{display:"flex", alignItems:"center", gap:12, fontFamily:mono, fontSize:13, letterSpacing:".2em", textTransform:"uppercase", color:ORANGE}}>
          {l.kind==="instagram" ? <IconIG/> : <IconMail/>} {l.kind==="instagram" ? "ig:" : "mail:"}
        </span>
        <span style={{fontFamily:display, fontSize:46, fontWeight:800, letterSpacing:"-.02em"}}>{l.label}</span>
        <span style={{fontSize:46, color:ORANGE}}>→</span>
      </a>
    ))}
    <div style={{borderTop:`1px solid ${t.ink}`, paddingTop:14, display:"flex", justifyContent:"space-between", fontFamily:mono, fontSize:10, letterSpacing:".2em", textTransform:"uppercase", color:t.muted}}>
      <span>CAPYEXPERT · MMXXVI</span><span>Warszawa · PL</span>
    </div>
    </Inner>
  </div>
);

// ── S1 · GAUGE — white field, dial instrument, huge stacked type ────
window.SignalGauge = () => {
  const t = T.light;
  return (
    <Shell t={t}>
      <Nav t={t}/>
      <div style={{padding:"76px 48px 56px", display:"grid", gridTemplateColumns:"1fr 1fr", gap:56, alignItems:"center"}}>
        <div>
          <Mark style={{marginBottom:36}}>01 — Signal</Mark>
          <h1 style={{fontFamily:display, fontSize:176, fontWeight:900, lineHeight:.82, letterSpacing:"-.055em", textTransform:"uppercase", margin:0}}>Przestań<br/>zgadywać.</h1>
          <h1 style={{fontFamily:display, fontSize:116, fontWeight:400, fontStyle:"italic", lineHeight:.9, letterSpacing:"-.04em", textTransform:"uppercase", margin:"14px 0 0", color:ORANGE}}>Zacznij mierzyć.</h1>
        </div>
        <Gauge t={t} size={620} value={85}/>
      </div>
      <div style={{padding:"0 48px 56px", maxWidth:1100}}>
        <p style={{fontFamily:display, fontSize:31, lineHeight:1.3, fontWeight:400, letterSpacing:"-.01em", margin:0}}>
          Certyfikowane szkolenia sensoryczne <span style={{color:ORANGE, fontWeight:700}}>SCA</span> z dofinansowaniem do <span style={{color:ORANGE, fontWeight:700}}>100%</span>. Sprawdzam program, ogarniam formalności. Ty tylko przychodzisz na kurs.
        </p>
      </div>
      <div style={{padding:"0 48px 76px", display:"flex", gap:16}}>
        <a style={{flex:1, padding:"38px 32px", background:ORANGE, color:t.bg, fontFamily:display, fontSize:35, fontWeight:800, letterSpacing:"-.02em", textTransform:"uppercase", textDecoration:"none", display:"flex", justifyContent:"space-between", alignItems:"center"}}>
          <span>Sprawdź dofinansowanie</span><span style={{fontSize:46}}>→</span>
        </a>
        <a style={{padding:"38px 32px", background:t.ink, color:t.bg, fontFamily:display, fontSize:27, fontWeight:700, textTransform:"uppercase", textDecoration:"none", display:"flex", alignItems:"center", gap:22}}><span>Kursy</span><span>→</span></a>
      </div>
      <div style={{padding:"0 48px 76px", borderBottom:`2px solid ${t.ink}`}}>
        <StatRow t={t} label="Poziom certyfikacji" value="Authorized SCA Trainer" accent/>
        <StatRow t={t} label="Maks. osób w grupie" value="6"/>
        <StatRow t={t} label="Maks. dofinansowania" value="100%" accent/>
        <StatRow t={t} label="Poziomy kursów" value="Intermediate · Professional"/>
        <StatRow t={t} label="Lokalizacja" value="Warszawa, PL"/>
      </div>
      <Trainer t={t}/><Funding t={t} invert/><Courses t={t}/><Dates t={t}/><Contact t={t} size={210}/>
    </Shell>
  );
};

// ── S2 · NIGHT — inverted field, level meter, orange glows ──────────
window.SignalNight = () => {
  const t = T.night;
  return (
    <Shell t={t}>
      <div style={{padding:"8px 48px", borderBottom:`1px solid ${t.line}`, display:"flex", justifyContent:"space-between", fontFamily:mono, fontSize:10, letterSpacing:".25em", textTransform:"uppercase", color:t.muted}}>
        <span>Warszawa · 52.23°N 21.01°E</span><span style={{color:ORANGE}}>● Zapisy otwarte</span><span>Signal · 2026.1</span>
      </div>
      <Nav t={t}/>
      <div style={{padding:"84px 48px 48px"}}>
        <Mark style={{marginBottom:32}}>01 — Signal</Mark>
        <h1 style={{fontFamily:display, fontSize:212, fontWeight:900, lineHeight:.82, letterSpacing:"-.06em", textTransform:"uppercase", margin:0}}>
          Przestań<br/>zgadywać.
        </h1>
        <h1 style={{fontFamily:display, fontSize:132, fontWeight:400, fontStyle:"italic", lineHeight:.9, letterSpacing:"-.045em", textTransform:"uppercase", margin:"18px 0 0", color:ORANGE}}>
          Zacznij mierzyć.
        </h1>
        <div style={{marginTop:52, display:"grid", gridTemplateColumns:"1.15fr 1fr", gap:56, alignItems:"end"}}>
          <div>
            <p style={{fontFamily:display, fontSize:29, lineHeight:1.3, fontWeight:400, letterSpacing:"-.01em", margin:0}}>
              Certyfikowane szkolenia sensoryczne <span style={{color:ORANGE, fontWeight:700}}>SCA</span> z dofinansowaniem do <span style={{color:ORANGE, fontWeight:700}}>100%</span>. Sprawdzam program, ogarniam formalności.
            </p>
            <div style={{marginTop:34, display:"flex", gap:14}}>
              <a style={{padding:"26px 30px", background:ORANGE, color:"#0A0A0A", fontFamily:display, fontSize:24, fontWeight:800, textTransform:"uppercase", letterSpacing:"-.01em", textDecoration:"none", display:"inline-flex", gap:18, alignItems:"center"}}>Sprawdź dofinansowanie <span>→</span></a>
              <a style={{padding:"26px 30px", border:`2px solid ${t.ink}`, color:t.ink, fontFamily:display, fontSize:24, fontWeight:700, textTransform:"uppercase", textDecoration:"none"}}>Kursy →</a>
            </div>
          </div>
          <div><Meter t={t} size={560}/></div>
        </div>
      </div>
      <div style={{padding:"0 48px 84px"}}>
        <StatRow t={t} label="Poziom certyfikacji" value="Authorized SCA Trainer" accent/>
        <StatRow t={t} label="Maks. osób w grupie" value="6"/>
        <StatRow t={t} label="Maks. dofinansowania" value="100%" accent/>
        <StatRow t={t} label="Poziomy kursów" value="Intermediate · Professional"/>
      </div>
      <Trainer t={t}/><Funding t={t}/><Courses t={t}/><Dates t={t}/><Contact t={t} size={190}/>
    </Shell>
  );
};

// ── S3 · BLOCK — orange floods the field; hard modular grid ─────────
window.SignalBlock = () => {
  const t = T.light;
  const [signupOpen, setSignupOpen] = React.useState(false);
  return (
    <Shell t={t}>
      <Nav t={t}/>
      {/* flooded hero band */}
      <div style={{background:ORANGE, color:"#FAFAF7", padding:"64px 48px 56px"}}>
        <Inner>
        <h1 style={{fontFamily:display, fontSize:196, fontWeight:900, lineHeight:.92, letterSpacing:"-.06em", textTransform:"uppercase", margin:0}}>
          {L.hero1[0]}<br/>{L.hero1[1]}
        </h1>
        <div style={{marginTop:34, display:"grid", gridTemplateColumns:"1fr 1.25fr", gap:28, alignItems:"end"}}>
          <h2 style={{fontFamily:display, fontSize:104, fontWeight:400, fontStyle:"italic", lineHeight:.9, letterSpacing:"-.045em", textTransform:"uppercase", margin:0}}>{L.hero2[0]}<br/>{L.hero2[1]}</h2>
          <Reveal delay={0.25}>
            <p style={{fontFamily:display, fontSize:22, lineHeight:1.35, fontWeight:500, margin:"0 0 0 auto", maxWidth:560}}>
              {C.hero.sub}<br/>{C.hero.sub2}
            </p>
          </Reveal>
        </div>
        </Inner>
      </div>
      {/* photo strip */}
      <div style={{display:"grid", gridTemplateColumns:"repeat(4,1fr)", borderTop:`2px solid ${t.ink}`, borderBottom:`2px solid ${t.ink}`}}>
        {[
          {n:1, k:"AST",  v:L.caps.c1},
          {n:2, k:"06",   v:L.caps.c2},
          {n:3, k:"100%", v:L.caps.c3},
          {n:4, k:"03",   v:L.caps.c4},
        ].map(({n,k,v})=>(
          <div key={n} style={{position:"relative", aspectRatio:"1/1", background:t.panel, borderRight: n<4?`2px solid ${t.ink}`:"none", overflow:"hidden"}}>
            <div style={{position:"absolute", inset:0, display:"flex", alignItems:"center", justifyContent:"center", fontFamily:mono, fontSize:10, letterSpacing:".2em", color:"#8A8A8A"}}>{L.photo} 0{n}</div>
            <img src={`public/photo-${n}.jpg`} alt="" onError={e=>{const el=e.currentTarget; if(n===1 && !el.dataset.fb){el.dataset.fb=1; el.src="public/sensory_analysis.jpg";} else {el.style.display="none";}}} style={{position:"absolute", inset:0, width:"100%", height:"100%", objectFit:"cover"}}/>
            <div style={{position:"absolute", left:0, right:0, bottom:0, padding:"64px 22px 20px", background:"linear-gradient(transparent, rgba(10,10,10,.78))", color:"#FAFAF7"}}>
              <div style={{fontFamily:display, fontSize:44, fontWeight:900, letterSpacing:"-.03em", lineHeight:1}}>{k}</div>
              <div style={{fontFamily:mono, fontSize:10, letterSpacing:".14em", textTransform:"uppercase", marginTop:7, opacity:.92}}>{v}</div>
            </div>
          </div>
        ))}
      </div>
      {/* jasny separator na całą szerokość między zdjęciami a rzędem CTA */}
      <div style={{height:8, background:t.bg}}/>
      {/* gauge sits in a bordered cell beside CTA blocks */}
      <div style={{display:"grid", gridTemplateColumns:"1fr 1fr", borderTop:`2px solid ${t.ink}`, borderBottom:`2px solid ${t.ink}`}}>
        <div style={{borderRight:`2px solid ${t.ink}`, minHeight:320, display:"flex", alignItems:"center", gap:40, padding:"40px 48px"}}>
          <div style={{flex:"none", width:216}}><FlavorWheelArt t={t}/></div>
          <FlavorIndex t={t}/>
        </div>
        <div style={{display:"grid", gridTemplateRows:"1fr 1fr"}}>
          <a href={C.burUrl} target="_blank" rel="noopener noreferrer" style={{background:t.ink, color:t.bg, padding:"48px", display:"flex", flexDirection:"column", justifyContent:"center", textDecoration:"none", borderBottom:`2px solid ${t.ink}`}}>
            <div style={{fontFamily:display, fontSize:56, fontWeight:900, letterSpacing:"-.035em", textTransform:"uppercase", lineHeight:.95}}>{L.ctaPrimary} <span style={{color:ORANGE}}>→</span></div>
          </a>
          <a href="#kursy" style={{background:t.bg, color:t.ink, padding:"48px", display:"flex", flexDirection:"column", justifyContent:"center", textDecoration:"none"}}>
            <div style={{fontFamily:display, fontSize:56, fontWeight:900, letterSpacing:"-.035em", textTransform:"uppercase", lineHeight:.95}}>{L.ctaSecondary} <span style={{color:ORANGE}}>↓</span></div>
          </a>
        </div>
      </div>
      <Sensoryka t={t}/><Brewing t={t}/><Trainer t={t}/><Funding t={t} invert/><B2B t={t} onSignUp={()=>setSignupOpen(true)}/><Courses t={t} onSignUp={()=>setSignupOpen(true)}/><Dates t={t} onSignUp={()=>setSignupOpen(true)}/><Contact t={t} size={200}/>
      <SignUpModal open={signupOpen} onClose={()=>setSignupOpen(false)} t={t}/>
    </Shell>
  );
};

// ── S3 Mobile ────────────────────────────────────────────────────
window.SignalBlockMobile = () => {
  const t = T.light;
  const [signupOpen, setSignupOpen] = React.useState(false);
  return (
    <Shell t={t}>
      <div style={{padding:"16px 20px", display:"flex", justifyContent:"space-between", alignItems:"center"}}>
        <div style={{display:"flex", alignItems:"center", gap:9}}>
          <img src="public/capy-mark.png" alt="Capyexpert" style={{height:30, width:"auto", display:"block"}} onError={e=>{e.currentTarget.style.display="none";}}/>
          <div style={{fontFamily:display, fontSize:15, fontWeight:800}}>CAPYBERRY</div>
        </div>
        <div style={{display:"flex", alignItems:"center", gap:14}}>
          <a href={L.langHref} style={{fontFamily:mono, fontSize:10, letterSpacing:".15em", textTransform:"uppercase", color:t.ink, textDecoration:"none", border:`1.5px solid ${t.ink}`, padding:"4px 8px"}}>{L.langLabel}</a>
          <a href="#kontakt-mob" style={{fontFamily:mono, fontSize:10, letterSpacing:".15em", textTransform:"uppercase", color:ORANGE, textDecoration:"none"}}>{L.navContact}</a>
        </div>
      </div>
      <div style={{background:ORANGE, color:"#FAFAF7", padding:"32px 20px 36px"}}>
        <h1 style={{fontFamily:display, fontSize:52, fontWeight:900, lineHeight:1.02, letterSpacing:"-.045em", textTransform:"uppercase", margin:0}}>{L.hero1.join(" ")}</h1>
        <h2 style={{fontFamily:display, fontSize:40, fontWeight:400, fontStyle:"italic", lineHeight:.94, letterSpacing:"-.03em", textTransform:"uppercase", margin:"14px 0 0"}}>{L.hero2.join(" ")}</h2>
        <p style={{fontFamily:display, fontSize:16, lineHeight:1.35, fontWeight:500, margin:"18px 0 0"}}>
          {C.hero.sub} {C.hero.sub2}
        </p>
      </div>
      <div style={{display:"grid", gridTemplateColumns:"1fr 1fr", borderTop:`2px solid ${t.ink}`, borderBottom:`2px solid ${t.ink}`}}>
        {[
          {n:1, k:"AST",  v:L.caps.c1},
          {n:2, k:"06",   v:L.caps.c2},
          {n:3, k:"100%", v:L.caps.c3},
          {n:4, k:"03",   v:L.caps.c4},
        ].map(({n,k,v})=>(
          <div key={n} style={{position:"relative", aspectRatio:"1/1", background:t.panel, borderRight: n%2===1?`2px solid ${t.ink}`:"none", borderTop: n>2?`2px solid ${t.ink}`:"none", overflow:"hidden"}}>
            <div style={{position:"absolute", inset:0, display:"flex", alignItems:"center", justifyContent:"center", fontFamily:mono, fontSize:9, letterSpacing:".18em", color:"#8A8A8A"}}>{L.photo} 0{n}</div>
            <img src={`public/photo-${n}.jpg`} alt="" onError={e=>{const el=e.currentTarget; if(n===1 && !el.dataset.fb){el.dataset.fb=1; el.src="public/sensory_analysis.jpg";} else {el.style.display="none";}}} style={{position:"absolute", inset:0, width:"100%", height:"100%", objectFit:"cover"}}/>
            <div style={{position:"absolute", left:0, right:0, bottom:0, padding:"36px 14px 12px", background:"linear-gradient(transparent, rgba(10,10,10,.78))", color:"#FAFAF7"}}>
              <div style={{fontFamily:display, fontSize:26, fontWeight:900, letterSpacing:"-.02em", lineHeight:1}}>{k}</div>
              <div style={{fontFamily:mono, fontSize:8, letterSpacing:".12em", textTransform:"uppercase", marginTop:5, opacity:.92}}>{v}</div>
            </div>
          </div>
        ))}
      </div>
      <div style={{borderBottom:`2px solid ${t.ink}`, padding:"32px 20px"}}>
        <div style={{width:180, margin:"0 auto 22px"}}><FlavorWheelArt t={t}/></div>
        <FlavorIndex t={t}/>
      </div>
      <a href={C.burUrl} target="_blank" rel="noopener noreferrer" style={{display:"block", background:t.ink, color:t.bg, padding:"28px 20px", textDecoration:"none", borderBottom:`2px solid ${t.ink}`}}>
        <div style={{fontFamily:display, fontSize:28, fontWeight:900, letterSpacing:"-.02em", textTransform:"uppercase", lineHeight:1.05}}>{L.ctaPrimary} <span style={{color:ORANGE}}>→</span></div>
      </a>
      <a href="#kursy-mob" style={{display:"block", background:t.bg, color:t.ink, padding:"28px 20px", textDecoration:"none", borderBottom:`2px solid ${t.ink}`}}>
        <div style={{fontFamily:display, fontSize:28, fontWeight:900, letterSpacing:"-.02em", textTransform:"uppercase", lineHeight:1.05}}>{L.ctaSecondary} <span style={{color:ORANGE}}>↓</span></div>
      </a>
      <Sensoryka t={t} mobile/>
      <Brewing t={t} mobile/>
      <div style={{padding:"48px 20px"}}>
        <Mark style={{marginBottom:14, fontSize:14}}>Trainer</Mark>
        <div style={{aspectRatio:"3/4", background:t.panel, position:"relative", overflow:"hidden"}}>
          <div style={{position:"absolute", inset:0, display:"flex", alignItems:"center", justifyContent:"center", fontFamily:mono, fontSize:10, color:t.muted, letterSpacing:".25em"}}>[ ZDJĘCIE ]</div>
          <img src="public/trainer.jpg" alt="Maryia Zeliankova — trenerka SCA" onError={e=>{e.currentTarget.style.display="none";}} style={{position:"absolute", inset:0, width:"100%", height:"100%", objectFit:"cover", transform:"scale(1.45)", transformOrigin:"38% 40%"}}/>
          <div style={{position:"absolute", top:14, left:14, fontFamily:mono, fontSize:9, color:ORANGE, letterSpacing:".15em"}}>● MZ.01</div>
        </div>
        <h2 style={{fontFamily:display, fontSize:30, fontWeight:800, lineHeight:1.1, letterSpacing:"-.015em", margin:"20px 0 0"}}>Maryia Zeliankova</h2>
        <p style={{fontFamily:display, fontSize:17, fontStyle:"italic", lineHeight:1.35, margin:"16px 0 0", borderLeft:`3px solid ${ORANGE}`, paddingLeft:14}}>„{C.trainer.quote}"</p>
        <div style={{marginTop:20}}>
          {C.trainer.about.map((s,i)=>(
            <Reveal key={i} delay={i*0.15}>
              <p style={{fontFamily:display, fontSize:14, lineHeight:1.5, margin:0, padding:"11px 0", borderTop:`1px solid ${t.line}`}}>{s}</p>
            </Reveal>
          ))}
        </div>
      </div>
      <div id="cofin-mob" style={{padding:"48px 20px", background:t.panel, color:t.panelInk}}>
        <Mark style={{marginBottom:14}}>Funding</Mark>
        <h2 style={{fontFamily:display, fontSize:66, fontWeight:900, lineHeight:.95, letterSpacing:"-.01em", margin:"0 0 20px"}}><span style={{fontFamily:serif, fontStyle:"italic", fontWeight:400, fontSize:33, letterSpacing:"0"}}>{L.fundDo}</span> <span style={{color:ORANGE}}>100%</span></h2>
        {C.cofin.sizes.map(s=>{
          const pct = parseInt(s.pct.replace(/\D/g,""));
          return <div key={s.id} style={{marginBottom:16}}>
            <div style={{display:"flex", justifyContent:"space-between", fontFamily:mono, fontSize:10, letterSpacing:".1em", textTransform:"uppercase", marginBottom:6}}><span>{s.label}</span><span style={{color:ORANGE, fontWeight:700}}>{s.pct}</span></div>
            <div style={{height:4, background:"#333"}}><div style={{width:`${pct}%`, height:"100%", background:ORANGE}}/></div>
          </div>;
        })}
      </div>
      <B2B t={t} mobile onSignUp={()=>setSignupOpen(true)}/>
      <div id="kursy-mob" style={{padding:"48px 20px"}}>
        <Mark style={{marginBottom:14}}>Curriculum</Mark>
        {C.courses.map((c,i)=>{
          const flood = i===1;
          return <div key={c.name} style={{background: flood?ORANGE:t.bg, color: flood?"#0A0A0A":t.ink, border: flood?"none":`2px solid ${t.ink}`, padding:22, marginBottom:16}}>
            <div style={{display:"flex", alignItems:"center", justifyContent:"space-between", gap:10, fontFamily:mono, fontSize:10, letterSpacing:".15em", textTransform:"uppercase", marginBottom:14}}>
              <img src={`public/module-${c.code==="SS"?"sensory":"brewing"}.png`} alt={c.code} style={{height:34, width:"auto", display:"block", flex:"none"}} onError={e=>{e.currentTarget.style.display="none";}}/>
              <span>{c.levels}</span>
            </div>
            <h3 style={{fontFamily:display, fontSize:38, fontWeight:900, letterSpacing:"-.03em", textTransform:"uppercase", margin:0}}>{c.name}</h3>
            <div style={{fontFamily:display, fontSize:13, lineHeight:1.5, marginTop:14}}>{c.who}</div>
            <div style={{display:"flex", gap:10, flexWrap:"wrap", marginTop:16}}>
              <a onClick={()=>setSignupOpen(true)} style={{display:"inline-flex", padding:"12px 18px", background: flood?"#0A0A0A":ORANGE, color:"#FAFAF7", fontFamily:mono, fontSize:11, fontWeight:700, letterSpacing:".18em", textTransform:"uppercase", textDecoration:"none", gap:10, cursor:"pointer"}}>{L.enrol} <span>→</span></a>
              <a href={`${L.coursesPage}#${c.code==="SS"?"sensory":"brewing"}`} style={{display:"inline-flex", padding:"10px 16px", border:`2px solid ${flood?"#0A0A0A":t.ink}`, color: flood?"#0A0A0A":t.ink, fontFamily:mono, fontSize:11, fontWeight:700, letterSpacing:".18em", textTransform:"uppercase", textDecoration:"none", gap:10}}>{L.detailsLabel} <span>→</span></a>
            </div>
          </div>;
        })}
        {/* rozpiska szczegółowa — mobile */}
        <div style={{marginTop:40, paddingTop:32, borderTop:`2px solid ${t.ink}`}}>
          <h3 style={{fontFamily:display, fontSize:34, fontWeight:900, lineHeight:.96, letterSpacing:"-.03em", textTransform:"uppercase", margin:"0 0 12px"}}>
            {L.levelsH[0]}<br/><span style={{color:"#2FBF5B"}}>Foundation</span> <span>→</span> <span style={{color:"#D92D20"}}>Professional.</span>
          </h3>
          <p style={{fontFamily:display, fontSize:14, lineHeight:1.5, color:t.muted, margin:"0 0 20px"}}>{C.courseDetail.intro}</p>
          {C.courseDetail.rows.map((r,i)=>(
            <div key={r.level} style={{border:`2px solid ${t.ink}`, padding:16, marginBottom:12}}>
              <div style={{display:"flex", justifyContent:"space-between", alignItems:"baseline"}}>
                <div style={{fontFamily:display, fontSize:24, fontWeight:900, letterSpacing:"-.02em", textTransform:"uppercase", color:{Foundation:"#2FBF5B", Intermediate:"#F97316", Professional:"#D92D20"}[r.level]||t.ink}}>{r.level}</div>
                <div style={{fontFamily:display, fontSize:16, fontWeight:800, color:ORANGE}}>{r.pts}</div>
              </div>
              <div style={{marginTop:10, display:"grid", gridTemplateColumns:"84px minmax(0,1fr)", rowGap:6, columnGap:12, fontFamily:mono, fontSize:11}}>
                <span style={{color:t.muted, textTransform:"uppercase", letterSpacing:".12em"}}>{L.colTime}</span><span>{r.days}</span>
                <span style={{color:t.muted, textTransform:"uppercase", letterSpacing:".12em"}}>{L.colPre}</span><span style={r.pre.startsWith(L.preRequired)?{fontWeight:700, color:"#D92D20"}: r.pre.startsWith(L.preAdvised)?{fontWeight:700, color:"#D97706"}:undefined}>{r.pre}</span>
              </div>
            </div>
          ))}
          <p style={{fontFamily:mono, fontSize:11, lineHeight:1.7, color:t.muted, margin:"16px 0 0"}}>{C.courseDetail.note}</p>
        </div>
      </div>
      <div id="terminy-mob" style={{padding:"48px 20px", borderTop:`2px solid ${t.ink}`}}>
        <Mark style={{marginBottom:14}}>Schedule</Mark>
        <p style={{fontFamily:display, fontSize:13, color:t.muted, margin:"0 0 20px"}}>{C.datesNote}</p>
        {C.dates.map((d,i)=>(
          <div key={i} onClick={()=>setSignupOpen(true)} style={{padding:"20px 0", borderTop: i===0?`1px solid ${t.ink}`:`1px solid ${t.line}`, cursor:"pointer"}}>
            <div style={{fontFamily:display, fontSize:20, fontWeight:700, textTransform:"uppercase"}}>{d.name}</div>
            <div style={{fontFamily:display, fontSize:15, marginTop:4}}>{d.date} · {d.loc}</div>
            <div style={{display:"flex", gap:4, marginTop:8}}>{Array.from({length:d.total}).map((_,k)=>(<span key={k} style={{width:10, height:10, background: k<d.total-d.spots?ORANGE:t.line}}/>))}</div>
          </div>
        ))}
      </div>
      <div id="kontakt-mob" style={{padding:"56px 20px 32px"}}>
        <h2 style={{fontFamily:display, fontSize:48, fontWeight:900, lineHeight:1.04, letterSpacing:"-.02em", textTransform:"uppercase", margin:"0 0 28px"}}>{L.contactH[0]}<br/><span style={{color:ORANGE}}>{L.contactH[1]}</span></h2>
        {C.contact.links.map((l)=>(
          <a key={l.kind} href={l.href} target={l.kind==="instagram"?"_blank":undefined} rel="noopener noreferrer" style={{display:"flex", justifyContent:"space-between", alignItems:"center", padding:"18px 0", borderTop:`2px solid ${t.ink}`, color:t.ink, textDecoration:"none"}}>
            <div>
              <div style={{display:"flex", alignItems:"center", gap:8, fontFamily:mono, fontSize:11, letterSpacing:".18em", textTransform:"uppercase", color:ORANGE}}>
                {l.kind==="instagram" ? <IconIG s={18}/> : <IconMail s={18}/>} {l.kind==="instagram" ? "ig:" : "mail:"}
              </div>
              <div style={{fontFamily:display, fontSize:24, fontWeight:800, marginTop:4}}>{l.label}</div>
            </div>
            <span style={{fontSize:28, color:ORANGE}}>→</span>
          </a>
        ))}
        <div style={{marginTop:40, paddingTop:20, borderTop:`1px solid ${t.line}`, display:"flex", justifyContent:"space-between", alignItems:"flex-end"}}>
          <span style={{fontFamily:mono, fontSize:9, letterSpacing:".2em", textTransform:"uppercase", color:t.muted}}>CAPYEXPERT · MMXXVI</span>
        </div>
      </div>
      <SignUpModal open={signupOpen} onClose={()=>setSignupOpen(false)} t={t}/>
    </Shell>
  );
};
})();