// Case Studies — three variants: accordion (default), tabs, ledger

const { useState: useCaseState, useEffect: useCaseEffect } = React;

const CASES = [
  {
    num: "§ 03·I",
    tag: "LOGISTICS · 3PL",
    title: "3PL broker — RFP bidding cycle",
    headlineStat: "40 hrs → 1 hr",
    before: { num: "40", unit: "hours · per cycle · two senior dispatchers" },
    after:  { num: "1",  unit: "hour · review pass · single analyst" },
    delta:  { num: "−97.5%", unit: "time reclaimed for margin work" },
    sidebar: [
      ["Vertical",  "Logistics & 3PLs"],
      ["Volume",    "~1,000 loads / month"],
      ["Scope",     "3,712 lanes · 4 solicitations"],
      ["Teammate",  "Watchdog → Ezra"],
    ],
    paras: [
      <>A 3PL broker covering produce and grocery freight runs ~1,000 loads a month. Every tender cycle, their two most senior dispatchers — the founder and his pricing partner — would block out a full week, sit on the phone together, and price thousands of lanes one at a time.</>,
      <>One recent batch: 3,712 lanes across four solicitations. <em>"It drives me insane,"</em> the founder said in the audit.</>,
      <>Watchdog mapped the workflow on-site. Ezra now ingests the bid spreadsheet the moment it lands, queries DAT for every lane in parallel, applies the company's fuel rules and lane-specific overrides, and outputs a review-ready bid in Excel.</>,
    ],
  },
  {
    num: "§ 03·II",
    tag: "PROPERTY SERVICES · HVAC",
    title: "Multi-location HVAC — every inbound call, handled",
    headlineStat: "100% of inbound",
    before: { num: "~60%", unit: "inbound answered · third-party service" },
    after:  { num: "100%", unit: "inbound answered · 24/7 · EN + ES" },
    delta:  { num: "+booking rate", unit: "right truck · right tech · first call" },
    sidebar: [
      ["Vertical", "Property services"],
      ["Footprint","3 branches · multi-state"],
      ["System",   "ServiceTitan · direct dispatch"],
      ["Teammate", "Mia"],
    ],
    paras: [
      <>A multi-state residential HVAC operator with three branches and a small in-house CSR team was losing jobs at the top of the funnel. Evening calls, weekend overflow, and the morning rush were all going to a third-party answering service that booked badly.</>,
      <>Mia now answers 100% of inbound calls, 24/7. Grounded in the company's own SOPs, she books straight onto the dispatch board with the right truck class and tech skill tag. She handles Spanish-speaking callers natively.</>,
      <>Net effect: the after-hours staffing line item is gone, the booking rate is up, and the CSR team handles relationships and dispatch instead of triage.</>,
    ],
  },
  {
    num: "§ 03·III",
    tag: "REAL ESTATE · MULTIFAMILY",
    title: "Real estate developer — inbound deal flow, parsed",
    headlineStat: "40–60 deals/week, parsed",
    before: { num: "40–60", unit: "broker emails / week · GP opens each" },
    after:  { num: "1-pg", unit: "screen per deal · buy · pass · discuss" },
    delta:  { num: "GP → pipeline", unit: "not inbox · associate models what matters" },
    sidebar: [
      ["Vertical", "Real estate · multifamily"],
      ["Inputs",   "OMs · teasers · off-market pings · Loopnet"],
      ["System",   "Notion pipeline · tagged by market"],
      ["Teammate", "Ezra"],
    ],
    paras: [
      <>A multifamily developer with an active acquisitions pipeline gets 40–60 broker emails a week. The general partner used to open every one to figure out whether it was worth a second look.</>,
      <>Ezra now reads each inbound the moment it lands, pulls underwriting basics from the OM, cross-references the buy-box, and produces a one-page screen with a buy / pass / discuss recommendation.</>,
      <>The GP opens the pipeline, not the inbox. The associate spends time on the deals worth modeling.</>,
    ],
  },
];

function CaseLedger({ c }) {
  return (
    <div className="ledger">
      <div className="ledger-cell before">
        <div className="ledger-lbl">Before</div>
        <div className="ledger-num">{c.before.num}</div>
        <div className="ledger-unit">{c.before.unit}</div>
      </div>
      <div className="ledger-cell after">
        <div className="ledger-lbl">After</div>
        <div className="ledger-num">{c.after.num}</div>
        <div className="ledger-unit">{c.after.unit}</div>
      </div>
      <div className="ledger-cell delta">
        <div className="ledger-lbl">Delta</div>
        <div className="ledger-num">{c.delta.num}</div>
        <div className="ledger-unit">{c.delta.unit}</div>
      </div>
    </div>
  );
}

function CaseNarrative({ c }) {
  return (
    <div className="case-narrative">
      <div className="side">
        {c.sidebar.map(([k, v]) => (
          <div key={k}>
            <span style={{fontFamily:"var(--mono)", color:"var(--ink-soft)"}}>{k}</span>
            <span className="k">{v}</span>
          </div>
        ))}
      </div>
      <div>{c.paras.slice(0, 2).map((p, i) => <p key={i}>{p}</p>)}</div>
      <div>{c.paras.slice(2).map((p, i) => <p key={i}>{p}</p>)}</div>
    </div>
  );
}

function CasesAccordion() {
  const [open, setOpen] = useCaseState(0);
  return (
    <div className="case-accordion">
      {CASES.map((c, i) => {
        const isOpen = open === i;
        return (
          <div key={c.num} className={`case-item${isOpen ? " open" : ""}`}>
            <button className="case-trigger" onClick={() => setOpen(isOpen ? -1 : i)}>
              <span className="case-num">{c.num}</span>
              <span className="case-title">{c.title}</span>
              <span className="case-stat">{c.headlineStat}</span>
              <span className="toggle">+</span>
            </button>
            <div className="case-panel">
              <div className="case-panel-inner">
                <CaseLedger c={c} />
                <CaseNarrative c={c} />
              </div>
            </div>
          </div>
        );
      })}
    </div>
  );
}

function CasesTabs() {
  const [active, setActive] = useCaseState(0);
  const c = CASES[active];
  return (
    <div className="case-tabs">
      <div className="case-tabs-list">
        {CASES.map((cc, i) => (
          <button key={cc.num} className={`case-tab${active === i ? " active" : ""}`} onClick={() => setActive(i)}>
            <span className="tnum">{cc.num} · {cc.tag}</span>
            <span className="ttitle">{cc.title}</span>
            <span className="tstat">{cc.headlineStat}</span>
          </button>
        ))}
      </div>
      <div className="case-tab-panel">
        <div className="case-title">{c.title}</div>
        <CaseLedger c={c} />
        <CaseNarrative c={c} />
      </div>
    </div>
  );
}

function CaseStudies() {
  const [variant, setVariant] = useCaseState(() => document.body.dataset.cases || "accordion");
  useCaseEffect(() => {
    const obs = new MutationObserver(() => setVariant(document.body.dataset.cases || "accordion"));
    obs.observe(document.body, { attributes: true, attributeFilter: ["data-cases"] });
    return () => obs.disconnect();
  }, []);
  return (
    <section id="practice">
      <div className="container">
        <div className="section-head">
          <div><span className="eyebrow-num">§ 03 / IN PRACTICE</span></div>
          <div>
            <h2>What it looks like <span className="serif-italic text-accent">in practice.</span></h2>
            <p style={{marginTop:20, maxWidth:600, fontSize:15, color:"var(--ink-muted)", lineHeight:1.6}}>
              Three recent engagements. Expand any row for the details.
            </p>
          </div>
        </div>
        {variant === "tabs" ? <CasesTabs /> : <CasesAccordion />}
      </div>
    </section>
  );
}

window.CaseStudies = CaseStudies;