// Stylized browser mockups for portfolio sites — pure CSS/SVG
// Each component represents a fictionalized preview of the actual project.

function BrowserChrome({ url, accent = '#6C63FF', children, compact = false }) {
  return (
    <div className="w-full h-full rounded-2xl overflow-hidden border border-white/10 bg-[#0f0d24] shadow-card flex flex-col">
      {/* chrome */}
      <div className="flex items-center gap-2 px-3 py-2.5 border-b border-white/10 bg-[#0a0815]">
        <div className="flex gap-1.5">
          <span className="w-2.5 h-2.5 rounded-full bg-[#ff5f57]"></span>
          <span className="w-2.5 h-2.5 rounded-full bg-[#febc2e]"></span>
          <span className="w-2.5 h-2.5 rounded-full bg-[#28c840]"></span>
        </div>
        <div className="flex-1 mx-3 text-[10px] text-white/40 bg-black/30 rounded-md py-1 px-2 truncate font-medium">
          {url}
        </div>
      </div>
      <div className="flex-1 overflow-hidden">{children}</div>
    </div>
  );
}

/* ---------- Redd Motos ---------- */
function ReddMotosMockup() {
  return (
    <BrowserChrome url="redd-motos.vercel.app" accent="#ef4444">
      <div className="w-full h-full bg-gradient-to-br from-[#0c0a18] via-[#1a0d10] to-[#0c0a18] text-white relative">
        {/* nav */}
        <div className="flex items-center justify-between px-5 py-3 border-b border-white/5">
          <div className="flex items-center gap-2">
            <div className="w-6 h-6 rounded-md bg-[#ef4444] grid place-items-center text-[10px] font-black">R</div>
            <span className="font-black tracking-tight text-sm">REDD <span className="text-[#ef4444]">MOTOS</span></span>
          </div>
          <div className="flex gap-3 text-[9px] text-white/60 font-medium">
            <span>Motos</span><span>Financiar</span><span>Contato</span>
          </div>
        </div>
        {/* hero */}
        <div className="px-5 py-4">
          <div className="text-[8px] text-[#ef4444] font-bold tracking-widest mb-1">CATÁLOGO 2025</div>
          <div className="text-xl font-black leading-tight">A moto certa<br/>está esperando<br/>por você.</div>
        </div>
        {/* filter chips */}
        <div className="flex gap-1.5 px-5 mb-3">
          {['Honda','Yamaha','Esportiva','Custom'].map((f,i) => (
            <span key={i} className={`text-[8px] px-2 py-1 rounded-full ${i===0?'bg-[#ef4444] text-white':'bg-white/5 text-white/60 border border-white/10'}`}>{f}</span>
          ))}
        </div>
        {/* bike cards */}
        <div className="grid grid-cols-3 gap-2 px-5">
          {[1,2,3].map(i => (
            <div key={i} className="bg-white/[0.03] border border-white/10 rounded-lg p-2 overflow-hidden">
              <div className="h-12 rounded-md bg-gradient-to-br from-[#ef4444]/30 to-black/40 mb-1.5 relative overflow-hidden">
                <svg viewBox="0 0 80 40" className="absolute inset-0 w-full h-full opacity-90">
                  <circle cx="18" cy="30" r="7" fill="none" stroke="#fff" strokeWidth="1.2"/>
                  <circle cx="62" cy="30" r="7" fill="none" stroke="#fff" strokeWidth="1.2"/>
                  <path d="M18 30 L40 14 L62 30" stroke="#ef4444" strokeWidth="2" fill="none"/>
                  <path d="M30 22 L48 22" stroke="#fff" strokeWidth="1.5"/>
                </svg>
              </div>
              <div className="text-[7px] font-bold">CB 500F</div>
              <div className="text-[7px] text-[#ef4444] font-black">R$ 32.900</div>
            </div>
          ))}
        </div>
      </div>
    </BrowserChrome>
  );
}

/* ---------- Jacob Moda Fitness ---------- */
function JacobMockup() {
  return (
    <BrowserChrome url="jacobmodafitness.com.br" accent="#ec4899">
      <div className="w-full h-full bg-gradient-to-br from-[#1a0a16] via-[#0c0a18] to-[#0c0a18] text-white relative">
        <div className="flex items-center justify-between px-5 py-3 border-b border-white/5">
          <div className="font-bold text-sm tracking-tight">jacob<span className="text-[#ec4899]">.</span>fit</div>
          <div className="flex gap-2 text-[9px] text-white/60">
            <span>Top</span><span>Legging</span><span>Conjuntos</span>
            <span className="text-[#ec4899]">♡</span>
          </div>
        </div>
        <div className="grid grid-cols-2 gap-0">
          <div className="p-5">
            <div className="text-[8px] text-[#ec4899] font-bold mb-1">NOVA COLEÇÃO</div>
            <div className="text-lg font-black leading-tight mb-2">Movimento<br/>com estilo.</div>
            <div className="text-[8px] text-white/50 mb-2 leading-snug">Coleção verão 2025 com tecidos premium e modelagem perfeita.</div>
            <div className="inline-block text-[8px] bg-[#ec4899] px-2.5 py-1 rounded-full font-bold">Comprar agora</div>
          </div>
          <div className="relative">
            <div className="absolute inset-2 rounded-lg bg-gradient-to-br from-[#ec4899]/40 via-[#a855f7]/30 to-transparent overflow-hidden">
              <svg viewBox="0 0 60 80" className="absolute inset-0 w-full h-full">
                <ellipse cx="30" cy="18" rx="6" ry="7" fill="#fce7f3"/>
                <path d="M22 28 Q30 24 38 28 L40 50 Q30 54 20 50 Z" fill="#ec4899"/>
                <rect x="24" y="50" width="5" height="22" rx="2" fill="#1f1024"/>
                <rect x="31" y="50" width="5" height="22" rx="2" fill="#1f1024"/>
              </svg>
            </div>
          </div>
        </div>
        <div className="grid grid-cols-4 gap-1.5 px-3 -mt-2">
          {[0,1,2,3].map(i => (
            <div key={i} className="aspect-[3/4] rounded-md bg-gradient-to-br from-[#ec4899]/20 to-black/40 border border-white/10 p-1.5 flex flex-col justify-end">
              <div className="text-[6px] text-white/70 font-bold">Conjunto {i+1}</div>
              <div className="text-[7px] text-[#ec4899] font-black">R$ 14{i}</div>
            </div>
          ))}
        </div>
      </div>
    </BrowserChrome>
  );
}

/* ---------- VS Imports ---------- */
function VSImportsMockup() {
  return (
    <BrowserChrome url="vsimports.vercel.app" accent="#22d3ee">
      <div className="w-full h-full bg-gradient-to-br from-[#08141a] via-[#0a0a18] to-[#0c1620] text-white relative">
        <div className="flex items-center justify-between px-5 py-3 border-b border-white/5">
          <div className="font-black text-sm tracking-tighter">
            <span className="text-[#22d3ee]">VS</span> imports
          </div>
          <div className="flex gap-3 text-[9px] text-white/60">
            <span>Perfumes</span><span>Eletrônicos</span><span>Acessórios</span>
          </div>
        </div>
        <div className="px-5 py-4">
          <div className="flex items-baseline gap-2 mb-1">
            <div className="text-[8px] text-[#22d3ee] font-bold tracking-widest">★ IMPORTADO ORIGINAL</div>
          </div>
          <div className="text-xl font-black leading-tight">Produtos do mundo,<br/>direto pra você.</div>
        </div>
        <div className="grid grid-cols-4 gap-2 px-5">
          {[
            { label: 'Perfume', emoji: '🌸', price: '289' },
            { label: 'Tênis', emoji: '👟', price: '459' },
            { label: 'Relógio', emoji: '⌚', price: '320' },
            { label: 'Fone', emoji: '🎧', price: '189' },
          ].map((p, i) => (
            <div key={i} className="bg-white/[0.04] border border-white/10 rounded-lg p-2">
              <div className="h-10 rounded-md bg-gradient-to-br from-[#22d3ee]/20 to-black/40 mb-1 grid place-items-center text-base">
                {p.emoji}
              </div>
              <div className="text-[7px] font-bold text-white/80">{p.label}</div>
              <div className="text-[7px] text-[#22d3ee] font-black">R$ {p.price}</div>
            </div>
          ))}
        </div>
        <div className="px-5 mt-2 flex items-center justify-between">
          <div className="text-[8px] text-white/50">Frete grátis acima de R$ 200</div>
          <div className="text-[8px] bg-[#22d3ee]/20 text-[#22d3ee] px-2 py-0.5 rounded-full font-bold border border-[#22d3ee]/40">Ver tudo →</div>
        </div>
      </div>
    </BrowserChrome>
  );
}

/* ---------- Savegnago Semi Joias ---------- */
function SavegnagoMockup() {
  return (
    <BrowserChrome url="savegnago-semi-joias.vercel.app" accent="#d4af37">
      <div className="w-full h-full bg-gradient-to-br from-[#0e0a12] via-[#16101a] to-[#0e0a12] text-white relative">
        <div className="flex items-center justify-between px-5 py-3 border-b border-white/5">
          <div className="font-serif italic text-sm tracking-wide">
            <span className="text-[#d4af37]">Savegnago</span><span className="text-white/60 text-[10px]"> · semijoias</span>
          </div>
          <div className="flex gap-3 text-[9px] text-white/60">
            <span>Anéis</span><span>Colares</span><span>Brincos</span>
          </div>
        </div>
        <div className="px-5 py-4 text-center">
          <div className="text-[8px] text-[#d4af37] tracking-[0.3em] font-bold mb-1">PRATA 925</div>
          <div className="text-xl font-serif italic leading-tight">Detalhes que<br/>contam histórias.</div>
        </div>
        <div className="grid grid-cols-3 gap-2 px-5">
          {[0,1,2].map(i => (
            <div key={i} className="aspect-square rounded-lg bg-gradient-to-br from-[#d4af37]/15 to-black/50 border border-[#d4af37]/20 grid place-items-center relative overflow-hidden">
              <svg viewBox="0 0 40 40" className="w-2/3 h-2/3">
                {i===0 && (
                  <g>
                    <circle cx="20" cy="22" r="10" fill="none" stroke="#d4af37" strokeWidth="2"/>
                    <circle cx="20" cy="10" r="2" fill="#d4af37"/>
                  </g>
                )}
                {i===1 && (
                  <g>
                    <path d="M20 8 Q12 16 12 24 Q12 32 20 32 Q28 32 28 24 Q28 16 20 8 Z" fill="none" stroke="#d4af37" strokeWidth="1.5"/>
                    <circle cx="20" cy="22" r="2" fill="#d4af37"/>
                  </g>
                )}
                {i===2 && (
                  <g>
                    <path d="M14 14 L26 14 L24 30 L16 30 Z" fill="none" stroke="#d4af37" strokeWidth="1.5"/>
                    <circle cx="20" cy="22" r="3" fill="none" stroke="#d4af37" strokeWidth="1.2"/>
                  </g>
                )}
              </svg>
              <div className="absolute bottom-1 left-0 right-0 text-center text-[6px] text-[#d4af37] font-bold tracking-wider">
                {['ANEL','COLAR','BRINCO'][i]}
              </div>
            </div>
          ))}
        </div>
        <div className="px-5 mt-3 text-center">
          <div className="inline-block text-[8px] border border-[#d4af37]/60 text-[#d4af37] px-3 py-1 rounded-full font-bold tracking-wider">EXPLORAR COLEÇÃO</div>
        </div>
      </div>
    </BrowserChrome>
  );
}

Object.assign(window, { BrowserChrome, ReddMotosMockup, JacobMockup, VSImportsMockup, SavegnagoMockup });