/* Card system — four variants, one design language. */

const cardStyles = {
  base: { display: 'flex', flexDirection: 'column', gap: 10, cursor: 'pointer' },
  photoBox: (aspect) => ({
    position: 'relative',
    aspectRatio: aspect,
    borderRadius: 'var(--radius-lg)',
    overflow: 'hidden',
    background: 'var(--sand)',
  }),
  img: { width: '100%', height: '100%', objectFit: 'cover', transition: 'transform 500ms cubic-bezier(0.2,0,0.2,1)' },
  heart: {
    position: 'absolute', top: 12, right: 12,
    width: 32, height: 32,
    background: 'rgba(255,255,255,0.92)',
    backdropFilter: 'blur(4px)',
    borderRadius: 999,
    display: 'flex', alignItems: 'center', justifyContent: 'center',
    color: 'var(--ink)',
    border: 'none', cursor: 'pointer',
  },
  cornerBadge: {
    position: 'absolute', top: 12, left: 12,
    background: 'rgba(11, 31, 37, 0.86)',
    color: 'var(--paper)',
    fontFamily: 'var(--font-mono)',
    fontSize: 10, fontWeight: 500,
    textTransform: 'uppercase', letterSpacing: '0.08em',
    padding: '5px 9px',
    borderRadius: 4,
  },
  vendor: {
    fontFamily: 'var(--font-ui)',
    fontSize: 10.5, fontWeight: 700,
    letterSpacing: '0.16em', textTransform: 'uppercase',
    color: 'var(--ink-mute)',
    margin: 0,
  },
  title: {
    fontFamily: 'var(--font-display)',
    fontWeight: 700,
    fontSize: 19, lineHeight: 1.2,
    letterSpacing: '-0.015em',
    color: 'var(--ink)',
    margin: 0, textWrap: 'balance',
    fontVariationSettings: "'opsz' 24, 'SOFT' 50",
  },
  metaRow: {
    display: 'flex', alignItems: 'center', justifyContent: 'space-between',
    gap: 8, fontSize: 13,
  },
  metaLeft: { color: 'var(--ink-mute)', display: 'flex', alignItems: 'center', gap: 6 },
  rating: {
    display: 'inline-flex', alignItems: 'center', gap: 4,
    fontSize: 13, fontWeight: 600,
    color: 'var(--ink)',
  },
  price: {
    fontFamily: 'var(--font-display)',
    fontWeight: 700, fontSize: 17,
    letterSpacing: '-0.01em',
    color: 'var(--ink)',
    fontVariationSettings: "'opsz' 24",
  },
  priceUnit: {
    fontFamily: 'var(--font-ui)',
    fontWeight: 500, fontSize: 12,
    color: 'var(--ink-mute)',
    letterSpacing: 0,
    marginLeft: 2,
  },
  transferBadge: {
    display: 'inline-flex', alignItems: 'center', gap: 6,
    fontFamily: 'var(--font-mono)',
    fontSize: 11, fontWeight: 500,
    color: 'var(--lagoon)',
    letterSpacing: '0.04em',
    textTransform: 'uppercase',
  },
  colorDots: { display: 'inline-flex', gap: 4 },
  colorDot: (c) => ({
    width: 12, height: 12, borderRadius: 999,
    background: c,
    border: '1px solid rgba(11,31,37,0.18)',
  }),
};

const Photo = ({ src, alt, kind = 'aerial', label, aspect = '4/3', children }) => {
  const phClass = `ph ph-${kind}`;
  return (
    <div style={cardStyles.photoBox(aspect)}>
      {src ? (
        <img src={src} alt={alt || ''} style={cardStyles.img} loading="lazy"/>
      ) : (
        <div className={phClass}><span className="label">{label}</span></div>
      )}
      {children}
    </div>
  );
};

function HeartButton({ id }) {
  const [state] = window.MalziveState.useMalziveState();
  const on = id ? (state.saved || []).includes(id) : false;
  return (
    <button
      style={{ ...cardStyles.heart, color: on ? 'var(--coral)' : 'var(--ink)' }}
      onClick={(e) => {
        e.preventDefault(); e.stopPropagation();
        if (id) window.MalziveState.savedToggle(id);
      }}
      aria-label={on ? 'Unsave' : 'Save'}
    >
      <Icon name={on ? 'heart-fill' : 'heart'} size={16} stroke={1.6}/>
    </button>
  );
}

/* Stay card — 4:3 photo, atoll/property type, transfer time, nightly */
function StayCard({ photo, kind = 'aerial', label, atoll, kindOf = 'Resort', name, transfer = '35min seaplane', rating = 4.8, reviews = 184, price, currency = '$', perUnit = 'night', cancellation, href = 'prototype-stay.html' }) {
  return (
    <a href={href} style={cardStyles.base}>
      <Photo src={photo} kind={kind} label={label} aspect="4/3">
        <HeartButton id={name}/>
        {cancellation && <span style={cardStyles.cornerBadge}>{cancellation}</span>}
      </Photo>
      <div>
        <p style={cardStyles.vendor}>{atoll} · {kindOf}</p>
        <h3 style={cardStyles.title}>{name}</h3>
      </div>
      <div style={cardStyles.metaRow}>
        <span style={cardStyles.transferBadge}>
          <Icon name="boat" size={12}/> {transfer}
        </span>
        <span style={cardStyles.rating}>
          <Icon name="star" size={12}/> {rating} <span style={{color:'var(--ink-mute)', fontWeight:400}}>({reviews})</span>
        </span>
      </div>
      <div>
        <span style={cardStyles.price}>{currency}{price}</span>
        <span style={cardStyles.priceUnit}>/ {perUnit}</span>
      </div>
    </a>
  );
}

/* Charter card — 16:9 photo, route arc, cabins, per-trip price */
function CharterCard({ photo, kind = 'water', label, route, name, cabins, length, dive, price, currency = '$', perUnit = 'pp · trip', season, href = 'prototype-charter.html' }) {
  return (
    <a href={href} style={cardStyles.base}>
      <Photo src={photo} kind={kind} label={label} aspect="16/9">
        <HeartButton id={name}/>
        {season && <span style={cardStyles.cornerBadge}>{season}</span>}
      </Photo>
      <div>
        <p style={cardStyles.vendor}>Boat · {route}</p>
        <h3 style={cardStyles.title}>{name}</h3>
      </div>
      <div style={cardStyles.metaRow}>
        <span style={cardStyles.metaLeft}>
          <Icon name="users" size={13}/> {cabins} cabins · {length}m
          {dive ? <> · <Icon name="diving" size={13}/> {dive}</> : null}
        </span>
      </div>
      <div>
        <span style={cardStyles.price}>{currency}{price}</span>
        <span style={cardStyles.priceUnit}>/ {perUnit}</span>
      </div>
    </a>
  );
}

/* Shop card — 1:1 photo, vendor, product, color dots, fixed price */
function ShopCard({ photo, kind = 'product', label, vendor, name, colors = [], sizes = '', price, mvr, lead, href = 'prototype-shop.html', soldCount }) {
  return (
    <a href={href} style={cardStyles.base}>
      <Photo src={photo} kind={kind} label={label} aspect="1/1">
        <HeartButton id={name}/>
        {soldCount && <span style={cardStyles.cornerBadge}>{soldCount} sold</span>}
      </Photo>
      <div>
        <p style={cardStyles.vendor}>{vendor}</p>
        <h3 style={cardStyles.title}>{name}</h3>
      </div>
      <div style={cardStyles.metaRow}>
        <span style={cardStyles.metaLeft}>
          {colors.length > 0 && (
            <span style={cardStyles.colorDots}>
              {colors.slice(0, 4).map((c, i) => <span key={i} style={cardStyles.colorDot(c)}/>)}
              {colors.length > 4 && <span style={{ fontSize: 11, color: 'var(--ink-mute)', alignSelf: 'center', marginLeft: 4 }}>+{colors.length - 4}</span>}
            </span>
          )}
          {sizes && <span style={{fontSize: 12, color: 'var(--ink-mute)'}}>{sizes}</span>}
          {lead && <span style={{fontSize: 12, color: 'var(--ink-mute)'}}><Icon name="package" size={11}/> {lead}</span>}
        </span>
      </div>
      <div>
        <span style={cardStyles.price}>${price}</span>
        {mvr && <span style={cardStyles.priceUnit}>· MVR {mvr}</span>}
      </div>
    </a>
  );
}

/* Food card — 1:1 photo, kitchen + island, dish, lead time pill, price + cal */
function FoodCard({ photo, kind = 'life', label, kitchen, island, name, leadTime = 'Ready in 25 min', cal, price, mvr, dietary = [], href = 'prototype-food.html' }) {
  return (
    <a href={href} style={cardStyles.base}>
      <Photo src={photo} kind={kind} label={label} aspect="1/1">
        <HeartButton id={name}/>
        <span style={cardStyles.cornerBadge}>{leadTime}</span>
      </Photo>
      <div>
        <p style={cardStyles.vendor}>{kitchen} · {island}</p>
        <h3 style={cardStyles.title}>{name}</h3>
      </div>
      <div style={cardStyles.metaRow}>
        <span style={cardStyles.metaLeft}>
          {cal && <span style={{ fontFamily: 'var(--font-mono)', fontSize: 11, color: 'var(--lagoon)', letterSpacing: '0.04em', textTransform:'uppercase' }}><Icon name="leaf" size={11}/> {cal} kcal</span>}
          {dietary.map((d, i) => <span key={i} className="chip chip-shallow" style={{height:20, padding:'0 8px', fontSize:10, letterSpacing:'0.06em', textTransform:'uppercase'}}>{d}</span>)}
        </span>
      </div>
      <div>
        <span style={cardStyles.price}>${price}</span>
        {mvr && <span style={cardStyles.priceUnit}>· MVR {mvr}</span>}
      </div>
    </a>
  );
}

Object.assign(window, { Photo, HeartButton, StayCard, CharterCard, ShopCard, FoodCard });