// Convert.jsx — S2.5: What conversion-aware actually means
// Left head + an animated "conversion page" mockup (blueprint texture behind it) + 6 feature cards.

function ConvViz() {
  // Four-beat transformation: current site → analyze → rebuild around it → absorb & reveal.
  const LABELS = ["Your current site", "Finding what's missing", "Rebuilding the key parts", "Your rebuilt site"];
  const DWELL = [2400, 3000, 2800, 3200];
  const [phase, setPhase] = useState(0);
  const [reduced, setReduced] = useState(false);
  const [started, setStarted] = useState(false);
  const stageRef = useRef(null);

  useEffect(() => {
    const r = window.matchMedia && window.matchMedia("(prefers-reduced-motion: reduce)").matches;
    if (r) { setReduced(true); setPhase(3); }
  }, []);

  // hold on the opening frame until the stage actually scrolls into view
  useEffect(() => {
    if (reduced) return;
    const el = stageRef.current;
    if (!el) return;
    const io = new IntersectionObserver((entries) => {
      entries.forEach((e) => { if (e.isIntersecting) { setStarted(true); io.disconnect(); } });
    }, { threshold: 0.45 });
    io.observe(el);
    return () => io.disconnect();
  }, [reduced]);

  useEffect(() => {
    if (reduced || !started) return;
    const t = setTimeout(() => setPhase((p) => (p + 1) % 4), DWELL[phase]);
    return () => clearTimeout(t);
  }, [phase, reduced, started]);

  return (
    <div className="rv-stage" ref={stageRef} data-phase={phase}
         data-built={phase >= 2 ? "1" : undefined}
         data-static={reduced ? "1" : undefined}>
      <div className="rv-atmos" aria-hidden="true" />
      <div className="rv-glow rv-glow--orange" aria-hidden="true" />
      <div className="rv-glow rv-glow--violet" aria-hidden="true" />

      <figure className="rv-card rv-card--review"><img src={assetUrl("assets/k-rv-card-review.png")} alt="Google review — 5.0 stars" /></figure>
      <figure className="rv-card rv-card--services"><img src={assetUrl("assets/k-rv-card-services.png")} alt="Your services" /></figure>
      <figure className="rv-card rv-card--work"><img src={assetUrl("assets/k-rv-card-work.png")} alt="Recent work — real customers" /></figure>
      <figure className="rv-card rv-card--needs"><img src={assetUrl("assets/k-rv-card-needs.png")} alt="Your customers' need" /></figure>
      <figure className="rv-card rv-card--systems"><img src={assetUrl("assets/k-rv-card-systems.png")} alt="Business systems we support" /></figure>

      <div className="rv-site">
        <div className="rv-site-pulse" aria-hidden="true" />
        <div className="rv-screen rv-screen--full">
          <img className="rv-before" src={assetUrl("assets/k-rv-before-desktop.png")} alt="Current website" />
          <img className="rv-after" src={assetUrl("assets/k-rv-after-desktop.png")} alt="Rebuilt website" />
        </div>
        <div className="rv-site-shine" aria-hidden="true" />
        <div className="rv-flash" aria-hidden="true" />
      </div>

      <div className="rv-caption" role="status" aria-live="polite">
        <span className="rv-caption-dot" aria-hidden="true" />
        <span className="rv-caption-txt">{reduced ? LABELS[3] : LABELS[phase]}</span>
      </div>
    </div>
  );
}

function ConvertSection() {
  const cards = [
    { i: "ri-lightbulb-line", tone: "magenta", t: "Clear explanation",
      d: "Visitors should understand what you do, who it is for, and why it matters without digging through vague service copy." },
    { i: "ri-sparkling-2-line", tone: "violet", t: "A stronger first impression",
      d: "The site should make the business feel credible before someone reads every detail or books a call." },
    { i: "ri-layout-grid-line", tone: "magenta", t: "Better offer structure",
      d: "Services, outcomes, and next steps should be organized so visitors can quickly see where they fit." },
    { i: "ri-chat-quote-line", tone: "violet", t: "Proof in the right places",
      d: "Testimonials, screenshots, examples, process evidence, and before/after work should sit close to the claims they support." },
    { i: "ri-cursor-line", tone: "magenta", t: "A clearer action path",
      d: "The page should guide visitors toward the right action — contact, book, buy, apply, or schedule." },
    { i: "ri-settings-4-line", tone: "violet", t: "A managed site system",
      d: "The site should be easier to launch, host, maintain, update, and expand as the business grows." },
  ];
  const headRef = useReveal();
  const gridRef = useReveal();
  return (
    <section id="convert" className="section section--light convert-sec">
      <div className="wrap">
        <div ref={headRef} className="reveal convert-head">
          <h2 className="h-section">We rebuild the parts of the page that help visitors understand, trust, and act.</h2>
          <p className="p-lead"><span className="lead-full">Conversion-aware does not mean stuffing the page with tricks. It means building the site around the decisions your visitors need to make before they contact you, book, buy, apply, or schedule.</span><span className="lead-short">Building the page around the decisions visitors make before they reach out.</span></p>
        </div>

        <div className="rv-frame">
          <div className="rv-texture" aria-hidden="true" />
          <div className="rv-bloom-purple" aria-hidden="true" />
          <ConvViz />
        </div>

        <div ref={gridRef} className="reveal cv-cards">
          {cards.map((c) => (
            <div className="cv-feature" key={c.t}>
              <span className={"cv-ico cv-ico--" + c.tone}><i className={c.i} /></span>
              <h3 className="cv-feature__title">{c.t}</h3>
              <p className="cv-feature__desc">{c.d}</p>
            </div>
          ))}
        </div>
      </div>
    </section>
  );
}

Object.assign(window, { ConvertSection, ConvViz });