/* global React */
// Branded bonus covers — layered SVG compositions with CCA wordmark.
// Each cover is a full-bleed visual designed to feel like a product cover.

// Shared corner ticks layer
function CornerTicks() {
  return (
    <svg className="bc-corners" viewBox="0 0 100 100" preserveAspectRatio="none" aria-hidden="true">
      {/* Top-left */}
      <path d="M2 10 L2 2 L10 2"/>
      {/* Top-right */}
      <path d="M90 2 L98 2 L98 10"/>
      {/* Bottom-left */}
      <path d="M2 90 L2 98 L10 98"/>
      {/* Bottom-right */}
      <path d="M90 98 L98 98 L98 90"/>
    </svg>
  );
}

// Subtle dotted grid background
function DotGrid() {
  return (
    <svg className="bc-dots" viewBox="0 0 200 100" preserveAspectRatio="xMidYMid slice" aria-hidden="true">
      <defs>
        <pattern id="bc-dot-pattern" x="0" y="0" width="6" height="6" patternUnits="userSpaceOnUse">
          <circle cx="0.7" cy="0.7" r="0.45" fill="currentColor"/>
        </pattern>
      </defs>
      <rect width="200" height="100" fill="url(#bc-dot-pattern)"/>
    </svg>
  );
}

// Base layout shell
function CoverShell({number, label, motif, accent = "default"}) {
  return (
    <div className={`bonus-cover bonus-cover--${accent}`}>
      <div className="bc-bg"/>
      <div className="bc-dots-wrap"><DotGrid/></div>

      {/* Big italic number (right) */}
      <span className="bc-num">{number}</span>

      {/* Motif (center-left/middle) */}
      <div className="bc-motif">{motif}</div>

      {/* Bottom label */}
      <span className="bc-label">{label}</span>
    </div>
  );
}

// ─── Motifs ───
const STROKE = { stroke: "currentColor", fill: "none", strokeWidth: 1, strokeLinecap: "round", strokeLinejoin: "round" };

// 01 — Compass rose (cartographic)
function MotifCompass() {
  return (
    <svg viewBox="0 0 120 120" {...STROKE}>
      <circle cx="60" cy="60" r="48" opacity="0.35"/>
      <circle cx="60" cy="60" r="38"/>
      <circle cx="60" cy="60" r="26" opacity="0.55"/>
      <circle cx="60" cy="60" r="2.4" fill="currentColor"/>
      {/* 8-point rose */}
      <path d="M60 22 L65 60 L60 98 L55 60 Z" fill="currentColor" opacity="0.85"/>
      <path d="M22 60 L60 65 L98 60 L60 55 Z" fill="currentColor" opacity="0.55"/>
      <path d="M33 33 L60 58 L87 33 L62 60 Z" opacity="0.4"/>
      <path d="M33 87 L60 62 L87 87 L62 60 Z" opacity="0.4"/>
      {/* Tick marks */}
      {[...Array(16)].map((_, i) => {
        const a = (i * 22.5) * Math.PI / 180;
        const r1 = 48, r2 = 52;
        return <line key={i} x1={60 + Math.cos(a)*r1} y1={60 + Math.sin(a)*r1} x2={60 + Math.cos(a)*r2} y2={60 + Math.sin(a)*r2} opacity={i % 4 === 0 ? 1 : 0.4}/>;
      })}
      {/* N S E W */}
      <text x="60" y="16" textAnchor="middle" fontSize="6" letterSpacing="1" fill="currentColor" style={{fontFamily: "var(--font-sans), system-ui"}}>N</text>
      <text x="60" y="110" textAnchor="middle" fontSize="6" letterSpacing="1" fill="currentColor" style={{fontFamily: "var(--font-sans), system-ui"}}>S</text>
      <text x="14" y="62" textAnchor="middle" fontSize="6" letterSpacing="1" fill="currentColor" style={{fontFamily: "var(--font-sans), system-ui"}}>O</text>
      <text x="106" y="62" textAnchor="middle" fontSize="6" letterSpacing="1" fill="currentColor" style={{fontFamily: "var(--font-sans), system-ui"}}>L</text>
    </svg>
  );
}

// 02 — 9-point map (anamnese)
function MotifMap9() {
  // 9 nodes positioned in a slight constellation
  const nodes = [
    [25, 28], [60, 18], [95, 32],
    [22, 60], [60, 55], [98, 62],
    [30, 92], [62, 88], [92, 92],
  ];
  // Connections
  const edges = [
    [0,1],[1,2],[0,3],[2,5],[3,4],[4,5],[3,6],[5,8],[6,7],[7,8],[1,4],[4,7]
  ];
  return (
    <svg viewBox="0 0 120 120" {...STROKE}>
      {edges.map(([a,b], i) => (
        <line key={i} x1={nodes[a][0]} y1={nodes[a][1]} x2={nodes[b][0]} y2={nodes[b][1]} opacity="0.35"/>
      ))}
      {nodes.map(([x,y], i) => (
        <g key={i}>
          <circle cx={x} cy={y} r="3.2" fill="currentColor"/>
          <circle cx={x} cy={y} r="6" opacity="0.3"/>
          <text x={x + 7} y={y + 2} fontSize="5.5" fill="currentColor" opacity="0.7" style={{fontFamily: "var(--font-sans), system-ui"}}>{String(i+1).padStart(2,"0")}</text>
        </g>
      ))}
    </svg>
  );
}

// 03 — Open planner spread
function MotifPlanner() {
  return (
    <svg viewBox="0 0 140 100" {...STROKE}>
      {/* Open book / planner */}
      <path d="M10 18 L70 14 L70 90 L10 86 Z"/>
      <path d="M70 14 L130 18 L130 86 L70 90 Z"/>
      <line x1="70" y1="14" x2="70" y2="90" opacity="0.55"/>
      {/* Left page lines */}
      <line x1="18" y1="30" x2="62" y2="29" opacity="0.5"/>
      <line x1="18" y1="40" x2="62" y2="39" opacity="0.5"/>
      <line x1="18" y1="50" x2="62" y2="49" opacity="0.5"/>
      <line x1="18" y1="60" x2="50" y2="59" opacity="0.5"/>
      <line x1="18" y1="70" x2="58" y2="69" opacity="0.5"/>
      {/* Right page: mini calendar */}
      <rect x="78" y="24" width="46" height="36" opacity="0.4"/>
      <line x1="78" y1="32" x2="124" y2="32" opacity="0.4"/>
      {[0,1,2,3,4,5,6].map(i => (
        <line key={i} x1={78 + i*46/7} y1="32" x2={78 + i*46/7} y2="60" opacity="0.25"/>
      ))}
      {/* Highlighted day */}
      <rect x="92" y="42" width="6.5" height="6" fill="currentColor" opacity="0.9"/>
      {/* Bottom check items */}
      <circle cx="82" cy="70" r="2" opacity="0.6"/>
      <line x1="86" y1="70" x2="120" y2="70" opacity="0.4"/>
      <circle cx="82" cy="78" r="2" fill="currentColor"/>
      <path d="M80 78 L82 80 L84 76" stroke="var(--bg)" strokeWidth="0.8"/>
      <line x1="86" y1="78" x2="118" y2="78" opacity="0.4"/>
    </svg>
  );
}

// 04 — Chat bubbles diagonal
function MotifChat() {
  return (
    <svg viewBox="0 0 130 120" {...STROKE}>
      {/* Incoming bubble */}
      <path d="M12 18 h54 a4 4 0 0 1 4 4 v18 a4 4 0 0 1 -4 4 H22 l-6 6 v-6 h-4 a4 4 0 0 1 -4 -4 V22 a4 4 0 0 1 4 -4 z"/>
      <line x1="18" y1="28" x2="60" y2="28" opacity="0.5"/>
      <line x1="18" y1="34" x2="48" y2="34" opacity="0.5"/>
      {/* Outgoing bubble (filled) */}
      <path d="M62 56 h54 a4 4 0 0 1 4 4 v18 a4 4 0 0 1 -4 4 h-44 l-6 6 v-6 h-4 a4 4 0 0 1 -4 -4 V60 a4 4 0 0 1 4 -4 z" fill="currentColor" opacity="0.92"/>
      <line x1="70" y1="66" x2="112" y2="66" stroke="var(--bg)" opacity="0.6"/>
      <line x1="70" y1="72" x2="100" y2="72" stroke="var(--bg)" opacity="0.6"/>
      {/* Incoming small */}
      <path d="M16 94 h36 a3 3 0 0 1 3 3 v12 a3 3 0 0 1 -3 3 H24 l-4 4 v-4 h-4 a3 3 0 0 1 -3 -3 V97 a3 3 0 0 1 3 -3 z" opacity="0.65"/>
      {/* Typing indicator dots */}
      <circle cx="24" cy="103" r="1.4" fill="currentColor"/>
      <circle cx="30" cy="103" r="1.4" fill="currentColor"/>
      <circle cx="36" cy="103" r="1.4" fill="currentColor" opacity="0.5"/>
    </svg>
  );
}

// 05 — Flask with hexagon molecules
function MotifFlask() {
  return (
    <svg viewBox="0 0 120 120" {...STROKE}>
      {/* Erlenmeyer flask */}
      <path d="M48 16 h24 v18 l16 50 a6 6 0 0 1 -5.6 8.4 H37.6 a6 6 0 0 1 -5.6 -8.4 l16 -50 z"/>
      <line x1="46" y1="34" x2="74" y2="34" opacity="0.6"/>
      <line x1="48" y1="16" x2="72" y2="16" opacity="0.8"/>
      {/* Liquid */}
      <path d="M44 60 L40 78 a6 6 0 0 0 5.6 8.4 h28.8 a6 6 0 0 0 5.6 -8.4 L76 60 z" fill="currentColor" opacity="0.18"/>
      {/* Bubbles */}
      <circle cx="56" cy="74" r="1.6" fill="currentColor"/>
      <circle cx="64" cy="68" r="1" fill="currentColor"/>
      <circle cx="60" cy="80" r="2" opacity="0.6"/>
      {/* Hexagon molecules floating */}
      <g transform="translate(94 28)" opacity="0.9">
        <polygon points="0,-8 7,-4 7,4 0,8 -7,4 -7,-4"/>
        <circle cx="0" cy="-8" r="1.6" fill="currentColor"/>
      </g>
      <g transform="translate(106 50)" opacity="0.6">
        <polygon points="0,-6 5.2,-3 5.2,3 0,6 -5.2,3 -5.2,-3"/>
      </g>
      <line x1="98" y1="30" x2="106" y2="46" opacity="0.45"/>
      {/* Caution mark */}
      <g transform="translate(20 28)" opacity="0.85">
        <path d="M-8 8 L0 -8 L8 8 z"/>
        <line x1="0" y1="-2" x2="0" y2="3"/>
        <circle cx="0" cy="5.5" r="0.8" fill="currentColor"/>
      </g>
    </svg>
  );
}

// 06 — Community network
function MotifCommunity() {
  const nodes = [
    { x: 30, y: 30, r: 9, primary: false },
    { x: 60, y: 18, r: 8, primary: false },
    { x: 92, y: 32, r: 9, primary: false },
    { x: 22, y: 70, r: 8, primary: false },
    { x: 60, y: 62, r: 13, primary: true },
    { x: 96, y: 72, r: 9, primary: false },
    { x: 44, y: 96, r: 7, primary: false },
    { x: 80, y: 98, r: 7, primary: false },
  ];
  const edges = [[0,1],[1,2],[0,4],[1,4],[2,4],[3,4],[5,4],[6,4],[7,4],[0,3],[2,5],[6,7]];
  return (
    <svg viewBox="0 0 120 120" {...STROKE}>
      {edges.map(([a,b], i) => (
        <line key={i} x1={nodes[a].x} y1={nodes[a].y} x2={nodes[b].x} y2={nodes[b].y} opacity="0.32"/>
      ))}
      {nodes.map((n, i) => (
        <g key={i}>
          <circle cx={n.x} cy={n.y} r={n.r + 3} opacity="0.18"/>
          <circle cx={n.x} cy={n.y} r={n.r} fill={n.primary ? "currentColor" : "none"} opacity={n.primary ? 0.95 : 1}/>
          {/* Tiny avatar marks */}
          {!n.primary && <circle cx={n.x} cy={n.y - n.r*0.25} r={n.r*0.32} opacity="0.7"/>}
          {!n.primary && <path d={`M ${n.x - n.r*0.6} ${n.y + n.r*0.55} a ${n.r*0.6} ${n.r*0.4} 0 0 1 ${n.r*1.2} 0`} opacity="0.7"/>}
        </g>
      ))}
      {/* WhatsApp pulse */}
      <circle cx="60" cy="62" r="20" opacity="0.18"/>
      <circle cx="60" cy="62" r="26" opacity="0.08"/>
    </svg>
  );
}

const MOTIFS = {
  compass: <MotifCompass/>,
  grid9: <MotifMap9/>,
  planner: <MotifPlanner/>,
  chat: <MotifChat/>,
  flask: <MotifFlask/>,
  community: <MotifCommunity/>,
};

const LABELS = {
  compass: "GPS · BÚSSOLA DE PRESCRIÇÃO",
  grid9: "MAPEAMENTO · 9 DIMENSÕES",
  planner: "PLANNER · ROTINA EDITÁVEL",
  chat: "ATENDIMENTO ONLINE",
  flask: "INGREDIENTES · ANÁLISE CRÍTICA",
  community: "COMUNIDADE · MENTORIA",
};

const ACCENTS = {
  compass: "warm",
  grid9: "cool",
  planner: "warm",
  chat: "deep",
  flask: "warm",
  community: "cool",
};

function BonusCover({bonus, index}) {
  const num = String((index % 6) + 1).padStart(2, "0");
  const motif = MOTIFS[bonus.icon] || MOTIFS.compass;
  const label = LABELS[bonus.icon] || "BÔNUS CCA";
  const accent = ACCENTS[bonus.icon] || "default";
  return (
    <CoverShell number={num} label={label} motif={motif} accent={accent}/>
  );
}

window.BonusCover = BonusCover;