// page-service.jsx — dedicated service pages (one component, per-slug content)
// Routes: erhverv, infrastruktur, anlaeg, natur

const SERVICE_DETAIL = {
  erhverv: {
    no: "01",
    title: "Erhvervsbyggeri",
    sub: "Hovedentreprise · totalentreprise · fagentreprise",
    icon: "◰",
    intro: "Vi bygger industri, logistik, kontor og produktion. Fra første jordbundsundersøgelse til afsluttende myndighedssyn — én entreprenør, ét regnskab, én projektleder.",
    bullets: [
      "Betonarbejde",
      "Borede betonfundamenter",
      "Pælefundering",
      "Jord- og sandarbejde",
      "Belægningsarbejde",
      "Fundering",
      "In-situ støbning"
    ],
    specs: [
      { l: "Største projekt", v: "28.000", e: " m²" },
      { l: "Egne specialister", v: "42" },
      { l: "Aktive projekter", v: "8" },
      { l: "Aflevering til tid", v: "96", e: "%" }
    ],
    detailHeading: "Sådan bygger vi erhverv",
    detailParas: [
      "Erhvervsbyggeri har to konstante udfordringer: leveringssikkerhed på materialer og koordinering mellem fag. Vi løser begge ved at planlægge baglæns fra ibrugtagningsdatoen — og ved at have råhus, fundering og klimaskærm i samme firma.",
      "Vi tager altid en grundig forprojektering: vi besigtiger grunden, gennemgår geotekniske rapporter og laver et realistisk tidsforløb, før vi byder. Så holder både tilbud og deadline."
    ],
    refs: [
      { t: "Boxbutik, Skejby - Aarhus",  d: "28.000 m² · 2024",     tag: "Totalentreprise"  },
      { t: "Telemast, Ringsted", d: "11.400 m² · 2023",     tag: "Hovedentreprise"  },
      { t: "Projekt kommer snart", d: "16.800 m² · 2025",    tag: "Fagentreprise"    }
    ],
    rentCta: false
  },

  infrastruktur: {
    no: "02",
    title: "Infrastruktur",
    sub: "Veje · broer · forsyning · myndighedsdialog",
    icon: "≡",
    intro: "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: [
      "Fjernvarme",
      "El- og vand",
      "Varmeforsyning",
      "Kloaknet",
      "Bundopbygning",
      "Trafikhåndtering",
      "Asfalt- og vejmarkering",
      "LAR-løsninger"
    ],
    specs: [
      { l: "Længste enkeltstrækning", v: "6,2", e: " km" },
      { l: "Egne specialister", v: "38" },
      { l: "Aktive projekter", v: "5" },
      { l: "Myndigheds-godkendelser", v: "100", e: "%" }
    ],
    detailHeading: "Sådan bygger vi infrastruktur",
    detailParas: [
      "Infrastrukturprojekter er aldrig kun et entrepriseproblem — de er også et myndighedsproblem og et trafikproblem. Vi tager den koordinering på os fra dag ét, så bygherre ikke skal være proxy mellem fire forskellige forvaltninger.",
      "Vores GPS-styrede maskiner og 3D-projekter giver afsætning til centimeter — og vores erfaring fra Vejdirektoratets rammeaftaler betyder, at vi kender procedurerne for både trafikomlægning, signalplaner og udfaldsrum."
    ],
    refs: [
      { t: "Motorvejsudvidelse, Horsens",    d: "Aarhus N · 41 uger", tag: "Brokonstruktion" },
      { t: "Spildevandsomlægning, Tilst - Aarhus",    d: "4,8 km · 2024",      tag: "Forsyning" },
      { t: "Fjernvarmenedgravning, Assentoft",  d: "14 mdr. · 2025",     tag: "Vandbygning" }
    ],
    rentCta: false
  },

  anlaeg: {
    no: "03",
    title: "Anlæg",
    sub: "Jord · kloak · beton · asfalt",
    icon: "▰",
    intro: "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",
      "Kalkstabilisering",
      "Asfaltarbejde",
      "Jordgenanvendelse",
      "Planering",
      "Jordhåndtering",
      "Jordprøver til godkendelse",
      "Blødbundsudskiftning"
    ],
    specs: [
      { l: "Flyttet jord 2025", v: "120.000", e: " m³" },
      { l: "Egne specialister", v: "56" },
      { l: "Aktive projekter", v: "11" },
      { l: "Genbrugsfraktion", v: "72", e: "%" }
    ],
    detailHeading: "Sådan udfører vi anlæg",
    detailParas: [
      "Anlæg er det, vi blev grundlagt på. Vi har 28 års erfaring med kloak, jord og beton i Sønderjylland — og dén erfaring betyder, at vi læser jorden, før vi graver i den. Vi tager prøver, vi laver risikoanalyser, og vi ringer altid bygherre før vi sender en regning på uventet jord.",
      "Vores asfalt- og betonhold arbejder med samme planlægning som vores råhus­folk: faste milepæle, faste tolerancer og en simpel regel — hvis du ikke kan måle det, så bygger vi det ikke."
    ],
    refs: [
      { t: "Regnvandsbasin, Thorshøjvej",   d: "2,1 km · 2024",  tag: "Asfalt & afvanding" },
      { t: "Jordregulering, Drastrup", d: "8,4 km · 2025",  tag: "Kloakanlæg" },
      { t: "Muldarbejder, E45", d: "94.000 m² · 2024", tag: "Terrænregulering" }
    ],
    rentCta: true  // best fit: showcase rental option here
  },

  natur: {
    no: "04",
    title: "Naturgenopretning",
    sub: "Stenbeskyttelse · diger · vådområder",
    icon: "≈",
    intro: "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: [
      "Ågenslyng",
      "Mini-vådområder",
      "Grøftoprensning",
      "Stendiger",
      "Vådområder og biotop",
      "Skov- og habitatpleje",
      "Habitat- og fugleregistrering",
      "Materialer fra lokale brud"
    ],
    specs: [
      { l: "Aktive klimaprojekter", v: "14" },
      { l: "Egne specialister", v: "22" },
      { l: "Kyststrækning sikret", v: "11,4", e: " km" },
      { l: "Habitatzone-godkendt", v: "100", e: "%" }
    ],
    detailHeading: "Sådan arbejder vi med naturen",
    detailParas: [
      "Naturgenopretning kræver en anden form for tålmodighed end almindelig anlægsentreprise. Vi planlægger omkring yngletider, gydevandring og vandstandsudsving — og vi arbejder altid sammen med kommunens biolog og DCE før første spadestik.",
      "Vores kystsikringsprojekter på Vestkysten er udført under hårde vinde og høj vandstand. Vi har egne fartøjer til dumping af sten og fast samarbejde med GEUS for kystprofiler."
    ],
    refs: [
      { t: "Genslyngning, Vejen Mose",          d: "18 t · 2025",      tag: "Marin habitat" },
      { t: "Å-genslyng, Sandvig",        d: "84 ha · 2024",     tag: "Biotop" },
      { t: "GRØFTOPRENSING - HOLLANDSBJERGS ENGE", d: "Esbjerg · 6,2 km", tag: "Kystsikring" }
    ],
    rentCta: false
  }
};

function PageService({ setRoute, slug }) {
  const s = SERVICE_DETAIL[slug];
  if (!s) {
    return (
      <div className="page">
        <header className="page-header">
          <div className="wrap">
            <h1 className="h-display">Side ikke fundet</h1>
            <button className="btn ghost" style={{marginTop:32}} onClick={() => setRoute("home")}>
              Til forsiden <ArrowV2/>
            </button>
          </div>
        </header>
      </div>
    );
  }

  // Related = other 3 services
  const related = SERVICES_V2.filter(x => x.slug !== slug);

  return (
    <div className="page pal-full">
      {/* Service hero (full-bleed) */}
      <header className="service-hero service-hero-full">
        <ImageBlock
          id={`v2-service-${slug}`}
          label={`${s.title} · pladsfoto`}
          placeholderIcon={s.icon}
          className="brand-photo fill-abs"
        />
        <div className="hero-full-scrim"/>
        <div className="wrap hero-full-content">
          <h1 className="h-display hero-full-h1" style={{fontSize:'clamp(34px, 6vw, 110px)', overflowWrap:'break-word', wordBreak:'break-word', hyphens:'auto'}}>
            {s.title === "Naturgenopretning" ? <React.Fragment>Natur-<br/>genopretning</React.Fragment> : s.title}
          </h1>
          <p className="lead hero-full-lead">{s.intro}</p>
        </div>
      </header>

      {/* Detail section */}
      <section className="section">
        <div className="wrap">
          <div className="service-twocol">
            <div>
              <h2 className="h-section" style={{marginTop:0, marginBottom:24, maxWidth:'18ch'}}>
                {slug === 'erhverv'   && <>En entreprise<br/><em style={{color:'var(--accent)', fontStyle:'normal'}}>Et regnskab</em></>}
                {slug === 'infrastruktur' && <>Vejene <em style={{color:'var(--accent)', fontStyle:'normal'}}>der binder</em><br/>Danmark sammen</>}
                {slug === 'anlaeg'    && <>Klassisk anlæg<br/><em style={{color:'var(--accent)', fontStyle:'normal'}}>Nye maksiner</em></>}
                {slug === 'natur'     && <>Vi genskaber<br/><em style={{color:'var(--accent)', fontStyle:'normal'}}>naturen</em></>}
              </h2>
              {s.detailParas.map((p,i) => (
                <p key={i} className="body" style={{maxWidth:'58ch', marginBottom:18}}>{p}</p>
              ))}

              <div className="specs" style={{marginTop:48}}>
                {s.specs.map((sp, i) => (
                  <div key={i} className="spec">
                    <div className="l">{sp.l}</div>
                    <div className="v">{sp.v}{sp.e && <em>{sp.e}</em>}</div>
                  </div>
                ))}
              </div>

              <div style={{marginTop:48}}>
                <div className="label-tiny" style={{marginBottom:20, fontSize:16}}>Ydelser i denne kategori</div>
                <ul style={{
                  listStyle:'none', padding:0, margin:0,
                  display:'grid', gridTemplateColumns:'1fr 1fr', gap:'12px 32px'
                }}>
                  {s.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)',
                        flexShrink:0
                      }}>—</span>
                      <span style={{fontSize:16}}>{b}</span>
                    </li>
                  ))}
                </ul>
              </div>
            </div>

            {/* Right column — sticky info */}
            <div style={{position:'sticky', top:120, display:'flex', flexDirection:'column', gap:16}}>
              <div style={{
                padding:'24px 28px',
                background:'var(--neutral)',
                border:'1px solid var(--rule)',
                display:'flex', gap:16, alignItems:'flex-start'
              }}>
                <PhoneIco size={28} color="var(--accent)"/>
                <div>
                  <div className="label-tiny" style={{fontSize:16}}>Direkte til beslutningstager</div>
                  <div style={{
                    fontFamily:'var(--f-display)', fontWeight:800,
                    fontSize:22, marginTop:4, color:'var(--dark)'
                  }}>
                    <a href={PHONE_LINK} style={{color:'var(--accent)'}}>{PHONE_DISPLAY}</a>
                  </div>
                  <div className="body" style={{fontSize:13, marginTop:6}}>
                    Hverdage 7—16. Telefonisk forespørgsel besvares samme dag.
                  </div>
                </div>
              </div>

              <div style={{
                padding:'28px',
                background:'var(--dark)',
                color:'var(--neutral-tint)',
                display:'flex', flexDirection:'column', gap:14
              }}>
                <div className="label-tiny" style={{color:'rgba(238,240,239,0.55)', fontSize:16}}>Næste skridt</div>
                <ol style={{
                  margin:0, padding:'0 0 0 18px',
                  display:'flex', flexDirection:'column', gap:8,
                  fontSize:16, color:'rgba(238,240,239,0.86)', lineHeight:1.5
                }}>
                  <li>Vi besvarer din forespørgsel inden 24 timer.</li>
                  <li>Vi besøger pladsen og kortlægger omfanget.</li>
                  <li>Du modtager et tilbud, vi står ved.</li>
                </ol>
                <button
                  className="btn"
                  style={{marginTop:8, justifyContent:'center'}}
                  onClick={() => setRoute("kontakt")}>
                  Start forespørgsel <ArrowV2 size={14} color="#fff"/>
                </button>
              </div>
            </div>
          </div>
        </div>
      </section>

      {/* Rental CTA — only on Anlæg (contextual best fit, CTA #4) */}
      {s.rentCta && (
        <RentCTA
          eyebrow="Maskine­udlejning"
          title={<>Skal du kun bruge<br/>en graver en uge?<br/>Lej direkte.</>}
          label="Til udlejning"
        />
      )}

      {/* References */}
      <section className="section cream">
        <div className="wrap">
          <div className="section-head" style={{marginBottom:40}}>
            <div>
              <h2 className="h-section" style={{marginTop:0}}>Sådan ser det<br/><em style={{color:'var(--accent)', fontStyle:'normal'}}>ud i praksis</em></h2>
            </div>
            <div style={{display:'flex', alignItems:'end', justifyContent:'flex-end'}}>
              <button className="btn ghost" onClick={() => setRoute("losninger")}>
                Alle referencer <ArrowV2 size={14}/>
              </button>
            </div>
          </div>
          <div className="projects">
            {s.refs.map((r, i) => (
              <div key={i} className="project">
                <div className="pmedia">
                  <ImageBlock id={`v2-${slug}-ref-${i}`} label={r.t} aspect="4-3" placeholderIcon={["▰","◇","◰"][i]} className="brand-photo"/>
                </div>
                <div className="pmeta">
                  <div className="ptitle">{r.t}</div>
                </div>
              </div>
            ))}
          </div>
        </div>
      </section>

      {/* Related services nav */}
      <section className="section tight">
        <div className="wrap">
          <h2 className="h-section" style={{marginTop:0, marginBottom:48}}>
            Andre <em style={{color:'var(--accent)', fontStyle:'normal'}}>fagområder</em>
          </h2>
          <div className="service-related">
            {related.map(r => (
              <div key={r.slug} className="rel-card" onClick={() => setRoute(r.slug)}>
                <div className="num">{r.no} / 04</div>
                <div className="ttl">{r.title}</div>
                <p style={{margin:0, color:'var(--ink-soft)', fontSize:16, lineHeight:1.6}}>{r.blurb}</p>
                <div className="ar"><ArrowV2 size={14} color="currentColor"/></div>
              </div>
            ))}
          </div>
        </div>
      </section>

      <CTABandV2
        setRoute={setRoute}
        heading={<>Klar til at<br/><em>tale om {s.title.toLowerCase()}?</em></>}
        sub={slug === 'infrastruktur' ? "Få en erfaren projektleder i røret, der kan tale med dig om dit konkrete projekt - uden langtrukne salgsprocesser" : "Få en projektleder i røret, der kan tale konkret om dit projekt — uden at sende salgsmateriale først."}
        ctaLabel="Få tilbud"
      />
    </div>
  );
}

window.PageService = PageService;
window.SERVICE_DETAIL = SERVICE_DETAIL;