import SectionHead from '@/components/vyndr/SectionHead';

interface ClaimMeterProps {
  claimed?: number;
  total?: number;
}

/**
 * Founder-seat scarcity meter (§12 ClaimMeter) — "47 / 100 seats claimed",
 * amber bar. Cosmetic conversion driver; the live tick-up wires into the
 * living layer in Session 38. Static here.
 */
export default function ClaimMeter({ claimed = 47, total = 100 }: ClaimMeterProps) {
  const pct = Math.min(100, Math.round((claimed / total) * 100));
  return (
    <div style={{ maxWidth: 420, margin: '0 auto', width: '100%' }}>
      <div style={{ display: 'flex', justifyContent: 'space-between', alignItems: 'baseline', marginBottom: 8 }}>
        <SectionHead accent="var(--amber)">FOUNDER SEATS</SectionHead>
        <span className="mono amber-glow" style={{ fontSize: 13, fontWeight: 700, color: 'var(--amber)' }}>
          {claimed} / {total} CLAIMED
        </span>
      </div>
      <div style={{ height: 6, background: 'var(--bg-2)', border: '1px solid var(--border)', borderRadius: 4, overflow: 'hidden' }}>
        <div
          style={{
            width: `${pct}%`,
            height: '100%',
            background: 'linear-gradient(90deg, #b8761f, var(--amber))',
            boxShadow: '0 0 12px rgba(255,179,71,.6)',
            borderRadius: 4,
            transition: 'width .4s ease-out',
          }}
        />
      </div>
      <div className="mono" style={{ fontSize: 11, color: 'var(--text-1)', marginTop: 8, letterSpacing: '0.02em' }}>
        Founder pricing locks for life. When the seats are gone, the rate is gone.
      </div>
    </div>
  );
}
