/* global React, ART_PALETTE, SUIT_COLOR, Pip */

// Generate a back-of-card pattern (used for face-down cards)
const CardBack = () => (
  <svg viewBox="0 0 100 150" xmlns="http://www.w3.org/2000/svg" style={{width:'100%', height:'100%', display:'block'}}>
    <defs>
      <linearGradient id="cb-grad" x1="0" y1="0" x2="0" y2="1">
        <stop offset="0" stopColor="#fafaf8"/>
        <stop offset="1" stopColor="#f0eee8"/>
      </linearGradient>
    </defs>
    <rect x="0" y="0" width="100" height="150" fill="url(#cb-grad)"/>
    <rect x="3" y="3" width="94" height="144" fill="none" stroke={ART_PALETTE.gold} strokeWidth="0.4"/>
    <rect x="5" y="5" width="90" height="140" fill="none" stroke={ART_PALETTE.gold} strokeWidth="0.15" opacity="0.5"/>
    {/* central rosette */}
    <g transform="translate(50,75)">
      <circle r="22" fill="none" stroke={ART_PALETTE.gold} strokeWidth="0.4"/>
      <circle r="14" fill="none" stroke={ART_PALETTE.gold} strokeWidth="0.3"/>
      <circle r="6" fill="none" stroke={ART_PALETTE.gold} strokeWidth="0.3"/>
      {Array.from({length:8}).map((_,i)=>{
        const a = (i*Math.PI*2)/8;
        return <line key={i} x1={Math.cos(a)*6} y1={Math.sin(a)*6} x2={Math.cos(a)*22} y2={Math.sin(a)*22}
          stroke={ART_PALETTE.gold} strokeWidth="0.25" opacity="0.7"/>;
      })}
      {Array.from({length:16}).map((_,i)=>{
        const a = (i*Math.PI*2)/16 + Math.PI/16;
        return <circle key={'d'+i} cx={Math.cos(a)*22} cy={Math.sin(a)*22} r="0.6" fill={ART_PALETTE.gold} opacity="0.6"/>;
      })}
    </g>
    {/* corner ornaments */}
    {[[10,10],[90,10],[10,140],[90,140]].map(([x,y],i)=>(
      <circle key={i} cx={x} cy={y} r="1.5" fill="none" stroke={ART_PALETTE.gold} strokeWidth="0.3"/>
    ))}
    {/* small star field */}
    {Array.from({length:30}).map((_,i)=>{
      const x = (i*37)%100;
      const y = (i*73)%150;
      return <circle key={'s'+i} cx={x} cy={y} r="0.15" fill={ART_PALETTE.gold} opacity="0.3"/>;
    })}
  </svg>
);

window.CardBack = CardBack;