doctype html
html(lang="it")
  head
    meta(charset="UTF-8")
    meta(name="viewport" content="width=device-width, initial-scale=1.0")
    style(type="text/css").
      * {
        margin: 0;
        padding: 0;
        box-sizing: border-box;
      }
      
      body {
        font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, 'Helvetica Neue', Arial, sans-serif;
        background-color: #f5f5f5;
        padding: 20px;
        line-height: 1.6;
      }
      
      .header-logo {
        width: 120px;
        height: auto;
        margin-bottom: 16px;
        display: block;
        margin-left: auto;
        margin-right: auto;
      }
      
      .email-container {
        max-width: 600px;
        margin: 0 auto;
        background: white;
        border-radius: 12px;
        box-shadow: 0 2px 12px rgba(0, 0, 0, 0.1);
        overflow: hidden;
      }
      
      .email-header {
        background: linear-gradient(135deg, #7cb342 0%, #558b2f 100%);
        color: white;
        padding: 40px 24px;
        text-align: center;
      }
      
      .email-header h1 {
        margin: 0 0 8px 0;
        font-size: 26px;
        font-weight: 600;
        line-height: 1.3;
      }
      
      .email-header .subtitle {
        margin: 8px 0 0 0;
        font-size: 17px;
        opacity: 0.95;
        font-style: italic;
      }
      
      .email-body {
        padding: 32px 24px;
      }
      
      .intro-text {
        font-size: 16px;
        color: #333;
        margin-bottom: 20px;
        text-align: center;
        line-height: 1.7;
      }
      
      .congrats-card {
        background: linear-gradient(135deg, #e8f5e9 0%, #f1f8f4 100%);
        border: 2px solid #7cb342;
        border-radius: 12px;
        padding: 24px;
        margin: 20px 0;
        text-align: center;
      }
      
      .congrats-card .congrats-icon {
        font-size: 48px;
        margin-bottom: 12px;
      }
      
      .congrats-card h3 {
        font-size: 22px;
        color: #558b2f;
        margin-bottom: 12px;
        font-weight: 700;
      }
      
      .congrats-card .territory-name {
        font-size: 20px;
        color: #7cb342;
        font-weight: 600;
        margin-top: 8px;
      }
      
      .info-section {
        background: #ffffff;
        border-radius: 8px;
        padding: 20px;
        margin: 24px 0;
      }
      
      .info-section h3 {
        font-size: 18px;
        color: #1a1a1a;
        margin-bottom: 16px;
        font-weight: 600;
        display: flex;
        align-items: center;
        gap: 8px;
      }
      
      .info-section p {
        font-size: 15px;
        color: #555;
        line-height: 1.7;
        margin-bottom: 12px;
      }
      
      .info-section ul {
        margin: 12px 0;
        padding-left: 24px;
      }
      
      .info-section li {
        font-size: 15px;
        color: #555;
        line-height: 1.7;
        margin-bottom: 8px;
      }
      
      .highlight-box {
        background: linear-gradient(135deg, #fff8dc 0%, #fef9f3 100%);
        border-left: 4px solid #f0ad4e;
        border-radius: 8px;
        padding: 20px;
        margin: 20px 0;
      }
      
      .highlight-box h4 {
        font-size: 17px;
        color: #f0ad4e;
        margin-bottom: 12px;
        font-weight: 600;
      }
      
      .highlight-box p {
        font-size: 15px;
        color: #555;
        line-height: 1.7;
        margin-bottom: 8px;
      }
      
      .example-box {
        background: #e3f2fd;
        border-radius: 8px;
        padding: 20px;
        margin: 20px 0;
      }
      
      .example-box h4 {
        font-size: 16px;
        color: #1976d2;
        margin-bottom: 12px;
        font-weight: 600;
      }
      
      .example-box .transaction {
        background: white;
        border-radius: 6px;
        padding: 12px;
        margin: 8px 0;
        font-size: 14px;
      }
      
      .example-box .benefit {
        background: #c8e6c9;
        border-radius: 6px;
        padding: 12px;
        margin-top: 12px;
        font-size: 14px;
        color: #2e7d32;
      }
      
      .steps-box {
        background: #f8f9fa;
        border-radius: 8px;
        padding: 20px;
        margin: 20px 0;
      }
      
      .steps-box h4 {
        font-size: 17px;
        color: #1a1a1a;
        margin-bottom: 16px;
        font-weight: 600;
        text-align: center;
      }
      
      .step-item {
        display: flex;
        align-items: flex-start;
        margin-bottom: 16px;
        padding: 12px;
        background: white;
        border-radius: 6px;
      }
      
      .step-number {
        font-size: 24px;
        font-weight: 700;
        color: #7cb342;
        min-width: 40px;
        margin-right: 12px;
      }
      
      .step-content h5 {
        font-size: 16px;
        color: #1a1a1a;
        margin-bottom: 6px;
        font-weight: 600;
      }
      
      .step-content p {
        font-size: 14px;
        color: #555;
        line-height: 1.6;
        margin: 0;
      }
      
      .cta-section {
        text-align: center;
        margin: 32px 0;
        padding: 24px 0;
        border-top: 2px solid #e0e0e0;
        border-bottom: 2px solid #e0e0e0;
      }
      
      .cta-title {
        font-size: 18px;
        font-weight: 600;
        color: #1a1a1a;
        margin-bottom: 20px;
      }
      
      .cta-button {
        display: inline-block;
        padding: 18px 56px;
        font-size: 20px;
        font-weight: 700;
        color: white;
        background: linear-gradient(135deg, #7cb342 0%, #558b2f 100%);
        border-radius: 50px;
        text-decoration: none;
        box-shadow: 0 6px 20px rgba(124, 179, 66, 0.4);
        transition: all 0.3s ease;
      }
      
      .button-icon {
        font-size: 20px;
        margin-right: 10px;
        vertical-align: middle;
      }
      
      .community-box {
        background: linear-gradient(135deg, #e8f5e9 0%, #f1f8f4 100%);
        border-radius: 8px;
        padding: 20px;
        margin: 20px 0;
        text-align: center;
      }
      
      .community-box h4 {
        font-size: 17px;
        color: #558b2f;
        margin-bottom: 12px;
        font-weight: 600;
      }
      
      .community-box p {
        font-size: 15px;
        color: #555;
        line-height: 1.7;
        margin-bottom: 12px;
      }
      
      .community-box a {
        color: #2196f3;
        text-decoration: none;
        font-weight: 600;
      }
      
      .email-footer {
        padding: 20px;
        text-align: center;
        background: #f8f9fa;
        color: #777;
        font-size: 13px;
      }
      
      .email-footer p {
        margin: 4px 0;
      }
      
      .divider {
        height: 1px;
        background: linear-gradient(to right, transparent, #e0e0e0, transparent);
        margin: 20px 0;
      }
      
      @media only screen and (max-width: 600px) {
        body {
          padding: 10px;
        }
        
        .email-header {
          padding: 24px 16px;
        }
        
        .email-header h1 {
          font-size: 22px;
        }
        
        .email-body {
          padding: 20px 16px;
        }
        
        .congrats-card .congrats-icon {
          font-size: 40px;
        }
        
        .congrats-card h3 {
          font-size: 20px;
        }
        
        .cta-button {
          padding: 16px 40px;
          font-size: 18px;
          width: 100%;
          max-width: 300px;
        }
        
        .step-item {
          flex-direction: column;
        }
        
        .step-number {
          margin-bottom: 8px;
        }
      }

  body
    .email-container
      //- Header
      .email-header
        img.header-logo(src=baseurl+'/images/logo.png' alt=nomeapp)
        h1 🎉 Benvenuto nel #{nomeTerritorio}!
        p.subtitle Sei stato abilitato con successo

      //- Body
      .email-body
        //- Intro
        .intro-text
          | Ciao <strong>#{usernameMembro}</strong>,<br>
          | complimenti! Sei stato abilitato #{nomeTerritorio} da #{usernameInvitante}.

          if linkProfiloAdmin
            .divider(style="margin: 16px 0;")
            p(style="text-align: center; margin: 16px 0;")
              a.profile-button(href=linkProfiloAdmin target="_blank" style="display: inline-block; padding: 10px 24px; font-size: 15px; font-weight: 600; color: #7cb342; background: white; border: 2px solid #7cb342; border-radius: 20px; text-decoration: none; transition: all 0.3s ease;")
                span(style="margin-right: 6px;") 👤
                | Profilo #{usernameInvitante}          

        //- Congratulazioni
        .congrats-card
          .congrats-icon ✅
          h3 Abilitazione Completata
          p(style="font-size: 15px; color: #555; margin-top: 8px;")
            | Ora puoi utilizzare i #{symbol} per i tuoi scambi nella comunità
          .territory-name 📍 #{nomeTerritorio}

        //- Info comunità
        .community-box
          h4 💬 Unisciti alla Comunità Territoriale
          p
            | Entra nel gruppo Telegram di <strong>#{nomeTerritorio}</strong> per interagire con i partecipanti, rimanere aggiornato su eventi, mercatini e opportunità di scambio nella tua zona, e per poter inserire, anche tu, annunci di offro/cerco.

          if linkTelegramTerritorio
            a.telegram-button(href=linkTelegramTerritorio target="_blank" style="display: inline-block; margin-top: 16px; padding: 14px 32px; font-size: 17px; font-weight: 600; color: white; background: linear-gradient(135deg, #0088cc 0%, #006699 100%); border-radius: 25px; text-decoration: none; box-shadow: 0 4px 12px rgba(0, 136, 204, 0.3); transition: all 0.3s ease;")
              span(style="font-size: 20px; margin-right: 8px; vertical-align: middle;") ✈️
              | Unisciti al gruppo Telegram

        //- Cos'è RIS
        .info-section
          h3 
            span 💰
            | Cosa sono i RIS?
          p
            | <strong>RIS</strong> (Rete Italiana Scambio) è un sistema di <strong>credito comunitario</strong> basato sulla fiducia reciproca. Non sono soldi tradizionali, ma un'unità di misura che rappresenta il valore degli scambi all'interno della comunità RISO.
          p
            | <strong>Parità con l'Euro:</strong> 1 RIS = 1 Euro (solo come riferimento di valore, non come convertibilità)

        //- Come funziona la fiducia
        .highlight-box
          h4 🤝 Come Funziona la "Fiducia Concessa"
          p
            | <strong>Parti da 0 RIS</strong> - Non devi avere un "saldo positivo" per iniziare a scambiare!
          p
            | <strong>Quando ricevi</strong> un bene o servizio pagando in RIS → il tuo saldo <strong>diventa positivo</strong>
          p
            | <strong>Quando offri</strong> un bene o servizio ricevendo RIS → il tuo saldo <strong>diventa negativo</strong>
          p(style="margin-top: 12px; padding-top: 12px; border-top: 1px solid #f0ad4e;")
            | 💡 <strong>Il saldo negativo non è un debito!</strong> È la fiducia che la comunità ti concede. Significa che hai ricevuto prima di aver dato, e la comunità si fida che restituirai nel tempo.

        //- Esempio pratico
        .example-box
          h4 📖 Esempio Pratico
          .transaction
            | <strong>Situazione:</strong> Sei un grafico e vuoi comprare 100€ di verdure da un produttore locale
          .transaction
            | <strong>Transazione mista:</strong>
            | <br>• Paghi <strong>80€ in Euro</strong>
            | <br>• Paghi <strong>20 RIS</strong> (20% in RIS)
            | <br><br>🔻 Il tuo saldo RIS passa da 0 a <strong>-20 RIS</strong>
          .benefit
            | <strong>✓ Beneficio:</strong> Hai ridotto del 20% l'uso degli Euro, sostenendo il produttore locale e rafforzando la comunità! Puoi iniziare con percentuali basse (5-10%) e aumentare man mano che acquisisci fiducia.

        //- Come riequilibrare
        .info-section
          h3 
            span ⚖️
            | Come Riequilibrare il Saldo
          p
            | Per riportare il tuo saldo verso lo zero (o in positivo), puoi:
          ul
            li <strong>Offrire beni o servizi</strong> ricevendo RIS in cambio
            li <strong>Vendere prodotti</strong> accettando pagamenti parziali o totali in RIS
            li <strong>Mettere annunci</strong> sulla piattaforma specificando che accetti RIS
            li <strong>Partecipare ai mercatini</strong> locali della comunità RISO

        //- Primi passi
        .steps-box
          h4 🚀 I Tuoi Primi Passi
          .step-item
            .step-number 1
            .step-content
              h5 Esplora la Piattaforma
              p Familiarizza con gli annunci, i membri e le funzionalità del #{nomeTerritorio}
          .step-item
            .step-number 2
            .step-content
              h5 Crea il Tuo Primo Annuncio
              p Pubblica cosa offri o cosa cerchi, specificando se accetti pagamenti in RIS
          .step-item
            .step-number 3
            .step-content
              h5 Inizia con Piccole Transazioni
              p Comincia con percentuali basse di RIS (5-10%) per prendere confidenza e vedi cosa succede. Più siamo aperti noi e più l'Universo ci aiuta e sostiene e ci dona quello di cui abbiamo bisogno.
          .step-item
            .step-number 4
            .step-content
              h5 Partecipa alla Comunità
              p Unisciti agli incontri locali e ai mercatini per conoscere altri membri. Se non ci sono membri che propongono incontri, puoi proporti anche tu!

        //- CTA
        .cta-section
          .cta-title Inizia Subito a Usare i RIS!
          a.cta-button(href=strlinksito target="_blank") 
            span.button-icon 🌾
            | Vai alla Piattaforma

        //- Supporto
        .info-section
          h3 
            span ❓
            | Hai Domande?
          p
            | Se hai dubbi sul funzionamento dei RIS o sulla piattaforma, non esitare a:
          ul
            li Contattare il facilitatore del tuo territorio
            li Chiedere nel gruppo Telegram locale
            li Partecipare agli incontri di comunità

      //- Footer
      .email-footer
        .divider
        p Benvenuto nella Rete Italiana Scambio orizzontale - #{nomeTerritorio}
        p(style="margin-top: 12px; font-size: 12px;")
          | #{new Date().getFullYear()} #{nomeapp}