// ============================================================
// autoclient.io — CASE STUDIES (list + detail pages)
// Clients are anonymized; metrics are representative.
// ============================================================

const CASES = [
  {
    slug: "saas", client: "Enterprise SaaS Platform", tag: "Enterprise · Paid + Content", hue: "purple", label: "SaaS", icon: "cloud",
    challenge: "Scale qualified enterprise pipeline across search and social without inflating cost per lead.",
    approach: "A full-funnel program: intent-based search, account-targeted social, and a technical content engine, all wired to first-party data and AI bidding.",
    solution: [
      "Rebuilt the search account around high-intent, bottom-funnel terms and negative-keyword hygiene.",
      "Layered account-based social targeting against a defined list of target accounts.",
      "Stood up a technical content engine mapped to the buying committee's real questions.",
      "Connected first-party conversion data so AI bidding optimized to qualified pipeline, not clicks.",
    ],
    metrics: [["4.7", "×", "return on ad spend"], ["38", "%", "lower cost per lead"], ["3.2", "×", "qualified pipeline"]],
    quote: { text: "Every dollar is now accountable to a number. The reporting alone changed how our leadership thinks about spend.", who: "Marketing Lead, enterprise SaaS" },
  },
  {
    slug: "cosmetic", client: "National Cosmetic-Surgery Group", tag: "Medical · Email + CRM", hue: "coral", label: "Medical", icon: "stethoscope",
    challenge: "Consult requests were inconsistent and the front desk was buried in manual follow-up and reminders.",
    approach: "Email and SMS automation tied into the CRM: instant lead follow-up, behavior-triggered nurture, and automated appointment reminders.",
    solution: [
      "Deployed instant, on-brand follow-up the moment a consult request came in.",
      "Built behavior-triggered nurture sequences segmented by procedure interest.",
      "Automated appointment confirmations and reminders to cut no-shows.",
      "Wired reactivation flows to win back lapsed patients on autopilot.",
    ],
    metrics: [["63", "%", "more consult bookings"], ["41", "%", "fewer no-shows"], ["3", "×", "repeat patient rate"]],
    quote: { text: "Their automation books our calendar while we sleep. Our front desk finally has time to breathe.", who: "Director, cosmetic-surgery group" },
  },
  {
    slug: "law", client: "Multi-Location Law Firm", tag: "Legal · SEO + Lead Gen", hue: "mix", label: "Law", icon: "scale",
    challenge: "The firm was paying for clicks and impressions, not signed cases, with no clear line from spend to revenue.",
    approach: "Local and practice-area SEO, conversion-tuned landing pages, and intake automation with call tracking back to cost per signed case.",
    solution: [
      "Built practice-area and location pages engineered to rank and convert.",
      "Won the local map pack with profile optimization and review velocity.",
      "Added call tracking and intake automation so no qualified lead went cold.",
      "Reported on cost per signed case, not vanity keyword counts.",
    ],
    metrics: [["2.4", "×", "more cases signed"], ["52", "%", "lower cost per case"], ["#1", "", "in the local map pack"]],
    quote: { text: "Autoclient is the first agency that talks about cases signed, not impressions. That difference is everything.", who: "Partner, multi-location law firm" },
  },
  {
    slug: "cloud", client: "Cloud Infrastructure Brand", tag: "Enterprise · Technical SEO", hue: "violet", label: "Cloud", icon: "server",
    challenge: "Build a durable organic pipeline from technical content in an intensely competitive search landscape.",
    approach: "Technical SEO foundations, a developer-focused content engine, and authority building targeting high-intent, high-difficulty terms.",
    solution: [
      "Fixed crawlability, site speed, and schema to give content a foundation to rank.",
      "Built a developer-focused content engine around high-difficulty, high-value terms.",
      "Earned authoritative, relevant links to compound rankings over time.",
      "Tracked organic traffic through to qualified leads in a live dashboard.",
    ],
    metrics: [["180", "%", "organic traffic growth"], ["120", "+", "page-one keywords"], ["4.1", "×", "organic leads"]],
    quote: { text: "They built us a pipeline that compounds. Organic is now our most efficient channel by far.", who: "Growth Lead, cloud infrastructure" },
  },
];
const CASE_BY_SLUG = Object.fromEntries(CASES.map((c) => [c.slug, c]));

const REPRESENTATIVE_NOTE = "Clients are anonymized and results are representative of engagements in each sector. Your projections are scoped in your free strategy session.";

/* ============================ LIST PAGE ============================ */
function CaseStudiesHero() {
  return (
    <section style={{ position: "relative", overflow: "hidden", padding: "176px 0 70px" }}>
      <Aura color="#8784FD" size={560} top={-200} left={"28%"} opacity={0.4} drift={1} />
      <Aura color="#FF6666" size={420} top={-20} right={-150} opacity={0.28} drift={2} />
      <div className="wrap" style={{ position: "relative", zIndex: 1, maxWidth: 920 }}>
        <span className="overline-grad fade-up">Case studies</span>
        <h1 className="fade-up" style={{ fontWeight: 300, fontSize: "clamp(2.6rem,5.2vw,4.6rem)", lineHeight: 1.05, letterSpacing: "-0.03em", margin: "20px 0 0" }}>
          Results we can <span className="gt" style={{ fontWeight: 300 }}>prove.</span>
        </h1>
        <p className="fade-up" style={{ fontSize: 18, lineHeight: 1.65, color: "var(--fg-on-dark-2)", maxWidth: 640, margin: "26px 0 0" }}>
          Case studies are the numbers behind the work: cases signed, patients booked, revenue grown. Looking for the visual portfolio instead? See <a href="#/works" className="gt" style={{ fontWeight: 600 }}>our projects</a>.
        </p>
      </div>
    </section>
  );
}

function CaseStudy({ c, i }) {
  const reverse = i % 2 === 1;
  return (
    <div className="reveal case-row" style={{ display: "grid", gridTemplateColumns: "1fr 1fr", gap: 56, alignItems: "center", padding: "44px 0", borderTop: i ? "1px solid var(--line-on-dark)" : "none" }}>
      <a href={`#/case-studies/${c.slug}`} style={{ order: reverse ? 2 : 1, display: "block" }}>
        <div className="card-grad" style={{ padding: 1 }}>
          <div style={{ borderRadius: "var(--radius-lg)", overflow: "hidden" }}>
            <ProjectThumb hue={c.hue} label={c.label} icon={c.icon} ratio={72} />
          </div>
        </div>
      </a>
      <div style={{ order: reverse ? 1 : 2 }}>
        <span className="overline" style={{ color: "var(--auto-violet)" }}>{c.tag}</span>
        <h2 style={{ fontWeight: 400, fontSize: "clamp(1.7rem,2.8vw,2.3rem)", lineHeight: 1.15, letterSpacing: "-0.02em", margin: "14px 0 18px" }}>{c.client}</h2>
        <p style={{ fontSize: 15.5, lineHeight: 1.65, color: "var(--fg-on-dark-2)", margin: "0 0 10px" }}>
          <strong style={{ color: "var(--fg-on-dark-1)", fontWeight: 600 }}>Challenge.</strong> {c.challenge}
        </p>
        <p style={{ fontSize: 15.5, lineHeight: 1.65, color: "var(--fg-on-dark-2)", margin: "0 0 28px" }}>
          <strong style={{ color: "var(--fg-on-dark-1)", fontWeight: 600 }}>Approach.</strong> {c.approach}
        </p>
        <div style={{ display: "grid", gridTemplateColumns: "repeat(3,1fr)", gap: 20, paddingTop: 24, borderTop: "1px solid var(--line-on-dark)" }}>
          {c.metrics.map(([n, s, l], k) => (
            <div key={k}>
              <div className="gt" style={{ fontWeight: 400, fontSize: "clamp(2rem,3vw,2.6rem)", letterSpacing: "-0.02em", lineHeight: 1 }}>{n}{s}</div>
              <div style={{ fontSize: 12.5, color: "var(--fg-on-dark-3)", marginTop: 9, lineHeight: 1.4 }}>{l}</div>
            </div>
          ))}
        </div>
        <a href={`#/case-studies/${c.slug}`} className="arrow-link" style={{ marginTop: 28 }}>Read the full case study <Icon name="arrow-right" size={16} /></a>
      </div>
    </div>
  );
}

function CaseStudiesPage() {
  useReveal();
  return (
    <main>
      <CaseStudiesHero />
      <section className="sec" style={{ paddingTop: 24 }}>
        <div className="wrap-wide">
          {CASES.map((c, i) => <CaseStudy key={c.slug} c={c} i={i} />)}
          <p className="reveal" style={{ fontSize: 12.5, color: "var(--fg-on-dark-3)", marginTop: 40, textAlign: "center", maxWidth: 720, marginLeft: "auto", marginRight: "auto", lineHeight: 1.6 }}>{REPRESENTATIVE_NOTE}</p>
        </div>
      </section>
      <CtaBanner title="Your results could be next." sub="Tell us your goal. We'll send back a plan with the numbers we'd aim for, free." primary="Book a Call" />
    </main>
  );
}

/* ============================ DETAIL PAGE ============================ */
function caseSlugFromHash() {
  const m = (window.location.hash || "").match(/#\/case-studies\/([^/?#]+)/);
  return m ? m[1] : null;
}

function CaseStudyDetail() {
  useReveal();
  const c = CASE_BY_SLUG[caseSlugFromHash()];
  if (!c) {
    return (
      <main>
        <section style={{ padding: "200px 0 120px", textAlign: "center" }}>
          <div className="wrap">
            <h1 style={{ fontWeight: 300, fontSize: "clamp(2rem,4vw,3rem)", letterSpacing: "-0.02em" }}>Case study not found.</h1>
            <Button variant="primary" icon="arrow-right" href="#/case-studies" style={{ marginTop: 28 }}>Back to case studies</Button>
          </div>
        </section>
      </main>
    );
  }
  const related = CASES.filter((x) => x.slug !== c.slug).slice(0, 3);
  return (
    <main>
      <section style={{ position: "relative", overflow: "hidden", padding: "150px 0 64px" }}>
        <Aura color="#8784FD" size={560} top={-200} left={"26%"} opacity={0.4} drift={1} />
        <Aura color="#FF6666" size={420} top={-20} right={-150} opacity={0.26} drift={2} />
        <div className="wrap" style={{ position: "relative", zIndex: 1, maxWidth: 960 }}>
          <a href="#/case-studies" className="arrow-link fade-up" style={{ color: "var(--fg-on-dark-2)", marginBottom: 22 }}><Icon name="arrow-left" size={16} /> All case studies</a>
          <div className="fade-up" style={{ marginTop: 18 }}><span className="overline" style={{ color: "var(--auto-violet)" }}>{c.tag}</span></div>
          <h1 className="fade-up" style={{ fontWeight: 300, fontSize: "clamp(2.3rem,4.6vw,3.8rem)", lineHeight: 1.07, letterSpacing: "-0.03em", margin: "16px 0 0" }}>{c.client}</h1>
        </div>
      </section>

      {/* metrics band */}
      <section style={{ paddingBottom: 16 }}>
        <div className="wrap-wide">
          <div className="reveal card" style={{ padding: "44px 40px" }}>
            <div className="grid-3" style={{ display: "grid", gridTemplateColumns: "repeat(3,1fr)", gap: 24 }}>
              {c.metrics.map(([n, s, l], k) => (
                <div key={k} style={{ textAlign: "center", borderLeft: k ? "1px solid var(--line-on-dark)" : "none" }}>
                  <div className="gt" style={{ fontWeight: 400, fontSize: "clamp(2.6rem,4.4vw,3.8rem)", letterSpacing: "-0.025em", lineHeight: 1 }}>{n}{s}</div>
                  <div className="overline" style={{ marginTop: 12 }}>{l}</div>
                </div>
              ))}
            </div>
          </div>
        </div>
      </section>

      {/* narrative */}
      <section className="sec">
        <div className="wrap-narrow">
          <div className="reveal" style={{ marginBottom: 40 }}>
            <Overline grad>The challenge</Overline>
            <p style={{ fontSize: 19, lineHeight: 1.6, color: "var(--fg-on-dark-1)", margin: "16px 0 0", fontWeight: 300, letterSpacing: "-0.01em" }}>{c.challenge}</p>
          </div>
          <div className="reveal" style={{ marginBottom: 40 }}>
            <Overline grad>Our approach</Overline>
            <p style={{ fontSize: 16.5, lineHeight: 1.7, color: "var(--fg-on-dark-2)", margin: "16px 0 0" }}>{c.approach}</p>
          </div>
          <div className="reveal">
            <Overline grad>What we did</Overline>
            <div style={{ display: "flex", flexDirection: "column", gap: 16, marginTop: 22 }}>
              {c.solution.map((b, k) => (
                <div key={k} style={{ display: "flex", gap: 14, alignItems: "flex-start" }}>
                  <span style={{ width: 26, height: 26, borderRadius: 99, flexShrink: 0, marginTop: 1, background: "var(--auto-gradient)", display: "flex", alignItems: "center", justifyContent: "center" }}><Icon name="check" size={15} color="#fff" /></span>
                  <span style={{ fontSize: 16, lineHeight: 1.55, color: "var(--fg-on-dark-1)" }}>{b}</span>
                </div>
              ))}
            </div>
          </div>
          {c.quote && (
            <blockquote className="reveal" style={{ margin: "48px 0 0", padding: "32px 36px", borderRadius: "var(--radius-lg)", background: "var(--bg-elevated)", border: "1px solid var(--line-on-dark)" }}>
              <p style={{ fontWeight: 300, fontSize: "clamp(1.3rem,2.2vw,1.7rem)", lineHeight: 1.4, letterSpacing: "-0.015em", margin: 0 }}>&ldquo;{c.quote.text}&rdquo;</p>
              <footer style={{ fontSize: 14, color: "var(--fg-on-dark-3)", marginTop: 18 }}>{c.quote.who}</footer>
            </blockquote>
          )}
          <p className="reveal" style={{ fontSize: 12.5, color: "var(--fg-on-dark-3)", marginTop: 36, lineHeight: 1.6 }}>{REPRESENTATIVE_NOTE}</p>
        </div>
      </section>

      {/* related */}
      <section className="sec" style={{ paddingTop: 0 }}>
        <div className="wrap-wide">
          <div className="reveal" style={{ marginBottom: 32 }}><Overline grad>More case studies</Overline></div>
          <div className="grid-3" style={{ display: "grid", gridTemplateColumns: "repeat(3,1fr)", gap: 20 }}>
            {related.map((r, i) => (
              <a key={r.slug} href={`#/case-studies/${r.slug}`} className="reveal" data-delay={i * 70} style={{ display: "block" }}>
                <div style={{ borderRadius: "var(--radius-md)", overflow: "hidden" }}><ProjectThumb hue={r.hue} label={r.label} icon={r.icon} ratio={58} /></div>
                <span className="overline" style={{ color: "var(--auto-violet)", display: "block", marginTop: 16 }}>{r.tag}</span>
                <h3 style={{ fontWeight: 500, fontSize: 18, margin: "10px 0 0" }}>{r.client}</h3>
              </a>
            ))}
          </div>
        </div>
      </section>

      <CtaBanner title="Want results like these?" sub="Tell us your goal. We'll send back a plan with the numbers we'd aim for, free." primary="Book a Call" />
    </main>
  );
}

Object.assign(window, { CaseStudiesPage, CaseStudyDetail });