/* global React */

/* Featured Blanco card spans full width; the other three sit beneath it. */

const CASES_OTHER = [
  {
    client: "Franke",
    sector: "Lifestyle",
    title: "Restoring brand control across regional e‑commerce.",
    sub: "Built and rolled out Franke's Shopify and Lazada presence across three Southeast Asian markets — optimising workflows between Franke and its regional distributors.",
    media: "assets/case-franke-full.png",
    bg: "#ED1C24",
    tags: ["Strategy", "Implementation"],
    res: [
      { n: "+40%", l: "Pageviews" },
      { n: "+33%", l: "Purchase Intent" },
      { n: "+38%", l: "Revenue" },
    ],
  },
  {
    client: "Onyx",
    sector: "Kitchenware",
    title: "From invisible to #1 on Tokopedia.",
    sub: "Rebuilt Onyx's product content across Tokopedia and Shopee Indonesia — identifying the purchase attributes Indonesian buyers actually search for, and optimising listings to win Page 1 visibility in a crowded melamine category.",
    media: "assets/case-onyx-search-rank.png",
    bg: "#1B2A78",
    tags: ["Strategy", "Implementation"],
    res: [
      { n: "Page 1", l: "Organic Ranking", ink: true },
      { n: "+279%", l: "Purchase Intent" },
      { n: "+292%", l: "Product Views" },
      { n: "+182%", l: "Revenue" },
    ],
  },
  {
    client: "German Association",
    sector: "Trade Body",
    title: "Turning a community website into a conversion engine.",
    sub: "We rebuilt the user journey for German Association Singapore — clarifying value proposition, simplifying the sign-up flow, and aligning the digital presence with the organisation's role in the community. Result: more new users, deeper engagement, and a measurable lift in event registrations.",
    media: "assets/case-ga-hero.png",
    bg: "#FFC227",
    tags: ["Strategy", "Implementation"],
    res: [
      { n: "+15%", l: "Conversion" },
      { n: "+25%", l: "Active Users" },
      { n: "+27%", l: "New Users" },
      { n: "+13%", l: "Engagement Time" },
    ],
  },
];

function Cases() {
  return (
    <section className="section section--cloud" id="works" data-screen-label="05 Cases">
      <div className="shell">
        <div className="cases__head">
          <div>
            <div className="eyebrow">Our Works</div>
            <h2>Built, launched, <span className="accent">and operated</span>.</h2>
          </div>
          <p className="sub">
            Selected engagements across lifestyle, kitchenware and trade — from one-off builds to embedded daily operations.
          </p>
        </div>

        <div className="cases__grid">
          {/* Featured: Blanco */}
          <article className="case-card case-card--feature">
            <div className="case-card__layout">
              <div
                className="case-card__media"
                style={{
                  backgroundColor: "#2A1F8C",
                  backgroundImage: "url(assets/case-blanco-storefront.png)",
                  backgroundSize: "cover",
                  backgroundPosition: "top center",
                }}
              >
                <span className="case-card__sector">Featured engagement · Kitchenware</span>
              </div>
              <div className="case-card__body">
                <div className="case-card__client" style={{ color: "var(--omasu-violet)" }}>BLANCO</div>
                <h3 className="case-card__title">
                  Embedded e‑commerce team for an international brand.
                </h3>
                <p className="case-card__sub">
                  We run Blanco's full Lazada operation in Singapore — listings, content, customer service, promotions, and weekly optimisation. Every day, every order, every rank position — owned end-to-end.
                </p>
                <div className="case-card__tags">
                  <span>Strategy</span><span>Implementation</span><span>Operations</span>
                </div>
                <div className="case-card__foot">
                  <div className="res">
                    <div className="n ink">80+</div>
                    <div className="l">Variants Live</div>
                  </div>
                  <div className="res">
                    <div className="n">100%</div>
                    <div className="l">Above Content Threshold</div>
                  </div>
                  <div className="res">
                    <div className="n">100%</div>
                    <div className="l">Fast Fulfilment</div>
                  </div>
                  <div className="res">
                    <div className="n">0 / 12</div>
                    <div className="l">NCP Score</div>
                  </div>
                </div>
              </div>
            </div>
          </article>

          {/* Three smaller cards */}
          {CASES_OTHER.map((c, i) => (
            <article
              className={"case-card" + (c.placeholder ? " case-card--placeholder" : "")}
              key={i}
            >
              {c.placeholder ? (
                <div className="case-card__media">
                  <span className="case-card__sector">{c.sector}</span>
                </div>
              ) : (
                <div
                  className="case-card__media"
                  style={{
                    backgroundColor: c.bg,
                    backgroundImage: `url(${c.media})`,
                  }}
                >
                  <span className="case-card__sector">{c.sector}</span>
                </div>
              )}
              <div className="case-card__body">
                <div className="case-card__client">{c.client}</div>
                <h3 className="case-card__title">{c.title}</h3>
                <p className="case-card__sub">{c.sub}</p>
                <div className="case-card__tags">
                  {c.tags.map(t => <span key={t}>{t}</span>)}
                </div>
                <div className="case-card__foot">
                  {c.res.map((r, j) => (
                    <div key={j} className="res">
                      <div className={"n" + (r.ink ? " ink" : "")}>{r.n}</div>
                      <div className="l">{r.l}</div>
                    </div>
                  ))}
                </div>
              </div>
            </article>
          ))}
        </div>
      </div>
    </section>
  );
}

window.Cases = Cases;