// DigitalMeta — Home page React components
const { useState, useEffect, useRef } = React;
const T = window.DM_I18N;

// ─── Icons ───────────────────────────────────────────────────────────
const Icon = ({ name, size = 24 }) => {
  const s = { width: size, height: size, fill: "none", stroke: "currentColor", strokeWidth: 1.6, strokeLinecap: "round", strokeLinejoin: "round" };
  switch (name) {
    case "web":    return (<svg viewBox="0 0 24 24" {...s}><rect x="3" y="4" width="18" height="14" rx="2"/><path d="M3 9h18"/><circle cx="6" cy="6.5" r="0.5" fill="currentColor"/><circle cx="8" cy="6.5" r="0.5" fill="currentColor"/></svg>);
    case "ai":     return (<svg viewBox="0 0 24 24" {...s}><circle cx="12" cy="12" r="3"/><path d="M12 3v3M12 18v3M3 12h3M18 12h3M5.6 5.6l2.1 2.1M16.3 16.3l2.1 2.1M5.6 18.4l2.1-2.1M16.3 7.7l2.1-2.1"/></svg>);
    case "ms":     return (<svg viewBox="0 0 24 24" fill="none"><rect x="3" y="3" width="8" height="8" fill="currentColor" opacity="0.9"/><rect x="13" y="3" width="8" height="8" fill="currentColor" opacity="0.6"/><rect x="3" y="13" width="8" height="8" fill="currentColor" opacity="0.6"/><rect x="13" y="13" width="8" height="8" fill="currentColor" opacity="0.9"/></svg>);
    case "arrow":  return (<svg viewBox="0 0 24 24" {...s} className="dm-dir"><path d="M5 12h14M13 6l6 6-6 6"/></svg>);
    case "check":  return (<svg viewBox="0 0 24 24" {...s}><path d="M5 12l4 4L19 7"/></svg>);
    case "globe":  return (<svg viewBox="0 0 24 24" {...s}><circle cx="12" cy="12" r="9"/><path d="M3 12h18M12 3a14 14 0 010 18M12 3a14 14 0 000 18"/></svg>);
    case "spark":  return (<svg viewBox="0 0 24 24" {...s}><path d="M12 3l1.8 5.4L19 10l-5.2 1.6L12 17l-1.8-5.4L5 10l5.2-1.6z"/></svg>);
    case "shield": return (<svg viewBox="0 0 24 24" {...s}><path d="M12 3l8 3v6c0 5-4 8-8 9-4-1-8-4-8-9V6l8-3z"/></svg>);
    case "flag":   return (<svg viewBox="0 0 24 24" {...s}><path d="M5 21V4M5 4h12l-2 4 2 4H5"/></svg>);
    case "menu":   return (<svg viewBox="0 0 24 24" {...s}><path d="M4 6h16M4 12h16M4 18h16"/></svg>);
    case "close":  return (<svg viewBox="0 0 24 24" {...s}><path d="M6 6l12 12M18 6L6 18"/></svg>);
    case "wa":     return (<svg viewBox="0 0 24 24" width={size} height={size} fill="currentColor"><path d="M17.472 14.382c-.297-.149-1.758-.867-2.03-.967-.273-.099-.471-.148-.67.15-.197.297-.767.966-.94 1.164-.173.199-.347.223-.644.075-.297-.15-1.255-.463-2.39-1.475-.883-.788-1.48-1.761-1.653-2.059-.173-.297-.018-.458.13-.606.134-.133.298-.347.446-.52.149-.174.198-.298.298-.497.099-.198.05-.371-.025-.52-.075-.149-.669-1.612-.916-2.207-.242-.579-.487-.5-.669-.51-.173-.008-.371-.01-.57-.01-.198 0-.52.074-.792.372-.272.297-1.04 1.016-1.04 2.479 0 1.462 1.065 2.875 1.213 3.074.149.198 2.096 3.2 5.077 4.487.709.306 1.262.489 1.694.625.712.227 1.36.195 1.871.118.571-.085 1.758-.719 2.006-1.413.248-.694.248-1.289.173-1.413-.074-.124-.272-.198-.57-.347m-5.421 7.403h-.004a9.87 9.87 0 01-5.031-1.378l-.361-.214-3.741 1.005 1.005-3.741-.235-.374a9.86 9.86 0 01-1.51-5.26c.001-5.45 4.436-9.884 9.888-9.884 2.64 0 5.122 1.03 6.988 2.898a9.825 9.825 0 012.893 6.994c-.003 5.45-4.437 9.884-9.885 9.884"/></svg>);
    default: return null;
  }
};

// ─── Logo ─────────────────────────────────────────────────────────────
const Logo = () => {
  const src = window.DM_LOGO_URL || null;
  return (
    <span className="dm-logo" aria-label="DigitalMeta">
      <span className="dm-logo-mark" aria-hidden="true">
        {src
          ? <img src={src} alt="" width="34" height="34" style={{objectFit:"contain",display:"block"}}/>
          : (<svg viewBox="0 0 32 32" width="28" height="28"><defs><linearGradient id="dmlg" x1="0" y1="0" x2="1" y2="1"><stop offset="0%" stopColor="#00BFEF"/><stop offset="100%" stopColor="#1E90FF"/></linearGradient></defs><rect x="2" y="2" width="28" height="28" rx="7" fill="#0A2A5E"/><path d="M9 9 L9 23 L16 23 Q23 23 23 16 Q23 9 16 9 Z" fill="url(#dmlg)"/><circle cx="22" cy="10" r="2" fill="#00BFEF"/></svg>)
        }
      </span>
      <span className="dm-logo-word"><b>Digital</b>Meta</span>
    </span>
  );
};

// ─── Header ───────────────────────────────────────────────────────────
const Header = ({ lang, setLang, scrolled, route, navigate }) => {
  const t = T[lang];
  const [open, setOpen] = useState(false);

  const navItems = [
    ["home",      t.nav.home],
    ["services",  t.nav.services, [
      ["web",       t.nav.web],
      ["microsoft", t.nav.microsoft],
      ["ai",        t.nav.ai],
      ["ecommerce", t.nav.ecommerce],
    ]],
    ["solutions", t.nav.solutions],
    ["about",     t.nav.about],
    ["contact",   t.nav.contact],
  ];

  const go = (r) => (e) => {
    e.preventDefault();
    const urlMap = window.DM_URL_MAP || {};
    const url = r === "home" ? "/" : (urlMap[r] || "/" + r);
    window.location.href = url;
  };

  // Inject drawer styles once
  useEffect(() => {
    if (document.getElementById("dm-drawer-styles")) return;
    const style = document.createElement("style");
    style.id = "dm-drawer-styles";
    style.textContent = `
      #dm-drawer-overlay {
        position: fixed;
        inset: 0;
        z-index: 99999;
        background: white;
        display: flex;
        flex-direction: column;
        overflow-y: auto;
        font-family: "Inter Tight", system-ui, sans-serif;
      }
      #dm-drawer-overlay .dd-head {
        display: flex;
        align-items: center;
        justify-content: space-between;
        padding: 18px 24px;
        border-bottom: 1px solid #e3e8ef;
      }
      #dm-drawer-overlay .dd-logo {
        font-size: 18px;
        font-weight: 700;
        color: #0A2A5E;
      }
      #dm-drawer-overlay .dd-close {
        width: 44px; height: 44px;
        border: 1px solid #e3e8ef;
        border-radius: 8px;
        background: transparent;
        cursor: pointer;
        font-size: 18px;
        display: flex; align-items: center; justify-content: center;
      }
      #dm-drawer-overlay .dd-nav {
        flex: 1;
        display: flex;
        flex-direction: column;
      }
      #dm-drawer-overlay .dd-nav a {
        display: flex;
        align-items: center;
        justify-content: space-between;
        padding: 20px 28px;
        font-size: 22px;
        font-weight: 600;
        color: #0a1628;
        border-bottom: 1px solid #e3e8ef;
        text-decoration: none;
      }
      #dm-drawer-overlay .dd-nav a:active { background: #f5f7fa; }
      #dm-drawer-overlay .dd-foot {
        padding: 24px 28px;
        border-top: 1px solid #e3e8ef;
      }
      #dm-drawer-overlay .dd-btn {
        display: block;
        text-align: center;
        padding: 16px 24px;
        background: #0A2A5E;
        color: white;
        border-radius: 999px;
        font-weight: 600;
        font-size: 16px;
        text-decoration: none;
      }
    `;
    document.head.appendChild(style);
  }, []);

  // Imperatively show/hide drawer on body
  useEffect(() => {
    let overlay = document.getElementById("dm-drawer-overlay");

    if (open) {
      if (!overlay) {
        overlay = document.createElement("div");
        overlay.id = "dm-drawer-overlay";

        // Head
        const head = document.createElement("div");
        head.className = "dd-head";

        const logoEl = document.createElement("span");
        logoEl.className = "dd-logo";
        logoEl.textContent = "DigitalMeta";
        head.appendChild(logoEl);

        const closeBtn = document.createElement("button");
        closeBtn.className = "dd-close";
        closeBtn.textContent = "✕";
        closeBtn.onclick = () => setOpen(false);
        head.appendChild(closeBtn);
        overlay.appendChild(head);

        // Nav
        const nav = document.createElement("nav");
        nav.className = "dd-nav";
        navItems.forEach(([r, label, sub]) => {
          const a = document.createElement("a");
          const _url = r === "home" ? "/" : (window.DM_URL_MAP && window.DM_URL_MAP[r] ? window.DM_URL_MAP[r] : "/" + r);
          a.href = _url;
          a.innerHTML = "<span>" + label + "</span><span>→</span>";
          a.onclick = (e) => { e.preventDefault(); window.location.href = _url; };
          nav.appendChild(a);
          if (sub) {
            sub.forEach(([cr, cl]) => {
              const s = document.createElement("a");
              const _surl = window.DM_URL_MAP && window.DM_URL_MAP[cr] ? window.DM_URL_MAP[cr] : "/" + cr;
              s.href = _surl;
              s.innerHTML = "<span style='padding-left:16px;opacity:0.5'>— </span>" + cl;
              s.style.cssText = "display:block;padding:12px 28px;font-size:16px;color:#4a5568;border-bottom:1px solid #f0f0f0;text-decoration:none;background:#fafafa;";
              s.onclick = (e) => { e.preventDefault(); window.location.href = _surl; };
              nav.appendChild(s);
            });
          }
        });
        overlay.appendChild(nav);

        // Foot
        const foot = document.createElement("div");
        foot.className = "dd-foot";
        const btn = document.createElement("a");
        btn.href = "/contact";
        btn.className = "dd-btn";
        btn.textContent = t.cta.contact;
        btn.onclick = (e) => { e.preventDefault(); navigate("contact"); setOpen(false); };
        foot.appendChild(btn);
        overlay.appendChild(foot);

        document.body.appendChild(overlay);
      }
      overlay.style.display = "flex";
      document.body.style.overflow = "hidden";
    } else {
      if (overlay) overlay.style.display = "none";
      document.body.style.overflow = "";
    }

    return () => { document.body.style.overflow = ""; };
  }, [open, lang]);

  return (
    <header className={"dm-header" + (scrolled ? " is-scrolled" : "")}>
      <div className="dm-container dm-header-inner">
        <a href="/" onClick={go("home")} className="dm-logo-link"><Logo /></a>
        <nav className="dm-nav" aria-label="Primary">
          {navItems.map(function(item) {
            const r = item[0], label = item[1], sub = item[2];
            if (sub) {
              const childActive = sub.filter(function(c){ return c[0]===route; }).length > 0;
              const cls = "dm-nav-drop" + (route===r||childActive ? " is-active" : "");
              return (
                <div key={r} className={cls}>
                  <span onClick={function(){ navigate(r); }}>{label} <span className="dm-caret">▾</span></span>
                  <div className="dm-drop-menu">
                    {sub.map(function(c){
                      return <a key={c[0]} href={window.DM_URL_MAP ? (window.DM_URL_MAP[c[0]]||"/"+c[0]) : "/"+c[0]} onClick={go(c[0])} className={route===c[0]?"is-active":""}>{c[1]}</a>;
                    })}
                  </div>
                </div>
              );
            }
            return <a key={r} href={window.DM_URL_MAP ? (window.DM_URL_MAP[r]||"/"+r) : "/"+r} onClick={go(r)} className={route===r?"is-active":""}>{label}</a>;
          })}
        </nav>
        <div className="dm-header-right">
          <LangSwitcher lang={lang} setLang={setLang} />
          <a href="/contact" onClick={go("contact")} className="dm-btn dm-btn-accent dm-btn-sm">{t.cta.contact}</a>
        </div>
        <button className="dm-burger" onClick={() => setOpen(true)} aria-label="Open menu">
          <Icon name="menu" size={22}/>
        </button>
      </div>
    </header>
  );
};

// ─── Language switcher ────────────────────────────────────────────────
const LangSwitcher = ({ lang, setLang }) => (
  <div className="dm-lang" dir="ltr" role="group" aria-label="Language">
    {["en","de","ar"].map((code) => (
      <button key={code} className={"dm-lang-btn"+(lang===code?" is-active":"")} onClick={() => setLang(code)} aria-pressed={lang===code}>
        {code.toUpperCase()}
      </button>
    ))}
  </div>
);

// ─── Hero ─────────────────────────────────────────────────────────────
const Hero = ({ lang }) => {
  const t = T[lang];
  return (
    <section className="dm-hero" id="home">
      <div className="dm-hero-bg" aria-hidden="true">
        <div className="dm-hero-grid-lines"/>
        <div className="dm-hero-glow dm-hero-glow-a"/>
        <div className="dm-hero-glow dm-hero-glow-b"/>
      </div>
      <div className="dm-container dm-hero-inner">
        <div className="dm-hero-copy">
          <div className="dm-eyebrow"><span className="dm-eyebrow-dot"/>{t.hero.eyebrow}</div>
          <h1 className="dm-h1">{t.hero.title}</h1>
          <p className="dm-lede">{t.hero.sub}</p>
          <div className="dm-hero-ctas">
            <a href="/contact" className="dm-btn dm-btn-primary">{t.cta.start}<Icon name="arrow" size={18}/></a>
            <a href="/services" className="dm-btn dm-btn-ghost">{t.cta.viewServices}</a>
          </div>
        </div>
        <div className="dm-hero-visual" aria-hidden="true"><HeroVisual/></div>
      </div>
    </section>
  );
};

const HeroVisual = () => (
  <div className="dm-hv">
    <div className="dm-hv-card dm-hv-card-1">
      <div className="dm-hv-card-head"><span className="dm-hv-dot dm-hv-dot-cyan"/><span className="dm-hv-tag">microsoft 365</span></div>
      <div className="dm-hv-bars"><div style={{width:"82%"}}/><div style={{width:"64%"}}/><div style={{width:"46%"}}/></div>
    </div>
    <div className="dm-hv-card dm-hv-card-2">
      <div className="dm-hv-card-head"><span className="dm-hv-dot dm-hv-dot-navy"/><span className="dm-hv-tag">ai workflow</span></div>
      <svg viewBox="0 0 200 80" className="dm-hv-chart">
        <defs><linearGradient id="dmHvFill" x1="0" y1="0" x2="0" y2="1"><stop offset="0%" stopColor="#00BFEF" stopOpacity="0.6"/><stop offset="100%" stopColor="#00BFEF" stopOpacity="0"/></linearGradient></defs>
        <path d="M0 60 Q40 40 80 50 T160 30 T200 25" fill="none" stroke="#00BFEF" strokeWidth="2"/>
        <path d="M0 60 Q40 40 80 50 T160 30 T200 25 L200 80 L0 80 Z" fill="url(#dmHvFill)" opacity="0.3"/>
      </svg>
    </div>
    <div className="dm-hv-card dm-hv-card-3">
      <div className="dm-hv-card-head"><span className="dm-hv-dot dm-hv-dot-cyan"/><span className="dm-hv-tag">website · live</span></div>
      <div className="dm-hv-pills"><span>EN</span><span>DE</span><span>AR</span></div>
    </div>
    <div className="dm-hv-orbit"/>
  </div>
);

// ─── Services ─────────────────────────────────────────────────────────
const Services = ({ lang }) => {
  const t = T[lang];
  return (
    <section className="dm-section dm-section-services" id="services">
      <div className="dm-container">
        <SectionIntro eyebrow={t.services.eyebrow} title={t.services.title} lede={t.services.lede}/>
        <div className="dm-grid-3">
          {t.services.items.map((it,i) => (
            <a key={i} href={it.href} className="dm-service-card">
              <div className="dm-service-card-head"><span className="dm-service-icon"><Icon name={it.icon} size={26}/></span><span className="dm-service-tag">{it.tag}</span></div>
              <h3 className="dm-service-title">{it.title}</h3>
              <p className="dm-service-desc">{it.desc}</p>
              <span className="dm-service-link">{t.cta.learnMore}<Icon name="arrow" size={16}/></span>
            </a>
          ))}
        </div>
      </div>
    </section>
  );
};

// ─── Clients ──────────────────────────────────────────────────────────
const Clients = ({ lang }) => {
  const label = { en:"Trusted by", de:"Unsere Kunden", ar:"عملاؤنا" }[lang] || "Trusted by";
  const clients = ["Microsoft","Hostinger","WordPress","Google","Stripe","OpenAI"];
  return (
    <section className="dm-section-clients">
      <div className="dm-container">
        <div className="dm-clients-label">
          <span className="dm-clients-line"/>
          <span className="dm-clients-label-text">{label}</span>
        </div>
        <div className="dm-clients-grid">
          {clients.map((c,i) => (
            <div key={i} className="dm-client-logo">
              <span className="dm-client-name">{c}</span>
            </div>
          ))}
        </div>
      </div>
    </section>
  );
};

// ─── Why ──────────────────────────────────────────────────────────────
const Why = ({ lang }) => {
  const t = T[lang];
  const icons = ["globe","shield","spark","flag"];
  return (
    <section className="dm-section dm-section-why">
      <div className="dm-container">
        <SectionIntro eyebrow={t.why.eyebrow} title={t.why.title}/>
        <div className="dm-grid-2-2">
          {t.why.items.map((it,i) => (
            <div key={i} className="dm-why-item">
              <div className="dm-why-icon"><Icon name={icons[i]} size={22}/></div>
              <div><h4 className="dm-why-title">{it.title}</h4><p className="dm-why-desc">{it.desc}</p></div>
            </div>
          ))}
        </div>
      </div>
    </section>
  );
};

// ─── Microsoft ────────────────────────────────────────────────────────
const Microsoft = ({ lang, navigate }) => {
  const t = T[lang];
  return (
    <section className="dm-section dm-section-ms" id="microsoft">
      <div className="dm-container">
        <div className="dm-ms-grid">
          <div className="dm-ms-copy">
            <div className="dm-eyebrow"><span className="dm-eyebrow-dot"/>{t.ms.eyebrow}</div>
            <h2 className="dm-h2">{t.ms.title}</h2>
            <p className="dm-lede">{t.ms.lede}</p>
            <a href="/microsoft-solutions" onClick={(e)=>{e.preventDefault();navigate&&navigate("microsoft");}} className="dm-btn dm-btn-primary">{t.cta.explore}<Icon name="arrow" size={18}/></a>
          </div>
          <div className="dm-ms-products">
            {t.ms.products.map((p,i) => (
              <div key={i} className="dm-ms-product">
                <div className="dm-ms-product-icon"><Icon name="ms" size={20}/></div>
                <div><h4 className="dm-ms-product-name">{p.name}</h4><p className="dm-ms-product-desc">{p.desc}</p></div>
                <span className="dm-ms-product-arrow"><Icon name="arrow" size={16}/></span>
              </div>
            ))}
          </div>
        </div>
      </div>
    </section>
  );
};

// ─── Stats ────────────────────────────────────────────────────────────
const Stats = ({ lang }) => {
  const t = T[lang];
  return (
    <section className="dm-section-stats">
      <div className="dm-container">
        <div className="dm-stats-grid">
          {t.stats.map((s,i) => (
            <div key={i} className="dm-stat">
              <div className="dm-stat-value">{s.value}</div>
              <div className="dm-stat-label">{s.label}</div>
            </div>
          ))}
        </div>
      </div>
    </section>
  );
};

// ─── Final CTA ────────────────────────────────────────────────────────
const FinalCta = ({ lang, navigate }) => {
  const t = T[lang];
  return (
    <section className="dm-section dm-section-cta" id="contact">
      <div className="dm-container">
        <div className="dm-cta-band">
          <div className="dm-cta-band-bg" aria-hidden="true"/>
          <div className="dm-cta-band-inner">
            <div className="dm-eyebrow dm-eyebrow-light"><span className="dm-eyebrow-dot"/>{t.finalCta.eyebrow}</div>
            <h2 className="dm-h2 dm-h2-light">{t.finalCta.title}</h2>
            <p className="dm-lede dm-lede-light">{t.finalCta.sub}</p>
            <div className="dm-cta-band-ctas">
              <a href="/contact" onClick={(e)=>{e.preventDefault();navigate&&navigate("contact");}} className="dm-btn dm-btn-accent">{t.cta.start}<Icon name="arrow" size={18}/></a>
              <a href={"mailto:"+t.footer.email} className="dm-btn dm-btn-ghost-light">{t.cta.talk}</a>
            </div>
          </div>
        </div>
      </div>
    </section>
  );
};

// ─── Footer ────────────────────────────────────────────────────────────
const Footer = ({ lang, navigate }) => {
  const t = T[lang];
  const legal = (t.pages && t.pages.legalNav) || { impressum:"Impressum", datenschutz:"Privacy", cookies:"Cookies" };
  const go = (r) => (e) => {
    e.preventDefault();
    const urlMap = window.DM_URL_MAP || {};
    window.location.href = urlMap[r] || "/" + r;
  };
  const ctaTitle = { en:"Starting a new project or want to collaborate with us?", de:"Neues Projekt oder Zusammenarbeit?", ar:"هل تبدأ مشروعاً جديداً أو تريد التعاون معنا؟" }[lang];
  const ctaLink  = { en:"Let's talk →", de:"Jetzt sprechen →", ar:"تحدث إلينا ←" }[lang];
  const compLabel = { en:"Company", de:"Unternehmen", ar:"الشركة" }[lang];
  const companyLinks = [
    ["home",      t.nav.home],
    ["about",     t.nav.about],
    ["contact",   t.nav.contact],
    ["impressum", "Impressum"],
    ["datenschutz","Privacy / Datenschutz"],
  ];
  const serviceLinks = [
    ["web",       t.nav.web],
    ["microsoft", t.nav.microsoft],
    ["ai",        t.nav.ai],
    ["ecommerce", t.nav.ecommerce],
    ["solutions", t.nav.solutions],
  ];
  return (
    <footer className="dm-footer">
      <div className="dm-container">
        <div className="dm-footer-cta">
          <p className="dm-footer-cta-title">{ctaTitle}</p>
          <a href={"mailto:"+t.footer.email} className="dm-footer-cta-link">{ctaLink}</a>
          <div className="dm-footer-contacts">
            <a href={"mailto:"+t.footer.email} className="dm-footer-contact-item">{t.footer.email}</a>
            <a href="https://wa.me/4915778451924" target="_blank" rel="noopener noreferrer" className="dm-footer-contact-item dm-footer-wa">
              <Icon name="wa" size={16}/>{t.footer.whatsapp}
            </a>
          </div>
        </div>
        <div className="dm-footer-divider"/>
        <div className="dm-footer-cols">
          <div className="dm-footer-col">
            <div className="dm-footer-col-rule"/>
            <h5>{compLabel}</h5>
            <ul>{companyLinks.map(([r,l],i) => <li key={i}><a href={window.DM_URL_MAP ? (window.DM_URL_MAP[r]||"/"+r) : "/"+r} onClick={go(r)}>{l}</a></li>)}</ul>
          </div>
          <div className="dm-footer-col">
            <div className="dm-footer-col-rule"/>
            <h5>{t.footer.servicesH}</h5>
            <ul>{serviceLinks.map(([r,l],i) => <li key={i}><a href={window.DM_URL_MAP ? (window.DM_URL_MAP[r]||"/"+r) : "/"+r} onClick={go(r)}>{l}</a></li>)}</ul>
          </div>
        </div>
        <div className="dm-footer-divider"/>
        <div className="dm-footer-bottom">
          <span>{t.footer.rights}</span>
          <div className="dm-footer-legal">
            <a href="/impressum" onClick={go("impressum")}>{legal.impressum}</a>
            <a href="/datenschutz" onClick={go("datenschutz")}>{legal.datenschutz}</a>
            <a href="/cookies" onClick={go("cookies")}>{legal.cookies}</a>
          </div>
          <span className="dm-footer-langs">EN · DE · AR</span>
        </div>
      </div>
    </footer>
  );
};

// ─── Section intro ────────────────────────────────────────────────────
const SectionIntro = ({ eyebrow, title, lede }) => (
  <div className="dm-section-intro">
    <div className="dm-eyebrow"><span className="dm-eyebrow-dot"/>{eyebrow}</div>
    <h2 className="dm-h2">{title}</h2>
    {lede && <p className="dm-lede">{lede}</p>}
  </div>
);

// ─── Floating WhatsApp Button ─────────────────────────────────────────
const WaFloat = () => (
  <a
    href="https://wa.me/4915778451924"
    target="_blank"
    rel="noopener noreferrer"
    className="dm-wa-float"
    aria-label="Message us on WhatsApp"
    style={{
      position:"fixed", bottom:24, right:24, zIndex:9000,
      width:56, height:56, borderRadius:"50%",
      background:"#25d366", color:"white",
      display:"flex", alignItems:"center", justifyContent:"center",
      boxShadow:"0 4px 20px rgba(37,211,102,0.4)",
      textDecoration:"none", fontSize:26, lineHeight:1,
    }}
  >
    💬
  </a>
);

Object.assign(window, {
  Icon, DM_Header: Header, DM_Hero: Hero, DM_Services: Services,
  DM_Clients: Clients, DM_Why: Why, DM_Microsoft: Microsoft,
  DM_Stats: Stats, DM_FinalCta: FinalCta, DM_Footer: Footer,
  DM_WaFloat: WaFloat,
});
