// CourseLetterpress — repurposed from course posters into 4 illustrative case-study cards, same ticket-stub CTA language
const CASE_STUDIES = [
  {
    vertical: "ECOMMERCE", bg: "#1A1714", ink: "#F4E36A",
    headline: "How an ecommerce brand recovered $2.2K in 30 days without running a single ad",
    client: "Online skincare brand, $10K/month revenue",
    problem: "70% of visitors added to cart and left. There was no follow-up system, so revenue walked out the door every day.",
    built: "An abandoned cart recovery system: a multi-step sequence across email and Instagram DM, personalized to what they left behind, triggered within 10 minutes.",
    results: ["Recovered $2,200 in month one", "15% of abandoned carts converted", "Zero ad spend, zero manual work"],
    quote: null,
  },
  {
    vertical: "AGENCY", bg: "#DD6B3A", ink: "#FBF6EF",
    headline: "How a marketing agency stopped hiring and started scaling",
    client: "8-person digital marketing agency",
    problem: "Drowning in client reporting: 3 days a week pulling data and building decks. Needed to hire but couldn't afford to.",
    built: "An automated reporting pipeline that pulls data from every client ad account, formats it into branded reports, and sends it every Monday morning.",
    results: ["Saved 14 hours/week across the team", "Reports went from 3 days to 3 hours", "Avoided a $3,500/month hire (that's $42K/year back in the business)"],
    quote: null,
  },
  {
    vertical: "SAAS", bg: "#C7DCE8", ink: "#1A1714",
    headline: "How a SaaS sales team cut response time from 4 hours to 4 minutes",
    client: "B2B SaaS company, 12-person sales team",
    problem: "Inbound leads 24/7, sales team 9–5. Hot leads going cold overnight. Pipeline full of noise.",
    built: "An AI lead triage system that scores every inbound lead instantly, sends a personalized follow-up within 4 minutes, and routes hot leads to the right rep with full context.",
    results: ["Response time: 4 hours → 4 minutes", "15 hours/week saved on manual qualification", "Reps only touching leads worth their time"],
    quote: null,
  },
  {
    vertical: "COACH", bg: "#8E9BC8", ink: "#FBF6EF",
    headline: "How a business coach tripled her discovery calls without working more hours",
    client: "Business coach, solo operator, $5K–$10K offers",
    problem: "Great at coaching, terrible at follow-up. Leads from Instagram falling through the cracks. Funnel built on manual DMs and memory.",
    built: "A full AI funnel: lead capture from Instagram, an automated nurture sequence, a booking system tied to her calendar, and follow-up if they don't show.",
    results: ["Discovery calls: 4/month → 14/month", "Funnel conversion: 2% → 6%", "Saved 10 hours/week on manual DMs"],
    quote: null,
  },
];

// Full case-study write-up, opened from a card click
function CaseStudyModal({ study, onClose }) {
  React.useEffect(() => {
    const onKey = (e) => { if (e.key === "Escape") onClose(); };
    document.addEventListener("keydown", onKey);
    document.body.style.overflow = "hidden";
    return () => {
      document.removeEventListener("keydown", onKey);
      document.body.style.overflow = "";
    };
  }, [onClose]);

  return ReactDOM.createPortal(
    <div onClick={onClose} style={{
      position: "fixed", inset: 0, background: "rgba(26,23,20,0.6)",
      display: "flex", alignItems: "center", justifyContent: "center",
      padding: 20, zIndex: 1000,
    }}>
      <div role="dialog" aria-modal="true" onClick={(e)=>e.stopPropagation()} style={{
        background: study.bg, color: study.ink,
        width: "min(640px, 92vw)", maxHeight: "85vh", overflowY: "auto",
        padding: "40px 36px", position: "relative",
      }}>
        <button onClick={onClose} aria-label="Close" style={{
          position: "absolute", top: 20, right: 20, background: "transparent",
          border: `1px solid ${study.ink}`, color: study.ink, width: 32, height: 32,
          borderRadius: "50%", cursor: "pointer", fontSize: 16, lineHeight: 1,
          fontFamily: "var(--font-mono)",
        }}>×</button>

        <div style={{ fontFamily: "var(--font-mono)", fontSize: 11, letterSpacing: "0.2em", textTransform: "uppercase", opacity: 0.8 }}>
          {study.vertical}
        </div>
        <div style={{ fontFamily: "var(--font-display)", fontWeight: 700, fontSize: 30, lineHeight: 1.15, letterSpacing: "-0.01em", marginTop: 12, marginBottom: 22, maxWidth: "90%" }}>
          {study.headline}
        </div>

        <div style={{ fontFamily: "var(--font-body)", fontSize: 14, lineHeight: 1.6, opacity: 0.92, marginBottom: 10 }}>
          <strong>Client:</strong> {study.client}
        </div>
        <div style={{ fontFamily: "var(--font-body)", fontSize: 14, lineHeight: 1.6, opacity: 0.92, marginBottom: 10 }}>
          <strong>Problem:</strong> {study.problem}
        </div>
        <div style={{ fontFamily: "var(--font-body)", fontSize: 14, lineHeight: 1.6, opacity: 0.92, marginBottom: 20 }}>
          <strong>What I built:</strong> {study.built}
        </div>

        <div style={{ fontFamily: "var(--font-mono)", fontSize: 10, letterSpacing: "0.2em", textTransform: "uppercase", opacity: 0.7, marginBottom: 8 }}>
          THE TRANSFORMATION
        </div>
        <div style={{ display: "flex", flexDirection: "column", gap: 6, marginBottom: study.quote ? 20 : 0 }}>
          {study.results.map(r => (
            <div key={r} style={{ fontFamily: "var(--font-body)", fontSize: 14, lineHeight: 1.5 }}>• {r}</div>
          ))}
        </div>

        {study.quote && (
          <div style={{ fontFamily: "var(--font-display)", fontWeight: 700, fontSize: 16, fontStyle: "italic", lineHeight: 1.4 }}>
            "{study.quote}"
          </div>
        )}
      </div>
    </div>,
    document.body
  );
}

function CourseLetterpress() {
  const [openIndex, setOpenIndex] = React.useState(null);
  return (
    <ColorBlock bg="#FBF6EF" grain={false}>
      <div className="pov-shell" style={{ maxWidth: 1240, margin: "0 auto", padding: "80px 32px" }}>
        <div style={{
          display: "flex", justifyContent: "space-between", alignItems: "flex-end",
          borderBottom: "1px solid #1A1714", paddingBottom: 22, marginBottom: 30,
        }}>
          <div>
            <Eyebrow color="#DD6B3A" style={{ marginBottom: 6 }}>SECTION E · CASE STUDIES</Eyebrow>
            <Headline size={72} color="#1A1714" className="pov-course-headline" style={{ letterSpacing: "-0.02em" }}>
              What this looks like,<br/>in <em>practice</em>.
            </Headline>
          </div>
        </div>

        <div className="pov-course-grid" style={{ display: "grid", gridTemplateColumns: "repeat(2, 1fr)", gap: 28 }}>
          {CASE_STUDIES.map((c, i) => (
            <div key={c.vertical} id={`case-study-0${i+1}`} className="pov-course-card" onClick={()=>setOpenIndex(i)} style={{
              background: c.bg, color: c.ink, padding: "30px 28px",
              display: "flex", flexDirection: "column",
              position: "relative", cursor: "pointer",
            }}>
              <div style={{ fontFamily: "var(--font-mono)", fontSize: 11, letterSpacing: "0.2em", textTransform: "uppercase", opacity: 0.8 }}>
                CASE STUDY 0{i+1} · {c.vertical}
              </div>
              <div style={{ fontFamily: "var(--font-display)", fontWeight: 700, fontSize: 25, lineHeight: 1.2, letterSpacing: "-0.005em", marginTop: 12 }}>
                {c.headline}
              </div>

              <div style={{ marginTop: "auto", paddingTop: 24 }}>
                <div style={{ fontFamily: "var(--font-mono)", fontSize: 10, letterSpacing: "0.2em", textTransform: "uppercase", opacity: 0.7, marginBottom: 6 }}>
                  THE HEADLINE RESULT
                </div>
                <div style={{ fontFamily: "var(--font-display)", fontWeight: 700, fontSize: 17, lineHeight: 1.3, marginBottom: 18 }}>
                  {c.results[0]}
                </div>
                <div style={{ fontFamily: "var(--font-mono)", fontSize: 11, letterSpacing: "0.18em", textTransform: "uppercase", opacity: 0.85 }}>
                  Read the full case study ›
                </div>
              </div>
            </div>
          ))}
        </div>
      </div>

      {openIndex !== null && <CaseStudyModal study={CASE_STUDIES[openIndex]} onClose={()=>setOpenIndex(null)} />}
    </ColorBlock>
  );
}

Object.assign(window, { CourseLetterpress });