/* Visual mockups: NFC cards, Phones, QR codes */

const { useEffect: mUseEffect, useState: mUseState, useRef: mUseRef } = React;

// ----- NFC Card -----
// material: matte | metal | glass | white | wood
function NFCCard({ material = 'matte', name = 'COLLINS S. WONDER', role = 'Head of Design · ZenTag', mono = false, className = '', style = {}, sheen = true }) {
  const materials = {
    matte: {
      bg: 'linear-gradient(135deg, #18181c 0%, #0a0a0d 60%, #1d1d24 100%)',
      border: '1px solid rgba(255,255,255,0.08)',
      logoColor: '#fff',
      subColor: '#86868b',
      accent: 'var(--accent)',
    },
    metal: {
      bg: 'linear-gradient(135deg, #d8dce4 0%, #8a8f9a 25%, #f0f1f4 50%, #6b6f78 80%, #c2c6cf 100%)',
      border: '1px solid rgba(255,255,255,0.4)',
      logoColor: '#0a0a0d',
      subColor: '#2d2d35',
      accent: '#0a0a0d',
    },
    glass: {
      bg: 'linear-gradient(135deg, rgba(140,160,200,0.35) 0%, rgba(80,90,120,0.18) 50%, rgba(180,200,240,0.30) 100%)',
      border: '1px solid rgba(255,255,255,0.35)',
      logoColor: '#fff',
      subColor: 'rgba(255,255,255,0.7)',
      accent: '#fff',
    },
    white: {
      bg: 'linear-gradient(160deg, #ffffff 0%, #ececef 100%)',
      border: '1px solid rgba(0,0,0,0.06)',
      logoColor: '#0a0a0d',
      subColor: '#5a5a62',
      accent: 'var(--accent)',
    },
    wood: {
      bg: 'linear-gradient(135deg, #5a3a22 0%, #3a2412 40%, #6b4424 80%, #4a2e18 100%)',
      border: '1px solid rgba(120,80,40,0.5)',
      logoColor: '#e7d4b8',
      subColor: '#b89a72',
      accent: '#e7d4b8',
    },
  };
  const m = materials[material] || materials.matte;

  const woodGrain = material === 'wood' ? (
    <div className="absolute inset-0 opacity-30 mix-blend-overlay pointer-events-none"
      style={{ background: 'repeating-linear-gradient(95deg, rgba(0,0,0,0.4) 0px, rgba(0,0,0,0.4) 1px, transparent 1px, transparent 6px), repeating-linear-gradient(98deg, rgba(255,220,180,0.05) 0px, rgba(255,220,180,0.05) 8px, transparent 8px, transparent 18px)' }} />
  ) : null;

  const metalSheen = material === 'metal' ? (
    <div className="absolute inset-0 pointer-events-none" style={{ background: 'linear-gradient(180deg, transparent 20%, rgba(255,255,255,0.5) 50%, transparent 80%)', mixBlendMode: 'overlay' }} />
  ) : null;

  const glassHi = material === 'glass' ? (
    <div className="absolute inset-0 pointer-events-none rounded-[inherit]" style={{ background: 'linear-gradient(135deg, rgba(255,255,255,0.3) 0%, transparent 40%, transparent 60%, rgba(255,255,255,0.18) 100%)' }} />
  ) : null;

  return (
    <div
      className={`relative rounded-[22px] overflow-hidden shadow-card ${sheen ? 'sheen' : ''} ${className}`}
      style={{
        background: m.bg,
        border: m.border,
        aspectRatio: '1.586 / 1',
        ...style,
      }}
    >
      {woodGrain}
      {metalSheen}
      {glassHi}

      {/* Chip */}
      <div className="absolute top-5 left-5">
        <div className="w-9 h-7 rounded-md" style={{
          background: material === 'metal' ? 'linear-gradient(135deg, #b8a878 0%, #f5e6b8 50%, #8a7a52 100%)' : 'linear-gradient(135deg, #c9a04a 0%, #f5d98a 50%, #8a6a2a 100%)',
          boxShadow: 'inset 0 0 0 1px rgba(0,0,0,0.25)',
        }} >
          <div className="absolute inset-1 rounded-sm" style={{
            backgroundImage: 'linear-gradient(0deg, rgba(0,0,0,0.25) 1px, transparent 1px), linear-gradient(90deg, rgba(0,0,0,0.25) 1px, transparent 1px)',
            backgroundSize: '6px 5px',
          }} />
        </div>
      </div>

      {/* NFC wave */}
      <div className="absolute top-5 right-5" style={{ color: m.accent }}>
        <svg width="34" height="34" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="1.4" strokeLinecap="round" opacity="0.9">
          <path d="M5 10c4-4 10-4 14 0"/>
          <path d="M8 13c2.5-2.5 5.5-2.5 8 0"/>
          <path d="M11 16c.6-.6 1.4-.6 2 0"/>
        </svg>
      </div>

      {/* Brand mark */}
      <div className="absolute bottom-5 left-5 right-5 flex items-end justify-between">
        <div>
          <div className="text-[11px] font-mono tracking-[0.22em]" style={{ color: m.subColor }}>ZENTAG · NFC</div>
          <div className="text-[15px] mt-1 font-medium tracking-[0.12em]" style={{ color: m.logoColor }}>{name}</div>
          <div className="text-[10.5px] mt-0.5 font-mono" style={{ color: m.subColor }}>{role}</div>
        </div>
        {/* mini logo */}
        <div className="flex items-center gap-1.5">
          <div className="w-6 h-6 rounded-full flex items-center justify-center" style={{ background: m.accent }}>
            <div className="w-2.5 h-2.5 rounded-full" style={{ background: material === 'white' || material === 'metal' ? '#fff' : '#0a0a0d' }} />
          </div>
        </div>
      </div>

      {/* Subtle radial */}
      <div className="absolute inset-0 pointer-events-none" style={{ background: 'radial-gradient(ellipse at top right, rgba(255,255,255,0.06), transparent 50%)' }} />
    </div>
  );
}

// ----- Phone Frame -----
function PhoneFrame({ children, className = '', style = {}, brand = 'iphone' }) {
  return (
    <div
      className={`relative ${className}`}
      style={{
        width: 280,
        aspectRatio: '9/19.5',
        borderRadius: 44,
        padding: 10,
        background: 'linear-gradient(135deg, #2a2a30 0%, #0a0a0d 50%, #1a1a20 100%)',
        boxShadow: '0 50px 100px -30px rgba(0,0,0,0.7), 0 0 0 1px rgba(255,255,255,0.06), inset 0 0 0 1px rgba(255,255,255,0.04)',
        ...style,
      }}
    >
      <div className="w-full h-full rounded-[34px] overflow-hidden relative" style={{ background: '#050507' }}>
        {/* Dynamic island */}
        <div className="absolute top-2 left-1/2 -translate-x-1/2 w-[88px] h-[26px] rounded-full bg-black z-30" />
        {children}
      </div>
    </div>
  );
}

// ----- Profile screen inside phone -----
function ProfileScreen({ compact = false }) {
  return (
    <div className="w-full h-full relative text-white" style={{ background: 'linear-gradient(180deg, #0a0a0d 0%, #0f0f14 100%)' }}>
      {/* Status bar */}
      <div className="absolute top-0 left-0 right-0 h-10 flex items-center justify-between px-5 text-[10px] font-mono z-20">
        <span>9:41</span>
        <span className="opacity-70">5G</span>
      </div>

      {/* Cover gradient */}
      <div className="absolute top-0 left-0 right-0 h-32" style={{
        background: 'linear-gradient(135deg, var(--accent) 0%, var(--accent-2) 100%)',
        opacity: 0.55,
      }} />
      <div className="absolute top-0 left-0 right-0 h-32 opacity-50" style={{
        background: 'radial-gradient(circle at 30% 30%, var(--accent-3), transparent 50%)',
      }} />

      {/* Avatar */}
      <div className="absolute top-[88px] left-1/2 -translate-x-1/2 z-10">
        <div className="w-20 h-20 rounded-full border-[3px] border-ink-700 overflow-hidden" style={{
          background: 'linear-gradient(135deg, #4a4a55 0%, #1a1a22 100%)',
        }}>
          <div className="w-full h-full flex items-center justify-center text-2xl font-medium" style={{
            background: 'radial-gradient(circle at 30% 30%, rgba(255,255,255,0.18), transparent 60%)',
          }}>CW</div>
        </div>
      </div>

      {/* Content */}
      <div className="absolute top-[182px] left-0 right-0 px-5">
        <div className="text-center">
          <div className="text-[17px] font-semibold tracking-tight">Collins S. Wonder</div>
          <div className="text-[11px] text-fog-300 mt-0.5">Head of Design · ZenTag</div>
          <div className="text-[10px] font-mono mt-1 text-fog-400">Pokuase, Accra</div>
        </div>

        {/* Quick actions */}
        <div className="mt-4 grid grid-cols-3 gap-2">
          {['Save', 'Call', 'Email'].map((l, i) => (
            <div key={l} className="rounded-2xl py-2 text-[10px] text-center font-medium glass">{l}</div>
          ))}
        </div>

        {/* Social grid */}
        <div className="mt-3 grid grid-cols-5 gap-2">
          {SocialList.slice(0,5).map(({ name, Comp }) => (
            <div key={name} className="aspect-square rounded-xl glass flex items-center justify-center text-fog-200">
              <Comp width="14" height="14" />
            </div>
          ))}
        </div>

        {/* Featured links */}
        {!compact && (
          <div className="mt-3 space-y-2">
            <div className="rounded-xl glass p-2.5 flex items-center gap-2">
              <div className="w-7 h-7 rounded-lg flex items-center justify-center" style={{ background: 'var(--accent)', color: '#fff' }}>
                <Icon.Globe width="13" height="13" />
              </div>
              <div className="flex-1 min-w-0">
                <div className="text-[10px] font-medium truncate">collinswonder.design</div>
                <div className="text-[8.5px] text-fog-400">Portfolio · 12 projects</div>
              </div>
            </div>
            <div className="rounded-xl glass p-2.5 flex items-center gap-2">
              <div className="w-7 h-7 rounded-lg flex items-center justify-center" style={{ background: 'rgba(255,255,255,0.08)', color: 'var(--accent-2)' }}>
                <Icon.Calendar width="13" height="13" />
              </div>
              <div className="flex-1 min-w-0">
                <div className="text-[10px] font-medium truncate">Book a 30-min call</div>
                <div className="text-[8.5px] text-fog-400">Next slot · Today 4:30 PM</div>
              </div>
            </div>
          </div>
        )}
      </div>

      {/* Bottom indicator */}
      <div className="absolute bottom-2 left-1/2 -translate-x-1/2 w-24 h-1 rounded-full bg-white/30" />
    </div>
  );
}

// ----- QR Code (procedural-looking) -----
function QRCode({ size = 180, accentDots = true, brand = true }) {
  // Pseudo-stable random pattern based on coord parity
  const cells = 21;
  const pattern = mUseRef(null);
  if (!pattern.current) {
    const seed = (x, y) => ((x * 374761393 + y * 668265263) >>> 0) % 1000;
    const m = [];
    for (let y = 0; y < cells; y++) {
      const row = [];
      for (let x = 0; x < cells; x++) {
        row.push(seed(x, y) > 540 ? 1 : 0);
      }
      m.push(row);
    }
    pattern.current = m;
  }
  const m = pattern.current;
  const cs = size / cells;

  // Reserve corners for finder patterns
  const isFinder = (x, y) => (
    (x < 7 && y < 7) || (x >= cells - 7 && y < 7) || (x < 7 && y >= cells - 7)
  );
  // Reserve center for logo
  const isCenter = (x, y) => Math.abs(x - cells/2) < 3 && Math.abs(y - cells/2) < 3;

  return (
    <div className="relative" style={{ width: size, height: size }}>
      <svg width={size} height={size} viewBox={`0 0 ${size} ${size}`}>
        {/* cells */}
        {m.map((row, y) => row.map((v, x) => {
          if (!v || isFinder(x,y) || isCenter(x,y)) return null;
          const r = cs * 0.42;
          return <rect key={`${x}-${y}`} x={x*cs+cs*0.1} y={y*cs+cs*0.1} width={cs*0.8} height={cs*0.8} rx={r} fill="#fff" />;
        }))}
        {/* finder patterns */}
        {[[0,0],[cells-7,0],[0,cells-7]].map(([fx,fy], i) => (
          <g key={i}>
            <rect x={fx*cs} y={fy*cs} width={7*cs} height={7*cs} rx={cs*1.6} fill="none" stroke="#fff" strokeWidth={cs*0.9} />
            <rect x={(fx+2)*cs} y={(fy+2)*cs} width={3*cs} height={3*cs} rx={cs*0.8} fill="#fff" />
          </g>
        ))}
      </svg>
      {/* center logo */}
      {brand && (
        <div className="absolute inset-0 flex items-center justify-center">
          <div className="w-1/4 h-1/4 rounded-full flex items-center justify-center" style={{ background: 'var(--accent)', boxShadow: '0 0 20px var(--accent-glow)' }}>
            <div className="w-1/2 h-1/2 rounded-full bg-white" />
          </div>
        </div>
      )}
    </div>
  );
}

Object.assign(window, { NFCCard, PhoneFrame, ProfileScreen, QRCode });