// Quick City — Page components (Phase 1: home pages + career as proof of concept)
const { useState: useS, useEffect: useE } = React;

// IfmHome and LnsHome are defined in pages-home.jsx

function CareerPage({ brand }) {
  const data = window.CAREER_DATA[brand];
  const b = window.QC_DATA.brands[brand];
  const [activeType, setType] = useS('all');
  const [modal, setModal] = useS(null); // { title, job? }
  const [submitted, setSubmitted] = useS(false);

  const types = [...new Set(data.jobs.map(j => j.type))];
  const list = activeType === 'all' ? data.jobs : data.jobs.filter(j => j.type === activeType);

  const open = (title, job) => { setSubmitted(false); setModal({ title, job }); };
  const close = () => { setModal(null); setSubmitted(false); };

  return (
    <Layout brand={brand}>
      <section className="hero">
        <div className="container">
          <div className="hero__eyebrow">Karriere bei {b.name}</div>
          <h1>{brand === 'ifm' ? <>Bauen Sie<br/>mit uns auf, <strong>was bleibt.</strong></> : <>Berlin<br/>braucht <strong>Macher.</strong></>}</h1>
          <p>{brand === 'ifm'
            ? 'Wir suchen Menschen, die Verantwortung übernehmen — vom Vorarbeiter mit grünem Daumen bis zum Bauleiter mit Weitblick.'
            : 'Wir bauen die Infrastruktur, von der die Stadt lebt — Glasfaser, Straßen, Versorgungsleitungen.'}</p>
          <div className="hero__ctas">
            <a className="btn btn--primary" href="#stellen">Stellen ansehen</a>
            <a className="btn btn--ghost" href="#" onClick={e=>{e.preventDefault(); open('Initiativbewerbung');}}>Initiativbewerbung</a>
          </div>
        </div>
      </section>

      <section className="stats">
        <div className="container">
          <div className="stats__grid">
            {data.stats.map(s => (
              <div className="stat" key={s.label}>
                <div className="stat__num">{s.num}</div>
                <div className="stat__label">{s.label}</div>
              </div>
            ))}
          </div>
        </div>
      </section>

      <section className="section">
        <div className="container">
          <div className="section__h">Warum Quick City</div>
          <h2 className="section__title">Was Sie bei uns erwartet.</h2>
          <div className="svc-grid">
            {data.benefits.map((b,i) => (
              <div key={i} className="svc-card" style={{cursor:'default'}}>
                <div className="svc-card__deco" style={{fontSize:14, fontWeight:700, letterSpacing:'0.18em', color:'var(--accent)', opacity:1}}>{String(i+1).padStart(2,'0')}</div>
                <div className="svc-card__title">{b.t}</div>
                <div className="svc-card__sub">{b.d}</div>
              </div>
            ))}
          </div>
        </div>
      </section>

      <section id="stellen" className="section section--alt">
        <div className="container">
          <div className="section__h">Offene Stellen</div>
          <h2 className="section__title">Aktuell ausgeschriebene Positionen.</h2>
          <p className="section__sub">Filtern Sie nach Bereich. Klicken Sie eine Stelle an, um sich direkt zu bewerben.</p>
          <div className="chips" style={{marginBottom:24}}>
            <button className={'chip' + (activeType==='all'?' active':'')} onClick={()=>setType('all')}>Alle ({data.jobs.length})</button>
            {types.map(t => (
              <button key={t} className={'chip' + (activeType===t?' active':'')} onClick={()=>setType(t)}>{t} ({data.jobs.filter(j=>j.type===t).length})</button>
            ))}
          </div>
          <div style={{fontSize:13, color:'#777', marginBottom:16}}>{list.length} offene Stelle{list.length===1?'':'n'}</div>
          <div style={{display:'flex', flexDirection:'column'}}>
            {list.map((j,i) => (
              <div key={j.id} onClick={()=>open(j.title, j)} style={{
                background:'#fff', borderTop: i===0?'1px solid #ececec':'none', borderBottom:'1px solid #ececec',
                padding:'22px 24px', display:'flex', alignItems:'center', gap:24, cursor:'pointer',
                borderRadius: i===0 ? '8px 8px 0 0' : (i===list.length-1?'0 0 8px 8px':'0')
              }}>
                <div style={{flex:1}}>
                  <div style={{fontSize:17, fontWeight:600, marginBottom:6}}>{j.title}</div>
                  <div style={{display:'flex', gap:16, fontSize:13, color:'#666', flexWrap:'wrap'}}>
                    <span>📍 {j.location}</span><span>⏱ {j.schedule}</span><span>· {j.type}</span>
                  </div>
                </div>
                {j.urgent && <span style={{background:'var(--accent)', color:'#fff', fontSize:10, fontWeight:700, letterSpacing:'0.14em', textTransform:'uppercase', padding:'4px 10px', borderRadius:3}}>Dringend</span>}
                <span style={{color:'#999', fontSize:20}}>→</span>
              </div>
            ))}
          </div>
        </div>
      </section>

      <Modal open={!!modal} onClose={close}>
        {modal && !submitted && (
          <>
            <div style={{fontSize:11, letterSpacing:'0.16em', textTransform:'uppercase', color:'var(--accent)', fontWeight:700, marginBottom:12}}>
              {modal.job ? 'Bewerbung' : 'Initiativbewerbung'}
            </div>
            <h3 style={{fontSize:26, fontWeight:600, marginBottom:6}}>{modal.title}</h3>
            <div style={{fontSize:13, color:'#666', marginBottom:28}}>
              {modal.job ? `${modal.job.location} · ${modal.job.schedule} · ${modal.job.type}` : 'Wir freuen uns auf Sie'}
            </div>
            <form onSubmit={e=>{e.preventDefault(); setSubmitted(true);}}>
              <div style={{display:'grid', gridTemplateColumns:'1fr 1fr', gap:14, marginBottom:16}}>
                <Field label="Vorname *" name="firstname" required />
                <Field label="Nachname *" name="lastname" required />
              </div>
              <div style={{display:'grid', gridTemplateColumns:'1fr 1fr', gap:14, marginBottom:16}}>
                <Field label="E-Mail *" name="email" type="email" required />
                <Field label="Telefon" name="phone" type="tel" />
              </div>
              <Field label="Nachricht / Motivation" name="message" textarea />
              <Field label="Lebenslauf (PDF)" name="cv" type="file" />
              <div style={{display:'flex', gap:12, alignItems:'center', marginTop:24, paddingTop:20, borderTop:'1px solid #eee', flexWrap:'wrap'}}>
                <button type="submit" className="btn btn--primary">Bewerbung senden</button>
                <a href={`mailto:${b.jobsEmail}?subject=Bewerbung: ${encodeURIComponent(modal.title)}`} style={{color:'var(--accent)', fontWeight:500, fontSize:14}}>oder per E-Mail an {b.jobsEmail}</a>
              </div>
            </form>
          </>
        )}
        {submitted && (
          <div style={{padding:'32px 0', textAlign:'center'}}>
            <div style={{width:56, height:56, borderRadius:'50%', background:'var(--accent)', color:'#fff', display:'flex', alignItems:'center', justifyContent:'center', fontSize:28, margin:'0 auto 16px'}}>✓</div>
            <h3 style={{fontSize:24, fontWeight:600, marginBottom:8}}>Vielen Dank!</h3>
            <p style={{fontSize:15, color:'#555', lineHeight:1.6}}>Ihre Bewerbung ist eingegangen. Wir melden uns innerhalb von 5 Werktagen.</p>
          </div>
        )}
      </Modal>
    </Layout>
  );
}

function Field({ label, name, type='text', textarea, required }) {
  return (
    <div style={{marginBottom:16}}>
      <label style={{display:'block', fontSize:12, fontWeight:600, letterSpacing:'0.04em', color:'#555', marginBottom:6, textTransform:'uppercase'}}>{label}</label>
      {textarea
        ? <textarea name={name} required={required} style={{width:'100%', padding:'12px 14px', border:'1px solid #ddd', borderRadius:4, fontSize:14, fontFamily:'inherit', minHeight:90, resize:'vertical'}} />
        : <input type={type} name={name} required={required} style={{width:'100%', padding:'12px 14px', border:'1px solid #ddd', borderRadius:4, fontSize:14, fontFamily:'inherit'}} />}
    </div>
  );
}

function Stub({ brand, title }) {
  const b = window.QC_DATA.brands[brand];
  return (
    <Layout brand={brand}>
      <section className="hero">
        <div className="container">
          <div className="hero__eyebrow">{b ? b.name : 'Quick City'}</div>
          <h1>{title || 'Seite nicht gefunden'}</h1>
          <p>Die aufgerufene Seite existiert nicht oder wurde verschoben. Über das Menü oder die Startseite finden Sie zurück.</p>
          <div className="hero__ctas">
            <a className="btn btn--primary" href={'/' + brand}>Zur Startseite</a>
            <a className="btn btn--ghost" href={'/' + brand + '/kontakt'}>Kontakt</a>
          </div>
        </div>
      </section>
    </Layout>
  );
}

Object.assign(window, { CareerPage, Stub });