// page-om-dm.jsx — Om DM (About)

const TEAM = [
{ name: "Daniel Mortensen", role: "Grundlægger & CEO", det: "Mester · 28 år i branchen" },
{ name: "Lone Friis", role: "Adm. Direktør", det: "Civilingeniør · Anlæg" },
{ name: "Karl Henrik Brandt", role: "Driftsdirektør", det: "Bygningsingeniør" },
{ name: "Mia Sørensen", role: "Bæredygtighedschef", det: "DGNB Aud. · Biolog" },
{ name: "Tobias Klint", role: "Projektchef · Erhverv", det: "Hovedentrepriser" },
{ name: "Anders Vestergaard", role: "Anlægschef", det: "Specialist i kloak/asfalt" },
{ name: "Sigrid Berg", role: "Pladschef · Vestjylland", det: "Kystsikring & natur" },
{ name: "Mikkel Holm", role: "KS- og sikkerhedschef", det: "Arbejdsmiljø · BST" }];


const TIMELINE = [
{ y: "2018", t: "Etablering", d: "Daniel Madsen starter firmaet Entreprenør Daniel Madsen i Ørsted med fokus på lokale mindre opgaver indenfor anlæg og infrastruktur." },
{ y: "2025", t: "Formel stiftelse", d: "Som et naturligt led i en kontinuerlig vækst omregistreres virksomheden i 2025 til et A/S." },
{ y: "2026", t: "Opførsel af hoveddomicil & etablering af Maskinudlejninsgforretning", d: "Første spadestik i etablering af nyt hovedkontor og maskinstation på Djursland — og dermed udvides forretningen med formaliseret maskinudlejning og tilhørende service." }];


function PageOmDM({ setRoute }) {
  return (
    <div className="page pal-teil-cta">
      <header className="page-header">
        <div className="ph-bg"></div>
        <div className="wrap">
          <div className="intro-banner">
            <h1 className="h-display">
              Vi bygger<br />
              <em className="serif-it" style={{ color: 'var(--accent)', fontFamily: 'var(--f-serif)', fontStyle: 'italic', fontWeight: 500, textTransform: 'none', fontSize: '0.7em', letterSpacing: '-0.02em', display: 'block', marginTop: 12 }}>
                med folk
              </em>
            </h1>
            <p className="lead">
              11 fastansatte, 30 maskiner, 8 år, ét firma.<br/> Vi vil altid være et dybt forankret Djurslands entreprenørfirma - stor nok til at levere i hele Danmark, og lille nok til at stå ved det.
            </p>
          </div>
        </div>
      </header>

      {/* Origin story split */}
      <section className="section">
        <div className="wrap">
          <div style={{
            display: 'grid',
            gridTemplateColumns: 'minmax(0, 1.1fr) minmax(0, 1fr)',
            gap: 80,
            alignItems: 'start'
          }} className="origin-grid">
            <div>
              <h2 className="h-section" style={{ marginTop: 0, marginBottom: 32 }}>
                Det startede med<br />
                <em style={{ color: 'var(--accent)', fontStyle: 'normal' }}>passion for maskiner</em>
              </h2>
              <p style={{ fontFamily: 'var(--f-serif)', fontStyle: 'italic', fontSize: 22, lineHeight: 1.4, color: 'var(--ink)', margin: '0 0 24px' }}>Selve entreprenør-virksomheden har eksisteret i 8 år, men før stiftelsesåret 2018 havde virksomheden allerede taget form i ejerleder Daniel Madsens tanker flere år forinden.
              </p>
              <p className="body" style={{ maxWidth: '56ch' }}>
                Som hårdtarbejdende maskinfører startede Daniel Madsen sit arbejdsliv på Djursland efter endt entreprenør-maskinmekaniker-uddannelse i Aars. Tanken om et selvstændigt arbejdsliv har altid fulgt ham, efter at have vidnet sine forældre drive selvstændig virksomhed hele sin opvækst. Her har han også lært hvad det vil sige at arbejde hårdt, og samtidig fået forståelse for hvordan hårdt arbejde og resultater ofte følger hinanden.
              </p>
              <p className="body" style={{ maxWidth: '56ch' }}>
                Passionen for de store og tunge arbejdsmaskiner førte til 4 år som maskinmekaniker i både ind- og udland. Her byggede Daniel forståelsen for forretningsskabet i entreprenørbranchen.
              </p>
              <p className="body" style={{ maxWidth: '56ch' }}>
                I år 2018 tog han endelig skridtet og stiftede et enkeltmandsfirma, som allerede i 2025 år blev omdannet til et A/S. Et bevis for den akkumulerede Djurslandske arbejdsånd, udsprunget af lige dele tekniske evner, forretningsforståelse samt viljen til at ville lykkedes.
              </p>
              <p className="body" style={{ maxWidth: '56ch' }}>
                I dag hedder virksomheden DM Entreprenør A/S, hvilket markerer et nyt kapitel på rejsen mod endnu flere landsdækkende opgaver og spændende partnerskaber. DM Entreprenør A/S beskæftiger i 2026 ca. 11 medarbejdere og omsætter for ca. 30M DKR årligt. Projekter af alle størrelser og fagligheder løses med selvsamme ildhu og passion som altid. Målet for alle i virksomheden er altid glade og tilfredse samarbejdspartnere som oplever stærke løsninger på alle planer. Dette opnåes kun ved hjælp af vores folk, som altid stræber efter at dygtiggøre sig.
              </p>
              <div style={{ marginTop: 40, display: 'flex', gap: 12 }}>
                <button className="btn" onClick={() => setRoute("kontakt")}>
                  Karriere hos DM <Arrow size={14} />
                </button>
              </div>
            </div>
            <div style={{ position: 'sticky', top: 100, display: 'flex', flexDirection: 'column', gap: 16 }}>
              <ImageBlock id="om-origin" label="Daniel · 1998" aspect="3-4" placeholderIcon="◰" />
              <div style={{
                padding: '20px 24px',
                background: 'var(--bg-alt)',
                border: '1px solid var(--rule)',
                fontFamily: 'var(--f-serif)',
                fontStyle: 'italic',
                fontSize: 19,
                lineHeight: 1.5,
                color: 'var(--ink-soft)'
              }}>
                "Vi vil altid være afhængige af at få dygtige folk ind, som repræsenterer samme selvstændige og nidkære arbejdsånd som virksomheden bygger på."
                <div style={{
                  marginTop: 12,
                  fontFamily: 'var(--f-display)',
                  fontStyle: 'normal',
                  fontSize: 11,
                  letterSpacing: '0.18em',
                  textTransform: 'uppercase',
                  color: 'var(--ink-mute)'
                }}>— DANIEL MADSEN</div>
              </div>
            </div>
          </div>
        </div>
      </section>

      {/* Key numbers */}
      <section className="section deep tight">
        <div className="wrap">
          <div className="specs" style={{ borderTop: '1px solid var(--rule)', borderBottom: '1px solid var(--rule)' }}>
            <div className="spec">
              <div className="l">Fastansatte</div>
              <div className="v" style={{ fontSize: 'clamp(40px, 4.5vw, 64px)', marginTop: 4 }}>11</div>
            </div>
            <div className="spec">
              <div className="l">Egen maskinpark</div>
              <div className="v" style={{ fontSize: 'clamp(40px, 4.5vw, 64px)', marginTop: 4 }}>30</div>
            </div>
            <div className="spec">
              <div className="l">Afsluttede projekter</div>
              <div className="v" style={{ fontSize: 'clamp(40px, 4.5vw, 64px)', marginTop: 4 }}>356</div>
            </div>
            <div className="spec">
              <div className="l">Stiftet</div>
              <div className="v" style={{ fontSize: 'clamp(40px, 4.5vw, 64px)', marginTop: 4 }}>2018</div>
            </div>
          </div>
        </div>
      </section>

      {/* Timeline */}
      <section className="section">
        <div className="wrap-tight">
          <h2 className="h-section" style={{ marginTop: 0, marginBottom: 64 }}>
            8 år<br />
            <em style={{ color: 'var(--accent)', fontStyle: 'normal' }}>Tre milepæle</em>
          </h2>

          <div style={{ position: 'relative', paddingLeft: 48 }}>
            <div style={{ position: 'absolute', left: 9, top: 8, bottom: 8, width: 1, background: 'var(--rule)' }}></div>
            {TIMELINE.map((e, i) =>
            <div key={e.y} style={{
              position: 'relative',
              padding: '24px 0 48px',
              display: 'grid',
              gridTemplateColumns: '120px 1fr',
              gap: 40
            }} className="timeline-row">
                <div style={{ position: 'absolute', left: -44.5, top: 45.3, width: 12, height: 12, borderRadius: '50%', background: 'var(--accent)' }}></div>
                <div style={{ fontFamily: 'var(--f-display)', fontWeight: 800, fontSize: 'clamp(32px, 3vw, 48px)', lineHeight: 1.27, letterSpacing: '-0.02em', color: 'var(--accent)' }}>{e.y}</div>
                <div>
                  <h3 style={{ fontFamily: 'var(--f-display)', fontWeight: 800, fontSize: 'clamp(24px, 2.4vw, 32px)', textTransform: 'uppercase', letterSpacing: '-0.015em', margin: '0 0 12px' }}>{e.t}</h3>
                  <p style={{ fontSize: 16, lineHeight: 1.7, color: 'var(--ink-soft)', maxWidth: '60ch', margin: 0 }}>{e.d}</p>
                </div>
              </div>
            )}
          </div>
        </div>
      </section>

      <CTABand
        setRoute={setRoute}
        heading={<>Kom forbi <em>Djursland</em></>}
        sub="Hovedkontoret i Ørsted tager altid gerne en snak om maskiner, entreprenørarbejder og forretning - så du får en fornemmelse af hvem du handler med."
        ctaLabel="Aftal et besøg" />
      
    </div>);

}

window.PageOmDM = PageOmDM;