// Hero — minimalist centered. Headline + CTA, with 2 category dots bottom-right.
const HERO_SLIDES = [
{
  id: "aabne",
  href: "aabne-investeringer",
  image: "assets/images/property-nordsjaelland.jpg",
  type: "Vores åbne investeringer",
  title: "Åbne investeringer",
  short: "Åbne investeringer",
  kpis: null
},
{
  id: "trige",
  href: "case?id=trige",
  image: "assets/images/property-aarhus.jpg",
  type: "Investeringsejendom",
  title: "Byhøjparken",
  short: "Byhøjparken",
  kpis: [
  { value: "6,1%", label: "IRR efter selskabsskat" },
  { value: "1,9%", label: "Gns. kontant udbytte p.a." },
  { value: "1.410.000", label: "Min. investering (10%)" }]

}];


const DURATION = 7000;

function Hero({ fsScale = 1, openModal }) {
  const [active, setActive] = React.useState(0);
  const [progress, setProgress] = React.useState(0);
  const startRef = React.useRef(performance.now());
  const rafRef = React.useRef(0);

  React.useEffect(() => {
    startRef.current = performance.now();
    const tick = () => {
      const elapsed = performance.now() - startRef.current;
      const p = Math.min(elapsed / DURATION, 1);
      setProgress(p);
      if (p >= 1) {
        setActive((i) => (i + 1) % HERO_SLIDES.length);
        setProgress(0);
        startRef.current = performance.now();
      }
      rafRef.current = requestAnimationFrame(tick);
    };
    rafRef.current = requestAnimationFrame(tick);
    return () => cancelAnimationFrame(rafRef.current);
  }, [active]);

  const select = (i) => {
    if (i === active) return;
    setActive(i);
    setProgress(0);
    startRef.current = performance.now();
  };

  const C = 2 * Math.PI * 30;
  const dashOffset = C * (1 - progress);

  return (
    <section className="hero" id="top" style={{ fontSize: `calc(1rem * ${fsScale})` }}>
      {HERO_SLIDES.map((s, i) =>
      <div
        key={i}
        className={"hero__bg" + (i === active ? " is-active" : "")}
        style={{ backgroundImage: `url('${s.image}')` }} />

      )}
      <div className="hero__veil" />

      <div className="hero__center">
        <div className="hero__eyebrow">{HERO_SLIDES[active].type}</div>
        <h1 className="hero__title" style={{ fontWeight: "400", fontSize: "80px" }}>
          {HERO_SLIDES[active].title}
        </h1>
        {HERO_SLIDES[active].kpis &&
        <div className="hero__kpis">
          {HERO_SLIDES[active].kpis.map((k, i) =>
          <div className="hero__kpi" key={i}>
              <div className="hero__kpi-value">{k.value}</div>
              <div className="hero__kpi-label">{k.label}</div>
            </div>
          )}
        </div>
        }
        <a
          className="hero__cta"
          href={HERO_SLIDES[active].href}>

          Læs mere
          <svg width="14" height="14" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="1.5">
            <path d="M5 12h14M13 5l7 7-7 7" strokeLinecap="round" strokeLinejoin="round" />
          </svg>
        </a>
      </div>

      <div className="hero__bottom">
        <div className="hero__scroll">
          <span>Scroll</span>
          <span className="hero__scroll-line" />
        </div>
        <div className="casedots">
          {HERO_SLIDES.map((s, i) =>
          <button
            key={i}
            className={"casedot" + (i === active ? " is-active" : "")}
            onClick={() => select(i)}
            aria-label={`Case ${i + 1}: ${s.short}`}>
            
              <div className="casedot__photo" style={{ backgroundImage: `url('${s.image}')` }} />
              <div className="casedot__veil" />
              <div className="casedot__label">
                {s.short}
              </div>
              {i === active &&
            <div className="casedot__ring">
                  <svg viewBox="0 0 64 64">
                    <circle className="casedot__ring-fill" cx="32" cy="32" r="30"
                strokeDasharray={C} strokeDashoffset={dashOffset} />
                  </svg>
                </div>
            }
            </button>
          )}
        </div>
      </div>
    </section>);

}

window.Hero = Hero;