// InviteCard.jsx — promotional / launch invitation cards.
//
// Two variants:
//   1. InviteCardFront — A5 portrait personal invite (640×880 artboard).
//   2. SocialShareCard — 1200×630 OG-ratio announcement card for LinkedIn / email.

const C_INDIGO = '#4F6EF7';
const C_INDIGO_SOFT = '#EEF1FF';

// ─── Personal invitation card (A5 portrait, 5:7 ratio) ───────────────
function InviteCardFront({ name = 'João Faria', company = 'Materiais Faria, Lda.', number = '014 / 025' }) {
  return (
    <div className="w-full h-full grid place-items-center"
         style={{ background: 'radial-gradient(ellipse at center, #F5F5F4 0%, #E7E5E4 100%)', padding: 40 }}>
      <div className="relative bg-white shadow-2xl"
           style={{
             width: 540, height: 760,
             boxShadow: '0 40px 80px -20px rgba(15,15,20,0.25), 0 20px 40px -10px rgba(15,15,20,0.12)',
           }}>
        {/* Top indigo bar with deboss/notch corners */}
        <div className="absolute top-0 left-0 right-0 h-2" style={{ background: C_INDIGO }}></div>

        {/* Faint architectural blueprint grid in the background */}
        <svg className="absolute inset-0 w-full h-full pointer-events-none" aria-hidden="true" style={{ opacity: 0.06 }}>
          <defs>
            <pattern id="bp" width="20" height="20" patternUnits="userSpaceOnUse">
              <path d="M 20 0 L 0 0 0 20" fill="none" stroke="#18181B" strokeWidth="0.5"/>
            </pattern>
          </defs>
          <rect width="100%" height="100%" fill="url(#bp)" />
        </svg>

        <div className="relative h-full flex flex-col p-10">
          {/* Top row — eyebrow + serial number */}
          <div className="flex items-center justify-between text-[10.5px] uppercase tracking-[0.18em] font-semibold text-zinc-500">
            <div className="flex items-center gap-2">
              <span className="h-1.5 w-1.5 rounded-full" style={{ background: C_INDIGO }}></span>
              Convite pessoal
            </div>
            <span className="font-mono">N.º {number}</span>
          </div>

          {/* CH mark */}
          <div className="mt-8 flex items-center gap-3">
            <span className="h-10 w-10 rounded-md grid place-items-center text-white font-bold text-[16px]"
                  style={{ background: '#18181B' }}>CH</span>
            <div>
              <div className="text-[14px] font-semibold tracking-tight">ConstructHub</div>
              <div className="text-[10.5px] text-zinc-500 tracking-wide">ERP · Ibéria · Materiais de construção</div>
            </div>
          </div>

          {/* Salutation */}
          <div className="mt-12">
            <div className="text-[11px] uppercase tracking-[0.18em] text-zinc-400 font-semibold mb-4">Para</div>
            <div className="text-[24px] font-semibold tracking-tight">{name}</div>
            <div className="text-[12.5px] text-zinc-500 mt-0.5">{company}</div>
          </div>

          {/* Main message */}
          <div className="mt-10 flex-1">
            <div className="text-[11px] uppercase tracking-[0.18em] text-zinc-400 font-semibold mb-4">Está convidado para</div>
            <div className="text-[34px] leading-[1.08] font-semibold tracking-tight text-zinc-900">
              A beta privada<br/>
              <span className="text-zinc-400">do </span>
              <span className="relative inline-block">
                ConstructHub
                <svg className="absolute -bottom-1.5 left-0 w-full" height="6" viewBox="0 0 280 6" fill="none">
                  <path d="M2 4 C 80 1, 180 1, 278 3" stroke={C_INDIGO} strokeWidth="2.5" strokeLinecap="round"/>
                </svg>
              </span>.
            </div>
            <p className="mt-5 text-[12.5px] text-zinc-600 leading-relaxed max-w-[420px]">
              25 distribuidores. Acesso antecipado ao Build, ao Portal B2B e ao assistente IA —
              com a oportunidade de moldar o produto antes de chegar ao mercado. Suporte directo
              da equipa fundadora.
            </p>
          </div>

          {/* Details band */}
          <div className="grid grid-cols-2 gap-x-6 gap-y-5 pt-8 border-t border-dashed border-zinc-200">
            <div>
              <div className="text-[10px] uppercase tracking-[0.18em] text-zinc-400 font-semibold flex items-center gap-1.5">
                <L name="shield-check" className="w-3 h-3" />Acesso
              </div>
              <div className="text-[14px] font-semibold tracking-tight mt-1.5">Antecipado · privado</div>
              <div className="text-[11.5px] text-zinc-500">Ainda este trimestre</div>
            </div>
            <div>
              <div className="text-[10px] uppercase tracking-[0.18em] text-zinc-400 font-semibold flex items-center gap-1.5">
                <L name="gift" className="w-3 h-3" />Condições
              </div>
              <div className="text-[14px] font-semibold tracking-tight mt-1.5">Preferenciais</div>
              <div className="text-[11.5px] text-zinc-500">Durante o primeiro ano</div>
            </div>
            <div>
              <div className="text-[10px] uppercase tracking-[0.18em] text-zinc-400 font-semibold flex items-center gap-1.5">
                <L name="users" className="w-3 h-3" />Equipa
              </div>
              <div className="text-[14px] font-semibold tracking-tight mt-1.5">Até 15 utilizadores</div>
              <div className="text-[11.5px] text-zinc-500">Papéis e permissões</div>
            </div>
            <div>
              <div className="text-[10px] uppercase tracking-[0.18em] text-zinc-400 font-semibold flex items-center gap-1.5">
                <L name="headphones" className="w-3 h-3" />Suporte
              </div>
              <div className="text-[14px] font-semibold tracking-tight mt-1.5">Directo da equipa</div>
              <div className="text-[11.5px] text-zinc-500">WhatsApp, email, video</div>
            </div>
          </div>

          {/* Footer band */}
          <div className="mt-7 pt-6 border-t border-zinc-200 flex items-center gap-4">
            {/* QR placeholder */}
            <div className="h-16 w-16 rounded-md border border-zinc-200 grid place-items-center bg-white shrink-0">
              <QRGlyph />
            </div>
            <div className="min-w-0 flex-1">
              <div className="text-[11px] text-zinc-500">Confirme presença com a</div>
              <div className="text-[12.5px] font-mono font-semibold mt-0.5">Equipa ConstructHub · N.º {number.split(' / ')[0]}</div>
            </div>
            <div className="text-right shrink-0">
              <div className="text-[10px] uppercase tracking-[0.14em] text-zinc-400 font-semibold">Anfitriões</div>
              <div className="text-[11.5px] font-semibold mt-1">Equipa ConstructHub</div>
            </div>
          </div>
        </div>
      </div>
    </div>
  );
}

// Stylized QR mark — purely visual placeholder.
function QRGlyph() {
  // Deterministic pseudo-random pattern using a small grid.
  const cells = [
    [1,1,1,1,1,0,1,1],
    [1,0,0,1,0,1,0,1],
    [1,0,1,0,1,0,1,1],
    [1,1,1,0,0,1,0,0],
    [0,1,0,1,1,0,1,1],
    [1,0,1,0,1,1,0,1],
    [1,1,0,1,0,0,1,0],
    [1,1,1,1,1,0,1,1],
  ];
  return (
    <svg viewBox="0 0 80 80" width="52" height="52">
      {cells.map((row, y) => row.map((v, x) => v ? <rect key={`${x}-${y}`} x={x*10} y={y*10} width="10" height="10" fill="#18181B"/> : null))}
      {/* finder squares */}
      {[[0,0],[60,0],[0,60]].map(([x,y], i) => (
        <g key={i}>
          <rect x={x} y={y} width="20" height="20" fill="#18181B"/>
          <rect x={x+4} y={y+4} width="12" height="12" fill="white"/>
          <rect x={x+8} y={y+8} width="4" height="4" fill="#18181B"/>
        </g>
      ))}
    </svg>
  );
}

// ─── Social / announcement card (1200×630, OG ratio) ─────────────────
function SocialShareCard() {
  return (
    <div className="w-full h-full relative overflow-hidden" style={{ background: '#0B0B0F', color: 'white' }}>
      {/* Background dot pattern */}
      <svg className="absolute inset-0 w-full h-full pointer-events-none" aria-hidden="true" style={{ opacity: 0.07 }}>
        <defs>
          <pattern id="sdot" width="28" height="28" patternUnits="userSpaceOnUse">
            <circle cx="2" cy="2" r="1.2" fill="white"/>
          </pattern>
        </defs>
        <rect width="100%" height="100%" fill="url(#sdot)" />
      </svg>
      {/* Soft indigo glow top-right */}
      <div className="absolute -top-40 -right-40 w-[600px] h-[600px] rounded-full pointer-events-none"
           style={{ background: 'radial-gradient(circle, rgba(79,110,247,0.4) 0%, transparent 60%)' }}></div>

      <div className="relative h-full flex flex-col p-16">
        {/* Top row */}
        <div className="flex items-center gap-3">
          <span className="h-10 w-10 rounded-md grid place-items-center text-white font-bold text-[16px]" style={{ background: 'white', color: '#0B0B0F' }}>CH</span>
          <span className="text-[18px] font-semibold tracking-tight">ConstructHub</span>
          <span className="mx-3 text-white/30">·</span>
          <span className="text-[12.5px] uppercase tracking-[0.16em] text-white/60 font-semibold">Beta privada · outono de 2026</span>
        </div>

        {/* Main */}
        <div className="flex-1 grid grid-cols-12 gap-12 items-center mt-6">
          <div className="col-span-7">
            <div className="inline-flex items-center gap-2 h-7 px-3 rounded-full text-[11px] font-semibold uppercase tracking-[0.14em]"
                 style={{ background: C_INDIGO, color: 'white' }}>
              <L name="sparkles" className="w-3 h-3" />
              Procuram-se 25 distribuidores
            </div>
            <h1 className="text-[60px] leading-[1.04] font-semibold tracking-[-0.02em] mt-6">
              O ERP feito para quem<br/>
              <span className="text-white/40">vende materiais de </span>
              <span className="relative inline-block">
                construção
                <svg className="absolute -bottom-2 left-0 w-full" height="8" viewBox="0 0 540 8" fill="none">
                  <path d="M2 5 C 140 1, 380 1, 538 4" stroke={C_INDIGO} strokeWidth="3" strokeLinecap="round"/>
                </svg>
              </span>.
            </h1>
            <p className="text-[18px] text-white/70 mt-6 max-w-[640px] leading-relaxed">
              Junte-se à beta privada do ConstructHub e moldem o produto connosco.
              Condições preferenciais para os primeiros 25 distribuidores portugueses.
            </p>
            <div className="mt-9 flex items-center gap-4">
              <span className="h-12 px-5 rounded-md bg-white text-zinc-900 text-[14px] font-semibold inline-flex items-center gap-2">
                Pedir convite <L name="arrow-right" className="w-4 h-4" />
              </span>
              <span className="text-[12.5px] text-white/50 font-mono">ConstructHub</span>
            </div>
          </div>

          <div className="col-span-5 flex items-center justify-center">
            <SocialBadgeStack />
          </div>
        </div>

        {/* Bottom strip */}
        <div className="flex items-center justify-between pt-8 border-t border-white/10 text-[11.5px] text-white/50">
          <div className="flex items-center gap-6">
            <span className="inline-flex items-center gap-1.5"><L name="shield-check" className="w-3.5 h-3.5" />AT e-fatura</span>
            <span className="inline-flex items-center gap-1.5"><L name="file-text" className="w-3.5 h-3.5" />SAF-T PT</span>
            <span className="inline-flex items-center gap-1.5"><L name="languages" className="w-3.5 h-3.5" />100% PT-PT</span>
            <span className="inline-flex items-center gap-1.5"><L name="sparkles" className="w-3.5 h-3.5" />Assistente IA</span>
          </div>
          <div className="font-mono">v1.0 · Lisboa, Portugal</div>
        </div>
      </div>
    </div>
  );
}

function SocialBadgeStack() {
  // Three stacked cards visualizing the three products.
  const items = [
    { i: 'layout-dashboard', t: 'Build',   s: 'ERP do distribuidor',   tone: 'rgba(255,255,255,0.06)', rot: -7,  off: { x: -40, y: 30 } },
    { i: 'shopping-cart',    t: 'Portal',  s: 'Loja B2B',              tone: 'rgba(255,255,255,0.08)', rot: 2,   off: { x: 0,   y: -10 } },
    { i: 'sparkles',         t: 'IA',      s: 'Assistente em português', tone: C_INDIGO,                 rot: 9,   off: { x: 40,  y: 50 }, accent: true },
  ];
  return (
    <div className="relative" style={{ width: 340, height: 380 }}>
      {items.map((it, i) => (
        <div key={i}
             className="absolute rounded-2xl border p-5 flex flex-col gap-3 backdrop-blur-md"
             style={{
               width: 220, height: 220,
               left: 60 + it.off.x, top: 80 + it.off.y,
               background: it.accent ? it.tone : it.tone,
               borderColor: it.accent ? 'rgba(255,255,255,0.4)' : 'rgba(255,255,255,0.15)',
               transform: `rotate(${it.rot}deg)`,
               boxShadow: '0 20px 40px -10px rgba(0,0,0,0.5)',
               zIndex: i === 1 ? 3 : i === 2 ? 2 : 1,
             }}>
          <div className="h-10 w-10 rounded-lg grid place-items-center"
               style={{ background: it.accent ? 'rgba(0,0,0,0.2)' : 'rgba(255,255,255,0.1)' }}>
            <L name={it.i} className="w-5 h-5 text-white" />
          </div>
          <div>
            <div className="text-[20px] font-semibold tracking-tight">{it.t}</div>
            <div className="text-[11.5px] text-white/70 mt-0.5">{it.s}</div>
          </div>
          <div className="mt-auto flex items-center gap-1 text-[10.5px] text-white/60">
            <L name="arrow-up-right" className="w-3 h-3" /> ConstructHub
          </div>
        </div>
      ))}
    </div>
  );
}

Object.assign(window, { InviteCardFront, SocialShareCard });