// FeatureTile.jsx — single tool card + ToolDetail hero section (responsive)
const FeatureTile = ({ panel, name, description, isNew, icon, bullets, featured, lang }) => {
  const [expanded, setExpanded] = React.useState(false);
  const wip = featured === false;
  const canExpand = !wip && bullets && bullets.length > 0;

  return (
    <div
      onClick={() => canExpand && setExpanded(!expanded)}
      style={{
        background: wip ? 'var(--neutral-50)' : 'var(--white)',
        border: '1px solid',
        borderColor: wip ? 'var(--neutral-200)' : 'var(--border)',
        borderRadius: 'var(--radius-lg)',
        padding: '20px',
        boxShadow: wip ? 'none' : 'var(--shadow-1)',
        transition: 'box-shadow 150ms, border-color 150ms',
        cursor: canExpand ? 'pointer' : 'default',
        opacity: wip ? 0.6 : 1,
      }}
      onMouseEnter={e => {
        if (!wip) {
          e.currentTarget.style.boxShadow = 'var(--shadow-2)';
          e.currentTarget.style.borderColor = 'var(--neutral-300)';
        }
      }}
      onMouseLeave={e => {
        if (!wip) {
          e.currentTarget.style.boxShadow = 'var(--shadow-1)';
          e.currentTarget.style.borderColor = 'var(--border)';
        }
      }}
    >
      <div style={{ display: 'flex', alignItems: 'center', justifyContent: 'space-between', gap: 12, marginBottom: 6 }}>
        <div style={{ display: 'flex', alignItems: 'center', gap: 10 }}>
          {icon && (
            <img
              src={icon}
              alt=""
              aria-hidden="true"
              draggable={false}
              style={{
                width: 24, height: 24, objectFit: 'contain', flexShrink: 0,
                filter: wip ? 'grayscale(1) opacity(0.5)' : 'none',
              }}
            />
          )}
          <div style={{
            fontFamily: 'var(--font-sans)', fontSize: 15, fontWeight: 600,
            color: wip ? 'var(--fg-4)' : 'var(--fg-1)', lineHeight: 1.3,
          }}>{name}</div>
        </div>
        <div style={{ display: 'flex', alignItems: 'center', gap: 8 }}>
          {wip && (
            <span style={{
              background: 'var(--neutral-200)', color: 'var(--fg-4)',
              fontSize: 10, fontWeight: 600, padding: '2px 7px',
              borderRadius: 'var(--radius-xs)', letterSpacing: '0.04em',
              textTransform: 'uppercase', flexShrink: 0, whiteSpace: 'nowrap',
            }}>{lang === 'it' ? 'Prossimamente' : 'Coming soon'}</span>
          )}
          {canExpand && (
            <span style={{
              fontSize: 14, color: 'var(--fg-4)', transition: 'transform 200ms',
              transform: expanded ? 'rotate(180deg)' : 'rotate(0deg)',
              flexShrink: 0, lineHeight: 1,
            }}>▾</span>
          )}
        </div>
      </div>
      <div style={{
        fontFamily: 'var(--font-sans)', fontSize: 13,
        color: wip ? 'var(--fg-4)' : 'var(--fg-3)',
        lineHeight: 1.55,
      }}>{description}</div>

      {/* Expandable bullet points */}
      {canExpand && expanded && (
        <div style={{
          marginTop: 16, paddingTop: 14,
          borderTop: '1px solid var(--border)',
        }}>
          <ul style={{ listStyle: 'none', padding: 0, margin: 0, display: 'flex', flexDirection: 'column', gap: 8 }}>
            {bullets.map((b, i) => (
              <li key={i} style={{ display: 'flex', gap: 10, alignItems: 'flex-start' }}>
                <span style={{
                  width: 5, height: 5, borderRadius: '50%',
                  background: 'var(--brand)', flexShrink: 0, marginTop: 6,
                }}></span>
                <span style={{
                  fontFamily: 'var(--font-sans)', fontSize: 13,
                  color: 'var(--fg-2)', lineHeight: 1.55,
                }}>{b}</span>
              </li>
            ))}
          </ul>
        </div>
      )}
    </div>
  );
};

// ToolDetail.jsx — hero tool full section (responsive)
const ToolDetail = ({ panel, name, tagline, bullets, lang, images, icon }) => {
  const [activeImg, setActiveImg] = React.useState(0);
  const [lightboxOpen, setLightboxOpen] = React.useState(false);
  const mobile = window.useIsMobile(768);
  const imgs = images || [];

  React.useEffect(() => {
    if (!lightboxOpen) return;
    const onKey = (e) => { if (e.key === 'Escape') closeLightbox(); };
    window.addEventListener('keydown', onKey);
    const prevOverflow = document.body.style.overflow;
    document.body.style.overflow = 'hidden';
    return () => {
      window.removeEventListener('keydown', onKey);
      document.body.style.overflow = prevOverflow;
    };
  }, [lightboxOpen]);

  const [lbVisible, setLbVisible] = React.useState(false);
  React.useEffect(() => {
    if (lightboxOpen) {
      const id = requestAnimationFrame(() => setLbVisible(true));
      return () => cancelAnimationFrame(id);
    }
  }, [lightboxOpen]);

  const closeLightbox = () => {
    setLbVisible(false);
    setTimeout(() => setLightboxOpen(false), 200);
  };

  return (
  <>
  <div style={{
    display: mobile ? 'flex' : 'grid',
    flexDirection: 'column',
    gridTemplateColumns: mobile ? '1fr' : '1fr 1fr',
    gap: mobile ? 32 : 64,
    alignItems: mobile ? undefined : 'center',
    padding: mobile ? '48px 20px' : '80px 32px',
    maxWidth: 1200, margin: '0 auto',
  }}>
    <div>
      <div style={{
        fontFamily: 'var(--font-mono)', fontSize: 11, color: 'var(--brand)',
        fontWeight: 500, letterSpacing: '0.08em', textTransform: 'uppercase',
        marginBottom: 14,
      }}>{panel}</div>
      <div style={{ display: 'flex', alignItems: 'center', gap: 14, marginBottom: 16 }}>
        {icon && (
          <img
            src={icon}
            alt=""
            aria-hidden="true"
            draggable={false}
            style={{ width: mobile ? 36 : 44, height: mobile ? 36 : 44, objectFit: 'contain', flexShrink: 0, display: 'block' }}
          />
        )}
        <h2 style={{
          fontFamily: 'var(--font-sans)', fontSize: mobile ? 26 : 36, fontWeight: 600,
          color: 'var(--fg-1)', lineHeight: 1.15, letterSpacing: '-0.02em',
        }}>{name}</h2>
      </div>
      <p style={{
        fontFamily: 'var(--font-sans)', fontSize: mobile ? 15 : 17, color: 'var(--fg-3)',
        lineHeight: 1.6, marginBottom: 28,
      }}>{tagline}</p>
      <ul style={{ listStyle: 'none', padding: 0, display: 'flex', flexDirection: 'column', gap: 12 }}>
        {bullets.map((b, i) => (
          <li key={i} style={{ display: 'flex', gap: 12, alignItems: 'flex-start' }}>
            <span style={{
              width: 20, height: 20, borderRadius: '50%',
              background: 'var(--brand-subtle)', color: 'var(--brand)',
              fontSize: 11, fontWeight: 600, display: 'flex', alignItems: 'center',
              justifyContent: 'center', flexShrink: 0, marginTop: 1,
            }}>—</span>
            <span style={{ fontFamily: 'var(--font-sans)', fontSize: 14, color: 'var(--fg-2)', lineHeight: 1.55 }}>{b}</span>
          </li>
        ))}
      </ul>
    </div>

    {/* Media — real screenshots when provided, else placeholder */}
    {imgs.length > 0 ? (
      <div style={{ display: 'flex', flexDirection: 'column', gap: 10 }}>
        <div style={{
          background: 'var(--neutral-100)', borderRadius: 'var(--radius-xl)',
          border: '1px solid var(--border)',
          overflow: 'hidden', position: 'relative',
          boxShadow: 'var(--shadow-2)',
          lineHeight: 0,
        }}>
          <img
            src={imgs[activeImg]}
            alt={`${name} screenshot ${activeImg + 1}`}
            onClick={() => setLightboxOpen(true)}
            style={{
              width: '100%', height: 'auto', display: 'block',
              cursor: 'zoom-in',
            }}
          />
          {imgs.length > 1 && (
            <>
              <button
                onClick={() => setActiveImg((activeImg - 1 + imgs.length) % imgs.length)}
                aria-label="Previous screenshot"
                style={{
                  position: 'absolute', top: '50%', left: 10, transform: 'translateY(-50%)',
                  width: 32, height: 32, borderRadius: '50%', border: 'none',
                  background: 'rgba(255,255,255,0.9)', color: 'var(--fg-1)',
                  cursor: 'pointer', fontSize: 16, fontWeight: 600, zIndex: 2,
                  display: 'flex', alignItems: 'center', justifyContent: 'center',
                  boxShadow: 'var(--shadow-1)',
                }}
              >‹</button>
              <button
                onClick={() => setActiveImg((activeImg + 1) % imgs.length)}
                aria-label="Next screenshot"
                style={{
                  position: 'absolute', top: '50%', right: 10, transform: 'translateY(-50%)',
                  width: 32, height: 32, borderRadius: '50%', border: 'none',
                  background: 'rgba(255,255,255,0.9)', color: 'var(--fg-1)',
                  cursor: 'pointer', fontSize: 16, fontWeight: 600, zIndex: 2,
                  display: 'flex', alignItems: 'center', justifyContent: 'center',
                  boxShadow: 'var(--shadow-1)',
                }}
              >›</button>
              <div style={{
                position: 'absolute', bottom: 10, left: '50%', transform: 'translateX(-50%)',
                display: 'flex', gap: 6, zIndex: 2,
              }}>
                {imgs.map((_, i) => (
                  <button
                    key={i}
                    onClick={() => setActiveImg(i)}
                    aria-label={`Show screenshot ${i + 1}`}
                    style={{
                      width: i === activeImg ? 18 : 6, height: 6, borderRadius: 3,
                      border: 'none', cursor: 'pointer', padding: 0,
                      background: i === activeImg ? 'var(--white)' : 'rgba(255,255,255,0.5)',
                      transition: 'width 150ms, background 150ms',
                    }}
                  />
                ))}
              </div>
            </>
          )}
        </div>
      </div>
    ) : (
      <div style={{
        background: 'var(--neutral-100)', borderRadius: 'var(--radius-xl)',
        border: '1px solid var(--border)', aspectRatio: '16/10',
        display: 'flex', alignItems: 'center', justifyContent: 'center',
        flexDirection: 'column', gap: 10,
      }}>
        <svg width="32" height="32" viewBox="0 0 32 32" fill="none">
          <rect x="2" y="2" width="28" height="28" rx="4" stroke="var(--neutral-300)" strokeWidth="1.5"/>
          <path d="M2 10h28" stroke="var(--neutral-300)" strokeWidth="1.5"/>
          <circle cx="8" cy="6" r="1.5" fill="var(--neutral-300)"/>
          <circle cx="13" cy="6" r="1.5" fill="var(--neutral-300)"/>
        </svg>
        <span style={{ fontFamily: 'var(--font-mono)', fontSize: 11, color: 'var(--fg-4)' }}>
          GIF · {name}
        </span>
      </div>
    )}
  </div>

  {/* Lightbox */}
  {lightboxOpen && imgs.length > 0 && (
    <div
      onClick={closeLightbox}
      style={{
        position: 'fixed', inset: 0, zIndex: 9998,
        background: 'rgba(10, 10, 10, 0.85)',
        backdropFilter: 'blur(4px)', WebkitBackdropFilter: 'blur(4px)',
        display: 'flex', alignItems: 'center', justifyContent: 'center',
        padding: mobile ? '20px' : '40px',
        opacity: lbVisible ? 1 : 0,
        transition: 'opacity 180ms ease-out',
        cursor: 'zoom-out',
      }}
    >
      <img
        src={imgs[activeImg]}
        alt={`${name} screenshot ${activeImg + 1} enlarged`}
        onClick={(e) => e.stopPropagation()}
        style={{
          maxWidth: '95vw', maxHeight: '90vh',
          width: 'auto', height: 'auto',
          borderRadius: 'var(--radius-lg)',
          boxShadow: '0 24px 60px rgba(0,0,0,0.5)',
          cursor: 'default',
          transform: lbVisible ? 'scale(1)' : 'scale(0.97)',
          transition: 'transform 180ms ease-out',
        }}
      />
      <button
        onClick={closeLightbox}
        aria-label="Close"
        style={{
          position: 'absolute', top: 20, right: 20,
          width: 40, height: 40, borderRadius: '50%', border: 'none',
          background: 'rgba(255,255,255,0.95)', color: 'var(--fg-1)',
          cursor: 'pointer', fontSize: 18, fontWeight: 500,
          display: 'flex', alignItems: 'center', justifyContent: 'center',
          boxShadow: 'var(--shadow-2)',
        }}
      >×</button>
      {imgs.length > 1 && (
        <>
          <button
            onClick={(e) => { e.stopPropagation(); setActiveImg((activeImg - 1 + imgs.length) % imgs.length); }}
            aria-label="Previous screenshot"
            style={{
              position: 'absolute', top: '50%', left: mobile ? 12 : 24, transform: 'translateY(-50%)',
              width: 44, height: 44, borderRadius: '50%', border: 'none',
              background: 'rgba(255,255,255,0.95)', color: 'var(--fg-1)',
              cursor: 'pointer', fontSize: 22, fontWeight: 500,
              display: 'flex', alignItems: 'center', justifyContent: 'center',
              boxShadow: 'var(--shadow-2)',
            }}
          >‹</button>
          <button
            onClick={(e) => { e.stopPropagation(); setActiveImg((activeImg + 1) % imgs.length); }}
            aria-label="Next screenshot"
            style={{
              position: 'absolute', top: '50%', right: mobile ? 12 : 24, transform: 'translateY(-50%)',
              width: 44, height: 44, borderRadius: '50%', border: 'none',
              background: 'rgba(255,255,255,0.95)', color: 'var(--fg-1)',
              cursor: 'pointer', fontSize: 22, fontWeight: 500,
              display: 'flex', alignItems: 'center', justifyContent: 'center',
              boxShadow: 'var(--shadow-2)',
            }}
          >›</button>
        </>
      )}
    </div>
  )}
  </>
  );
};

Object.assign(window, { FeatureTile, ToolDetail });