/* ===================== CASE STUDIES ===================== */
function CaseStudies() {
  const featured = CASES[0];
  const rest = CASES.slice(1);
  return (
    <section id="cases" className="cases" data-screen-label="04 Case studies">
      <div className="container">
        <div className="cases-head reveal">
          <span className="eyebrow">In the wild</span>
          <h2 className="h-1">Real businesses, real results.</h2>
          <p className="lede">Carpenters winning better clients. Dance schools filling classes. Studios and trades running on one system instead of four spreadsheets.</p>
        </div>

        <a href={`case-studies/${featured.id}.html`} className="case-featured reveal">
          <div className="cf-media" style={{ background: featured.color }}>
            <CaseMockup id={featured.id} />
            <span className="cf-badge">Featured</span>
          </div>
          <div className="cf-body">
            <div className="cf-meta">
              <span className="chip chip-navy">{featured.industry}</span>
              <span className="chip chip-green"><span className="dot" /> Tier · {featured.tier}</span>
            </div>
            <div className="cf-client">{featured.client}</div>
            <h3 className="h-1 cf-headline">{featured.headline}</h3>
            <p className="lede">{featured.summary}</p>
            <div className="cf-stats">
              {[featured.stat1, featured.stat2, featured.stat3].map((s, i) =>
              <div key={i} className="cf-stat">
                  <div className="cf-stat-v">{s.v}</div>
                  <div className="cf-stat-l">{s.l}</div>
                </div>
              )}
            </div>
            <span className="cf-cta">Read the case study <Icon.arrow /></span>
          </div>
        </a>

        <div className="case-grid reveal-stagger" data-comment-anchor="bd7b426273-div-39-9">
          {rest.map((c) =>
          <a key={c.id} href={`case-studies/${c.id}.html`} className="case-card">
              <div className="cc-media" style={{ background: c.color }}>
                <CaseMockup id={c.id} small />
              </div>
              <div className="cc-body">
                <div className="cc-meta">
                  <span className="chip">{c.industry}</span>
                  <span className="chip chip-green">{c.tier}</span>
                </div>
                <h3 className="h-3 cc-headline">{c.headline}</h3>
                <p className="cc-client">{c.client}</p>
                <div className="cc-stats">
                  <div className="cc-stat"><b>{c.stat1.v}</b><span>{c.stat1.l}</span></div>
                  <div className="cc-stat"><b>{c.stat2.v}</b><span>{c.stat2.l}</span></div>
                </div>
                <span className="cc-cta">View <Icon.arrowUpRight /></span>
              </div>
            </a>
          )}
        </div>
      </div>
    </section>);

}

/* Renders the case study image. basePath must be passed from the parent so
   paths work from both the homepage (basePath="") and case-study pages (basePath="../"). */
function CaseMockup({ id, small, basePath = "", imgSrc }) {
  const c = CASES.find((x) => x.id === id);
  if (!c) return null;
  const src = imgSrc ? basePath + "assets/" + imgSrc : (c.img ? basePath + "assets/" + c.img : null);
  if (!src) return null;
  return (
    <img
      src={src}
      alt={c.headline}
      style={{ width: "100%", height: "100%", objectFit: "cover", display: "block", objectPosition: small ? "center center" : "top left" }}
    />
  );
}

/* LEGACY SVG stubs kept only in case any old page still references these IDs.
   Remove once old case-study HTML files are retired. */
function _LegacyCaseMockup({ id }) {
  const common = { width: "100%", height: "100%", preserveAspectRatio: "xMidYMid slice" };
  if (id === "plumber-leads") {
    return (
      <svg viewBox="0 0 600 400" {...common}>
        <rect width="600" height="400" fill="rgba(255,255,255,0.04)" />
        <g transform="translate(40, 40)">
          <rect width="520" height="320" rx="14" fill="white" />
          <rect x="20" y="20" width="200" height="14" rx="3" fill="#0e7a3d" />
          <rect x="20" y="42" width="260" height="10" rx="3" fill="#cfd8c5" />
          <rect x="20" y="64" width="220" height="10" rx="3" fill="#cfd8c5" />
          <rect x="20" y="100" width="120" height="34" rx="17" fill="#0e7a3d" />
          <text x="80" y="122" textAnchor="middle" fontFamily="Manrope" fontSize="13" fontWeight="600" fill="white">Book now</text>
          <rect x="160" y="100" width="120" height="34" rx="17" fill="#25d366" />
          <text x="220" y="122" textAnchor="middle" fontFamily="Manrope" fontSize="13" fontWeight="600" fill="white">WhatsApp</text>
          {/* enquiry feed */}
          <rect x="320" y="20" width="180" height="280" rx="10" fill="#f3f5ee" />
          <text x="334" y="42" fontFamily="Manrope" fontSize="11" fontWeight="700" fill="#1b3f73">Today's enquiries</text>
          {[0, 1, 2, 3, 4].map((i) =>
          <g key={i} transform={`translate(330, ${56 + i * 46})`}>
              <rect width="160" height="38" rx="7" fill="white" />
              <circle cx="18" cy="19" r="9" fill="#5bba42" />
              <rect x="34" y="10" width="80" height="7" rx="2" fill="#1b3f73" />
              <rect x="34" y="22" width="110" height="6" rx="2" fill="#9aa3b4" />
            </g>
          )}
        </g>
      </svg>);

  }
  if (id === "roofer-ai") {
    return (
      <svg viewBox="0 0 600 400" {...common}>
        <g transform="translate(40, 40)">
          <rect width="520" height="320" rx="14" fill="white" />
          <rect x="20" y="20" width="180" height="14" rx="3" fill="#ed7b1f" />
          <text x="20" y="58" fontFamily="Bricolage Grotesque" fontSize="20" fontWeight="600" fill="#1b3f73">AI Quote Assistant</text>
          {/* chat */}
          <rect x="20" y="80" width="320" height="220" rx="10" fill="#f9f6ef" />
          <g transform="translate(34, 96)">
            <rect width="200" height="38" rx="10" fill="white" />
            <rect x="12" y="12" width="120" height="6" rx="2" fill="#1b3f73" />
            <rect x="12" y="24" width="160" height="6" rx="2" fill="#9aa3b4" />
          </g>
          <g transform="translate(108, 144)">
            <rect width="220" height="58" rx="10" fill="#ed7b1f" />
            <rect x="12" y="12" width="180" height="6" rx="2" fill="white" />
            <rect x="12" y="24" width="140" height="6" rx="2" fill="rgba(255,255,255,0.7)" />
            <rect x="12" y="36" width="160" height="6" rx="2" fill="rgba(255,255,255,0.7)" />
          </g>
          <g transform="translate(34, 214)">
            <rect width="240" height="68" rx="10" fill="white" />
            <text x="12" y="22" fontFamily="Manrope" fontSize="10" fontWeight="700" fill="#0e7a3d">QUOTE READY</text>
            <text x="12" y="44" fontFamily="Bricolage Grotesque" fontSize="22" fontWeight="600" fill="#1b3f73">£4,280</text>
            <rect x="120" y="34" width="100" height="22" rx="11" fill="#0e7a3d" />
            <text x="170" y="48" textAnchor="middle" fontFamily="Manrope" fontSize="10" fontWeight="600" fill="white">Send to client</text>
          </g>
          {/* right side - photo placeholder */}
          <rect x="360" y="80" width="140" height="100" rx="8" fill="#cfd8c5" />
          <text x="430" y="135" textAnchor="middle" fontFamily="JetBrains Mono" fontSize="10" fill="#59657c">photo.jpg</text>
          <rect x="360" y="190" width="140" height="40" rx="8" fill="#f3f5ee" />
          <rect x="372" y="202" width="80" height="6" rx="2" fill="#1b3f73" />
          <rect x="372" y="214" width="100" height="6" rx="2" fill="#9aa3b4" />
          <rect x="360" y="240" width="140" height="60" rx="8" fill="#1b3f73" />
          <text x="430" y="262" textAnchor="middle" fontFamily="JetBrains Mono" fontSize="9" fontWeight="600" fill="#f39c20">SCOPE</text>
          <text x="430" y="282" textAnchor="middle" fontFamily="Manrope" fontSize="10" fill="white">Full replace · 38m²</text>
        </g>
      </svg>);

  }
  if (id === "florist-orders") {
    return (
      <svg viewBox="0 0 600 400" {...common}>
        <g transform="translate(40, 40)">
          <rect width="520" height="320" rx="14" fill="white" />
          <rect x="0" y="0" width="520" height="48" rx="14" fill="#0e7a3d" />
          <text x="20" y="30" fontFamily="Bricolage Grotesque" fontSize="16" fontWeight="600" fill="white">Briar &amp; Bloom</text>
          <text x="430" y="30" fontFamily="Manrope" fontSize="11" fill="rgba(255,255,255,0.8)">Cart · 2</text>
          {/* bouquets grid */}
          {[0, 1, 2].map((i) =>
          <g key={i} transform={`translate(${20 + i * 165}, 70)`}>
              <rect width="150" height="180" rx="10" fill="#f3f5ee" />
              <circle cx="75" cy="80" r="42" fill="#5bba42" />
              <circle cx="60" cy="68" r="18" fill="#f39c20" />
              <circle cx="92" cy="72" r="14" fill="#ed7b1f" />
              <circle cx="78" cy="92" r="12" fill="white" />
              <rect x="14" y="138" width="100" height="8" rx="2" fill="#1b3f73" />
              <rect x="14" y="152" width="60" height="6" rx="2" fill="#9aa3b4" />
              <text x="120" y="160" fontFamily="Bricolage Grotesque" fontSize="14" fontWeight="600" fill="#0e7a3d">£32</text>
            </g>
          )}
          {/* delivery banner */}
          <rect x="20" y="270" width="480" height="34" rx="8" fill="rgba(243,156,32,0.12)" />
          <circle cx="40" cy="287" r="8" fill="#f39c20" />
          <text x="58" y="291" fontFamily="Manrope" fontSize="11" fontWeight="600" fill="#1b3f73">Same-day delivery available for ME1, ME2, ME3 — order in 1h 24m</text>
        </g>
      </svg>);

  }
  if (id === "dance-school") {
    return (
      <svg viewBox="0 0 600 400" {...common}>
        <g transform="translate(40, 40)">
          <rect width="520" height="320" rx="14" fill="white" />
          {/* hero */}
          <rect x="0" y="0" width="520" height="160" rx="14" fill="#1b3f73" />
          <text x="24" y="60" fontFamily="Bricolage Grotesque" fontSize="26" fontWeight="600" fill="white">Where Medway dances</text>
          <text x="24" y="86" fontFamily="Manrope" fontSize="12" fill="rgba(255,255,255,0.78)">Ballet · Modern · Tap · Acro · Adult classes</text>
          <rect x="24" y="106" width="110" height="32" rx="16" fill="#f39c20" />
          <text x="79" y="125" textAnchor="middle" fontFamily="Manrope" fontSize="12" fontWeight="600" fill="white">Book a taster</text>
          {/* class schedule */}
          {[
          ["Mon", "Ballet", "4–5 yr"],
          ["Tue", "Tap", "6–8 yr"],
          ["Wed", "Modern", "Teen"],
          ["Thu", "Acro", "9–11 yr"]].
          map((row, i) =>
          <g key={i} transform={`translate(20, ${180 + i * 30})`}>
              <rect width="480" height="26" rx="6" fill={i % 2 ? "#f3f5ee" : "white"} stroke="#e2e7d8" />
              <text x="14" y="17" fontFamily="JetBrains Mono" fontSize="10" fontWeight="700" fill="#0e7a3d">{row[0]}</text>
              <text x="80" y="17" fontFamily="Manrope" fontSize="11" fontWeight="600" fill="#1b3f73">{row[1]}</text>
              <text x="200" y="17" fontFamily="Manrope" fontSize="11" fill="#59657c">{row[2]}</text>
              <rect x="420" y="6" width="50" height="14" rx="7" fill="#0e7a3d" />
              <text x="445" y="16" textAnchor="middle" fontFamily="Manrope" fontSize="9" fontWeight="600" fill="white">Book</text>
            </g>
          )}
        </g>
      </svg>);

  }
  if (id === "carpenter") {
    return (
      <svg viewBox="0 0 600 400" {...common}>
        <g transform="translate(40, 40)">
          <rect width="520" height="320" rx="14" fill="#2b3c58" />
          {/* large image area */}
          <rect x="20" y="20" width="320" height="280" rx="10" fill="#1b3f73" />
          {/* warm wood plank stripes */}
          {[0, 1, 2, 3, 4, 5, 6, 7].map((i) =>
          <rect key={i} x="20" y={20 + i * 35} width="320" height="34" fill={i % 2 ? "#7a4a2a" : "#8a5530"} opacity={0.6 + i * 0.04} />
          )}
          <text x="40" y="58" fontFamily="Bricolage Grotesque" fontSize="22" fontWeight="500" fill="white" fontStyle="italic">Quiet craft.</text>
          <text x="40" y="80" fontFamily="Bricolage Grotesque" fontSize="22" fontWeight="500" fill="white" fontStyle="italic">Made to last.</text>
          {/* side menu */}
          <rect x="360" y="20" width="140" height="280" rx="10" fill="rgba(255,255,255,0.06)" />
          {["Kitchens", "Wardrobes", "Staircases", "Bespoke", "About", "Contact"].map((t, i) =>
          <text key={i} x="374" y={50 + i * 26} fontFamily="Manrope" fontSize="11" fontWeight="500" fill={i === 0 ? "#f39c20" : "rgba(255,255,255,0.7)"}>{t}</text>
          )}
        </g>
      </svg>);

  }
  if (id === "cafe-loyalty") {
    return (
      <svg viewBox="0 0 600 400" {...common}>
        <g transform="translate(40, 40)">
          <rect width="520" height="320" rx="14" fill="white" />
          {/* phone mockup */}
          <rect x="40" y="20" width="200" height="280" rx="22" fill="#1b3f73" />
          <rect x="50" y="36" width="180" height="248" rx="14" fill="#faf8f2" />
          <text x="64" y="64" fontFamily="JetBrains Mono" fontSize="9" fontWeight="700" fill="#b56a0c">COBB LANE</text>
          <text x="64" y="92" fontFamily="Bricolage Grotesque" fontSize="18" fontWeight="600" fill="#1b3f73">Hi, Theo ☕</text>
          <text x="64" y="110" fontFamily="Manrope" fontSize="10" fill="#59657c">Your usual?</text>
          <rect x="64" y="124" width="152" height="56" rx="10" fill="#f39c20" />
          <text x="76" y="146" fontFamily="Manrope" fontSize="11" fontWeight="700" fill="white">Flat white · Oat</text>
          <text x="76" y="162" fontFamily="Manrope" fontSize="9" fill="rgba(255,255,255,0.85)">+ Pain au chocolat</text>
          <text x="200" y="170" textAnchor="end" fontFamily="Bricolage Grotesque" fontSize="14" fontWeight="600" fill="white">£6.20</text>
          <rect x="64" y="190" width="152" height="32" rx="16" fill="#0e7a3d" />
          <text x="140" y="210" textAnchor="middle" fontFamily="Manrope" fontSize="11" fontWeight="700" fill="white">Order &amp; pay</text>
          <rect x="64" y="232" width="152" height="44" rx="10" fill="white" stroke="#e2e7d8" />
          <text x="76" y="250" fontFamily="JetBrains Mono" fontSize="9" fontWeight="700" fill="#0e7a3d">LOYALTY</text>
          <g>
            {[0,1,2,3,4,5,6].map((i) => (
              <circle key={i} cx={80 + i * 18} cy="262" r="5" fill={i < 5 ? "#f39c20" : "#e2e7d8"} />
            ))}
          </g>
          {/* AI host card */}
          <rect x="260" y="40" width="240" height="240" rx="14" fill="#fff3e0" />
          <text x="278" y="68" fontFamily="JetBrains Mono" fontSize="9" fontWeight="700" letterSpacing="0.1em" fill="#ed7b1f">AI HOST · LIVE</text>
          <text x="278" y="92" fontFamily="Bricolage Grotesque" fontSize="16" fontWeight="600" fill="#1b3f73">Morning rush</text>
          <text x="278" y="110" fontFamily="Manrope" fontSize="10" fill="#59657c">5 regulars walking in next 8 min</text>
          {[
            ["Theo", "Flat white"],
            ["Iris", "Oat latte + croissant"],
            ["Marcus", "Americano · double"],
            ["Sofia", "Matcha · soy"],
          ].map((r, i) => (
            <g key={i} transform={`translate(278, ${130 + i * 32})`}>
              <rect width="204" height="26" rx="6" fill="white" />
              <circle cx="14" cy="13" r="7" fill="#f39c20" />
              <text x="14" y="17" textAnchor="middle" fontFamily="Manrope" fontSize="8" fontWeight="700" fill="white">{r[0][0]}</text>
              <text x="30" y="17" fontFamily="Manrope" fontSize="10" fontWeight="600" fill="#1b3f73">{r[0]}</text>
              <text x="78" y="17" fontFamily="Manrope" fontSize="9" fill="#59657c">{r[1]}</text>
              <text x="196" y="17" textAnchor="end" fontFamily="JetBrains Mono" fontSize="8" fontWeight="600" fill="#0e7a3d">READY</text>
            </g>
          ))}
        </g>
      </svg>
    );
  }
  if (id === "school-admin") {
    return (
      <svg viewBox="0 0 600 400" {...common}>
        <g transform="translate(40, 40)">
          <rect width="520" height="320" rx="14" fill="white" />
          <rect x="0" y="0" width="120" height="320" rx="14" fill="#122a52" />
          <rect x="14" y="20" width="92" height="10" rx="2" fill="#5bba42" />
          {["Students", "Classes", "Register", "Invoices", "Parents", "Reports"].map((t, i) =>
          <g key={i}>
              <rect x="14" y={50 + i * 32} width="92" height="22" rx="5" fill={i === 3 ? "rgba(243,156,32,0.18)" : "transparent"} />
              <text x="22" y={64 + i * 32} fontFamily="Manrope" fontSize="10" fontWeight={i === 3 ? 600 : 500} fill={i === 3 ? "#f39c20" : "rgba(255,255,255,0.78)"}>{t}</text>
            </g>
          )}
          {/* main */}
          <text x="140" y="40" fontFamily="Bricolage Grotesque" fontSize="18" fontWeight="600" fill="#1b3f73">Invoices · April</text>
          {/* table */}
          {[
          ["Sienna B.", "Ballet · Tap", "£64", "Paid"],
          ["Marcus W.", "Modern", "£28", "Paid"],
          ["Amelia R.", "Acro · Ballet", "£68", "Sent"],
          ["Henry T.", "Tap", "£28", "Overdue"],
          ["Lily P.", "Ballet", "£32", "Paid"],
          ["Oscar V.", "Modern · Acro", "£64", "Paid"]].
          map((row, i) =>
          <g key={i} transform={`translate(140, ${60 + i * 32})`}>
              <rect width="360" height="26" rx="5" fill={i % 2 ? "#f3f5ee" : "white"} />
              <text x="12" y="17" fontFamily="Manrope" fontSize="11" fontWeight="600" fill="#1b3f73">{row[0]}</text>
              <text x="120" y="17" fontFamily="Manrope" fontSize="10" fill="#59657c">{row[1]}</text>
              <text x="240" y="17" fontFamily="JetBrains Mono" fontSize="10" fontWeight="600" fill="#1b3f73">{row[2]}</text>
              <rect x="290" y="7" width="56" height="14" rx="7" fill={row[3] === "Paid" ? "#0e7a3d" : row[3] === "Sent" ? "#1b3f73" : "#ed7b1f"} />
              <text x="318" y="17" textAnchor="middle" fontFamily="Manrope" fontSize="9" fontWeight="600" fill="white">{row[3]}</text>
            </g>
          )}
        </g>
      </svg>);

  }
  return null;
}

window.CaseStudies = CaseStudies;
window.CaseMockup = CaseMockup;