/* @jsx React.createElement */
const { useState, useEffect, useRef } = React;

// ============= Primitives =============

function StatusLabel({ children, dim }) {
  return (
    <div style={{ display: 'flex', alignItems: 'center', gap: 8 }}>
      <span style={{
        width: 8, height: 8, borderRadius: '50%',
        background: dim ? '#3A3A3A' : '#C6FF3D',
        flexShrink: 0,
      }} />
      <span style={{
        fontSize: 11, letterSpacing: '0.1em', textTransform: 'uppercase',
        color: '#7A7A7A', fontWeight: 600, fontFamily: 'Inter, system-ui',
      }}>{children}</span>
    </div>
  );
}

function Card({ children, footer = true, date, style }) {
  return (
    <div style={{
      background: '#0E0E0E',
      borderRadius: 20,
      padding: 24,
      boxShadow: 'inset 0 0 0 1px rgba(255,255,255,0.04)',
      position: 'relative',
      overflow: 'hidden',
      minHeight: 280,
      display: 'flex',
      flexDirection: 'column',
      ...style,
    }}>
      {children}
      {footer && (
        <div style={{
          position: 'absolute', left: 24, right: 24, bottom: 16,
          display: 'flex', justifyContent: 'space-between', alignItems: 'center',
        }}>
          <span style={{
            display: 'inline-flex', alignItems: 'center', gap: 8,
            color: '#7A7A7A', fontSize: 13, fontFamily: 'Inter',
          }}>
            <span style={{ width: 6, height: 6, borderRadius: '50%', background: '#3A3A3A' }} />
            getfiit
          </span>
          {date && <span style={{
            fontSize: 11, letterSpacing: '0.08em', textTransform: 'uppercase',
            color: '#7A7A7A', fontWeight: 600, fontFamily: 'Inter',
          }}>{date}</span>}
        </div>
      )}
    </div>
  );
}

function HeroNumber({ value, unit, size = 96 }) {
  return (
    <div style={{
      fontFamily: "'Bricolage Grotesque', Inter, sans-serif",
      fontWeight: 800,
      fontSize: size,
      lineHeight: 0.92,
      letterSpacing: '-0.03em',
      color: '#F5F5F5',
      fontVariantNumeric: 'tabular-nums',
      display: 'flex', alignItems: 'baseline', gap: 6,
    }}>
      <span>{value}</span>
      {unit && <span style={{ fontSize: size * 0.32, color: '#7A7A7A', fontWeight: 800 }}>{unit}</span>}
    </div>
  );
}

function Label({ children, color = '#7A7A7A' }) {
  return <div style={{
    fontSize: 11, letterSpacing: '0.1em', textTransform: 'uppercase',
    color, fontWeight: 600, fontFamily: 'Inter',
  }}>{children}</div>;
}

function Pill({ children, accent = true, icon }) {
  return (
    <span style={{
      display: 'inline-flex', alignItems: 'center', gap: 6,
      padding: '8px 14px', borderRadius: 999,
      background: accent ? 'rgba(198,255,61,0.12)' : '#161616',
      color: accent ? '#C6FF3D' : '#F5F5F5',
      fontWeight: 700, fontSize: 14, fontFamily: 'Inter',
    }}>
      {icon}
      {children}
    </span>
  );
}

function Button({ children, variant = 'primary', onClick, full }) {
  const style = variant === 'primary' ? {
    background: '#C6FF3D', color: '#0A1100', border: 0,
  } : {
    background: 'transparent', color: '#F5F5F5',
    border: '1px solid #1F1F1F',
  };
  return (
    <button onClick={onClick} style={{
      ...style,
      padding: '14px 22px', borderRadius: 999,
      fontFamily: 'Inter', fontWeight: variant === 'primary' ? 700 : 600,
      fontSize: 16, cursor: 'pointer',
      width: full ? '100%' : 'auto',
      transition: 'transform 120ms, filter 120ms',
    }}
    onMouseDown={(e) => e.currentTarget.style.transform = 'scale(0.98)'}
    onMouseUp={(e) => e.currentTarget.style.transform = 'scale(1)'}
    onMouseLeave={(e) => e.currentTarget.style.transform = 'scale(1)'}
    >{children}</button>
  );
}

function RealQrCode({ size = 80 }) {
  return <img src="qrcode.png" width={size} height={size} alt="Scan to open WhatsApp" style={{ borderRadius: 8, display: 'block' }} />;
}

window.GF = { StatusLabel, Card, HeroNumber, Label, Pill, Button, RealQrCode };