// Sample roast — ONE real snack-box case (snap → verdict → comic) shown in 3 layouts.
// Real artifacts: 02_home_snack.png, 08_verdict.png, 09_comic.png.

function SampleRoasts({ tweaks }) {
  const { SectionHead } = window.RMS;
  const variant = (tweaks && tweaks.roastVariant) || 'Triptych';

  // Single canonical case — matches the actual app screens shipped in /images/screens
  const CASE = {
    snap: 'images/screens/02_home_snack.png',
    verdict: 'images/screens/08_verdict.png',
    comic: 'images/screens/09_comic.png',
    snackLabel: 'SNACK BOX · CHOCOLATE FROSTED DONUTS + RIDGED POTATO CHIPS + CANNED SODA',
    snackShort: 'SNACK BOX · 3 ITEMS',
    score: 57,
    verdictTitle: 'SMILE THREAT',
    verdictSub: 'Sugar, starch, or acid need a smarter swap.',
    comicIssue: '#216',
    comicTitle: 'COLA ACID ROAST',
    comicCaption: '"Dr. Hawley catches the cola, chocolate frosted donuts, and ridged chips in one snack box, then swaps the acid-and-cling combo for apple slices."',
    detected: ['chocolate frosted donuts with sprinkles', 'ridged potato chips', 'canned soda'],
  };

  return (
    <section id="gallery" className="section" style={{
      background: 'var(--paper-2)',
      borderTop: '2px solid var(--ink)',
      borderBottom: '2px solid var(--ink)',
    }}>
      <div className="wrap">
        <SectionHead
          eyebrow="ONE SNACK · ONE GAUNTLET"
          title="THE SNACK. THE VERDICT. THE COMIC."
          kicker="Three taps, three artifacts. Below: one real donut, chips, and cola case, end to end."
        />

        {variant === 'Triptych' && <Triptych c={CASE}/>}
        {variant === 'Spread'  && <Spread c={CASE}/>}
        {variant === 'Wall'    && <Wall c={CASE}/>}
      </div>
    </section>
  );
}

// ============================================================
// Shared mini phone frame — used by all variants
// ============================================================
function PhoneFrame({ src, alt, w = 240, shadow = '6px 6px 0 var(--ink)', accent = null, style = {} }) {
  return (
    <div className="sample-phone-frame" style={{
      '--phone-w': w + 'px',
      position: 'relative',
      width: w,
      aspectRatio: '9 / 19.5',
      background: 'var(--ink)',
      border: '3px solid var(--ink)',
      borderRadius: 34,
      padding: 6,
      boxShadow: accent
        ? shadow + ', ' + (parseInt(shadow) + 6) + 'px ' + (parseInt(shadow) + 6) + 'px 0 ' + accent
        : shadow,
      flexShrink: 0,
      ...style,
    }}>
      <div style={{
        width: '100%', height: '100%',
        borderRadius: 26,
        overflow: 'hidden',
        background: 'var(--paper)',
      }}>
        <img src={src} alt={alt} style={{
          width: '100%', height: '100%',
          objectFit: 'cover', objectPosition: 'top center',
          display: 'block',
        }}/>
      </div>
    </div>
  );
}

function Arrow({ rot = 0, color = 'var(--ink)' }) {
  return (
    <svg width="46" height="22" viewBox="0 0 46 22" style={{ transform: `rotate(${rot}deg)` }} aria-hidden="true">
      <path d="M2 11 H38 M30 4 L40 11 L30 18" stroke={color} strokeWidth="3" fill="none" strokeLinecap="round" strokeLinejoin="round"/>
    </svg>
  );
}

function Stamp({ children, color = 'var(--ink)', rot = -3 }) {
  return (
    <span style={{
      fontFamily: 'var(--font-display)',
      letterSpacing: '0.06em',
      textTransform: 'uppercase',
      border: '2.5px solid ' + color,
      color: color,
      padding: '4px 10px 3px',
      borderRadius: 6,
      display: 'inline-flex',
      alignItems: 'center',
      gap: 6,
      fontSize: 11,
      background: 'rgba(255,255,255,0.55)',
      transform: `rotate(${rot}deg)`,
      whiteSpace: 'nowrap',
    }}>{children}</span>
  );
}

// ============================================================
// VARIANT A — TRIPTYCH (editorial case file, three real phones in a row)
// ============================================================
function Triptych({ c }) {
  return (
    <div style={{ position: 'relative' }}>

      {/* Three columns */}
      <div className="triptych-grid" style={{
        display: 'grid',
        gridTemplateColumns: '1fr auto 1fr auto 1fr',
        alignItems: 'start',
        gap: 16,
      }}>
        {/* THE SNACK */}
        <TripCol
          tag="01 · THE SNACK"
          stamp="EVIDENCE A"
          stampColor="var(--flame)"
          phone={<PhoneFrame src={c.snap} alt="Donuts, chips, and cola snap" w={250} accent="var(--flame)"/>}
          factLeft={c.snackShort}
          factRight="SOURCE · LIBRARY"
          meta={c.snackLabel}
        />

        <div className="triptych-arrow" style={{ display: 'grid', placeItems: 'center', height: '100%', paddingTop: 280 }}>
          <Arrow/>
        </div>

        {/* THE VERDICT */}
        <TripCol
          tag="02 · THE VERDICT"
          stamp="EVIDENCE B"
          stampColor="var(--mint-deep)"
          phone={<PhoneFrame src={c.verdict} alt="Verdict screen" w={250} accent="var(--mint)"/>}
          factLeft={'SCORE ' + c.score}
          factRight="RISK / 100"
          meta={c.verdictTitle + ' · ' + c.verdictSub.toUpperCase()}
        />

        <div className="triptych-arrow" style={{ display: 'grid', placeItems: 'center', height: '100%', paddingTop: 280 }}>
          <Arrow/>
        </div>

        {/* THE COMIC */}
        <TripCol
          tag="03 · THE COMIC"
          stamp="EVIDENCE C"
          stampColor="var(--plum)"
          phone={<PhoneFrame src={c.comic} alt="Comic page" w={250} accent="var(--plum)"/>}
          factLeft={'ISSUE ' + c.comicIssue}
          factRight="2 PANELS"
          meta={c.comicTitle + ' · ' + c.comicCaption}
        />
      </div>

      {/* Bottom strip — chain of custody */}
      <div className="chain-of-custody" style={{
        marginTop: 36,
        display: 'flex', flexWrap: 'wrap',
        gap: 12, justifyContent: 'center', alignItems: 'center',
        padding: '14px 18px',
        background: 'var(--ink)', color: 'var(--paper)',
        border: '2px solid var(--ink)',
        borderRadius: 999,
        boxShadow: '4px 4px 0 var(--flame)',
        maxWidth: 'fit-content', margin: '36px auto 0',
      }}>
        <span className="mono" style={{ fontSize: 10.5, letterSpacing: '0.2em', color: 'var(--flame)' }}>CHAIN OF CUSTODY</span>
        <span style={{ width: 4, height: 4, borderRadius: 999, background: 'var(--mute)' }}/>
        <span className="mono" style={{ fontSize: 11, letterSpacing: '0.18em' }}>SNAP → SCORE → DRAW</span>
      </div>

      <style>{`
        @media (max-width: 980px) {
          .triptych-grid {
            grid-template-columns: 1fr !important;
            justify-items: center;
            align-items: start !important;
            gap: 24px !important;
          }
          .triptych-grid > * {
            justify-self: center;
          }
          .triptych-col {
            width: min(100%, 320px);
            gap: 12px !important;
          }
          .triptych-arrow {
            height: auto !important;
            padding-top: 0 !important;
            margin: -4px 0 0;
          }
          .triptych-grid svg {
            transform: rotate(90deg) scale(0.9) !important;
          }
          .sample-phone-frame {
            width: min(var(--phone-w, 250px), 72vw) !important;
            max-width: 250px;
          }
          .triptych-meta {
            max-width: min(240px, 72vw) !important;
          }
        }
        @media (max-width: 640px) {
          .triptych-grid {
            gap: 22px !important;
          }
          .triptych-col {
            width: min(100%, 280px);
            gap: 12px !important;
          }
          .triptych-arrow {
            display: grid !important;
          }
          .sample-phone-frame {
            width: min(var(--phone-w, 250px), 74vw) !important;
          }
          .triptych-facts {
            flex-direction: column;
            align-items: center !important;
            gap: 2px !important;
            text-align: center;
          }
          .triptych-facts > span:first-child {
            font-size: 18px !important;
          }
          .chain-of-custody {
            width: 100%;
            max-width: none !important;
            border-radius: 18px !important;
          }
        }
      `}</style>
    </div>
  );
}

function TripCol({ tag, stamp, stampColor, phone, factLeft, factRight, meta }) {
  return (
    <div className="triptych-col" style={{
      display: 'flex', flexDirection: 'column',
      alignItems: 'center', gap: 14,
    }}>
      <div className="mono" style={{
        fontSize: 10.5, letterSpacing: '0.22em',
        color: 'var(--mute)',
      }}>{tag}</div>
      <Stamp color={stampColor}>{stamp}</Stamp>
      {phone}
      <div className="triptych-facts" style={{
        display: 'flex', alignItems: 'baseline', gap: 10,
        marginTop: 2,
      }}>
        <span style={{
          fontFamily: 'var(--font-display)',
          fontSize: 22, color: 'var(--ink)',
        }}>{factLeft}</span>
        <span className="mono" style={{ fontSize: 10, color: 'var(--mute)', letterSpacing: '0.16em' }}>
          {factRight}
        </span>
      </div>
      <div className="mono triptych-meta" style={{
        fontSize: 10, letterSpacing: '0.14em', textAlign: 'center',
        color: 'var(--ink-2)', maxWidth: 240, lineHeight: 1.5,
      }}>{meta}</div>
    </div>
  );
}

// ============================================================
// VARIANT B — SPREAD (magazine, comic dominant, meta sidebar)
// ============================================================
function Spread({ c }) {
  return (
    <div className="spread-grid" style={{
      display: 'grid',
      gridTemplateColumns: '1.3fr 1fr',
      gap: 28,
      alignItems: 'stretch',
    }}>

      {/* LEFT — giant comic */}
      <div style={{
        position: 'relative',
        background: 'var(--ink)',
        border: '3px solid var(--ink)',
        borderRadius: 28,
        boxShadow: '10px 10px 0 var(--flame)',
        padding: 8,
        overflow: 'hidden',
      }}>
        <div style={{
          position: 'absolute', top: 18, left: 18, zIndex: 5,
          display: 'flex', alignItems: 'center', gap: 10,
        }}>
          <Stamp color="var(--flame)" rot={-4}>EXHIBIT · COMIC</Stamp>
          <span className="mono" style={{
            color: 'var(--paper)', fontSize: 10, letterSpacing: '0.2em',
          }}>ISSUE {c.comicIssue}</span>
        </div>
        <img src={c.comic} alt="Dr. Hawley comic" style={{
          width: '100%', height: '100%',
          objectFit: 'cover', objectPosition: 'top center',
          borderRadius: 22,
          minHeight: 560,
          maxHeight: 820,
        }}/>
        <div style={{
          position: 'absolute', bottom: 18, left: 18, right: 18,
          background: 'var(--sun)',
          border: '2px solid var(--ink)',
          borderRadius: 14,
          padding: '10px 14px',
          fontWeight: 700, fontSize: 14,
          backgroundImage: 'radial-gradient(rgba(0,0,0,0.18) 1px, transparent 1.2px)',
          backgroundSize: '6px 6px',
          boxShadow: '3px 3px 0 var(--ink)',
        }}>{c.comicCaption}</div>
      </div>

      {/* RIGHT — score callout + snack + verdict reasons */}
      <div style={{ display: 'flex', flexDirection: 'column', gap: 18 }}>

        {/* HUGE SCORE CALLOUT */}
        <div className="halftone-mint" style={{
          border: '3px solid var(--ink)',
          borderRadius: 24,
          padding: '22px 22px 18px',
          boxShadow: '6px 6px 0 var(--ink)',
          position: 'relative',
        }}>
          <div className="mono" style={{
            fontSize: 10.5, letterSpacing: '0.22em', color: 'var(--ink)',
          }}>VERDICT</div>

          <div style={{ display: 'flex', alignItems: 'flex-end', gap: 14, marginTop: 6 }}>
            <div style={{
              fontFamily: 'var(--font-display)',
              fontSize: 'clamp(80px, 13vw, 132px)',
              lineHeight: 0.82,
              color: 'var(--ink)',
              letterSpacing: '-0.04em',
            }}>{c.score}</div>
            <div style={{ paddingBottom: 12 }}>
              <div className="mono" style={{ fontSize: 10, letterSpacing: '0.18em', color: 'var(--ink-2)' }}>
                RISK / 100
              </div>
              <div style={{
                fontFamily: 'var(--font-display)', fontSize: 18,
                color: 'var(--ink)', marginTop: 4,
              }}>{c.verdictTitle}</div>
            </div>
          </div>

          <div className="risk-track" style={{ marginTop: 14 }}>
            <span className="risk-pin" style={{ left: c.score + '%' }}/>
          </div>
          <div className="mono" style={{
            display: 'flex', justifyContent: 'space-between',
            fontSize: 9, marginTop: 6, letterSpacing: '0.2em', color: 'var(--ink-2)',
          }}>
            <span>SAFE</span><span>WATCH</span><span>YIKES</span>
          </div>

          <div style={{
            marginTop: 14, display: 'flex', flexWrap: 'wrap', gap: 6,
          }}>
            {c.detected.map(d => (
              <span key={d} style={{
                fontFamily: 'var(--font-mono)',
                fontSize: 10, padding: '4px 9px',
                background: 'rgba(0,0,0,0.08)',
                border: '1.5px solid var(--ink)',
                borderRadius: 999, letterSpacing: '0.05em',
              }}>{d}</span>
            ))}
          </div>
        </div>

        {/* SNACK + META split row */}
        <div style={{
          display: 'grid', gridTemplateColumns: 'auto 1fr', gap: 14,
          background: 'var(--paper)',
          border: '2px solid var(--ink)',
          borderRadius: 22,
          padding: 14,
          boxShadow: '4px 4px 0 var(--ink)',
          alignItems: 'stretch',
        }}>
          <PhoneFrame src={c.snap} alt="Snack snap" w={120} shadow="3px 3px 0 var(--ink)"/>
          <div style={{
            display: 'flex', flexDirection: 'column', justifyContent: 'space-between',
            minWidth: 0,
          }}>
            <div>
              <Stamp color="var(--flame)" rot={-2}>EVIDENCE A</Stamp>
              <div style={{
                fontFamily: 'var(--font-display)', fontSize: 18,
                marginTop: 8, lineHeight: 1.05,
              }}>THE SNACK</div>
              <div className="mono" style={{
                fontSize: 10, letterSpacing: '0.14em',
                color: 'var(--ink-2)', marginTop: 6, lineHeight: 1.5,
              }}>{c.snackLabel}</div>
            </div>
            <div style={{
              display: 'flex', alignItems: 'center', gap: 8, marginTop: 10,
              paddingTop: 10, borderTop: '1.5px dashed var(--line)',
            }}>
              <span className="mono" style={{ fontSize: 10, letterSpacing: '0.16em', color: 'var(--mute)' }}>
                SOURCE · LIBRARY
              </span>
            </div>
          </div>
        </div>

      </div>

      <style>{`
        @media (max-width: 980px) {
          .spread-grid { grid-template-columns: 1fr !important; }
        }
      `}</style>
    </div>
  );
}

// ============================================================
// VARIANT C — WALL (forensic pinboard, tape + rotation)
// ============================================================
function Wall({ c }) {
  return (
    <div style={{
      position: 'relative',
      background: 'var(--paper)',
      border: '2px solid var(--ink)',
      borderRadius: 28,
      boxShadow: '6px 6px 0 var(--ink)',
      padding: '52px 44px 56px',
      backgroundImage:
        'radial-gradient(rgba(14,14,16,0.06) 1.2px, transparent 1.4px),' +
        'repeating-linear-gradient(45deg, rgba(14,14,16,0.025) 0 12px, transparent 12px 24px)',
      backgroundSize: '10px 10px, auto',
      overflow: 'hidden',
      minHeight: 720,
    }} className="wall-board">

      {/* corner pushpin label */}
      <div style={{ position: 'absolute', top: 16, left: 22 }}>
        <span className="mono" style={{
          fontSize: 10, letterSpacing: '0.22em', color: 'var(--mute)',
        }}>CASE FILE · DR. HAWLEY DDS · DONUT-CHIPS-COLA-216</span>
      </div>

      <div style={{ position: 'absolute', top: 16, right: 22 }}>
        <Stamp color="var(--flame-deep)" rot={6}>VERIFIED · SMILE THREAT</Stamp>
      </div>

      {/* Layout grid for desktop; mobile collapses via media query */}
      <div className="wall-grid" style={{
        display: 'grid',
        gridTemplateColumns: '1fr 1.4fr',
        gap: 36,
        alignItems: 'center',
        marginTop: 30,
      }}>

        {/* LEFT col: snack polaroid + verdict phone, both rotated */}
        <div style={{
          display: 'flex', flexDirection: 'column',
          alignItems: 'center', gap: 28,
        }}>
          {/* Polaroid snack */}
          <div style={{
            transform: 'rotate(-4deg)',
            background: '#fff',
            border: '2px solid var(--ink)',
            borderRadius: 6,
            padding: '12px 12px 36px',
            boxShadow: '5px 5px 0 rgba(14,14,16,0.18)',
            width: 'min(260px, 100%)',
            position: 'relative',
          }}>
            {/* tape */}
            <div style={{
              position: 'absolute', top: -14, left: '50%',
              transform: 'translateX(-50%) rotate(-3deg)',
              width: 78, height: 22,
              background: 'rgba(246, 192, 101, 0.7)',
              border: '1.5px solid rgba(14,14,16,0.35)',
              borderStyle: 'dashed',
            }}/>
            <div style={{
              aspectRatio: '4/5',
              borderRadius: 2,
              overflow: 'hidden',
              background: 'var(--paper-2)',
              position: 'relative',
            }}>
              <img src={c.snap} alt="snack" style={{
                position: 'absolute', inset: 0,
                width: '100%', height: '160%',
                objectFit: 'cover', objectPosition: 'center 62%',
              }}/>
            </div>
            <div style={{
              position: 'absolute', bottom: 6, left: 12, right: 12,
              fontFamily: 'var(--font-mono)', fontSize: 9,
              letterSpacing: '0.16em', textAlign: 'center',
              color: 'var(--ink-2)',
            }}>EVIDENCE A · SNACK</div>
          </div>

          {/* Verdict phone */}
          <div style={{ transform: 'rotate(3deg)', position: 'relative' }}>
            <PhoneFrame src={c.verdict} alt="Verdict" w={180} shadow="5px 5px 0 var(--ink)"/>
            <div style={{
              position: 'absolute', top: -14, left: -22,
              transform: 'rotate(-10deg)',
            }}>
              <Stamp color="var(--mint-deep)" rot={0}>EVIDENCE B</Stamp>
            </div>
            <div style={{
              position: 'absolute', bottom: -18, right: -14,
              background: 'var(--mint)',
              border: '2px solid var(--ink)',
              borderRadius: 999,
              padding: '6px 12px',
              fontFamily: 'var(--font-display)', fontSize: 14,
              boxShadow: '3px 3px 0 var(--ink)',
              transform: 'rotate(6deg)',
            }}>{c.score} · {c.verdictTitle}</div>
          </div>
        </div>

        {/* RIGHT col: dominant comic page pinned */}
        <div style={{
          position: 'relative',
          transform: 'rotate(-1.5deg)',
          background: '#fff',
          border: '2.5px solid var(--ink)',
          borderRadius: 8,
          padding: '14px 14px 16px',
          boxShadow: '8px 8px 0 var(--ink)',
        }}>
          {/* tape strips */}
          <div style={{
            position: 'absolute', top: -16, left: 30,
            transform: 'rotate(-6deg)',
            width: 90, height: 24,
            background: 'rgba(168, 229, 197, 0.75)',
            border: '1.5px dashed rgba(14,14,16,0.4)',
          }}/>
          <div style={{
            position: 'absolute', top: -14, right: 36,
            transform: 'rotate(8deg)',
            width: 78, height: 22,
            background: 'rgba(243, 155, 92, 0.75)',
            border: '1.5px dashed rgba(14,14,16,0.4)',
          }}/>

          <div style={{
            display: 'flex', justifyContent: 'space-between',
            alignItems: 'center', marginBottom: 8,
          }}>
            <span style={{
              fontFamily: 'var(--font-display)', fontSize: 16, color: 'var(--flame-deep)',
            }}>DR. HAWLEY DDS</span>
            <span className="mono" style={{ fontSize: 10, color: 'var(--mute)', letterSpacing: '0.16em' }}>
              ISSUE {c.comicIssue}
            </span>
          </div>

          <div style={{
            borderRadius: 4,
            overflow: 'hidden',
            border: '1.5px solid var(--ink)',
            background: 'var(--paper-2)',
          }}>
            <img src={c.comic} alt="Dr. Hawley comic" style={{
              width: '100%', display: 'block',
              objectFit: 'cover',
            }}/>
          </div>

          <div style={{
            marginTop: 10,
            background: 'var(--sun)',
            border: '1.5px solid var(--ink)',
            borderRadius: 6,
            padding: '8px 12px',
            textAlign: 'center',
            fontWeight: 700, fontSize: 12.5,
            backgroundImage: 'radial-gradient(rgba(0,0,0,0.18) 1px, transparent 1.2px)',
            backgroundSize: '6px 6px',
          }}>{c.comicCaption}</div>

          <div style={{
            position: 'absolute', top: -12, right: -18,
          }}>
            <Stamp color="var(--flame-deep)" rot={10}>EVIDENCE C · COMIC</Stamp>
          </div>
        </div>
      </div>

      {/* Dotted connector overlay (decorative) */}
      <svg style={{
        position: 'absolute', inset: 0, pointerEvents: 'none',
        width: '100%', height: '100%',
      }} aria-hidden="true">
        <line x1="32%" y1="38%" x2="55%" y2="44%"
          stroke="var(--ink)" strokeWidth="1.5" strokeDasharray="3 5"/>
        <line x1="30%" y1="68%" x2="55%" y2="56%"
          stroke="var(--ink)" strokeWidth="1.5" strokeDasharray="3 5"/>
      </svg>

      <style>{`
        @media (max-width: 880px) {
          .wall-grid { grid-template-columns: 1fr !important; }
          .wall-board { padding: 40px 22px !important; }
        }
      `}</style>
    </div>
  );
}

window.RMS.SampleRoasts = SampleRoasts;