// Green Voice Design System Tokens & Common Utils

const GV = {
  color: {
    forestDeep: '#1A432E',
    forestPrimary: '#002d19',
    primaryFixed: '#c0edcf',
    primaryFixedDim: '#a4d1b4',
    prestigeGold: '#C5A059',
    secondary: '#775a19',
    secondaryContainer: '#fed488',
    surface: '#faf9f4',
    surfaceCream: '#F9F8F3',
    surfaceContainer: '#efeee9',
    surfaceContainerLow: '#f5f4ef',
    surfaceContainerHigh: '#e9e8e3',
    borderSubtle: '#E5E3D8',
    charcoal: '#333333',
    onSurface: '#1b1c19',
    onSurfaceVariant: '#414943',
    outline: '#717972',
    outlineVariant: '#c1c8c1',
    white: '#ffffff',
    error: '#ba1a1a',
    statusVerified: '#1A432E',
  },
  font: {
    serif: '"Source Serif 4", "Noto Serif KR", Georgia, serif',
    sans: '"Hanken Grotesk", "Noto Sans KR", -apple-system, system-ui, sans-serif',
  },
  shadow: {
    card: '0 4px 20px -2px rgba(26, 67, 46, 0.06)',
    cardHover: '0 8px 24px -2px rgba(26, 67, 46, 0.12)',
    floating: '0 12px 32px -4px rgba(26, 67, 46, 0.18)',
  },
  radius: {
    sm: 4,
    md: 8,
    lg: 12,
    xl: 16,
    pill: 999,
  }
};

// Icon is defined in gv-icons.jsx (SVG-based, no font dependency)

// Small pill/tag
function Chip({ children, active, onClick, style }) {
  return (
    <button
      onClick={onClick}
      style={{
        display: 'inline-flex',
        alignItems: 'center',
        gap: 4,
        padding: '7px 14px',
        borderRadius: 999,
        border: `1px solid ${active ? GV.color.forestDeep : GV.color.borderSubtle}`,
        background: active ? GV.color.forestDeep : GV.color.white,
        color: active ? GV.color.white : GV.color.onSurfaceVariant,
        fontFamily: GV.font.sans,
        fontSize: 13,
        fontWeight: active ? 600 : 500,
        cursor: 'pointer',
        whiteSpace: 'nowrap',
        transition: 'all 0.15s',
        ...style,
      }}
    >
      {children}
    </button>
  );
}

// Visit-verified badge
function VerifiedBadge({ style }) {
  return (
    <div style={{
      display: 'inline-flex',
      alignItems: 'center',
      gap: 4,
      padding: '4px 10px',
      borderRadius: 999,
      background: 'rgba(26, 67, 46, 0.92)',
      backdropFilter: 'blur(8px)',
      color: GV.color.white,
      border: '1px solid rgba(255,255,255,0.2)',
      ...style,
    }}>
      <Icon name="verified" size={13} filled color={GV.color.prestigeGold} />
      <span style={{
        fontFamily: GV.font.sans,
        fontSize: 9.5,
        fontWeight: 700,
        letterSpacing: '0.14em',
      }}>VISIT-VERIFIED</span>
    </div>
  );
}

// GV Score display (used everywhere)
function GVScoreBadge({ score, size = 'md', style }) {
  const sizes = {
    sm: { pad: '4px 10px', fs: 16, lh: 1.1, lbl: 8 },
    md: { pad: '6px 14px', fs: 26, lh: 1, lbl: 9 },
    lg: { pad: '10px 18px', fs: 40, lh: 1, lbl: 10 },
  };
  const s = sizes[size];
  return (
    <div style={{
      display: 'inline-flex',
      flexDirection: 'column',
      alignItems: 'center',
      ...style,
    }}>
      <div style={{
        background: GV.color.forestDeep,
        color: GV.color.prestigeGold,
        fontFamily: GV.font.serif,
        fontSize: s.fs,
        fontWeight: 700,
        letterSpacing: '-0.02em',
        padding: s.pad,
        borderRadius: 10,
        lineHeight: s.lh,
      }}>{score}</div>
      {size !== 'sm' && (
        <span style={{
          fontFamily: GV.font.sans,
          fontSize: s.lbl,
          fontWeight: 700,
          letterSpacing: '0.14em',
          color: GV.color.secondary,
          marginTop: 4,
        }}>GV SCORE</span>
      )}
    </div>
  );
}

// Card
function Card({ children, onClick, style, hover = true }) {
  const [hovered, setHovered] = React.useState(false);
  return (
    <div
      onClick={onClick}
      onMouseEnter={() => setHovered(true)}
      onMouseLeave={() => setHovered(false)}
      style={{
        background: GV.color.white,
        borderRadius: 12,
        border: `1px solid ${GV.color.borderSubtle}`,
        boxShadow: hover && hovered ? GV.shadow.cardHover : GV.shadow.card,
        overflow: 'hidden',
        cursor: onClick ? 'pointer' : 'default',
        transition: 'box-shadow 0.2s, transform 0.15s',
        transform: hover && hovered ? 'translateY(-1px)' : 'none',
        ...style,
      }}
    >
      {children}
    </div>
  );
}

// Section header
function SectionHeader({ title, action, onAction, kicker }) {
  return (
    <div style={{
      display: 'flex',
      justifyContent: 'space-between',
      alignItems: 'flex-end',
      marginBottom: 12,
      padding: '0 20px',
    }}>
      <div>
        {kicker && (
          <div style={{
            fontFamily: GV.font.sans,
            fontSize: 10,
            fontWeight: 700,
            letterSpacing: '0.16em',
            color: GV.color.secondary,
            marginBottom: 2,
          }}>{kicker}</div>
        )}
        <h3 style={{
          fontFamily: GV.font.serif,
          fontSize: 18,
          fontWeight: 600,
          color: GV.color.forestDeep,
          margin: 0,
          letterSpacing: '-0.01em',
        }}>{title}</h3>
      </div>
      {action && (
        <button
          onClick={onAction}
          style={{
            background: 'none',
            border: 'none',
            fontFamily: GV.font.sans,
            fontSize: 10,
            fontWeight: 700,
            letterSpacing: '0.14em',
            color: GV.color.secondary,
            cursor: 'pointer',
            padding: 0,
          }}
        >{action}</button>
      )}
    </div>
  );
}

// Placeholder for image slots (in case image fails)
function ImageBox({ src, alt, height, style, children }) {
  return (
    <div style={{
      width: '100%',
      height: height,
      backgroundImage: `url(${src})`,
      backgroundSize: 'cover',
      backgroundPosition: 'center',
      backgroundColor: GV.color.surfaceContainer,
      position: 'relative',
      ...style,
    }} aria-label={alt}>{children}</div>
  );
}

Object.assign(window, { GV, Chip, VerifiedBadge, GVScoreBadge, Card, SectionHeader, ImageBox });