// INGREDIENTS — continuous ticker (stock-market style). Auto-scrolls,
// pauses on hover. English names only, no Japanese glyphs.
function Ingredients({ items }) {
  // duplicate the list so the translateX loop is seamless
  const loop = [...items, ...items];
  return (
    <section id="ingredients" className="section" style={{ background: 'transparent', overflow: 'hidden' }}>
      <div className="container container-wide" style={{ marginBottom: 'var(--space-6)' }}>
        <span className="t-eyebrow" style={{ color: 'var(--shoyu-orange)' }}>What's inside</span>
        <h2 className="t-h2" style={{ fontSize: 'var(--text-2xl)', color: 'var(--text-strong)', marginTop: 10 }}>Real ingredients, always moving</h2>
        <p className="t-lead" style={{ color: 'var(--text-muted)', marginTop: 8, maxWidth: 520 }}>Approximately 100g of sashimi-grade salmon, steeped in a marinade built from scratch.</p>
      </div>

      {/* full-bleed ticker */}
      <div className="sz-ticker" aria-label="Ingredients ticker">
        <div className="sz-ticker-track">
          {loop.map((ing, i) => (
            <article key={i} className="sz-ticker-card" aria-hidden={i >= items.length ? 'true' : undefined}>
              <span className="sz-ticker-seal" />
              <div style={{ minWidth: 0, position: 'relative' }}>
                <div className="sz-ticker-name">{ing.name}</div>
                <div className="sz-ticker-note">{ing.note}</div>
              </div>
            </article>
          ))}
        </div>
        {/* edge fades */}
        <div className="sz-ticker-fade sz-ticker-fade-l" />
        <div className="sz-ticker-fade sz-ticker-fade-r" />
      </div>

      <style>{`
        .sz-ticker { position: relative; width: 100%; }
        .sz-ticker-track {
          display: flex; gap: var(--space-4); width: max-content;
          padding-inline: var(--space-4);
          animation: sz-ticker-scroll 38s linear infinite;
          will-change: transform;
        }
        .sz-ticker:hover .sz-ticker-track { animation-play-state: paused; }
        @keyframes sz-ticker-scroll { from { transform: translateX(0); } to { transform: translateX(-50%); } }
        @media (prefers-reduced-motion: reduce) { .sz-ticker-track { animation: none; } }

        .sz-ticker-card {
          position: relative; overflow: hidden;
          flex: 0 0 auto; display: flex; align-items: stretch; gap: 16px;
          padding: 16px 26px 16px 16px;
          background:
            linear-gradient(180deg, rgba(251,244,234,0.05), transparent 60%),
            var(--surface-card);
          border: 1px solid var(--border-strong);
          border-radius: 3px;
          box-shadow: inset 0 0 0 1px rgba(251,244,234,0.04), var(--shadow-sm);
        }
        /* faint salmon-wave motif, brand's own oriental texture */
        .sz-ticker-card::after {
          content: ''; position: absolute; top: -8px; right: -10px; width: 120px; height: 60px;
          opacity: 0.16; pointer-events: none;
          background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='160' height='60' viewBox='0 0 160 60'%3E%3Cg fill='none' stroke='%23F06022' stroke-width='2' stroke-linecap='round'%3E%3Cpath d='M0 10 C40 -4 120 24 160 10'/%3E%3Cpath d='M0 26 C40 12 120 40 160 26'/%3E%3Cpath d='M0 42 C40 28 120 56 160 42'/%3E%3Cpath d='M0 58 C40 44 120 72 160 58'/%3E%3C/g%3E%3C/svg%3E");
          background-size: 120px auto;
        }
        /* vertical seal-band — hanko / noren accent */
        .sz-ticker-seal {
          flex: 0 0 auto; width: 5px; align-self: stretch; border-radius: 2px;
          background: linear-gradient(180deg, var(--orange-400), var(--shoyu-orange) 55%, var(--orange-600));
          box-shadow: var(--glow-orange-soft);
        }
        .sz-ticker-name {
          font-family: var(--font-head); font-weight: 800; font-size: 15.5px;
          color: var(--text-strong); white-space: nowrap; letter-spacing: -0.01em;
          text-transform: uppercase;
        }
        .sz-ticker-note {
          font-family: var(--font-body); font-size: 12.5px; color: var(--text-muted);
          white-space: nowrap; margin-top: 1px;
        }
        .sz-ticker-fade { position: absolute; top: 0; bottom: 0; width: 90px; pointer-events: none; z-index: 2; }
        .sz-ticker-fade-l { left: 0; background: linear-gradient(90deg, var(--bg-2), transparent); }
        .sz-ticker-fade-r { right: 0; background: linear-gradient(270deg, var(--bg-2), transparent); }
      `}</style>
    </section>
  );
}
window.Ingredients = Ingredients;