/* global React, BCGlyph */

/* ============================================================
   BitidEnabledSection — homepage section explaining the trust mark
   ============================================================ */

function BEContactlessIcon({ color = '#FAFAF7', size = 28 }) {
  const h = Math.round(size * 1.27);
  return (
    <svg width={size} height={h} viewBox="0 0 22 28" aria-hidden="true">
      <g fill="none" stroke={color} strokeWidth="1.6" strokeLinecap="round">
        <path d="M4 9 Q8 14 4 19" />
        <path d="M9 6 Q15 14 9 22" />
        <path d="M14 3 Q22 14 14 25" />
      </g>
    </svg>
  );
}

function BEMastercardIcon({ size = 36 }) {
  const h = size * 0.62;
  return (
    <svg width={size} height={h} viewBox="0 0 64 40" aria-hidden="true">
      <circle cx="24" cy="20" r="18" fill="#EB001B" />
      <circle cx="40" cy="20" r="18" fill="#F79E1B" style={{ mixBlendMode: 'screen' }} />
    </svg>
  );
}

function BEBitidMark({ size = 28 }) {
  return (
    <span style={{
      width: size + 12,
      height: size + 12,
      border: '1px solid rgba(255,255,255,0.20)',
      borderRadius: 4,
      display: 'inline-flex',
      alignItems: 'center',
      justifyContent: 'center',
    }}>
      <svg width={Math.round(size * 1.1)} height={size} viewBox="0 0 1100 1000" aria-hidden="true">
        <g transform="translate(550 500) skewX(-13) translate(-550 -500)" fill="#FAFAF7">
          <rect x="280" y="146" width="168" height="708" />
          <rect x="540" y="146" width="168" height="708" />
          <path d="M 708 150 A 350 350 0 0 1 708 850 L 708 682 A 182 182 0 0 0 708 318 Z" />
        </g>
      </svg>
    </span>
  );
}

/* Tiny inline glyph for the application strip */
function BEGlyph({ size = 16, color = '#FAFAF7' }) {
  return (
    <svg width={Math.round(size * 1.1)} height={size} viewBox="0 0 1100 1000" aria-hidden="true">
      <g transform="translate(550 500) skewX(-13) translate(-550 -500)" fill={color}>
        <rect x="280" y="146" width="168" height="708" />
        <rect x="540" y="146" width="168" height="708" />
        <path d="M 708 150 A 350 350 0 0 1 708 850 L 708 682 A 182 182 0 0 0 708 318 Z" />
      </g>
    </svg>
  );
}

function BitidEnabledSection() {
  const tiles = [
    { label: 'TAPS TO PAY',           icon: <BEContactlessIcon size={28} color="#FAFAF7" /> },
    { label: 'WORKS ON THE NETWORK',  icon: <BEMastercardIcon size={36} /> },
    { label: 'IDENTITY IS PROVABLE',  icon: <BEBitidMark size={20} /> },
  ];

  const apps = [
    { caption: 'ON THE CARD',    icon: 'card' },
    { caption: 'AT CHECKOUT',    icon: 'checkout' },
    { caption: 'IN A WALLET',    icon: 'wallet' },
    { caption: 'IN AN AGENT',    icon: 'agent' },
    { caption: 'AT A COUNTER',   icon: 'counter' },
    { caption: 'ON A PROFILE',   icon: 'profile' },
  ];

  return (
    <section className="be-sec" id="bitid-enabled">
      <div className="container">
        <p className="eyebrow">The BitID-enabled mark</p>
        <h2 className="be-h">A small mark that means: this is real.</h2>
        <p className="be-sub">
          The contactless symbol means the card taps. The chip indicator means the card is EMV. The BitID-enabled mark means the identity behind the card is provable, anchored on Bitcoin, and held by the person showing it. It appears on every Beem card, on every BitID-enabled checkout, and on every surface that has done the work to earn it.
        </p>

        {/* Three-up parity row */}
        <div className="be-parity">
          {tiles.map((t) => (
            <div className="be-parity-tile" key={t.label}>
              <div className="be-parity-icon">{t.icon}</div>
              <div className="be-parity-cap">{t.label}</div>
            </div>
          ))}
        </div>

        {/* Explainer */}
        <p className="be-explainer">
          When you see the BitID-enabled mark on a card, it means the cardholder has a verified, revocable, privacy-preserving identity that is anchored on Bitcoin and can be checked with a scan. When you see it on a checkout button, it means the merchant accepts BitID as a one-tap proof of identity in place of forms, uploads, or per-check vendor calls. When you see it on a wallet, an exchange, or an agent surface, it means the same thing. One mark. One promise.
        </p>

        {/* Prepaid sub-block */}
        <div className="be-prepaid">
          <p className="eyebrow">Why this matters for prepaid</p>
          <h3 className="be-prepaid-h">
            Prepaid cards have always been the weakest identity link. We're closing the gap.
          </h3>
          <p className="be-prepaid-body">
            Prepaid cards are the most common entry point to the financial system for people without traditional credentials, the most common target for synthetic-identity fraud, and the most regulated when it comes to BSA/AML scrutiny. The BitID-enabled mark on a Beem World Debit Prepaid card means every cardholder has cleared the same biometric and document verification as a regulated bank account, but without surrendering their data to a vendor. The card is prepaid. The identity is not.
          </p>
          <p className="be-compliance">
            BSA/AML ALIGNED · SOC 2 TYPE II IN PROGRESS · GDPR/CCPA COMPLIANT · ISO 27001 ROADMAP
          </p>
        </div>

        {/* Application strip */}
        <div className="be-apps">
          <p className="eyebrow">One mark, six surfaces</p>
          <div className="be-apps-row">
            {apps.map((a) => (
              <div className="be-app-tile" key={a.caption}>
                <div className="be-app-icon">
                  <BEAppIcon kind={a.icon} />
                </div>
                <div className="be-app-cap">{a.caption}</div>
              </div>
            ))}
          </div>
        </div>
      </div>
    </section>
  );
}

/* ============================================================
   BEAppIcon — six small contextual icons w/ embedded BitID mark
   ============================================================ */
function BEAppIcon({ kind }) {
  const stroke = '#FAFAF7';
  const sw = 1.5;
  const W = 64, H = 64;

  // The ID badge — small bordered square with the glyph inside
  const Badge = ({ x, y, s = 14 }) => (
    <g transform={`translate(${x} ${y})`}>
      <rect width={s} height={s} rx="2" fill="#0A0A0B" stroke={stroke} strokeWidth="1" />
      <g transform={`translate(${s * 0.18} ${s * 0.22}) scale(${(s * 0.62) / 1100})`}>
        <g transform="translate(550 500) skewX(-13) translate(-550 -500)" fill={stroke}>
          <rect x="280" y="146" width="168" height="708" />
          <rect x="540" y="146" width="168" height="708" />
          <path d="M 708 150 A 350 350 0 0 1 708 850 L 708 682 A 182 182 0 0 0 708 318 Z" />
        </g>
      </g>
    </g>
  );

  if (kind === 'card') {
    return (
      <svg viewBox={`0 0 ${W} ${H}`} width="48" height="48" fill="none">
        <rect x="8" y="14" width="48" height="36" rx="3" stroke={stroke} strokeWidth={sw} />
        <rect x="12" y="22" width="8" height="6" rx="1" fill={stroke} />
        <line x1="12" y1="40" x2="32" y2="40" stroke={stroke} strokeWidth="1" />
        <Badge x={42} y={36} s={10} />
      </svg>
    );
  }
  if (kind === 'checkout') {
    return (
      <svg viewBox={`0 0 ${W} ${H}`} width="48" height="48" fill="none">
        <rect x="8" y="22" width="48" height="20" rx="10" stroke={stroke} strokeWidth={sw} />
        <text x="20" y="36" fill={stroke} fontFamily="var(--font-mono)" fontSize="8" letterSpacing="0.06em">PAY WITH</text>
        <Badge x={44} y={26} s={12} />
      </svg>
    );
  }
  if (kind === 'wallet') {
    return (
      <svg viewBox={`0 0 ${W} ${H}`} width="48" height="48" fill="none">
        <rect x="8" y="18" width="48" height="32" rx="4" stroke={stroke} strokeWidth={sw} />
        <rect x="8" y="26" width="48" height="6" fill={stroke} opacity="0.3" />
        <Badge x={42} y={36} s={10} />
      </svg>
    );
  }
  if (kind === 'agent') {
    return (
      <svg viewBox={`0 0 ${W} ${H}`} width="48" height="48" fill="none">
        <rect x="18" y="12" width="28" height="20" rx="4" stroke={stroke} strokeWidth={sw} />
        <circle cx="26" cy="22" r="2" fill={stroke} />
        <circle cx="38" cy="22" r="2" fill={stroke} />
        <line x1="22" y1="32" x2="22" y2="40" stroke={stroke} strokeWidth={sw} />
        <line x1="42" y1="32" x2="42" y2="40" stroke={stroke} strokeWidth={sw} />
        <Badge x={26} y={42} s={12} />
      </svg>
    );
  }
  if (kind === 'counter') {
    return (
      <svg viewBox={`0 0 ${W} ${H}`} width="48" height="48" fill="none">
        <rect x="14" y="10" width="36" height="42" rx="2" stroke={stroke} strokeWidth={sw} />
        <rect x="18" y="14" width="28" height="20" stroke={stroke} strokeWidth="1" />
        <Badge x={26} y={18} s={12} />
        <line x1="20" y1="42" x2="44" y2="42" stroke={stroke} strokeWidth="1" opacity="0.4" />
      </svg>
    );
  }
  if (kind === 'profile') {
    return (
      <svg viewBox={`0 0 ${W} ${H}`} width="48" height="48" fill="none">
        <rect x="8" y="14" width="48" height="36" rx="3" stroke={stroke} strokeWidth={sw} />
        <circle cx="20" cy="28" r="6" stroke={stroke} strokeWidth={sw} />
        <line x1="30" y1="26" x2="48" y2="26" stroke={stroke} strokeWidth="1" />
        <line x1="30" y1="32" x2="44" y2="32" stroke={stroke} strokeWidth="1" opacity="0.5" />
        <Badge x={42} y={38} s={10} />
      </svg>
    );
  }
  return null;
}

window.BitidEnabledSection = BitidEnabledSection;