// page-home-v2.jsx — Forside v2

const HOME_PROJECTS_V2 = [
  { title: "Erhvervsbyggeri", loc: "Fyn · 2024",       tag: "Totalentreprise · 28.000 m²", icon: "▰" },
  { title: "Anlæg", loc: "Esbjerg · 2025", tag: "Naturgenopretning · 6,2 km", icon: "≈" },
  { title: "Infrastruktur", loc: "Aarhus N · 2024", tag: "Infrastruktur · 41 uger", icon: "≡" }
];

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

  const ServicesSection = (
    <section className="section sandbg">
      <div className="wrap">
        <div className="section-head">
          <div>
            <div style={{display:'inline-block'}}>
              <h2 className="h-section" style={{marginTop:0, whiteSpace:'nowrap'}}>
                Fire fagområder<br/>
                <em style={{color:'var(--accent)', fontStyle:'normal'}}>Én entreprenør</em>
              </h2>
            </div>
          </div>
        </div>
        <div className="grid-services">
          {SERVICES_V2.map(s => (
            <div key={s.slug} className="service-card" onClick={() => setRoute(s.slug)}>
              <div className="num">{s.no} / 04</div>
              <h3>{s.title}</h3>
              <p>{s.blurb}</p>
              <div className="tags">
                <span className="tag">{s.sub} <ArrowV2 size={14} color="var(--accent)" className="chev"/></span>
              </div>
            </div>
          ))}
        </div>
      </div>
    </section>
  );

  const ManifestSection = (
    <section className="section sandbg">
      <div className="wrap">
        <div className="manifest">
          <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 etablerer det."
            </div>
            <div style={{
              marginTop:32,
              fontFamily:'var(--f-display)', fontWeight:600,
              fontSize:20, letterSpacing:'0.18em',
              textTransform:'uppercase', color:'var(--ink-mute)'
            }}>
              — Daniel Madsen · Grundlægger
            </div>
          </div>
          <div>
            <ImageBlock id="v2-manifest" label="Mester på pladsen · portræt" aspect="4-3" placeholderIcon="◰"/>
          </div>
        </div>
      </div>
    </section>
  );

  const ValuesSection = (
    <section className="section cream-deep tight">
      <div className="wrap">
        <div className="section-head" style={{marginBottom:40}}>
          <div>
            <div style={{display:'inline-block'}}>
              <h2 className="h-section" style={{marginTop:0, whiteSpace:'nowrap'}}>
                Tre principper<br/>
                <em style={{color:'var(--teil)', fontStyle:'normal'}}>Uden undtagelser</em>
              </h2>
            </div>
          </div>
        </div>
      </div>
      <div className="values">
        <div className="value">
          <div className="num">Ansvar</div>
          <h4>Aftalt tid holdes</h4>
          <p>Vi er meget bevidste om vores rolle i helheden og løfter stærkt fra start for at sikre det overordnede projekt ikke forsinkes og budgettet skrider.</p>
        </div>
        <div className="value">
          <div className="num">Faglighed</div>
          <h4>Vi bygger med folk</h4>
          <p>80% af vores hold har været i virksomheden i over fem år. Vi skaber stærke løsninger på pladsen i tæt dialog med alle samarbejdspartnere.</p>
        </div>
        <div className="value">
          <div className="num">Tillid</div>
          <h4>Hånd­slag der holder</h4>
          <p>Vi forhandler én gang. Tilbudssummen er også den pris I betaler, og korrektioner afstemmes åbent løbende - ingen overraskelser efter aflevering.</p>
        </div>
      </div>
    </section>
  );

  const ProjectsSection = (
    <section className="section sandbg">
      <div className="wrap">
        <div className="section-head">
          <div>
            <div style={{display:'inline-block'}}>
              <h2 className="h-section" style={{marginTop:0}}>
                Seneste<br/>
                <em style={{color:'var(--accent)', fontStyle:'normal'}}>leverancer</em>
              </h2>
            </div>
          </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">
          {HOME_PROJECTS_V2.map((p, i) => (
            <div key={i} className="project">
              <div className="pmedia">
                <ImageBlock id={`v2-home-prj-${i}`} label={p.title} aspect="4-3" placeholderIcon={p.icon}/>
              </div>
              <div className="pmeta">
                <div>
                  <div className="ptitle">{p.title}</div>
                </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 page-home">
      <HeroV2 variant={heroVariant} setRoute={setRoute}/>
      <MarqueeV2 items={CLIENT_LOGOS_V2.map(l => ({ logo: l.src, alt: l.alt }))}/>
      {blocks[0]}
      {/* Rental CTA #2 — sits naturally after the services section */}
      <RentCTA/>
      {blocks.slice(1).map((b, i) => <React.Fragment key={i}>{b}</React.Fragment>)}
      <CTABandV2 setRoute={setRoute}/>
    </div>
  );
}

window.PageHomeV2 = PageHomeV2;
window.PageHome = PageHomeV2;  // override so app router selects v2 by default