// shared-v2.jsx — v2 Nav (square logo, Løsninger dropdown, right CTA+phone), Footer, RentCTA

const RENT_URL = "https://www.danielmadsen-maskinudlejning.dk";
const PHONE_DISPLAY = "+45 21 65 91 04";
const PHONE_LINK = "tel:+4521659104";

// Service catalog — single source of truth for v2 nav dropdown + service pages
const SERVICES_V2 = [
{
  slug: "erhverv",
  no: "01",
  title: "Erhvervsbyggeri",
  sub: "Fagentreprise · Telecom",
  blurb: "Box-butikker, logistikcentre, erhvervskontor, restauratner, ladeparker etc.",
  icon: "◰"
},
{
  slug: "infrastruktur",
  no: "02",
  title: "Infrastruktur",
  sub: "Veje · Kloak · Forsyning",
  blurb: "Fjernvarme, vandforsyning, regn- og spildevand, vejudvidelser og vejetablering etc.",
  icon: "≡"
},
{
  slug: "anlaeg",
  no: "03",
  title: "Anlæg",
  sub: "Jord · beton · asfalt",
  blurb: "Private vejanlæg, cykelstier, byggemodning, jordsortering, regnvandsbasiner etc.",
  icon: "▰"
},
{
  slug: "natur",
  no: "04",
  title: "Naturgenopretning",
  sub: "Vandløb · diger · vådområder",
  blurb: "Ågenslyng, vådområder, grøftoprensning, stendiger etc.",
  icon: "≈"
}];


// ───────────── small inline arrow ─────────────
const ArrowV2 = ({ size = 16, color = "currentColor", className = "" }) =>
<React.Fragment>
    <svg className={`arrow a-std ${className}`} width={size} height={size * 0.72} viewBox="0 0 20 14" fill="none" xmlns="http://www.w3.org/2000/svg">
      <path d="M1 7H19M19 7L13 1M19 7L13 13" stroke={color} strokeWidth="1.6" strokeLinecap="square" />
    </svg>
    <svg className={`arrow a-brand ${className}`} width={size} height={size} viewBox="0 0 100 100" fill="none" xmlns="http://www.w3.org/2000/svg">
      <path d="M20 16 84 50 20 84 20 62 52 50 20 38Z" fill={color} />
    </svg>
  </React.Fragment>;

const CaretDown = ({ size = 10 }) =>
<svg className="caret" width={size} height={size * 0.6} viewBox="0 0 10 6" fill="none">
    <path d="M1 1L5 5L9 1" stroke="currentColor" strokeWidth="1.4" strokeLinecap="square" />
  </svg>;

const PhoneIco = ({ size = 16, color = "currentColor" }) =>
<svg width={size} height={size} viewBox="0 0 24 24" fill="none" stroke={color} strokeWidth="1.6">
    <path d="M3 5.5A2.5 2.5 0 0 1 5.5 3h1.4a1 1 0 0 1 .97.76l1.2 4.5a1 1 0 0 1-.27.98L7.5 10.6a14 14 0 0 0 5.9 5.9l1.36-1.3a1 1 0 0 1 .98-.27l4.5 1.2a1 1 0 0 1 .76.97V18.5a2.5 2.5 0 0 1-2.5 2.5h-1A16.5 16.5 0 0 1 3 6.5v-1Z" />
  </svg>;

const FacebookIco = ({ size = 14 }) =>
<svg width={size} height={size} viewBox="0 0 24 24" fill="currentColor" aria-hidden="true">
    <path d="M13.5 21v-8h2.7l.4-3.1h-3.1V7.9c0-.9.25-1.5 1.55-1.5H16.7V3.6A21 21 0 0 0 14.5 3.5c-2.3 0-3.85 1.4-3.85 3.98V9.9H8v3.1h2.65V21h2.85Z" />
  </svg>;

const ExternalIco = ({ size = 12 }) =>
<svg className="ext-ico" width={size} height={size} viewBox="0 0 100 100" fill="none" xmlns="http://www.w3.org/2000/svg">
    <path d="M20 16 84 50 20 84 20 62 52 50 20 38Z" fill="currentColor" transform="rotate(-45 50 50)" />
  </svg>;


// ───────────── Square logo (uses brand asset) ─────────────
function LogoSquare({ variant = "light", height = 32, onClick }) {
  // light bg → HS (Horisontal Sort, full wordmark), dark bg → KH (white square)
  const src = variant === "dark" ?
  "assets/logos/dm-logo-kh.svg" :
  "assets/logos/dm-logo-hs.svg";
  return (
    <div className="nav-brand-square" style={{ height }} onClick={onClick} role="button" aria-label="DM Entreprenør — forside">
      <img src={src} alt="DM Entreprenør A/S" style={{ height, width: 'auto' }} />
    </div>);

}

// ───────────── Nav v2 ─────────────
function NavV2({ route, setRoute }) {
  const [ddOpen, setDdOpen] = React.useState(false);
  const [mobOpen, setMobOpen] = React.useState(false);
  const [mobLosOpen, setMobLosOpen] = React.useState(false);
  const ddRef = React.useRef(null);
  const closeTimerRef = React.useRef(null);

  // Close dropdown on outside click or Escape
  React.useEffect(() => {
    function onDown(e) {
      if (ddRef.current && !ddRef.current.contains(e.target)) setDdOpen(false);
    }
    function onKey(e) {if (e.key === "Escape") setDdOpen(false);}
    document.addEventListener('mousedown', onDown);
    document.addEventListener('keydown', onKey);
    return () => {document.removeEventListener('mousedown', onDown);document.removeEventListener('keydown', onKey);};
  }, []);

  const mobTimerRef = React.useRef(null);
  const openMob = () => {clearTimeout(mobTimerRef.current);setMobOpen(true);};
  const queueCloseMob = () => {clearTimeout(mobTimerRef.current);mobTimerRef.current = setTimeout(() => {setMobOpen(false);setMobLosOpen(false);}, 160);};

  const openDd = () => {clearTimeout(closeTimerRef.current);setDdOpen(true);};
  const queueClose = () => {clearTimeout(closeTimerRef.current);closeTimerRef.current = setTimeout(() => setDdOpen(false), 60);};

  const links = [
  { key: "om-dm", label: "Om DM" },
  { key: "kontakt", label: "Kontakt" }];


  const isLosningerActive = route === "losninger" || SERVICES_V2.some((s) => route === s.slug);

  const goService = (slug) => {
    setDdOpen(false);setMobOpen(false);setMobLosOpen(false);
    setRoute(slug);
  };

  return (
    <nav className="nav">
      <div className="nav-inner">
        {/* LEFT: horizontal logo */}
        <LogoSquare variant="light" height={32} onClick={() => setRoute("home")} />

        {/* CENTER: main menu */}
        <div className="nav-menu">
          {/* Løsninger dropdown */}
          <div
            className="nav-dropdown-wrap"
            ref={ddRef}
            onMouseEnter={openDd}
            onMouseLeave={queueClose}>
            
            <button
              type="button"
              className={`nav-link ${isLosningerActive ? "active" : ""}`}
              aria-expanded={ddOpen}
              aria-haspopup="menu"
              onFocus={openDd}
              onClick={() => {setDdOpen(false);setRoute("losninger");}}>
              
              Løsninger
              <CaretDown />
            </button>
            <div className={`nav-dropdown ${ddOpen ? "open" : ""}`} role="menu">
              {SERVICES_V2.map((s) =>
              <button
                key={s.slug}
                type="button"
                className="nav-dropdown-item"
                role="menuitem"
                onClick={() => goService(s.slug)}>
                
                  <span className="ddi-title">{s.title}</span>
                  <span className="ddi-sub">{s.sub}</span>
                </button>
              )}
            </div>
          </div>

          {links.map((l) =>
          <button
            type="button"
            key={l.key}
            className={`nav-link ${route === l.key ? "active" : ""}`}
            onClick={() => setRoute(l.key)} style={{ gap: "6px" }}>
            
              {l.label}
            </button>
          )}
        </div>

        {/* RIGHT: phone CTA only */}
        <div className="nav-right">
          <a
            className="nav-cta-combo phone-only"
            href={PHONE_LINK}
            aria-label={`Ring direkte ${PHONE_DISPLAY}`}>
            <PhoneIco size={16} color="#fff" />
            <span className="cta-phone">
              <span className="pl">Ring direkte</span>
              <span className="pn">{PHONE_DISPLAY}</span>
            </span>
          </a>

          <button
            type="button"
            className={`nav-mobile-toggle ${mobOpen ? "open" : ""}`}
            onMouseEnter={openMob}
            onMouseLeave={queueCloseMob}
            onClick={() => (mobOpen ? queueCloseMob() : openMob())}
            aria-expanded={mobOpen}
            aria-label={mobOpen ? "Luk menu" : "Åbn menu"}>
            
            <span className="burger" aria-hidden="true"><i></i><i></i><i></i></span>
            Menu
          </button>
        </div>
      </div>

      {mobOpen &&
      <div className="nav-mobile" onMouseEnter={openMob} onMouseLeave={queueCloseMob}>
          <button onMouseEnter={() => setMobLosOpen(true)} onClick={() => setMobLosOpen((o) => !o)}>
            Løsninger {mobLosOpen ? "−" : "+"}
          </button>
          {mobLosOpen &&
        <div className="submenu">
              {SERVICES_V2.map((s) =>
          <button key={s.slug} onClick={() => goService(s.slug)}>{s.title}</button>
          )}
            </div>
        }
          {links.map((l) =>
        <button key={l.key} onClick={() => {setMobOpen(false);setRoute(l.key);}}>{l.label}</button>
        )}
          <button className="rent-link" onClick={() => {setMobOpen(false);window.open(RENT_URL, "_blank");}}>
            Lej maskiner <ExternalIco size={14} />
          </button>
        </div>
      }
    </nav>);

}

// ───────────── Footer v2 ─────────────
function FooterV2({ setRoute }) {
  return (
    <footer className="footer">
      <div className="wrap">
        <div className="footer-grid">
          <div className="footer-brand">
            <img src="assets/logos/dm-logo-kh.svg" alt="DM Entreprenør A/S — til forsiden" className="footer-logo-link" role="button" tabIndex={0} aria-label="DM Entreprenør — til forsiden" onClick={() => { setRoute("home"); window.scrollTo({ top: 0, behavior: "smooth" }); }} onKeyDown={(e) => { if (e.key === "Enter" || e.key === " ") { e.preventDefault(); setRoute("home"); window.scrollTo({ top: 0, behavior: "smooth" }); } }} />
            <div style={{
              fontFamily: 'var(--f-display)', fontWeight: 800,
              fontSize: 21, letterSpacing: '0.08em', textTransform: 'uppercase',
              color: '#eef0ef'
            }}>
              STÆRK LØSNING
            </div>
            <p className="footer-statement">
              Vi skaber <em style={{ fontStyle: 'normal', color: 'var(--accent-bright)' }}>fundamentet</em> for fremtiden – med jord, beton og tillid.
            </p>
          </div>
          <div>
            <h5>Løsninger</h5>
            <ul>
              {SERVICES_V2.map((s) =>
              <li key={s.slug}><a onClick={() => setRoute(s.slug)}>{s.title}</a></li>
              )}
              <li><a className="rent" href={RENT_URL} target="_blank" rel="noopener">Lej maskiner <ExternalIco /></a></li>
            </ul>
          </div>
          <div>
            <h5>Virksomhed</h5>
            <ul>
              <li><a onClick={() => setRoute("om-dm")}>Om DM</a></li>
              <li><a onClick={() => { setRoute("kontakt"); setTimeout(() => { const el = document.getElementById("karriere"); if (el) window.scrollTo({ top: el.getBoundingClientRect().top + window.scrollY - 20 }); }, 60); }}>Karriere</a></li>
              <li><a href="#privatlivspolitik" target="_blank" rel="noopener">Privatlivspolitik</a></li>
            </ul>
          </div>
          <div>
            <h5>Kontakt</h5>
            <ul>
              <li><span className="fg-static">Vasen 4</span></li>
              <li><span className="fg-static">DK-8950 Ørsted</span></li>
              <li><a href={PHONE_LINK}>{PHONE_DISPLAY}</a></li>
              <li><a>info@entdm.dk</a></li>
            </ul>
          </div>
        </div>
        <div className="footer-bottom">
          <span>© 2026 DM ENTREPRENØR A/S · CVR 44 92 97 40</span>
          <span><a className="footer-social" href="https://www.facebook.com/people/Entrepren%C3%B8r-Daniel-Madsen-AS/100031117705776/?locale=da_DK" target="_blank" rel="noopener"><FacebookIco size={14} /> Følg os på Facebook</a></span>
        </div>
      </div>
    </footer>);

}

// ───────────── CTA Band (overrides v1) ─────────────
function CTABandV2({ setRoute, heading, sub, ctaLabel = "Send forespørgsel" }) {
  return (
    <section className="cta-band">
      <div className="wrap cta-band-inner">
        <h2>{heading || <>Skal vi løfte<br/><em style={{fontFamily:'var(--f-display)', fontStyle:'normal', fontWeight:800, textTransform:'uppercase'}}>dit projekt?</em></>}</h2>
        <div style={{ display: 'flex', flexDirection: 'column', gap: 16, alignItems: 'flex-end', textAlign: 'right' }}>
          <p style={{ fontFamily: 'var(--f-serif)', fontStyle: 'italic', fontSize: 26, lineHeight: 1.35, margin: 0 }}>
            {sub || <>Få en uforpligtende snak med en projektleder.<br/>Vi vender tilbage senest næste arbejdsdag.</>}
          </p>
          <button className="btn" style={{ alignSelf: 'flex-end', width: 'auto', whiteSpace: 'nowrap' }} onClick={() => {
            setRoute("kontakt");
            setTimeout(() => {
              const el = document.getElementById("kontaktform");
              if (el) window.scrollTo({ top: el.getBoundingClientRect().top + window.scrollY - 100 });
            }, 60);
          }}>
            {ctaLabel} <ArrowV2 size={14} color="#fff" />
          </button>
        </div>
      </div>
    </section>);

}

// ───────────── RentCTA — machinery-rental band (external) ─────────────
// Used in up to 5 strategic spots. Renders as a slate band with rust button.
function RentCTA({
  eyebrow = "Maskine­udlejning",
  title,
  url = RENT_URL,
  label = "Lej maskiner",
  compact = false
}) {
  const defaultTitle = <>Skal du <em>bruge en maskine?</em></>;
  return (
    <section className={`rental-cta-band ${compact ? "compact" : ""}`}>
      <div className="wrap rental-cta-inner">
        <div>
          <h3 className="rcb-title">{title || defaultTitle}</h3>
        </div>
        <div style={{ display: 'flex', flexDirection: 'column', gap: 16, alignItems: 'flex-end', textAlign: 'right' }}>
          <p style={{
            margin: 0,
            fontFamily: 'var(--f-serif)', fontStyle: 'italic',
            fontSize: 26, lineHeight: 1.35,
            color: 'rgba(238,240,239,0.82)'
          }}>
            Egen park på 30 maskiner til udlejning.<br/>Med eller uden fører, på dags- eller ugebasis.
          </p>
          <a
            className="btn rental"
            style={{ alignSelf: 'flex-end', width: 'auto', whiteSpace: 'nowrap' }}
            href={url}
            target="_blank"
            rel="noopener noreferrer">
            
            {label} <ExternalIco size={15} />
          </a>
        </div>
      </div>
    </section>);

}

// ───────────── Marquee v2 (text color comes from CSS; items may be strings or {logo} objects) ─────────────
function MarqueeV2({ items }) {
  const half = (key) =>
  <div className="marquee-half" key={key} aria-hidden={key === 1 ? "true" : undefined}>
      {items.map((it, i) =>
    <React.Fragment key={i}>
          {it && it.logo ?
      <img src={it.logo} alt={it.alt || ""} className="marquee-logo"/> :
      <span>{it}</span>}
          <span className="chev">/</span>
        </React.Fragment>
    )}
    </div>;


  return (
    <div className="marquee">
      <div className="marquee-track">{half(0)}{half(1)}</div>
    </div>);

}

// ───────────── Client logo belt (below hero) — rendered inside marquee ─────────────
const CLIENT_LOGOS_V2 = [
  { src: "assets/logo-belt/arkil.png", alt: "Arkil" },
  { src: "assets/logo-belt/cibicom.png", alt: "Cibicom" },
  { src: "assets/logo-belt/munck.png", alt: "Munck Gruppen" },
  { src: "assets/logo-belt/nre.png", alt: "NRE" },
  { src: "assets/logo-belt/teleteamet.png", alt: "Teleteamet" },
  { src: "assets/logo-belt/mth-hojgaard.png", alt: "MT Højgaard" },
  { src: "assets/logo-belt/enkon.png", alt: "Enkon" },
  { src: "assets/logo-belt/gustav-christensen.png", alt: "Gustav H. Christensen" },
  { src: "assets/logo-belt/vinther-lassen.png", alt: "Vinther & Lassen A/S" },
  { src: "assets/logo-belt/aarhusvand.png", alt: "Aarhus Vand" },
  { src: "assets/logo-belt/ok.png", alt: "OK a.m.b.a." }
];

// ───────────── Color-weight strip (visual signature under hero) ─────────────
function PaletteStrip() {
  return (
    <div className="palette-strip" aria-hidden="true">
      <span className="p-neutral" />
      <span className="p-main1" />
      <span className="p-main2" />
      <span className="p-accent" />
      <span className="p-dark" />
    </div>);

}

// Override ImageBlock so every image area is always a real <image-slot> drop zone.
// Result: any picture the user drops stays visible — there is no "placeholder
// mode" that can hide it. Empty slots show the slot's own neutral drop UI.
const _OriginalImageBlock = window.ImageBlock;
function ImageBlockV2(props) {
  return _OriginalImageBlock({ ...props, mode: "slot" });
}
window.ImageBlock = ImageBlockV2;
// Force the runtime flag too in case anything still reads it.
window.__IMG_MODE = "slot";

// Override globals so existing v1 page modules render with v2 chrome
Object.assign(window, {
  // v2-specific exports
  NavV2, FooterV2, CTABandV2, MarqueeV2, RentCTA, PaletteStrip, CLIENT_LOGOS_V2,
  LogoSquare, ArrowV2, CaretDown, PhoneIco, ExternalIco, FacebookIco,
  RENT_URL, PHONE_DISPLAY, PHONE_LINK, SERVICES_V2,
  // Override v1 globals so v1 pages (sadan-gor-vi, beregner, etc.) inherit v2 chrome
  Nav: NavV2,
  Footer: FooterV2,
  CTABand: CTABandV2,
  Marquee: MarqueeV2,
  ImageBlock: ImageBlockV2
});