import { useId } from 'react'

// Brand-consistent vector illustrations that fill the "photo" zones of the site.
// Geometric, sober, charte palette (navy / blue / blue-dark / blue-light / gold,
// tints #E4EAF2 / #F4F6FA). Each SVG fills its parent like a cover photo.

const NAVY = '#0A2540'
const BLUE = '#0E7CC7'
const BLUEDK = '#0A5C94'
const BLUELT = '#5BB4E8'
const GOLD = '#D4A017'

const fill = { width: '100%', height: '100%', display: 'block' }

// ── Hero: advisory & growth (charts + Europe/Africa connection) ──────────────
export function HeroArt() {
  const id = useId().replace(/:/g, '')
  return (
    <svg viewBox="0 0 640 460" preserveAspectRatio="xMidYMid slice" style={fill} xmlns="http://www.w3.org/2000/svg" role="img" aria-label="Conseil et performance">
      <defs>
        <linearGradient id={`${id}-bg`} x1="0" y1="0" x2="1" y2="1">
          <stop offset="0" stopColor="#EAF1F9" />
          <stop offset="1" stopColor="#D9E5F1" />
        </linearGradient>
        <linearGradient id={`${id}-bar`} x1="0" y1="1" x2="0" y2="0">
          <stop offset="0" stopColor={BLUEDK} />
          <stop offset="1" stopColor={BLUELT} />
        </linearGradient>
        <filter id={`${id}-sh`} x="-20%" y="-20%" width="140%" height="140%">
          <feDropShadow dx="0" dy="14" stdDeviation="18" floodColor={NAVY} floodOpacity="0.14" />
        </filter>
      </defs>

      <rect width="640" height="460" fill={`url(#${id}-bg)`} />

      {/* faint orbital nod to Europe & Africa */}
      <circle cx="520" cy="120" r="120" fill="none" stroke={NAVY} strokeOpacity="0.07" strokeWidth="2" />
      <circle cx="520" cy="120" r="78" fill="none" stroke={NAVY} strokeOpacity="0.07" strokeWidth="2" />
      <circle cx="598" cy="120" r="5" fill={GOLD} />
      <circle cx="442" cy="120" r="5" fill={BLUE} />
      <circle cx="520" cy="42" r="5" fill={BLUE} />

      {/* main dashboard card */}
      <g filter={`url(#${id}-sh)`}>
        <rect x="70" y="118" width="404" height="256" rx="22" fill="#fff" />
      </g>
      <circle cx="98" cy="146" r="5" fill={GOLD} />
      <circle cx="116" cy="146" r="5" fill={BLUELT} />
      <circle cx="134" cy="146" r="5" fill="#CDD9E6" />
      <rect x="92" y="168" width="150" height="12" rx="6" fill="#E4EAF2" />

      {/* bars */}
      {[
        [120, 300, 56],
        [168, 300, 84],
        [216, 300, 112],
        [264, 300, 150],
        [312, 300, 188],
      ].map(([x, base, h], i) => (
        <rect key={i} x={x} y={base - h} width="28" height={h} rx="6" fill={i === 4 ? GOLD : `url(#${id}-bar)`} />
      ))}
      {/* growth line over the bars */}
      <polyline points="134,250 182,228 230,200 278,168 326,118" fill="none" stroke={NAVY} strokeWidth="3" strokeLinecap="round" strokeLinejoin="round" />
      <circle cx="326" cy="118" r="7" fill="#fff" stroke={GOLD} strokeWidth="4" />
      <rect x="356" y="196" width="92" height="104" rx="12" fill="#F4F6FA" />
      <rect x="372" y="216" width="48" height="10" rx="5" fill={BLUE} />
      <rect x="372" y="234" width="60" height="8" rx="4" fill="#CFDAE7" />
      <rect x="372" y="250" width="40" height="8" rx="4" fill="#CFDAE7" />
      <circle cx="402" cy="282" r="14" fill="none" stroke={BLUE} strokeWidth="5" />
      <path d="M402 268 A14 14 0 0 1 416 282" fill="none" stroke={GOLD} strokeWidth="5" />

      {/* floating KPI chip */}
      <g filter={`url(#${id}-sh)`}>
        <rect x="402" y="316" width="176" height="80" rx="16" fill="#fff" />
      </g>
      <circle cx="438" cy="356" r="18" fill="rgba(14,124,199,.12)" />
      <path d="M431 356 l5 6 l10 -12" fill="none" stroke={BLUE} strokeWidth="4" strokeLinecap="round" strokeLinejoin="round" />
      <rect x="466" y="342" width="92" height="12" rx="6" fill="#E4EAF2" />
      <rect x="466" y="362" width="64" height="9" rx="4.5" fill="#EBF0F6" />
    </svg>
  )
}

// ── Offices: geometric skyline (Cotonou · Abidjan · Aix-en-Provence) ─────────
export function OfficeArt() {
  const id = useId().replace(/:/g, '')
  const windows = (x, y, cols, rows, w, gap) =>
    Array.from({ length: cols * rows }, (_, k) => {
      const c = k % cols
      const r = Math.floor(k / cols)
      return <rect key={k} x={x + c * (w + gap)} y={y + r * (w + gap)} width={w} height={w} rx="2" fill="#fff" fillOpacity={(c + r) % 3 === 0 ? 0.95 : 0.35} />
    })
  return (
    <svg viewBox="0 0 560 440" preserveAspectRatio="xMidYMid slice" style={fill} xmlns="http://www.w3.org/2000/svg" role="img" aria-label="Nos implantations">
      <defs>
        <linearGradient id={`${id}-bg`} x1="0" y1="0" x2="0" y2="1">
          <stop offset="0" stopColor="#EAF1F9" />
          <stop offset="1" stopColor="#DCE7F2" />
        </linearGradient>
      </defs>
      <rect width="560" height="440" fill={`url(#${id}-bg)`} />
      <circle cx="436" cy="104" r="46" fill={BLUELT} fillOpacity="0.5" />
      <circle cx="436" cy="104" r="46" fill="none" stroke={BLUE} strokeOpacity="0.25" strokeWidth="2" />

      {/* buildings */}
      <rect x="74" y="208" width="104" height="186" rx="8" fill={BLUEDK} />
      {windows(92, 228, 3, 5, 16, 12)}
      <rect x="196" y="150" width="120" height="244" rx="8" fill={NAVY} />
      {windows(214, 172, 3, 7, 18, 13)}
      <rect x="262" y="120" width="14" height="30" rx="3" fill={GOLD} />
      <rect x="334" y="244" width="92" height="150" rx="8" fill={BLUE} />
      {windows(350, 262, 2, 4, 18, 14)}
      <rect x="444" y="284" width="70" height="110" rx="8" fill={BLUEDK} />
      {windows(458, 300, 2, 3, 16, 12)}

      {/* ground + accents */}
      <rect x="40" y="392" width="480" height="4" rx="2" fill={NAVY} fillOpacity="0.15" />
      <circle cx="120" cy="180" r="6" fill={GOLD} />
      <circle cx="392" cy="220" r="6" fill={GOLD} />
    </svg>
  )
}

// ── Team: flat-design character portraits, one per consultant ────────────────
// Original flat illustrations (not traced from any stock asset). Varied skin
// tones, hairstyles and brand-colored outfits to reflect a real, diverse team.
const PEOPLE = [
  // Samira Derres — long hair, navy blazer, gold earrings
  { bg: '#E7E1F0', skin: '#E2A977', skinShadow: '#CE9264', hair: '#241F2B', style: 'long', top: NAVY, collar: BLUELT, earring: true, accent: GOLD },
  // Masmoud Dine — short hair + beard, blue shirt
  { bg: '#DCE7F2', skin: '#C68A5E', skinShadow: '#AE7549', hair: '#1C1A22', style: 'short', beard: true, top: BLUE, collar: '#fff', accent: GOLD },
  // Zahra Id Ahmed — headscarf, navy top
  { bg: '#E8E2F1', skin: '#E8B68C', skinShadow: '#D29F76', hair: '#241F2B', style: 'scarf', scarf: BLUEDK, scarfFold: '#0C6FB0', top: NAVY, collar: BLUELT, accent: GOLD },
  // Alvinice Kodjo — afro, blue-dark top, gold collar
  { bg: '#E5E9F3', skin: '#8C5A34', skinShadow: '#744826', hair: '#141118', style: 'afro', top: BLUEDK, collar: GOLD, earring: true, accent: BLUELT },
  // Florent Agbobli — short fade, navy blazer
  { bg: '#DEEAF3', skin: '#955F38', skinShadow: '#7C4E2C', hair: '#141118', style: 'fade', top: NAVY, collar: BLUE, accent: GOLD },
  // Kevin Evedomenawo — short hair + glasses, blue-dark top
  { bg: '#E6EDF4', skin: '#A9774B', skinShadow: '#8E6139', hair: '#1A1620', style: 'short', glasses: true, top: BLUEDK, collar: '#fff', accent: GOLD },
]

export function Avatar({ index = 0 }) {
  const id = useId().replace(/:/g, '')
  const p = PEOPLE[index % PEOPLE.length]
  const eyeY = 102
  return (
    <svg viewBox="0 0 380 230" preserveAspectRatio="xMidYMid slice" style={fill} xmlns="http://www.w3.org/2000/svg" role="img" aria-label="Portrait d'un consultant">
      <defs>
        <clipPath id={`${id}-c`}>
          <rect width="380" height="230" />
        </clipPath>
      </defs>
      <g clipPath={`url(#${id}-c)`}>
        <rect width="380" height="230" fill={p.bg} />
        <circle cx="190" cy="258" r="158" fill="#fff" fillOpacity="0.5" />
        <circle cx={p.style === 'scarf' ? 322 : 318} cy="40" r="6" fill={p.accent} />
        <circle cx="58" cy="70" r="5" fill={p.accent} fillOpacity="0.6" />

        {/* torso / clothing */}
        <path d="M96 230 C96 176 136 152 190 152 C244 152 284 176 284 230 Z" fill={p.top} />
        <path d="M168 158 L190 196 L212 158 Z" fill={p.collar} fillOpacity="0.95" />
        <path d="M190 196 v34" stroke={p.collar} strokeWidth="3" strokeOpacity="0.5" />

        {/* neck */}
        <path d="M174 132 h32 v16 c0 9 -32 9 -32 0 z" fill={p.skin} />
        <path d="M174 140 c8 7 24 7 32 0 v8 c0 9 -32 9 -32 0 z" fill={p.skinShadow} fillOpacity="0.6" />

        {/* hair behind head / afro / scarf drape */}
        {p.style === 'long' && (
          <path d="M138 92 C136 50 244 50 242 92 L250 188 C232 196 210 198 190 198 C170 198 148 196 130 188 Z" fill={p.hair} />
        )}
        {p.style === 'afro' && (
          <g fill={p.hair}>
            <circle cx="190" cy="78" r="56" />
            <circle cx="146" cy="92" r="30" />
            <circle cx="234" cy="92" r="30" />
            <circle cx="165" cy="52" r="26" />
            <circle cx="215" cy="52" r="26" />
          </g>
        )}
        {p.style === 'scarf' && (
          <path d="M132 96 C132 44 248 44 248 96 L256 210 L124 210 Z" fill={p.scarf} />
        )}

        {/* head */}
        <ellipse cx="190" cy="100" rx="42" ry="47" fill={p.skin} />

        {/* ears (+ optional earrings) — hidden under scarf */}
        {p.style !== 'scarf' && (
          <>
            <circle cx="148" cy="106" r="9" fill={p.skin} />
            <circle cx="232" cy="106" r="9" fill={p.skin} />
            {p.earring && (
              <>
                <circle cx="148" cy="120" r="4" fill={GOLD} />
                <circle cx="232" cy="120" r="4" fill={GOLD} />
              </>
            )}
          </>
        )}

        {/* hair in front (hairline) */}
        {(p.style === 'long' || p.style === 'short') && (
          <path d="M148 102 C148 64 232 64 232 102 C232 86 214 78 190 78 C166 78 148 86 148 102 Z" fill={p.hair} />
        )}
        {p.style === 'fade' && (
          <path d="M151 98 C151 70 229 70 229 98 C229 90 214 84 190 84 C166 84 151 90 151 98 Z" fill={p.hair} />
        )}
        {p.style === 'afro' && (
          <path d="M150 100 C150 74 230 74 230 100 C230 90 214 84 190 84 C166 84 150 90 150 100 Z" fill={p.hair} />
        )}
        {p.style === 'scarf' && (
          <>
            <path d="M148 98 C148 50 232 50 232 98 C232 72 148 72 148 98 Z" fill={p.scarf} />
            <path d="M150 92 C150 64 230 64 230 90" fill="none" stroke={p.scarfFold} strokeWidth="3" strokeOpacity="0.7" />
          </>
        )}

        {/* beard */}
        {p.beard && (
          <path d="M154 106 C154 142 190 156 190 156 C190 156 226 142 226 106 C226 126 210 136 190 136 C170 136 154 126 154 106 Z" fill={p.hair} />
        )}

        {/* face: eyebrows, eyes, nose, smile */}
        <path d={`M168 ${eyeY - 11} q8 -5 16 -1`} fill="none" stroke={p.hair} strokeWidth="2.6" strokeLinecap="round" />
        <path d={`M196 ${eyeY - 12} q8 -4 16 1`} fill="none" stroke={p.hair} strokeWidth="2.6" strokeLinecap="round" />
        <ellipse cx="176" cy={eyeY} rx="3.1" ry="4" fill="#2A2730" />
        <ellipse cx="204" cy={eyeY} rx="3.1" ry="4" fill="#2A2730" />
        <path d={`M188 ${eyeY + 6} q-4 8 2 10`} fill="none" stroke={p.skinShadow} strokeWidth="2.2" strokeLinecap="round" />
        <path d={`M180 ${eyeY + 20} q10 8 20 0`} fill="none" stroke={p.beard ? '#7A4A2C' : p.skinShadow} strokeWidth="2.6" strokeLinecap="round" />

        {/* glasses */}
        {p.glasses && (
          <g fill="none" stroke={NAVY} strokeWidth="2.6">
            <rect x="162" y={eyeY - 8} width="26" height="20" rx="6" />
            <rect x="192" y={eyeY - 8} width="26" height="20" rx="6" />
            <path d={`M188 ${eyeY} h4`} strokeLinecap="round" />
          </g>
        )}
      </g>
    </svg>
  )
}

// ── Solution previews: finance dashboard / modular ERP / tax compliance ──────
export function SolutionArt({ kind = 'finance' }) {
  const id = useId().replace(/:/g, '')
  const Frame = ({ children }) => (
    <svg viewBox="0 0 620 380" preserveAspectRatio="xMidYMid slice" style={fill} xmlns="http://www.w3.org/2000/svg" role="img" aria-label="Aperçu de solution">
      <defs>
        <linearGradient id={`${id}-bg`} x1="0" y1="0" x2="1" y2="1">
          <stop offset="0" stopColor="#EAF1F9" />
          <stop offset="1" stopColor="#DCE7F2" />
        </linearGradient>
        <filter id={`${id}-sh`} x="-20%" y="-20%" width="140%" height="140%">
          <feDropShadow dx="0" dy="12" stdDeviation="16" floodColor={NAVY} floodOpacity="0.13" />
        </filter>
      </defs>
      <rect width="620" height="380" fill={`url(#${id}-bg)`} />
      {/* window chrome */}
      <g filter={`url(#${id}-sh)`}>
        <rect x="86" y="64" width="448" height="252" rx="18" fill="#fff" />
      </g>
      <rect x="86" y="64" width="448" height="44" rx="18" fill="#0A2540" />
      <rect x="86" y="92" width="448" height="16" fill="#0A2540" />
      <circle cx="112" cy="86" r="5" fill={GOLD} />
      <circle cx="130" cy="86" r="5" fill={BLUELT} />
      <circle cx="148" cy="86" r="5" fill="rgba(255,255,255,.4)" />
      {children}
    </svg>
  )

  if (kind === 'erp') {
    const mods = [
      [120, 132, BLUE, true],
      [236, 132, '#EAF0F6', false],
      [352, 132, '#EAF0F6', false],
      [120, 224, '#EAF0F6', false],
      [236, 224, GOLD, false],
      [352, 224, '#EAF0F6', false],
    ]
    return (
      <Frame>
        {/* connecting lines */}
        <path d="M170 168 H286 M286 168 H402 M170 168 V260 M286 260 V168 M402 168 V260" stroke="#CBD8E6" strokeWidth="2" fill="none" />
        {mods.map(([x, y, c, hi], i) => (
          <g key={i}>
            <rect x={x} y={y} width="100" height="72" rx="12" fill={c} />
            <rect x={x + 18} y={y + 18} width="26" height="26" rx="6" fill={hi ? '#fff' : c === GOLD ? '#fff' : BLUE} fillOpacity={hi || c === GOLD ? 0.9 : 0.85} />
            <rect x={x + 52} y={y + 22} width="30" height="7" rx="3.5" fill={hi || c === GOLD ? 'rgba(255,255,255,.85)' : '#C2D1E0'} />
            <rect x={x + 52} y={y + 34} width="20" height="6" rx="3" fill={hi || c === GOLD ? 'rgba(255,255,255,.6)' : '#D2DEEA'} />
          </g>
        ))}
      </Frame>
    )
  }

  if (kind === 'tax') {
    return (
      <Frame>
        {/* document */}
        <rect x="118" y="134" width="180" height="160" rx="12" fill="#F4F6FA" />
        {[0, 1, 2, 3, 4].map((i) => (
          <rect key={i} x="140" y={158 + i * 24} width={i === 4 ? 92 : 138} height="9" rx="4.5" fill={i === 0 ? BLUE : '#CFDAE7'} />
        ))}
        {/* calendar */}
        <rect x="330" y="134" width="180" height="160" rx="12" fill="#fff" stroke="#E1E9F1" strokeWidth="2" />
        <rect x="330" y="134" width="180" height="34" rx="12" fill={BLUEDK} />
        <rect x="330" y="150" width="180" height="18" fill={BLUEDK} />
        {Array.from({ length: 12 }, (_, i) => {
          const c = i % 4
          const r = Math.floor(i / 4)
          const hot = i === 6
          return <rect key={i} x={352 + c * 38} y={186 + r * 34} width="24" height="24" rx="6" fill={hot ? GOLD : '#EAF0F6'} />
        })}
        {/* compliance check badge */}
        <circle cx="300" cy="288" r="30" fill="#fff" stroke="#E1E9F1" strokeWidth="2" />
        <circle cx="300" cy="288" r="30" fill="rgba(31,138,91,.10)" />
        <path d="M286 288 l9 10 l18 -22" fill="none" stroke="#1F8A5B" strokeWidth="5" strokeLinecap="round" strokeLinejoin="round" />
      </Frame>
    )
  }

  // finance dashboard (default)
  return (
    <Frame>
      {/* KPI tiles */}
      <rect x="118" y="132" width="120" height="60" rx="10" fill="#F4F6FA" />
      <rect x="134" y="148" width="54" height="14" rx="7" fill={BLUE} />
      <rect x="134" y="170" width="74" height="8" rx="4" fill="#CFDAE7" />
      <rect x="256" y="132" width="120" height="60" rx="10" fill="#F4F6FA" />
      <rect x="272" y="148" width="44" height="14" rx="7" fill={NAVY} />
      <rect x="272" y="170" width="74" height="8" rx="4" fill="#CFDAE7" />
      <rect x="394" y="132" width="108" height="60" rx="10" fill="rgba(212,160,23,.14)" />
      <rect x="410" y="148" width="40" height="14" rx="7" fill={GOLD} />
      <rect x="410" y="170" width="60" height="8" rx="4" fill="#E3D2A6" />
      {/* area chart */}
      <rect x="118" y="206" width="384" height="92" rx="10" fill="#F8FAFC" />
      <polyline points="138,278 188,262 238,268 288,238 338,248 388,214 438,224 486,190" fill="none" stroke={BLUE} strokeWidth="3" strokeLinecap="round" strokeLinejoin="round" />
      <path d="M138,278 188,262 238,268 288,238 338,248 388,214 438,224 486,190 486,288 138,288 Z" fill={BLUE} fillOpacity="0.10" />
      <circle cx="486" cy="190" r="6" fill="#fff" stroke={GOLD} strokeWidth="4" />
    </Frame>
  )
}
