/* POI Card — contribution credential.
   Photo-primary: real imagery fills the card, glyph is a small fingerprint badge.
   Three styles: default (full-photo), stamp (photo+stamp overlay), minimal (glyph only). */

function PoiCard({ name, place, role, date, seed, rarity = 'standard', cardStyle = 'default' }) {
  const accent = rarity === 'first-refresh'
    ? 'var(--status-rare)'
    : rarity === 'hidden-gem'
    ? 'var(--status-stale)'
    : 'var(--teal)';

  const isMinimal = cardStyle === 'minimal';
  const isStamp = cardStyle === 'stamp';
  const isRare = rarity !== 'standard';

  const photo = poiPhoto(seed, 520, 720);

  const rarityLabel = rarity === 'first-refresh' ? 'First Refresh'
    : rarity === 'hidden-gem' ? 'Hidden Gem'
    : 'Verified';

  /* Minimal style — glyph only, like the original */
  if (isMinimal) {
    return (
      <div style={{
        width:260, height:360, borderRadius:16,
        background:'var(--bg-elev)',
        border: isRare ? '1px solid transparent' : '1px solid var(--line)',
        backgroundImage: isRare ? `
          linear-gradient(var(--bg-elev), var(--bg-elev)),
          linear-gradient(135deg, oklch(0.85 0.06 295), oklch(0.88 0.05 195), oklch(0.88 0.06 65))
        ` : 'none',
        backgroundOrigin: isRare ? 'border-box' : undefined,
        backgroundClip: isRare ? 'padding-box, border-box' : undefined,
        padding:18, display:'flex', flexDirection:'column', position:'relative', overflow:'hidden',
        boxShadow:'0 12px 30px -10px rgba(20,32,31,0.12)',
      }}>
        <div style={{display:'flex', justifyContent:'space-between', alignItems:'center', marginBottom:14}}>
          <span style={{display:'inline-flex', alignItems:'center', gap:5, fontSize:11, color:accent, fontWeight:600}}>
            <span style={{width:5, height:5, borderRadius:'50%', background:accent}}/>
            {rarityLabel}
          </span>
          <span className="mono" style={{fontSize:9, color:'var(--ink-3)'}}>№ 0421</span>
        </div>
        <div style={{flex:1, display:'flex', alignItems:'center', justifyContent:'center', background:'var(--bg-sunk)', borderRadius:10, marginBottom:14}}>
          <CoordGlyph seed={seed} size={140} accent={accent}/>
        </div>
        <div>
          <div style={{fontSize:18, fontWeight:700, letterSpacing:'-0.015em', lineHeight:1.15, marginBottom:2}}>{name}</div>
          <div style={{fontSize:12, color:'var(--ink-3)', marginBottom:10}}>{place}</div>
          <div style={{display:'grid', gridTemplateColumns:'1fr 1fr', paddingTop:10, borderTop:'1px dashed var(--line)'}}>
            <div>
              <div style={{fontSize:10, color:'var(--ink-3)', marginBottom:2}}>Role</div>
              <div style={{fontSize:12, fontWeight:600}}>{role}</div>
            </div>
            <div style={{textAlign:'right'}}>
              <div style={{fontSize:10, color:'var(--ink-3)', marginBottom:2}}>Stamped</div>
              <div style={{fontSize:12, fontWeight:600, fontFamily:'var(--font-mono)'}}>{date}</div>
            </div>
          </div>
        </div>
      </div>
    );
  }

  /* Photo-primary card — full bleed image with gradient overlay */
  return (
    <div style={{
      width:260, height:360,
      borderRadius:16,
      position:'relative', overflow:'hidden',
      boxShadow: isRare
        ? `0 16px 40px -8px rgba(20,32,31,0.22), 0 0 0 1.5px ${accent}66`
        : '0 12px 32px -10px rgba(20,32,31,0.15)',
    }}>
      {/* Full-bleed photo */}
      <img src={photo} alt={name} className="photo-cover" style={{position:'absolute', inset:0}}/>

      {/* Gradient overlay — strong at bottom for text legibility */}
      <div className="photo-overlay"/>

      {/* Stamp overlay (stamp style only) */}
      {isStamp && (
        <div style={{
          position:'absolute', top:16, right:16,
          width:64, height:64, borderRadius:'50%',
          border:`2px solid ${accent}`,
          color:'#fff',
          display:'flex', flexDirection:'column', alignItems:'center', justifyContent:'center',
          fontFamily:'var(--font-mono)', fontSize:8, fontWeight:700, letterSpacing:'0.06em',
          transform:'rotate(-10deg)',
          background:'rgba(10,16,16,0.55)',
          backdropFilter:'blur(4px)',
          textTransform:'uppercase',
        }}>
          <div>VERIFIED</div>
          <div style={{fontSize:7, opacity:0.8, marginTop:2}}>{date.slice(-5)}</div>
        </div>
      )}

      {/* Top bar: glyph badge + rarity label */}
      <div style={{
        position:'absolute', top:14, left:14, right:14,
        display:'flex', justifyContent:'space-between', alignItems:'flex-start',
      }}>
        {/* Small CoordGlyph fingerprint badge */}
        <div style={{
          background:'rgba(10,16,16,0.45)', backdropFilter:'blur(8px)',
          borderRadius:8, padding:3,
          border:'1px solid rgba(255,255,255,0.12)',
        }}>
          <CoordGlyph seed={seed} size={28} accent={accent}/>
        </div>

        {/* Rarity / status label */}
        <div style={{
          background:'rgba(10,16,16,0.55)', backdropFilter:'blur(6px)',
          border:'1px solid rgba(255,255,255,0.14)',
          borderRadius:6, padding:'4px 8px',
          display:'inline-flex', alignItems:'center', gap:5,
        }}>
          <span style={{width:5, height:5, borderRadius:'50%', background:accent, display:'inline-block'}}/>
          <span style={{fontFamily:'var(--font-mono)', fontSize:8.5, color:'#fff', letterSpacing:'0.05em', textTransform:'uppercase'}}>
            {rarityLabel}
          </span>
        </div>
      </div>

      {/* Bottom content overlay */}
      <div style={{
        position:'absolute', bottom:0, left:0, right:0,
        padding:'16px 18px 18px',
      }}>
        <div style={{fontSize:21, fontWeight:700, color:'#fff', letterSpacing:'-0.02em', lineHeight:1.15, marginBottom:3}}>
          {name}
        </div>
        <div style={{fontSize:12, color:'rgba(255,255,255,0.65)', marginBottom:10}}>
          {place}
        </div>
        <div style={{
          display:'flex', justifyContent:'space-between', alignItems:'center',
          paddingTop:10, borderTop:'1px solid rgba(255,255,255,0.14)',
        }}>
          <div>
            <div style={{fontSize:10, color:'rgba(255,255,255,0.5)', marginBottom:1}}>Role</div>
            <div style={{fontSize:13, fontWeight:600, color:'#fff'}}>{role}</div>
          </div>
          <div style={{textAlign:'right'}}>
            <div style={{fontSize:10, color:'rgba(255,255,255,0.5)', marginBottom:1}}>Stamped</div>
            <div style={{fontSize:13, fontWeight:600, color:'#fff', fontFamily:'var(--font-mono)'}}>{date}</div>
          </div>
        </div>
      </div>
    </div>
  );
}

window.PoiCard = PoiCard;