// Sculty Dog — Pagine Contatti e Spedizione

function Contatti({ onNavigate }) {
  return (
    <div style={{ padding: 'clamp(40px, 6vw, 60px) clamp(20px, 4vw, 40px)', maxWidth: 880, margin: '0 auto' }}>
      <div style={{ textAlign: 'center', marginBottom: 'clamp(40px, 6vw, 56px)' }}>
        <div className="sd-eyebrow" style={{ marginBottom: 16 }}>CONTATTI</div>
        <h1 style={{ margin: 0, fontFamily: 'var(--sd-font-serif)', fontSize: 'clamp(44px, 8vw, 88px)', fontWeight: 400, lineHeight: 1, letterSpacing: '-0.025em' }}>
          Parliamone insieme.
        </h1>
        <p style={{ fontSize: 17, color: 'var(--sd-ink-2)', maxWidth: 520, lineHeight: 1.7, margin: '24px auto 0' }}>
          Per qualsiasi domanda sul tuo ordine, sulla lavorazione o sul tuo
          cane, siamo a portata di messaggio.
        </p>
      </div>

      <div className="sd-pair-grid">

        {/* Instagram card */}
        <a href="https://www.instagram.com/sculty_dog/"
           target="_blank" rel="noopener noreferrer"
           onClick={(e) => { e.preventDefault(); window.open('https://www.instagram.com/sculty_dog/', '_blank', 'noopener,noreferrer'); }}
           style={contactCard}>
          <div style={contactIcon}>
            <svg width="28" height="28" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="1.8">
              <rect x="2" y="2" width="20" height="20" rx="5"/>
              <path d="M16 11.37A4 4 0 1112.63 8 4 4 0 0116 11.37z"/>
              <line x1="17.5" y1="6.5" x2="17.51" y2="6.5"/>
            </svg>
          </div>
          <div className="sd-eyebrow" style={{ marginTop: 24 }}>ASSISTENZA RAPIDA</div>
          <div style={{ fontFamily: 'var(--sd-font-serif)', fontSize: 32, marginTop: 6 }}>Instagram</div>
          <div style={{ fontSize: 15, color: 'var(--sd-ink-2)', lineHeight: 1.6, marginTop: 12 }}>
            Scrivici un DM su <strong>@sculty_dog</strong>. Rispondiamo
            entro qualche ora dal lunedì al sabato.
          </div>
          <div style={contactCta}>Apri il profilo →</div>
        </a>

        {/* Email card */}
        <a href="mailto:hello@scultydog.it"
           style={contactCard}>
          <div style={contactIcon}>
            <svg width="28" height="28" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="1.8">
              <path d="M4 4h16c1.1 0 2 .9 2 2v12c0 1.1-.9 2-2 2H4c-1.1 0-2-.9-2-2V6c0-1.1.9-2 2-2z"/>
              <polyline points="22,6 12,13 2,6"/>
            </svg>
          </div>
          <div className="sd-eyebrow" style={{ marginTop: 24 }}>RICHIESTE DETTAGLIATE</div>
          <div style={{ fontFamily: 'var(--sd-font-serif)', fontSize: 32, marginTop: 6 }}>Email</div>
          <div style={{ fontSize: 15, color: 'var(--sd-ink-2)', lineHeight: 1.6, marginTop: 12 }}>
            Scrivi a <strong>hello@scultydog.it</strong> per ordini, foto del
            tuo cane o richieste su misura. Risposta entro 24h lavorative.
          </div>
          <div style={contactCta}>Scrivi una mail →</div>
        </a>
      </div>

      {/* Orari + sede */}
      <div className="sd-pair-grid" style={{ marginTop: 'clamp(40px, 5vw, 56px)', gap: 'clamp(20px, 4vw, 32px)', padding: 'clamp(24px, 4vw, 32px) clamp(20px, 4vw, 36px)', background: 'var(--sd-paper)', borderRadius: 'var(--sd-r-lg)', boxShadow: 'var(--sd-shadow-card)' }}>
        <div>
          <div className="sd-eyebrow" style={{ marginBottom: 10 }}>ORARI ASSISTENZA</div>
          <div style={{ fontSize: 15, color: 'var(--sd-ink-2)', lineHeight: 1.7 }}>
            Lunedì – Venerdì · 9:00 – 19:00<br/>
            Sabato · 10:00 – 14:00<br/>
            Domenica · chiuso
          </div>
        </div>
        <div>
          <div className="sd-eyebrow" style={{ marginBottom: 10 }}>ATELIER</div>
          <div style={{ fontSize: 15, color: 'var(--sd-ink-2)', lineHeight: 1.7 }}>
            Via Placeholder 12<br/>
            20100 Milano (MI)<br/>
            <span style={{ color: 'var(--sd-ink-3)' }}>Visite solo su appuntamento</span>
          </div>
        </div>
      </div>
    </div>);
}

const contactCard = {
  display: 'block',
  padding: '36px 36px 32px',
  borderRadius: 'var(--sd-r-lg)',
  background: 'var(--sd-paper)',
  boxShadow: 'var(--sd-shadow-card)',
  textDecoration: 'none',
  color: 'var(--sd-ink)',
  cursor: 'pointer',
  transition: 'transform 0.2s, box-shadow 0.2s'
};
const contactIcon = {
  width: 56, height: 56, borderRadius: '50%',
  background: 'var(--sd-bg)',
  display: 'flex', alignItems: 'center', justifyContent: 'center',
  color: 'var(--sd-ink)'
};
const contactCta = {
  marginTop: 20, fontSize: 14, fontWeight: 600,
  color: 'var(--sd-ink)', display: 'inline-block'
};


function Spedizione({ onNavigate }) {
  return (
    <div style={{ padding: 'clamp(40px, 6vw, 60px) clamp(20px, 4vw, 40px)', maxWidth: 920, margin: '0 auto' }}>
      <div style={{ textAlign: 'center', marginBottom: 'clamp(40px, 6vw, 56px)' }}>
        <div className="sd-eyebrow" style={{ marginBottom: 16 }}>SPEDIZIONE</div>
        <h1 style={{ margin: 0, fontFamily: 'var(--sd-font-serif)', fontSize: 'clamp(40px, 7vw, 80px)', fontWeight: 400, lineHeight: 1, letterSpacing: '-0.025em' }}>
          Dal nostro atelier alla tua mensola.
        </h1>
        <p style={{ fontSize: 17, color: 'var(--sd-ink-2)', maxWidth: 600, lineHeight: 1.7, margin: '24px auto 0' }}>
          Quando il tuo Sculty Dog è pronto, lo spediamo imballato a mano con
          consegna tracciata in tutta Italia.
        </p>
      </div>

      <div className="sd-trio-grid" style={{ marginBottom: 'clamp(36px, 5vw, 48px)' }}>
        {[
          ['€10', 'Spedizione unica', 'Indipendentemente da quante miniature ordini'],
          ['24/48h', 'Tempi di consegna', "Dalla spedizione, in tutta Italia"],
          ['Bartolini', 'Corriere', 'Consegna tracciata e assicurata']
        ].map(([big, t, d], i) => (
          <div key={i} style={{ background: 'var(--sd-paper)', borderRadius: 'var(--sd-r-md)', padding: 24, boxShadow: 'var(--sd-shadow-card)' }}>
            <div style={{ fontFamily: 'var(--sd-font-display)', fontSize: 40, lineHeight: 1, color: 'var(--sd-ink)' }}>{big}</div>
            <div style={{ fontSize: 14, fontWeight: 600, marginTop: 10 }}>{t}</div>
            <div style={{ fontSize: 13, color: 'var(--sd-ink-2)', marginTop: 4, lineHeight: 1.5 }}>{d}</div>
          </div>
        ))}
      </div>

      {/* Sezioni info */}
      <div style={{ display: 'flex', flexDirection: 'column', gap: 28 }}>

        <BlocoInfo titolo="Quando spediamo">
          La produzione richiede circa <strong>15 giorni lavorativi</strong> dal
          momento in cui approvi l'anteprima 3D. Quando la miniatura è dipinta
          e fotografata, parte la spedizione: ricevi un'email con il numero di
          tracking e il link per seguirla in tempo reale.
        </BlocoInfo>

        <BlocoInfo titolo="Dove spediamo">
          Spediamo in tutta Italia (isole comprese) con corriere Bartolini.
          Per spedizioni internazionali scrivici a{' '}
          <a href="mailto:hello@scultydog.it" style={{ color: 'var(--sd-ink)', textDecoration: 'underline' }}>hello@scultydog.it</a>:
          valutiamo caso per caso il costo del corriere.
        </BlocoInfo>

        <BlocoInfo titolo="Come imballiamo">
          Ogni miniatura viaggia in una scatola dedicata, avvolta in tessuto
          morbido e protetta da inserti su misura. La ciotolina con il nome è
          imballata separatamente. Apertura unboxing-ready.
        </BlocoInfo>

        <BlocoInfo titolo="Se qualcosa va storto">
          Se il pacco arriva danneggiato, scrivici entro 48h con foto
          dell'imballo e della miniatura. Sostituiamo il pezzo senza costi
          aggiuntivi: è un nostro impegno.
        </BlocoInfo>
      </div>

      <div style={{ marginTop: 'clamp(36px, 5vw, 48px)', padding: 'clamp(20px, 4vw, 28px) clamp(22px, 4vw, 32px)', background: 'var(--sd-ink)', color: 'var(--sd-paper)', borderRadius: 'var(--sd-r-lg)', display: 'flex', justifyContent: 'space-between', alignItems: 'center', flexWrap: 'wrap', gap: 16 }}>
        <div>
          <div style={{ fontFamily: 'var(--sd-font-serif)', fontSize: 24 }}>Hai dubbi sulla tua spedizione?</div>
          <div style={{ fontSize: 14, opacity: 0.78, marginTop: 4 }}>Scrivici e ti rispondiamo in giornata.</div>
        </div>
        <button onClick={() => onNavigate('contatti')}
          style={{ ...sdPrimaryBtn, background: 'var(--sd-paper)', color: 'var(--sd-ink)', boxShadow: 'none' }}>
          Vai ai contatti →
        </button>
      </div>
    </div>);
}

function BlocoInfo({ titolo, children }) {
  return (
    <div className="sd-info-block">
      <div style={{ fontFamily: 'var(--sd-font-serif)', fontSize: 24, fontWeight: 400, lineHeight: 1.2 }}>{titolo}</div>
      <div style={{ fontSize: 16, color: 'var(--sd-ink-2)', lineHeight: 1.7 }}>{children}</div>
    </div>);
}

Object.assign(window, { Contatti, Spedizione });