/* global React */
/* Devmy Healthcare — Hero (with 3 copy & 3 visual variants) + StatStrip + Pain + Values */

/* ---------- Hero copy variants ---------- */
const HERO_COPY_VARIANTS = [
{
  id: 'craft',
  eyebrow: 'Vertical · Healthcare',
  h1:
  <>
        Software e <span className="hl">AI</span> per la sanità,<br />
        fatti <span className="qq hl">su misura</span>.
      </>,

  lede:
  <>
        Aiutiamo cliniche, studi medici e strutture diagnostiche a digitalizzare i processi clinici
        senza riscrivere quello che già funziona. <strong>DICOM, decreto&nbsp;101/2020, GDPR</strong> -
        parliamo la vostra lingua tecnica e normativa.
      </>

},
{
  id: 'partner',
  eyebrow: 'Partner tecnologico · Sanità',
  h1:
  <>
        Il partner tecnico che la <span className="hl">sanità privata</span><br />
        chiede da anni.
      </>,

  lede:
  <>
        Sviluppo software, integrazione DICOM, telemedicina e AI per le strutture sanitarie italiane.
        5&nbsp;progetti in produzione, una sola squadra in sede a Catania,
        zero outsourcing.
      </>

},
{
  id: 'compliance',
  eyebrow: 'Compliance · Innovazione · Sanità',
  h1:
  <>
        Conformi al <span className="hl">101/2020</span>.<br />
        Pronti in <span className="qq hl">8 settimane</span>.
      </>,

  lede:
  <>
        Digitalizziamo la gestione radiologica, le esposizioni e i workflow clinici delle strutture
        sanitarie italiane — con software costruiti per durare, non per fare scena.
      </>

}];


/* ---------- Inline mock UI svg helpers ---------- */
function ECGLine() {
  return (
    <svg viewBox="0 0 240 80" preserveAspectRatio="none">
      <defs>
        <linearGradient id="ecgFill" x1="0" x2="0" y1="0" y2="1">
          <stop offset="0%" stopColor="#FF6600" stopOpacity=".25" />
          <stop offset="100%" stopColor="#FF6600" stopOpacity="0" />
        </linearGradient>
      </defs>
      <path
        d="M0,42 L30,42 L36,42 L40,18 L46,66 L52,30 L58,46 L72,46 L82,42 L90,42 L94,22 L100,60 L108,32 L114,46 L132,46 L144,42 L150,42 L154,12 L160,68 L166,28 L174,46 L210,46 L222,42 L240,42 L240,80 L0,80 Z"
        fill="url(#ecgFill)" stroke="none" />
      
      <path
        d="M0,42 L30,42 L36,42 L40,18 L46,66 L52,30 L58,46 L72,46 L82,42 L90,42 L94,22 L100,60 L108,32 L114,46 L132,46 L144,42 L150,42 L154,12 L160,68 L166,28 L174,46 L210,46 L222,42 L240,42"
        fill="none" stroke="#FF6600" strokeWidth="1.6" strokeLinejoin="round" strokeLinecap="round" />
      
    </svg>);

}

function DicomScan() {
  // Stylized DICOM body slice glyph
  return (
    <svg viewBox="0 0 120 120">
      <defs>
        <radialGradient id="scanG" cx="50%" cy="50%" r="50%">
          <stop offset="0%" stopColor="#fff" stopOpacity=".75" />
          <stop offset="100%" stopColor="#fff" stopOpacity="0" />
        </radialGradient>
      </defs>
      <circle cx="60" cy="60" r="50" fill="url(#scanG)" />
      <circle cx="60" cy="60" r="50" fill="none" stroke="#fff" strokeOpacity=".25" strokeDasharray="3 5" />
      <g stroke="#fff" strokeOpacity=".75" strokeWidth="1.4" fill="none">
        <path d="M22 60 q15 -22 38 -22 t38 22" />
        <path d="M22 60 q15 22 38 22 t38 -22" />
        <ellipse cx="60" cy="60" rx="14" ry="20" />
        <ellipse cx="60" cy="60" rx="4" ry="6" />
      </g>
      <g fill="#fff" fillOpacity=".7">
        <circle cx="44" cy="50" r="1.2" />
        <circle cx="78" cy="48" r="1.2" />
        <circle cx="52" cy="76" r="1.2" />
        <circle cx="74" cy="74" r="1.2" />
      </g>
    </svg>);

}

/* ---------- HERO ---------- */
function DevHero({ copyVariant = 'craft', visualVariant = 'mosaic' }) {
  const copy = HERO_COPY_VARIANTS.find((v) => v.id === copyVariant) || HERO_COPY_VARIANTS[0];

  return (
    <section className="hero" id="top">
      <div className="hero__grid">
        <div>
          <span className="eyebrow">{copy.eyebrow}</span>
          <h1>{copy.h1}</h1>
          <p className="hero__lede">{copy.lede}</p>
          <div className="hero__ctas">
            <a href="#prenota" className="dev-btn dev-btn--primary">Prenota una call di 15 minuti →</a>
            <a href="#progetti" className="dev-btn dev-btn--ghost-line">Vedi i nostri 5 progetti sanitari</a>
          </div>
          <div className="hero__compliance">
            <span className="hero__compliance__chip">D.lgs. 101/2020</span>
            <span className="hero__compliance__chip">GDPR</span>
            <span className="hero__compliance__chip">DICOM</span>
            <span className="hero__compliance__chip">Team italiano</span>
          </div>
        </div>

        <HeroVisual variant={visualVariant} />
      </div>

      <div className="section__inner" style={{ padding: '0 32px 24px' }}>
        <div className="stat-strip">
          <div className="stat-strip__cell">
            <span className="stat-strip__num">5<span className="accent">.</span></span>
            <span className="stat-strip__lbl">progetti healthcare in produzione</span>
          </div>
          <div className="stat-strip__cell">
            <span className="stat-strip__num">8<span className="accent">w</span></span>
            <span className="stat-strip__lbl">tempo medio di rilascio MVP</span>
          </div>
          <div className="stat-strip__cell">
            <span className="stat-strip__num">100<span className="accent">%</span></span>
            <span className="stat-strip__lbl">conformità GDPR · 101/2020</span>
          </div>
          <div className="stat-strip__cell">
            <span className="stat-strip__num">5°<span className="accent"></span></span>
            <span className="stat-strip__lbl">in Italia per benessere aziendale</span>
          </div>
        </div>
      </div>
    </section>);

}

function HeroVisual({ variant }) {
  if (variant === 'single') {
    return (
      <div className={`hero__visual hero__visual--mosaic hero__visual--single`} aria-hidden="true">
        <div className="hero__tile hero__tile--a">
          <DashboardMock big />
          <span className="hero__tile-tag">RealTime HealthCare · monitoraggio</span>
        </div>
      </div>);

  }
  if (variant === 'brokenk') {
    return (
      <div className="hero__visual hero__visual--brokenk" aria-hidden="true">
        <div className="brokenk">
          {/* Top row */}
          <div className="brokenk__cell" data-c="black" style={{ gridColumn: '1 / 2', gridRow: '1 / 2' }}>
            <span className="glyph">k</span>
          </div>
          <div className="brokenk__cell" data-c="orange" style={{ gridColumn: '2 / 4', gridRow: '1 / 2' }}>
            <span className="tag">DICOM</span>
          </div>
          <div className="brokenk__cell" data-c="cream" style={{ gridColumn: '4 / 5', gridRow: '1 / 2' }}>
            <span className="tag">RAG · AI</span>
          </div>
          {/* Middle */}
          <div className="brokenk__cell" data-c="midnight" style={{ gridColumn: '1 / 3', gridRow: '2 / 3' }}>
            <span className="tag">ECG · LIVE</span>
            <div style={{ position: 'absolute', inset: '20% 10% 16% 10%' }}><ECGLine /></div>
          </div>
          <div className="brokenk__cell" data-c="white" style={{ gridColumn: '3 / 5', gridRow: '2 / 3' }}>
            <span className="glyph" style={{ fontSize: 22, padding: 14, justifyContent: 'flex-start', alignItems: 'flex-start' }}>
              <span style={{ font: '700 11px var(--font-mono)', letterSpacing: '.14em', color: 'var(--brand-orange)' }}>Compliance</span>
            </span>
            <div style={{ position: 'absolute', inset: 'auto 14px 14px 14px', font: '700 18px var(--font-display)', color: 'var(--brand-black)' }}>
              D.lgs. <span style={{ color: 'var(--brand-orange)' }}>101/2020</span>
            </div>
          </div>
          {/* Bottom */}
          <div className="brokenk__cell" data-c="teal" style={{ gridColumn: '1 / 2', gridRow: '3 / 5' }}>
            <span className="tag">Telemed</span>
          </div>
          <div className="brokenk__cell" data-c="white" style={{ gridColumn: '2 / 3', gridRow: '3 / 5' }}>
            <div style={{ position: 'absolute', inset: 0 }}><DicomScan /></div>
            <span className="tag">CT · slice</span>
          </div>
          <div className="brokenk__cell" data-c="black" style={{ gridColumn: '3 / 5', gridRow: '3 / 4' }}>
            <span className="tag">PACS · HL7</span>
          </div>
          <div className="brokenk__cell" data-c="orange" style={{ gridColumn: '3 / 4', gridRow: '4 / 5' }}>
            <span className="tag">GDPR</span>
          </div>
          <div className="brokenk__cell" data-c="midnight" style={{ gridColumn: '4 / 5', gridRow: '4 / 5' }}>
            <span className="glyph" style={{ fontSize: 26, color: 'var(--brand-orange)' }}>·k.</span>
          </div>
        </div>
      </div>);

  }

  // Default: mosaic
  return (
    <div className="hero__visual hero__visual--mosaic" aria-hidden="true">
      <div className="hero__tile hero__tile--a">
        <DashboardMock />
        <span className="hero__tile-tag">RealTime HealthCare</span>
      </div>
      <div className="hero__tile hero__tile--b">
        <div className="mock-dicom">
          <span className="mock-dicom__head">CT · Esposizione</span>
          <div className="mock-dicom__frame"><DicomScan /></div>
          <div className="mock-dicom__meta">
            <span>0.85 mSv</span>
            <span>DICOM v3</span>
          </div>
        </div>
        <span className="hero__tile-tag" style={{ background: 'rgba(0,0,0,.45)' }}>DCG / CME</span>
      </div>
      <div className="hero__tile hero__tile--c">
        <div className="mock-chat">
          <div className="mock-chat__bubble">
            <span className="who">Paziente</span>Buongiorno dott., piano OK per stanotte.
          </div>
          <div className="mock-chat__bubble mock-chat__bubble--me">
            <span className="who" style={{ opacity: .7 }}>Medico</span>Misura saturazione alle 23:00.
          </div>
        </div>
        <span className="hero__tile-tag" style={{ color: '#062a3a', background: 'rgba(255,255,255,.85)' }}>Telemedicina</span>
      </div>
      <div className="hero__tile hero__tile--d">
        <div className="mock-comp">
          <span className="mock-comp__title">101/2020 · Checklist</span>
          <div className="mock-comp__rows">
            <div className="mock-comp__row"><span>Registro esposizioni</span><span className="ok" /></div>
            <div className="mock-comp__row"><span>Consenso GDPR</span><span className="ok" /></div>
            <div className="mock-comp__row"><span>DVR aggiornato</span><span className="ok" /></div>
          </div>
          <div className="mock-comp__bar">
            <small>Compliance score</small>
            100% · Conforme
          </div>
        </div>
        <span className="hero__tile-tag" style={{ color: '#062a3a', background: 'rgba(255,255,255,.78)' }}>Dentaldose</span>
      </div>
    </div>);

}

function DashboardMock({ big }) {
  return (
    <div className="mock-dash">
      <div className="mock-dash__topbar">
        <span className="dots"><span /><span /><span /></span>
        <span>HC · Console · v2.4</span>
      </div>
      <div className="mock-dash__body">
        <div className="mock-dash__chart"><ECGLine /></div>
        <div className="mock-dash__side">
          <div className="mock-dash__stat">
            <span className="lbl">HR · bpm</span>
            <span className="val">72<span className="delta">+1</span></span>
          </div>
          <div className="mock-dash__stat">
            <span className="lbl">SpO₂</span>
            <span className="val">98<span className="delta">stable</span></span>
          </div>
          {big &&
          <div className="mock-dash__stat">
              <span className="lbl">Pressione</span>
              <span className="val" style={{ fontSize: 18 }}>118/74</span>
            </div>
          }
        </div>
      </div>
      <div className="mock-dash__footbar" />
    </div>);

}

/* ---------- PAIN — "Vi suona familiare?" ---------- */
function DevPain() {
  const items = [
  { q: 'Le esposizioni radiologiche le gestite ancora su Excel o carta?', a: 'Decreto 101/2020', no: '01' },
  { q: 'I dati dei pazienti vivono in software che non si parlano?', a: 'Integrazione completa', no: '02' },
  { q: 'La telemedicina è un punto interrogativo da troppo tempo?', a: 'Da MVP a produzione', no: '03' },
  { q: 'Temete sanzioni GDPR sui dati sanitari?', a: 'Priorità al GDPR', no: '04' }];

  return (
    <section className="section pain" id="pain">
      <div className="section__inner">
        <div className="pain__lead">
          <div>
            <span className="eyebrow">Vi suona familiare?</span>
            <h2 style={{ marginTop: 14 }}>
              Sappiamo cosa vivete <em>ogni&nbsp;giorno</em> in struttura.
            </h2>
          </div>
          <p style={{ margin: "18px 0px" }}>
            Prima di scrivere una riga di codice ascoltiamo. Questi sono i quattro problemi che ricorrono in ogni call che
            facciamo con direttori sanitari, titolari di studio e responsabili IT.
          </p>
        </div>
        <div className="pain__grid">
          {items.map((p) =>
          <div className="pain__item" key={p.no}>
              <span className="pain__item__no">{p.no} · Problema</span>
              <p className="pain__item__q">{p.q}</p>
              <span className="pain__item__a">{p.a}</span>
            </div>
          )}
        </div>
        <p className="pain__footnote">
          Vi siete riconosciuti in uno o più? <a href="#prenota" className="link-orange">Parliamone in 15 minuti</a>, senza impegno.
        </p>
      </div>
    </section>);

}

/* ---------- VALUES — what we do ---------- */
function DevValues() {
  const items = [
  {
    num: '01',
    title: 'Software gestionale DICOM',
    body: 'Integriamo i vostri macchinari radiologici con software su misura che parla lo standard DICOM, senza sostituire PACS o RIS già in uso.',
    chips: ['DICOM', 'Real-time', 'Cloud & Locale']
  },
  {
    num: '02',
    title: 'Compliance normativa',
    body: 'Dal decreto 101/2020 al GDPR: software che rende la conformità un effetto collaterale del lavoro, non un progetto a parte.',
    chips: ['101/2020', 'GDPR', 'Audit']
  },
  {
    num: '03',
    title: 'Telemedicina',
    body: 'Piattaforme di monitoraggio remoto, chat real-time medico-paziente, piani terapeutici digitali. Lo abbiamo già fatto con Wideverse.',
    chips: ['WebRTC', 'Real-time', 'Mobile']
  },
  {
    num: '04',
    title: 'AI applicata alla sanità',
    body: 'Assistenti virtuali clinici, gestione documentale intelligente (RAG), analisi dati. AI dove aggiunge valore, non dove fa marketing.',
    chips: ['RAG', 'LLM', 'Vision']
  },
  {
    num: '05',
    title: 'Monitoraggio in tempo reale',
    body: 'Dashboard per parametri vitali e dispositivi medici. Dal cuore artificiale di Wisnam all\'oximetria di reparto, in real-time.',
    chips: ['IoT', 'Dashboard', 'NgRx']
  },
  {
    num: '06',
    title: 'Formazione per team sanitari',
    body: 'Percorsi su misura per rendere il vostro team autonomo sulle nuove tecnologie. Stessi formatori che teniamo per Lutech e Codemotion.',
    chips: ['Training', 'On-site', 'Custom']
  }];

  return (
    <section id="competenze" className="section section--soft">
      <div className="section__inner">
        <span className="eyebrow">Cosa facciamo per la sanità</span>
        <h2 style={{ maxWidth: 880, marginTop: 14 }}>
          Sei competenze verticali, una sola <em>squadra</em>.
        </h2>
        <p className="p p-lg" style={{ maxWidth: 720, marginTop: 12, color: 'var(--neutral-600)' }}>
          Nessuna ricetta universale: scegliamo gli strumenti dopo aver capito il contesto clinico, normativo e operativo.
        </p>
        <div className="value-grid">
          {items.map((v) =>
          <div className="value-card" key={v.num}>
              <span className="value-card__num">{v.num}</span>
              <h4>{v.title}</h4>
              <p>{v.body}</p>
              <div className="value-card__chips">{v.chips.map((c) => <span className="chip" key={c}>{c}</span>)}</div>
            </div>
          )}
        </div>
      </div>
    </section>);

}

Object.assign(window, { DevHero, DevPain, DevValues, HERO_COPY_VARIANTS });