// Kafana — phone screen mockups (capture sheet, passport card, library)

// Capture sheet — the hero phone. Uses the real iOS screenshot as the source of truth.
function CaptureSheet({ dark = false }) {
  return (
    <img
      src="assets/hero-app-mockup.png"
      alt="Kafana — Log a Glass screen"
      style={{
        display: 'block',
        width: '100%',
        height: '100%',
        objectFit: 'cover',
        objectPosition: 'top center',
      }}
    />
  );
}

// Legacy capture sheet (CSS-rendered) — kept for reference but unused.
function _CaptureSheetLegacy({ dark = false }) {
  const cardBg = dark ? 'var(--d-card)' : 'var(--cream)';
  const textColor = dark ? 'var(--d-text)' : 'var(--ink)';
  const smoke = dark ? 'var(--d-smoke)' : 'var(--smoke)';
  const border = dark ? 'var(--d-whisper)' : 'var(--whisper)';

  return (
    <div style={{
      background: dark ? 'var(--d-bg)' : 'var(--cream)',
      height: '100%',
      display: 'flex',
      flexDirection: 'column',
    }}>
      <StatusBar dark={dark} />

      {/* Top bar — title + close */}
      <div style={{
        display: 'flex', alignItems: 'center', justifyContent: 'space-between',
        padding: '12px 20px 8px',
      }}>
        <span style={{
          fontFamily: 'var(--sans)', fontSize: 11, fontWeight: 600,
          letterSpacing: '0.12em', textTransform: 'uppercase',
          color: smoke,
        }}>New Pour</span>
        <span style={{ fontFamily: 'var(--sans)', fontSize: 15, color: smoke }}>Cancel</span>
      </div>

      {/* Photo */}
      <div style={{ padding: '8px 20px 16px' }}>
        <div className="kf-img plum" style={{
          height: 180, borderRadius: 14,
          alignItems: 'flex-end', padding: 10,
        }}>
          {/* hand-drawn-ish plum cluster using simple circles */}
          <svg viewBox="0 0 200 140" width="100%" height="100%" style={{ position: 'absolute', inset: 0 }}>
            <ellipse cx="78" cy="78" rx="32" ry="34" fill="#6B2A1C" opacity="0.85" />
            <ellipse cx="118" cy="68" rx="28" ry="30" fill="#4A1B0C" opacity="0.92" />
            <ellipse cx="98" cy="100" rx="30" ry="28" fill="#7E3320" opacity="0.85" />
            <path d="M78 46 Q82 36 92 38" stroke="#3a2410" strokeWidth="2" fill="none" strokeLinecap="round"/>
            <path d="M118 38 Q124 30 134 34" stroke="#3a2410" strokeWidth="2" fill="none" strokeLinecap="round"/>
            {/* highlight blooms */}
            <ellipse cx="68" cy="68" rx="6" ry="4" fill="rgba(251,248,241,0.18)" />
            <ellipse cx="110" cy="58" rx="5" ry="3" fill="rgba(251,248,241,0.18)" />
          </svg>
          <span className="kf-img-cap" style={{ position: 'relative', zIndex: 1 }}>photo · plums on wood</span>
        </div>
      </div>

      {/* Fruit pills */}
      <div style={{ padding: '0 20px 16px' }}>
        <div style={{
          fontFamily: 'var(--sans)', fontSize: 11, fontWeight: 600,
          letterSpacing: '0.12em', textTransform: 'uppercase',
          color: smoke, marginBottom: 8,
        }}>Fruit</div>
        <div style={{ display: 'flex', gap: 6, flexWrap: 'wrap' }}>
          <span style={{
            display: 'inline-flex', alignItems: 'center', gap: 6,
            height: 30, padding: '0 12px', borderRadius: 999,
            background: 'var(--ink)', color: 'var(--cream)',
            fontFamily: 'var(--sans)', fontSize: 13, fontWeight: 500,
          }}>Šljiva</span>
          {['Kajsija', 'Dunja', 'Loza', 'Kruška'].map(f => (
            <span key={f} style={{
              display: 'inline-flex', alignItems: 'center',
              height: 30, padding: '0 12px', borderRadius: 999,
              border: `0.5px solid ${border}`,
              fontFamily: 'var(--sans)', fontSize: 13, fontWeight: 400,
              color: textColor,
            }}>{f}</span>
          ))}
        </div>
      </div>

      {/* Place row */}
      <div style={{
        padding: '14px 20px',
        borderTop: `0.5px solid ${border}`,
        borderBottom: `0.5px solid ${border}`,
        display: 'flex', alignItems: 'center', gap: 12,
      }}>
        <Icon name="pin" size={18} color={smoke} />
        <div style={{ flex: 1 }}>
          <div style={{ fontFamily: 'var(--sans)', fontSize: 15, fontWeight: 500, color: textColor }}>Tri Šešira</div>
          <div style={{ fontFamily: 'var(--sans)', fontSize: 13, color: smoke, marginTop: 1 }}>Skadarlija, Belgrade</div>
        </div>
      </div>

      {/* Stars */}
      <div style={{
        padding: '14px 20px',
        borderBottom: `0.5px solid ${border}`,
        display: 'flex', alignItems: 'center', justifyContent: 'space-between',
      }}>
        <span style={{ fontFamily: 'var(--sans)', fontSize: 15, color: textColor }}>Rating</span>
        <div style={{ display: 'flex', gap: 4 }}>
          {[1,2,3,4].map(i => <span key={i} className="kf-star">★</span>)}
          <span className="kf-star muted">★</span>
        </div>
      </div>

      {/* ABV row */}
      <div style={{
        padding: '14px 20px',
        borderBottom: `0.5px solid ${border}`,
        display: 'flex', alignItems: 'center', justifyContent: 'space-between',
      }}>
        <span style={{ fontFamily: 'var(--sans)', fontSize: 15, color: textColor }}>ABV</span>
        <span className="t-mono" style={{ fontSize: 15, color: textColor, fontWeight: 500 }}>42<span style={{ color: smoke }}>%</span></span>
      </div>

      <div style={{ flex: 1 }} />

      {/* Save · Cheers */}
      <div style={{ padding: '12px 20px 28px' }}>
        <button className="kf-cta" style={{
          width: '100%', borderRadius: 14, padding: '16px 0',
          fontSize: 17,
        }}>Save · Cheers</button>
      </div>
    </div>
  );
}

// Passport card — uses the real iOS screenshot.
function PassportCard({ dark = false, scale = 1 }) {
  return (
    <img
      src="assets/passport-mockup.png"
      alt="Kafana — Rakija Passport"
      style={{
        display: 'block',
        width: 380 * scale,
        height: 'auto',
        borderRadius: 16,
        border: `0.5px solid ${dark ? 'var(--d-whisper)' : 'var(--whisper)'}`,
      }}
    />
  );
}

// Legacy passport (CSS-rendered) — kept for reference but unused.
function _PassportCardLegacy({ dark = false, scale = 1 }) {
  const bg = dark ? 'var(--d-card)' : 'var(--cream)';
  const text = dark ? 'var(--d-text)' : 'var(--ink)';
  const smoke = dark ? 'var(--d-smoke)' : 'var(--smoke)';
  const border = dark ? 'var(--d-whisper)' : 'var(--whisper)';

  return (
    <div style={{
      background: bg,
      border: `0.5px solid ${border}`,
      borderRadius: 16,
      padding: 0,
      width: 380 * scale,
      fontFamily: 'var(--sans)',
      color: text,
      overflow: 'hidden',
    }}>
      {/* Header */}
      <div style={{
        padding: '24px 24px 18px',
        display: 'flex', alignItems: 'flex-start', justifyContent: 'space-between',
      }}>
        <div>
          <div style={{
            fontFamily: 'var(--sans)', fontSize: 11, fontWeight: 600,
            letterSpacing: '0.12em', textTransform: 'uppercase',
            color: smoke, marginBottom: 4,
          }}>Rakija Passport · 2026</div>
          <div style={{ fontFamily: 'var(--serif)', fontSize: 26, fontWeight: 600, letterSpacing: '-0.02em', color: text }}>
            Marko Petrović
          </div>
        </div>
        <div style={{
          width: 38, height: 38, borderRadius: 999,
          border: `0.5px solid ${border}`,
          display: 'flex', alignItems: 'center', justifyContent: 'center',
        }}>
          <Icon name="passport" size={20} color={text} />
        </div>
      </div>

      {/* Map */}
      <div style={{
        margin: '0 24px 0',
        background: dark ? '#1F1D18' : '#F5F1E5',
        border: `0.5px solid ${border}`,
        borderRadius: 12,
        padding: '16px 12px',
        display: 'flex', justifyContent: 'center',
      }}>
        <BalkanMap width={300} visited={['rs', 'ba', 'me', 'hr', 'mk']} dark={dark} />
      </div>

      {/* Coral hero block — full bleed */}
      <div style={{
        marginTop: 24,
        background: 'var(--copper)',
        padding: '28px 28px 32px',
      }}>
        <div style={{
          fontFamily: 'var(--sans)', fontSize: 11, fontWeight: 600,
          letterSpacing: '0.12em', textTransform: 'uppercase',
          color: 'rgba(251, 248, 241, 0.7)',
          marginBottom: 14,
        }}>Rakija Passport · 2026</div>
        <div style={{
          fontFamily: 'var(--serif)', fontSize: 52, fontWeight: 600,
          letterSpacing: '-0.025em', lineHeight: 1.0,
          color: 'var(--cream)',
        }}>
          47 glasses.
        </div>
        <div style={{
          fontFamily: 'var(--serif)', fontSize: 52, fontWeight: 600,
          letterSpacing: '-0.025em', lineHeight: 1.05,
          color: 'rgba(251, 248, 241, 0.6)',
          marginTop: 4,
        }}>
          5 countries.
        </div>
      </div>

      {/* Plum favorite-pour band — full bleed */}
      <div style={{
        background: 'var(--plum)',
        padding: '22px 28px 24px',
        display: 'flex', alignItems: 'center', justifyContent: 'space-between',
        gap: 16,
      }}>
        <div style={{ flex: 1, minWidth: 0 }}>
          <div style={{
            fontFamily: 'var(--sans)', fontSize: 11, fontWeight: 600,
            letterSpacing: '0.12em', textTransform: 'uppercase',
            color: 'var(--honey-light)',
            marginBottom: 6,
          }}>Favorite pour</div>
          <div style={{
            fontFamily: 'var(--serif)', fontSize: 36, fontWeight: 500,
            fontStyle: 'italic', letterSpacing: '-0.01em',
            color: 'var(--cream)', lineHeight: 1,
          }}>
            Šljiva
          </div>
        </div>
        {/* Small plum-on-wood circular illustration */}
        <div style={{
          width: 56, height: 56, borderRadius: 999,
          background: '#C9A89A',
          backgroundImage: 'repeating-linear-gradient(135deg, rgba(74,27,12,0.16) 0px, rgba(74,27,12,0.16) 1px, transparent 1px, transparent 7px)',
          flexShrink: 0,
          display: 'flex', alignItems: 'center', justifyContent: 'center',
          overflow: 'hidden',
        }}>
          <svg width="40" height="40" viewBox="0 0 40 40">
            <ellipse cx="15" cy="22" rx="10" ry="11" fill="#4A1B0C" />
            <ellipse cx="24" cy="20" rx="9" ry="10" fill="#6B2A1C" />
            <path d="M15 9 Q19 4 26 7" stroke="#3a2410" strokeWidth="1.6" fill="none" strokeLinecap="round"/>
          </svg>
        </div>
      </div>

      {/* Secondary stats — cities + fruits */}
      <div style={{
        display: 'grid', gridTemplateColumns: '1fr 1fr',
      }}>
        {[
          { n: '12', label: 'cities' },
          { n: '8', label: 'fruits' },
        ].map((s, i) => (
          <div key={s.label} style={{
            padding: '18px 24px 22px',
            borderRight: i === 0 ? `0.5px solid ${border}` : 'none',
          }}>
            <div style={{
              fontFamily: 'var(--serif)', fontSize: 24, fontWeight: 600,
              letterSpacing: '-0.02em', lineHeight: 1,
              color: dark ? 'var(--copper)' : 'var(--copper-deep)',
            }}>{s.n}</div>
            <div style={{
              fontFamily: 'var(--sans)', fontSize: 12,
              color: smoke, marginTop: 6,
            }}>{s.label}</div>
          </div>
        ))}
      </div>
    </div>
  );
}

// Small library card — single fruit with its meta + real SVG icon
function FruitCard({ fruit }) {
  return (
    <div style={{
      background: 'var(--cream)',
      border: '0.5px solid var(--whisper)',
      borderRadius: 12,
      padding: 16,
      display: 'flex',
      flexDirection: 'column',
    }}>
      <div className="kf-img plum" style={{
        aspectRatio: '1 / 1',
        borderRadius: 8, padding: 0,
        alignItems: 'center', justifyContent: 'center', display: 'flex',
        marginBottom: 12,
        background: '#F1E5D5',
        backgroundImage: 'repeating-linear-gradient(135deg, rgba(74, 27, 12, 0.06) 0px, rgba(74, 27, 12, 0.06) 1px, transparent 1px, transparent 8px)',
      }}>
        <img
          src={`assets/fruits/${fruit.file}.svg`}
          alt={fruit.latin}
          style={{ width: '72%', height: '72%', objectFit: 'contain', display: 'block' }}
        />
      </div>
      <div style={{ fontFamily: 'var(--serif)', fontSize: 18, fontWeight: 600, color: 'var(--ink)', letterSpacing: '-0.01em' }}>
        {fruit.latin}
      </div>
      <div style={{ fontFamily: 'var(--sans)', fontSize: 13, color: 'var(--smoke)', marginTop: 2 }}>
        {fruit.en}
      </div>
    </div>
  );
}

Object.assign(window, { CaptureSheet, PassportCard, FruitCard });