/* global React */
/* Devmy Healthcare — Case studies + Agevolazioni (with animated counters) + Chi siamo */

const { useState: useStateMid, useEffect: useEffectMid, useRef: useRefMid } = React;

/* ---------- Tiny SVG previews for case studies ---------- */
function CSPreviewCME() {
  return (
    <svg className="case-preview-svg" viewBox="0 0 480 380" preserveAspectRatio="xMidYMid slice">
      <defs>
        <radialGradient id="cmeScan" cx="50%" cy="48%" r="50%">
          <stop offset="0%" stopColor="#1a4a5c" stopOpacity="1" />
          <stop offset="55%" stopColor="#0a2733" stopOpacity="1" />
          <stop offset="100%" stopColor="#000" stopOpacity="1" />
        </radialGradient>
        <linearGradient id="cmeBg" x1="0" y1="0" x2="0" y2="1">
          <stop offset="0%" stopColor="#0A1620" />
          <stop offset="100%" stopColor="#06121A" />
        </linearGradient>
        <radialGradient id="cmeOrgan" cx="50%" cy="50%" r="50%">
          <stop offset="0%" stopColor="#86C9D6" stopOpacity=".9" />
          <stop offset="50%" stopColor="#3F8B97" stopOpacity=".7" />
          <stop offset="100%" stopColor="#0F3A48" stopOpacity="0" />
        </radialGradient>
      </defs>

      <rect width="480" height="380" fill="url(#cmeBg)" />

      {/* ── Top toolbar ─────────────────────────────────────── */}
      <g transform="translate(0 0)">
        <rect x="0" y="0" width="480" height="30" fill="#0E1E2A" />
        <rect x="0" y="29" width="480" height="1" fill="rgba(255,255,255,.06)" />
        {/* Logo / brand pill */}
        <rect x="12" y="8" width="60" height="14" rx="3" fill="#FF6600" />
        <text x="42" y="18" textAnchor="middle" fontFamily="Space Grotesk, sans-serif" fontSize="9" fontWeight="700" fill="#fff" letterSpacing=".12em">DCG·CME</text>
        {/* Tool icons (circles) */}
        <g fill="rgba(255,255,255,.55)">
          {[90, 110, 130, 150, 170, 190].map((x, i) =>
          <circle key={i} cx={x} cy="15" r="3" fillOpacity={i === 2 ? '1' : '.55'} fill={i === 2 ? '#FF6600' : 'currentColor'} />
          )}
        </g>
        {/* Patient bar */}
        <rect x="210" y="6" width="180" height="18" rx="4" fill="rgba(255,255,255,.06)" />
        <text x="218" y="14" fontFamily="IBM Plex Mono, monospace" fontSize="7" fill="rgba(255,255,255,.45)" letterSpacing=".1em">PAZIENTE</text>
        <text x="218" y="22" fontFamily="Space Grotesk, sans-serif" fontSize="9" fontWeight="700" fill="#fff">R.M. · 1958 · F</text>
        <text x="320" y="22" fontFamily="IBM Plex Mono, monospace" fontSize="8" fill="rgba(255,255,255,.6)">CT · 0.85 mSv</text>
        {/* Window controls */}
        <g transform="translate(404 11)">
          <circle cx="0" cy="4" r="4" fill="#FF6058" />
          <circle cx="12" cy="4" r="4" fill="#FFBD2E" />
          <circle cx="24" cy="4" r="4" fill="#28C940" />
        </g>
      </g>

      {/* ── Left rail: study thumbnails ─────────────────────── */}
      <g transform="translate(0 30)">
        <rect x="0" y="0" width="58" height="350" fill="#0B1924" />
        <rect x="58" y="0" width="1" height="350" fill="rgba(255,255,255,.06)" />
        <text x="29" y="14" textAnchor="middle" fontFamily="IBM Plex Mono, monospace" fontSize="7" fill="rgba(255,255,255,.45)" letterSpacing=".14em">SERIE</text>
        {[0, 1, 2, 3, 4].map((i) => {
          const y = 24 + i * 60;
          const active = i === 1;
          return (
            <g key={i} transform={`translate(8 ${y})`}>
              <rect x="0" y="0" width="42" height="50" rx="3" fill="#000"
              stroke={active ? '#FF6600' : 'rgba(255,255,255,.08)'}
              strokeWidth={active ? '1.4' : '1'} />
              {/* Mini scan */}
              <circle cx="21" cy="22" r="14" fill="url(#cmeOrgan)" opacity={0.55 + i * 0.05} />
              <text x="21" y="46" textAnchor="middle" fontFamily="IBM Plex Mono, monospace" fontSize="6" fill={active ? '#FF6600' : 'rgba(255,255,255,.5)'} letterSpacing=".06em">
                {['AX', 'AX+C', 'COR', 'SAG', '3D'][i]}
              </text>
            </g>);

        })}
      </g>

      {/* ── Main viewport: DICOM slice ──────────────────────── */}
      <g transform="translate(60 32)">
        <rect x="0" y="0" width="300" height="276" fill="#000" />
        <rect x="0" y="0" width="300" height="276" fill="url(#cmeScan)" />
        {/* Body outline */}
        <ellipse cx="150" cy="148" rx="116" ry="92" fill="rgba(255,255,255,.04)" stroke="rgba(255,255,255,.18)" />
        {/* Spine */}
        <ellipse cx="150" cy="200" rx="12" ry="14" fill="rgba(255,255,255,.18)" />
        <circle cx="150" cy="200" r="6" fill="rgba(255,255,255,.5)" />
        {/* Heart */}
        <path d="M118 124 q-14 -22 8 -30 q14 -5 24 8 q10 -13 24 -8 q22 8 8 30 q-14 22 -32 38 q-18 -16 -32 -38 Z"
        fill="rgba(255,102,0,.32)" stroke="#FF6600" strokeWidth="1.2" strokeOpacity=".7" />
        {/* Lungs */}
        <path d="M76 90 q-12 50 -2 100 q14 14 28 6 q4 -38 0 -94 q-12 -22 -26 -12 Z" fill="rgba(180,220,232,.18)" stroke="rgba(180,220,232,.5)" strokeWidth=".8" />
        <path d="M224 90 q12 50 2 100 q-14 14 -28 6 q-4 -38 0 -94 q12 -22 26 -12 Z" fill="rgba(180,220,232,.18)" stroke="rgba(180,220,232,.5)" strokeWidth=".8" />
        {/* Vessels */}
        <g stroke="rgba(255,255,255,.3)" strokeWidth=".6" fill="none">
          <path d="M150 92 q-10 14 -28 26" />
          <path d="M150 92 q12 16 28 28" />
          <path d="M134 158 q-22 12 -28 36" />
          <path d="M168 162 q26 8 30 38" />
        </g>
        {/* Measurement annotation */}
        <g stroke="#FF6600" strokeWidth="1" fill="none">
          <line x1="124" y1="132" x2="178" y2="146" />
          <circle cx="124" cy="132" r="2.5" fill="#FF6600" />
          <circle cx="178" cy="146" r="2.5" fill="#FF6600" />
        </g>
        <g fontFamily="IBM Plex Mono, monospace" fontSize="8" fill="#FF6600">
          <rect x="180" y="120" width="56" height="14" rx="2" fill="rgba(0,0,0,.7)" />
          <text x="184" y="130" letterSpacing=".06em">42.8 mm</text>
        </g>
        {/* Crosshair */}
        <g stroke="rgba(255,102,0,.55)" strokeWidth=".5" strokeDasharray="3 3">
          <line x1="0" y1="148" x2="300" y2="148" />
          <line x1="150" y1="0" x2="150" y2="276" />
        </g>
        {/* Orientation markers */}
        <g fontFamily="IBM Plex Mono, monospace" fontSize="9" fill="rgba(255,255,255,.6)" fontWeight="700">
          <text x="150" y="14" textAnchor="middle">A</text>
          <text x="150" y="270" textAnchor="middle">P</text>
          <text x="8" y="152">R</text>
          <text x="290" y="152" textAnchor="end">L</text>
        </g>
        {/* HUD top-left */}
        <g fontFamily="IBM Plex Mono, monospace" fontSize="7.5" fill="#76E0C5" letterSpacing=".06em">
          <text x="8" y="26">SLICE 042 / 128</text>
          <text x="8" y="38">WW 350 · WL 50</text>
          <text x="8" y="50">ZOOM 1.4×</text>
        </g>
        {/* HUD top-right */}
        <g fontFamily="IBM Plex Mono, monospace" fontSize="7.5" fill="rgba(255,255,255,.55)" letterSpacing=".06em" textAnchor="end">
          <text x="292" y="26">CT · TORACE</text>
          <text x="292" y="38">{'12 / 03 / 2026'}</text>
          <text x="292" y="50">DR. ROMANO</text>
        </g>
        {/* Frame scrubber */}
        <g transform="translate(0 258)">
          <rect x="8" y="0" width="284" height="3" rx="1.5" fill="rgba(255,255,255,.1)" />
          <rect x="8" y="0" width="92" height="3" rx="1.5" fill="#FF6600" />
          <circle cx="100" cy="1.5" r="4" fill="#FF6600" />
        </g>
      </g>

      {/* ── Right rail: metadata & findings ─────────────────── */}
      <g transform="translate(362 32)">
        <rect x="0" y="0" width="118" height="276" fill="#0B1924" />
        <rect x="0" y="0" width="1" height="276" fill="rgba(255,255,255,.06)" />

        {/* Tabs */}
        <g transform="translate(8 8)">
          <rect x="0" y="0" width="50" height="16" rx="3" fill="#FF6600" />
          <text x="25" y="11" textAnchor="middle" fontFamily="Space Grotesk, sans-serif" fontSize="7.5" fontWeight="700" fill="#fff" letterSpacing=".1em">REFERTO</text>
          <text x="68" y="11" fontFamily="IBM Plex Mono, monospace" fontSize="7" fill="rgba(255,255,255,.4)" letterSpacing=".08em">DICOM</text>
          <text x="92" y="11" fontFamily="IBM Plex Mono, monospace" fontSize="7" fill="rgba(255,255,255,.4)" letterSpacing=".08em">HL7</text>
        </g>

        {/* Findings list */}
        <g transform="translate(8 36)" fontFamily="IBM Plex Mono, monospace" fontSize="6.5" letterSpacing=".06em" fill="rgba(255,255,255,.6)">
          <text y="0">RILIEVI</text>
        </g>
        <g transform="translate(8 50)" fontFamily="Satoshi, sans-serif" fontSize="8.5" fill="rgba(255,255,255,.85)">
          <rect x="-2" y="-9" width="104" height="22" rx="3" fill="rgba(255,102,0,.12)" />
          <circle cx="3" cy="2" r="2.5" fill="#FF6600" />
          <text x="11" y="0">Nodulo 8.2 mm</text>
          <text x="11" y="9" fontSize="7" fill="rgba(255,255,255,.5)">lobo sup. dx · SP-2</text>

          <circle cx="3" cy="32" r="2.5" fill="rgba(118,224,197,.85)" />
          <text x="11" y="30">Cuore nei limiti</text>
          <text x="11" y="39" fontSize="7" fill="rgba(255,255,255,.5)">FE stimata 56%</text>

          <circle cx="3" cy="62" r="2.5" fill="rgba(118,224,197,.85)" />
          <text x="11" y="60">Surreni regolari</text>

          <circle cx="3" cy="86" r="2.5" fill="rgba(255,189,46,.85)" />
          <text x="11" y="84">Linfonodi mediast.</text>
          <text x="11" y="93" fontSize="7" fill="rgba(255,255,255,.5)">borderline · controllo</text>
        </g>

        {/* Mini graph */}
        <g transform="translate(8 200)">
          <text x="0" y="0" fontFamily="IBM Plex Mono, monospace" fontSize="6.5" fill="rgba(255,255,255,.5)" letterSpacing=".06em">DOSE · ESPOSIZIONI</text>
          <rect x="0" y="6" width="100" height="42" rx="3" fill="rgba(255,255,255,.04)" />
          {[20, 28, 18, 34, 26, 32, 22, 38, 30, 24].map((v, i) =>
          <rect key={i} x={4 + i * 10} y={48 - v} width="6" height={v} rx="1" fill={i === 7 ? '#FF6600' : 'rgba(118,224,197,.7)'} />
          )}
        </g>

        {/* Compliance pill */}
        <g transform="translate(8 256)">
          <rect x="0" y="0" width="100" height="14" rx="7" fill="rgba(118,224,197,.16)" />
          <circle cx="9" cy="7" r="3" fill="#76E0C5" />
          <text x="17" y="10" fontFamily="Space Grotesk, sans-serif" fontSize="7" fontWeight="700" fill="#76E0C5" letterSpacing=".1em">101/2020 · OK</text>
        </g>
      </g>

      {/* ── Bottom status bar ───────────────────────────────── */}
      <g transform="translate(0 350)">
        <rect x="0" y="0" width="480" height="30" fill="#0E1E2A" />
        <rect x="0" y="0" width="480" height="1" fill="rgba(255,255,255,.06)" />
        <g fontFamily="IBM Plex Mono, monospace" fontSize="8" letterSpacing=".08em">
          <circle cx="14" cy="15" r="3.5" fill="#76E0C5" />
          <text x="22" y="18" fill="rgba(255,255,255,.75)">PACS · CONNESSO</text>
          <text x="130" y="18" fill="rgba(255,255,255,.45)">· 12 487 instances</text>
          <text x="240" y="18" fill="rgba(255,255,255,.45)">· cache 84%</text>
          <text x="360" y="18" fill="#FF6600">EXPORT REFERTO →</text>
        </g>
      </g>
    </svg>);

}
function CSPreviewDental() {
  return (
    <svg className="case-preview-svg" viewBox="0 0 320 150" preserveAspectRatio="xMidYMid slice">
      <rect width="320" height="150" fill="var(--neutral-50)" />
      <g transform="translate(20 18)">
        <text x="0" y="0" fontFamily="IBM Plex Mono, monospace" fontSize="9" fill="#FF6600" letterSpacing=".14em" fontWeight="700">DENTALDOSE</text>
        <text x="0" y="22" fontFamily="Space Grotesk, sans-serif" fontSize="20" fontWeight="700" fill="#191616">Esposizioni · luglio</text>
        <g transform="translate(0 36)">
          {[
          { d: 1, v: 38 }, { d: 4, v: 52 }, { d: 6, v: 42 }, { d: 9, v: 68 },
          { d: 11, v: 28 }, { d: 13, v: 72 }, { d: 16, v: 48 }, { d: 18, v: 80 },
          { d: 20, v: 36 }, { d: 23, v: 58 }, { d: 25, v: 64 }, { d: 27, v: 44 }].
          map((b, i) =>
          <rect key={i} x={i * 22} y={80 - b.v} width="14" height={b.v} rx="2" fill={i === 7 ? '#FF6600' : '#C8C8D1'} />
          )}
        </g>
      </g>
    </svg>);

}
function CSPreviewTelemed() {
  return (
    <svg className="case-preview-svg" viewBox="0 0 320 150" preserveAspectRatio="xMidYMid slice">
      <rect width="320" height="150" fill="var(--neutral-50)" />
      <g transform="translate(18 18)">
        <rect x="0" y="0" width="180" height="22" rx="11" fill="#fff" stroke="#E1E6EB" />
        <circle cx="14" cy="11" r="6" fill="#0E7C86" />
        <text x="28" y="15" fontFamily="Satoshi, sans-serif" fontSize="9" fill="#191616">Dott. Romano — sta scrivendo…</text>
        <g transform="translate(0 32)">
          <rect x="0" y="0" width="160" height="22" rx="11" fill="#FFFFFF" stroke="#E1E6EB" />
          <text x="10" y="14" fontFamily="Satoshi, sans-serif" fontSize="9" fill="#191616">Buongiorno, valori di stamattina?</text>
        </g>
        <g transform="translate(110 60)">
          <rect x="0" y="0" width="170" height="22" rx="11" fill="#191616" />
          <text x="10" y="14" fontFamily="Satoshi, sans-serif" fontSize="9" fill="#FFFFFF">120/80 — saturazione 97</text>
        </g>
        <g transform="translate(0 92)">
          <rect x="0" y="0" width="200" height="24" rx="6" fill="#FF6600" />
          <text x="10" y="15" fontFamily="Space Grotesk, sans-serif" fontSize="10" fontWeight="700" fill="#fff">Piano terapeutico aggiornato →</text>
        </g>
      </g>
    </svg>);

}
function CSPreviewWisnam() {
  return (
    <svg className="case-preview-svg" viewBox="0 0 320 150" preserveAspectRatio="xMidYMid slice">
      <rect width="320" height="150" fill="var(--neutral-50)" />
      <g transform="translate(20 14)">
        <text x="0" y="0" fontFamily="IBM Plex Mono, monospace" fontSize="9" fill="#FF6600" letterSpacing=".14em" fontWeight="700">WISNAM · LIVE</text>
        <text x="0" y="22" fontFamily="Space Grotesk, sans-serif" fontSize="22" fontWeight="700" fill="#191616">72<tspan fontSize="11" fontWeight="500"> bpm</tspan></text>
        <path
          d="M0 84 L40 84 L46 84 L52 56 L60 110 L68 70 L78 84 L120 84 L128 80 L134 84 L140 60 L148 100 L156 70 L164 84 L200 84 L210 80 L218 84 L224 56 L232 108 L240 70 L260 84 L280 84"
          fill="none" stroke="#FF6600" strokeWidth="1.6" />
        
      </g>
    </svg>);

}
function CSPreviewEHcert() {
  return (
    <svg className="case-preview-svg" viewBox="0 0 320 150" preserveAspectRatio="xMidYMid slice">
      <rect width="320" height="150" fill="var(--neutral-50)" />
      <g transform="translate(110 12)">
        <rect x="0" y="0" width="100" height="124" rx="14" fill="#191616" />
        <rect x="6" y="8" width="88" height="108" rx="10" fill="#0B1F2A" />
        <text x="50" y="32" textAnchor="middle" fontFamily="IBM Plex Mono, monospace" fontSize="8" fill="#FF6600" letterSpacing=".12em" fontWeight="700">E-HCERT</text>
        <rect x="14" y="42" width="72" height="12" rx="2" fill="#FF6600" />
        <rect x="14" y="60" width="60" height="6" rx="2" fill="rgba(255,255,255,.45)" />
        <rect x="14" y="72" width="72" height="6" rx="2" fill="rgba(255,255,255,.25)" />
        <rect x="14" y="84" width="50" height="6" rx="2" fill="rgba(255,255,255,.25)" />
        <rect x="14" y="98" width="72" height="14" rx="6" fill="rgba(255,255,255,.1)" />
        <text x="50" y="108" textAnchor="middle" fontFamily="Space Grotesk, sans-serif" fontSize="8" fontWeight="700" fill="#FFFFFF">Scarica referto</text>
      </g>
    </svg>);

}

/* ---------- CASE STUDIES ---------- */
function DevCaseStudies() {
  return (
    <section id="progetti" className="section section--dark">
      <div className="section__inner">
        <div className="cases__header">
          <div className="cases__header__title">
            <span className="eyebrow">5 progetti in produzione · Sanità</span>
            <h2 style={{ maxWidth: 720, marginTop: 14 }}>
              Non in teoria. In <span style={{ color: 'var(--brand-orange)' }}>produzione</span>, in reparto.
            </h2>
          </div>
          <p className="cases__header__desc">
            Dalla radiologia alla telemedicina, dal monitoraggio cardiaco real-time alla compliance radiologica.
            Le tecnologie cambiano, l'attenzione al paziente no.
          </p>
        </div>

        <div className="cases-grid">
          {/* Feature case — DCG / CME */}
          <article className="case-card case-card--feature">
            <span className="case-card__year">Case study · 2024 · in produzione</span>
            <h4>DCG / CME Catania</h4>
            <p>
              Software gestionale che dialoga con i macchinari radiologici tramite standard DICOM.
              Refertazione integrata, gestione esposizioni e workflow clinico in un'unica interfaccia,
              dentro al centro polispecialistico CME.
            </p>
            <div className="case-card__preview"><CSPreviewCME /></div>
            <div className="case-card__meta">
              <span className="chip">DICOM</span>
              <span className="chip">PACS</span>
              <span className="chip">Refertazione</span>
              <span className="chip">Workflow</span>
            </div>
            <a href="#" className="case-card__link">Scopri di più →</a>
            <span className="case-card__more">→</span>
          </article>

          {/* Dentaldose */}
          <article className="case-card">
            <span className="case-card__year">In produzione · Odontoiatria</span>
            <h4 style={{ color: "rgb(65, 65, 65)" }}>Dentaldose</h4>
            <p>
              Web app per la gestione delle esposizioni radiologiche negli studi dentistici.
              Conforme al D.lgs.&nbsp;101/2020, pagamenti integrati, GDPR.
            </p>
            <div className="case-card__preview"><CSPreviewDental /></div>
            <div className="case-card__meta">
              <span className="chip">101/2020</span>
              <span className="chip">Angular</span>
              <span className="chip">Stripe</span>
            </div>
            <span className="case-card__more">→</span>
          </article>

          {/* Telemedicina */}
          <article className="case-card">
            <span className="case-card__year">Per Wideverse · Telemedicina</span>
            <h4 style={{ color: "rgb(65, 65, 65)" }}>Piattaforma telemedicina</h4>
            <p>
              Monitoraggio remoto del paziente: chat real-time, piani terapeutici digitali e dashboard clinica.
            </p>
            <div className="case-card__preview"><CSPreviewTelemed /></div>
            <div className="case-card__meta">
              <span className="chip">Firebase</span>
              <span className="chip">NgRx</span>
              <span className="chip">Real-time</span>
            </div>
            <span className="case-card__more">→</span>
          </article>

          {/* Wisnam */}
          <article className="case-card">
            <span className="case-card__year">Per Wisnam · Cardiologia</span>
            <h4 style={{ color: "rgb(65, 65, 65)" }}>RealTime HealthCare</h4>
            <p>
              Dashboard di monitoraggio cardiaco real-time per un cuore artificiale, sviluppata per una multinazionale francese.
            </p>
            <div className="case-card__preview"><CSPreviewWisnam /></div>
            <div className="case-card__meta">
              <span className="chip">Angular</span>
              <span className="chip">Highcharts</span>
              <span className="chip">IoT</span>
            </div>
            <span className="case-card__more">→</span>
          </article>

          {/* E-Hcert */}
          <article className="case-card">
            <span className="case-card__year">Mobile · Pazienti</span>
            <h4 style={{ color: "rgb(65, 65, 65)" }}>E-Hcert</h4>
            <p>
              App mobile per la consultazione di esami e test clinici da parte dei pazienti, integrata con i sistemi di refertazione.
            </p>
            <div className="case-card__preview"><CSPreviewEHcert /></div>
            <div className="case-card__meta">
              <span className="chip">Mobile</span>
              <span className="chip">24/24</span>
            </div>
            <span className="case-card__more">→</span>
          </article>
        </div>

        {/* Testimonial */}
        <div style={{ marginTop: 72, paddingTop: 48, borderTop: '1px solid rgba(255,255,255,.1)' }}>
          <div className="testimonial">
            <div className="testimonial__avatar" style={{ width: "50px", height: "50px", fontSize: "14px" }}>CM</div>
            <div>
              <p className="testimonial__quote">
                "Hanno integrato DICOM con il nostro PACS in poche settimane, senza interrompere il reparto.
                Sanno di cosa parlano, ascoltano davvero e rispettano i tempi clinici, non solo quelli di progetto."
              </p>
              <p className="testimonial__by">
                Responsabile Diagnostica · DCG presso CME Catania · 2024
              </p>
            </div>
          </div>
        </div>
      </div>
    </section>);

}

/* ---------- Animated counter hook ---------- */
function useCounter(target, options = {}) {
  const { duration = 1400, suffix = '', startWhen = true } = options;
  const [val, setVal] = useStateMid(0);
  const startedRef = useRefMid(false);
  useEffectMid(() => {
    if (!startWhen || startedRef.current) return;
    startedRef.current = true;
    const t0 = performance.now();
    function tick(now) {
      const t = Math.min(1, (now - t0) / duration);
      // ease-out cubic
      const e = 1 - Math.pow(1 - t, 3);
      setVal(Math.round(target * e));
      if (t < 1) requestAnimationFrame(tick);
    }
    requestAnimationFrame(tick);
  }, [startWhen, target, duration]);
  return val + suffix;
}

function Counter({ to, suffix = '%', startWhen }) {
  const v = useCounter(to, { suffix, startWhen });
  return <>{v}</>;
}

/* ---------- AGEVOLAZIONI ---------- */
function DevAgevolazioni() {
  const sectionRef = useRefMid(null);
  const [inView, setInView] = useStateMid(false);
  useEffectMid(() => {
    if (!sectionRef.current) return;
    const obs = new IntersectionObserver(
      ([entry]) => {if (entry.isIntersecting) setInView(true);},
      { threshold: 0.18 }
    );
    obs.observe(sectionRef.current);
    return () => obs.disconnect();
  }, []);

  const cards = [
  {
    badge: 'Legge di Bilancio 2025',
    pct: 40,
    title: 'Credito d\'imposta su software e dispositivi',
    body: 'Per gli studi medici, su acquisti di software gestionali, dispositivi digitali e infrastruttura IT.',
    meta: 'Valido per il 2026',
    tag: 'D.L. 207/2024'
  },
  {
    badge: 'Bilancio 2025 · Telemedicina',
    pct: 60,
    title: 'Fondo perduto telemedicina (fino a 20.000€)',
    body: 'Per progetti di telemedicina, monitoraggio remoto e refertazione digitale. Cumulabile con credito d\'imposta.',
    meta: 'Finestre periodiche',
    tag: 'Mise · Sanità'
  },
  {
    badge: 'ZES Unica · Mezzogiorno',
    pct: 60,
    title: 'Credito d\'imposta per PMI del Sud',
    body: 'Per investimenti in beni strumentali tra cui software, valido in Sicilia, Calabria, Puglia, Campania, Basilicata, Molise, Sardegna.',
    meta: '2026 – 2028',
    tag: 'Decreto 124/2023'
  }];


  return (
    <section id="agevolazioni" className="section section--agevolazioni" ref={sectionRef}>
      <div className="section__inner">
        <div className="agev__head">
          <div>
            <span className="eyebrow">Agevolazioni & finanza agevolata</span>
            <h2 style={{ marginTop: 14, maxWidth: 760, width: "681px" }}>
              Il vostro investimento può essere <em>cofinanziato</em>.
            </h2>
          </div>
          <p className="agev__caption">
            Tre misure attive che riducono il costo di un progetto di digitalizzazione sanitaria. Verifichiamo l'applicabilità
            insieme al vostro commercialista prima di firmare qualunque preventivo.
          </p>
        </div>

        <div className="agev__grid">
          {cards.map((c, i) =>
          <article className="agev__card" key={i}>
              <span className="agev__card__badge">{c.badge}</span>
              <div className="agev__card__num">
                <span className="upto">fino al</span>
                <Counter to={c.pct} suffix="" startWhen={inView} /><span className="unit">%</span>
              </div>
              <h4>{c.title}</h4>
              <p>{c.body}</p>
              <div className="agev__card__meta">
                <span>{c.tag}</span>
                <span className="scadenza">{c.meta}</span>
              </div>
            </article>
          )}
        </div>

        {/* Iperammortamento as a 4th compact card spanning full width — but we keep 3 main and add note */}
        <div className="agev__note">
          <div style={{ width: 32, height: 32, borderRadius: 8, background: '#FFF1E5', display: 'grid', placeItems: 'center', flexShrink: 0, color: 'var(--brand-orange)', font: '700 14px var(--font-display)' }}>i</div>
          <div>
            <strong>+ Iperammortamento 2026-2028 (50-180%)</strong> per software 4.0 cumulabile con le misure sopra.
            Non siamo commercialisti: vi consigliamo di verificare l'applicabilità con il vostro consulente. Se non ne avete uno,
            <a href="#prenota" className="link-orange"> vi mettiamo in contatto con MAD</a>, partner per la finanza agevolata in ambito sanitario.
          </div>
        </div>
      </div>
    </section>);

}

/* ---------- CHI SIAMO ---------- */
function DevTeam() {
  return (
    <section id="team" className="section section--team">
      <div className="section__inner">
        <div className="team__head">
          <span className="eyebrow">Chi c'è dietro</span>
          <h2 style={{ marginTop: 14, fontSize: "57px" }}>
            Da otto anni scriviamo software <em>personalizzato</em> - negli ultimi tre con  focus sulla sanità .
          </h2>
          <p>Siamo Devmy. 16 persone, una sola squadra.


          </p>
        </div>

        <div className="team__layout">
          <article className="team__person">
            <div className="team__person__avatar">FS</div>
            <span className="team__person__role">CEO · Fondatore</span>
            <h4>Francesco Sciuti</h4>
            <p>
              Google Developer Expert in Angular &amp; Web. Microsoft MVP. Speaker internazionale a oltre 30 conferenze tra Italia ed Europa.
              Sui progetti healthcare guida architettura e relazione clinica.
            </p>
            <div className="team__person__badges">
              <span className="chip">GDE Angular</span>
              <span className="chip">MS MVP</span>
              <span className="chip">Speaker & Trainer</span>
            </div>
            <a href="https://linkedin.com/in/francescosciuti" target="_blank" rel="noopener" className="team__person__link">LinkedIn ↗</a>
          </article>

          <article className="team__person">
            <div className="team__person__avatar" style={{ background: 'linear-gradient(140deg, #0E7C86, #0B1F2A)' }}>AO</div>
            <span className="team__person__role">CTO · Co-fondatore</span>
            <h4>Andrea Ortis</h4>
            <p>
              Senior Full-Stack &amp; Development Trainer. Guida lo sviluppo tecnico, l'integrazione con i sistemi clinici
              esistenti e la formazione dei team interni dei nostri clienti.
            </p>
            <div className="team__person__badges">
              <span className="chip">Full-stack</span>
              <span className="chip">AI Expert</span>
              <span className="chip">DICOM Expert</span>
            </div>
            <a href="https://linkedin.com/in/andreaortis" target="_blank" rel="noopener" className="team__person__link">LinkedIn ↗</a>
          </article>

          <div className="team__badges-card team__badges-card--riconoscimenti">
            <h6>Riconoscimenti</h6>
            <div className="team__badges">
              <div className="team__badge">
                <div className="team__badge__icon">5°</div>
                <div><strong>ChooseMyCompany 2024</strong>5° posto in Italia per benessere aziendale</div>
              </div>
              <div className="team__badge">
                <div className="team__badge__icon">GDE</div>
                <div><strong>Google Developer Expert</strong>Riconoscimento ufficiale Google · Angular</div>
              </div>
              <div className="team__badge">
                <div className="team__badge__icon">MVP</div>
                <div><strong>Microsoft MVP</strong>Most Valuable Professional 2023-2026</div>
              </div>
              <div className="team__badge">
                <div className="team__badge__icon" style={{ color: '#67E8AE' }}>MAD</div>
                <div><strong>Partnership con MAD</strong>Per la compliance del settore sanitario</div>
              </div>
            </div>
          </div>

          <div className="team__badges-card team__badges-card--clients">
            <h6>Hanno scelto devmy</h6>
            <div className="team__clients">
              <span className="team__clients__cell">Wisnam</span>
              <span className="team__clients__cell">CME Catania</span>
              <span className="team__clients__cell">Dentaldose</span>
              <span className="team__clients__cell">Wideverse</span>
              <span className="team__clients__cell">Banca&nbsp;d'Italia</span>
              <span className="team__clients__cell">Codemotion</span>
              <span className="team__clients__cell">Lutech</span>
              <span className="team__clients__cell">Medics</span>
            </div>
            <div className="team__clients__row">
              + altri 30 clienti in Italia ed Europa
            </div>
          </div>
        </div>
      </div>
    </section>);

}

Object.assign(window, { DevCaseStudies, DevAgevolazioni, DevTeam });