/* global React, useReveal, SectionHead */

const cases = [
  {
    wide: true,
    idx: "Case 01",
    kind: "Funnel rebuild · UNCP Career Center",
    headline: "Rebuilding a university career funnel from first glance to event action.",
    problem: "Students had access to opportunities, but the path from awareness to attendance was split across email, social, and reminders.",
    action: "I treated the funnel as one system: message hierarchy, channel cadence, creative production, measurement, and weekly iteration.",
    outcome: "+35% engagement lift and +25% reach expansion within one semester.",
    footer: [["Client", "UNCP Career Center"], ["Stack", "GA · Meta Suite · Canva"], ["Outcome", "+35% engagement"]],
  },
  {
    idx: "Case 02",
    kind: "Cross-platform rollout",
    headline: "One recruitment story, five platform-native versions.",
    problem: "A national recruitment story needed consistency without sounding copied and pasted across every channel.",
    action: "I shaped a channel rhythm: deeper on LinkedIn, visual on Instagram, direct on Snap, practical on Facebook, concise on X.",
    outcome: "A steadier recruitment presence with clearer audience-specific messaging and easier campaign execution.",
    footer: [["Cadence", "4+ posts / mo / ch"], ["Scope", "National recruitment"]],
  },
  {
    idx: "Case 03",
    kind: "Community growth · HerKey",
    headline: "Growing a women-in-tech community with faster creative learning.",
    problem: "The team needed consistent engagement while supporting fast-moving launch and community priorities.",
    action: "I tested post formats, content pillars, and reusable creative patterns against engagement rate.",
    outcome: "+20% social engagement, 30+ assets shipped, and a repeatable content playbook.",
    footer: [["Engagement", "+20%"], ["Assets", "30+"]],
  },
  {
    idx: "Case 04",
    kind: "Operational efficiency · Lernx",
    headline: "Cutting hiring turnaround by making the pipeline easier to operate.",
    problem: "Recruiting was slowed by inconsistent screening stages and loose feedback loops.",
    action: "I re-sequenced screening, introduced structured interviews, and tightened coordination between marketing and HR.",
    outcome: "25% faster hiring turnaround across a 20+ candidate cohort.",
    footer: [["Turnaround", "−25%"], ["Candidates", "20+"]],
  },
];

window.Cases = function Cases() {
  const ref = useReveal();
  return (
    <section className="section section--border" id="cases" ref={ref}>
      <SectionHead num="04 — Cases" title="Case" titleEm="studies" meta={`${cases.length} notes`} />

      <div className="cases">
        {cases.map((c, i) => (
          <article className={`case reveal ${c.wide ? "case--wide" : ""}`} key={i}>
            <div className="case__idx">
              <span>{c.idx}</span>
              <span>{c.kind}</span>
            </div>
            <h3 className="case__headline">{c.headline}</h3>
            <div className="case__proof">
              <div>
                <span>Problem</span>
                <p>{c.problem}</p>
              </div>
              <div>
                <span>Action</span>
                <p>{c.action}</p>
              </div>
              <div>
                <span>Result</span>
                <p>{c.outcome}</p>
              </div>
            </div>
            {c.wide && (
              <>
                <div className="case__chart" aria-hidden="true">
                  {[24, 32, 28, 41, 48, 44, 58, 66, 62, 74, 82, 89].map((h, j) => (
                    <div key={j} className={`b ${h > 60 ? "hi" : ""}`} style={{ height: `${h}%` }} title={`WK ${String(j+1).padStart(2,"0")} · ${h}`} />
                  ))}
                </div>
                <div className="case__chart-axis">
                  <span>WK 01</span>
                  <span>WK 04</span>
                  <span>WK 08</span>
                  <span className="mid">WK 12 · +35%</span>
                </div>
              </>
            )}
            <div className="case__footer">
              {c.footer.map(([k, v], j) => (
                <span key={j}>{k} / <strong>{v}</strong></span>
              ))}
            </div>
          </article>
        ))}
      </div>
    </section>
  );
};