/* Platform Hero, pure A4 paper with editorial typography, no illustrations.
   Stats animate by drawing horizontal silver rules under each figure,
   then the digits count up over the line. */
function PlatformHero() {
  const ref = useRef(null);

  useEffect(() => {
    const wrap = ref.current; if (!wrap) return;
    wrap.querySelectorAll("[data-r]").forEach((el, i) => {
      el.style.transitionDelay = `${i * 0.08}s`;
      requestAnimationFrame(() => el.classList.add("in"));
    });
  }, []);

  return (
    <section id="top" ref={ref} style={{ position: "relative", minHeight: "100vh", paddingTop: 140, paddingBottom: 96, background: "#fff", overflow: "hidden" }}>
      {/* Hero background — visible toward the right, blended/washed out behind the
         text on the left so the editorial headline stays clean. */}
      <div aria-hidden="true" style={{ position: "absolute", inset: 0, backgroundImage: "url(assets/lakeside-golden.jpg)", backgroundSize: "cover", backgroundPosition: "center right", opacity: 0.6 }} />
      <div aria-hidden="true" style={{ position: "absolute", inset: 0, background: "linear-gradient(102deg, #fff 0%, rgba(255,255,255,0.92) 30%, rgba(255,255,255,0.55) 58%, rgba(255,255,255,0.16) 100%)" }} />
      <div aria-hidden="true" style={{ position: "absolute", left: 0, right: 0, top: 0, height: 110, background: "linear-gradient(to top, transparent, #fff)" }} />
      <div aria-hidden="true" style={{ position: "absolute", left: 0, right: 0, bottom: 0, height: 220, background: "linear-gradient(to bottom, transparent, #fff)" }} />
      <div className="container" style={{ position: "relative", zIndex: 2 }}>

        {/* Top meta — consistent eyebrow (matches every other page) */}
        <div data-r className="reveal" style={{ marginBottom: 80 }}>
          <Eyebrow>Property Capital Platform</Eyebrow>
        </div>

        {/* Stacked headline */}
        <h1 className="display h1" style={{ margin: 0 }}>
          <span data-r className="reveal" style={{ display: "block" }}>Property capital,</span>
          <span data-r className="reveal" style={{ display: "block" }}>
            <span className="serif-em">structured with precision.</span>
          </span>
        </h1>

        {/* Sub + CTAs */}
        <div style={{ marginTop: 64, display: "grid", gridTemplateColumns: "minmax(0, 1.1fr) minmax(0, 1fr)", gap: 56, alignItems: "end" }} className="hero-grid">
          <p data-r className="reveal body-l" style={{ margin: 0, maxWidth: 560 }}>
            Direct Property Finance helps brokers and developers identify suitable private credit and non-bank funding pathways across construction, residual stock, bridging and structured property scenarios.
          </p>

          <div data-r className="reveal" style={{ display: "flex", gap: 24, flexWrap: "wrap", justifyContent: "flex-end", alignItems: "center" }}>
            <a href="assessment.html" className="btn btn--primary btn--hero">Begin Funding Assessment <span className="arrow"><I.Arrow/></span></a>
            <a href="services.html" className="hero-link" style={{ display: "inline-flex", alignItems: "center", gap: 6, color: "var(--ink)", fontSize: 14, fontWeight: 500, letterSpacing: "-0.005em" }}>
              View funding pathways
              <span className="hero-link__arrow" style={{ display: "inline-flex", transition: "transform .25s ease" }}><I.Arrow s={14}/></span>
            </a>
          </div>
        </div>

        {/* Stats row, draw-line scroll animation */}
        <div data-r className="reveal" style={{ marginTop: 120 }}>
          <DrawLineStats />
        </div>

        {/* Scroll cue, shared component (centered, viewport-wide hairlines, bopping arrow) */}
        <ScrollCue
          label="Scroll, capital pathway"
          className="reveal"
          dataR
          style={{ marginTop: 80 }}
        />
      </div>

      <style>{`
        @media (max-width: 900px) { .hero-grid { grid-template-columns: 1fr !important; } }
        .btn--hero { padding: 18px 30px; font-size: 15px; }
        .hero-link:hover .hero-link__arrow { transform: translateX(4px); }
        .hero-link { border-bottom: 1px solid transparent; padding-bottom: 2px; transition: border-color .25s ease; }
        .hero-link:hover { border-bottom-color: var(--ink); }
      `}</style>
    </section>
  );
}

/* DrawLineStats, observes itself; on first reveal, animates a silver line
   under each stat from 0 → 100% width over 900ms, while the number counts up. */
function DrawLineStats() {
  const ref = useRef(null);
  const [on, setOn] = useState(false);
  useEffect(() => {
    if (!ref.current) return;
    const io = new IntersectionObserver((e) => e.forEach((x) => x.isIntersecting && (setOn(true), io.disconnect())), { threshold: 0.4 });
    io.observe(ref.current);
    return () => io.disconnect();
  }, []);

  const stats = [
    { v: 50,  suf: "+",  k: "Capital sources",   s: "Private credit & non-bank" },
    { v: 50,  pre: "$3–", suf: "m", k: "Our lenders' typical deal range", s: "Per transaction" },
    { v: 4,   suf: "",   k: "Pathway profiles",  s: "Senior · Stretch · Mezz · Private" },
    { v: 100, suf: "%",  k: "Australian focus",  s: "National development scope" },
  ];

  return (
    <div ref={ref} style={{ display: "grid", gridTemplateColumns: "repeat(4, 1fr)", gap: 1, background: "var(--mist)", border: "1px solid var(--mist)" }} className="dls-grid">
      {stats.map((st, i) => <DrawLineStat key={i} {...st} on={on} delay={i * 180}/>)}
      <style>{`@media(max-width:800px){.dls-grid{grid-template-columns:repeat(2,1fr) !important}}`}</style>
    </div>
  );
}

function DrawLineStat({ v, pre = "", suf = "", k, s, on, delay }) {
  const [n, setN] = useState(0);
  const [drawn, setDrawn] = useState(0);
  useEffect(() => {
    if (!on) return;
    let raf, start = null;
    const dur = 1200;
    const step = (t) => {
      if (start == null) start = t + delay;
      const p = Math.max(0, Math.min(1, (t - start) / dur));
      const eased = 1 - Math.pow(1 - p, 3);
      setN(Math.round(v * eased));
      setDrawn(eased * 100);
      if (p < 1) raf = requestAnimationFrame(step);
    };
    raf = requestAnimationFrame(step);
    return () => cancelAnimationFrame(raf);
  }, [on, v, delay]);
  return (
    <div style={{ background: "#fff", padding: "36px 32px 32px", position: "relative", minHeight: 200 }}>
      <div className="display" style={{ fontSize: 64, lineHeight: 1, letterSpacing: "-0.03em", color: "var(--ink)" }}>
        {pre}{n}{suf}
      </div>
      {/* Drawn silver rule */}
      <div style={{ position: "relative", marginTop: 18, height: 1, background: "var(--mist)" }}>
        <div style={{ position: "absolute", left: 0, top: 0, height: 1, background: "var(--steel)", width: `${drawn}%`, transition: "none" }}/>
      </div>
      <div style={{ marginTop: 18, fontSize: 14, fontWeight: 500, letterSpacing: "-0.005em", color: "var(--ink)" }}>{k}</div>
      <div className="small" style={{ marginTop: 4 }}>{s}</div>
    </div>
  );
}
window.PlatformHero = PlatformHero;