// page-losninger.jsx — Løsninger

const LOSNINGER_SERVICES = [
  {
    no: "01",
    slug: "erhverv",
    title: "Byggeprojekter, erhverv",
    sub: "Hovedentreprise · totalentreprise · fagentreprise",
    desc: "Vi bygger industri, logistik, kontor og produktion. Fra første jordbundsundersøgelse til afsluttende myndighedssyn — én entreprenør, ét regnskab, én projektleder.",
    bullets: [
      "Råhus i in-situ og elementbeton",
      "Fundering inkl. pæleramning",
      "Stålkonstruktioner og tagdækning",
      "Klimaskærm til CO₂-klasse",
      "Tæthedsprøvning og blower-door",
      "Aflevering til DGNB-niveau",
    ],
    stat: ["28.000 m²", "Største projekt i 2024"],
    icon: "◰"
  },
  {
    no: "02",
    slug: "infra",
    title: "Infrastrukturprojekter",
    sub: "Veje · broer · forsyning",
    desc: "Vi leverer den infrastruktur, der binder regioner sammen. Bro­konstruktioner, motorvejs­tilslutninger, regnvands­anlæg og forsyningsledninger — udført med myndigheds­dialog og trafik­afvikling som en del af regningen.",
    bullets: [
      "Bro- og tunnelkonstruktion",
      "Vejasfalt og vejmarkering",
      "Sluser, pumpestationer og afløb",
      "Fjernvarme, fiber og el-tracé",
      "Trafikregulering og myndighedssyn",
      "GPS-styret afsætning",
    ],
    stat: ["6,2 km", "Længste enkeltstrækning"],
    icon: "≡"
  },
  {
    no: "03",
    slug: "anlaeg",
    title: "Anlægsprojekter",
    sub: "Jord · kloak · beton · asfalt",
    desc: "Vores anlægsfolk er pladsens rygrad. Vi laver klassisk anlægsentreprise — udført med moderne maskiner og en planlægning, der respekterer både jordbund og nabolag.",
    bullets: [
      "Råjord, muld og terrænregulering",
      "Separatkloak og regnvandshåndtering",
      "In-situ beton og fundamenter",
      "Asfalt­arbejder og belægninger",
      "Stenarbejde og granit­løsninger",
      "Bæredygtige genbrugsmaterialer",
    ],
    stat: ["120.000 m³", "Flyttet jord 2025"],
    icon: "▰"
  },
  {
    no: "04",
    slug: "natur",
    title: "Naturgenopretning & Kystsikring",
    sub: "Stenbeskyttelse · diger · vådområder",
    desc: "Vi arbejder med naturen, ikke imod den. DM er ledende på kystsikring i Vestjylland og leverer projekter, hvor biodiversitet, klimasikring og rekreativ værdi går hånd i hånd.",
    bullets: [
      "Højvandsdiger og dæmninger",
      "Stenbeskyttelse og bølgebrydere",
      "Strandfodring og kystprofiler",
      "Genslyngning af vandløb",
      "Vådområder og biotop",
      "Skov- og habitatpleje",
    ],
    stat: ["14", "Aktive klimaprojekter"],
    icon: "≈"
  },
];

function PageLosninger({ setRoute }) {
  const [active, setActive] = React.useState("erhverv");
  const cur = LOSNINGER_SERVICES.find(s => s.slug === active);

  return (
    <div className="page">
      <header className="page-header">
        <div className="ph-bg"></div>
        <div className="wrap">
          <div className="crumbs">
            <span>Forside</span>
            <span>/</span>
            <em>Løsninger</em>
          </div>
          <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">
              Vi er specialister, men leverer som generalister. Hver fagdisciplin har egne folk, eget materiel og egen projektleder — koordineret af én ansvarlig.
            </p>
          </div>
        </div>
      </header>

      {/* Service tabs */}
      <section className="section tight">
        <div className="wrap">
          <div style={{
            display:'grid',
            gridTemplateColumns:`repeat(${LOSNINGER_SERVICES.length}, 1fr)`,
            gap:1,
            background:'var(--rule)',
            border:'1px solid var(--rule)',
            marginBottom:64
          }}>
            {LOSNINGER_SERVICES.map(s => (
              <button
                key={s.slug}
                onClick={() => setActive(s.slug)}
                style={{
                  background: active === s.slug ? 'var(--accent)' : 'var(--bg)',
                  color: active === s.slug ? 'var(--hvid)' : 'var(--ink)',
                  border:0,
                  cursor:'pointer',
                  textAlign:'left',
                  padding:'28px 24px',
                  display:'flex',
                  flexDirection:'column',
                  gap:8,
                  fontFamily:'var(--f-display)',
                  transition:'background .2s'
                }}>
                <span style={{
                  fontFamily:'var(--f-serif)',
                  fontStyle:'italic',
                  fontSize:14,
                  opacity:0.75
                }}>{s.no} / 04</span>
                <span style={{
                  fontWeight:800,
                  fontSize:'clamp(14px, 1.4vw, 18px)',
                  textTransform:'uppercase',
                  letterSpacing:'-0.005em',
                  lineHeight:1.1
                }}>{s.title}</span>
              </button>
            ))}
          </div>

          {/* Active detail */}
          <div style={{display:'grid', gridTemplateColumns:'minmax(0, 1.1fr) minmax(0, 1fr)', gap:64, alignItems:'start'}} className="losning-detail">
            <div>
              <div className="eyebrow">{cur.no} / 04 · <span className="serif-it">{cur.sub}</span></div>
              <h2 className="h-section" style={{marginTop:20}}>{cur.title}</h2>
              <p className="lead" style={{marginTop:28, fontSize:'clamp(22px, 2.4vw, 32px)'}}>
                {cur.desc}
              </p>

              <div className="specs" style={{marginTop:48}}>
                <div className="spec">
                  <div className="l">Største projekt</div>
                  <div className="v">{cur.stat[0]}<em> sidste år</em></div>
                </div>
                <div className="spec">
                  <div className="l">Egen maskinpark</div>
                  <div className="v">36 <em>enheder</em></div>
                </div>
                <div className="spec">
                  <div className="l">Specialiserede folk</div>
                  <div className="v">{[42, 38, 56, 22][LOSNINGER_SERVICES.indexOf(cur)]}</div>
                </div>
                <div className="spec">
                  <div className="l">Aktive projekter</div>
                  <div className="v">{[8, 5, 11, 6][LOSNINGER_SERVICES.indexOf(cur)]}</div>
                </div>
              </div>

              <div style={{marginTop:48}}>
                <div className="label-tiny" style={{marginBottom:20}}>Ydelser i denne kategori</div>
                <ul style={{listStyle:'none', padding:0, margin:0, display:'grid', gridTemplateColumns:'1fr 1fr', gap:'12px 32px'}}>
                  {cur.bullets.map((b, i) => (
                    <li key={i} style={{fontSize:15, lineHeight:1.55, color:'var(--ink-soft)', display:'flex', gap:14, alignItems:'baseline'}}>
                      <span style={{color:'var(--accent)', fontFamily:'var(--f-serif)', fontStyle:'italic', flexShrink:0}}>{String(i+1).padStart(2,'0')}</span>
                      <span>{b}</span>
                    </li>
                  ))}
                </ul>
              </div>

              <div style={{marginTop:48, display:'flex', gap:12, flexWrap:'wrap'}}>
                <button className="btn" onClick={() => setRoute("kontakt")}>
                  Forespørg {cur.title.toLowerCase()} <Arrow size={14}/>
                </button>
                <button className="btn ghost" onClick={() => setRoute("beregner")}>
                  Beregn tidsplan
                </button>
              </div>
            </div>
            <div style={{position:'sticky', top:100}}>
              <ImageBlock id={`losning-${cur.slug}`} label={`${cur.title} · pladsfoto`} aspect="3-4" placeholderIcon={cur.icon}/>
              <div style={{
                marginTop:24,
                padding:'24px 28px',
                background:'var(--bg-alt)',
                border:'1px solid var(--rule)',
                display:'flex',
                gap:20,
                alignItems:'center'
              }}>
                <ChevSVG size={32}/>
                <div>
                  <div className="label-tiny">Brug for sparring?</div>
                  <div style={{fontFamily:'var(--f-display)', fontWeight:700, fontSize:16, marginTop:4}}>
                    Ring direkte til afdelingsleder
                  </div>
                  <div style={{fontFamily:'var(--f-display)', fontWeight:700, color:'var(--accent)', marginTop:8}}>
                    +45 70 26 04 12
                  </div>
                </div>
              </div>
            </div>
          </div>
        </div>
      </section>

      {/* Cross-discipline */}
      <section className="section deep">
        <div className="wrap">
          <div className="section-head" style={{marginBottom:40}}>
            <div>
              <div className="eyebrow">På tværs · <span className="serif-it">det vi gør anderledes</span></div>
              <h2 className="h-section" style={{marginTop:20, maxWidth:'18ch'}}>Vi koordinerer<br/><em className="serif-it" style={{color:'var(--accent)'}}>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 className="values" style={{borderTop:0, borderBottom:0}}>
            <div className="value">
              <div className="num">A — Egen maskinpark</div>
              <h4>36 enheder, ingen ventetid</h4>
              <p>Gravemaskiner, dumpere, asfaltsudlæggere, vibrationstromler. Vi venter aldrig på en underleverandørs maskine — det betyder dage sparet pr. milepæl.</p>
            </div>
            <div className="value">
              <div className="num">B — Egne folk</div>
              <h4>Det samme hold, hele vejen</h4>
              <p>Pladsformand, sjakbajs og maskinfører kender hinanden fra forrige projekt. Det er den hurtigste form for kommunikation, vi har fundet.</p>
            </div>
            <div className="value">
              <div className="num">C — Tværfaglig planlægning</div>
              <h4>Ét gantt-skema, alle fag</h4>
              <p>Vi planlægger som ét hold, ikke fire. Grænseflader er allerede løst på planen — så de ikke skal genforhandles på pladsen.</p>
            </div>
          </div>
        </div>
      </section>

      <CTABand
        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.PageLosninger = PageLosninger;