const { useState, useEffect, useRef } = React;

/* ============ shared ============ */
const Logo = ({ dark }) => (
  <div style={{display:"flex",alignItems:"center",gap:10}}>
    <svg width="34" height="34" viewBox="0 0 40 40" aria-hidden>
      <rect x="0" y="0" width="40" height="40" rx="3" fill="#ff4d12"/>
      <path d="M7 12 L12 28 L16 18 L20 28 L24 18 L28 28 L33 12" stroke="#0c0c0d" strokeWidth="3.4" fill="none" strokeLinejoin="miter" strokeLinecap="square"/>
    </svg>
    <div style={{lineHeight:1}}>
      <div className="display" style={{fontSize:18,color:dark?"#fff":"#0c0c0d"}}>WELDJAN</div>
      <div className="mono" style={{fontSize:9,letterSpacing:".18em",color:dark?"#9a9a9a":"#6b6b6b",marginTop:2}}>SZKOŁA SPAWANIA · EST. 1998</div>
    </div>
  </div>
);

const Arrow = ({size=16,color="currentColor"}) => (
  <svg width={size} height={size} viewBox="0 0 16 16" aria-hidden>
    <path d="M2 8h11M8.5 3.5L13 8l-4.5 4.5" stroke={color} strokeWidth="1.8" fill="none" strokeLinecap="square" strokeLinejoin="miter"/>
  </svg>
);

/* ============ NAV ============ */
function Nav({onCTA}){
  const [open,setOpen] = useState(null);
  const items = [
    {label:"Kursy spawania",sub:["MAG (135)","TIG (141)","MMA (111)","MIG (131)","Cięcie plazmowe","Egzaminy UDT"]},
    {label:"Dla firm",sub:["Szkolenia zamknięte","Audyt umiejętności","Recertyfikacja","Wyjazd trenera do zakładu"]},
    {label:"O szkole",sub:["Nasi instruktorzy","Hale i sprzęt","Akredytacje","Kariera"]},
    {label:"Materiały",sub:["Blog","Katalog 2026 (PDF)","Cennik","FAQ"]},
  ];
  return (
    <header style={{position:"sticky",top:0,zIndex:50,background:"#0c0c0d",borderBottom:"1px solid #1a1a1c"}}>
      <div className="container" style={{display:"flex",alignItems:"center",justifyContent:"space-between",height:64}}>
        <Logo dark />
        <nav style={{display:"flex",gap:6,alignItems:"center",fontSize:13.5,color:"#dcdcdc"}}>
          {items.map((it,i)=>(
            <div key={i} style={{position:"relative"}}
                 onMouseEnter={()=>setOpen(i)} onMouseLeave={()=>setOpen(null)}>
              <button style={{color:"#dcdcdc",padding:"10px 14px",display:"flex",alignItems:"center",gap:6,fontWeight:600}}>
                {it.label}
                <svg width="9" height="6" viewBox="0 0 9 6"><path d="M1 1l3.5 4L8 1" stroke="currentColor" strokeWidth="1.5" fill="none"/></svg>
              </button>
              {open===i && (
                <div style={{position:"absolute",top:"100%",left:0,minWidth:240,background:"#fff",color:"#0c0c0d",border:"1px solid #0c0c0d",boxShadow:"6px 6px 0 #ff4d12",padding:"10px 0"}}>
                  {it.sub.map(s=>(
                    <div key={s} style={{padding:"8px 18px",fontWeight:600,fontSize:13.5,cursor:"pointer"}}
                         onMouseDown={e=>e.preventDefault()}>{s}</div>
                  ))}
                </div>
              )}
            </div>
          ))}
        </nav>
        <div style={{display:"flex",alignItems:"center",gap:14}}>
          <a style={{color:"#dcdcdc",fontSize:13,fontWeight:600}}>Moje konto</a>
          <button onClick={onCTA} style={{background:"#ff4d12",color:"#0c0c0d",fontWeight:800,fontSize:13,letterSpacing:".04em",padding:"10px 18px",textTransform:"uppercase"}}>
            Zapytaj o termin
          </button>
        </div>
      </div>
    </header>
  );
}

/* ============ HERO ============ */
function Hero({onCTA}){
  return (
    <section style={{background:"#0c0c0d",color:"#fff",position:"relative",overflow:"hidden"}}>
      <div className="container" style={{display:"grid",gridTemplateColumns:"1.05fr 1fr",gap:48,padding:"68px 28px 84px",alignItems:"end"}}>
        <div>
          <div className="mono" style={{fontSize:11,letterSpacing:".22em",color:"#ff7a3a",marginBottom:28}}>
            ◢ KURSY STACJONARNE · GLIWICE · POZNAŃ · GDAŃSK
          </div>
          <h1 className="display" style={{fontSize:78,margin:0}}>
            POLSKA SZKOŁA<br/>
            SPAWANIA<br/>
            Z <span style={{color:"#ff4d12"}}>UPRAWNIENIAMI</span>.
          </h1>
          <p style={{maxWidth:520,fontSize:17,lineHeight:1.55,color:"#bdbdbd",marginTop:28}}>
            Profesjonalne kursy MAG, TIG, MMA i MIG dla osób indywidualnych
            oraz firm — z certyfikatem UDT, IIW i ISO 9606. Praktyka od
            pierwszego dnia, hale 2 400&nbsp;m², 38 stanowisk spawalniczych.
          </p>
          <div style={{display:"flex",gap:10,marginTop:34,flexWrap:"wrap"}}>
            <button onClick={onCTA} style={{background:"#ff4d12",color:"#0c0c0d",fontWeight:800,fontSize:13,letterSpacing:".06em",padding:"15px 22px",textTransform:"uppercase",display:"inline-flex",alignItems:"center",gap:10}}>
              Zapisz się indywidualnie <Arrow/>
            </button>
            <button onClick={onCTA} style={{background:"transparent",color:"#fff",fontWeight:800,fontSize:13,letterSpacing:".06em",padding:"15px 22px",textTransform:"uppercase",border:"1.5px solid #fff",display:"inline-flex",alignItems:"center",gap:10}}>
              Szkolenia dla firm <Arrow/>
            </button>
          </div>
          <div style={{display:"flex",gap:34,marginTop:48,paddingTop:24,borderTop:"1px solid #2a2a2e"}}>
            {[
              ["27","lat na rynku"],
              ["12 400+","absolwentów"],
              ["96%","zdawalność UDT"],
            ].map(([n,l])=>(
              <div key={l}>
                <div className="cond" style={{fontSize:34,color:"#fff"}}>{n}</div>
                <div className="mono" style={{fontSize:10,letterSpacing:".14em",color:"#8a8a8a",textTransform:"uppercase",marginTop:4}}>{l}</div>
              </div>
            ))}
          </div>
        </div>

        <div style={{position:"relative",alignSelf:"stretch",minHeight:520}}>
          <div className="ph" style={{position:"absolute",inset:0}}>
            <div className="ph-label">PHOTO · instruktor przy stanowisku TIG, hala Gliwice</div>
            {/* faux welding spark glow */}
            <div style={{position:"absolute",left:"42%",top:"58%",width:180,height:180,borderRadius:"50%",background:"radial-gradient(circle, rgba(255,200,80,.55) 0%, rgba(255,77,18,.25) 35%, transparent 70%)",filter:"blur(2px)"}}></div>
          </div>
          {/* sticker */}
          <div style={{position:"absolute",right:-12,top:-12,background:"#f5b800",color:"#0c0c0d",padding:"12px 14px",transform:"rotate(4deg)",border:"2px solid #0c0c0d",boxShadow:"4px 4px 0 #0c0c0d"}}>
            <div className="cond" style={{fontSize:18}}>NABÓR ZIMA 2026</div>
            <div className="mono" style={{fontSize:10,letterSpacing:".1em",marginTop:2}}>start 12.01 · zostały 4 miejsca</div>
          </div>
        </div>
      </div>

      {/* logo badge sliver */}
      <div style={{position:"absolute",left:28,bottom:-1,width:54,height:24,background:"#ff4d12",display:"flex",alignItems:"center",justifyContent:"center"}}>
        <div className="display" style={{fontSize:11,color:"#0c0c0d"}}>W ◢</div>
      </div>
    </section>
  );
}

/* ============ TRUST BAR ============ */
function TrustBar(){
  const logos = ["PGE","ORLEN","ARCELORMITTAL","STOCZNIA REMONTOWA","MOSTOSTAL","ALSTOM"];
  return (
    <section style={{background:"#ff4d12",color:"#0c0c0d"}}>
      <div className="container" style={{display:"grid",gridTemplateColumns:"260px 1fr",alignItems:"center",gap:40,padding:"34px 28px"}}>
        <div>
          <div className="mono" style={{fontSize:10,letterSpacing:".2em",marginBottom:6}}>◢ ZAUFALI NAM</div>
          <div className="cond" style={{fontSize:22,lineHeight:1.05}}>WYKONAWCY,<br/>STOCZNIE I HUTY</div>
        </div>
        <div style={{display:"grid",gridTemplateColumns:"repeat(6,1fr)",gap:0,alignItems:"center"}}>
          {logos.map((l,i)=>(
            <div key={l} style={{textAlign:"center",padding:"10px 6px",borderLeft:i?"1px solid rgba(12,12,13,.18)":"none"}}>
              <div className="display" style={{fontSize:14,letterSpacing:".02em"}}>{l}</div>
            </div>
          ))}
        </div>
      </div>
    </section>
  );
}

/* ============ THREE CARDS ============ */
function ThreeCards(){
  const cards = [
    {bg:"#f5b800",color:"#0c0c0d",t:"NAUKA PRZEZ ŁUK.",d:"Każdy kurs to minimum 70% czasu przy stanowisku. Materiał zużywalny w cenie — żadnych ukrytych kosztów elektrod, drutu czy gazu."},
    {bg:"#0c0c0d",color:"#fff",t:"INSTRUKTORZY-PRAKTYCY.",d:"Uczą cię spawacze z 15–25 latami doświadczenia ze stoczni, energetyki i petrochemii. Małe grupy: 1 instruktor na 4 kursantów."},
    {bg:"#ff4d12",color:"#0c0c0d",t:"EGZAMIN UDT NA MIEJSCU.",d:"Akredytowany ośrodek egzaminacyjny UDT. Zdajesz w tej samej hali, w której się uczyłeś — bez stresu wyjazdu i obcego sprzętu."},
  ];
  return (
    <section style={{padding:"96px 0 28px",background:"var(--paper)"}}>
      <div className="container">
        <h2 className="display" style={{fontSize:48,maxWidth:880,margin:"0 0 44px"}}>
          GDZIE TEORIA SPOTYKA SIĘ Z <span style={{color:"#ff4d12"}}>IGLICĄ ŁUKU</span>.
        </h2>
        <div style={{display:"grid",gridTemplateColumns:"repeat(3,1fr)",gap:18}}>
          {cards.map((c,i)=>(
            <div key={i} style={{background:c.bg,color:c.color,padding:"30px 28px 36px",minHeight:320,display:"flex",flexDirection:"column",justifyContent:"space-between",position:"relative"}}>
              <div className="mono" style={{fontSize:10,letterSpacing:".2em",opacity:.7}}>0{i+1} / 03</div>
              <div>
                <div className="cond" style={{fontSize:30,marginTop:24,marginBottom:18,maxWidth:280}}>{c.t}</div>
                <div style={{fontSize:14.5,lineHeight:1.5,opacity:.92}}>{c.d}</div>
              </div>
            </div>
          ))}
        </div>
      </div>
    </section>
  );
}

/* ============ TWO BIG CARDS ============ */
function TwoTracks(){
  const data = [
    {
      tag:"DLA FIRM",
      h:"Szkolenia spawalnicze pod zlecenie produkcyjne.",
      bullets:[
        "Audyt umiejętności załogi i mapa kompetencji WPQR/WPS",
        "Wyjazd trenera do twojego zakładu — od 4 osób",
        "Recertyfikacja PN-EN ISO 9606-1 / 9606-2",
        "Faktura VAT, dofinansowanie z KFS i BUR",
      ],
      cta:"Zamów ofertę dla firmy"
    },
    {
      tag:"DLA INDYWIDUALNYCH",
      h:"Konkretny zawód w 3–8 tygodni.",
      bullets:[
        "Kursy weekendowe, wieczorowe i pełnoetatowe",
        "Książeczka spawacza i certyfikat UDT po egzaminie",
        "Płatność w 3 ratach 0% — bez zaświadczeń",
        "Pomoc w znalezieniu pierwszej pracy (200+ partnerów)",
      ],
      cta:"Zobacz harmonogram kursów"
    },
  ];
  return (
    <section style={{padding:"40px 0 100px",background:"var(--paper)"}}>
      <div className="container" style={{display:"grid",gridTemplateColumns:"1fr 1fr",gap:18}}>
        {data.map((d,i)=>(
          <article key={i} style={{border:"1.5px solid #0c0c0d",background:"#fff",display:"flex",flexDirection:"column"}}>
            <div className="ph" style={{height:240,position:"relative"}}>
              <div className="ph-label">PHOTO · {i===0?"hala produkcyjna, audyt umiejętności":"weekendowa grupa, kurs MAG"}</div>
            </div>
            <div style={{padding:"28px 30px 32px"}}>
              <div className="mono" style={{fontSize:11,letterSpacing:".2em",color:"#ff4d12"}}>◢ {d.tag}</div>
              <h3 className="display" style={{fontSize:30,margin:"14px 0 22px",lineHeight:1.0}}>{d.h}</h3>
              <ul style={{listStyle:"none",padding:0,margin:"0 0 26px",display:"grid",gap:10}}>
                {d.bullets.map(b=>(
                  <li key={b} style={{display:"flex",gap:12,fontSize:14.5,lineHeight:1.45}}>
                    <span style={{flex:"0 0 12px",height:12,background:"#ff4d12",marginTop:5}}></span>
                    <span>{b}</span>
                  </li>
                ))}
              </ul>
              <button style={{background:"#0c0c0d",color:"#fff",padding:"13px 18px",fontWeight:800,fontSize:12.5,letterSpacing:".06em",textTransform:"uppercase",display:"inline-flex",alignItems:"center",gap:10}}>
                {d.cta} <Arrow color="#ff4d12"/>
              </button>
            </div>
          </article>
        ))}
      </div>
    </section>
  );
}

/* ============ BUILDERS / STACK ============ */
function Builders(){
  const blocks = [
    {bg:"#ff4d12",color:"#0c0c0d",h:"Akredytacja UDT, TÜV i Instytutu Spawalnictwa.",p:"Ośrodek nr 47/UDT-CERT/2014. Certyfikujemy w metodach 111, 131, 135, 136, 141, 311 — blachy, rury, aluminium, stal nierdzewna, dupleks."},
    {bg:"#3fb5c4",color:"#0c0c0d",h:"Trenerzy z 200+ łączonymi latami w stoczni i petrochemii.",p:"Nasi instruktorzy spawali w Stoczni Gdańskiej, Rafinerii Gdańskiej i przy bloku 910 MW w Jaworznie. Wiedza która nie pochodzi z YouTube'a."},
    {bg:"#ffb18a",color:"#0c0c0d",h:"Harmonogram, który pasuje do zmiany w fabryce.",p:"Kursy popołudniowe od 16:00, weekendowe Sb–Nd, oraz turnusy intensywne 2 tygodnie. Możesz uczyć się bez rzucania pracy."},
  ];
  return (
    <section style={{padding:"40px 0 110px",background:"var(--paper)"}}>
      <div className="container" style={{display:"grid",gridTemplateColumns:"1fr 1.05fr",gap:48,alignItems:"start"}}>
        <div className="ph" style={{minHeight:540}}>
          <div className="ph-label">PHOTO · grupa kursantów, hala główna · format pionowy</div>
          <div style={{position:"absolute",left:20,top:20,background:"#0c0c0d",color:"#fff",padding:"8px 12px"}}>
            <div className="mono" style={{fontSize:10,letterSpacing:".18em"}}>◢ HALA POZNAŃ · 2 400 m²</div>
          </div>
        </div>
        <div>
          <h2 className="display" style={{fontSize:46,margin:"0 0 30px",maxWidth:520}}>
            BUDUJEMY MISTRZÓW SPAWANIA.
          </h2>
          <div style={{display:"grid",gap:14}}>
            {blocks.map((b,i)=>(
              <div key={i} style={{background:b.bg,color:b.color,padding:"22px 26px"}}>
                <h3 className="cond" style={{fontSize:22,margin:"0 0 8px"}}>{b.h}</h3>
                <p style={{margin:0,fontSize:14.5,lineHeight:1.5}}>{b.p}</p>
              </div>
            ))}
          </div>
        </div>
      </div>
    </section>
  );
}

/* ============ TESTIMONIALS ============ */
function Testimonials(){
  const items = [
    {q:"Zacząłem od zera, po 8 tygodniach miałem książeczkę 135 i pracę w firmie konstrukcji stalowych w Tychach. Stawka 38 zł/h na start.",a:"Marcin K., absolwent kursu MAG 135"},
    {q:"Wysłaliśmy 14-osobową brygadę na recertyfikację 9606-1. Wszyscy zdali za pierwszym podejściem, audyt klienta zaliczony bez uwag.",a:"Kierownik produkcji, Mostostal Zabrze"},
    {q:"TIG aluminium to nie żarty — bez dobrego instruktora nie ma szans. W Weldjan każdy spaw oglądasz pod mikroskopem, dosłownie.",a:"Anna R., spawacz w branży lotniczej"},
  ];
  const [i,setI] = useState(0);
  return (
    <section style={{padding:"30px 0 100px",background:"var(--paper)"}}>
      <div className="container">
        <h2 className="display" style={{fontSize:46,maxWidth:880,margin:"0 0 12px"}}>
          OD PIERWSZEGO ŁUKU DO PIERWSZEJ WYPŁATY.
        </h2>
        <p style={{fontSize:16,color:"#43434a",maxWidth:680,margin:"0 0 44px"}}>
          Średnia stawka godzinowa absolwenta Weldjan po 6 miesiącach od ukończenia kursu MAG 135: <b>42&nbsp;zł brutto</b>. Dane wewnętrzne, ankieta 2025.
        </p>
        <div style={{display:"grid",gridTemplateColumns:"repeat(3,1fr)",gap:18}}>
          {items.map((it,k)=>(
            <figure key={k} style={{margin:0,border:"1.5px solid #0c0c0d",padding:"28px 26px 24px",background:k===i?"#fffdf7":"#fff",position:"relative"}}>
              <div className="display" style={{fontSize:54,color:"#ff4d12",lineHeight:.6,marginBottom:14}}>"</div>
              <blockquote style={{margin:0,fontSize:15.5,lineHeight:1.5,fontWeight:600}}>{it.q}</blockquote>
              <figcaption className="mono" style={{marginTop:22,fontSize:11,letterSpacing:".12em",color:"#43434a",textTransform:"uppercase"}}>— {it.a}</figcaption>
            </figure>
          ))}
        </div>
        <div style={{display:"flex",justifyContent:"flex-end",gap:8,marginTop:24}}>
          <button onClick={()=>setI((i+2)%3)} style={{width:42,height:42,border:"1.5px solid #0c0c0d",background:"#fff"}} aria-label="poprzednia">‹</button>
          <button onClick={()=>setI((i+1)%3)} style={{width:42,height:42,border:"1.5px solid #0c0c0d",background:"#0c0c0d",color:"#fff"}} aria-label="następna">›</button>
        </div>
      </div>
    </section>
  );
}

/* ============ INSTRUCTORS ============ */
function Instructors(){
  const team = [
    {name:"TADEUSZ ŚLIWA",role:"Trener wiodący · TIG 141, aluminium, dupleks",bio:"24 lata w Stoczni Gdynia i w rafinerii w Schwedt. Egzaminator UDT od 2012. Spawa na demonstracji szybciej niż większość ludzi opisuje to słowami."},
    {name:"GRAŻYNA WĄSIK-NOWAK",role:"Inżynier spawalnik IWE · WPS/WPQR",bio:"Buduje procedury spawalnicze dla 4 stoczni i 11 firm konstrukcyjnych. Prowadzi nasz moduł teorii i czytania rysunku spawalniczego."},
    {name:"BARTOSZ FELIŃSKI",role:"Trener MAG 135/136 · konstrukcje stalowe",bio:"Pracował przy halach Amazon w Bielanach Wrocławskich i przy moście III Tysiąclecia w Gdańsku. Uczy spawania pod realne zlecenia branży."},
  ];
  return (
    <section style={{padding:"30px 0 110px",background:"var(--paper)"}}>
      <div className="container">
        <div style={{display:"flex",justifyContent:"space-between",alignItems:"end",marginBottom:34,flexWrap:"wrap",gap:20}}>
          <h2 className="display" style={{fontSize:46,margin:0}}>NASI INSTRUKTORZY.</h2>
          <a style={{fontWeight:700,fontSize:13.5,display:"inline-flex",alignItems:"center",gap:8,borderBottom:"2px solid #ff4d12",paddingBottom:2}}>
            Cały zespół (12 osób) <Arrow/>
          </a>
        </div>
        <div style={{display:"grid",gridTemplateColumns:"repeat(3,1fr)",gap:18}}>
          {team.map((t,i)=>(
            <article key={t.name} style={{background:"#fff",border:"1.5px solid #0c0c0d"}}>
              <div className="ph" style={{height:280,position:"relative"}}>
                <div className="ph-label">PHOTO · portret, hala · {t.name.split(" ")[0]}</div>
                <div style={{position:"absolute",left:14,top:14,background:"#ff4d12",color:"#0c0c0d",padding:"4px 9px"}}>
                  <div className="mono" style={{fontSize:10,letterSpacing:".15em"}}>0{i+1}</div>
                </div>
              </div>
              <div style={{padding:"22px 24px 26px"}}>
                <div className="display" style={{fontSize:17,marginBottom:4}}>{t.name}</div>
                <div className="mono" style={{fontSize:11,letterSpacing:".06em",color:"#ff4d12",textTransform:"uppercase",marginBottom:14}}>{t.role}</div>
                <p style={{margin:0,fontSize:13.5,lineHeight:1.55,color:"#43434a"}}>{t.bio}</p>
              </div>
            </article>
          ))}
        </div>
      </div>
    </section>
  );
}

/* ============ COURSES (extra section for welding school context) ============ */
function Courses(){
  const courses = [
    {code:"MAG 135",name:"Spawanie MAG drutem litym",t:"160 h",p:"2 890 zł",lvl:"Podstawowy",color:"#f5b800"},
    {code:"MAG 136",name:"MAG drutem proszkowym",t:"120 h",p:"2 490 zł",lvl:"Rozszerzający",color:"#3fb5c4"},
    {code:"TIG 141",name:"TIG · stal nierdzewna i aluminium",t:"200 h",p:"3 890 zł",lvl:"Specjalistyczny",color:"#ff4d12"},
    {code:"MMA 111",name:"Spawanie elektrodą otuloną",t:"120 h",p:"1 990 zł",lvl:"Podstawowy",color:"#ffb18a"},
    {code:"MIG 131",name:"MIG · aluminium i stopy",t:"140 h",p:"2 990 zł",lvl:"Rozszerzający",color:"#0c0c0d",dark:true},
    {code:"GAS 311",name:"Spawanie gazowe · acetylen/tlen",t:"80 h",p:"1 590 zł",lvl:"Specjalistyczny",color:"#f5efe4"},
  ];
  return (
    <section style={{padding:"30px 0 110px",background:"#0c0c0d",color:"#fff"}}>
      <div className="container">
        <div style={{display:"flex",justifyContent:"space-between",alignItems:"end",marginBottom:34,flexWrap:"wrap",gap:20}}>
          <h2 className="display" style={{fontSize:46,margin:0,color:"#fff"}}>
            METODY <span style={{color:"#ff4d12"}}>/</span> KURSY
          </h2>
          <div className="mono" style={{fontSize:11,letterSpacing:".15em",color:"#8a8a8a"}}>SZEŚĆ ŚCIEŻEK · WSZYSTKIE Z EGZAMINEM UDT</div>
        </div>
        <div style={{display:"grid",gridTemplateColumns:"repeat(3,1fr)",gap:0,border:"1.5px solid #2a2a2e"}}>
          {courses.map((c,i)=>(
            <article key={c.code} style={{
              borderRight:(i%3!==2)?"1.5px solid #2a2a2e":"none",
              borderBottom:(i<3)?"1.5px solid #2a2a2e":"none",
              padding:"26px 26px 28px",
              background:c.dark?"#1a1a1c":"transparent",
              position:"relative",cursor:"pointer"
            }}
            onMouseEnter={e=>e.currentTarget.style.background=c.dark?"#1a1a1c":"#141416"}
            onMouseLeave={e=>e.currentTarget.style.background=c.dark?"#1a1a1c":"transparent"}
            >
              <div style={{display:"flex",alignItems:"center",gap:10,marginBottom:18}}>
                <span style={{width:10,height:10,background:c.color,display:"inline-block"}}></span>
                <span className="mono" style={{fontSize:11,letterSpacing:".18em",color:"#8a8a8a"}}>{c.lvl.toUpperCase()}</span>
              </div>
              <div className="display" style={{fontSize:30,color:c.color==="#0c0c0d"?"#fff":c.color,marginBottom:6}}>{c.code}</div>
              <div style={{fontSize:15.5,color:"#dcdcdc",marginBottom:24,maxWidth:260,fontWeight:600}}>{c.name}</div>
              <div style={{display:"flex",justifyContent:"space-between",alignItems:"end",borderTop:"1px dashed #2a2a2e",paddingTop:14}}>
                <div>
                  <div className="mono" style={{fontSize:10,letterSpacing:".15em",color:"#8a8a8a"}}>CZAS</div>
                  <div style={{fontSize:15,fontWeight:700,color:"#fff"}}>{c.t}</div>
                </div>
                <div style={{textAlign:"right"}}>
                  <div className="mono" style={{fontSize:10,letterSpacing:".15em",color:"#8a8a8a"}}>OD</div>
                  <div style={{fontSize:18,fontWeight:800,color:"#ff4d12"}}>{c.p}</div>
                </div>
              </div>
              <div style={{marginTop:18,fontSize:12,fontWeight:700,color:c.color==="#0c0c0d"?"#fff":c.color,display:"inline-flex",alignItems:"center",gap:8,textTransform:"uppercase",letterSpacing:".05em"}}>
                Program kursu <Arrow color="currentColor"/>
              </div>
            </article>
          ))}
        </div>
      </div>
    </section>
  );
}

/* ============ FAQ ============ */
function FAQ(){
  const data = [
    {bar:"#f5b8c5",q:"Czym Weldjan różni się od innych szkół spawania?",a:"Skupiamy się na praktyce 70/30 i akredytowanym egzaminie UDT na miejscu. Nasi instruktorzy nadal spawają komercyjnie — nie są tylko teoretykami. Mamy też największą salę szkoleniową spawalniczą w południowej Polsce (2 400 m², 38 stanowisk)."},
    {bar:"#3fb5c4",q:"Czy kurs jest stacjonarny czy online?",a:"Wyłącznie stacjonarny — spawania nie da się nauczyć przez ekran. Część teoretyczna odbywa się w salach wykładowych obok hal, a od pierwszego dnia jesteś przy stanowisku spawalniczym z trenerem przypisanym do 4-osobowej grupy."},
    {bar:"#ff4d12",q:"Czy kursy są dofinansowane?",a:"Tak. Współpracujemy z Krajowym Funduszem Szkoleniowym (KFS), Bazą Usług Rozwojowych (BUR) oraz Urzędami Pracy w 16 województwach. Dofinansowanie sięga 80–100% kosztu kursu — pomożemy ci złożyć wniosek."},
    {bar:"#1f3aa3",q:"Jakie wsparcie dostanę po zakończeniu kursu?",a:"Roczne wsparcie absolwenta: dostęp do platformy z procedurami WPS, możliwość recertyfikacji w 20% niższej cenie, oraz dostęp do bazy 200+ pracodawców partnerskich. 89% naszych absolwentów znajduje pracę w spawalnictwie w ciągu 90 dni."},
    {bar:"#1a4d2e",q:"Czy szkolimy spawaczy z innych krajów?",a:"Tak. Prowadzimy kursy z tłumaczeniem na ukraiński (UA), białoruski (BY) i angielski (EN). Wydajemy certyfikaty zgodne z PN-EN ISO 9606, akceptowane w całej UE, w UK, Norwegii i Niemczech."},
    {bar:"#f5b800",q:"Czy są kursy weekendowe i wieczorowe?",a:"Tak — 3 tryby: pełnoetatowy (pn–pt 8:00–16:00, 3–8 tygodni), wieczorowy (pn/śr/pt 16:00–21:00, 8–12 tygodni), oraz weekendowy (Sb–Nd 8:00–18:00, 8–14 tygodni). Wszystkie kończą się tym samym egzaminem UDT."},
  ];
  const [open,setOpen] = useState(0);
  return (
    <section style={{padding:"110px 0",background:"var(--paper)"}}>
      <div className="container" style={{display:"grid",gridTemplateColumns:"360px 1fr",gap:60}}>
        <div>
          <h2 className="display" style={{fontSize:46,margin:0}}>FAQ.</h2>
          <p style={{fontSize:15,color:"#43434a",marginTop:18,lineHeight:1.55}}>
            Najczęstsze pytania od kursantów. Nie znalazłeś odpowiedzi?
            Zadzwoń do nas: <b>32 308 47 12</b>, pn–pt 8:00–18:00.
          </p>
        </div>
        <div style={{borderTop:"1.5px solid #0c0c0d"}}>
          {data.map((d,i)=>(
            <div key={i} style={{borderBottom:"1.5px solid #0c0c0d",display:"grid",gridTemplateColumns:"14px 1fr"}}>
              <div style={{background:d.bar}}></div>
              <div>
                <button onClick={()=>setOpen(open===i?-1:i)}
                  style={{width:"100%",textAlign:"left",padding:"22px 24px",display:"flex",justifyContent:"space-between",alignItems:"center",gap:20,background:open===i?"#fffdf7":"transparent"}}>
                  <span style={{fontWeight:800,fontSize:15.5,letterSpacing:"-.01em"}}>{d.q}</span>
                  <span style={{width:32,height:32,border:"1.5px solid #0c0c0d",display:"grid",placeItems:"center",flex:"0 0 32px",background:open===i?"#0c0c0d":"#fff",color:open===i?"#fff":"#0c0c0d",fontWeight:700,fontSize:18}}>
                    {open===i?"–":"+"}
                  </span>
                </button>
                {open===i && (
                  <div style={{padding:"0 24px 24px",fontSize:14.5,color:"#43434a",lineHeight:1.6,maxWidth:680}}>{d.a}</div>
                )}
              </div>
            </div>
          ))}
        </div>
      </div>
    </section>
  );
}

/* ============ CONTACT ============ */
function Contact(){
  const [form,setForm] = useState({name:"",email:"",phone:"+48 ",reason:"individual",consent:false});
  const [sent,setSent] = useState(false);
  const [err,setErr] = useState({});
  function submit(e){
    e.preventDefault();
    const e2 = {};
    if(!form.name.trim()) e2.name = "Wpisz imię i nazwisko.";
    if(!/.+@.+\..+/.test(form.email)) e2.email = "Nieprawidłowy adres e-mail.";
    if(form.phone.replace(/\D/g,"").length < 9) e2.phone = "Wpisz numer telefonu (min. 9 cyfr).";
    if(!form.consent) e2.consent = "Wymagana zgoda na kontakt.";
    setErr(e2);
    if(Object.keys(e2).length===0) setSent(true);
  }
  if(sent){
    return (
      <section style={{background:"#f5efe4",padding:"100px 0"}}>
        <div className="container" style={{display:"grid",gridTemplateColumns:"1fr 1fr",gap:48,alignItems:"center"}}>
          <div>
            <div className="mono" style={{fontSize:11,letterSpacing:".2em",color:"#ff4d12",marginBottom:14}}>◢ ZGŁOSZENIE WYSŁANE</div>
            <h2 className="display" style={{fontSize:46,margin:"0 0 20px"}}>DZIĘKI, {form.name.split(" ")[0].toUpperCase()}.</h2>
            <p style={{fontSize:16,lineHeight:1.55,maxWidth:520,color:"#1a1a1c"}}>
              Doradca kursów odezwie się w ciągu <b>jednego dnia roboczego</b> na numer {form.phone || "podany przez Ciebie"}.
              W międzyczasie — pobierz katalog kursów 2026 (PDF, 4 MB).
            </p>
            <button onClick={()=>setSent(false)} style={{marginTop:30,background:"#0c0c0d",color:"#fff",padding:"14px 22px",fontWeight:800,fontSize:13,letterSpacing:".05em",textTransform:"uppercase"}}>Pobierz katalog 2026</button>
          </div>
          <div className="ph" style={{height:380}}>
            <div className="ph-label">PHOTO · uścisk dłoni, recepcja Weldjan Gliwice</div>
          </div>
        </div>
      </section>
    );
  }
  const inp = {width:"100%",padding:"14px 14px",fontSize:14.5,border:"1.5px solid #0c0c0d",background:"#fff",fontFamily:"inherit",outline:"none"};
  return (
    <section id="contact" style={{background:"#f5efe4",padding:"100px 0"}}>
      <div className="container" style={{display:"grid",gridTemplateColumns:"1fr 1fr",gap:48,alignItems:"start"}}>
        <div>
          <div className="mono" style={{fontSize:11,letterSpacing:".2em",color:"#ff4d12",marginBottom:14}}>◢ ZAPISZ SIĘ NA KURS</div>
          <h2 className="display" style={{fontSize:46,margin:"0 0 18px",lineHeight:.95}}>POROZMAWIAJMY.</h2>
          <p style={{fontSize:16,lineHeight:1.55,maxWidth:480,color:"#1a1a1c",marginBottom:32}}>
            Doradca kursów oddzwoni w 1 dzień roboczy. Pomoże dobrać metodę,
            harmonogram i — jeśli się kwalifikujesz — dofinansowanie z KFS/BUR.
          </p>
          <form onSubmit={submit} noValidate>
            <div style={{display:"grid",gap:14}}>
              <div>
                <label className="mono" style={{fontSize:10,letterSpacing:".18em",color:"#43434a"}}>IMIĘ I NAZWISKO *</label>
                <input style={inp} value={form.name} onChange={e=>setForm({...form,name:e.target.value})} />
                {err.name && <div style={{color:"#c1290e",fontSize:12,marginTop:5}}>{err.name}</div>}
              </div>
              <div>
                <label className="mono" style={{fontSize:10,letterSpacing:".18em",color:"#43434a"}}>E-MAIL *</label>
                <input type="email" style={inp} value={form.email} onChange={e=>setForm({...form,email:e.target.value})} />
                {err.email && <div style={{color:"#c1290e",fontSize:12,marginTop:5}}>{err.email}</div>}
              </div>
              <div>
                <label className="mono" style={{fontSize:10,letterSpacing:".18em",color:"#43434a"}}>TELEFON *</label>
                <input style={inp} value={form.phone} onChange={e=>setForm({...form,phone:e.target.value})} />
                {err.phone && <div style={{color:"#c1290e",fontSize:12,marginTop:5}}>{err.phone}</div>}
              </div>
              <div>
                <label className="mono" style={{fontSize:10,letterSpacing:".18em",color:"#43434a",marginBottom:10,display:"block"}}>POWÓD KONTAKTU *</label>
                <div style={{display:"grid",gap:8}}>
                  {[
                    {v:"individual",l:"Indywidualny zapis na kurs"},
                    {v:"company",l:"Szkolenie dla firmy / grupy"},
                    {v:"recert",l:"Recertyfikacja / przedłużenie uprawnień"},
                    {v:"funding",l:"Pytanie o dofinansowanie KFS/BUR"},
                  ].map(o=>(
                    <label key={o.v} style={{display:"flex",gap:10,alignItems:"center",padding:"10px 12px",border:"1.5px solid #0c0c0d",background:form.reason===o.v?"#0c0c0d":"#fff",color:form.reason===o.v?"#fff":"#0c0c0d",cursor:"pointer",fontWeight:600,fontSize:14}}>
                      <input type="radio" name="reason" checked={form.reason===o.v} onChange={()=>setForm({...form,reason:o.v})} style={{accentColor:"#ff4d12"}}/>
                      {o.l}
                    </label>
                  ))}
                </div>
              </div>
              <label style={{display:"flex",gap:10,alignItems:"flex-start",fontSize:12.5,color:"#43434a",lineHeight:1.5,marginTop:6}}>
                <input type="checkbox" checked={form.consent} onChange={e=>setForm({...form,consent:e.target.checked})} style={{marginTop:3,accentColor:"#ff4d12"}}/>
                <span>Zgadzam się na kontakt telefoniczny i e-mailowy w sprawie zapisu. Administratorem danych jest Weldjan Sp. z o.o. (Polityka prywatności).</span>
              </label>
              {err.consent && <div style={{color:"#c1290e",fontSize:12}}>{err.consent}</div>}
              <button type="submit" style={{marginTop:8,background:"#ff4d12",color:"#0c0c0d",padding:"16px 22px",fontWeight:800,fontSize:13,letterSpacing:".06em",textTransform:"uppercase",alignSelf:"start",display:"inline-flex",alignItems:"center",gap:10,border:"1.5px solid #0c0c0d"}}>
                Wyślij zgłoszenie <Arrow/>
              </button>
            </div>
          </form>
        </div>

        <div style={{position:"sticky",top:90}}>
          <div className="ph" style={{height:380,marginBottom:18}}>
            <div className="ph-label">PHOTO · spawacz przy tablicy WPS, hala Gliwice</div>
          </div>
          <div style={{display:"grid",gridTemplateColumns:"1fr 1fr",gap:14}}>
            {[
              {l:"GLIWICE",a:"ul. Pszczyńska 305",p:"32 308 47 12"},
              {l:"POZNAŃ",a:"ul. Hawelańska 6",p:"61 624 88 04"},
              {l:"GDAŃSK",a:"ul. Marynarki Polskiej 100",p:"58 770 22 19"},
              {l:"WROCŁAW",a:"otwarcie X.2026",p:"—",soon:true},
            ].map(loc=>(
              <div key={loc.l} style={{border:"1.5px solid #0c0c0d",padding:"18px 18px",background:loc.soon?"#f5efe4":"#fff"}}>
                <div className="display" style={{fontSize:16,marginBottom:4}}>{loc.l}</div>
                <div style={{fontSize:13,color:"#43434a",lineHeight:1.5}}>{loc.a}</div>
                {!loc.soon && <div className="mono" style={{fontSize:11,marginTop:8,color:"#ff4d12"}}>☎ {loc.p}</div>}
                {loc.soon && <div className="mono" style={{fontSize:10,marginTop:8,letterSpacing:".15em",color:"#888"}}>WKRÓTCE</div>}
              </div>
            ))}
          </div>
        </div>
      </div>
    </section>
  );
}

/* ============ NEWSLETTER ============ */
function Newsletter(){
  const [email,setEmail] = useState("");
  const [ok,setOk] = useState(false);
  return (
    <section style={{background:"#0c0c0d",color:"#fff",padding:"54px 0",borderTop:"1px solid #1a1a1c"}}>
      <div className="container" style={{display:"grid",gridTemplateColumns:"1fr 1.1fr",gap:48,alignItems:"center"}}>
        <div>
          <div className="mono" style={{fontSize:11,letterSpacing:".22em",color:"#ff7a3a",marginBottom:8}}>◢ NEWSLETTER WELDJAN</div>
          <h2 className="cond" style={{fontSize:38,margin:0,maxWidth:520}}>BĄDŹ PIERWSZY PRZY NABORACH I PROMOCJACH.</h2>
        </div>
        {ok ? (
          <div style={{fontSize:15,color:"#bdbdbd"}}>Zapisano. Sprawdź skrzynkę — przyszedł mail powitalny z kodem rabatowym -10% na pierwszy kurs.</div>
        ) : (
          <form onSubmit={e=>{e.preventDefault(); if(/.+@.+\..+/.test(email)) setOk(true);}} style={{display:"flex",gap:0,maxWidth:560,marginLeft:"auto",width:"100%"}}>
            <input type="email" value={email} onChange={e=>setEmail(e.target.value)} placeholder="twój@email.pl" style={{flex:1,padding:"16px 18px",fontSize:15,background:"transparent",color:"#fff",border:"1.5px solid #2a2a2e",borderRight:"none",fontFamily:"inherit",outline:"none"}}/>
            <button style={{background:"#ff4d12",color:"#0c0c0d",padding:"0 26px",fontWeight:800,fontSize:13,letterSpacing:".06em",textTransform:"uppercase"}}>Zapisz</button>
          </form>
        )}
      </div>
    </section>
  );
}

/* ============ FOOTER ============ */
function Footer(){
  const cols = [
    {h:"Szkoła",l:["O Weldjan","Akredytacje (UDT, TÜV, IIW)","Hale i sprzęt","Kariera","Kontakt"]},
    {h:"Kursy",l:["MAG 135","MAG 136","TIG 141","MMA 111","MIG 131","Gazowe 311","Cięcie plazmowe"]},
    {h:"Dla firm",l:["Szkolenia zamknięte","Audyt umiejętności","Recertyfikacja","Wyjazd trenera","Procedury WPS/WPQR"]},
    {h:"Materiały",l:["Katalog 2026 (PDF)","Cennik","Blog spawacza","FAQ","Polityka prywatności","Regulamin"]},
  ];
  return (
    <footer style={{background:"#0c0c0d",color:"#dcdcdc"}}>
      <div className="container" style={{padding:"64px 28px 28px"}}>
        <div style={{display:"grid",gridTemplateColumns:"1.2fr 1fr 1fr 1fr 1fr",gap:32,marginBottom:48}}>
          <div>
            <Logo dark/>
            <p style={{fontSize:13,lineHeight:1.55,color:"#9a9a9a",marginTop:20,maxWidth:280}}>
              Polska szkoła spawania od 1998 roku. Akredytowany ośrodek
              szkoleniowo-egzaminacyjny UDT-CERT nr 47/UDT/2014.
            </p>
            <div className="mono" style={{fontSize:11,letterSpacing:".15em",color:"#ff7a3a",marginTop:18}}>☎ 32 308 47 12 · pn–pt 8–18</div>
          </div>
          {cols.map(c=>(
            <div key={c.h}>
              <div className="mono" style={{fontSize:10,letterSpacing:".22em",color:"#fff",marginBottom:16}}>{c.h.toUpperCase()}</div>
              <ul style={{listStyle:"none",padding:0,margin:0,display:"grid",gap:8}}>
                {c.l.map(x=>(<li key={x} style={{fontSize:13.5,color:"#bdbdbd",cursor:"pointer"}}>{x}</li>))}
              </ul>
            </div>
          ))}
        </div>
        <div style={{borderTop:"1px solid #1a1a1c",paddingTop:22,display:"flex",justifyContent:"space-between",fontSize:12,color:"#6b6b6b",flexWrap:"wrap",gap:10}}>
          <div>© 1998–2026 Weldjan Sp. z o.o., NIP 631-22-87-014</div>
          <div className="mono" style={{letterSpacing:".15em"}}>◢ WELDED IN POLAND</div>
        </div>
      </div>
    </footer>
  );
}

/* ============ APP ============ */
function App(){
  const contactRef = useRef(null);
  const scrollToContact = () => {
    const el = document.getElementById("contact");
    if(el) window.scrollTo({top:el.offsetTop - 70, behavior:"smooth"});
  };
  return (
    <div>
      <Nav onCTA={scrollToContact}/>
      <Hero onCTA={scrollToContact}/>
      <TrustBar/>
      <ThreeCards/>
      <TwoTracks/>
      <Builders/>
      <Courses/>
      <Testimonials/>
      <Instructors/>
      <FAQ/>
      <Contact/>
      <Newsletter/>
      <Footer/>
    </div>
  );
}

ReactDOM.createRoot(document.getElementById("root")).render(<App/>);