/* Cases — industry case studies with screenshot placeholders */

const CASES = [
  {
    n: "01",
    industry: "Restaurants & Hospitality",
    italic: "from menu to maître d'",
    project: "Menu Collection",
    location: "Multi-format · live",
    desc: "Menu systems, online ordering, and identity. A restaurant that reads as one coherent garden, paper to web.",
    bullets: ["Print + digital menus", "Online ordering", "Reservations", "Identity"],
    href: "https://eth3r.studio/food-photography",
    tone: "warm",
    bot: "berries",
    img: "img/case-restaurants.webp",
  },
  {
    n: "02",
    industry: "Fitness & Gyms",
    italic: "studio, schedule, signage",
    project: "TNT Fitness Studio",
    location: "Duluth, GA · live",
    desc: "Studio site, class and membership systems, brand identity. Reads right in print, on the web, on the gym wall.",
    bullets: ["Studio site", "Class & membership", "Lead capture", "Identity"],
    href: "/tnt/v1/",
    tone: "cool",
    bot: "fern",
    img: "img/case-fitness.webp",
  },
  {
    n: "03",
    industry: "Apparel & Retail",
    italic: "shopify, wholesale, B2B",
    project: "Apparel Storefront",
    location: "Shopify · demo",
    desc: "Shopify and custom e-commerce. Built so adding products and wholesale accounts doesn't crack the storefront.",
    bullets: ["Shopify build", "Product systems", "B2B / wholesale", "Identity"],
    href: "/apparel/",
    tone: "warm",
    bot: "flower",
    img: "img/case-apparel.webp",
  },
  {
    n: "04",
    industry: "Operational Automation",
    italic: "inventory, control planes",
    project: "CORTEX + Stockroom",
    location: "Two systems · live + demo",
    desc: "Inventory operating systems, internal tooling, control planes. The software that runs the business behind the counter.",
    bullets: ["Inventory OS", "Internal tools", "Automation", "Control planes"],
    href: "/stockroom/",
    tone: "cool",
    bot: "seedhead",
    img: "img/case-automation.webp",
  },
];

const CaseRow = ({ c, i }) => {
  return (
    <article
      className="case reveal"
      style={{
        "--reveal-delay": "60ms",
      }}
    >
      {/* Left column — copy */}
      <div style={{ display: "flex", flexDirection: "column", gap: 18 }}>
        <div className="mono" style={{ display: "flex", alignItems: "center", gap: 14, color: "var(--ink-mute)" }}>
          <span>/{c.n}</span>
          <span style={{ width: 24, height: 1, background: "var(--line-2)" }} />
          <span style={{ color: "var(--moss)", textTransform: "uppercase", letterSpacing: "0.1em", fontSize: 11 }}>
            {c.location}
          </span>
        </div>

        <h3 className="display" style={{ fontSize: "var(--t-h2)", lineHeight: 1 }}>
          {c.industry}
          <span style={{ display: "block", fontStyle: "italic", color: "var(--moss)", fontSize: "0.52em", marginTop: 6, letterSpacing: "-0.01em" }}>
            / {c.italic}
          </span>
        </h3>

        <p style={{ color: "var(--ink-soft)", fontSize: "var(--t-body)", lineHeight: 1.55, maxWidth: "44ch" }}>
          {c.desc}
        </p>

        <ul style={{ listStyle: "none", padding: 0, margin: "8px 0 0 0", display: "flex", flexWrap: "wrap", gap: 6 }}>
          {c.bullets.map((b) => (
            <li
              key={b}
              className="mono"
              style={{
                fontSize: 11,
                letterSpacing: "0.06em",
                textTransform: "uppercase",
                border: "1px solid var(--line-2)",
                borderRadius: 999,
                padding: "5px 10px",
                color: "var(--ink-mute)",
              }}
            >
              {b}
            </li>
          ))}
        </ul>

        <div style={{ marginTop: 12 }}>
          <a
            href={c.href}
            target="_blank"
            rel="noopener"
            className="mono"
            style={{
              display: "inline-flex",
              alignItems: "center",
              gap: 10,
              fontSize: 12,
              letterSpacing: "0.1em",
              textTransform: "uppercase",
              color: "var(--ink)",
              textDecoration: "none",
              borderBottom: "1px solid var(--ink)",
              paddingBottom: 4,
            }}
          >
            View case · {c.project} <span>↗</span>
          </a>
        </div>
      </div>

      {/* Right column — screenshot */}
      <div style={{ position: "relative" }}>
        <div
          className="img-slot lift img-slot--filled"
          style={{
            aspectRatio: "16/11",
            border: "1px solid var(--line-2)",
            padding: 0,
            overflow: "hidden",
            position: "relative",
          }}
        >
          {c.img ? (
            <img
              src={c.img}
              alt={c.project + ' — ' + c.industry}
              loading="lazy"
              decoding="async"
              style={{ position: "absolute", inset: 0, width: "100%", height: "100%", objectFit: "cover", display: "block" }}
            />
          ) : (
            <span>// screenshot · {c.project.toLowerCase()}</span>
          )}
          <span className="ratio-tag">16 : 11</span>

          {/* botanical mark in corner */}
          <div
            style={{
              position: "absolute",
              top: 16,
              right: 16,
              color: "var(--moss)",
              opacity: 0.5,
            }}
          >
            <Botanical kind={c.bot} size={56} stroke={1.1} />
          </div>

          {/* faux URL bar */}
          <div
            className="mono"
            style={{
              position: "absolute",
              top: 16,
              left: 16,
              background: "var(--paper)",
              border: "1px solid var(--line-2)",
              padding: "5px 10px",
              borderRadius: 999,
              fontSize: 10,
              letterSpacing: "0.04em",
              color: "var(--ink-mute)",
              display: "flex",
              alignItems: "center",
              gap: 6,
            }}
          >
            <span style={{ width: 6, height: 6, borderRadius: "50%", background: "var(--moss)" }} />
            {c.href.replace(/^https?:\/\//, "")}
          </div>
        </div>

        <div
          className="mono"
          style={{
            marginTop: 12,
            display: "flex",
            justifyContent: "space-between",
            color: "var(--ink-mute)",
            fontSize: 11,
            letterSpacing: "0.08em",
            textTransform: "uppercase",
          }}
        >
          <span>{c.project}</span>
          <span>{c.location}</span>
        </div>
      </div>
    </article>
  );
};

const Cases = () => {
  return (
    <section id="industries" className="section" style={{ background: "var(--paper-2)" }}>
      <div className="reveal label" style={{ marginBottom: 16 }}>// 03 · what's already in season</div>

      <div style={{ display: "grid", gridTemplateColumns: "1.6fr 1fr", gap: 48, alignItems: "end", marginBottom: "clamp(48px, 6vw, 80px)" }}>
        <h2 className="reveal display" style={{ fontSize: "var(--t-h1)", maxWidth: "18ch", "--reveal-delay": "100ms" }}>
          Built for four
          <br />
          kinds of <span style={{ fontStyle: "italic", color: "var(--moss)" }}>business</span>
          <span style={{ color: "var(--accent)" }}>.</span>
        </h2>
        <p className="reveal" style={{ color: "var(--ink-soft)", fontSize: "var(--t-h3)", lineHeight: 1.45, "--reveal-delay": "200ms" }}>
          Not one-off websites. Whole systems, with proof you can click on.
        </p>
      </div>

      <div>
        {CASES.map((c, i) => <CaseRow key={c.n} c={c} i={i} />)}
      </div>
    </section>
  );
};

window.Cases = Cases;