// hero.jsx — Hero with multiple variants
// Variant: "video" | "split" | "typo"

function HeroCanvas() {
  // Animated industrial backdrop — canvas particles + parallax silhouettes
  const canvasRef = React.useRef(null);
  React.useEffect(() => {
    const c = canvasRef.current; if (!c) return;
    const ctx = c.getContext("2d");
    let w = c.width = c.offsetWidth;
    let h = c.height = c.offsetHeight;
    const dpr = Math.min(window.devicePixelRatio || 1, 2);
    function resize() {
      w = c.offsetWidth; h = c.offsetHeight;
      c.width = w * dpr; c.height = h * dpr;
      ctx.setTransform(dpr, 0, 0, dpr, 0, 0);
    }
    resize();
    window.addEventListener("resize", resize);

    // Dust particles + slow drifting beams
    const N = 80;
    const dust = Array.from({length: N}, () => ({
      x: Math.random() * w,
      y: Math.random() * h,
      vx: (Math.random() - 0.5) * 0.2,
      vy: (Math.random() - 0.5) * 0.1 - 0.05,
      r: Math.random() * 1.4 + 0.2,
      a: Math.random() * 0.5 + 0.05,
    }));

    let raf, t = 0;
    function frame() {
      t += 0.005;
      ctx.clearRect(0, 0, w, h);

      // Warm sunset gradient base — construction site dawn
      const g = ctx.createLinearGradient(0, 0, 0, h);
      g.addColorStop(0,    "#1a1411");
      g.addColorStop(0.45, "#2a1d16");
      g.addColorStop(0.78, "#3a261a");
      g.addColorStop(1.0,  "#181513");
      ctx.fillStyle = g;
      ctx.fillRect(0, 0, w, h);

      // Soft golden glow from right (sunrise)
      const rg = ctx.createRadialGradient(w*0.82, h*0.55, 0, w*0.82, h*0.55, Math.max(w,h)*0.7);
      rg.addColorStop(0,   "rgba(217, 145, 70, 0.32)");
      rg.addColorStop(0.4, "rgba(148, 67, 30, 0.12)");
      rg.addColorStop(1,   "rgba(0,0,0,0)");
      ctx.fillStyle = rg;
      ctx.fillRect(0, 0, w, h);

      // Silhouette skyline (cranes + buildings)
      ctx.fillStyle = "rgba(10,7,5,0.92)";
      const baseY = h * 0.82;
      // Buildings
      const bldgs = [
        [0.05, 0.62, 0.08, 0.20],
        [0.13, 0.55, 0.06, 0.27],
        [0.20, 0.48, 0.10, 0.34],
        [0.31, 0.58, 0.07, 0.24],
        [0.39, 0.52, 0.09, 0.30],
        [0.49, 0.45, 0.11, 0.37],
        [0.62, 0.50, 0.09, 0.32],
        [0.72, 0.57, 0.07, 0.25],
        [0.80, 0.50, 0.08, 0.32],
        [0.89, 0.62, 0.10, 0.20],
      ];
      ctx.beginPath();
      ctx.moveTo(0, baseY);
      bldgs.forEach(([x, y, bw, bh]) => {
        const x0 = x * w, y0 = y * h;
        const x1 = (x + bw) * w;
        ctx.lineTo(x0, baseY);
        ctx.lineTo(x0, y0);
        ctx.lineTo(x1, y0);
        ctx.lineTo(x1, baseY);
      });
      ctx.lineTo(w, baseY);
      ctx.lineTo(w, h);
      ctx.lineTo(0, h);
      ctx.closePath();
      ctx.fill();

      // Cranes (foreground) — rotating jibs
      function crane(cx, cy, scale, rot) {
        ctx.save();
        ctx.translate(cx, cy);
        ctx.strokeStyle = "rgba(20,15,12,0.95)";
        ctx.lineWidth = 2;
        // Mast
        ctx.beginPath();
        ctx.moveTo(0, 0);
        ctx.lineTo(0, -160 * scale);
        ctx.stroke();
        // Lattice — diagonals
        for (let i = 0; i < 8; i++) {
          ctx.beginPath();
          ctx.moveTo(-5, -i * 20 * scale);
          ctx.lineTo(5, -(i+1) * 20 * scale);
          ctx.stroke();
        }
        // Jib (rotating very slowly)
        ctx.save();
        ctx.translate(0, -160 * scale);
        ctx.rotate(rot);
        ctx.beginPath();
        ctx.moveTo(-30 * scale, 0);
        ctx.lineTo(120 * scale, 0);
        ctx.lineTo(110 * scale, -8 * scale);
        ctx.moveTo(-30 * scale, 0);
        ctx.lineTo(-20 * scale, -10 * scale);
        ctx.stroke();
        // Counter jib lattice
        for (let i = 0; i < 12; i++) {
          ctx.beginPath();
          ctx.moveTo(i * 10 * scale, 0);
          ctx.lineTo((i + 1) * 10 * scale, -6 * scale);
          ctx.stroke();
        }
        // Cable + hook
        ctx.beginPath();
        ctx.moveTo(80 * scale, 0);
        ctx.lineTo(80 * scale, 60 * scale + Math.sin(t * 0.8) * 6 * scale);
        ctx.stroke();
        ctx.fillStyle = "rgba(20,15,12,0.95)";
        ctx.fillRect(76 * scale, 60 * scale + Math.sin(t * 0.8) * 6 * scale, 8 * scale, 6 * scale);
        ctx.restore();
        ctx.restore();
      }
      crane(w * 0.22, baseY, 1.0, Math.sin(t * 0.18) * 0.04);
      crane(w * 0.66, baseY, 1.3, -0.05 + Math.sin(t * 0.12 + 1) * 0.03);

      // Subtle horizontal scan lines (industrial texture)
      ctx.globalAlpha = 0.04;
      ctx.fillStyle = "#fff";
      for (let y = 0; y < h; y += 3) {
        ctx.fillRect(0, y, w, 1);
      }
      ctx.globalAlpha = 1;

      // Dust particles
      dust.forEach(p => {
        p.x += p.vx; p.y += p.vy;
        if (p.x < 0) p.x = w;
        if (p.x > w) p.x = 0;
        if (p.y < 0) p.y = h;
        ctx.fillStyle = `rgba(217,180,140,${p.a})`;
        ctx.beginPath();
        ctx.arc(p.x, p.y, p.r, 0, Math.PI * 2);
        ctx.fill();
      });

      raf = requestAnimationFrame(frame);
    }
    frame();
    return () => { cancelAnimationFrame(raf); window.removeEventListener("resize", resize); };
  }, []);

  return <canvas ref={canvasRef} className="hero-canvas"></canvas>;
}

function Hero({ variant = "video", setRoute }) {
  const meta = (
    <div className="hero-meta">
      <span><strong>EST. 1998</strong></span>
      <span>Hovedentreprise · Anlæg · Infrastruktur</span>
      <span>Kolding · Aarhus · Hovedstaden</span>
    </div>
  );

  if (variant === "split") {
    return (
      <section className="hero split">
        <div className="hero-text wrap">
          {meta}
          <h1 className="h-display">
            Vi bygger<br/>
            fundamentet<br/>
            for fremtiden
            <em>— én tonne ad gangen.</em>
          </h1>
          <p className="lead" style={{marginTop:32, maxWidth:'40ch'}}>
            DM Entreprenør er Danmarks bagland for store anlægsopgaver — fra fundering og infrastruktur til kystsikring og naturgenopretning.
          </p>
          <div className="hero-cta-row" style={{marginTop:40}}>
            <button className="btn" onClick={() => setRoute("kontakt")}>
              Bestil opmåling <Arrow size={14}/>
            </button>
            <button className="btn ghost" onClick={() => setRoute("losninger")}>
              Se løsninger
            </button>
          </div>
        </div>
        <div className="hero-bg">
          <ImageBlock id="hero-split" label="Maskinpark · gravearbejde" aspect="3-4"
            style={{height:'100%', aspectRatio:'auto', border:0}}/>
        </div>
      </section>
    );
  }

  if (variant === "typo") {
    return (
      <section className="hero typo">
        <div className="hero-bg"><HeroCanvas/></div>
        <div className="wrap hero-inner">
          {meta}
          <h1 className="h-display" style={{lineHeight:0.86}}>
            JORD<br/>
            <em style={{margin:'-20px 0 -10px', fontSize:'0.85em'}}>·beton·</em>
            FREMTID
          </h1>
          <p className="lead" style={{marginTop:28, maxWidth:'42ch'}}>
            En entreprenør for projekter, der skal stå i hundrede år.
          </p>
          <div className="hero-foot">
            <div className="hero-cta-row">
              <button className="btn" onClick={() => setRoute("kontakt")}>
                Få tilbud <Arrow size={14}/>
              </button>
              <button className="btn ghost" onClick={() => setRoute("beregner")}>
                Estimat på 2 min
              </button>
            </div>
            <HeroStats/>
          </div>
        </div>
      </section>
    );
  }

  // Default: "video" (animated canvas)
  return (
    <section className="hero">
      <div className="hero-bg"><HeroCanvas/></div>
      <div className="wrap hero-inner">
        {meta}
        <h1 className="h-display">
          Vi bygger fundamentet
          <em>for fremtiden.</em>
        </h1>
        <div className="hero-foot">
          <div>
            <p className="lead" style={{maxWidth:'40ch', marginBottom:32}}>
              Fra første spadestik til ibrugtagning — DM Entreprenør leverer infrastruktur, erhvervsbyggeri og anlæg med håndværk og målbar præcision.
            </p>
            <div className="hero-cta-row">
              <button className="btn" onClick={() => setRoute("kontakt")}>
                Få tilbud <Arrow size={14}/>
              </button>
              <button className="btn ghost" onClick={() => setRoute("beregner")}>
                Estimer tidsplan
              </button>
            </div>
          </div>
          <HeroStats/>
        </div>
      </div>
    </section>
  );
}

function HeroStats() {
  return (
    <div className="hero-stats">
      <div className="hero-stat">
        <div className="num">412<em>+</em></div>
        <div className="lbl">Afsluttede projekter</div>
      </div>
      <div className="hero-stat">
        <div className="num">28</div>
        <div className="lbl">År i branchen</div>
      </div>
      <div className="hero-stat">
        <div className="num">94<em>%</em></div>
        <div className="lbl">Tid &amp; budget overholdt</div>
      </div>
    </div>
  );
}

Object.assign(window, { Hero, HeroCanvas, HeroStats });