/* global React */
/* Devmy Healthcare — Lead magnet (4 fields) + FAQ + Booking + Final CTA */

const { useState: useStateConv, useEffect: useEffectConv } = React;

const INTEGRATIONS = {
  hubspot: {
    portalId: "148774338",
    formGuid: "f994e104-e8e8-4c87-a593-4190e8b63ed1",
    region: "eu1",
  },
  calcom: {
    username: "fabrizio.devmy",
    eventTypeSlug: "15min",
  },
};

/* ---------- LEAD MAGNET (4 fields: Nome+Cognome, Email, Ruolo, Struttura) ---------- */
function DevLeadMagnet() {
  const [sent, setSent] = useStateConv(false);
  const [sending, setSending] = useStateConv(false);
  const [error, setError] = useStateConv('');

  async function handleSubmit(e) {
    e.preventDefault();
    const fd = new FormData(e.currentTarget);
    const { portalId, formGuid } = INTEGRATIONS.hubspot;

    if (!portalId || !formGuid) { setSent(true); return; }

    setSending(true);
    setError('');
    try {
      const res = await fetch(
        `https://api.hsforms.com/submissions/v3/integration/submit/${portalId}/${formGuid}`,
        {
          method: 'POST',
          headers: { 'Content-Type': 'application/json' },
          body: JSON.stringify({
            fields: [
              { name: 'firstname', value: String(fd.get('firstname') || '') },
              { name: 'lastname', value: String(fd.get('lastname') || '') },
              { name: 'email', value: String(fd.get('email') || '') },
              { name: 'jobtitle', value: String(fd.get('jobtitle') || '') },
              { name: 'company', value: String(fd.get('company') || '') },
              { name: 'mobilephone', value: String(fd.get('mobilephone') || '') }],

            context: { pageUri: location.href, pageName: document.title },
            legalConsentOptions: {
              consent: {
                consentToProcess: true,
                text: "Accetto il trattamento dei dati secondo l'informativa privacy (Reg. UE 679/2016 - GDPR)." }

            } }) });


      if (!res.ok) throw new Error('HubSpot ' + res.status);
      setSent(true);
    } catch (err) {
      setError('Invio non riuscito. Riprova o scrivici a healthcare@devmy.it.');
    } finally {
      setSending(false);
    }
  }

  return (
    <section id="guida" className="section section--cream">
      <div className="section__inner">
        <div className="lead-magnet__header">
          <div className="lead-magnet__header__title">
            <span className="eyebrow">Lead magnet · PDF gratuito</span>
            <h2 style={{ maxWidth: 600, marginTop: 14 }}>
              Come <span style={{ color: 'var(--brand-orange)' }}>Digitalizzare</span>:<br />
              la guida pratica per il vostro studio.
            </h2>
          </div>
          <p className="p p-lg lead-magnet__header__desc">Niente fuffa: una guida pratica su cosa chiedere e a cosa fare attenzione quando si vuole avviare un processo di digitalizzazione dei propri servizi o sistemi diagnostici. Quando serve farlo e quando no, e cosa sapere di fondamentale per rispettare la privacy ed essere a norma con le direttive GDPR.


          </p>
        </div>

        <div className="lead-magnet" style={{ marginTop: 40 }}>
          <div className="lead-magnet__visual">
            <div>
              <span className="eyebrow" style={{ color: 'var(--brand-orange)' }}>Guida 2026 · Edizione aggiornata</span>
            </div>
            <div className="lead-magnet__pdf">
              <span className="lead-magnet__pdf-tag">.devmy · Guida</span>
              <h5>Come Digitalizzare: la guida pratica per il vostro studio</h5>
              <div className="lines">
                <span /><span /><span /><span /><span />
              </div>
              <div className="lead-magnet__pdf-foot"><span>24 pp.</span><span>v2 / 2026</span></div>
            </div>
            <div style={{ display: 'flex', justifyContent: 'space-between', color: 'rgba(255,255,255,.7)', font: '500 12px var(--font-mono)' }}>
              <span>PDF · 2.4 MB</span>
              <span>x capitoli · x pagine</span>
            </div>
          </div>

          <form className="lead-magnet__form" onSubmit={handleSubmit}>
            {!sent ?
            <>
                <h3>Ricevete la guida via email</h3>
                <p>Solo la guida. Niente spam, niente call commerciali. Dati su server europei.</p>
                <div className="dev-field--inline">
                  <div className="dev-field">
                    <label>Nome</label>
                    <input name="firstname" required placeholder="es. Maria" />
                  </div>
                  <div className="dev-field">
                    <label>Cognome</label>
                    <input name="lastname" placeholder="es. Esposito" />
                  </div>
                </div>
                <div className="dev-field">
                  <label>Email professionale</label>
                  <input name="email" type="email" required placeholder="maria@struttura.it" />
                </div>
                <div className="dev-field--inline">
                  <div className="dev-field">
                    <label>Ruolo</label>
                    <input name="jobtitle" required placeholder="es. Direttore sanitario" />
                  </div>
                  <div className="dev-field">
                    <label>Struttura</label>
                    <input name="company" required placeholder="es. Studio dentistico San Marco" />
                  </div>
                </div>
                <div className="dev-field">
                  <label>Telefono</label>
                  <input name="mobilephone" type="tel" placeholder="es. +39 333 123 4567" />
                </div>
                <label className="dev-check">
                  <input type="checkbox" required />
                  <span>Ho letto e accetto l'<u>informativa privacy</u> (Reg. UE 679/2016 – GDPR).</span>
                </label>
                {error &&
                <span style={{ font: '500 13px var(--font-body)', color: '#FFC9B0' }}>{error}</span>}
                <button type="submit" disabled={sending} className="dev-btn dev-btn--primary" style={{ alignSelf: 'flex-start', marginTop: 6, opacity: sending ? 0.7 : 1 }}>
                  {sending ? 'Invio in corso…' : 'Scaricate la guida (PDF) →'}
                </button>
                <span style={{ font: '500 11px var(--font-mono)', color: 'rgba(255,255,255,.55)', letterSpacing: '.08em', textTransform: 'uppercase' }}>
                  Dati su server europei · zero condivisione con terzi
                </span>
              </> :

            <div style={{ display: 'flex', flexDirection: 'column', gap: 22, justifyContent: 'center', flex: 1 }}>
                <span className="eyebrow" style={{ color: '#9DE6A6' }}>Richiesta ricevuta ✓</span>
                <h3>La guida è vostra.</h3>
                <p style={{ maxWidth: 420, lineHeight: '1.7' }}>Scaricatela subito oppure controllate la casella email: ve la invieremo anche lì. Se non la trovate, provate nella cartella Promozioni.</p>
                <a href="/assets/guida-digitalizzazione-devmy.pdf" download className="dev-btn dev-btn--primary" style={{ alignSelf: 'flex-start' }}>
                  Scarica la guida (PDF) ↓
                </a>
                <div style={{ borderTop: '1px solid rgba(255,255,255,.12)', paddingTop: 22, marginTop: 6, display: 'flex', flexDirection: 'column', gap: 14 }}>
                  <span style={{ font: '500 14px var(--font-body)', color: 'rgba(255,255,255,.7)' }}>Volete parlarne con noi?</span>
                  <a href="#prenota" className="dev-btn dev-btn--outline-light" style={{ alignSelf: 'flex-start' }}>Prenota una call gratuita →</a>
                </div>
                <button type="button" style={{ alignSelf: 'flex-start', background: 'none', border: 'none', cursor: 'pointer', font: '500 13px var(--font-body)', color: 'rgba(255,255,255,.45)', textDecoration: 'underline', padding: 0 }} onClick={() => setSent(false)}>
                  Compila di nuovo
                </button>
              </div>
            }
          </form>
        </div>
      </div>
    </section>);

}

/* ---------- FAQ ---------- */
function DevFAQ() {
  const [open, setOpen] = useStateConv(0);
  const items = [
  {
    q: 'Quanto dura un progetto sanitario tipico con voi?',
    a: 'Un MVP funzionante in 8 settimane è il nostro punto di riferimento. Per progetti più articolati (integrazione PACS, telemedicina full, AI clinica) ragioniamo per release ogni 2 settimane fino al go-live. Il piano lo scriviamo insieme dopo la call conoscitiva, sulla base della vostra struttura.'
  },
  {
    q: 'Possiamo integrare il software che usiamo già (PACS, RIS, gestionale)?',
    a: 'Sì. È il nostro mestiere: non veniamo a sostituire ciò che funziona, veniamo a farlo dialogare. Lavoriamo nativamente con DICOM e con gli SDK proprietari dei principali fornitori di PACS e RIS italiani.'
  },
  {
    q: 'Come gestite la compliance al decreto 101/2020 e al GDPR?',
    a: 'Il software che vi consegniamo nasce conforme: registro esposizioni, gestione consensi, audit log, hosting su server europei. Se serve, mettiamo a disposizione il nostro partner MAD per gli aspetti normativi che vanno oltre il codice (DPIA, valutazione del rischio radiologico, formazione obbligatoria).'
  },
  {
    q: 'I dati dei pazienti dove vivono?',
    a: 'Su server europei (AWS Francoforte o Aruba Italia, su vostra scelta) — mai fuori UE. Cifratura at-rest e in-transit, backup geo-ridondanti, audit trail completo. Possiamo deployare anche on-premise se la vostra struttura lo richiede.'
  },
  {
    q: 'Lavorate solo con grandi strutture?',
    a: 'No. Il nostro portfolio sanitario va da studi dentistici singoli (Dentaldose) a multinazionali farmaceutiche francesi (Wisnam). Il metodo è lo stesso: capire prima, costruire dopo.'
  }];


  return (
    <section id="faq" className="section section--faq">
      <div className="section__inner">
        <div className="faq__layout">
          <div className="faq__head">
            <span className="eyebrow">Domande frequenti</span>
            <h2 style={{ marginTop: 14 }}>
              Le cose che ci chiedono <em>prima</em> di firmare.
            </h2>
            <p style={{ color: 'var(--neutral-600)', marginTop: 14, lineHeight: '26px', maxWidth: 380 }}>
              Se la vostra domanda non c'è, è perché probabilmente è specifica e merita una call dedicata.
            </p>
            <div className="faq__contact-card">
              <strong>Non trovate la risposta?</strong>
              <div style={{ font: '500 14px var(--font-body)', color: 'var(--neutral-600)' }}>
                Scrivete a <a href="mailto:healthcare@devmy.it" className="link-orange">healthcare@devmy.it</a> — vi rispondiamo in 24h lavorative.
              </div>
            </div>
          </div>

          <div className="faq__list">
            {items.map((it, i) =>
            <div key={i} className={`faq__item ${open === i ? 'is-open' : ''}`}>
                <button className="faq__item__btn" onClick={() => setOpen(open === i ? -1 : i)} aria-expanded={open === i}>
                  <span>{it.q}</span>
                  <span className="faq__item__icon" aria-hidden="true">
                    <svg width="14" height="14" viewBox="0 0 14 14" fill="none">
                      <path d="M7 1v12M1 7h12" stroke="currentColor" strokeWidth="2" strokeLinecap="round" />
                    </svg>
                  </span>
                </button>
                <div className="faq__item__body"><div><p>{it.a}</p></div></div>
              </div>
            )}
          </div>
        </div>
      </div>
    </section>);

}

/* ---------- BOOKING (visual layer — stessa struttura del mock) ---------- */
const IT_MONTHS = ['Gennaio','Febbraio','Marzo','Aprile','Maggio','Giugno','Luglio','Agosto','Settembre','Ottobre','Novembre','Dicembre'];
const IT_DAYS = ['Domenica','Lunedì','Martedì','Mercoledì','Giovedì','Venerdì','Sabato'];

function CalendlyMock({ currentMonth, availableDays, daySlots, selectedDay, selectedSlot, loading, onDaySelect, onSlotSelect, onConfirm, onMonthChange }) {
  const { year, month } = currentMonth;
  const daysInMonth = new Date(year, month + 1, 0).getDate();
  const firstDayOffset = (new Date(year, month, 1).getDay() + 6) % 7;
  const cells = [];
  for (let i = 0; i < firstDayOffset; i++) cells.push({ muted: true, label: '' });
  for (let d = 1; d <= daysInMonth; d++) cells.push({ day: d });
  while (cells.length % 7 !== 0) cells.push({ muted: true, label: '' });

  const slotHeader = selectedDay
    ? `${IT_DAYS[new Date(year, month, selectedDay).getDay()]} ${selectedDay} ${IT_MONTHS[month].toLowerCase()}`
    : `${IT_MONTHS[month]} ${year}`;

  return (
    <div className="cal-mock" role="region" aria-label="Prenotazione call">
      <div className="cal-mock__head">
        <div className="cal-mock__head__avatar">FS</div>
        <div>
          <div className="cal-mock__head__title">Call conoscitiva · 15 min</div>
          <div className="cal-mock__head__sub">
            con Francesco Sciuti, CEO · <span className="live">disponibile</span>
          </div>
        </div>
      </div>

      <div className="cal-mock__body">
        <div className="cal-mock__calendar">
          <div className="cal-mock__month">
            <button aria-label="precedente" onClick={() => onMonthChange(-1)}>←</button>
            <span>{IT_MONTHS[month]} {year}</span>
            <button aria-label="successivo" onClick={() => onMonthChange(1)}>→</button>
          </div>
          <div className="cal-mock__weekdays">
            <span>Lun</span><span>Mar</span><span>Mer</span><span>Gio</span><span>Ven</span><span>Sab</span><span>Dom</span>
          </div>
          <div className="cal-mock__days">
            {cells.map((c, i) => {
              if (c.muted) return <span key={i} className="cal-mock__day muted">{c.label}</span>;
              const hasSlots = availableDays.has(c.day);
              const isSelected = c.day === selectedDay;
              const cls = ['cal-mock__day'];
              if (hasSlots) cls.push('has-slots');
              if (isSelected) cls.push('selected');
              return (
                <span
                  key={i}
                  className={cls.join(' ')}
                  onClick={() => hasSlots && onDaySelect(c.day)}
                  style={!hasSlots ? { cursor: 'default', color: 'var(--neutral-300)' } : {}}>
                  {c.day}
                </span>);
            })}
          </div>
        </div>
        <div className="cal-mock__slots">
          <h6>{slotHeader}</h6>
          <div className="cal-mock__slots__list">
            {loading
              ? <div style={{ color: 'var(--neutral-400)', font: '500 13px var(--font-body)' }}>Caricamento…</div>
              : daySlots.map((s) => (
                <div
                  key={s.display}
                  className="cal-mock__slot"
                  onClick={() => onSlotSelect(s)}
                  style={s.display === selectedSlot ? { borderColor: 'var(--brand-orange)', color: 'var(--brand-orange)' } : {}}>
                  {s.display}
                </div>
              ))
            }
          </div>
          <button className="cal-mock__slot confirm" onClick={onConfirm} disabled={!selectedSlot}>
            {selectedSlot ? `Conferma · ${selectedSlot} →` : 'Conferma →'}
          </button>
        </div>
      </div>
    </div>);
}

/* ---------- BOOKING OVERLAY wrapper ---------- */
function BookingOverlay({ onClose, children }) {
  return (
    <div onClick={onClose} style={{ position:'fixed', inset:0, zIndex:9999, background:'rgba(11,31,42,.82)', backdropFilter:'blur(6px)', display:'flex', alignItems:'center', justifyContent:'center', padding:'20px' }}>
      <div onClick={e => e.stopPropagation()} style={{ position:'relative', width:'100%', maxWidth:480, borderRadius:16, background:'var(--hc-midnight)', boxShadow:'0 40px 120px rgba(0,0,0,.6)', padding:'40px 36px 36px', display:'flex', flexDirection:'column', gap:20 }}>
        <button onClick={onClose} style={{ position:'absolute', top:14, right:16, background:'none', border:'none', cursor:'pointer', font:'600 22px var(--font-display)', color:'rgba(255,255,255,.4)', lineHeight:1 }}>×</button>
        {children}
      </div>
    </div>);
}

/* ---------- BOOKING FORM ---------- */
function BookingForm({ selectedSlot, selectedSlotUtc, selectedDay, currentMonth, onClose, onSuccess }) {
  const [sending, setSending] = useStateConv(false);
  const [error, setError] = useStateConv('');
  const label = `${IT_DAYS[new Date(currentMonth.year, currentMonth.month, selectedDay).getDay()]} ${selectedDay} ${IT_MONTHS[currentMonth.month].toLowerCase()} · ${selectedSlot}`;

  async function handleSubmit(e) {
    e.preventDefault();
    const fd = new FormData(e.currentTarget);
    setSending(true); setError('');
    try {
      const res = await fetch('/api/cal-book', {
        method: 'POST',
        headers: { 'Content-Type': 'application/json' },
        body: JSON.stringify({
          start: selectedSlotUtc,
          name: fd.get('name'),
          email: fd.get('email'),
          notes: fd.get('notes') || '',
        }),
      });
      const data = await res.json();
      if (!res.ok) throw new Error(data.error || 'Errore durante la prenotazione');
      onSuccess(data?.data?.meetingUrl || null);
    } catch (err) {
      setError(err.message);
    } finally {
      setSending(false);
    }
  }

  return (
    <BookingOverlay onClose={onClose}>
      <div>
        <span className="eyebrow" style={{ color:'var(--brand-orange)' }}>Call conoscitiva · 15 min</span>
        <h3 style={{ color:'#fff', marginTop:8 }}>Conferma la prenotazione</h3>
        <p style={{ color:'rgba(255,255,255,.6)', marginTop:6, font:'500 14px var(--font-body)' }}>{label}</p>
      </div>
      <form onSubmit={handleSubmit} style={{ display:'flex', flexDirection:'column', gap:14 }}>
        <div className="dev-field">
          <label>Nome e cognome</label>
          <input name="name" required placeholder="es. Maria Esposito" />
        </div>
        <div className="dev-field">
          <label>Email</label>
          <input name="email" type="email" required placeholder="maria@struttura.it" />
        </div>
        <div className="dev-field">
          <label>Note (opzionale)</label>
          <input name="notes" placeholder="es. Usiamo già un PACS, vorrei capire come integrarlo" />
        </div>
        {error && <span style={{ font:'500 13px var(--font-body)', color:'#FFC9B0' }}>{error}</span>}
        <button type="submit" className="dev-btn dev-btn--primary" disabled={sending} style={{ marginTop:4, opacity: sending ? 0.7 : 1 }}>
          {sending ? 'Prenotazione in corso…' : 'Conferma la prenotazione →'}
        </button>
      </form>
    </BookingOverlay>);
}

/* ---------- BOOKING SUCCESS ---------- */
function BookingSuccess({ selectedSlot, selectedDay, currentMonth, meetingUrl, onClose }) {
  const label = `${IT_DAYS[new Date(currentMonth.year, currentMonth.month, selectedDay).getDay()]} ${selectedDay} ${IT_MONTHS[currentMonth.month].toLowerCase()} alle ${selectedSlot}`;
  return (
    <BookingOverlay onClose={onClose}>
      <span className="eyebrow" style={{ color:'#9DE6A6' }}>Prenotazione confermata ✓</span>
      <div>
        <h3 style={{ color:'#fff', marginTop:8 }}>Ci vediamo presto.</h3>
        <p style={{ color:'rgba(255,255,255,.7)', marginTop:10, lineHeight:'1.7' }}>
          La call è fissata per <strong style={{ color:'#fff' }}>{label}</strong>.<br />
          Riceverete una conferma via email con tutti i dettagli, incluso il link per collegarvi.
        </p>
      </div>
      <button onClick={onClose} className="dev-btn dev-btn--outline-light" style={{ alignSelf:'flex-start' }}>Chiudi →</button>
    </BookingOverlay>);
}

/* ---------- BOOKING (data layer — Cal.com API) ---------- */
function BookingEmbed() {
  const now = new Date();
  const [currentMonth, setCurrentMonth] = useStateConv({ year: now.getFullYear(), month: now.getMonth() });
  const [slots, setSlots] = useStateConv({});
  const [selectedDay, setSelectedDay] = useStateConv(null);
  const [selectedSlot, setSelectedSlot] = useStateConv(null);
  const [selectedSlotUtc, setSelectedSlotUtc] = useStateConv(null);
  const [loading, setLoading] = useStateConv(true);
  const [formState, setFormState] = useStateConv(null); // null | 'form' | 'success'
  const [refreshKey, setRefreshKey] = useStateConv(0);
  const slotCache = React.useRef({});

  const { username, eventTypeSlug } = INTEGRATIONS.calcom;

  useEffectConv(() => {
    const { year, month } = currentMonth;
    const cacheKey = `${year}-${month}`;

    if (slotCache.current[cacheKey]) {
      const parsed = slotCache.current[cacheKey];
      setSlots(parsed);
      setSelectedSlot(null);
      const firstDay = Object.keys(parsed).map(Number).sort((a, b) => a - b)[0];
      if (firstDay) setSelectedDay(firstDay);
      setLoading(false);
      return;
    }

    setSelectedDay(null);
    setSelectedSlot(null);
    setLoading(true);
    const startTime = new Date(year, month, 1).toISOString();
    const endTime = new Date(year, month + 1, 0, 23, 59, 59).toISOString();
    fetch(`/api/cal-slots?startTime=${encodeURIComponent(startTime)}&endTime=${encodeURIComponent(endTime)}`)
      .then(r => r.json())
      .then(data => {
        const raw = data?.data || {};
        const parsed = {};
        Object.entries(raw).forEach(([dateStr, arr]) => {
          const day = parseInt(dateStr.split('-')[2], 10);
          parsed[day] = arr.map(s => {
            const d = new Date(s.start);
            return {
              display: `${String(d.getHours()).padStart(2, '0')}:${String(d.getMinutes()).padStart(2, '0')}`,
              utc: s.start,
            };
          });
        });
        slotCache.current[cacheKey] = parsed;
        setSlots(parsed);
        const firstDay = Object.keys(parsed).map(Number).sort((a, b) => a - b)[0];
        if (firstDay) setSelectedDay(firstDay);
      })
      .catch(err => console.error('[cal-slots] error:', err))
      .finally(() => setLoading(false));
  }, [currentMonth.year, currentMonth.month, refreshKey]);

  function handleMonthChange(dir) {
    setCurrentMonth(prev => {
      let m = prev.month + dir, y = prev.year;
      if (m < 0) { m = 11; y--; }
      if (m > 11) { m = 0; y++; }
      return { year: y, month: m };
    });
  }

  function handleConfirm() { setFormState('form'); }

  function handleClose() { setFormState(null); }

  function handleSuccessClose() {
    delete slotCache.current[`${currentMonth.year}-${currentMonth.month}`];
    setFormState(null);
    setSelectedSlot(null);
    setSelectedSlotUtc(null);
    setRefreshKey(k => k + 1);
  }

  return (
    <>
      {formState === 'form' && (
        <BookingForm
          selectedSlot={selectedSlot}
          selectedSlotUtc={selectedSlotUtc}
          selectedDay={selectedDay}
          currentMonth={currentMonth}
          onClose={handleClose}
          onSuccess={() => setFormState('success')}
        />
      )}
      {formState === 'success' && (
        <BookingSuccess
          selectedSlot={selectedSlot}
          selectedDay={selectedDay}
          currentMonth={currentMonth}
          onClose={handleSuccessClose}
        />
      )}
      <CalendlyMock
        currentMonth={currentMonth}
        availableDays={new Set(Object.keys(slots).map(Number))}
        daySlots={slots[selectedDay] || []}
        selectedDay={selectedDay}
        selectedSlot={selectedSlot}
        loading={loading}
        onDaySelect={day => { setSelectedDay(day); setSelectedSlot(null); setSelectedSlotUtc(null); }}
        onSlotSelect={s => { setSelectedSlot(s.display); setSelectedSlotUtc(s.utc); }}
        onConfirm={handleConfirm}
        onMonthChange={handleMonthChange}
      />
    </>
  );
}

function DevBooking() {
  return (
    <section id="prenota" className="section section--booking">
      <div className="section__inner">
        <div className="booking__layout">
          <div className="booking__intro">
            <span className="eyebrow" style={{ color: 'var(--brand-orange)' }}>Call conoscitiva · 15 min · gratuita</span>
            <h2 style={{ marginTop: 14 }}>
              Parliamone <em>15 minuti</em>. Senza commerciali, senza impegno.
            </h2>
            <p>
              Una call breve con Francesco (CEO) o Andrea (CTO) per capire se possiamo aiutarvi davvero.
              Niente venditori, niente preventivi finti. Solo persone che faranno il vostro progetto.
            </p>
            <div className="booking__bullets">
              <div className="booking__bullet"><span className="booking__bullet__icon" />Vi ascoltiamo e capiamo lo stack esistente</div>
              <div className="booking__bullet"><span className="booking__bullet__icon" />Stimiamo perimetro, tempi e investimento</div>
              <div className="booking__bullet"><span className="booking__bullet__icon" />Vi diciamo apertamente se NON siamo i partner giusti</div>
              <div className="booking__bullet"><span className="booking__bullet__icon" />Ricevete un riepilogo scritto entro 24h</div>
            </div>
            <div className="booking__alt">
              <span>Preferite scriverci? <a href="mailto:healthcare@devmy.it">healthcare@devmy.it</a></span>
              <span>O chiamateci al <a href="tel:+393920445357">+39 392 044 5357</a> (lun-ven · 9:00-18:00)</span>
            </div>
          </div>
          <div>
            <BookingEmbed />
            <div style={{ marginTop: 14, textAlign: 'center', font: '500 12px var(--font-mono)', color: 'rgba(255,255,255,.45)', letterSpacing: '.08em' }}>
              Disponibilità in tempo reale · sincronizzato con Google Calendar
            </div>
          </div>
        </div>
      </div>
    </section>);

}

/* ---------- FINAL CTA (high-contrast band) ---------- */
function DevFinal() {
  return (
    <section className="section--final">
      <div className="final">
        <div>
          <span className="eyebrow">Ultima fermata</span>
          <h2>
            Avete <em>un'esigenza</em>?<br />
            Raccontatecela in 15 minuti.
          </h2>
          <p>Se siete arrivati fin qui, qualcosa di concreto ce l'avete. La call è il modo più veloce per capire se possiamo davvero aiutarvi a semplificare la vostra operatività.


          </p>
          <div className="final__ctas">
            <a href="#prenota" className="dev-btn dev-btn--primary">Prenota la call gratuita →</a>
            <a href="#guida" className="dev-btn dev-btn--outline-light">O scaricate prima la guida</a>
          </div>
        </div>

        <div className="final__contact-card">
          <h5>Preferite il vecchio modo?</h5>
          <div className="final__contact-card__row">
            <div className="ico">@</div>
            <div>
              <b>Email diretta</b>
              <span>healthcare@devmy.it</span>
            </div>
          </div>
          <div className="final__contact-card__row">
            <div className="ico">☎</div>
            <div>
              <b>Telefono</b>
              <span>+39 392 044 5357</span>
            </div>
          </div>
          <div className="final__contact-card__row">
            <div className="ico">★</div>
            <div>
              <b>Sede operativa</b>
              <span>San Giovanni la Punta · CT</span>
            </div>
          </div>
          <div style={{ paddingTop: 6, font: '500 12px var(--font-mono)', color: 'var(--muted-foreground)', letterSpacing: '.04em' }}>Vi risponderemo entro 24h lavorative

          </div>
        </div>
      </div>
    </section>);

}

Object.assign(window, { DevLeadMagnet, DevFAQ, DevBooking, DevFinal });