// repurposed as Benefits
function Features() {
  const { t } = useI18n();
  return (
    <section id="benefits" data-section="benefits" data-screen-label={t('features.screenLabel')}
      className="benefits-band"
      style={{ padding: '88px 32px', background: 'var(--bone)', position: 'relative' }}>
      <div className="reveal" style={{
        maxWidth: 1180, margin: '0 auto',
        display: 'grid', gridTemplateColumns: 'repeat(4, 1fr)',
        gap: 24, alignItems: 'center'
      }}>
        <BenefitCard icon={<EyeIcon />} label={t('features.preventMyopia')} />
        <BenefitCard icon={<DeskIcon />} label={t('features.comfortableEnvironment')} />
        <BenefitCard icon={<SwatchIcon />} label={t('features.accurateColor')} />
        <BenefitCard icon={<BadgeIcon />} label={t('features.certifiedSafe')} />
      </div>
    </section>
  );
}

window.Features = Features;

function BenefitCard({ icon, label }) {
  return (
    <div className="benefit-card" style={{ display: 'flex', alignItems: 'center', gap: 18, padding: '12px 4px' }}>
      <div style={{ flex: '0 0 auto', width: 56, height: 56, color: 'var(--ink)' }}>{icon}</div>
      <div style={{ font: '400 14px/1.35 var(--font-sans)', color: 'var(--ink)', whiteSpace: 'pre-line', letterSpacing: '-0.01em' }}>{label}</div>
    </div>
  );
}

function EyeIcon() {
  return (
    <svg className="icon-eye" viewBox="0 0 64 64" fill="none" stroke="currentColor" strokeWidth="2.2" strokeLinecap="round" strokeLinejoin="round" style={{ width: '100%', height: '100%' }}>
      <path d="M16 18 L12 12" />
      <path d="M32 12 L32 6" />
      <path d="M48 18 L52 12" />
      <path d="M8 32 C 18 22, 46 22, 56 32 C 46 42, 18 42, 8 32 Z" />
      <circle cx="32" cy="32" r="6.5" />
      <circle className="pupil" cx="32" cy="32" r="2.5" fill="currentColor">
        <animate attributeName="opacity" values="0.6;1;0.6" dur="3.2s" repeatCount="indefinite" />
      </circle>
    </svg>
  );
}

function DeskIcon() {
  return (
    <svg className="icon-desk" viewBox="0 0 64 64" fill="none" stroke="currentColor" strokeWidth="2.2" strokeLinecap="round" strokeLinejoin="round" style={{ width: '100%', height: '100%' }}>
      <path d="M14 28 L26 14" />
      <path d="M22 12 L30 20 L18 20 Z" fill="currentColor" stroke="none">
        <animate attributeName="opacity" values="0.6;1;0.6" dur="3s" repeatCount="indefinite" />
      </path>
      <rect x="34" y="22" width="22" height="14" rx="1" />
      <path d="M40 36 L40 40" /><path d="M50 36 L50 40" /><path d="M36 40 L54 40" />
      <path d="M8 48 L56 48" />
      <path d="M14 48 L14 56" /><path d="M50 48 L50 56" />
    </svg>
  );
}

function SwatchIcon() {
  return (
    <svg className="icon-swatch" viewBox="0 0 64 64" fill="none" stroke="currentColor" strokeWidth="2.2" strokeLinecap="round" strokeLinejoin="round" style={{ width: '100%', height: '100%' }}>
      <rect x="14" y="14" width="14" height="32" rx="1" fill="rgba(217,119,87,0.18)">
        <animateTransform attributeName="transform" type="rotate" values="0 21 30; -8 21 30; 0 21 30" dur="4s" repeatCount="indefinite" />
      </rect>
      <rect x="22" y="18" width="14" height="32" rx="1" fill="rgba(217,119,87,0.32)" />
      <rect x="30" y="22" width="14" height="32" rx="1" />
      <circle cx="37" cy="46" r="2.4" fill="currentColor" stroke="none" />
    </svg>
  );
}

function BadgeIcon() {
  return (
    <svg className="icon-badge" viewBox="0 0 64 64" fill="none" stroke="currentColor" strokeWidth="2.2" strokeLinecap="round" strokeLinejoin="round" style={{ width: '100%', height: '100%' }}>
      <path d="M24 38 L20 56 L28 50 L32 56 L36 50 L44 56 L40 38" />
      <circle cx="32" cy="26" r="16" />
      <circle cx="32" cy="26" r="12" />
      <path d="M32 18 L34 24 L40 24 L35 28 L37 34 L32 30 L27 34 L29 28 L24 24 L30 24 Z" fill="currentColor" stroke="none">
        <animate attributeName="opacity" values="0.6;1;0.6" dur="2.6s" repeatCount="indefinite" />
      </path>
    </svg>
  );
}

window.Features = Features;
