// TARJETA — the interactive "5-window tool". Based on pages 6 & 7 of PDF.
// A red card with 5 white windows. Each window acts as a frame for a different
// fragment of reality. Mouse over to see labels; click to 'seleccionar'.

const WINDOWS = [
  [
    { src: 'assets/moodboard/sushi.png',    label: 'Sushi',         tag: 'Japón love' },
    { src: 'assets/moodboard/wave.png',     label: 'Ola',           tag: 'Agua' },
    { src: 'assets/moodboard/crown.png',    label: 'Corona',        tag: 'Fantasía' },
    { src: 'assets/moodboard/wassily.png',  label: 'Wassily',       tag: 'Diseño funcional' },
    { src: 'assets/moodboard/queen-card.png',label:'Reina',         tag: 'Narrativa' },
  ],
  [
    { src: 'assets/moodboard/shout.png',    label: 'Gesto',         tag: 'Expresar' },
    { src: 'assets/moodboard/grapes.png',   label: 'Uvas',           tag: 'Abundancia' },
    { src: 'assets/moodboard/scorpion.png', label: 'Escorpión',      tag: 'Impaciencia' },
    { src: 'assets/moodboard/madrileno.png',label: 'El Madrileño',   tag: 'Retrato' },
    { src: 'assets/moodboard/degas.png',    label: 'Danza',          tag: 'Sensibilidad' },
  ],
  [
    { src: 'assets/moodboard/tiramisu.png', label: 'Tiramisú',       tag: 'Memoria' },
    { src: 'assets/moodboard/mochi.png',    label: 'Mochi',          tag: 'Dulzura' },
    { src: 'assets/moodboard/plant.png',    label: 'Hoja',           tag: 'Verde' },
    { src: 'assets/moodboard/plane.png',    label: 'Avión',          tag: 'Viaje' },
    { src: 'assets/moodboard/milanesa.png', label: 'Milanesa',       tag: 'Práctica' },
  ]
];

function Tarjeta() {
  const [deck, setDeck] = React.useState(0);
  const [hover, setHover] = React.useState(null);
  const [selected, setSelected] = React.useState([]);

  const items = WINDOWS[deck];

  return (
    <section id="tarjeta" data-screen-label="07 Tarjeta" style={{
      position: 'relative', padding: '140px 48px 140px',
      background: 'var(--grey-paper)'
    }}>
      <PageNumber n={7} label="HERRAMIENTA" />
      <SectionLabel idx={6} title="Tarjeta / Herramienta"
        kicker="No es una tarjeta, es una herramienta para nombrar." />

      <div className="t-grid" style={{
        display: 'grid', gridTemplateColumns: 'minmax(0, 1fr) minmax(0, 1fr)',
        gap: 56, alignItems: 'center'
      }}>
        <style>{`
          @media (max-width: 900px){ .t-grid { grid-template-columns: 1fr !important; } }
        `}</style>

        {/* Card area */}
        <div style={{
          position: 'relative',
          background: 'var(--red)',
          aspectRatio: '1.6 / 1',
          padding: '8% 5%',
          display: 'grid', gridTemplateRows: '1fr auto',
          gap: 18,
          boxShadow: '0 40px 80px rgba(0,0,0,.18)'
        }}>
          {/* Five windows */}
          <div style={{
            display: 'grid', gridTemplateColumns: 'repeat(5, 1fr)', gap: '3%',
            height: '100%'
          }}>
            {items.map((it, i) => {
              const isHover = hover === i;
              const isSel   = selected.includes(i);
              return (
                <div key={i}
                  data-name={it.label}
                  onMouseEnter={() => setHover(i)}
                  onMouseLeave={() => setHover(null)}
                  onClick={() => {
                    setSelected(s => s.includes(i) ? s.filter(x => x!==i) : [...s, i]);
                  }}
                  style={{
                    position: 'relative',
                    background: '#fff',
                    overflow: 'hidden',
                    cursor: 'pointer',
                    transform: isHover ? 'translateY(-6px)' : 'translateY(0)',
                    transition: 'transform .25s ease, box-shadow .25s',
                    boxShadow: isHover ? '0 12px 24px rgba(0,0,0,.25)' : 'none',
                    outline: isSel ? '3px solid #0A0A0A' : 'none',
                    outlineOffset: '-3px'
                  }}
                >
                  <img src={it.src} alt=""
                       style={{
                         position: 'absolute', inset: 0, width: '100%', height: '100%',
                         objectFit: 'cover',
                         opacity: isHover || isSel ? 1 : 0,
                         transition: 'opacity .3s ease',
                       }}/>
                  {/* Label appears on hover */}
                  <div style={{
                    position: 'absolute', inset: 0,
                    display: 'flex', flexDirection: 'column', justifyContent: 'flex-end',
                    padding: 10,
                    background: (isHover || isSel) ? 'linear-gradient(to top, rgba(0,0,0,.6) 0%, transparent 60%)' : 'transparent',
                    transition: 'background .3s',
                    color: (isHover || isSel) ? '#fff' : 'var(--red)'
                  }}>
                    <div style={{
                      fontSize: 10, letterSpacing: '0.18em', textTransform: 'uppercase',
                      fontWeight: 600, opacity: (isHover || isSel) ? 1 : 0,
                      transition: 'opacity .3s'
                    }}>
                      {it.tag}
                    </div>
                    <div className="titular" style={{
                      fontSize: 14, fontWeight: 600, marginTop: 2,
                      opacity: (isHover || isSel) ? 1 : 0, transition: 'opacity .3s'
                    }}>
                      {it.label}
                    </div>
                  </div>
                  {/* Index number */}
                  <span style={{
                    position: 'absolute', top: 6, left: 6,
                    fontSize: 10, letterSpacing: '0.14em',
                    color: (isHover || isSel) ? '#fff' : 'var(--red)',
                    fontWeight: 600
                  }}>
                    0{i+1}
                  </span>
                </div>
              );
            })}
          </div>

          {/* Bottom text of card — echoes p6 */}
          <div style={{
            color: '#fff',
            display: 'flex', justifyContent: 'space-between',
            alignItems: 'center', flexWrap: 'wrap', gap: 10
          }}>
            <span style={{
              fontSize: 'clamp(10px, 1.1vw, 14px)', letterSpacing: '0.14em',
              opacity: .9, fontWeight: 500
            }}>
              Nombrar y representar cada ser existente en el planeta.
            </span>
            <span style={{
              fontSize: 'clamp(10px, 1vw, 12px)', letterSpacing: '0.22em',
              textTransform: 'uppercase', opacity: .7
            }}>
              NMN · V{deck+1}
            </span>
          </div>
        </div>

        {/* Right explainer */}
        <div>
          <h3 className="display" style={{
            fontSize: 'clamp(40px, 5.5vw, 76px)', margin: 0,
            lineHeight: 0.92, fontWeight: 400, letterSpacing: '-0.03em'
          }}>
            Seleccioná<br/>el <span className="red">fragmento</span>.
          </h3>
          <p style={{ fontSize: 16, lineHeight: 1.6, marginTop: 20, maxWidth: 480 }}>
            Cada ventana enmarca un fragmento de realidad. Pasá el cursor para verlo;
            hacé click para nombrarlo. Cada tarjeta NOMEN es única: depende del mirador.
          </p>

          {/* Deck switcher */}
          <div style={{ marginTop: 28 }}>
            <div className="eyebrow" style={{ marginBottom: 10, opacity: .55 }}>Mazo · Cambiar fragmentos</div>
            <div style={{ display: 'flex', gap: 8 }}>
              {WINDOWS.map((_, i) => (
                <button key={i}
                  onClick={() => { setDeck(i); setSelected([]); }}
                  style={{
                    border: '1px solid var(--ink)',
                    background: deck === i ? 'var(--ink)' : 'transparent',
                    color: deck === i ? 'var(--grey-paper)' : 'var(--ink)',
                    padding: '10px 16px',
                    fontSize: 11, letterSpacing: '0.22em', textTransform: 'uppercase',
                    fontWeight: 600, cursor: 'pointer',
                    fontFamily: 'var(--font-body)'
                  }}>
                  Mazo 0{i+1}
                </button>
              ))}
            </div>
          </div>

          {/* Selection counter */}
          <div style={{
            marginTop: 36, padding: '14px 0', borderTop: '1px solid var(--ink)',
            borderBottom: '1px solid var(--ink)',
            display: 'flex', justifyContent: 'space-between', alignItems: 'center', flexWrap: 'wrap', gap: 10
          }}>
            <div>
              <div className="eyebrow" style={{ opacity: .55, marginBottom: 4 }}>Seleccionados</div>
              <div className="titular" style={{ fontSize: 22 }}>
                {selected.length} <span style={{ opacity: .35 }}>/ 5</span>
              </div>
            </div>
            <div style={{ display: 'flex', gap: 6, flexWrap: 'wrap' }}>
              {selected.map(i => (
                <span key={i} style={{
                  background: 'var(--red)', color: '#fff',
                  padding: '6px 10px',
                  fontSize: 10, letterSpacing: '0.2em', textTransform: 'uppercase', fontWeight: 600
                }}>{items[i].label}</span>
              ))}
              {selected.length > 0 && (
                <button onClick={() => setSelected([])} style={{
                  border: 'none', background: 'transparent',
                  fontSize: 10, letterSpacing: '0.22em', textTransform: 'uppercase',
                  cursor: 'pointer', opacity: .55
                }}>× Limpiar</button>
              )}
            </div>
          </div>
        </div>
      </div>
    </section>
  );
}

Object.assign(window, { Tarjeta });