@php
  $confronto = [
    [
      'gruppo' => 'Installazione e infrastruttura',
      'righe' => [
        ['label' => 'Rete dedicata nella location', 'local' => 'Obbligatoria (PC server in loco + casse + stampanti)', 'cloud' => 'Non serve: basta internet sul dispositivo'],
        ['label' => 'PC server fisicamente nella location', 'local' => true, 'cloud' => false],
        ['label' => 'Connettività', 'local' => 'Rete locale dedicata nella location', 'cloud' => 'Internet su cassa/monitor/… oppure WiFi extra fino a ~1 km con modem 5G'],
        ['label' => 'Configurazione / setup da noi', 'local' => 'Inclusa se noleggio ≥ 4 giorni consecutivi', 'cloud' => 'Inclusa se noleggio ≥ 4 giorni consecutivi'],
        ['label' => 'Aggiornamenti', 'local' => 'Legati all’installazione in loco', 'cloud' => 'Centralizzati in Cloud'],
        ['label' => 'Accesso da fuori sede', 'local' => 'Limitato alla rete della location', 'cloud' => 'Da casa e da più dispositivi'],
      ],
    ],
    [
      'gruppo' => 'Cassa e menu',
      'righe' => [
        ['label' => 'Piatti e bevande con prezzo', 'local' => true, 'cloud' => true],
        ['label' => 'Varianti piatto', 'local' => false, 'cloud' => true],
        ['label' => 'Limite scorte / esaurimento', 'local' => true, 'cloud' => 'In arrivo'],
        ['label' => 'Vista cassa', 'local' => 'Colonne scorrevoli per cucina', 'cloud' => 'Più viste, anche catalogo'],
        ['label' => 'Asporto / ritiro', 'local' => false, 'cloud' => true],
        ['label' => 'Saltacoda / pre-ordine da smartphone', 'local' => false, 'cloud' => true],
      ],
    ],
    [
      'gruppo' => 'Cucina e stampa',
      'righe' => [
        ['label' => 'Comande cucina (anche più cucine)', 'local' => true, 'cloud' => true],
        ['label' => 'Stampa scontrini e comande', 'local' => 'Dal PC in loco verso stampanti in rete', 'cloud' => 'Via FestAgent / endpoint locale'],
        ['label' => 'Formato scontrino', 'local' => 'Formato Local', 'cloud' => 'Formato Cloud'],
        ['label' => 'Monitor chiamata piatti', 'local' => false, 'cloud' => true],
      ],
    ],
    [
      'gruppo' => 'Pagamenti e team',
      'righe' => [
        ['label' => 'Metodi di pagamento offline', 'local' => true, 'cloud' => true],
        ['label' => 'Pagamenti online', 'local' => false, 'cloud' => 'Dove previsto'],
        ['label' => 'Più utenti con ruoli', 'local' => true, 'cloud' => true],
      ],
    ],
    [
      'gruppo' => 'Organizzazione e contabilità',
      'righe' => [
        ['label' => 'Più attività / feste separate', 'local' => false, 'cloud' => true],
        ['label' => 'Tavoli e prenotazioni', 'local' => false, 'cloud' => true],
        ['label' => 'Bilancio costi e ricavi', 'local' => false, 'cloud' => true],
        ['label' => 'Report e performance', 'local' => 'Presenti (in sistemazione)', 'cloud' => 'Oggi, bilanci, storico, report'],
        ['label' => 'Tombola', 'local' => false, 'cloud' => true],
        ['label' => 'Pubblicità / bacheca', 'local' => false, 'cloud' => true],
      ],
    ],
    [
      'gruppo' => 'Prezzo',
      'righe' => [
        ['label' => 'Modello di prezzo', 'local' => 'Su richiesta: noleggio software + hardware + posa rete (se non presente)', 'cloud' => 'A consumo'],
      ],
    ],
  ];

  $vantaggi = [
    'local' => [
      'Funziona in rete dedicata nella location, indipendente da internet pubblico',
      'Stampa centralizzata dal PC in loco verso tutte le stampanti',
      'Pacchetto “chiavi in mano”: software, hardware e posa rete nel preventivo',
      'Setup configurato da noi incluso se noleggi almeno 4 giorni consecutivi',
      'Limite scorte / esaurimento piatti già disponibile',
    ],
    'cloud' => [
      'Nessuna rete locale in tutta la location: basta internet sul dispositivo usato',
      'In alternativa offriamo copertura WiFi extra fino a ~1 km con modem 5G',
      'Più attività separate, bilanci, saltacoda, bacheca e prenotazioni',
      'Paghi a consumo: costi legati a ciò che usi davvero',
      'Setup configurato da noi incluso se noleggi almeno 4 giorni consecutivi',
    ],
  ];

  $listinoGrouped = collect($listino_prezzi ?? [])->sortBy('label')->groupBy('categoria');
@endphp

@extends('layouts/guest')

@section('title', 'Listino SegrestaFEST — Local vs Cloud')

@section('page-meta')
  <script>
    document.documentElement.classList.add('listino-pubblico-page'@if(request()->boolean('pdf')), 'listino-pdf-export'@endif);
  </script>
  <link rel="preconnect" href="https://fonts.googleapis.com">
  <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
  <link href="https://fonts.googleapis.com/css2?family=Fraunces:opsz,wght@9..144,600;9..144,700;9..144,800&family=Outfit:wght@400;500;600;700;800&display=swap" rel="stylesheet">
  @if(request()->boolean('pdf'))
    <link href="https://unpkg.com/boxicons@2.1.4/css/boxicons.min.css" rel="stylesheet">
  @endif
@endsection

@section('page-style')
<style>
  html.listino-pubblico-page,
  html.listino-pubblico-page body {
    background: #1a1630;
  }

  html.listino-pubblico-page .misc-wrapper {
    text-align: start;
    align-items: flex-start;
    justify-content: flex-start;
    padding: 0;
    max-width: 100%;
    min-block-size: auto;
    background: transparent;
  }

  html.listino-pubblico-page .content-footer,
  html.listino-pubblico-page > body > .d-flex > .content-footer,
  html.listino-pubblico-page footer.content-footer {
    display: none !important;
  }

  .listino-pub__credits {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: center;
    gap: .55rem;
    margin-top: 1.75rem;
    padding: 1.1rem 0 .35rem;
    color: rgba(255, 232, 204, .82);
    font-size: .88rem;
    line-height: 1.5;
  }

  .listino-pub__credits-label {
    opacity: .85;
  }

  .listino-pub__credits a {
    display: inline-flex;
    align-items: center;
    gap: .4rem;
    padding: .35rem .7rem .35rem .4rem;
    border-radius: 999px;
    background: rgba(255, 255, 255, .1);
    border: 1px solid rgba(255, 232, 204, .22);
    color: #ffe8cc;
    font-weight: 700;
    font-size: .82rem;
    text-decoration: none;
    transition: background .2s ease, border-color .2s ease, transform .2s ease;
  }

  .listino-pub__credits a:hover {
    background: rgba(255, 255, 255, .16);
    border-color: rgba(255, 194, 122, .45);
    color: #fff;
    transform: translateY(-1px);
  }

  .listino-pub__credits a img {
    width: 20px;
    height: 20px;
    object-fit: contain;
    border-radius: 999px;
    background: #fff;
    padding: 1px;
  }

  .listino-pub__credits-sep {
    display: none;
  }

  .listino-pub {
    --brand-primary: #602d91;
    --brand-accent: #f58220;
    --brand-ink: #15265c;
    --brand-text: #1f2433;
    --brand-muted: #5c6478;
    --paper: #fffaf4;
    --paper-2: #fff7ee;
    --line: rgba(21, 38, 92, .1);
    --radius: 1.15rem;
    --font-display: "Fraunces", Georgia, serif;
    --font-body: "Outfit", system-ui, sans-serif;
    --shadow: 0 18px 40px rgba(10, 8, 24, .18);

    position: relative;
    width: 100%;
    max-width: 1040px;
    margin: 0 auto;
    padding: 1.6rem 1rem 3rem;
    font-family: var(--font-body);
    color: var(--brand-text);
    isolation: isolate;
  }

  .listino-pub::before {
    content: "";
    position: fixed;
    inset: 0;
    z-index: -2;
    background:
      radial-gradient(900px 480px at 12% -8%, rgba(245, 130, 32, .28), transparent 55%),
      radial-gradient(800px 520px at 92% 8%, rgba(96, 45, 145, .45), transparent 50%),
      radial-gradient(700px 420px at 50% 100%, rgba(245, 130, 32, .12), transparent 55%),
      linear-gradient(180deg, #211a3a 0%, #171328 42%, #120f22 100%);
  }

  .listino-pub::after {
    content: "";
    position: fixed;
    inset: 0;
    z-index: -1;
    pointer-events: none;
    opacity: .35;
    background-image:
      radial-gradient(1.5px 1.5px at 10% 20%, rgba(255, 220, 160, .85), transparent),
      radial-gradient(1.5px 1.5px at 30% 65%, rgba(255, 220, 160, .7), transparent),
      radial-gradient(1.5px 1.5px at 55% 15%, rgba(255, 220, 160, .75), transparent),
      radial-gradient(1.5px 1.5px at 78% 42%, rgba(255, 220, 160, .65), transparent),
      radial-gradient(1.5px 1.5px at 88% 78%, rgba(255, 220, 160, .7), transparent),
      radial-gradient(1.5px 1.5px at 18% 88%, rgba(255, 220, 160, .55), transparent);
    animation: listino-twinkle 6s ease-in-out infinite alternate;
  }

  @keyframes listino-twinkle {
    from { opacity: .22; }
    to { opacity: .4; }
  }

  @keyframes listino-rise {
    from { opacity: 0; transform: translateY(18px); }
    to { opacity: 1; transform: translateY(0); }
  }

  .listino-pub__hero,
  .listino-pub__plans,
  .listino-pub__section,
  .listino-pub__note {
    animation: listino-rise .7s ease both;
  }

  .listino-pub__plans { animation-delay: .08s; }
  .listino-pub__section--vantaggi { animation-delay: .16s; }
  .listino-pub__section--cmp { animation-delay: .22s; }
  .listino-pub__section--prezzi { animation-delay: .28s; }
  .listino-pub__note { animation-delay: .34s; }

  .listino-pub__hero {
    text-align: center;
    margin-bottom: 1.75rem;
    padding: 1.55rem 1.15rem 1.7rem;
    border-radius: calc(var(--radius) + .35rem);
    background:
      radial-gradient(520px 220px at 50% -10%, rgba(245, 130, 32, .16), transparent 55%),
      linear-gradient(180deg, rgba(255, 250, 244, .98), rgba(255, 247, 238, .95));
    border: 1px solid rgba(255, 255, 255, .35);
    box-shadow: var(--shadow);
  }

  .listino-pub__hero-line {
    width: 3.2rem;
    height: 3px;
    margin: .85rem auto 1rem;
    border-radius: 999px;
    background: linear-gradient(90deg, #f58220, #602d91);
  }

  .listino-pub__brand {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: .35rem;
    margin-bottom: .9rem;
  }

  .listino-pub__brand-logo {
    height: auto;
    width: min(260px, 72vw);
    max-height: 72px;
    object-fit: contain;
    filter: drop-shadow(0 10px 22px rgba(96, 45, 145, .2));
  }

  .listino-pub__brand-tag {
    font-size: .72rem;
    font-weight: 700;
    letter-spacing: .14em;
    text-transform: uppercase;
    color: var(--brand-accent);
  }

  .listino-pub__title {
    margin: 0 0 .65rem;
    font-family: var(--font-display);
    font-size: clamp(1.7rem, 4.8vw, 2.55rem);
    line-height: 1.08;
    font-weight: 700;
    letter-spacing: -.03em;
    color: var(--brand-ink);
  }

  .listino-pub__title em {
    font-style: italic;
    color: var(--brand-primary);
  }

  .listino-pub__subtitle {
    margin: 0 auto;
    max-width: 40rem;
    color: var(--brand-muted);
    font-size: 1.02rem;
    line-height: 1.55;
  }

  .listino-pub__subtitle + .listino-pub__subtitle {
    margin-top: .55rem;
    font-size: .95rem;
  }

  .listino-pub__subtitle strong {
    color: var(--brand-ink);
    font-weight: 700;
  }

  .listino-pub__subtitle em {
    font-style: italic;
    font-weight: 650;
    color: var(--brand-primary);
  }

  .listino-pub__plans {
    display: grid;
    grid-template-columns: 1fr;
    gap: 1rem;
    margin: 0 0 1.8rem;
    position: relative;
  }

  @media (min-width: 768px) {
    .listino-pub__plans {
      grid-template-columns: 1fr 1fr;
      gap: 1.15rem;
    }

    .listino-pub__plans::after {
      content: "oppure";
      position: absolute;
      left: 50%;
      top: 50%;
      transform: translate(-50%, -50%);
      z-index: 2;
      width: 3.4rem;
      height: 3.4rem;
      display: grid;
      place-items: center;
      border-radius: 999px;
      background: linear-gradient(145deg, #ff9a3c, #f58220);
      color: #fff;
      font-size: .62rem;
      font-weight: 800;
      letter-spacing: .04em;
      text-transform: uppercase;
      box-shadow: 0 10px 24px rgba(245, 130, 32, .35);
      border: 3px solid rgba(255, 250, 244, .9);
    }
  }

  .listino-pub__plan {
    position: relative;
    overflow: hidden;
    background:
      radial-gradient(420px 180px at 100% 0%, rgba(245, 130, 32, .1), transparent 60%),
      var(--paper);
    border: 1px solid rgba(255, 255, 255, .28);
    border-radius: calc(var(--radius) + .1rem);
    box-shadow: var(--shadow);
    padding: 1.3rem 1.25rem 1.35rem;
    transition: transform .25s ease, box-shadow .25s ease;
  }

  .listino-pub__plan--cloud {
    background:
      radial-gradient(420px 180px at 0% 0%, rgba(96, 45, 145, .12), transparent 60%),
      var(--paper);
  }

  .listino-pub__plan:hover {
    transform: translateY(-4px);
    box-shadow: 0 22px 44px rgba(10, 8, 24, .24);
  }

  .listino-pub__plan-kicker {
    display: inline-flex;
    align-items: center;
    gap: .4rem;
    margin-bottom: .55rem;
    padding: .28rem .65rem;
    border-radius: 999px;
    background: rgba(245, 130, 32, .12);
    font-size: .72rem;
    font-weight: 800;
    letter-spacing: .08em;
    text-transform: uppercase;
    color: #b86a18;
  }

  .listino-pub__plan--cloud .listino-pub__plan-kicker {
    background: rgba(96, 45, 145, .12);
    color: var(--brand-primary);
  }

  .listino-pub__plan h2 {
    display: flex;
    align-items: center;
    gap: .45rem;
    margin: 0 0 .5rem;
    font-family: var(--font-display);
    font-size: 1.7rem;
    font-weight: 700;
    letter-spacing: -.02em;
    color: var(--brand-ink);
  }

  .listino-pub__plan h2 i {
    font-size: 1.35rem;
    color: #f58220;
  }

  .listino-pub__plan--cloud h2 i {
    color: var(--brand-primary);
  }

  .listino-pub__plan p {
    margin: 0 0 1rem;
    color: var(--brand-muted);
    font-size: .94rem;
    line-height: 1.5;
  }

  .listino-mark {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: .35rem;
  }

  .listino-mark i {
    font-size: 1em;
    line-height: 1;
  }

  .listino-pub__price {
    padding-top: .85rem;
    border-top: 1px dashed rgba(21, 38, 92, .16);
    font-family: var(--font-display);
    font-size: 1.2rem;
    font-weight: 700;
    color: var(--brand-ink);
  }

  .listino-pub__price span {
    display: block;
    margin-top: .3rem;
    font-family: var(--font-body);
    font-size: .8rem;
    font-weight: 500;
    line-height: 1.4;
    color: var(--brand-muted);
  }

  .listino-pub__section {
    margin-bottom: 1.7rem;
  }

  .listino-pub__section-head {
    margin-bottom: .85rem;
  }

  .listino-pub__eyebrow {
    display: inline-block;
    margin-bottom: .25rem;
    font-size: .7rem;
    font-weight: 800;
    letter-spacing: .12em;
    text-transform: uppercase;
    color: #ffb56a;
  }

  .listino-pub__section-title {
    margin: 0;
    font-family: var(--font-display);
    font-size: clamp(1.25rem, 3vw, 1.55rem);
    font-weight: 700;
    letter-spacing: -.02em;
    color: #fff8ef;
  }

  .listino-pc {
    display: grid;
    grid-template-columns: 1fr;
    gap: 1rem;
  }

  @media (min-width: 768px) {
    .listino-pc {
      grid-template-columns: 1fr 1fr;
    }
  }

  .listino-pc__card {
    background: var(--paper);
    border: 1px solid rgba(255, 255, 255, .25);
    border-radius: var(--radius);
    box-shadow: var(--shadow);
    padding: 1.15rem 1.15rem 1.2rem;
  }

  .listino-pc__card h3 {
    display: flex;
    align-items: center;
    gap: .4rem;
    margin: 0 0 .75rem;
    font-family: var(--font-display);
    font-size: 1.25rem;
    font-weight: 700;
    color: var(--brand-ink);
  }

  .listino-pc__card h3 i {
    color: #f58220;
  }

  .listino-pc__card--cloud h3 i {
    color: var(--brand-primary);
  }

  .listino-pc__label {
    display: inline-flex;
    align-items: center;
    gap: .35rem;
    margin-bottom: .45rem;
    font-size: .72rem;
    font-weight: 800;
    letter-spacing: .06em;
    text-transform: uppercase;
    color: #1f7a45;
  }

  .listino-pc__list {
    margin: 0;
    padding: 0;
    list-style: none;
  }

  .listino-pc__list li {
    position: relative;
    padding: .4rem 0 .4rem 1.25rem;
    color: var(--brand-muted);
    font-size: .9rem;
    line-height: 1.4;
    border-bottom: 1px solid rgba(21, 38, 92, .06);
  }

  .listino-pc__list li:last-child {
    border-bottom: 0;
  }

  .listino-pc__list li::before {
    content: "✦";
    position: absolute;
    left: 0;
    top: .4rem;
    color: var(--brand-accent);
    font-size: .75rem;
  }

  .listino-cmp,
  .listino-prezzi {
    background: var(--paper);
    border: 1px solid rgba(255, 255, 255, .25);
    border-radius: var(--radius);
    box-shadow: var(--shadow);
    overflow: hidden;
  }

  .listino-cmp table,
  .listino-prezzi table {
    width: 100%;
    border-collapse: separate;
    border-spacing: 0;
    margin: 0;
  }

  .listino-cmp th,
  .listino-cmp td,
  .listino-prezzi th,
  .listino-prezzi td {
    padding: .85rem 1rem;
    border-top: 1px solid rgba(21, 38, 92, .07);
    vertical-align: middle;
    font-size: .9rem;
    line-height: 1.45;
  }

  .listino-cmp thead th,
  .listino-prezzi thead th {
    padding: .7rem 1rem;
    background: #1a1630;
    font-size: .7rem;
    font-weight: 800;
    text-transform: uppercase;
    letter-spacing: .08em;
    color: #f3e9ff;
    border-top: 0;
  }

  .listino-cmp thead th:nth-child(2) {
    background: linear-gradient(180deg, #2a1f18, #241910);
    color: #ffd2a0;
    text-align: center;
    width: 29%;
  }

  .listino-cmp thead th:nth-child(3) {
    background: linear-gradient(180deg, #2a1840, #1f1233);
    color: #e2c8ff;
    text-align: center;
    width: 29%;
  }

  .listino-cmp__group {
    padding: .7rem 1rem !important;
    background: linear-gradient(90deg, rgba(96, 45, 145, .14), rgba(245, 130, 32, .1)) !important;
    font-family: var(--font-display);
    font-size: .88rem !important;
    font-weight: 700 !important;
    letter-spacing: -.01em;
    text-transform: none !important;
    color: var(--brand-ink) !important;
    border-top: 1px solid rgba(96, 45, 145, .12) !important;
  }

  .listino-cmp tbody tr:not(:has(.listino-cmp__group)):nth-child(even) td {
    background: rgba(96, 45, 145, .03);
  }

  .listino-cmp tbody tr:not(:has(.listino-cmp__group)):hover td {
    background: rgba(245, 130, 32, .07);
  }

  .listino-cmp__feature {
    font-weight: 650;
    color: var(--brand-ink);
    width: 42%;
  }

  .listino-cmp td[data-label] {
    text-align: left;
  }

  .listino-cmp td[data-label]:has(.listino-cmp__yes),
  .listino-cmp td[data-label]:has(.listino-cmp__no) {
    text-align: center;
  }

  .listino-cmp__yes,
  .listino-cmp__no {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: .28rem;
    min-height: 1.7rem;
    padding: .18rem .55rem;
    border-radius: 999px;
    font-size: .8rem;
    font-weight: 700;
    line-height: 1.2;
  }

  .listino-cmp__yes {
    color: #17653a;
    background: rgba(31, 122, 69, .12);
  }

  .listino-cmp__no {
    color: #8f3535;
    background: rgba(154, 59, 59, .1);
  }

  .listino-cmp__text {
    color: var(--brand-muted);
    font-size: .86rem;
    font-weight: 500;
    line-height: 1.45;
  }

  .listino-prezzi__head {
    padding: 1.15rem 1.2rem .35rem;
    background:
      radial-gradient(420px 140px at 100% 0%, rgba(96, 45, 145, .1), transparent 60%);
  }

  .listino-prezzi__head .listino-pub__section-title {
    color: var(--brand-ink);
  }

  .listino-prezzi__head p {
    margin: .35rem 0 .75rem;
    color: var(--brand-muted);
    font-size: .9rem;
  }

  .listino-prezzi thead th:last-child {
    text-align: end;
    color: #ffd2a0;
  }

  .listino-prezzi tbody tr:nth-child(even) td {
    background: rgba(96, 45, 145, .03);
  }

  .listino-prezzi tbody tr:hover td {
    background: rgba(245, 130, 32, .07);
  }

  .listino-prezzi__cat {
    font-weight: 650;
    color: var(--brand-ink);
    white-space: nowrap;
  }

  .listino-prezzi__label {
    font-weight: 700;
    color: var(--brand-ink);
  }

  .listino-prezzi__desc {
    display: block;
    margin-top: .25rem;
    color: var(--brand-muted);
    font-size: .8rem;
    line-height: 1.4;
  }

  .listino-prezzi__tipo {
    display: inline-block;
    padding: .18rem .5rem;
    border-radius: .45rem;
    background: rgba(21, 38, 92, .05);
    color: var(--brand-muted);
    font-size: .78rem;
    font-weight: 600;
  }

  .listino-prezzi__price {
    font-family: var(--font-display);
    font-size: 1.05rem;
    font-weight: 700;
    white-space: nowrap;
    text-align: end;
    color: var(--brand-ink);
  }

  .listino-pub__note {
    background: linear-gradient(160deg, rgba(255, 250, 244, .96), rgba(255, 245, 235, .92));
    border: 1px solid rgba(255, 255, 255, .3);
    border-radius: var(--radius);
    box-shadow: var(--shadow);
    padding: 1.2rem 1.25rem 1.25rem;
    color: var(--brand-text);
  }

  .listino-pub__note-title {
    margin: 0 0 .85rem;
    font-family: var(--font-display);
    font-size: 1.15rem;
    font-weight: 700;
    color: var(--brand-ink);
  }

  .listino-pub__note-list {
    margin: 0;
    padding: 0;
    list-style: none;
    display: grid;
    gap: .7rem;
  }

  .listino-pub__note-list li {
    display: grid;
    grid-template-columns: 6.75rem 1fr;
    gap: .65rem;
    align-items: start;
    padding: .7rem .8rem;
    border-radius: .75rem;
    background: rgba(255, 255, 255, .72);
    border: 1px solid rgba(21, 38, 92, .06);
  }

  .listino-cmp thead th:nth-child(2) .listino-mark i {
    color: #ffd2a0;
  }

  .listino-cmp thead th:nth-child(3) .listino-mark i {
    color: #e2c8ff;
  }

  .listino-pub__note-kicker {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: .28rem;
    min-height: 1.55rem;
    padding: .15rem .55rem;
    border-radius: 999px;
    font-size: .68rem;
    font-weight: 800;
    letter-spacing: .05em;
    text-transform: uppercase;
    white-space: nowrap;
  }

  .listino-pub__note-kicker i {
    font-size: .85rem;
  }

  .listino-pub__note-kicker--local {
    color: #9a5a12;
    background: rgba(245, 130, 32, .14);
  }

  .listino-pub__note-kicker--cloud {
    color: var(--brand-primary);
    background: rgba(96, 45, 145, .12);
  }

  .listino-pub__note-kicker--both {
    color: var(--brand-ink);
    background: rgba(21, 38, 92, .08);
  }

  .listino-pub__note-list p {
    margin: 0;
    color: var(--brand-muted);
    font-size: .9rem;
    line-height: 1.5;
  }

  @media (max-width: 640px) {
    .listino-cmp thead {
      display: none;
    }

    .listino-cmp tr {
      display: grid;
      grid-template-columns: 1fr 1fr;
      gap: .35rem .55rem;
      padding: .85rem .9rem;
      border-top: 1px solid rgba(21, 38, 92, .07);
    }

    .listino-cmp td {
      border: 0;
      padding: 0;
      text-align: left;
    }

    .listino-cmp__feature {
      grid-column: 1 / -1;
      width: auto;
      margin-bottom: .15rem;
      font-family: var(--font-display);
      font-size: .95rem;
    }

    .listino-cmp td:nth-child(2)::before,
    .listino-cmp td:nth-child(3)::before {
      content: attr(data-label);
      display: block;
      font-size: .66rem;
      font-weight: 800;
      text-transform: uppercase;
      letter-spacing: .06em;
      color: var(--brand-muted);
      margin-bottom: .2rem;
    }

    .listino-cmp__text {
      text-align: left;
    }

    .listino-cmp__group {
      display: block;
      grid-column: 1 / -1;
    }

    .listino-cmp tr:has(.listino-cmp__group) {
      display: block;
      padding: 0;
      border: 0;
    }

    .listino-prezzi thead th {
      font-size: .62rem;
      padding: .55rem .65rem;
    }

    .listino-prezzi th,
    .listino-prezzi td {
      padding: .7rem .65rem;
      font-size: .84rem;
    }

    .listino-pub__note-list li {
      grid-template-columns: 1fr;
      gap: .35rem;
    }
  }

  @media (prefers-reduced-motion: reduce) {
    .listino-pub::after,
    .listino-pub__hero,
    .listino-pub__plans,
    .listino-pub__section,
    .listino-pub__note {
      animation: none !important;
    }

    .listino-pub__plan:hover {
      transform: none;
    }
  }

  .listino-pub__toolbar {
    display: flex;
    justify-content: center;
    margin: 0 0 1rem;
  }

  .listino-pub__pdf-btn {
    display: inline-flex;
    align-items: center;
    gap: .4rem;
    padding: .55rem 1rem;
    border-radius: 999px;
    border: 1px solid rgba(255, 232, 204, .28);
    background: rgba(255, 255, 255, .1);
    color: #ffe8cc;
    font-weight: 700;
    font-size: .86rem;
    text-decoration: none;
    transition: background .2s ease, transform .2s ease;
  }

  .listino-pub__pdf-btn:hover {
    background: rgba(255, 255, 255, .16);
    color: #fff;
    transform: translateY(-1px);
  }

  /* Export PDF via Chrome (?pdf=1) + stampa browser.
     Chrome stampa con viewport stretta: senza override le media query
     mobile (1 colonna) vincono e le card si allargano a tutta riga. */
  @page {
    size: A4;
    margin: 10mm 9mm;
  }

  html.listino-pdf-export,
  html.listino-pdf-export body {
    background: #1a1630 !important;
  }

  html.listino-pdf-export *,
  html.listino-pdf-export *::before,
  html.listino-pdf-export *::after {
    -webkit-print-color-adjust: exact !important;
    print-color-adjust: exact !important;
    animation: none !important;
    transition: none !important;
  }

  html.listino-pdf-export .listino-pub__toolbar,
  html.listino-pdf-export .listino-pub__pdf-btn {
    display: none !important;
  }

  html.listino-pdf-export .listino-pub::before,
  html.listino-pdf-export .listino-pub::after {
    position: absolute !important;
    inset: 0 auto auto 0 !important;
    width: 100% !important;
    height: 100% !important;
  }

  html.listino-pdf-export .listino-pub {
    max-width: none !important;
    width: 100% !important;
    padding: .75rem .35rem 1.25rem !important;
  }

  html.listino-pdf-export .listino-pub__hero {
    margin-bottom: 1.1rem !important;
    padding: 1rem 1.1rem 1.05rem !important;
  }

  html.listino-pdf-export .listino-pub__title {
    font-size: 1.85rem !important;
  }

  html.listino-pdf-export .listino-pub__subtitle {
    font-size: .92rem !important;
  }

  html.listino-pdf-export .listino-pub__section {
    margin-bottom: 1.15rem !important;
  }

  html.listino-pdf-export .listino-pub__plans,
  html.listino-pdf-export .listino-pc {
    display: grid !important;
    grid-template-columns: 1fr 1fr !important;
    gap: .85rem !important;
  }

  html.listino-pdf-export .listino-pub__plans::after {
    content: "oppure";
    position: absolute;
    left: 50%;
    top: 50%;
    transform: translate(-50%, -50%);
    z-index: 2;
    width: 2.9rem;
    height: 2.9rem;
    display: grid;
    place-items: center;
    border-radius: 999px;
    background: linear-gradient(145deg, #ff9a3c, #f58220);
    color: #fff;
    font-size: .56rem;
    font-weight: 800;
    letter-spacing: .04em;
    text-transform: uppercase;
    box-shadow: 0 8px 18px rgba(245, 130, 32, .3);
    border: 3px solid rgba(255, 250, 244, .9);
  }

  html.listino-pdf-export .listino-pub__plan,
  html.listino-pdf-export .listino-pc__card {
    width: auto !important;
    max-width: none !important;
    box-shadow: 0 8px 18px rgba(10, 8, 24, .14) !important;
    padding: 1rem .95rem 1.05rem !important;
  }

  html.listino-pdf-export .listino-pub__plan h2,
  html.listino-pdf-export .listino-pc__card h3 {
    font-size: 1.35rem !important;
  }

  html.listino-pdf-export .listino-pub__plan p,
  html.listino-pdf-export .listino-pc__list li {
    font-size: .82rem !important;
    line-height: 1.4 !important;
  }

  /* Tabelle: layout desktop, tipografia compatta, colori pieni in stampa */
  html.listino-pdf-export .listino-cmp,
  html.listino-pdf-export .listino-prezzi {
    overflow: visible !important;
    box-shadow: 0 8px 18px rgba(10, 8, 24, .12) !important;
    border-radius: .85rem !important;
  }

  html.listino-pdf-export .listino-cmp table,
  html.listino-pdf-export .listino-prezzi table {
    width: 100% !important;
    table-layout: fixed !important;
    border-collapse: collapse !important;
  }

  html.listino-pdf-export .listino-cmp thead,
  html.listino-pdf-export .listino-prezzi thead {
    display: table-header-group !important;
  }

  html.listino-pdf-export .listino-cmp tbody,
  html.listino-pdf-export .listino-prezzi tbody {
    display: table-row-group !important;
  }

  html.listino-pdf-export .listino-cmp tr,
  html.listino-pdf-export .listino-prezzi tr {
    display: table-row !important;
    grid-template-columns: none !important;
    break-inside: avoid;
    page-break-inside: avoid;
  }

  html.listino-pdf-export .listino-cmp td,
  html.listino-pdf-export .listino-cmp th,
  html.listino-pdf-export .listino-prezzi td,
  html.listino-pdf-export .listino-prezzi th {
    display: table-cell !important;
    vertical-align: top !important;
    padding: .48rem .62rem !important;
    font-size: .76rem !important;
    line-height: 1.35 !important;
    border-top: 1px solid rgba(21, 38, 92, .1) !important;
    word-wrap: break-word;
    overflow-wrap: anywhere;
  }

  html.listino-pdf-export .listino-cmp thead th,
  html.listino-pdf-export .listino-prezzi thead th {
    padding: .55rem .62rem !important;
    font-size: .64rem !important;
    letter-spacing: .07em !important;
    background-color: #1a1630 !important;
    color: #f3e9ff !important;
    vertical-align: middle !important;
  }

  html.listino-pdf-export .listino-cmp thead th:nth-child(1) {
    width: 36% !important;
  }

  html.listino-pdf-export .listino-cmp thead th:nth-child(2) {
    width: 32% !important;
    background: #241910 !important;
    color: #ffd2a0 !important;
    text-align: center !important;
  }

  html.listino-pdf-export .listino-cmp thead th:nth-child(3) {
    width: 32% !important;
    background: #1f1233 !important;
    color: #e2c8ff !important;
    text-align: center !important;
  }

  html.listino-pdf-export .listino-cmp__feature {
    grid-column: auto !important;
    width: auto !important;
    font-size: .78rem !important;
    font-weight: 700 !important;
    color: #15265c !important;
  }

  html.listino-pdf-export .listino-cmp td[data-label] {
    text-align: left !important;
  }

  html.listino-pdf-export .listino-cmp td[data-label]:has(.listino-cmp__yes),
  html.listino-pdf-export .listino-cmp td[data-label]:has(.listino-cmp__no) {
    text-align: center !important;
    vertical-align: middle !important;
  }

  html.listino-pdf-export .listino-cmp td:nth-child(2)::before,
  html.listino-pdf-export .listino-cmp td:nth-child(3)::before {
    content: none !important;
  }

  html.listino-pdf-export .listino-cmp__group {
    padding: .5rem .62rem !important;
    font-size: .78rem !important;
    background: #efe6f7 !important;
    color: #15265c !important;
    border-top: 1px solid rgba(96, 45, 145, .18) !important;
  }

  html.listino-pdf-export .listino-cmp tbody tr:not(:has(.listino-cmp__group)):nth-child(even) td {
    background: #f7f2fb !important;
  }

  html.listino-pdf-export .listino-cmp__yes,
  html.listino-pdf-export .listino-cmp__no {
    min-height: 1.4rem !important;
    padding: .12rem .45rem !important;
    font-size: .72rem !important;
  }

  html.listino-pdf-export .listino-cmp__yes {
    color: #145c34 !important;
    background: #d9f0e2 !important;
  }

  html.listino-pdf-export .listino-cmp__no {
    color: #7a2e2e !important;
    background: #f2dede !important;
  }

  html.listino-pdf-export .listino-cmp__text {
    font-size: .74rem !important;
    line-height: 1.35 !important;
    color: #4a5264 !important;
  }

  html.listino-pdf-export .listino-prezzi__head {
    padding: .9rem 1rem .25rem !important;
  }

  html.listino-pdf-export .listino-prezzi__head .listino-pub__section-title {
    font-size: 1.25rem !important;
  }

  html.listino-pdf-export .listino-prezzi__head p {
    font-size: .8rem !important;
    margin-bottom: .55rem !important;
  }

  html.listino-pdf-export .listino-prezzi thead th:last-child {
    text-align: end !important;
    color: #ffd2a0 !important;
  }

  html.listino-pdf-export .listino-prezzi tbody tr:nth-child(even) td {
    background: #f7f2fb !important;
  }

  html.listino-pdf-export .listino-prezzi__label {
    font-size: .78rem !important;
  }

  html.listino-pdf-export .listino-prezzi__desc {
    font-size: .7rem !important;
  }

  html.listino-pdf-export .listino-prezzi__tipo {
    font-size: .68rem !important;
  }

  html.listino-pdf-export .listino-prezzi__price {
    font-size: .92rem !important;
  }

  html.listino-pdf-export .listino-pub__note {
    padding: 1rem 1.05rem !important;
    box-shadow: 0 8px 18px rgba(10, 8, 24, .12) !important;
  }

  html.listino-pdf-export .listino-pub__note-list li {
    grid-template-columns: 6.25rem 1fr !important;
    padding: .55rem .65rem !important;
  }

  html.listino-pdf-export .listino-pub__note-list p {
    font-size: .8rem !important;
  }

  /* Blocchetti corti: no spezzature. Tabelle lunghe: possono andare a pagina nuova. */
  html.listino-pdf-export .listino-pub__hero,
  html.listino-pdf-export .listino-pub__plans,
  html.listino-pdf-export .listino-pc,
  html.listino-pdf-export .listino-pub__note {
    break-inside: avoid;
    page-break-inside: avoid;
  }

  html.listino-pdf-export .listino-cmp,
  html.listino-pdf-export .listino-prezzi,
  html.listino-pdf-export .listino-pub__section--cmp,
  html.listino-pdf-export .listino-pub__section--prezzi {
    break-inside: auto;
    page-break-inside: auto;
  }

  html.listino-pdf-export .listino-pub__section--cmp {
    break-before: page;
    page-break-before: always;
  }

  @media print {
    html.listino-pubblico-page,
    html.listino-pubblico-page body {
      background: #1a1630 !important;
    }

    html.listino-pubblico-page *,
    html.listino-pubblico-page *::before,
    html.listino-pubblico-page *::after {
      -webkit-print-color-adjust: exact !important;
      print-color-adjust: exact !important;
      animation: none !important;
      transition: none !important;
    }

    .listino-pub__toolbar,
    .listino-pub__pdf-btn {
      display: none !important;
    }

    .listino-pub::before,
    .listino-pub::after {
      position: absolute !important;
      width: 100% !important;
      height: 100% !important;
    }

    .listino-pub__plans,
    .listino-pc {
      display: grid !important;
      grid-template-columns: 1fr 1fr !important;
      gap: .85rem !important;
    }

    .listino-pub__plans::after {
      content: "oppure";
      position: absolute;
      left: 50%;
      top: 50%;
      transform: translate(-50%, -50%);
      z-index: 2;
      width: 2.9rem;
      height: 2.9rem;
      display: grid;
      place-items: center;
      border-radius: 999px;
      background: linear-gradient(145deg, #ff9a3c, #f58220);
      color: #fff;
      font-size: .56rem;
      font-weight: 800;
      letter-spacing: .04em;
      text-transform: uppercase;
      box-shadow: 0 8px 18px rgba(245, 130, 32, .3);
      border: 3px solid rgba(255, 250, 244, .9);
    }

    .listino-cmp,
    .listino-prezzi {
      overflow: visible !important;
    }

    .listino-cmp thead,
    .listino-prezzi thead {
      display: table-header-group !important;
    }

    .listino-cmp tr,
    .listino-prezzi tr {
      display: table-row !important;
      break-inside: avoid;
      page-break-inside: avoid;
    }

    .listino-cmp td,
    .listino-cmp th,
    .listino-prezzi td,
    .listino-prezzi th {
      display: table-cell !important;
    }

    .listino-pub__hero,
    .listino-pub__plans,
    .listino-pc,
    .listino-pub__note {
      break-inside: avoid;
      page-break-inside: avoid;
    }

    .listino-cmp,
    .listino-prezzi {
      break-inside: auto;
      page-break-inside: auto;
    }

    .listino-pub__section--cmp {
      break-before: page;
      page-break-before: always;
    }
  }
</style>
@endsection

@section('content')
<div class="listino-pub">
  @unless(request()->boolean('pdf'))
    <div class="listino-pub__toolbar">
      <a href="{{ route('listino-prezzi.pdf') }}" class="listino-pub__pdf-btn">
        <i class="bx bx-download" aria-hidden="true"></i>
        Scarica PDF
      </a>
    </div>
  @endunless

  @if(session('error'))
    <div class="alert alert-danger mb-3">{{ session('error') }}</div>
  @endif

  <header class="listino-pub__hero">
    <div class="listino-pub__brand">
      <img
        class="listino-pub__brand-logo"
        src="{{ asset('assets/img/logo_fest.png') }}"
        alt="FEST"
      >
      <span class="listino-pub__brand-tag">per sagre · feste · eventi</span>
    </div>
    <div class="listino-pub__hero-line" aria-hidden="true"></div>
    <h1 class="listino-pub__title">Local o Cloud:<br><em>quale fa per la tua festa?</em></h1>
    <p class="listino-pub__subtitle">
      <strong>SegrestaFEST</strong> semplifica cassa, cucina e stampanti della festa: <br>
      <em>meno lavoro, più relazioni</em> con i volontari, con gli ospiti, con la serata.
    </p>
  </header>

  <div class="listino-pub__plans">
    <article class="listino-pub__plan">
      <div class="listino-pub__plan-kicker">In location</div>
      <h2><i class="bx bx-map" aria-hidden="true"></i> Local</h2>
      <p>
        Il PC con il software resta fisicamente nella location dell’evento, con una rete dedicata.
        Cassa, cucine e stampa restano in locale; meno servizi “digitali” intorno.
      </p>
      <div class="listino-pub__price">
        Prezzo su richiesta
        <span>Comprende noleggio software, hardware e posa della rete (se non già presente). Setup incluso da 4+ giorni consecutivi.</span>
      </div>
    </article>

    <article class="listino-pub__plan listino-pub__plan--cloud">
      <div class="listino-pub__plan-kicker">Online</div>
      <h2><i class="bx bx-cloud" aria-hidden="true"></i> Cloud</h2>
      <p>
        Basta internet sul dispositivo (cassa, monitor…): non serve una rete dedicata in tutta la location.
        Se manca copertura, offriamo WiFi extra fino a circa 1 km con modem 5G.
      </p>
      <div class="listino-pub__price">
        A consumo
        <span>Paghi in base all’utilizzo. Setup incluso da 4+ giorni consecutivi.</span>
      </div>
    </article>
  </div>

  <section class="listino-pub__section listino-pub__section--vantaggi">
    <div class="listino-pub__section-head">
      <span class="listino-pub__eyebrow">Perché sceglierle</span>
      <h2 class="listino-pub__section-title">I vantaggi</h2>
    </div>
    <div class="listino-pc">
      <article class="listino-pc__card">
        <h3><i class="bx bx-map" aria-hidden="true"></i> Local</h3>
        <div class="listino-pc__label"><i class="bx bx-plus-circle"></i> Punti di forza</div>
        <ul class="listino-pc__list">
          @foreach($vantaggi['local'] as $item)
            <li>{{ $item }}</li>
          @endforeach
        </ul>
      </article>

      <article class="listino-pc__card listino-pc__card--cloud">
        <h3><i class="bx bx-cloud" aria-hidden="true"></i> Cloud</h3>
        <div class="listino-pc__label"><i class="bx bx-plus-circle"></i> Punti di forza</div>
        <ul class="listino-pc__list">
          @foreach($vantaggi['cloud'] as $item)
            <li>{{ $item }}</li>
          @endforeach
        </ul>
      </article>
    </div>
  </section>

  <section class="listino-pub__section listino-pub__section--cmp">
    <div class="listino-pub__section-head">
      <span class="listino-pub__eyebrow">Dettaglio</span>
      <h2 class="listino-pub__section-title">Confronto funzionalità</h2>
    </div>
    <div class="listino-cmp">
      <table>
        <thead>
          <tr>
            <th>Funzionalità</th>
            <th>
              <span class="listino-mark"><i class="bx bx-map" aria-hidden="true"></i> Local</span>
            </th>
            <th>
              <span class="listino-mark"><i class="bx bx-cloud" aria-hidden="true"></i> Cloud</span>
            </th>
          </tr>
        </thead>
        <tbody>
          @foreach($confronto as $blocco)
            <tr>
              <td colspan="3" class="listino-cmp__group">{{ $blocco['gruppo'] }}</td>
            </tr>
            @foreach($blocco['righe'] as $riga)
              <tr>
                <td class="listino-cmp__feature">{{ $riga['label'] }}</td>
                <td data-label="Local">
                  @if($riga['local'] === true)
                    <span class="listino-cmp__yes"><i class="bx bx-check"></i> Sì</span>
                  @elseif($riga['local'] === false)
                    <span class="listino-cmp__no"><i class="bx bx-x"></i> No</span>
                  @else
                    <span class="listino-cmp__text">{{ $riga['local'] }}</span>
                  @endif
                </td>
                <td data-label="Cloud">
                  @if($riga['cloud'] === true)
                    <span class="listino-cmp__yes"><i class="bx bx-check"></i> Sì</span>
                  @elseif($riga['cloud'] === false)
                    <span class="listino-cmp__no"><i class="bx bx-x"></i> No</span>
                  @else
                    <span class="listino-cmp__text">{{ $riga['cloud'] }}</span>
                  @endif
                </td>
              </tr>
            @endforeach
          @endforeach
        </tbody>
      </table>
    </div>
  </section>

  <section class="listino-pub__section listino-pub__section--prezzi">
    <div class="listino-prezzi">
      <div class="listino-prezzi__head">
        <span class="listino-pub__eyebrow" style="color: var(--brand-accent);">
          <i class="bx bx-cloud" aria-hidden="true"></i> Cloud
        </span>
        <h2 class="listino-pub__section-title">Listino a consumo</h2>
        <p>Voci attive per la versione Cloud. Per Local chiedi un preventivo personalizzato.</p>
      </div>
      <table>
        <thead>
          <tr>
            <th>Categoria</th>
            <th>Voce</th>
            <th>Tipo</th>
            <th class="text-end">Prezzo</th>
          </tr>
        </thead>
        <tbody>
          @forelse($listinoGrouped as $categoria => $voci)
            @foreach($voci as $voce)
              <tr>
                <td class="listino-prezzi__cat">{{ $categoria ? ucfirst($categoria) : '—' }}</td>
                <td>
                  <span class="listino-prezzi__label">{{ $voce->label }}</span>
                  @if($voce->descrizione)
                    <span class="listino-prezzi__desc">{{ $voce->descrizione }}</span>
                  @endif
                </td>
                <td><span class="listino-prezzi__tipo">{{ $voce->tipo_prezzo ? ucfirst(str_replace('-', ' ', $voce->tipo_prezzo)) : '—' }}</span></td>
                <td class="listino-prezzi__price">&euro; {{ number_format((float) $voce->prezzo, 2, ',', '.') }}</td>
              </tr>
            @endforeach
          @empty
            <tr>
              <td colspan="4" class="text-center text-muted py-4">Listino in aggiornamento.</td>
            </tr>
          @endforelse
        </tbody>
      </table>
    </div>
  </section>

  <div class="listino-pub__note">
    <h2 class="listino-pub__note-title">Cose da sapere</h2>
    <ul class="listino-pub__note-list">
      <li>
        <span class="listino-pub__note-kicker listino-pub__note-kicker--local">
          <i class="bx bx-map" aria-hidden="true"></i> Local
        </span>
        <p>
          Il preventivo comprende noleggio software, hardware e posa della rete (se non presente).
          Il PC con il software resta fisicamente nella location: non si gestisce un server,
          si ha l’impianto in loco.
        </p>
      </li>
      <li>
        <span class="listino-pub__note-kicker listino-pub__note-kicker--cloud">
          <i class="bx bx-cloud" aria-hidden="true"></i> Cloud
        </span>
        <p>
          Non serve una rete locale in tutta la location: basta internet sul dispositivo
          (cassa, monitor…). Se manca copertura, offriamo WiFi extra fino a circa 1&nbsp;km con modem 5G.
        </p>
      </li>
      <li>
        <span class="listino-pub__note-kicker listino-pub__note-kicker--both">
          <i class="bx bx-check-double" aria-hidden="true"></i> Entrambe
        </span>
        <p>
          Se il noleggio è di almeno 4 giorni consecutivi, la configurazione e il setup sono inclusi.
        </p>
      </li>
    </ul>
  </div>

  <p class="listino-pub__credits">
    <span class="listino-pub__credits-label">Made by</span>
    <a href="https://www.elephantech.it" target="_blank" rel="noopener noreferrer">
      <img src="{{ asset('assets/img/logo_elephantech_icon.png') }}" alt="" width="20" height="20">
      Elephantech
    </a>
    <a href="https://www.segresta.it" target="_blank" rel="noopener noreferrer">
      <img src="{{ asset('assets/img/logo_segresta_icon.png') }}" alt="" width="20" height="20">
      Segresta
    </a>
  </p>
</div>
@endsection
