// SandwichVerdict.jsx — The Great Debate bento for the home page.
// Static (no tweaks panel) — copy pulled from the mockup defaults.
function SandwichVerdict() {
  const YT_URL = "https://www.youtube.com/shorts/OXFLp6tsdIk";
  const YT_THUMB = "https://i.ytimg.com/vi/OXFLp6tsdIk/hqdefault.jpg";
  const PlayIcon = () => <svg viewBox="0 0 24 24"><path d="M8 5v14l11-7z" /></svg>;

  return (
    <section id="verdict" className="bento grain sv-bento">
      <span className="tape">Ruling // Food Court</span>

      <div className="sv-debate">
        <span>Eli Manning</span>
        <span className="vs">VS</span>
        <span>Stephen A. Smith</span>
      </div>

      <div className="sv-grid-a">
        <div className="sv-head">
          <p className="eyebrow">The Great Debate · Episode 04</p>
          <h2 className="sv-h2">
            Is a hot dog<br />
            <span style={{ color: 'var(--grub-ketchup)' }}>a sandwich?</span>
          </h2>

          <div style={{ marginTop: 24, marginBottom: 24 }}>
            <span className="sv-verdict">
              <span className="small">Verdict</span>
              <span className="big">NO.</span>
            </span>
          </div>

          <p className="sv-quote">
            “It’s not two slices of bread. It’s a long thingy thing with a bread. A hot dog is a hot dog.”
            <span className="attr">— Eli Manning · The Eli Manning Show</span>
          </p>

          <ul className="sv-reasons" style={{ marginTop: 24 }}>
            <li className="sv-reason">
              <span className="num">01</span>
              <div>
                <h4>Linguistic Distinction</h4>
                <p>Nobody walks into a deli and orders a &ldquo;hot dog sandwich.&rdquo; The name settles it.</p>
              </div>
            </li>
            <li className="sv-reason">
              <span className="num">02</span>
              <div>
                <h4>Bread Structure</h4>
                <p>One roll, hinged — not two stacked slices. Architecture matters.</p>
              </div>
            </li>
            <li className="sv-reason">
              <span className="num">03</span>
              <div>
                <h4>Independent Identity</h4>
                <p>A hot dog without a bun is still a hot dog. A sandwich without bread is a salad.</p>
              </div>
            </li>
          </ul>
        </div>

        <div className="sv-thumb-card">
          <a className="sv-thumb-wrap" href={YT_URL} target="_blank" rel="noopener">
            <img src={YT_THUMB} alt="Eli Manning & Stephen A. Smith debate" />
            <div className="sv-thumb-grad" />
            <div className="sv-thumb-top">
              <span className="sv-yt-badge"><span className="dot" />YouTube Shorts</span>
              <span className="sv-duration">0:58</span>
            </div>
            <div className="sv-play"><PlayIcon /></div>
            <div className="sv-thumb-bottom">
              <h4 className="sv-thumb-title">The Eli<br />Manning Show</h4>
              <p className="sv-thumb-meta">Feat. Stephen A. Smith</p>
            </div>
          </a>
          <a className="sv-watch" href={YT_URL} target="_blank" rel="noopener">
            Watch the debate
            <span aria-hidden>→</span>
          </a>
        </div>
      </div>

      <style>{`
        .sv-bento { background:#0D0D0D; color:#F5E6C4; padding-top:24px; }
        .sv-h2 { font-family:var(--font-display); font-weight:800; text-transform:uppercase; line-height:.88; letter-spacing:.01em; color:#F5E6C4; margin:8px 0 0; font-size:clamp(2.5rem,5vw,4.5rem); }
        .sv-verdict { display:inline-flex; align-items:baseline; gap:18px; font-family:var(--font-display); font-weight:900; text-transform:uppercase; line-height:1; color:#fff; background:var(--grub-ketchup); padding:10px 22px 12px; border-radius:6px; transform:rotate(-2deg); box-shadow:0 14px 40px -14px rgba(211,47,47,.7); }
        .sv-verdict .big { font-size:clamp(3.5rem,8vw,6.5rem); letter-spacing:-0.02em; }
        .sv-verdict .small { font-family:var(--font-mono); font-size:.65rem; letter-spacing:.28em; font-weight:700; color:rgba(255,255,255,.9); transform:translateY(-.5em); }
        .sv-quote { font-family:var(--font-display); font-weight:700; line-height:1.05; color:#F5E6C4; font-size:clamp(1.25rem,1.9vw,1.75rem); letter-spacing:.005em; margin:0; text-wrap:balance; max-width:48ch; }
        .sv-quote .attr { display:block; margin-top:14px; font-family:var(--font-mono); font-size:.65rem; letter-spacing:.26em; text-transform:uppercase; color:#FFC107; font-weight:400; }
        .sv-reasons { list-style:none; margin:0; padding:0; display:grid; gap:12px; justify-items:start; }
        .sv-reason { display:inline-grid; grid-template-columns:28px auto; gap:14px; padding:12px 14px; border:1px solid rgba(255,193,7,.14); border-radius:12px; background:rgba(255,193,7,.03); }
        .sv-reason .num { font-family:var(--font-mono); font-size:.7rem; font-weight:700; letter-spacing:.2em; color:var(--grub-ketchup); }
        .sv-reason h4 { font-family:var(--font-mono); font-size:.68rem; font-weight:700; letter-spacing:.22em; text-transform:uppercase; color:#FFC107; margin:0 0 3px; }
        .sv-reason p { margin:0; font-size:.88rem; line-height:1.5; color:rgba(245,230,196,.82); max-width:42ch; text-wrap:balance; }
        .sv-thumb-wrap { position:relative; aspect-ratio:9/16; border-radius:18px; overflow:hidden; border:2px solid var(--grub-ketchup); background:#1B1B1B; box-shadow:0 30px 60px -24px rgba(211,47,47,.55); cursor:pointer; display:block; text-decoration:none; color:inherit; transition:transform 200ms var(--ease-grub); }
        .sv-thumb-wrap:hover { transform:translateY(-4px); }
        .sv-thumb-wrap img { position:absolute; inset:0; width:100%; height:100%; object-fit:cover; object-position:center 40%; }
        .sv-thumb-grad { position:absolute; inset:0; background:linear-gradient(0deg, rgba(13,13,13,.92) 0%, rgba(13,13,13,.25) 40%, rgba(13,13,13,.05) 70%, rgba(13,13,13,.5) 100%); }
        .sv-play { position:absolute; top:50%; left:50%; transform:translate(-50%,-50%); height:80px; width:80px; border-radius:9999px; background:rgba(13,13,13,.82); border:2px solid #fff; display:grid; place-items:center; backdrop-filter:blur(6px); transition:all 200ms var(--ease-grub); }
        .sv-thumb-wrap:hover .sv-play { background:var(--grub-ketchup); transform:translate(-50%,-50%) scale(1.08); }
        .sv-play svg { fill:#fff; height:32px; width:32px; margin-left:4px; }
        .sv-thumb-top { position:absolute; top:14px; left:14px; right:14px; display:flex; justify-content:space-between; align-items:flex-start; gap:8px; z-index:2; }
        .sv-yt-badge { display:inline-flex; align-items:center; gap:6px; background:rgba(13,13,13,.78); color:#fff; font-family:var(--font-mono); font-size:.56rem; letter-spacing:.22em; text-transform:uppercase; font-weight:700; padding:5px 9px; border-radius:9999px; backdrop-filter:blur(6px); border:1px solid rgba(255,255,255,.15); }
        .sv-yt-badge .dot { height:6px; width:6px; border-radius:50%; background:#FF0000; }
        .sv-duration { font-family:var(--font-mono); font-size:.58rem; letter-spacing:.14em; color:#fff; background:rgba(13,13,13,.78); padding:3px 7px; border-radius:4px; font-weight:700; }
        .sv-thumb-bottom { position:absolute; left:16px; right:16px; bottom:16px; z-index:2; }
        .sv-thumb-title { font-family:var(--font-display); font-weight:800; font-size:1.3rem; text-transform:uppercase; color:#fff; line-height:1; letter-spacing:.01em; margin:0 0 6px; }
        .sv-thumb-meta { font-family:var(--font-mono); font-size:.56rem; letter-spacing:.22em; text-transform:uppercase; color:rgba(255,255,255,.7); margin:0; }
        .sv-debate { display:inline-flex; align-items:center; gap:10px; font-family:var(--font-mono); text-transform:uppercase; color:rgba(245,230,196,.75); border-radius:9999px; background:rgba(255,255,255,.03); border:1px solid rgba(255,255,255,.08); margin-bottom:18px; white-space:nowrap; font-size:.58rem; padding:7px 12px; letter-spacing:.2em; }
        .sv-debate .vs { font-family:var(--font-display); font-weight:900; color:var(--grub-ketchup); letter-spacing:0; font-size:1rem; }
        .sv-watch { display:inline-flex; align-items:center; gap:10px; background:var(--grub-ketchup); color:#fff; padding:11px 20px; border-radius:9999px; font-family:var(--font-display); font-weight:800; text-transform:uppercase; letter-spacing:.04em; font-size:1rem; text-decoration:none; box-shadow:0 10px 30px -14px rgba(211,47,47,.8); transition:transform 200ms var(--ease-grub); }
        .sv-watch:hover { transform:scale(1.04); }
        .sv-grid-a { display:grid; gap:36px; align-items:start; grid-template-columns:1.05fr 1fr; }
        .sv-thumb-card { display:grid; gap:14px; justify-self:start; width:100%; max-width:300px; }
        @media (max-width:820px){ .sv-grid-a { grid-template-columns:1fr; } .sv-thumb-card { max-width:340px; justify-self:center; } }
      `}</style>
    </section>
  );
}
window.SandwichVerdict = SandwichVerdict;
