/* ============================================================
   SECTIONS — nav, marquee, services, process, cases, cta, footer
   ============================================================ */

/* GSAP scroll reveal */
function useReveal() {
  React.useEffect(() => {
    if (!window.gsap || !window.ScrollTrigger) return;
    gsap.registerPlugin(ScrollTrigger);
    const els = document.querySelectorAll(".reveal");
    els.forEach((el) => {
      const delay = parseFloat(el.className.match(/d(\d)/)?.[1] || 0) * 0.12;
      gsap.fromTo(el,
        { opacity: 0, y: 48 },
        { opacity: 1, y: 0, duration: 0.8, delay, ease: "power3.out",
          scrollTrigger: { trigger: el, start: "top 88%", toggleActions: "play none none none" }
        }
      );
    });
  });
}

/* ---- NAV ---- */
function Nav() {
  const [scrolled, setScrolled] = React.useState(false);
  React.useEffect(() => {
    const onScroll = () => setScrolled(window.scrollY > 24);
    window.addEventListener("scroll", onScroll, { passive: true });
    onScroll();
    return () => window.removeEventListener("scroll", onScroll);
  }, []);
  return (
    <nav className={"nav" + (scrolled ? " scrolled" : "")}>
      <div className="wrap nav__inner">
        <a href="/" className="logo" aria-label="Digro">
          <svg viewBox="0 0 1527.88 785.76" xmlns="http://www.w3.org/2000/svg" aria-hidden="true">
            <path d="M481.33,132.82v308.11c0,5.53-4.48,10-10,10h-64.78c-5.52,0-10-4.47-10-10V132.82c0-5.52,4.48-10,10-10h64.78c5.52,0,10,4.48,10,10Z"/>
            <path d="M396.46,45.48c0-20.99,0-45.48,42.48-45.48s42.48,24.49,42.48,45.48,0,45.49-42.48,45.49-42.48-24.49-42.48-45.49Z"/>
            <path d="M1157.69,132.82v64.78c0,5.52-4.47,10-10,10h-74.77c-11.04,0-39.7,1.78-39.7,31.37v201.99c0,5.52-4.47,10-10,10h-64.77c-5.53,0-10-4.48-10-10v-201.99c0-73.76,42.39-116.15,124.47-116.15h74.77c5.53,0,10,4.48,10,10Z"/>
            <path d="M1358.8,100.87c-126.69,0-169.08,42.39-169.08,175.04,0,63.36,9.67,106.13,33.58,133.52l-123.01,123.01c-3.9,3.9-10.24,3.9-14.14,0l-21-21c-3.9-3.9-10.23-3.9-14.14,0l-45.81,45.81c-3.9,3.91-3.9,10.24,0,14.14l80.95,80.94c3.9,3.9,10.24,3.9,14.14,0l204.72-204.72c15.94,2.3,33.82,3.35,53.79,3.35,126.69,0,169.08-42.39,169.08-175.05s-42.39-175.04-169.08-175.04ZM1358.8,366.18c-84.3,0-84.3-48.6-84.3-90.27s0-90.26,84.3-90.26,84.3,48.6,84.3,90.26,0,90.27-84.3,90.27Z"/>
            <path d="M892.12,122.82h-180.89c-126.69,0-169.08,42.39-169.08,175.04s42.39,175.04,169.08,175.04h0c33.65.01,61.36-2.98,83.9-9.86.4,7.13.4,14.32.4,21.32,0,41.67,0,90.27-84.3,90.27-77.71,0-83.79-41.3-84.26-80.39-.07-5.48-4.52-9.88-10-9.88h-64.73c-5.59,0-10.1,4.59-10,10.18,2.17,124.65,45.6,164.86,168.99,164.86s169.08-42.39,169.08-175.04v-186.5c0-24.57-1.46-46.05-4.63-64.73.61-25.1,26.44-7.72,26.44-25.53v-74.78c0-5.52-4.48-10-10-10ZM795.13,319.19c-1.98,35.3-13.76,68.94-83.9,68.94-84.3,0-84.3-48.6-84.3-90.27s0-90.26,84.3-90.26,84.3,48.6,84.3,90.26c0,7,0,14.2-.4,21.33Z"/>
            <path d="M253.38,10v112.98h-71.2c-4.26-.11-8.63-.16-13.1-.16C42.39,122.82,0,165.21,0,297.86s42.39,175.05,169.08,175.05,169.03-48.18,169.08-174.82V10c0-5.52-4.48-10-10-10h-64.78c-5.52,0-10,4.48-10,10ZM169.08,388.13c-84.3,0-84.3-48.6-84.3-90.27s0-87.04,76.18-90.1c2.61-.11,5.32-.16,8.12-.16s5.51.05,8.12.16c76.18,3.06,76.18,49.82,76.18,90.1v.23c0,41.62-.15,90.04-84.3,90.04Z"/>
          </svg>
        </a>
        <div className="nav__links">
          <a href="/ydelser">Ydelser</a>
          <a href="/proces">Proces</a>
          <a href="/cases">Cases</a>
          <a href="/om-os">Om os</a>
        </div>
        <div className="nav__cta">
          <a href="/kontakt" className="btn" style={{ padding: "12px 20px" }}>Kontakt os <span className="arrow">→</span></a>
        </div>
      </div>
    </nav>
  );
}

/* ---- MARQUEE ---- */
function Marquee() {
  const items = ["Hjemmesider fra 500 kr/md", "1 uges levering", "Domæne inkluderet", "Mail inkluderet", "Du ejer alt", "Google My Business", "Digital Growth", "Brand tema inkluderet"];
  const row = items.concat(items);
  const trackRef = React.useRef(null);

  React.useEffect(() => {
    const track = trackRef.current;
    if (!track) return;
    track.style.animation = "none";

    let pos = 0, vel = 0, targetVel = -0.5;
    let lastY = window.scrollY;
    let accumulated = 0;
    let idleTimer;
    let raf;

    const onScroll = () => {
      const dy = window.scrollY - lastY;
      lastY = window.scrollY;
      accumulated += dy;
      if (Math.abs(accumulated) < 12) return;
      targetVel = -accumulated * 0.18;
      accumulated = 0;
      clearTimeout(idleTimer);
      idleTimer = setTimeout(() => { targetVel = -0.5; }, 150);
    };

    const tick = () => {
      vel += (targetVel - vel) * 0.07;
      pos += vel;
      const half = track.scrollWidth / 2;
      if (pos <= -half) pos += half;
      if (pos > 0)      pos -= half;
      track.style.transform = `translateX(${pos}px)`;
      raf = requestAnimationFrame(tick);
    };

    window.addEventListener("scroll", onScroll, { passive: true });
    raf = requestAnimationFrame(tick);
    return () => {
      cancelAnimationFrame(raf);
      window.removeEventListener("scroll", onScroll);
      clearTimeout(idleTimer);
    };
  }, []);

  return (
    <div className="marquee" aria-hidden="true">
      <div className="marquee__track" ref={trackRef}>
        {row.map((t, i) => <span key={i}>{t}</span>)}
      </div>
    </div>
  );
}

/* ---- SERVICES ---- */
function Services() {
  return (
    <section className="section" id="ydelser">
      <div className="wrap">
        <div className="sec-head">
          <h2 className="display reveal">Alt hvad din virksomhed behøver. Én fast pris.</h2>
          <p className="reveal d1">Ingen skjulte gebyrer. Ingen binding udover dit abonnement. Du ejer alt — hjemmeside, domæne og indhold — fra dag ét.</p>
        </div>

        {/* Pricing cards */}
        <div style={{ display: "grid", gridTemplateColumns: "1fr 1fr", gap: 24, marginBottom: 64 }}>
          {/* Simpel */}
          <div className="reveal" style={{ background: "#FF5C00", borderRadius: 18, padding: "40px 36px", display: "flex", flexDirection: "column", gap: 20 }}>
            <div>
              <span style={{ fontFamily: "var(--ff-mono)", fontSize: "0.78rem", letterSpacing: "0.1em", color: "#3d3d3d", opacity: 0.6 }}>SIMPEL</span>
              <div style={{ marginTop: 12, marginBottom: 4 }}>
                <span style={{ fontFamily: "var(--ff-display)", fontVariationSettings: '"wdth" 125', fontWeight: 900, fontSize: "clamp(3rem,6vw,5rem)", color: "#3d3d3d", lineHeight: 1 }}>500</span>
                <span style={{ fontSize: "1.1rem", color: "#3d3d3d", opacity: 0.6 }}> kr/md</span>
              </div>
              <h3 style={{ fontFamily: "var(--ff-display)", fontWeight: 800, fontSize: "1.3rem", color: "#3d3d3d", margin: 0 }}>Kom online på 1 uge</h3>
            </div>
            <p style={{ color: "rgba(26,26,26,0.75)", lineHeight: 1.55, margin: 0, fontSize: "0.98rem" }}>Til den lille virksomhed der vil have en flot, funktionel hjemmeside uden besvær.</p>
            <div style={{ display: "flex", flexWrap: "wrap", gap: 8 }}>
              {["Hjemmeside","Domæne","Mail","Brand tema","Hosting"].map(t => (
                <span key={t} style={{ fontFamily: "var(--ff-mono)", fontSize: "0.7rem", color: "#3d3d3d", border: "1px solid rgba(26,26,26,0.25)", borderRadius: 100, padding: "5px 11px" }}>{t}</span>
              ))}
            </div>
          </div>

          {/* Avanceret */}
          <div className="reveal d1" style={{ background: "#3d3d3d", borderRadius: 18, padding: "40px 36px", display: "flex", flexDirection: "column", gap: 20 }}>
            <div>
              <span style={{ fontFamily: "var(--ff-mono)", fontSize: "0.78rem", letterSpacing: "0.1em", color: "#FF5C00" }}>AVANCERET</span>
              <div style={{ marginTop: 12, marginBottom: 4 }}>
                <span style={{ fontFamily: "var(--ff-display)", fontVariationSettings: '"wdth" 125', fontWeight: 900, fontSize: "clamp(3rem,6vw,5rem)", color: "#FF5C00", lineHeight: 1 }}>1.000</span>
                <span style={{ fontSize: "1.1rem", color: "#F5ECD7", opacity: 0.5 }}> kr/md</span>
              </div>
              <h3 style={{ fontFamily: "var(--ff-display)", fontWeight: 800, fontSize: "1.3rem", color: "#F5ECD7", margin: 0 }}>Mere funktionalitet</h3>
            </div>
            <p style={{ color: "rgba(245,236,215,0.6)", lineHeight: 1.55, margin: 0, fontSize: "0.98rem" }}>Til virksomheder med større behov — webshop, bookingsystem, flere sider og komplekse løsninger.</p>
            <div style={{ display: "flex", flexWrap: "wrap", gap: 8 }}>
              {["Alt i Simpel","Webshop","Booking","Avanceret design"].map(t => (
                <span key={t} style={{ fontFamily: "var(--ff-mono)", fontSize: "0.7rem", color: "#F5ECD7", border: "1px solid rgba(245,236,215,0.2)", borderRadius: 100, padding: "5px 11px" }}>{t}</span>
              ))}
            </div>
          </div>
        </div>

        <div className="sec-head" style={{ marginTop: 0, marginBottom: 32 }}>
          <h3 className="display reveal" style={{ fontSize: "clamp(1.6rem,3vw,2.4rem)" }}>Hvad er inkluderet</h3>
        </div>
        <div className="cards">
          <div className="card col-4 reveal">
            <span className="idx">01</span>
            <div className="glyph"><Glyph kind="web" /></div>
            <h3>Hjemmeside + domæne + mail</h3>
            <p>Du får det hele samlet. Hjemmeside, dit eget domæne (fx dinvirksomhed.dk) og en professionel mailadresse.</p>
            <div className="tags"><span>Inkluderet</span></div>
          </div>

          <div className="card col-4 reveal d1">
            <span className="idx">02</span>
            <div className="glyph"><Glyph kind="speed" /></div>
            <h3>Brand tema</h3>
            <p>Farver, fonte og visuel identitet skræddersyet til din virksomhed. Din side ser professionel og gennemtænkt ud fra dag ét.</p>
            <div className="tags"><span>Inkluderet</span></div>
          </div>

          <div className="card col-4 reveal d2">
            <span className="idx">03</span>
            <div className="glyph"><Glyph kind="growth" /></div>
            <h3>Hjælp til det hele</h3>
            <p>Vi guider dig igennem hele processen — fra idé til lancering. Du behøver ikke vide noget om teknik.</p>
            <div className="tags"><span>Inkluderet</span></div>
          </div>
        </div>

        <div className="sec-head" style={{ marginTop: 48, marginBottom: 32 }}>
          <h3 className="display reveal" style={{ fontSize: "clamp(1.6rem,3vw,2.4rem)" }}>Kan tilkøbes</h3>
        </div>
        <div className="cards">
          {[
            { no:"A", t:"Logo", d:"Et professionelt logo designet til din virksomhed.", kind:"web" },
            { no:"B", t:"Google My Business", d:"Vi opretter og optimerer din Google-profil så du vises på Maps.", kind:"local" },
            { no:"C", t:"Google Reviews", d:"Strategi til at få flere anmeldelser og styrke din online troværdighed.", kind:"seo" },
            { no:"D", t:"Google Ads", d:"Betalt annoncering der sender kunder direkte til din side.", kind:"growth" },
            { no:"E", t:"Sociale medier", d:"Opsætning og strategi til Facebook, Instagram og LinkedIn.", kind:"speed" },
            { no:"F", t:"Digital rådgivning", d:"Personlig sparring om din digitale strategi og online tilstedeværelse.", kind:"growth" },
          ].map((s,i) => (
            <div className={"card col-4 reveal d"+(i%3)} key={s.no}>
              <span className="idx">{s.no}</span>
              <div className="glyph"><Glyph kind={s.kind} /></div>
              <h3>{s.t}</h3>
              <p>{s.d}</p>
              <div className="tags"><span>Tilkøb</span></div>
            </div>
          ))}
        </div>
      </div>
    </section>
  );
}

/* simple geometric glyphs (no complex SVG) */
function Glyph({ kind }) {
  const s = { width: 22, height: 22, fill: "none", stroke: "currentColor", strokeWidth: 2, strokeLinecap: "round", strokeLinejoin: "round" };
  if (kind === "web") return <svg viewBox="0 0 24 24" {...s}><rect x="3" y="4" width="18" height="16" rx="2"/><path d="M3 9h18"/></svg>;
  if (kind === "seo") return <svg viewBox="0 0 24 24" {...s}><circle cx="11" cy="11" r="6"/><path d="M20 20l-4.5-4.5"/></svg>;
  if (kind === "speed") return <svg viewBox="0 0 24 24" {...s}><path d="M5 19a9 9 0 1 1 14 0"/><path d="M12 12l4-3"/></svg>;
  if (kind === "local") return <svg viewBox="0 0 24 24" {...s}><path d="M12 21s-6-5.3-6-10a6 6 0 1 1 12 0c0 4.7-6 10-6 10z"/><circle cx="12" cy="11" r="2"/></svg>;
  if (kind === "growth") return <svg viewBox="0 0 24 24" {...s}><path d="M4 18l5-5 4 4 7-8"/><path d="M16 9h4v4"/></svg>;
  return null;
}

/* ---- PROCESS ---- */
function Process() {
  const steps = [
    { no: "01", t: "Dataindsamling", d: "Vi sender dig vores kundeskabelon. Du svarer på et par spørgsmål om din virksomhed — det er alt hvad vi behøver for at komme i gang." },
    { no: "02", t: "Design af mockup", d: "Vi designer et første visuelt udkast af din hjemmeside — gratis og uforpligtende. Du ser præcis hvad du får, inden du forpligter dig til noget." },
    { no: "03", t: "Godkendelse & aftale", d: "Du godkender designet og bekræfter aftalen med én sætning pr. mail. Abonnementet starter den dag din side går live — ikke før." },
    { no: "04", t: "Kodning & GDPR", d: "Vi koder siden færdig og sørger for privatlivspolitik og cookiepolitik baseret på dine svar. Du behøver ikke tænke på det tekniske." },
    { no: "05", t: "Juridisk godkendelse", d: "Inden lancering sender vi dig det færdige resultat til gennemsyn. Du godkender de juridiske tekster, så alt er i orden." },
    { no: "06", t: "Lancering", d: "Siden flyttes til dit domæne og går live. Vi sender første faktura på 500 kr. — og fra nu af har du en professionel online tilstedeværelse." },
  ];
  return (
    <section className="section" id="proces" style={{ background: "#ede5d0" }}>
      <div className="wrap">
        <div className="sec-head">
          <h2 className="display reveal">Fra idé til live på 1 uge.</h2>
          <p className="reveal d1">Seks klare trin. Ingen overraskelser. Du ved præcis hvad der sker — og hvornår.</p>
        </div>
        <div className="steps">
          {steps.map((s, i) => (
            <div className={"step reveal d" + (i + 1)} key={s.no}>
              <span className="bar"></span>
              <span className="no">{s.no}</span>
              <h4>{s.t}</h4>
              <p>{s.d}</p>
            </div>
          ))}
        </div>
      </div>
    </section>
  );
}

/* ---- CASES ---- */
function Cases() {
  return (
    <section className="section" id="cases">
      <div className="wrap">
        <div className="sec-head">
          <h2 className="display reveal">Fra usynlig til uundgåelig</h2>
          <p className="reveal d1">Et udsnit af sider vi har bygget og skubbet op på Google. Træk dine egne screenshots ind her.</p>
        </div>
        <div className="cases">
          <div className="case reveal">
            <image-slot id="digro-case-1" shape="rect" placeholder="Slip et case-screenshot her"></image-slot>
            <div className="case__body">
              <div>
                <h4>Murermester Nord</h4>
                <div className="meta">Hjemmeside + lokal SEO</div>
              </div>
              <div className="case__result">side 4 → #1</div>
            </div>
          </div>
          <div className="case reveal d1">
            <image-slot id="digro-case-2" shape="rect" placeholder="Slip et case-screenshot her"></image-slot>
            <div className="case__body">
              <div>
                <h4>Studio Bjørk</h4>
                <div className="meta">Webshop + teknisk SEO</div>
              </div>
              <div className="case__result">+180% trafik</div>
            </div>
          </div>
        </div>

        <div className="resultstrip">
          <div className="rc reveal"><div className="big">3×</div><div className="lab">flere organiske besøgende i gennemsnit efter 6 måneder.</div></div>
          <div className="rc reveal d1"><div className="big">#1–3</div><div className="lab">placering på Google for de søgeord der betyder noget.</div></div>
          <div className="rc reveal d2"><div className="big">&lt;1s</div><div className="lab">indlæsningstid — hurtige sider rangerer højere.</div></div>
        </div>
      </div>
    </section>
  );
}

/* ---- HOME CONTENT ---- */
function HomeContent() {
  return (
    <React.Fragment>

      {/* Hvorfor hjemmeside */}
      <section className="section">
        <div className="wrap">
          <div className="sec-head">
            <h2 className="display reveal">Din hjemmeside er din bedste sælger.</h2>
            <p className="reveal d1">Den arbejder 24/7, beder aldrig om løn og møder kunden præcis i det øjeblik de søger efter det du tilbyder.</p>
          </div>
          <div className="cards">
            <div className="card col-4 reveal">
              <span className="idx">01</span>
              <div className="glyph"><Glyph kind="growth" /></div>
              <h3>81% søger online først</h3>
              <p>Før en kunde ringer, googler de. Hvis du ikke er der, er din konkurrent det. En professionel hjemmeside sikrer at du bliver fundet — ikke forbigået.</p>
            </div>
            <div className="card col-4 reveal d1">
              <span className="idx">02</span>
              <div className="glyph"><Glyph kind="local" /></div>
              <h3>Lokal synlighed betaler sig</h3>
              <p>For kleine virksomheder er lokal SEO guld. Vi får dig til tops på "VVS Aarhus" og "frisør Odense" — de søgninger der sender kunder direkte til dig.</p>
            </div>
            <div className="card col-4 reveal d2">
              <span className="idx">03</span>
              <div className="glyph"><Glyph kind="web" /></div>
              <h3>Tillid starter online</h3>
              <p>En slet ikke-eksisterende eller forældet hjemmeside sender kunderne videre. Et professionelt site signalerer at du tager din forretning seriøst.</p>
            </div>
          </div>
        </div>
      </section>

      {/* Hvad vi gør for små virksomheder */}
      <section className="section" style={{ background: "#ede5d0" }}>
        <div className="wrap">
          <div className="sec-head">
            <h2 className="display reveal">Bygget til den lille virksomhed.</h2>
            <p className="reveal d1">Du behøver ikke et kæmpe budget for at slå de store. Vi laver sider der konkurrerer — og vinder.</p>
          </div>
          <div className="steps">
            {[
              { no: "01", t: "Ingen unødige omkostninger", d: "Ingen dyre abonnementer eller skjulte gebyrer. Du betaler for det du får, og vi er ærlige om hvad der virker for din type forretning." },
              { no: "02", t: "Klar til Google fra dag ét", d: "SEO er ikke noget vi tilføjer bagefter. Det er bagt ind i alt vi bygger — struktur, hastighed, tekster og teknisk opsætning." },
              { no: "03", t: "Du ejer alt selv", d: "Din hjemmeside, dit domæne, dine data. Vi afleverer nøglerne og sikrer du kan klare det daglige selv — eller vi gør det for dig." },
              { no: "04", t: "Resultater du kan se", d: "Vi rapporterer i et sprog du forstår. Flere klik, flere opkald, flere kunder. Ikke ligegyldige tal." },
            ].map((s, i) => (
              <div className={"step reveal d" + (i + 1)} key={s.no}>
                <span className="bar"></span>
                <span className="no">{s.no}</span>
                <h4>{s.t}</h4>
                <p>{s.d}</p>
              </div>
            ))}
          </div>
        </div>
      </section>

      {/* Stats */}
      <section className="section">
        <div className="wrap">
          <div className="resultstrip">
            <div className="rc reveal"><div className="big">1 uge</div><div className="lab">fra første snak til din hjemmeside er live og klar til kunder.</div></div>
            <div className="rc reveal d1"><div className="big">500 kr</div><div className="lab">fast månedlig pris. Domæne, mail og brand tema inkluderet.</div></div>
            <div className="rc reveal d2"><div className="big">100%</div><div className="lab">ejerskab fra dag ét — du ejer alt, også hvis du siger op.</div></div>
          </div>
        </div>
      </section>

    </React.Fragment>
  );
}

/* ---- CTA ---- */
function CTA() {
  return (
    <section className="section" id="kontakt">
      <div className="wrap">
        <div className="cta reveal">
          <div className="cta__blob a"></div>
          <div className="cta__blob b"></div>
          <div style={{ position: "relative", zIndex: 2 }}>
            <h2>Få et gratis mockup af din hjemmeside.</h2>
            <p>Vi designer et udkast til dig — helt gratis og uforpligtende. Kan du lide det, går vi videre. Kan du ikke, koster det dig ingenting.</p>
            <div style={{ display: "flex", gap: 14, justifyContent: "center", flexWrap: "wrap" }}>
              <a href="/kontakt" className="btn btn--mail" style={{ display: "inline-flex", alignItems: "center", gap: 8 }}>
                <span className="mail-icon">
                  <svg width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2.2" strokeLinecap="round" strokeLinejoin="round">
                    <rect x="2" y="4" width="20" height="16" rx="2"/>
                    <path className="mail-flap" d="M2 7l10 7 10-7"/>
                  </svg>
                </span>
                Skriv til os
              </a>
              <a href="tel:+4522959859" className="btn btn--ring" style={{ background: "rgba(255,255,255,0.18)", color: "#3d3d3d", boxShadow: "none", border: "1.5px solid rgba(26,26,26,0.25)", display: "inline-flex", alignItems: "center", gap: 8 }}>
                <span className="phone-icon">
                  <svg width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2.2" strokeLinecap="round" strokeLinejoin="round">
                    <path d="M22 16.92v3a2 2 0 0 1-2.18 2 19.79 19.79 0 0 1-8.63-3.07A19.5 19.5 0 0 1 4.69 12a19.79 19.79 0 0 1-3.07-8.67A2 2 0 0 1 3.6 1.27h3a2 2 0 0 1 2 1.72c.127.96.361 1.903.7 2.81a2 2 0 0 1-.45 2.11L7.91 8.84a16 16 0 0 0 6 6l1.27-.95a2 2 0 0 1 2.11-.45c.907.339 1.85.573 2.81.7a2 2 0 0 1 1.72 2.03z"/>
                  </svg>
                </span>
                Ring 22 95 98 59
              </a>
            </div>
          </div>
        </div>
      </div>
    </section>
  );
}

/* ---- FOOTER ---- */
function Footer() {
  return (
    <footer className="footer">
      <div className="wrap">
        <div className="footer__top">
          <div className="footer__brand">
            <a href="/" className="logo" aria-label="Digro">
          <svg viewBox="0 0 1527.88 785.76" xmlns="http://www.w3.org/2000/svg" aria-hidden="true">
            <path d="M481.33,132.82v308.11c0,5.53-4.48,10-10,10h-64.78c-5.52,0-10-4.47-10-10V132.82c0-5.52,4.48-10,10-10h64.78c5.52,0,10,4.48,10,10Z"/>
            <path d="M396.46,45.48c0-20.99,0-45.48,42.48-45.48s42.48,24.49,42.48,45.48,0,45.49-42.48,45.49-42.48-24.49-42.48-45.49Z"/>
            <path d="M1157.69,132.82v64.78c0,5.52-4.47,10-10,10h-74.77c-11.04,0-39.7,1.78-39.7,31.37v201.99c0,5.52-4.47,10-10,10h-64.77c-5.53,0-10-4.48-10-10v-201.99c0-73.76,42.39-116.15,124.47-116.15h74.77c5.53,0,10,4.48,10,10Z"/>
            <path d="M1358.8,100.87c-126.69,0-169.08,42.39-169.08,175.04,0,63.36,9.67,106.13,33.58,133.52l-123.01,123.01c-3.9,3.9-10.24,3.9-14.14,0l-21-21c-3.9-3.9-10.23-3.9-14.14,0l-45.81,45.81c-3.9,3.91-3.9,10.24,0,14.14l80.95,80.94c3.9,3.9,10.24,3.9,14.14,0l204.72-204.72c15.94,2.3,33.82,3.35,53.79,3.35,126.69,0,169.08-42.39,169.08-175.05s-42.39-175.04-169.08-175.04ZM1358.8,366.18c-84.3,0-84.3-48.6-84.3-90.27s0-90.26,84.3-90.26,84.3,48.6,84.3,90.26,0,90.27-84.3,90.27Z"/>
            <path d="M892.12,122.82h-180.89c-126.69,0-169.08,42.39-169.08,175.04s42.39,175.04,169.08,175.04h0c33.65.01,61.36-2.98,83.9-9.86.4,7.13.4,14.32.4,21.32,0,41.67,0,90.27-84.3,90.27-77.71,0-83.79-41.3-84.26-80.39-.07-5.48-4.52-9.88-10-9.88h-64.73c-5.59,0-10.1,4.59-10,10.18,2.17,124.65,45.6,164.86,168.99,164.86s169.08-42.39,169.08-175.04v-186.5c0-24.57-1.46-46.05-4.63-64.73.61-25.1,26.44-7.72,26.44-25.53v-74.78c0-5.52-4.48-10-10-10ZM795.13,319.19c-1.98,35.3-13.76,68.94-83.9,68.94-84.3,0-84.3-48.6-84.3-90.27s0-90.26,84.3-90.26,84.3,48.6,84.3,90.26c0,7,0,14.2-.4,21.33Z"/>
            <path d="M253.38,10v112.98h-71.2c-4.26-.11-8.63-.16-13.1-.16C42.39,122.82,0,165.21,0,297.86s42.39,175.05,169.08,175.05,169.03-48.18,169.08-174.82V10c0-5.52-4.48-10-10-10h-64.78c-5.52,0-10,4.48-10,10ZM169.08,388.13c-84.3,0-84.3-48.6-84.3-90.27s0-87.04,76.18-90.1c2.61-.11,5.32-.16,8.12-.16s5.51.05,8.12.16c76.18,3.06,76.18,49.82,76.18,90.1v.23c0,41.62-.15,90.04-84.3,90.04Z"/>
          </svg>
        </a>
            <p>Digro — Digital Growth. Vi bygger professionelle hjemmesider til danske virksomheder fra 500 kr/md. Domæne, mail og brand tema inkluderet.</p>
          </div>
          <div className="footer__cols">
            <div className="footer__col">
              <h5>Ydelser</h5>
              <a href="/ydelser">Hjemmesider</a>
              <a href="/ydelser">SEO</a>
              <a href="/ydelser">Lokal synlighed</a>
              <a href="/ydelser">Vedligehold</a>
            </div>
            <div className="footer__col">
              <h5>Bureau</h5>
              <a href="/proces">Proces</a>
              <a href="/cases">Cases</a>
              <a href="/kontakt">Kontakt</a>
            </div>
            <div className="footer__col">
              <h5>Kontakt</h5>
              <a href="/kontakt">Kontakt@digro.dk</a>
              <a href="tel:+4522959859">22 95 98 59</a>
              <span style={{ opacity: 0.5, fontSize: "0.8rem" }}>Man–søn 8–21</span>
            </div>
          </div>
        </div>
        <div className="footer__bottom">
          <span>© 2026 Digro — Digital Growth · digro.dk</span>
          <span>Dyssevangen 26 · Man–søn 8–21</span>
        </div>
      </div>
    </footer>
  );
}

/* ---- CONTACT FORM PAGE ---- */
function ContactForm({ onClose }) {
  const [type, setType]         = React.useState("simpel");
  const [services, setServices] = React.useState([]);
  const [navn, setNavn]         = React.useState("");
  const [mail, setMail]         = React.useState("");
  const [besked, setBesked]     = React.useState("");
  const [sent, setSent]         = React.useState(false);
  const [sending, setSending]   = React.useState(false);
  const [error, setError]       = React.useState(false);
  const [confirm, setConfirm]   = React.useState(false);
  const [confirmPos, setConfirmPos] = React.useState({ x: 0, y: 0 });
  const backdropRef             = React.useRef(null);
  const panelRef                = React.useRef(null);
  const confirmRef              = React.useRef(null);
  const [cursorPos, setCursorPos] = React.useState({ x: -200, y: -200 });
  const [overBackdrop, setOverBackdrop] = React.useState(false);

  React.useEffect(() => {
    document.body.style.overflow = "hidden";
    return () => {
      document.body.style.overflow = "";
      const gc = document.getElementById("custom-cursor");
      if (gc) gc.style.opacity = "";
    };
  }, []);

  React.useEffect(() => {
    if (!window.gsap) return;
    const tl = gsap.timeline({ defaults: { ease: "power4.out" } });
    tl.fromTo(panelRef.current, { x: "100%" }, { x: "0%", duration: 0.7, ease: "power4.out" })
      .fromTo(".cf-item", { y: 28, opacity: 0 }, { y: 0, opacity: 1, duration: 0.5, stagger: 0.09 });
  }, []);

  React.useEffect(() => {
    if (!confirm || !confirmRef.current || !window.gsap) return;
    gsap.fromTo(confirmRef.current,
      { scale: 0.82, opacity: 0, y: 8 },
      { scale: 1, opacity: 1, y: 0, duration: 0.28, ease: "back.out(2)" }
    );
  }, [confirm]);

  const closeConfirm = (cb) => {
    if (confirmRef.current && window.gsap) {
      gsap.to(confirmRef.current, {
        scale: 0.85, opacity: 0, y: 6, duration: 0.16, ease: "power2.in",
        onComplete: () => { setConfirm(false); cb && cb(); }
      });
    } else { setConfirm(false); cb && cb(); }
  };

  const slideOut = () => {
    if (!window.gsap) { onClose(); return; }
    const tl = gsap.timeline({ onComplete: onClose });
    if (confirmRef.current) {
      tl.to(confirmRef.current, { scale: 0.8, opacity: 0, duration: 0.14, ease: "power2.in" });
    }
    tl.to(panelRef.current,   { xPercent: 110, duration: 0.55, ease: "power4.in" },
        confirmRef.current ? "-=0.05" : 0)
      .to(backdropRef.current, { opacity: 0, duration: 0.3, ease: "power2.in" }, "-=0.3");
  };

  const shakeConfirm = () => {
    if (!confirmRef.current || !window.gsap) return;
    gsap.killTweensOf(confirmRef.current);
    gsap.fromTo(confirmRef.current,
      { x: 0 },
      { x: 10, duration: 0.06, ease: "power1.inOut", yoyo: true, repeat: 5,
        onComplete: () => gsap.set(confirmRef.current, { x: 0 }) }
    );
  };

  const toggleService = s =>
    setServices(p => p.includes(s) ? p.filter(x => x !== s) : [...p, s]);

  const handleClose = (e) => {
    if (!sent) {
      if (confirm) { shakeConfirm(); return; }
      if (e) setConfirmPos({ x: e.clientX, y: e.clientY });
      setConfirm(true);
    } else { slideOut(); }
  };

  const enterBackdrop = () => {
    setOverBackdrop(true);
    const gc = document.getElementById("custom-cursor");
    if (gc) gc.style.opacity = "0";
  };

  const leaveBackdrop = () => {
    setOverBackdrop(false);
    const gc = document.getElementById("custom-cursor");
    if (gc) gc.style.opacity = "1";
  };

  const handleSubmit = async e => {
    e.preventDefault();
    setSending(true);
    try {
      const res = await fetch("https://formsubmit.co/ajax/digro@digro.dk", {
        method: "POST",
        headers: { "Content-Type": "application/json", "Accept": "application/json" },
        body: JSON.stringify({
          navn, mail, email: mail,
          pakke: type === "simpel" ? "Simpel — 500 kr/md" : "Avanceret — 1.000 kr/md",
          ydelser: services.join(", ") || "—",
          besked,
          _subject: `Ny henvendelse fra ${navn} — Digro`,
          _captcha: "false",
          _replyto: mail,
          _autoresponse: `Hej ${navn.split(" ")[0]},\n\nTak for din henvendelse! Vi har modtaget din besked og vender tilbage inden for 24 timer.\n\nMed venlig hilsen\nDigro-teamet\ndigro.dk`,
        }),
      });
      const data = await res.json();
      if (res.ok && data.success === "true") { setSent(true); } else { throw new Error(); }
    } catch {
      setError(true);
    } finally { setSending(false); }
  };

  const chipStyle = (active) => ({
    fontFamily: "var(--ff-mono)", fontSize: "0.8rem", padding: "10px 18px",
    borderRadius: 100, border: `1.5px solid ${active ? "#FF5C00" : "rgba(245,236,215,0.15)"}`,
    background: active ? "#FF5C00" : "rgba(245,236,215,0.06)", color: active ? "#1a1a1a" : "#F5ECD7",
    cursor: "none", transition: "all 0.18s ease", fontWeight: active ? 700 : 400,
  });

  const inputStyle = {
    width: "100%", background: "rgba(245,236,215,0.07)", border: "1.5px solid rgba(245,236,215,0.12)",
    borderRadius: 12, padding: "14px 18px", color: "#F5ECD7", fontFamily: "var(--ff-body)",
    fontSize: "0.95rem", outline: "none", transition: "border-color 0.2s",
    boxSizing: "border-box",
  };

  const labelStyle = { fontSize: "0.82rem", color: "rgba(245,236,215,0.5)", marginBottom: 12, display: "block", letterSpacing: "0.04em" };

  const SERVICES = ["Hjemmeside", "Webshop", "Logo", "Google My Business", "Sociale medier", "Google Ads", "Digital rådgivning", "Andet"];

  return (
    <div style={{ position: "fixed", inset: 0, display: "flex", alignItems: "center",
      justifyContent: "flex-end", zIndex: 200, fontFamily: "var(--ff-body)", padding: 20 }}>

      {/* Backdrop — click to close */}
      <div ref={backdropRef} onClick={handleClose}
        onMouseEnter={enterBackdrop} onMouseLeave={leaveBackdrop}
        onMouseMove={e => setCursorPos({ x: e.clientX, y: e.clientY })}
        style={{ position: "absolute", inset: 0,
          background: "rgba(0,0,0,0.35)", backdropFilter: "blur(6px)",
          WebkitBackdropFilter: "blur(6px)",
          animation: "cf-backdrop-in 0.4s ease forwards" }}/>

      {/* "Luk" cursor over backdrop */}
      {overBackdrop && (
        <div style={{ position: "fixed", left: cursorPos.x, top: cursorPos.y,
          transform: "translate(-2px, -2px)", pointerEvents: "none", zIndex: 9999,
          display: "flex", flexDirection: "column", alignItems: "flex-start", gap: 5 }}>
          <svg width="16" height="21" viewBox="0 0 128.04 170.8" fill="none">
            <path d="M0,152.12V18.68C0,2.07,20.09-6.25,31.83,5.5l90.71,90.71c11.75,11.75,3.43,31.83-13.19,31.83h-40.33c-5.92,0-11.48,2.81-15,7.57l-20.38,27.59c-10.69,14.47-33.65,6.91-33.65-11.08Z" fill="#F5ECD7"/>
          </svg>
          <span style={{ fontFamily: "var(--ff-mono)", fontSize: "0.7rem", fontWeight: 700, color: "#F5ECD7",
            letterSpacing: "0.1em", textTransform: "uppercase", marginLeft: -2,
            textShadow: "0 1px 4px rgba(0,0,0,0.6)" }}>Luk</span>
        </div>
      )}

      {/* Squircle panel */}
      <div ref={panelRef} style={{ width: "clamp(360px, 44vw, 560px)", background: "#161616",
        overflowY: "scroll", maxHeight: "calc(100vh - 40px)",
        borderRadius: 28, position: "relative", zIndex: 1,
        padding: "clamp(36px,4vw,60px) clamp(28px,3.5vw,52px) 100px",
        transform: "translateX(calc(100% + 20px))",
        boxShadow: "0 32px 80px rgba(0,0,0,0.35)" }}>

        {sent ? (
          <div style={{ textAlign: "center", paddingTop: 80 }}>
            <div style={{ fontSize: "3rem", marginBottom: 24 }}>✉️</div>
            <h2 style={{ fontFamily: "var(--ff-display)", fontWeight: 900, fontSize: "2rem", color: "#F5ECD7", margin: "0 0 16px" }}>
              Tak, {navn.split(" ")[0]}!
            </h2>
            <p style={{ color: "rgba(245,236,215,0.6)", lineHeight: 1.6 }}>
              Vi har modtaget din besked og vender tilbage inden for 24 timer.
            </p>
            <button onClick={slideOut}
              style={{ ...chipStyle(true), marginTop: 40, padding: "14px 32px" }}>
              Luk →
            </button>
          </div>
        ) : (
          <form onSubmit={handleSubmit} style={{ display: "flex", flexDirection: "column", gap: 36 }}>

            {/* Headline */}
            <h1 className="cf-item" style={{ fontFamily: "var(--ff-display)", fontVariationSettings: '"wdth" 125',
              fontWeight: 900, fontSize: "clamp(2rem,4vw,3rem)", color: "#F5ECD7",
              lineHeight: 1.05, margin: 0, opacity: 0 }}>
              Lad os bygge<br/>din hjemmeside.
            </h1>

            {/* Type */}
            <div className="cf-item" style={{ opacity: 0 }}>
              <span style={labelStyle}>Vælg pakke</span>
              <div style={{ display: "flex", gap: 10, flexWrap: "wrap" }}>
                {[["simpel","Simpel — 500 kr/md"],["avanceret","Avanceret — 1.000 kr/md"]].map(([v,l]) => (
                  <button type="button" key={v} onClick={() => setType(v)} style={chipStyle(type === v)}>{l}</button>
                ))}
              </div>
            </div>

            {/* Personal info */}
            <div className="cf-item" style={{ opacity: 0 }}>
              <span style={labelStyle}>Dine oplysninger</span>
              <div style={{ display: "grid", gridTemplateColumns: "1fr 1fr", gap: 12 }}>
                <input style={inputStyle} placeholder="Dit navn" value={navn}
                  onChange={e => setNavn(e.target.value)} required/>
                <input style={inputStyle} placeholder="Din mailadresse" type="email" value={mail}
                  onChange={e => setMail(e.target.value)} required/>
              </div>
            </div>

            {/* Services */}
            <div className="cf-item" style={{ opacity: 0 }}>
              <span style={labelStyle}>Hvad har du brug for?</span>
              <div style={{ display: "flex", flexWrap: "wrap", gap: 10 }}>
                {SERVICES.map(s => (
                  <button type="button" key={s} onClick={() => toggleService(s)} style={chipStyle(services.includes(s))}>{s}</button>
                ))}
              </div>
            </div>

            {/* Message */}
            <div className="cf-item" style={{ opacity: 0 }}>
              <span style={labelStyle}>Fortæl os mere</span>
              <textarea style={{ ...inputStyle, minHeight: 120, resize: "vertical", lineHeight: 1.6 }}
                placeholder="Beskriv din virksomhed og hvad du drømmer om — jo mere du deler, jo bedre kan vi hjælpe."
                value={besked} onChange={e => setBesked(e.target.value)}/>
            </div>

            {/* Submit */}
            <button className="cf-item" type="submit"
              style={{ background: "#FF5C00", color: "#1a1a1a", border: "none", borderRadius: 100,
                padding: "18px 36px", fontFamily: "var(--ff-mono)", fontWeight: 700, fontSize: "0.95rem",
                cursor: "none", transition: "transform 0.2s, box-shadow 0.2s",
                boxShadow: "0 8px 32px -8px rgba(255,92,0,0.5)", alignSelf: "flex-start", opacity: 0 }}>
              {sending ? "Sender..." : "Send besked →"}
            </button>

            {error && (
              <div style={{ background: "rgba(255,92,0,0.1)", border: "1px solid rgba(255,92,0,0.3)",
                borderRadius: 12, padding: "14px 18px", display: "flex", alignItems: "center", gap: 12 }}>
                <span style={{ color: "#FF5C00", fontSize: "1.1rem" }}>!</span>
                <div>
                  <p style={{ color: "#F5ECD7", fontSize: "0.85rem", margin: "0 0 4px", fontWeight: 600 }}>
                    Noget gik galt
                  </p>
                  <p style={{ color: "rgba(245,236,215,0.5)", fontSize: "0.78rem", margin: 0 }}>
                    Prøv igen eller ring på <a href="tel:+4522959859" style={{ color: "#FF5C00" }}>22 95 98 59</a>
                  </p>
                </div>
              </div>
            )}

            <p className="cf-item" style={{ color: "rgba(245,236,215,0.3)", fontSize: "0.78rem", margin: 0, opacity: 0 }}>
              Eller ring direkte: <a href="tel:+4522959859" style={{ color: "rgba(245,236,215,0.5)" }}>22 95 98 59</a> · Man–søn 8–21
            </p>
          </form>
        )}

      </div>

      {confirm && (
        <div style={{ position: "fixed", inset: 0, zIndex: 300, pointerEvents: "none" }}>
          <div ref={confirmRef} style={{ position: "absolute", pointerEvents: "all",
            left: Math.max(160, Math.min(confirmPos.x, window.innerWidth - 160)),
            top: Math.max(100, Math.min(confirmPos.y, window.innerHeight - 100)),
            transform: "translate(-50%, -50%)",
            background: "#1e1e1e", borderRadius: 16, padding: "24px 22px",
            textAlign: "center", boxShadow: "0 16px 48px rgba(0,0,0,0.55)",
            opacity: 0 }}>
            <p style={{ color: "#F5ECD7", fontSize: "0.95rem", fontWeight: 700, margin: "0 0 6px",
              fontFamily: "var(--ff-body)", whiteSpace: "nowrap" }}>
              Glemte du at trykke send?
            </p>
            <p style={{ color: "rgba(245,236,215,0.45)", fontSize: "0.78rem", margin: "0 0 18px", whiteSpace: "nowrap" }}>
              Din besked er ikke sendt endnu.
            </p>
            <div style={{ display: "flex", gap: 8, justifyContent: "center" }}>
              <button onClick={slideOut}
                style={{ fontFamily: "var(--ff-mono)", fontSize: "0.72rem", padding: "9px 16px",
                  borderRadius: 100, border: "1.5px solid rgba(245,236,215,0.18)",
                  background: "transparent", color: "#F5ECD7", cursor: "none", whiteSpace: "nowrap" }}>
                Luk alligevel
              </button>
              <button onClick={() => closeConfirm(null)}
                style={{ fontFamily: "var(--ff-mono)", fontSize: "0.72rem", padding: "9px 16px",
                  borderRadius: 100, border: "none",
                  background: "#FF5C00", color: "#1a1a1a", fontWeight: 700, cursor: "none", whiteSpace: "nowrap" }}>
                Tilbage til formular
              </button>
            </div>
          </div>
        </div>
      )}
    </div>
  );
}

Object.assign(window, { Nav, Marquee, Services, Process, Cases, CTA, Footer, HomeContent, ContactForm, useReveal, Glyph });