/* Icons used in the marketing site (matches in-app stroke style) */

const Check = ({size=14, color="currentColor"}) => (
  <svg width={size} height={size} viewBox="0 0 14 14" fill="none">
    <path d="M2 7.5l3 3 7-7" stroke={color} strokeWidth="2" strokeLinecap="round" strokeLinejoin="round"/>
  </svg>
);

const Dash = ({size=14, color="currentColor"}) => (
  <svg width={size} height={size} viewBox="0 0 14 14" fill="none">
    <path d="M3 7h8" stroke={color} strokeWidth="2" strokeLinecap="round"/>
  </svg>
);

const Calculator = ({size=20, color="currentColor"}) => (
  <svg width={size} height={size} viewBox="0 0 24 24" fill="none" stroke={color} strokeWidth="1.8" strokeLinecap="round" strokeLinejoin="round">
    <rect x="4" y="2" width="16" height="20" rx="3"/>
    <line x1="8" y1="6" x2="16" y2="6"/>
    <circle cx="8" cy="11" r="0.5" fill={color}/>
    <circle cx="12" cy="11" r="0.5" fill={color}/>
    <circle cx="16" cy="11" r="0.5" fill={color}/>
    <circle cx="8" cy="15" r="0.5" fill={color}/>
    <circle cx="12" cy="15" r="0.5" fill={color}/>
    <circle cx="16" cy="15" r="0.5" fill={color}/>
    <line x1="8" y1="19" x2="14" y2="19"/>
  </svg>
);

const Invoice = ({size=20, color="currentColor"}) => (
  <svg width={size} height={size} viewBox="0 0 24 24" fill="none" stroke={color} strokeWidth="1.8" strokeLinecap="round" strokeLinejoin="round">
    <path d="M5 3h11l3 3v15a1 1 0 01-1 1H5a1 1 0 01-1-1V4a1 1 0 011-1z"/>
    <path d="M16 3v3h3"/>
    <line x1="8" y1="11" x2="16" y2="11"/>
    <line x1="8" y1="15" x2="14" y2="15"/>
  </svg>
);

const Crew = ({size=20, color="currentColor"}) => (
  <svg width={size} height={size} viewBox="0 0 24 24" fill="none" stroke={color} strokeWidth="1.8" strokeLinecap="round" strokeLinejoin="round">
    <path d="M17 21v-2a4 4 0 00-4-4H5a4 4 0 00-4 4v2"/>
    <circle cx="9" cy="7" r="4"/>
    <path d="M23 21v-2a4 4 0 00-3-3.87"/>
    <path d="M16 3.13a4 4 0 010 7.75"/>
  </svg>
);

const Finances = ({size=20, color="currentColor"}) => (
  <svg width={size} height={size} viewBox="0 0 24 24" fill="none" stroke={color} strokeWidth="1.8" strokeLinecap="round" strokeLinejoin="round">
    <line x1="12" y1="2" x2="12" y2="22"/>
    <path d="M17 5H9.5a3.5 3.5 0 000 7h5a3.5 3.5 0 010 7H6"/>
  </svg>
);

const Payroll = ({size=20, color="currentColor"}) => (
  <svg width={size} height={size} viewBox="0 0 24 24" fill="none" stroke={color} strokeWidth="1.8" strokeLinecap="round" strokeLinejoin="round">
    <rect x="3" y="6" width="18" height="13" rx="2"/>
    <circle cx="12" cy="12.5" r="2.5"/>
    <path d="M3 10h18M7 16h2"/>
  </svg>
);

const Kit = ({size=20, color="currentColor"}) => (
  <svg width={size} height={size} viewBox="0 0 24 24" fill="none" stroke={color} strokeWidth="1.8" strokeLinecap="round" strokeLinejoin="round">
    <rect x="3" y="7" width="18" height="13" rx="2"/>
    <path d="M9 7V5a3 3 0 016 0v2"/>
    <line x1="3" y1="13" x2="21" y2="13"/>
  </svg>
);

const Calendar = ({size=20, color="currentColor"}) => (
  <svg width={size} height={size} viewBox="0 0 24 24" fill="none" stroke={color} strokeWidth="1.8" strokeLinecap="round" strokeLinejoin="round">
    <rect x="3" y="4" width="18" height="18" rx="2"/>
    <line x1="16" y1="2" x2="16" y2="6"/>
    <line x1="8" y1="2" x2="8" y2="6"/>
    <line x1="3" y1="10" x2="21" y2="10"/>
  </svg>
);

const ChevDown = ({size=18, color="currentColor"}) => (
  <svg width={size} height={size} viewBox="0 0 24 24" fill="none" stroke={color} strokeWidth="2" strokeLinecap="round" strokeLinejoin="round">
    <polyline points="6 9 12 15 18 9"/>
  </svg>
);

const Apple = ({size=22, color="#fff"}) => (
  <svg width={size} height={size} viewBox="0 0 384 512" fill={color}>
    <path d="M318.7 268.7c-.2-36.7 16.4-64.4 50-84.8-18.8-26.9-47.2-41.7-84.7-44.6-35.5-2.8-74.3 20.7-88.5 20.7-15 0-49.4-19.7-76.4-19.7C63.3 141.2 4 184.8 4 273.5q0 39.3 14.4 81.2c12.8 36.7 59 126.7 107.2 125.2 25.2-.6 43-17.9 75.8-17.9 31.8 0 48.3 17.9 76.4 17.9 48.6-.7 90.4-82.5 102.6-119.3-65.2-30.7-61.7-90-61.7-91.9zm-56.6-164.2c27.3-32.4 24.8-61.9 24-72.5-24.1 1.4-52 16.4-67.9 34.9-17.5 19.8-27.8 44.3-25.6 71.9 26.1 2 49.9-11.4 69.5-34.3z"/>
  </svg>
);

const Play = ({size=22, color="#fff"}) => (
  <svg width={size} height={size} viewBox="0 0 24 24" fill="none">
    <path d="M5 3.4v17.2c0 .6.6 1 1.1.7l13.7-8.3c.5-.3.5-1 0-1.3L6.1 2.7c-.5-.3-1.1.1-1.1.7z" fill={color}/>
    <path d="M5 3.4l9.5 9.5L5 22.4" stroke="#000" strokeWidth="0.5" opacity="0.18"/>
  </svg>
);

// Reusable Google Play badge with "Coming soon" pill on top-right.
// `compact` shrinks the typography to match the footer-sized version.
const GooglePlayBadge = ({compact=false}) => (
  <span
    aria-disabled="true"
    className="store-badge"
    style={{
      position:'relative',
      cursor:'not-allowed',
      opacity: 0.86,
      padding: compact ? '8px 14px 8px 10px' : '10px 18px 10px 14px',
    }}
    onClick={e => e.preventDefault()}
  >
    <Play size={compact ? 18 : 22}/>
    <div style={{textAlign:'left'}}>
      <div className="sb-small">GET IT ON</div>
      <div className="sb-big" style={compact ? {fontSize:14} : null}>Google Play</div>
    </div>
    <span style={{
      position:'absolute',
      top: -9, right: -8,
      background: 'linear-gradient(135deg, var(--sa-accent-hi), var(--sa-accent))',
      color: '#fff',
      fontSize: 9.5,
      fontWeight: 700,
      letterSpacing: '0.08em',
      textTransform: 'uppercase',
      padding: '3px 8px',
      borderRadius: 999,
      whiteSpace: 'nowrap',
      boxShadow: '0 6px 14px -4px rgba(94,92,230,0.55), 0 0 0 1.5px rgba(10,10,12,0.9)',
    }}>Coming soon</span>
  </span>
);

Object.assign(window, { Check, Dash, Calculator, Invoice, Crew, Finances, Payroll, Kit, Calendar, ChevDown, Apple, Play, GooglePlayBadge });
