// Proven Results — full-bleed image-first tile grid, no gaps

const Results = () => {
  const cases = [
    { brand: "Soylent", slug: "soylent", industry: "Beverages", did: "Brand strategy, creative development, experiential, media planning", stat: "+36%", statLabel: "Site traffic lift", tone: "#0B5FFF", image: "assets/work-soylent.png" },
    { brand: "G FUEL", slug: "gfuel", industry: "Beverages", did: "Brand strategy, creative production, project management", stat: "Millions", statLabel: "Video views across the campaign", tone: "#0A0A0F", image: "assets/work-gfuel.jpg" },
    { brand: "AeroVironment", slug: "aerovironment", industry: "Aerospace", did: "Brand strategy, creative development, creative production", stat: "Exceeded", statLabel: "Recruitment goals", tone: "#1AA5F5", image: "assets/work-aerovironment.jpg" },
    { brand: "Archer", slug: "archer", industry: "CPG", did: "Media planning & buying, media strategy, analytics", stat: "1st", statLabel: "First-to-market CTV Pause Ad campaign", tone: "#0A0A0F", image: "assets/work-archer.png" },
    { brand: "Chicken of the Sea", slug: "chickenofthesea", industry: "CPG", did: "Media strategy, media planning & buying, analytics", stat: "Growth", statLabel: "Category growth outpacing competitors", tone: "#1AA5F5", image: "assets/work-chickenofthesea.webp" },
    { brand: "Sacred Heart University", slug: "shu", industry: "Higher Education", did: "Brand strategy, creative development, media planning, analytics", stat: "65%", statLabel: "Grad-program conversions from paid media", tone: "#0B5FFF", image: "assets/work-shu.png" },
  ];
  const moreCases = [
    { brand: "KeVita", slug: "kevita", industry: "Probiotic Beverages", did: "Brand strategy, creative dev, retail + experiential — scaled and sold to PepsiCo", stat: "+428%", statLabel: "Traffic to the store locator", tone: "#1AA5F5", image: "assets/work-kevita.jpg", imagePosition: "left center" },
    { brand: "Razer", slug: "razer", industry: "Consumer Electronics", did: "Strategy, creative development, creative production, paid media", stat: "Millions", statLabel: "Video views in the first two weeks of launch", tone: "#0A0A0F", image: "assets/work-razer.jpg" },
    { brand: "ZICO", slug: "zico", industry: "Beverages", did: "Strategy, creative dev, production, paid media, experiential", stat: "3×", statLabel: "Sales tripled in half the anticipated time", tone: "#1AA5F5", image: "https://www.ignitedusa.com/wp-content/uploads/2022/09/zico.jpg" },
    { brand: "PLDT", slug: "pldt", industry: "Telecom", did: "Strategy, creative development, creative production, experiential marketing", stat: "1,500", statLabel: "Leaders united at the Manila relaunch", tone: "#0B5FFF", image: "https://www.ignitedusa.com/wp-content/uploads/2018/09/PLDT.jpg" },
    { brand: "Universal Pictures", slug: "universal", industry: "Entertainment", did: "Influencer strategy, paid media", stat: "+311%", statLabel: "Opening weekend vs. the top-10 films’ average", tone: "#0A0A0F", image: "https://www.ignitedusa.com/wp-content/uploads/2018/09/universal.jpg" },
  ];
  const [showMore, setShowMore] = React.useState(false);
  const visibleCases = showMore ? [...cases, ...moreCases] : cases;
  return (
    <section id="case-studies" className="r-results" style={{ background: "var(--paper-2)", paddingTop: 140 }}>
      <div className="container">
        <div className="r-section-head" style={{ display: "flex", justifyContent: "space-between", alignItems: "baseline", marginBottom: 24 }}>
          <SectionEyebrow index="(05)" label={copyText("home.results.eyebrow")} />
          <div className="mono" style={{ color: "var(--muted)" }}>{String(visibleCases.length).padStart(2, "0")} of 400+ campaigns delivered</div>
        </div>

        <h2 className="display r-h2-display" style={{ fontSize: "clamp(40px, 5.6vw, 96px)", margin: 0, letterSpacing: "-0.035em", lineHeight: 0.95, position: "relative" }}>
          {copyText("home.results.headline_line1")}
          <br/>
          <span style={{ fontStyle: "italic", fontWeight: 500, color: "var(--blue)" }}>{copyText("home.results.headline_accent")}</span>
        </h2>

        <p style={{ marginTop: 24, marginBottom: 0, maxWidth: 620, fontSize: 17, lineHeight: 1.5, color: "var(--ink)", letterSpacing: "-0.005em" }}>
          {copyText("home.results.intro")}
        </p>
      </div>

      {/* Full-bleed grid, no gaps */}
      <div className="r-grid-results" style={{
        marginTop: 80,
        display: "grid",
        gridTemplateColumns: "repeat(3, 1fr)",
        gap: 0,
        borderTop: "1px solid var(--ink)",
      }}>
        {visibleCases.map((c, i) => <CaseCard key={c.brand} {...c} index={i} total={visibleCases.length} isNew={showMore && i >= cases.length} />)}
      </div>

      <div style={{ padding: "64px 0 140px", display: "flex", justifyContent: "center" }}>
        {!showMore ? (
          <PillButton variant="dark" size="lg" onClick={() => setShowMore(true)}>
            Load more case studies <ArrowRight size={14} />
          </PillButton>
        ) : (
          <div className="mono" style={{ color: "var(--muted)" }}>End of feed · {visibleCases.length} of 400+ campaigns shown</div>
        )}
      </div>
    </section>
  );
};

const CaseCard = ({ brand, slug, industry, did, stat, statLabel, tone, image, imagePosition, index, total, isNew }) => {
  const [hover, setHover] = React.useState(false);
  const isRightCol = (index + 1) % 3 === 0;
  const isLastRow = index >= total - (total % 3 === 0 ? 3 : total % 3);
  const Tag = slug ? "a" : "article";
  const linkProps = slug ? { href: `Subpages.html#case/${slug}` } : {};
  return (
    <Tag
      {...linkProps}
      onMouseEnter={() => setHover(true)}
      onMouseLeave={() => setHover(false)}
      style={{
        background: "var(--ink)",
        color: "white",
        position: "relative",
        cursor: "pointer",
        textDecoration: "none",
        overflow: "hidden",
        borderRight: isRightCol ? "none" : "1px solid var(--rule-on-dark)",
        borderBottom: isLastRow ? "none" : "1px solid var(--rule-on-dark)",
        aspectRatio: "4/5",
        display: "flex",
        flexDirection: "column",
        animation: isNew ? "r-fade-in-up .55s ease both" : "none",
      }}
    >
      {/* Full-bleed image */}
      <div style={{
        position: "absolute",
        inset: 0,
        background: tone,
        backgroundImage: image ? `url(${image})` : `repeating-linear-gradient(135deg, transparent 0 14px, rgba(255,255,255,0.06) 14px 15px)`,
        backgroundSize: "cover",
        backgroundPosition: imagePosition || "center",
        transition: "transform .6s ease",
        transform: hover ? "scale(1.04)" : "scale(1)",
      }}>
        {!image && (
          <div className="mono" style={{
            position: "absolute", inset: 0,
            display: "grid", placeItems: "center",
            color: "rgba(255,255,255,0.4)", fontSize: 11,
          }}>[ {brand} HERO ]</div>
        )}
      </div>

      {/* Top meta */}
      <div style={{
        position: "relative", zIndex: 2,
        display: "flex", justifyContent: "space-between", alignItems: "center",
        padding: "20px 24px",
      }}>
        <span className="mono" style={{ color: "rgba(255,255,255,0.85)" }}>CS / {String(index + 1).padStart(2, "0")}</span>
        <span className="mono" style={{ color: "rgba(255,255,255,0.85)" }}>{industry}</span>
      </div>

      {/* Bottom content */}
      <div style={{
        position: "relative", zIndex: 2,
        marginTop: "auto",
        padding: "24px 24px 24px",
        background: "linear-gradient(to top, rgba(10,10,15,0.85) 30%, rgba(10,10,15,0) 100%)",
      }}>
        <div className="display" style={{ fontSize: "clamp(26px, 2.4vw, 38px)", fontWeight: 700, letterSpacing: "-0.025em", lineHeight: 1, textTransform: "uppercase", textWrap: "balance" }}>
          {brand}
        </div>
        <div style={{ fontSize: 13, lineHeight: 1.5, color: "rgba(255,255,255,0.7)", marginTop: 8, maxWidth: 360, height: "39px", display: "-webkit-box", WebkitLineClamp: 2, WebkitBoxOrient: "vertical", overflow: "hidden" }}>{did}</div>

        <div style={{
          display: "flex", alignItems: "center", gap: 18,
          marginTop: 22, paddingTop: 16, borderTop: "1px solid rgba(255,255,255,0.18)",
        }}>
          <div className="display" style={{ fontSize: "clamp(28px, 2.6vw, 42px)", fontWeight: 700, letterSpacing: "-0.03em", color: "white", lineHeight: 1, flexShrink: 0 }}>{stat}</div>
          <div style={{ fontSize: 12.5, lineHeight: 1.35, color: "rgba(255,255,255,0.78)", letterSpacing: "-0.005em", textWrap: "pretty" }}>{statLabel}</div>
          <span style={{ flexShrink: 0, marginLeft: "auto", color: "white", transform: hover ? "translate(2px, -2px)" : "none", transition: "transform .2s ease" }}>
            <ArrowUpRight size={18} />
          </span>
        </div>
      </div>
    </Tag>
  );
};

window.Results = Results;