// ─────────────────────────────────────────────────────────
//  Case Study — JK Realtors (interactive scroll narrative)
// ─────────────────────────────────────────────────────────

const { useState: useStateCS, useRef: useRefCS, useEffect: useEffectCS } = React;

function BeforeAfter() {
  const [split, setSplit] = useStateCS(50);
  const ref = useRefCS(null);
  const dragging = useRefCS(false);

  const setFromX = (clientX) => {
    if (!ref.current) return;
    const r = ref.current.getBoundingClientRect();
    let pct = ((clientX - r.left) / r.width) * 100;
    pct = Math.max(0, Math.min(100, pct));
    setSplit(pct);
  };

  useEffectCS(() => {
    const onMove = e => dragging.current && setFromX(e.clientX || (e.touches && e.touches[0].clientX));
    const onUp   = () => { dragging.current = false; };
    window.addEventListener('mousemove', onMove);
    window.addEventListener('touchmove', onMove);
    window.addEventListener('mouseup', onUp);
    window.addEventListener('touchend', onUp);
    return () => {
      window.removeEventListener('mousemove', onMove);
      window.removeEventListener('touchmove', onMove);
      window.removeEventListener('mouseup', onUp);
      window.removeEventListener('touchend', onUp);
    };
  }, []);

  return (
    <div
      ref={ref}
      className="beforeafter magnetic-trigger"
      style={{'--split': split + '%'}}
      onMouseDown={e => { dragging.current = true; setFromX(e.clientX); }}
      onTouchStart={e => { dragging.current = true; setFromX(e.touches[0].clientX); }}
    >
      <div className="bg-before">
        <div className="preview-grid">
          <div className="preview-block" style={{gridRow:'span 2'}}/>
          <div className="preview-block"/>
          <div className="preview-block"/>
          <div className="preview-block"/>
        </div>
        <span className="label b">Before · template</span>
      </div>
      <div className="bg-after">
        <div className="preview-grid" style={{padding:'48px 32px 32px'}}>
          <div className="preview-block" style={{gridRow:'span 2', borderColor:'#00F2FE'}}/>
          <div className="preview-block" style={{borderColor:'#00F2FE80'}}/>
          <div className="preview-block" style={{borderColor:'#00F2FE60'}}/>
          <div className="preview-block" style={{borderColor:'#00F2FE40'}}/>
        </div>
        <span className="label a">After · custom</span>
      </div>
      <div className="handle"/>
    </div>
  );
}

function MetricBar({ label, prev, prevValue, now, nowValue, fillPct }) {
  return (
    <div className="case-metric">
      <div className="label-row">
        <span>{label}</span>
        <span><span style={{color:'var(--muted)'}}>{prev}: {prevValue}</span>  →  <span className="now">{now}: {nowValue}</span></span>
      </div>
      <div className="bar">
        <div className="prev" style={{width: '100%'}}/>
        <div className="fill" style={{width: fillPct + '%'}}/>
      </div>
    </div>
  );
}

function CaseStudy() {
  return (
    <section className="section shell" data-screen-label="Case Study">
      <div>
        <div className="kicker">§Case file · Real estate vertical</div>
        <h2 style={{
          fontFamily:'var(--serif)', fontWeight:400,
          fontSize:'clamp(40px, 5vw, 76px)', lineHeight:1.0,
          letterSpacing:'-0.02em', margin:'18px 0 0', maxWidth:'18ch',
          textWrap:'balance',
        }}>
          JK Realtors.<br/>
          <span style={{fontStyle:'italic', color:'var(--accent)'}}>4-week rebuild.</span>
        </h2>
      </div>

      <div className="case-grid">
        <div className="case-meta">
          <span className="tag">★ Awwwards SOTM nominee · 2025</span>
          <h3>From template carousel to premium digital showroom.</h3>
          <p>
            Founder-led brokerage in Jammu serving high-net-worth clients. The site was
            their first impression — and it was leaking premium leads to slower-loading,
            template-built competitors. We rebuilt the stack in four weeks.
          </p>

          <a
            href="https://www.jkrealtors.org"
            target="_blank"
            rel="noopener"
            className="magnetic-trigger case-visit"
          >
            <span className="case-visit-l">
              <span className="case-visit-k">Live site</span>
              <span className="case-visit-u">www.jkrealtors.org</span>
            </span>
            <span className="case-visit-a">↗</span>
          </a>

          <div className="case-stats">
            <div className="stat">
              <div className="l">Load time</div>
              <div className="v">0.4<em>s</em></div>
            </div>
            <div className="stat">
              <div className="l">Lead → CRM</div>
              <div className="v">3.0<em>s</em></div>
            </div>
            <div className="stat">
              <div className="l">Bounce drop</div>
              <div className="v">−61<em>%</em></div>
            </div>
            <div className="stat">
              <div className="l">Site-visit ratio</div>
              <div className="v">2.4<em>×</em></div>
            </div>
          </div>
        </div>

        <div className="case-content">
          <div className="case-chapter">
            <div className="ch">Chapter 01 · The problem</div>
            <h4>A premium inventory wrapped in a template.</h4>
            <p>
              The brokerage had spent <strong>seven years</strong> building inventory and reputation
              with HNI clients across Jammu and Delhi. The site was a <strong>generic WordPress
              theme</strong> with 4-second load times, a stock lead form, and zero automation.
              Inbound enquiries from premium clients were arriving — but slowly, and many
              were dropping before site-visit confirmation.
            </p>
            <p>
              We benchmarked against three competitors and found JK was bleeding ~32% of
              ad spend to inferior page experience scores.
            </p>
          </div>

          <div className="case-chapter">
            <div className="ch">Chapter 02 · The rebuild</div>
            <h4>Custom React. Headless data. n8n for everything else.</h4>
            <p>
              We replaced WordPress with a <strong>custom React + headless CMS</strong> setup,
              streamed property data from a serverless edge layer, and wired the entire lead
              workflow through n8n — capture, route, score, ping WhatsApp, and notify the
              principal — all under three seconds.
            </p>
            <BeforeAfter />
          </div>

          <div className="case-chapter">
            <div className="ch">Chapter 03 · The numbers</div>
            <h4>What four weeks bought.</h4>
            <p>
              We re-ran the same benchmarks against the same competitor set 30 days post-launch:
            </p>
            <div className="case-metrics">
              <MetricBar label="Load time"          prev="Before" prevValue="3.8s" now="Now" nowValue="0.4s" fillPct={11}/>
              <MetricBar label="Lighthouse score"   prev="Before" prevValue="42"   now="Now" nowValue="98"   fillPct={98}/>
              <MetricBar label="Bounce rate"        prev="Before" prevValue="64%"  now="Now" nowValue="25%"  fillPct={39}/>
              <MetricBar label="Lead → CRM latency" prev="Before" prevValue="24h"  now="Now" nowValue="3s"   fillPct={2}/>
              <MetricBar label="Site-visit ratio"   prev="Before" prevValue="6%"   now="Now" nowValue="14%"  fillPct={70}/>
            </div>
          </div>

          <div className="case-chapter">
            <div className="ch">Chapter 04 · The quote</div>
            <h4 style={{fontStyle:'italic', fontFamily:'var(--serif)'}}>
              &ldquo;Our enquiry-to-site-visit ratio doubled in the first month. The site finally feels as premium as the inventory.&rdquo;
            </h4>
            <p style={{
              fontFamily:'var(--mono)', fontSize:11, letterSpacing:'0.16em',
              textTransform:'uppercase', color:'var(--muted)',
            }}>
              Director · Luxe Estates · Verified client
            </p>
          </div>
        </div>
      </div>
    </section>
  );
}

window.CaseStudy = CaseStudy;