/* global React */
const { useRef: useRefCTA, useEffect: useEffectCTA } = React;

function randBetween(min, max) { return Math.random() * (max - min) + min; }

// Generated once per page load — random but stable across re-renders
const oreConfigs = (() => {
  // Divide the section into two non-overlapping zones so the ores don't stack:
  // ore 1 lives in the left half, ore 2 in the right half.
  // Positions are percentages of the section dimensions.
  return [
    {
      left:    randBetween(4, 38) + "%",
      top:     randBetween(8, 65) + "%",
      width:   Math.round(randBetween(200, 320)) + "px",
      rotate:  randBetween(-45, 45),
      opacity: randBetween(0.82, 0.96),
    },
    {
      left:    randBetween(55, 84) + "%",
      top:     randBetween(8, 65) + "%",
      width:   Math.round(randBetween(170, 280)) + "px",
      rotate:  randBetween(-45, 45),
      opacity: randBetween(0.82, 0.96),
    },
  ];
})();

function CTABand({ onBookDemo }) {
  const sectionRef = useRefCTA(null);

  useEffectCTA(() => {
    const el = sectionRef.current;
    if (!el) return;
    const onMove = (e) => {
      const r = el.getBoundingClientRect();
      el.style.setProperty("--cta-mx", (e.clientX - r.left) + "px");
      el.style.setProperty("--cta-my", (e.clientY - r.top) + "px");
      el.style.setProperty("--cta-mxp", ((e.clientX - r.left) / r.width * 100) + "%");
      el.style.setProperty("--cta-myp", ((e.clientY - r.top) / r.height * 100) + "%");
    };
    const onLeave = () => {
      el.style.setProperty("--cta-mx", "-9999px");
      el.style.setProperty("--cta-my", "-9999px");
    };
    el.addEventListener("mousemove", onMove);
    el.addEventListener("mouseleave", onLeave);
    return () => {
      el.removeEventListener("mousemove", onMove);
      el.removeEventListener("mouseleave", onLeave);
    };
  }, []);

  return (
    <section className="cta-band" id="cta" data-screen-label="09 CTA" ref={sectionRef}>
      <div className="topo" />
      <div className="cta-cursor" />
      <div className="cta-ore-layer">
        {oreConfigs.map((cfg, i) => (
          <img
            key={i}
            className="cta-ore"
            src="assets/lithORE_transparent.png"
            alt=""
            draggable="false"
            style={{
              left: cfg.left,
              top: cfg.top,
              width: cfg.width,
              opacity: cfg.opacity,
              transform: `rotate(${cfg.rotate}deg)`,
            }}
          />
        ))}
      </div>
      <div className="cta-band-inner">
        <h2 className="cta-h2 reveal">
          Find the deposit.
        </h2>
        <p className="cta-sub">
          Now piloting in Kaduna, Nigeria and South Africa. Three more jurisdictions opening this year. Bring Lithora to yours.
        </p>
        <div className="cta-actions">
          <button className="btn btn-white" onClick={onBookDemo}>
            Book a demo
            <svg width="14" height="14" viewBox="0 0 14 14" fill="none">
              <path d="M3 7h8M7.5 3.5L11 7l-3.5 3.5" stroke="currentColor" strokeWidth="1.5" strokeLinecap="round" strokeLinejoin="round"/>
            </svg>
          </button>
          <button className="btn btn-ghost" onClick={onBookDemo}>Talk to the team</button>
        </div>
      </div>
    </section>
  );
}

function Footer({ onBookDemo }) {
  return (
    <footer className="footer" data-screen-label="10 Footer">
      <div className="footer-inner">
        <div className="footer-brand">
          <div className="footer-brand-logo">
            <img src="assets/lithora-mark.png" alt="Lithora" />
            <span className="wm">Lithora</span>
          </div>
          <p className="footer-tag">Ground truth for the mineral lifecycle.</p>
        </div>

        <div>
          <div className="footer-col-title">Suite</div>
          <div className="footer-col-list">
            <a className="footer-col-link">Lithora Atlas</a>
            <a className="footer-col-link">Lithora Prospect</a>
            <a className="footer-col-link">Lithora Forge</a>
            <a className="footer-col-link">Lithora Flow</a>
          </div>
        </div>

        <div>
          <div className="footer-col-title">Company</div>
          <div className="footer-col-list">
            <a className="footer-col-link">About</a>
            <a className="footer-col-link">Pilots</a>
            <a className="footer-col-link">Careers</a>
            <a className="footer-col-link">Research notes</a>
            <a className="footer-col-link" onClick={onBookDemo}>Contact</a>
          </div>
        </div>

        <div>
          <div className="footer-col-title">Resources</div>
          <div className="footer-col-list">
            <a className="footer-col-link">Documentation</a>
            <a className="footer-col-link">Model cards</a>
            <a className="footer-col-link">Data licensing</a>
            <a className="footer-col-link">Security</a>
            <a className="footer-col-link">Press</a>
          </div>
        </div>
      </div>

      <div className="footer-bottom">
        <span className="footer-copy">© 2026 Lithora Inc. · All rights reserved.</span>
        <span className="footer-region">
          <span className="dot" />
          Piloting · Nigeria · South Africa
        </span>
      </div>
    </footer>
  );
}

window.CTABand = CTABand;
window.Footer = Footer;