function CaseTrophy() {
  return (
    <svg viewBox="0 0 400 250" xmlns="http://www.w3.org/2000/svg" preserveAspectRatio="xMidYMid meet" style={{width:'72%', height:'72%'}}>
      <g fill="none" stroke="#163963" strokeWidth="2" strokeLinejoin="round" strokeLinecap="round">
        <path d="M140 60 L260 60 L260 110 Q260 150 200 158 Q140 150 140 110 Z"/>
        <path d="M140 75 Q110 75 105 95 Q100 115 130 122"/>
        <path d="M260 75 Q290 75 295 95 Q300 115 270 122"/>
        <path d="M200 158 L200 188"/>
        <path d="M170 188 L230 188"/>
        <path d="M160 188 L240 188 L240 200 L160 200 Z"/>
        <path d="M155 200 L245 200 L245 215 L155 215 Z"/>
      </g>
      <text x="200" y="120" textAnchor="middle" fontFamily="ui-sans-serif, system-ui, sans-serif" fontWeight="700" fontSize="44" letterSpacing="-1" fill="#163963">1{'°'}</text>
      <g fill="none" stroke="#163963" strokeWidth="1.5" strokeLinecap="round" opacity="0.55">
        <path d="M70 130 Q60 145 65 165"/>
        <path d="M62 138 L72 138"/>
        <path d="M60 150 L72 150"/>
        <path d="M62 162 L72 162"/>
        <path d="M330 130 Q340 145 335 165"/>
        <path d="M328 138 L338 138"/>
        <path d="M328 150 L340 150"/>
        <path d="M328 162 L338 162"/>
      </g>
    </svg>
  );
}

function CaseMole() {
  return (
    <svg viewBox="0 0 400 250" xmlns="http://www.w3.org/2000/svg" preserveAspectRatio="xMidYMid meet" style={{width:'82%', height:'82%'}}>
      <g fill="none" stroke="#5B420A" strokeWidth="1.8" strokeLinejoin="miter" strokeLinecap="square">
        <line x1="20" y1="218" x2="380" y2="218"/>
        <path d="M50 218 L50 178 L90 178 L90 218"/>
        <path d="M55 188 L65 188 M75 188 L85 188 M55 200 L65 200 M75 200 L85 200"/>
        <path d="M100 218 L100 165 L135 165 L135 218"/>
        <path d="M108 175 L116 175 M120 175 L128 175 M108 188 L116 188 M120 188 L128 188 M108 200 L116 200 M120 200 L128 200"/>
        <path d="M145 218 L145 142 L172 142 L172 218"/>
        <path d="M186 218 L186 100 L210 100 L210 88 L222 88 L222 100 L246 100 L246 218 Z"/>
        <path d="M198 100 L198 38 L210 38 L210 22 L222 22 L222 38 L234 38 L234 100"/>
        <path d="M210 38 L210 14"/>
        <path d="M204 14 L216 14"/>
        <line x1="216" y1="68" x2="204" y2="68"/>
        <path d="M260 218 L260 168 L292 168 L292 218"/>
        <path d="M268 178 L276 178 M280 178 L288 178 M268 192 L276 192 M280 192 L288 192"/>
        <path d="M305 218 L305 152 L342 152 L342 218"/>
        <path d="M312 162 L322 162 M328 162 L338 162 M312 178 L322 178 M328 178 L338 178 M312 194 L322 194 M328 194 L338 194"/>
      </g>
    </svg>
  );
}

function CaseDiploma() {
  return (
    <svg viewBox="0 0 400 250" xmlns="http://www.w3.org/2000/svg" preserveAspectRatio="xMidYMid meet" style={{width:'76%', height:'76%'}}>
      <g fill="none" stroke="#571910" strokeWidth="1.8" strokeLinejoin="round" strokeLinecap="round">
        <path d="M75 55 Q60 55 60 70 L60 175 Q60 190 75 190 L300 190 Q315 190 315 175 L315 70 Q315 55 300 55 Z"/>
        <path d="M65 60 Q55 75 65 95 Q55 115 65 135 Q55 155 65 175"/>
        <path d="M310 60 Q320 75 310 95 Q320 115 310 135 Q320 155 310 175"/>
        <line x1="100" y1="85" x2="270" y2="85"/>
        <line x1="100" y1="105" x2="240" y2="105"/>
        <line x1="100" y1="125" x2="260" y2="125"/>
      </g>
      <g>
        <circle cx="320" cy="175" r="22" fill="#D3482F" stroke="#571910" strokeWidth="1.8"/>
        <circle cx="320" cy="175" r="14" fill="none" stroke="#FFFFFF" strokeWidth="1.5"/>
        <path d="M310 195 L312 220 L320 212 L328 220 L330 195" fill="#D3482F" stroke="#571910" strokeWidth="1.8" strokeLinejoin="round"/>
      </g>
      <g fill="#571910">
        <path d="M118 152 L121 158 L128 158 L122 162 L124 168 L118 165 L112 168 L114 162 L108 158 L115 158 Z"/>
        <path d="M148 152 L151 158 L158 158 L152 162 L154 168 L148 165 L142 168 L144 162 L138 158 L145 158 Z"/>
        <path d="M178 152 L181 158 L188 158 L182 162 L184 168 L178 165 L172 168 L174 162 L168 158 L175 158 Z"/>
        <path d="M208 152 L211 158 L218 158 L212 162 L214 168 L208 165 L202 168 L204 162 L198 158 L205 158 Z"/>
        <path d="M238 152 L241 158 L248 158 L242 162 L244 168 L238 165 L232 168 L234 162 L228 158 L235 158 Z"/>
      </g>
    </svg>
  );
}

window.CaseTrophy = CaseTrophy;
window.CaseMole = CaseMole;
window.CaseDiploma = CaseDiploma;

function Cases() {
  const cases = [
    { cls: 'blue',  label: '1° Partner TeamSystem', Visual: CaseTrophy,
      title: 'Miglior Software Partner TeamSystem Legal in Italia · 2016 e 2017',
      copy: 'Per aver gestito la propria clientela con efficienza e tempestività, raggiungendo performance e risultati che la pongono come principale punto di riferimento in Italia.',
      meta: ['2 anni di fila', 'su 70+ partner'] },
    { cls: 'amber', label: 'Foro di Torino', Visual: CaseMole,
      title: 'Acquisizione di 1.000+ avvocati del Foro di Torino',
      copy: 'Nel 2016 TeamSystem ci affida oltre 1.000 avvocati torinesi. Customer retention del 98,3% mantenuta nel tempo grazie ai nostri SLA garantiti.',
      meta: ['dal 2016', '98,3% retention'] },
    { cls: 'red',   label: 'Ordini professionali', Visual: CaseDiploma,
      title: '2.500+ avvocati formati con gli Ordini di Piemonte e Liguria',
      copy: 'Dal 2013 oltre 35 corsi su PCT, deontologia e informatica forense. 8.000+ crediti formativi erogati in collaborazione con gli Ordini di riferimento.',
      meta: ['dal 2013', '35+ corsi'] },
  ];
  return (
    <section id="cases">
      <div className="container">
        <div className="section-head">
          <h2>Riconoscimenti e risultati.</h2>
          <span className="hash"># risultati</span>
        </div>
        <div className="cases-grid">
          {cases.map((c, i) => {
            const V = c.Visual;
            return (
              <article key={i} className={`case ${c.cls}`}>
                <div className={`thumb ${c.cls}`}><V /></div>
                <div className="body">
                  <div className="label">{c.label}</div>
                  <h3>{c.title}</h3>
                  <p>{c.copy}</p>
                  <div className="meta"><span>{c.meta[0]}</span><span>{c.meta[1]}</span></div>
                </div>
              </article>
            );
          })}
        </div>
      </div>
    </section>
  );
}
window.Cases = Cases;