function Portfolio() {
  // Click-to-play. Autoplay + viewport-buffered preloading were removed because
  // the network couldn't keep up, the video hitched on slow connections.
  // First-play hitch fix: on first user intent (pointer enter / focus / click),
  // promote preload to "auto" and call load() so the buffer fills before play().
  // We also intercept the first onPlay, pause briefly, wait for canplay, then resume.
  const videoRef = React.useRef(null);
  const warmedRef = React.useRef(false);
  const handledFirstPlayRef = React.useRef(false);

  const warm = React.useCallback(() => {
    if (warmedRef.current) return;
    const el = videoRef.current;
    if (!el) return;
    warmedRef.current = true;
    try {
      el.preload = "auto";
      el.load();
    } catch (e) { /* noop */ }
  }, []);

  const onPlay = React.useCallback((e) => {
    const el = videoRef.current;
    if (!el) return;
    warm();
    if (handledFirstPlayRef.current) return;
    // If we don't have enough buffered for smooth playback, pause and wait.
    if (el.readyState >= 3 /* HAVE_FUTURE_DATA */) {
      handledFirstPlayRef.current = true;
      return;
    }
    handledFirstPlayRef.current = true;
    try { el.pause(); } catch (_) {}
    const resume = () => {
      el.removeEventListener("canplay", resume);
      el.removeEventListener("canplaythrough", resume);
      const p = el.play();
      if (p && typeof p.catch === "function") p.catch(() => {});
    };
    el.addEventListener("canplay", resume, { once: true });
    el.addEventListener("canplaythrough", resume, { once: true });
  }, [warm]);

  return (
    <section className="vp-section paper" id="portfolio">
      <div className="vp-section-head">
        <div className="eyebrow">Our Work</div>
        <h2>Our <span className="vp-underlined">Signature Project</span></h2>
        <p className="sub">A look inside one of our recent South Florida backyard builds — every detail engineered, every finish chosen on purpose.</p>
      </div>

      <div className="vp-feature-card">
        <aside className="vp-feature-review">
          <div className="vp-feature-review-top">
            <span className="vp-feature-review-stars" aria-label="5 star rating">
              <Icon.Star size={16} /><Icon.Star size={16} /><Icon.Star size={16} /><Icon.Star size={16} /><Icon.Star size={16} />
            </span>
            <span className="vp-feature-review-platform">
              <Icon.Google size={14} />
              <span>Verified Google review</span>
            </span>
          </div>
          <span className="vp-feature-review-mark" aria-hidden="true">"</span>
          <blockquote className="vp-feature-review-quote">
            Victor did a deck extension, pergola and privacy wall. We had a tight deadline and not only the right price, but high quality material and craftsmanship. They had to warm some of the composite wood in order to wrap it around my rock patio and the job came out so beautiful. Further he put in a stairwell and fence that also was beautiful. Excellent and kind staff, great level of responsiveness. Highly satisfied with his work and would recommend him to anyone wanting to do a deck and/or pergola. He is so great!
          </blockquote>
          <div className="vp-feature-review-who">
            <div className="vp-feature-review-avatar" aria-hidden="true">T</div>
            <div className="vp-feature-review-meta">
              <div className="vp-feature-review-name">Tammy Berman</div>
              <div className="vp-feature-review-sub">Local Guide · 22 reviews · 3 photos</div>
            </div>
            <span className="vp-feature-review-badge">New</span>
          </div>
        </aside>

        <div className="vp-feature-video">
          <span className="vp-feature-video-tagline">Watch the build</span>
          <div className="vp-feature-video-frame">
            <video
              ref={videoRef}
              className="vp-feature-video-el"
              src="https://assets.cdn.filesafe.space/wFKub3WIwDYc1MGsKWHi/media/6a021066d11dcc870524327b.mp4"
              poster="assets/signature-project-poster.jpg"
              controls
              preload="metadata"
              playsInline
              title="Victory Pro Deck Builders, Featured Build"
              onPointerEnter={warm}
              onPointerDown={warm}
              onFocus={warm}
              onPlay={onPlay}
            />
          </div>
          <div className="vp-feature-video-frame-shadow" aria-hidden="true" />
        </div>
      </div>

      <div style={{ textAlign: "center", marginTop: 56 }}>
        <a href="#quote" className="vp-quote-btn" style={{ display: "inline-flex", alignItems: "center", gap: 10 }}>
          Start Your Project <Icon.ArrowRight size={14} />
        </a>
      </div>
    </section>
  );
}
window.Portfolio = Portfolio;