// page-losninger-v2.jsx — overview that links into 4 dedicated service pages

function PageLosningerV2({ setRoute }) {
  return (
    <div className="page">
      <header className="page-header">
        <div className="ph-bg"/>
        <div className="wrap">
          <div className="intro-banner">
            <h1 className="h-display">
              Fire fagområder<br/>
              <em style={{color:'var(--accent)', fontStyle:'normal'}}>
                Én entreprenør
              </em>
            </h1>
            <p className="lead">
              Hver fagdisciplin har egne folk, eget materiel og egen projektleder — koordineret af én ansvarlig.
            </p>
          </div>
        </div>
      </header>

      <section className="section">
        <div className="wrap">
          <div className="losninger-overview">
            {SERVICES_V2.map(s => (
              <div key={s.slug} className="losninger-card" onClick={() => setRoute(s.slug)} role="link">
                <div className="lc-no">{s.no} / 04</div>
                <h3>{s.title}</h3>
                <div className="lc-sub">{s.sub}</div>
                <p className="lc-desc" style={{maxWidth:'42ch'}}>{s.blurb}</p>
                <div className="lc-foot">
                  <span>Læs mere om {s.title.toLowerCase()}</span>
                  <ArrowV2 size={14} color="currentColor"/>
                </div>
              </div>
            ))}
          </div>
        </div>
      </section>

      {/* Rental CTA #3 — Løsninger overview */}
      <RentCTA
        title={<>Brug for en maskine — <em>ikke et helt projekt?</em></>}
        label="Til udlejning"
      />

      {/* Cross-discipline section */}
      <section className="section slate">
        <div className="wrap">
          <div className="section-head" style={{marginBottom:40}}>
            <div>
              <h2 className="h-section" style={{marginTop:0, maxWidth:'18ch'}}>
                Vi koordinerer<br/>
                <em style={{color:'var(--accent-bright)', fontStyle:'normal'}}>fagene</em>, ikke kun<br/>
                fagfolkene.
              </h2>
            </div>
            <div>
              <p className="body" style={{maxWidth:'52ch'}}>
                For en bygherre er det ikke fundering og kloak og asfalt — det er ét projekt. Vores projektledelse arbejder altid på tværs af entrepriser, så grænseflader bliver vores problem, ikke jeres.
              </p>
            </div>
          </div>
          <div style={{
            display:'grid',
            gridTemplateColumns:'repeat(3, 1fr)',
            gap:1,
            background:'rgba(255,255,255,0.12)',
            border:'1px solid rgba(255,255,255,0.12)'
          }}>
            {[
              {n:'A — Egen maskinpark', t:'36 enheder, ingen ventetid', d:'Gravemaskiner, dumpere, asfaltudlæggere og tromler. Vi venter aldrig på en underleverandørs maskine.'},
              {n:'B — Egne folk',       t:'Det samme hold, hele vejen', d:'Pladsformand, sjakbajs og maskinfører kender hinanden fra forrige projekt — den hurtigste kommunikation, vi kender.'},
              {n:'C — Tværfaglig plan', t:'Ét gantt-skema, alle fag',   d:'Vi planlægger som ét hold, ikke fire. Grænseflader er allerede løst på planen — så de ikke skal genforhandles på pladsen.'}
            ].map((v,i) => (
              <div key={i} style={{
                background:'var(--main-2)',
                padding:'48px 36px',
                minHeight:280,
                display:'flex', flexDirection:'column', gap:14
              }}>
                <div style={{
                  fontFamily:'var(--f-serif)', fontStyle:'italic',
                  color:'var(--accent-bright)', fontSize:14, letterSpacing:'0.05em'
                }}>{v.n}</div>
                <h4 style={{
                  fontFamily:'var(--f-display)', fontWeight:800,
                  fontSize:26, textTransform:'uppercase',
                  letterSpacing:'-0.015em', margin:0, color:'#fff'
                }}>{v.t}</h4>
                <p style={{margin:0, color:'rgba(255,255,255,0.82)', fontSize:14, lineHeight:1.6}}>{v.d}</p>
              </div>
            ))}
          </div>
        </div>
      </section>

      <CTABandV2
        setRoute={setRoute}
        heading={<>Brug os som <em>én indgang</em></>}
        sub="Få et projektmøde med en projektleder, der kan tale på vegne af alle fire fagområder. Vi vender tilbage inden 24 timer."
      />
    </div>
  );
}

window.PageLosningerV2 = PageLosningerV2;
window.PageLosninger = PageLosningerV2;