// shared.jsx — Logo, Footer, ImageBlock, Arrow icon, Chevron icon
// Shared across all pages.

const Arrow = ({ size = 16, color = "currentColor" }) =>
<svg className="arrow a-brand" 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>;


const ChevSVG = ({ size = 90, color = "#94431e" }) =>
<svg width={size} height={size * (80 / 90)} viewBox="0 0 90 80" xmlns="http://www.w3.org/2000/svg">
    <polygon points="10,10 70,40 10,70 10,55 50,40 10,25" fill={color} />
  </svg>;


// DM brand "chevron-V" logo mark (simplified inline)
const BrandMark = ({ height = 22, color = "#ffffff", accent = "#94431e" }) =>
<svg height={height} viewBox="0 0 96 32" fill="none" xmlns="http://www.w3.org/2000/svg" aria-label="DM Entreprenør">
    <polygon points="4,4 28,16 4,28 4,22 18,16 4,10" fill={accent} />
    <text x="34" y="22" fontFamily="Urbanist, sans-serif" fontWeight="800" fontSize="18" letterSpacing="2" fill={color}>DM</text>
    <text x="68" y="22" fontFamily="Cormorant Garamond, serif" fontStyle="italic" fontWeight="500" fontSize="16" fill={accent}>e</text>
  </svg>;


const BrandWordmark = ({ color = "#ffffff" }) =>
<div className="nav-brand">
    <BrandMark height={22} color={color} />
    <span className="brandmark-text">DM Entreprenør<em style={{ fontFamily: "Urbanist" }}>a/s</em></span>
  </div>;


// ImageBlock — chooses between <image-slot> and styled placeholder based on TWEAKS
function ImageBlock({ id, label, aspect = "16-9", placeholderIcon = "▰", className = "", style = {}, mode = null, anchorTop = false }) {
  // mode arg overrides global; "slot" | "placeholder"
  const useSlot = (mode || window.__IMG_MODE) === "slot";
  const cls = `aspect-${aspect}`;
  if (useSlot) {
    return (
      <div className={`img-slot-wrap ${cls} ${className}`} style={style}>
        <image-slot id={id} src={(window.SLOT_SRC || {})[id]} placeholder={label} shape="rect" {...(anchorTop ? {"anchor-top": ""} : {})}></image-slot>
      </div>);

  }
  return (
    <div className={`placeholder ${cls} ${className}`} style={style}>
      <div className="ph-icon">{placeholderIcon}</div>
      <div>{label}</div>
    </div>);

}

// ────────────────────── NAV ──────────────────────
function Nav({ route, setRoute, onContact }) {
  const links = [
  { key: "losninger", label: "Løsninger" },
  { key: "sadan-gor-vi", label: "Sådan Gør Vi" },
  { key: "beregner", label: "Beregner" },
  { key: "andre-siger", label: "Andre Siger" },
  { key: "om-dm", label: "Om DM" },
  { key: "kontakt", label: "Kontakt" }];

  const [mobileOpen, setMobileOpen] = React.useState(false);
  return (
    <nav className="nav">
      <div className="nav-inner">
        <a onClick={() => setRoute("home")} style={{ cursor: 'pointer' }}>
          <BrandWordmark />
        </a>
        <div className="nav-links">
          {links.map((l) =>
          <button
            key={l.key}
            className={`nav-link ${route === l.key ? "active" : ""}`}
            onClick={() => setRoute(l.key)}>
            {l.label}</button>
          )}
        </div>
        <div className="nav-phone">
          <svg width="22" height="22" viewBox="0 0 24 24" fill="none" stroke="currentColor" 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>
          <div>
            <span className="label">Direkte</span>
            <span className="num">+45 70 26 04 12</span>
          </div>
        </div>
        <button className="nav-cta" onClick={() => setRoute("kontakt")}>
          Få tilbud <Arrow size={14} />
        </button>
        <button className="nav-mobile-toggle" onClick={() => setMobileOpen((o) => !o)}>
          {mobileOpen ? "Luk" : "Menu"}
        </button>
      </div>
      {mobileOpen &&
      <div style={{ padding: '8px 24px 20px', display: 'flex', flexDirection: 'column', gap: '4px', borderTop: '1px solid var(--rule)' }}>
          {links.map((l) =>
        <button
          key={l.key}
          className={`nav-link ${route === l.key ? "active" : ""}`}
          style={{ textAlign: 'left', padding: '14px 0' }}
          onClick={() => {setRoute(l.key);setMobileOpen(false);}}>
          {l.label}</button>
        )}
        </div>
      }
    </nav>);

}

// ────────────────────── FOOTER ──────────────────────
function Footer({ setRoute }) {
  return (
    <footer className="footer">
      <div className="wrap">
        <div className="footer-grid">
          <div>
            <BrandWordmark />
            <p className="footer-statement">
              Vi bygger <em style={{ fontStyle: 'normal', color: 'var(--accent)' }}>fundamentet</em> for fremtiden — i jord, beton og tillid.
            </p>
          </div>
          <div>
            <h5>Løsninger</h5>
            <ul>
              <li><a onClick={() => setRoute("losninger")}>Erhvervsbyggeri</a></li>
              <li><a onClick={() => setRoute("losninger")}>Infrastruktur</a></li>
              <li><a onClick={() => setRoute("losninger")}>Anlægsprojekter</a></li>
              <li><a onClick={() => setRoute("losninger")}>Naturgenopretning</a></li>
            </ul>
          </div>
          <div>
            <h5>Virksomhed</h5>
            <ul>
              <li><a onClick={() => setRoute("om-dm")}>Om DM</a></li>
              <li><a onClick={() => setRoute("sadan-gor-vi")}>Sådan gør vi</a></li>
              <li><a onClick={() => setRoute("andre-siger")}>Referencer</a></li>
              <li><a>Karriere</a></li>
              <li><a>Presse</a></li>
            </ul>
          </div>
          <div>
            <h5>Kontakt</h5>
            <ul>
              <li><a>Industrivej 24</a></li>
              <li><a>DK-6000 Kolding</a></li>
              <li><a>+45 70 26 04 12</a></li>
              <li><a>kontakt@dm-entreprenoer.dk</a></li>
            </ul>
          </div>
        </div>
        <div className="footer-bottom">
          <span>© 2026 DM Entreprenør A/S · CVR 38 24 17 06</span>
          <span>Udført i Kolding · Bygget af DM</span>
        </div>
      </div>
    </footer>);

}

// ────────────────────── CTA BAND ──────────────────────
function CTABand({ setRoute, heading, sub, ctaLabel = "Start din forespørgsel" }) {
  return (
    <section className="cta-band">
      <div className="wrap cta-band-inner">
        <h2>{heading || <>Skal vi bygge <em>noget sammen?</em></>}</h2>
        <div style={{ display: 'flex', flexDirection: 'column', gap: 16 }}>
          <p style={{ fontFamily: 'var(--f-serif)', fontStyle: 'italic', fontSize: 20, lineHeight: 1.35, margin: 0 }}>
            {sub || "Få en uforpligtende samtale med en projektleder. Vi vender tilbage senest næste arbejdsdag."}
          </p>
          <button className="btn solid-light" onClick={() => setRoute("kontakt")}>
            {ctaLabel} <Arrow size={14} color="#211d1b" />
          </button>
        </div>
      </div>
    </section>);

}

// ────────────────────── MARQUEE ──────────────────────
function Marquee({ items }) {
  const row =
  <span>
      {items.map((it, i) =>
    <React.Fragment key={i}>
          <span>{it}</span>
          <span className="chev">/</span>
        </React.Fragment>
    )}
    </span>;

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

}

// expose
Object.assign(window, {
  Arrow, ChevSVG, BrandMark, BrandWordmark,
  ImageBlock, Nav, Footer, CTABand, Marquee
});