// page-home.jsx — Forside (Home)

const HOME_SERVICES = [
  { num: "01", title: "Byggeprojekter, erhverv", desc: "Råhus, fundering og totalentreprise for industri, logistik og kontor. Vi bygger til CO₂-klasse og leveringssikkerhed.", tags: ["Råhus", "Fundering", "Totalentreprise"] },
  { num: "02", title: "Infrastrukturprojekter", desc: "Veje, broer, regnvandsanlæg og forsyningsnet — udført på myndighedsvilkår med trafikmæssig hensyntagen.", tags: ["Veje", "Broer", "Forsyning"] },
  { num: "03", title: "Anlægsprojekter", desc: "Jord, kloak, asfalt, beton. Vores anlægsfolk er pladsens rygrad — fra første prøveboring til afleveringsforretning.", tags: ["Jord", "Kloak", "Asfalt"] },
  { num: "04", title: "Naturgenopretning & Kystsikring", desc: "Stenbeskyttelse, dige- og strandfodring, vådområder og biotop. Vi arbejder med naturen, ikke imod den.", tags: ["Diger", "Strandfodring", "Vådområder"] },
];

const HOME_PROJECTS = [
  { title: "Logistikcenter, Ringe", loc: "Fyn · 2024", tag: "Totalentreprise · 28.000 m²" },
  { title: "Vestkystens digeforstærkning", loc: "Esbjerg · 2025", tag: "Naturgenopretning · 6,2 km" },
  { title: "Bro 27 — motorvejskryds", loc: "Aarhus N · 2024", tag: "Infrastruktur · 41 uger" },
];

function PageHome({ setRoute, sectionOrder = "services-first", heroVariant = "video" }) {

  const ServicesSection = (
    <section className="section deep">
      <div className="wrap">
        <div className="section-head">
          <div>
            <div style={{display:'inline-block'}}>
              <div className="section-eyebrow-a">Løsninger · <em>det vi laver</em></div>
              <div className="section-eyebrow-rule"></div>
              <h2 className="h-section" style={{marginTop:20}}>Fire fagområder<br/><em style={{color:'var(--accent)', fontStyle:'normal'}}>Én entreprenør</em></h2>
            </div>
          </div>
          <div>
            <p className="body" style={{maxWidth:'52ch'}}>
              Vi er specialister, men leverer som generalister. DM arbejder under egne folk og maskiner — fra fundering til finish — så projektledelse og udførelse er den samme telefon.
            </p>
            <button className="btn ghost" style={{marginTop:24}} onClick={() => setRoute("losninger")}>
              Alle løsninger <Arrow size={14}/>
            </button>
          </div>
        </div>
        <div className="grid-services">
          {HOME_SERVICES.map(s => (
            <div key={s.num} className="service-card" onClick={() => setRoute("losninger")}>
              <div className="num">{s.num} / 04</div>
              <ChevSVG size={36}/>
              <h3>{s.title}</h3>
              <p>{s.desc}</p>
              <div className="tags">
                {s.tags.map(t => <span key={t} className="tag">{t}</span>)}
              </div>
              <Arrow size={20} color="var(--accent)" className="chev"/>
            </div>
          ))}
        </div>
      </div>
    </section>
  );

  const ManifestSection = (
    <section className="section">
      <div className="wrap">
        <div className="manifest">
          <div>
            <div className="eyebrow">Manifest · <span className="serif-it">vores credo</span></div>
            <div className="lead-big" style={{marginTop:24}}>
              "Et byggeri er <em>aldrig bedre</em> end fundamentet det står på — og fundamentet er <em>aldrig bedre</em> end folkene der støber det."
            </div>
            <div style={{marginTop:32, fontFamily:'var(--f-display)', fontWeight:600, fontSize:13, letterSpacing:'0.18em', textTransform:'uppercase', color:'var(--ink-mute)'}}>
              — Daniel Mortensen · Grundlægger
            </div>
          </div>
          <div>
            <ImageBlock id="manifest" label="Mester på pladsen · portræt" aspect="4-3" placeholderIcon="◰"/>
          </div>
        </div>
      </div>
    </section>
  );

  const ValuesSection = (
    <section className="section alt tight">
      <div className="wrap">
        <div className="section-head" style={{marginBottom:40}}>
          <div>
            <div className="eyebrow">Værdier · <span className="serif-it">sådan arbejder vi</span></div>
            <h2 className="h-section" style={{marginTop:20, maxWidth:'14ch'}}>Tre principper.<br/><em className="serif-it" style={{color:'var(--accent)'}}>Ingen undtagelser.</em></h2>
          </div>
        </div>
      </div>
      <div className="values">
        <div className="value">
          <div className="num">01 — Tillid</div>
          <h4>Hånd­slag der holder</h4>
          <p>Vi forhandler én gang. Tilbudssummen er den sum I betaler. Ingen overraskelser efter aflevering — og hvis vi rammer en sten, ringer vi før vi sender regning.</p>
        </div>
        <div className="value">
          <div className="num">02 — Faglighed</div>
          <h4>Vi bygger med folk</h4>
          <p>87 % af vores hold har været her i over fem år. Vi vinder ikke priser på Linkedin — vi vinder dem på pladsen, hvor entreprisen står efter aflevering.</p>
        </div>
        <div className="value">
          <div className="num">03 — Tempo</div>
          <h4>Aftalt tid er aftalt</h4>
          <p>Bygherre kan ikke leje en bro lidt længere. Vores planlægning afkøres time-for-time mod milepæle — og vi melder afvigelser før de bliver det.</p>
        </div>
      </div>
    </section>
  );

  const ProjectsSection = (
    <section className="section">
      <div className="wrap">
        <div className="section-head">
          <div>
            <div className="eyebrow">Udvalgte · <span className="serif-it">arbejde</span></div>
            <h2 className="h-section" style={{marginTop:20}}>Seneste<br/><em className="serif-it" style={{color:'var(--accent)'}}>leverancer</em></h2>
          </div>
          <div style={{display:'flex', alignItems:'end', justifyContent:'flex-end'}}>
            <button className="btn ghost" onClick={() => setRoute("andre-siger")}>
              Alle referencer <Arrow size={14}/>
            </button>
          </div>
        </div>
        <div className="projects">
          {HOME_PROJECTS.map((p, i) => (
            <div key={i} className="project">
              <div className="pmedia">
                <ImageBlock id={`home-prj-${i}`} label={p.title} aspect="4-3" placeholderIcon={["▰","◇","◰"][i]}/>
              </div>
              <div className="pmeta">
                <div>
                  <div className="ptitle">{p.title}</div>
                  <div className="ploc">{p.loc}</div>
                </div>
                <div className="ptag">{p.tag}</div>
              </div>
            </div>
          ))}
        </div>
      </div>
    </section>
  );

  const blocks = sectionOrder === "manifest-first"
    ? [ManifestSection, ServicesSection, ValuesSection, ProjectsSection]
    : sectionOrder === "projects-first"
    ? [ProjectsSection, ServicesSection, ManifestSection, ValuesSection]
    : [ServicesSection, ManifestSection, ValuesSection, ProjectsSection];

  return (
    <div className="page">
      <Hero variant={heroVariant} setRoute={setRoute}/>
      <Marquee items={[
        "Hovedentreprise", "Fagentreprise", "Anlæg", "Infrastruktur",
        "Kystsikring", "Naturgenopretning", "Beton", "Jord", "Asfalt"
      ]}/>
      {blocks.map((b, i) => <React.Fragment key={i}>{b}</React.Fragment>)}
      <CTABand setRoute={setRoute}/>
    </div>
  );
}

window.PageHome = PageHome;