// Case study — Keystone Home Services
const { useEffect, useState, useRef } = React;

function CSHero(){
  return (
    <section className="cs-hero">
      <div className="wrap cs-hero__wrap">
        <div className="cs-hero__meta mono">
          <span><span className="dot" style={{display:'inline-block',width:6,height:6,borderRadius:'50%',background:'var(--cyan)',marginRight:8,verticalAlign:'middle'}}/>Case Study · CS/01</span>
          <span>2024 — Ongoing</span>
        </div>
        <h1 className="display cs-hero__h1">
          Keystone tripled<br/>
          qualified leads.<br/>
          We <em className="serif">cut</em> their spend.
        </h1>
        <div className="cs-hero__foot">
          <dl className="cs-hero__facts">
            <div><dt className="mono">Client</dt><dd>Keystone Home Services</dd></div>
            <div><dt className="mono">Sector</dt><dd>Home services · 42 markets</dd></div>
            <div><dt className="mono">Services</dt><dd>Paid search · CRO · Analytics</dd></div>
            <div><dt className="mono">Engagement</dt><dd>18 months, ongoing</dd></div>
          </dl>
        </div>
      </div>
      <div className="cs-hero__scroll mono"><span/>Scroll to read</div>
    </section>
  );
}

function CSImage(){
  return (
    <section className="cs-image">
      <div className="wrap">
        <div className="ph cs-image__frame" style={{aspectRatio:'16/9'}}>
          <div style={{textAlign:'center'}}>
            <div style={{marginBottom:8}}>CASE HERO IMAGE</div>
            <div style={{fontSize:10, color:'var(--steel-400)'}}>1920 × 1080 · on-site photography or dashboard crop</div>
          </div>
        </div>
      </div>
    </section>
  );
}

function CSNumbers(){
  useReveal();
  return (
    <section className="cs-numbers">
      <div className="wrap">
        <div className="cs-numbers__head">
          <span className="micro">01 — Outcomes</span>
          <h2 className="display cs-numbers__h2">The board deck, in four numbers.</h2>
        </div>
        <div className="cs-numbers__grid">
          {[
            ["3.2×", "Qualified leads / month", "From a baseline of 420 form-fills to 1,344, measured in the CRM — not the ad account."],
            ["−54%", "Cost per qualified lead", "The biggest gains came from killing spend, not adding it. Shopping, call-only, and non-brand rebuilt from zero."],
            ["$9.4M", "Attributed pipeline, 12 mo", "Server-side tagging and warehouse stitching made the number CFO-defensible."],
            ["+38", "NPS, quarterly"], 
          ].slice(0,3).map(([n, l, d]) => (
            <div key={l} className="cs-num reveal">
              <div className="cs-num__n display">{n}</div>
              <div className="cs-num__l">{l}</div>
              <div className="cs-num__d">{d}</div>
            </div>
          ))}
        </div>
      </div>
    </section>
  );
}

function CSBrief(){
  return (
    <section className="cs-brief">
      <div className="wrap cs-brief__wrap">
        <aside>
          <div className="micro">02 — The brief</div>
        </aside>
        <div>
          <p className="cs-brief__lede serif">
            "We've been on a five-year growth tear. The next five need to look nothing like it."
          </p>
          <p className="cs-brief__text">
            Keystone had scaled to 42 markets on the back of a single incumbent agency and a paid-search playbook that looked, from the outside, like it was working. Leads were up year over year. Cost per lead was flat-ish. The CFO didn't buy it.
          </p>
          <p className="cs-brief__text">
            When we opened the account, the reason wasn't subtle. One campaign structure copied 42 times. Brand traffic being counted as non-brand. A Shopping feed with 3,400 disapproved SKUs. A conversion action that fired on "click-to-call," not on a booked appointment. The account was reporting a story the business couldn't verify.
          </p>
          <p className="cs-brief__text">
            The goal wasn't to grow spend. It was to make the spend legible — and then grow it deliberately.
          </p>
        </div>
      </div>
    </section>
  );
}

function CSApproach(){
  const steps = [
    {
      k: "PHASE 01", t: "Diagnose in public",
      d: "Two weeks in the ad account, the CRM, and a Friday ride-along with two branch managers. We wrote the diagnosis as a memo the exec team could read in ten minutes, and defended it in a room."
    },
    {
      k: "PHASE 02", t: "Rebuild the measurement stack",
      d: "Server-side tagging, GA4 → BigQuery, CRM-attributed conversions. No campaign changes until the number on the dashboard matched the number in the CRM — to the dollar."
    },
    {
      k: "PHASE 03", t: "Restructure the account",
      d: "Brand, non-brand, competitor, and Shopping split into separately-accountable programs. 42 market-level campaigns reduced to 8 archetypes with geo-modifiers. Call-only for emergency services; LSAs run as a distinct channel with its own P&L."
    },
    {
      k: "PHASE 04", t: "Compound",
      d: "Weekly creative test, monthly readouts, quarterly pivots. We report one number at the top of every deck: attributed pipeline. Everything else is evidence."
    }
  ];
  return (
    <section className="cs-approach">
      <div className="wrap">
        <div className="cs-approach__head">
          <span className="micro">03 — What we did</span>
          <h2 className="display cs-approach__h2">Four phases, over eighteen months.</h2>
        </div>
        <div className="cs-approach__grid">
          {steps.map((s, i) => (
            <div key={s.k} className="cs-approach__cell">
              <div className="cs-approach__k mono">{s.k}</div>
              <h3 className="display cs-approach__t">{s.t}</h3>
              <p className="cs-approach__d">{s.d}</p>
            </div>
          ))}
        </div>
      </div>
    </section>
  );
}

function CSChart(){
  // SVG line chart placeholder
  const W = 1200, H = 360;
  const months = ["J","F","M","A","M","J","J","A","S","O","N","D"];
  const before = [1.0, 1.05, 1.02, 1.08, 1.1, 1.12, 1.15, 1.17, 1.2, 1.22, 1.25, 1.28];
  const after  = [1.28, 1.52, 1.83, 2.1, 2.35, 2.55, 2.78, 2.92, 3.05, 3.12, 3.18, 3.24];
  const max = 3.4, min = 0.8;
  const toPath = (arr, offset = 0) => arr.map((v, i) => {
    const x = (i + offset) / 23 * W;
    const y = H - ((v - min) / (max - min)) * (H - 40) - 20;
    return `${i === 0 && offset === 0 ? 'M' : 'L'}${x.toFixed(1)},${y.toFixed(1)}`;
  }).join(' ');

  return (
    <section className="cs-chart">
      <div className="wrap">
        <div className="cs-chart__head">
          <span className="micro">04 — The curve</span>
          <h2 className="display cs-chart__h2">Qualified leads, 24 months.</h2>
          <p className="cs-chart__sub">Indexed to month one (= 1.0). The handoff is visible.</p>
        </div>
        <div className="cs-chart__frame">
          <svg viewBox={`0 0 ${W} ${H}`} preserveAspectRatio="none" className="cs-chart__svg">
            <defs>
              <linearGradient id="g" x1="0" x2="0" y1="0" y2="1">
                <stop offset="0%" stopColor="currentColor" stopOpacity="0.18"/>
                <stop offset="100%" stopColor="currentColor" stopOpacity="0"/>
              </linearGradient>
            </defs>
            {/* Grid */}
            {[0,1,2,3].map(i => (
              <line key={i} x1="0" x2={W} y1={H - i*(H-40)/3 - 20} y2={H - i*(H-40)/3 - 20} stroke="currentColor" strokeOpacity="0.08"/>
            ))}
            {/* Before (muted) */}
            <path d={toPath(before)} fill="none" stroke="currentColor" strokeOpacity="0.35" strokeWidth="1.5" strokeDasharray="4 4"/>
            {/* After (cyan) */}
            <path d={toPath(after, 12) + ` L${W},${H} L${12/23 * W},${H} Z`} fill="url(#g)" style={{color:'var(--cyan)'}}/>
            <path d={toPath(after, 12)} fill="none" stroke="var(--cyan)" strokeWidth="2.5"/>
            {/* Handoff marker */}
            <line x1={12/23 * W} x2={12/23 * W} y1="10" y2={H-10} stroke="var(--cyan)" strokeOpacity="0.5" strokeDasharray="2 4"/>
          </svg>
          <div className="cs-chart__axis">
            {[...months, ...months].map((m, i) => <span key={i} className="mono">{m}</span>)}
          </div>
          <div className="cs-chart__annot" style={{left: '50%'}}>
            <span className="mono">Engagement start</span>
          </div>
          <div className="cs-chart__legend">
            <span><i className="cs-chart__swatch cs-chart__swatch--dash"/> Prior agency</span>
            <span><i className="cs-chart__swatch cs-chart__swatch--solid"/> Get Visible</span>
          </div>
        </div>
      </div>
    </section>
  );
}

function CSPull(){
  return (
    <section className="cs-pull">
      <div className="wrap cs-pull__wrap">
        <span className="micro">05 — In their words</span>
        <blockquote className="cs-pull__q serif">
          "They didn't pitch us a dashboard. They pitched us the number. Three quarters later it's the one on the wall."
        </blockquote>
        <div className="cs-pull__by">
          <div className="ph cs-pull__avatar" style={{width:56, height:56, borderRadius:'50%'}}>MH</div>
          <div>
            <div className="cs-pull__name">Monica Hale</div>
            <div className="cs-pull__role">SVP Growth · Keystone Home Services</div>
          </div>
        </div>
      </div>
    </section>
  );
}

function CSGallery(){
  return (
    <section className="cs-gallery">
      <div className="wrap cs-gallery__wrap">
        <span className="micro">06 — Artifacts</span>
        <div className="cs-gallery__grid">
          <div className="ph" style={{aspectRatio:'4/3', gridColumn:'span 2'}}>Campaign architecture diagram</div>
          <div className="ph" style={{aspectRatio:'1'}}>Reporting cover · Q3 '25</div>
          <div className="ph" style={{aspectRatio:'1'}}>GA4 → CRM trace</div>
          <div className="ph" style={{aspectRatio:'4/3', gridColumn:'span 2'}}>Creative library — call-only</div>
        </div>
      </div>
    </section>
  );
}

function CSNext(){
  return (
    <section className="cs-next">
      <div className="wrap cs-next__wrap">
        <div className="cs-next__left">
          <span className="micro">Next case</span>
          <h2 className="display cs-next__h2">Northwind <em className="serif">Outdoor Co.</em></h2>
          <p className="cs-next__sub">Editorial SEO took organic from support channel to primary revenue driver. +412% in nine months.</p>
          <a className="btn btn--primary" href="case-study.html">Read next case <span className="arrow">→</span></a>
        </div>
        <div className="ph cs-next__thumb" style={{aspectRatio:'4/3'}}>CS/02 · Northwind</div>
      </div>
    </section>
  );
}

function Page(){
  useReveal();
  return (
    <>
      <CursorBlob/>
      <Nav active="work"/>
      <main>
        <CSHero/>
        <CSImage/>
        <CSNumbers/>
        <CSBrief/>
        <CSApproach/>
        <CSChart/>
        <CSPull/>
        <CSGallery/>
        <CSNext/>
      </main>
      <Footer/>
      <Tweaks/>
    </>
  );
}

ReactDOM.createRoot(document.getElementById('root')).render(<Page/>);