const caseStudyData = [
  {
    marker: "Recent case study",
    eyebrow: "Pilot time-building",
    name: "Odyssey Pilot Hours",
    quote: "It is not about the number of leads, it is about the quality.",
    photo: {
      src: "/images/case-studies/odyssey-pilot-hours-hangar.jpg",
      alt: "Light sport aircraft parked outside the Odyssey hangar",
      position: "center",
    },
    metrics: [
      { value: "400+", label: "Pilots generated" },
      { value: "$4M+", label: "Estimated pilot lifetime value" },
    ],
    body: [
      "Odyssey came to us in 2021 with no marketing function. We built one from scratch: Google Ads plus a day-in-the-life video series featuring real students and real aircraft. The video still outperforms everything else.",
      "Lead volume was never the goal. Quality was. We tuned around the pilots who actually enroll and keep flying, at roughly $100 per pilot. Odyssey puts it this way: the day-to-day \"could not be smoother,\" with a team that \"makes decisions based specifically on the company's needs, not general strategies any marketing agency utilizes.\"",
    ],
  },
];

function CaseStudies({ cases = caseStudyData }) {
  return (
    <section className="alg-section alg-cases" id="cases">
      <div className="alg-container">
        <div className="alg-section-head">
          <div className="alg-about-eyebrow">
            <span className="alg-rule"></span>
            <span>04 · Case Studies</span>
          </div>
          <h2 className="alg-section-h2">Flown, logged, verified.</h2>
        </div>

        <div className="alg-case-list">
          {cases.map((c, i) => (
            <article className="alg-case" key={i}>
              <div className="alg-case-photo">
                <img
                  className="alg-case-photo-img"
                  src={c.photo.src}
                  alt={c.photo.alt}
                  style={{ objectPosition: c.photo.position || "center" }}
                />
                <div className="alg-case-photo-overlay"></div>
              </div>
              <div className="alg-case-content">
                <div className="alg-case-marker">{c.marker}</div>
                <div className="alg-case-cat">{c.eyebrow}</div>
                <h3 className="alg-case-name">{c.name}</h3>
                <p className="alg-case-quote">"{c.quote}"</p>

                <div className="alg-case-split">
                  {c.metrics.map((m, j) => (
                    <React.Fragment key={j}>
                      {j > 0 && <hr className="alg-case-split-rule" />}
                      <div className="alg-case-row">
                        <div className="alg-case-metric">
                          <div className="alg-case-metric-v">{m.value}</div>
                          <div className="alg-case-metric-k">{m.label}</div>
                        </div>
                        <p className="alg-case-body">{c.body[j]}</p>
                      </div>
                    </React.Fragment>
                  ))}
                </div>
              </div>
            </article>
          ))}
        </div>
      </div>
    </section>
  );
}
window.CaseStudies = CaseStudies;