const { useState } = React;

const INK = "#1d1d1f";
const MUTED = "#6e6e73";
const ACCENT = "#0071e3";
const SF =
  '"Avenir Next", -apple-system, BlinkMacSystemFont, "SF Pro Text", "SF Pro Display", "Helvetica Neue", Helvetica, Arial, sans-serif';

function TileIcon({ tileKey }) {
  const box = { width: 28, height: 28, display: "block", flexShrink: 0 };
  if (tileKey === "nimbus") {
    return (
      <svg style={box} viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg" aria-hidden>
        <path
          d="M18 10h-1.26A8 8 0 1 0 9 20h9a5 5 0 0 0 0-10Z"
          stroke={INK}
          strokeWidth="1.35"
          strokeLinejoin="round"
        />
      </svg>
    );
  }
  if (tileKey === "penni") {
    return (
      <svg style={box} viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg" aria-hidden>
        <path
          d="M5 10c0-3.5 3-6 7-6s7 2.5 7 6v9H5V10Z"
          stroke={INK}
          strokeWidth="1.35"
          strokeLinejoin="round"
        />
        <path d="M12 4V2.5M9 4V3M15 4V3" stroke={INK} strokeWidth="1.2" strokeLinecap="round" />
        <path d="M10 14h4" stroke={INK} strokeWidth="1.35" strokeLinecap="round" />
        <circle cx="9.5" cy="12" r="0.75" fill={INK} />
        <circle cx="14.5" cy="12" r="0.75" fill={INK} />
      </svg>
    );
  }
  if (tileKey === "grab") {
    return (
      <svg style={box} viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg" aria-hidden>
        <path
          d="M7 17V10c0-1.8 1.4-3.2 3.2-3.2h3.6C15.6 6.8 17 8.2 17 10v7"
          stroke={INK}
          strokeWidth="1.35"
          strokeLinecap="round"
          strokeLinejoin="round"
        />
        <path d="M6 17h12" stroke={INK} strokeWidth="1.35" strokeLinecap="round" />
        <path d="M9 10h6" stroke={INK} strokeWidth="1.15" strokeLinecap="round" opacity="0.35" />
        <path d="M10 6.5 11 4h2l1 2.5" stroke={INK} strokeWidth="1.2" strokeLinecap="round" strokeLinejoin="round" />
        <path d="M8 17 6.5 19M16 17l1.5 2" stroke={INK} strokeWidth="1.2" strokeLinecap="round" opacity="0.45" />
      </svg>
    );
  }
  if (tileKey === "google") {
    return (
      <svg style={{ ...box, transform: "scale(0.92)" }} viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg" aria-hidden>
        <path fill="#4285F4" d="M22.56 12.25c0-.78-.07-1.53-.2-2.25H12v4.26h5.92c-.26 1.37-1.04 2.53-2.21 3.31v2.77h3.57c2.08-1.92 3.28-4.74 3.28-8.09z" />
        <path fill="#34A853" d="M12 23c2.97 0 5.46-.98 7.28-2.66l-3.57-2.77c-.98.66-2.23 1.06-3.71 1.06-2.86 0-5.29-1.93-6.16-4.53H2.18v2.84C3.99 20.53 7.7 23 12 23z" />
        <path fill="#FBBC05" d="M5.84 14.09c-.22-.66-.35-1.36-.35-2.09s.13-1.43.35-2.09V7.07H2.18C1.43 8.55 1 10.22 1 12s.43 3.45 1.18 4.93l2.85-2.22.81-.62z" />
        <path fill="#EA4335" d="M12 5.38c1.62 0 3.06.56 4.21 1.64l3.15-3.15C17.45 2.09 14.97 1 12 1 7.7 1 3.99 3.47 2.18 7.07l3.66 2.84c.87-2.6 3.3-4.53 6.16-4.53z" />
      </svg>
    );
  }
  return null;
}

function ProjectTile({
  projectLink = "#",
  tileKey = null,
  companyLogo = null,
  companyName = "Company",
  headline = "Headline",
  pillSubline = null,
  heroGifUrl = null,
  heroWide = false,
  gifUrl = null,
  backgroundColor = "rgba(232,236,242,0.35)",
  inProgress = false,
  /** Subtle frosted hero when linked tile is unavailable (e.g. capstone preview) — no “In progress” badge. */
  heroSoftGlass = false,
  locked = false,
  lockCaption = null,
  hoverCaption = null,
  showGoogleLogo = false,
  heroObjectPosition = null,
}) {
  const [hovered, setHovered] = useState(false);
  const hasLink = projectLink != null && String(projectLink).trim() !== "";
  const showIcon = tileKey && !companyLogo && !heroGifUrl;
  const lockLines = lockCaption ? String(lockCaption).trim().split(/\n+/).map((s) => s.trim()) : [];
  const lockTitleLine = (lockLines[0] || "").trim();
  const lockBodyText = lockLines.slice(1).join("\n").trim();
  const showLockCaption = Boolean(lockCaption);
  const showProgressBadge = inProgress;
  const isLocked = Boolean(inProgress || locked);
  const showHeroGlass = Boolean((inProgress || heroSoftGlass) && heroGifUrl);
  const heroGlassIsSoft = Boolean(heroSoftGlass && heroGifUrl && !inProgress);
  const captionText =
    hoverCaption != null && String(hoverCaption).trim() !== ""
      ? String(hoverCaption).trim()
      : isLocked && lockBodyText
        ? lockBodyText
        : headline;

  const wrapClass =
    "work-tile" +
    (isLocked || !hasLink ? " work-tile--locked" : "") +
    (inProgress && heroGifUrl ? " work-tile--progress-frost" : "") +
    (heroGlassIsSoft ? " work-tile--hero-glass-soft" : "");

  const cardFace = (
    <React.Fragment>
      <div className="work-tile-tint" aria-hidden="true" />
      {heroGifUrl ? (
        <div className={"work-tile-hero-wrap" + (heroWide ? " work-tile-hero-wrap--wide" : "")}>
          <div className={"work-tile-hero-crop" + (heroWide ? " work-tile-hero-crop--wide" : "")}>
            <img
              src={heroGifUrl}
              alt=""
              width={heroWide ? "1440" : "750"}
              height={heroWide ? "810" : "1334"}
              decoding="async"
              loading="lazy"
              style={heroObjectPosition ? { objectPosition: heroObjectPosition } : undefined}
            />
          </div>
        </div>
      ) : (
        <div className="work-tile-orb-wrap">
          <div className="work-tile-orb">
            <div className="work-tile-orb-inner">
              {companyLogo ? (
                <img src={companyLogo} alt="" style={{ width: 32, height: 32, objectFit: "contain", borderRadius: 8 }} />
              ) : showIcon ? (
                <TileIcon tileKey={tileKey} />
              ) : (
                <span style={{ fontFamily: SF, fontSize: 15, fontWeight: 600, color: INK }}>{companyName.charAt(0)}</span>
              )}
            </div>
          </div>
        </div>
      )}
      {showHeroGlass ? (
        <div
          className={"work-tile-frost-scrim" + (heroGlassIsSoft ? " work-tile-frost-scrim--soft" : "")}
          aria-hidden="true"
        />
      ) : null}
      <div className="work-tile-pill">
        {showGoogleLogo ? (
          <div className="work-tile-pill-head">
            <span className="work-tile-pill-google" aria-hidden="true">
              <TileIcon tileKey="google" />
            </span>
            <span className="work-tile-pill-title">{companyName}</span>
          </div>
        ) : (
          <span className="work-tile-pill-title">{companyName}</span>
        )}
        <span className="work-tile-pill-desc">{pillSubline || headline}</span>
        {showProgressBadge ? <span className="work-tile-pill-badge">In progress</span> : null}
      </div>
      {showLockCaption ? (
        <div className="work-tile-lock-overlay">
          {lockTitleLine ? <p className="work-tile-lock-kicker">{lockTitleLine}</p> : null}
          {lockBodyText ? <p className="work-tile-lock-body">{lockBodyText}</p> : null}
        </div>
      ) : null}
      {gifUrl && !isLocked ? (
        <img
          src={gifUrl}
          alt=""
          className="work-tile-gif"
          style={{
            opacity: hovered ? 0.14 : 0,
          }}
        />
      ) : null}
    </React.Fragment>
  );

  return (
    <React.Fragment>
      <style>{`
        .work-tile-cell {
          display: flex;
          flex-direction: column;
          align-items: stretch;
          min-width: 0;
        }
        .work-tile {
          position: relative;
          border-radius: clamp(22px, 2.2vw, 28px);
          overflow: hidden;
          border: 1px solid rgba(255, 255, 255, 0.65);
          background: linear-gradient(
            158deg,
            rgba(255, 255, 255, 0.42) 0%,
            rgba(255, 255, 255, 0.16) 45%,
            rgba(255, 255, 255, 0.07) 100%
          );
          backdrop-filter: blur(44px) saturate(185%);
          -webkit-backdrop-filter: blur(44px) saturate(185%);
          box-shadow:
            0 1px 0 rgba(255, 255, 255, 0.85) inset,
            0 1px 1px rgba(255, 255, 255, 0.35) inset,
            0 14px 42px rgba(20, 45, 62, 0.07),
            0 2px 12px rgba(0, 0, 0, 0.04);
          cursor: pointer;
          text-decoration: none;
          display: block;
          min-height: clamp(280px, 36vw, 360px);
          box-sizing: border-box;
          color: inherit;
          transition:
            transform 0.48s cubic-bezier(0.34, 1.25, 0.64, 1),
            box-shadow 0.45s cubic-bezier(0.25, 0.1, 0.25, 1),
            border-color 0.32s cubic-bezier(0.25, 0.1, 0.25, 1);
        }
        .work-tile-wrap:hover .work-tile,
        .work-tile-wrap:focus-within .work-tile {
          transform: translateY(-6px) scale(1.01);
          box-shadow:
            0 1px 0 rgba(255, 255, 255, 0.95) inset,
            0 1px 2px rgba(255, 255, 255, 0.45) inset,
            0 22px 56px rgba(20, 50, 70, 0.1),
            0 8px 22px rgba(0, 0, 0, 0.06);
          border-color: rgba(255, 255, 255, 0.88);
        }
        .work-tile:focus-visible {
          outline: 2px solid ${ACCENT};
          outline-offset: 4px;
        }
        .work-tile--locked {
          cursor: default;
        }
        .work-tile--progress-frost .work-tile-hero-crop img {
          filter: blur(3px);
          transform: scale(1.04);
          transition: filter 0.35s ease, transform 0.45s cubic-bezier(0.34, 1.25, 0.64, 1);
        }
        .work-tile-frost-scrim {
          position: absolute;
          inset: 0;
          z-index: 2;
          pointer-events: none;
          border-radius: 28px;
          background: rgba(252, 252, 254, 0.42);
          backdrop-filter: blur(16px) saturate(165%);
          -webkit-backdrop-filter: blur(16px) saturate(165%);
          box-shadow:
            inset 0 1px 0 rgba(255, 255, 255, 0.72),
            inset 0 0 0 1px rgba(255, 255, 255, 0.38);
        }
        .work-tile-wrap:hover .work-tile--progress-frost .work-tile-hero-crop img,
        .work-tile-wrap:focus-within .work-tile--progress-frost .work-tile-hero-crop img {
          filter: blur(2px);
          transform: scale(1.05);
        }
        .work-tile--hero-glass-soft .work-tile-hero-crop img {
          filter: blur(1px);
          transform: scale(1.02);
          transition: filter 0.35s ease, transform 0.45s cubic-bezier(0.34, 1.25, 0.64, 1);
        }
        .work-tile-frost-scrim--soft {
          background: rgba(255, 255, 255, 0.14);
          backdrop-filter: blur(5px) saturate(128%);
          -webkit-backdrop-filter: blur(5px) saturate(128%);
          box-shadow:
            inset 0 1px 0 rgba(255, 255, 255, 0.42),
            inset 0 0 0 1px rgba(255, 255, 255, 0.22);
        }
        .work-tile-wrap:hover .work-tile--hero-glass-soft .work-tile-hero-crop img,
        .work-tile-wrap:focus-within .work-tile--hero-glass-soft .work-tile-hero-crop img {
          filter: blur(0.5px);
          transform: scale(1.025);
        }
        .work-tile-wrap:hover .work-tile--locked,
        .work-tile-wrap:focus-within .work-tile--locked {
          transform: translateY(-3px);
        }
        .work-tile-tint {
          position: absolute;
          inset: 0;
          pointer-events: none;
          opacity: 0.22;
          background: ${backgroundColor};
          mix-blend-mode: overlay;
        }
        .work-tile-hero-wrap {
          position: absolute;
          inset: 0;
          display: flex;
          align-items: flex-start;
          justify-content: stretch;
          pointer-events: none;
          padding: 0 0 96px;
          z-index: 1;
        }
        .work-tile-hero-crop {
          width: 100%;
          max-width: none;
          align-self: stretch;
          aspect-ratio: 16 / 10;
          min-height: 0;
          border-radius: 0;
          overflow: hidden;
          background: rgba(12, 14, 18, 0.2);
          border: none;
          box-shadow: none;
          transition: transform 0.45s cubic-bezier(0.34, 1.25, 0.64, 1), box-shadow 0.4s ease;
        }
        .work-tile-hero-crop img {
          width: 100%;
          height: 100%;
          min-height: 0;
          max-height: none;
          object-fit: cover;
          object-position: center;
          display: block;
        }
        .work-tile-hero-wrap--wide {
          padding: 0 0 96px;
        }
        .work-tile-hero-crop--wide {
          width: 100%;
          max-width: none;
          aspect-ratio: 16 / 9;
          border-radius: 0;
          background: rgba(12, 14, 18, 0.2);
          border: none;
        }
        .work-tile-hero-crop--wide img {
          width: 100%;
          height: 100%;
          max-height: none;
          min-height: 0;
          object-fit: cover;
          object-position: center;
        }
        .work-tile-wrap:hover .work-tile-hero-crop,
        .work-tile-wrap:focus-within .work-tile-hero-crop {
          transform: scale(1.03);
          box-shadow:
            0 1px 0 rgba(255, 255, 255, 0.14) inset,
            0 18px 44px rgba(0, 0, 0, 0.14);
        }
        .work-tile-orb-wrap {
          position: absolute;
          inset: 0;
          display: flex;
          align-items: center;
          justify-content: center;
          pointer-events: none;
          padding: 56px 24px 88px;
        }
        .work-tile-orb {
          width: min(200px, 52%);
          aspect-ratio: 1;
          border-radius: 50%;
          display: flex;
          align-items: center;
          justify-content: center;
          background: linear-gradient(145deg, rgba(255,255,255,0.45) 0%, rgba(255,255,255,0.12) 55%, rgba(255,255,255,0.06) 100%);
          border: 1px solid rgba(255, 255, 255, 0.55);
          box-shadow:
            0 1px 0 rgba(255,255,255,0.75) inset,
            0 12px 40px rgba(20, 45, 62, 0.08),
            0 4px 12px rgba(0,0,0,0.05);
          backdrop-filter: blur(28px) saturate(170%);
          -webkit-backdrop-filter: blur(28px) saturate(170%);
          transition: transform 420ms cubic-bezier(0.25, 0.1, 0.25, 1), box-shadow 420ms ease;
        }
        .work-tile-wrap:hover .work-tile-orb,
        .work-tile-wrap:focus-within .work-tile-orb {
          transform: scale(1.04);
          box-shadow:
            0 1px 0 rgba(255,255,255,1) inset,
            0 18px 48px rgba(0,0,0,0.1),
            0 6px 16px rgba(0,0,0,0.05);
        }
        .work-tile-orb-inner {
          transform: scale(2.5);
          opacity: 0.92;
          filter: drop-shadow(0 1px 1px rgba(255,255,255,0.8));
        }
        .work-tile-pill {
          position: absolute;
          left: 18px;
          bottom: 18px;
          right: 18px;
          max-width: calc(100% - 36px);
          padding: 12px 16px 12px 14px;
          border-radius: 14px;
          background: rgba(255, 255, 255, 0.48);
          border: 1px solid rgba(255, 255, 255, 0.7);
          box-shadow:
            0 1px 0 rgba(255, 255, 255, 0.55) inset,
            0 2px 14px rgba(0, 0, 0, 0.06);
          backdrop-filter: blur(18px) saturate(165%);
          -webkit-backdrop-filter: blur(18px) saturate(165%);
          display: flex;
          flex-direction: column;
          align-items: flex-start;
          gap: 4px;
          z-index: 4;
          pointer-events: none;
        }
        .work-tile-pill-head {
          display: flex;
          align-items: center;
          gap: 8px;
          min-width: 0;
          width: 100%;
        }
        .work-tile-pill-google {
          flex-shrink: 0;
          display: flex;
          align-items: center;
          justify-content: center;
        }
        .work-tile-pill-google svg {
          width: 22px !important;
          height: 22px !important;
        }
        .work-tile-pill-title {
          font-family: ${SF};
          font-size: clamp(15px, 1.35vw, 18px);
          font-weight: 650;
          letter-spacing: -0.02em;
          color: ${INK};
          line-height: 1.2;
          min-width: 0;
        }
        .work-tile-pill-head .work-tile-pill-title {
          flex: 1;
        }
        .work-tile-pill-desc {
          font-family: ${SF};
          font-size: 13px;
          font-weight: 450;
          letter-spacing: -0.012em;
          color: ${MUTED};
          line-height: 1.35;
          display: -webkit-box;
          -webkit-line-clamp: 2;
          -webkit-box-orient: vertical;
          overflow: hidden;
        }
        .work-tile-pill-badge {
          margin-top: 2px;
          font-family: ${SF};
          font-size: 9px;
          font-weight: 600;
          letter-spacing: 0.05em;
          text-transform: uppercase;
          color: ${INK};
          opacity: 0.75;
        }
        .work-tile-lock-overlay {
          position: absolute;
          inset: 0;
          z-index: 5;
          padding: 22px;
          display: flex;
          flex-direction: column;
          justify-content: center;
          align-items: center;
          text-align: center;
          background: rgba(255,255,255,0.35);
          backdrop-filter: blur(6px);
          pointer-events: none;
        }
        .work-tile-lock-kicker {
          font-family: ${SF};
          font-size: 10px;
          font-weight: 600;
          letter-spacing: 0.07em;
          text-transform: uppercase;
          color: ${INK};
          margin: 0 0 8px;
        }
        .work-tile-lock-body {
          font-family: ${SF};
          font-size: 13px;
          font-weight: 400;
          line-height: 1.5;
          color: ${MUTED};
          margin: 0;
          max-width: 32ch;
        }
        .work-tile-gif {
          position: absolute;
          inset: 0;
          width: 100%;
          height: 100%;
          object-fit: cover;
          object-position: center;
          pointer-events: none;
          border-radius: 28px;
          transition: opacity 400ms ease;
          z-index: 1;
        }
        .work-tile-caption-slot {
          min-height: 3.25em;
          margin-top: 12px;
          padding: 0 4px;
        }
        .work-tile-caption {
          font-family: ${SF};
          font-size: var(--ds-text-caption, 15px);
          font-weight: 400;
          line-height: 1.45;
          letter-spacing: -0.016em;
          color: ${MUTED};
          margin: 0;
          opacity: 0;
          transform: translateY(-6px);
          transition:
            opacity 0.42s cubic-bezier(0.25, 0.1, 0.25, 1),
            transform 0.48s cubic-bezier(0.34, 1.25, 0.64, 1);
          pointer-events: none;
        }
        .work-tile-wrap:hover .work-tile-caption,
        .work-tile-wrap:focus-within .work-tile-caption {
          opacity: 1;
          transform: translateY(0);
        }
      `}</style>
      <div
        className="work-tile-wrap"
        onMouseEnter={() => setHovered(true)}
        onMouseLeave={() => setHovered(false)}
      >
        {!hasLink ? (
          <div
            className={wrapClass}
            role="group"
            aria-label={`${companyName} — ${pillSubline ? `${pillSubline}. ` : ""}${headline}`}
          >
            {cardFace}
          </div>
        ) : isLocked ? (
          <div
            className={wrapClass}
            role="group"
            aria-label={`${companyName} — ${headline} (coming soon)`}
          >
            {cardFace}
          </div>
        ) : (
          <a
            href={projectLink}
            className={wrapClass}
            aria-label={`${companyName} — ${pillSubline ? `${pillSubline} ` : ""}${headline}`}
          >
            {cardFace}
          </a>
        )}
        <div className="work-tile-caption-slot">
          <p className="work-tile-caption">{captionText}</p>
        </div>
      </div>
    </React.Fragment>
  );
}

Object.assign(window, { ProjectTile });