// Sculty Dog — Configuratore 3-step e Checkout

function Configuratore({ onNavigate, onAddOrder }) {
  const [step, setStep] = React.useState(1);
  const [cliente, setCliente] = React.useState({
    nome: '', cognome: '', email: '', telefono: '',
    via: '', civico: '', cap: '', citta: '', provincia: '',
    spedizione: 'standard'
  });
  const [cani, setCani] = React.useState([{ id: 1, nome: '', pelo: '', foto: [], note: '', bowl: 'blue' }]);
  const [pagamento, setPagamento] = React.useState({ metodo: '' });

  const totale = cani.length === 1 ? 70 : cani.length === 2 ? 130 : 70 * cani.length - 10 * (cani.length - 1);
  const spedCost = 10;

  const addCane = () => {
    if (cani.length < 5) setCani([...cani, { id: Date.now(), nome: '', pelo: '', foto: [], note: '', bowl: 'blue' }]);
  };
  const removeCane = (id) => setCani(cani.filter((c) => c.id !== id));
  const updateCane = (id, field, value) => setCani(cani.map((c) => c.id === id ? { ...c, [field]: value } : c));

  const handleSubmit = () => {
    onAddOrder({ cliente, cani, pagamento, totale: totale + spedCost });
    onNavigate('conferma');
  };

  return (
    <div style={{ padding: 'clamp(20px, 4vw, 40px)', maxWidth: 1280, margin: '0 auto' }}>
      <div style={{ textAlign: 'center', marginBottom: 'clamp(28px, 5vw, 48px)' }}>
        <div className="sd-eyebrow" style={{ marginBottom: 14 }}>CREA LA TUA MINIATURA</div>
        <h1 style={{ margin: 0, fontFamily: 'var(--sd-font-serif)', fontSize: 'clamp(36px, 5.6vw, 56px)', fontWeight: 400, letterSpacing: '-0.02em', lineHeight: 1.05 }}>
          Tre passi, e partiamo.
        </h1>
      </div>

      <Stepper step={step} labels={['Il tuo cane', 'Dati cliente', 'Pagamento']} />

      <div className="sd-config-split">
        <div className="sd-config-form-card">
          {step === 1 && <StepCani cani={cani} updateCane={updateCane} addCane={addCane} removeCane={removeCane} onNext={() => setStep(2)} />}
          {step === 2 && <StepCliente cliente={cliente} setCliente={setCliente} onBack={() => setStep(1)} onNext={() => setStep(3)} />}
          {step === 3 && <StepPagamento pagamento={pagamento} setPagamento={setPagamento} totale={totale + spedCost} onBack={() => setStep(2)} onSubmit={handleSubmit} />}
        </div>

        <RiepilogoConfig cani={cani} totale={totale} spedCost={spedCost} cliente={cliente} />
      </div>
    </div>);

}

function Stepper({ step, labels }) {
  return (
    <div className="sd-stepper">
      {labels.map((label, i) => {
        const n = i + 1;
        const active = n === step;
        const done = n < step;
        return (
          <React.Fragment key={label}>
            <div style={{ display: 'flex', alignItems: 'center', gap: 12 }}>
              <div style={{
                width: 36, height: 36, borderRadius: '50%',
                background: done ? 'var(--sd-terracotta)' : active ? 'var(--sd-terracotta)' : 'transparent',
                border: active || done ? 'none' : '2px solid rgba(26,23,21,0.15)',
                color: done || active ? 'var(--sd-paper)' : 'var(--sd-ink)',
                display: 'flex', alignItems: 'center', justifyContent: 'center',
                fontFamily: 'var(--sd-font-display)', fontSize: 14
              }}>
                {done ? '✓' : n}
              </div>
              <div className="sd-stepper-label" style={{ fontSize: 14, fontWeight: active ? 700 : 500, color: active ? 'var(--sd-ink)' : 'var(--sd-ink-3)' }}>{label}</div>
            </div>
            {n < labels.length && <div className="sd-stepper-bar" />}
          </React.Fragment>);

      })}
    </div>);

}

// ───── STEP 2: CLIENTE ─────
function StepCliente({ cliente, setCliente, onBack, onNext }) {
  const set = (f, v) => setCliente({ ...cliente, [f]: v });
  const valid = cliente.nome && cliente.cognome && cliente.email && cliente.telefono && cliente.via && cliente.cap && cliente.citta && cliente.provincia;
  return (
    <div>
      <h2 style={secTitle}>Chi sei e dove spediamo</h2>
      <p style={secDesc}>I dati di contatto e l'indirizzo di spedizione.</p>

      <div className="sd-config-grid2">
        <Field label="Nome" value={cliente.nome} onChange={(v) => set('nome', v)} />
        <Field label="Cognome" value={cliente.cognome} onChange={(v) => set('cognome', v)} />
      </div>
      <div className="sd-config-grid2">
        <Field label="Email" value={cliente.email} onChange={(v) => set('email', v)} type="email" />
        <Field label="Telefono" value={cliente.telefono} onChange={(v) => set('telefono', v)} />
      </div>

      <div style={{ marginTop: 24, marginBottom: 12, fontSize: 13, fontWeight: 600, color: 'var(--sd-ink)' }}>Indirizzo di spedizione</div>
      <div className="sd-config-via">
        <Field label="Via" value={cliente.via} onChange={(v) => set('via', v)} />
        <Field label="Civico" value={cliente.civico} onChange={(v) => set('civico', v)} />
      </div>
      <div className="sd-config-cap">
        <Field label="CAP" value={cliente.cap} onChange={(v) => set('cap', v)} />
        <Field label="Città" value={cliente.citta} onChange={(v) => set('citta', v)} />
        <Field label="Prov." value={cliente.provincia} onChange={(v) => set('provincia', v)} />
      </div>

      <div style={{ marginTop: 28, marginBottom: 12, fontSize: 13, fontWeight: 600 }}>Spedizione</div>
      <div style={{
        display: 'flex', alignItems: 'center', justifyContent: 'space-between',
        padding: '16px 18px', borderRadius: 'var(--sd-r-md)',
        background: 'var(--sd-bg-soft)', border: '1px solid rgba(26,23,21,0.1)'
      }}>
        <div>
          <div style={{ fontSize: 14, fontWeight: 600 }}>Consegna in 24/48h ore con Bartolini</div>
          <div style={{ fontSize: 12, color: 'var(--sd-ink-2)', marginTop: 2 }}>Consegna in 24/48 ore dalla spedizione</div>
        </div>
        <div style={{ fontFamily: 'var(--sd-font-display)', fontSize: 22 }}>€10</div>
      </div>

      <div style={{ display: 'flex', justifyContent: 'space-between', marginTop: 32 }}>
        <button onClick={onBack} style={sdSecondaryBtn}>← Indietro</button>
        <button disabled={!valid} onClick={onNext} style={{ ...sdPrimaryBtn, opacity: valid ? 1 : 0.4 }}>
          Continua → pagamento
        </button>
      </div>
    </div>);

}

// ───── STEP 1: CANI ─────
function StepCani({ cani, updateCane, addCane, removeCane, onNext }) {
  const valid = cani.every((c) => c.nome && c.foto.length >= 1);
  const handleFiles = (id, files) => {
    const newFotos = Array.from(files).slice(0, 5).map((f) => ({ name: f.name, url: URL.createObjectURL(f) }));
    const cane = cani.find((c) => c.id === id);
    updateCane(id, 'foto', [...cane.foto, ...newFotos].slice(0, 5));
  };
  return (
    <div>
      <h2 style={secTitle}>Raccontaci del tuo cane</h2>
      <p style={secDesc}>Puoi aggiungere fino a 5 cani. Per ognuno carica almeno una foto di viso, corpo e coda.</p>

      <div style={{ display: 'flex', flexDirection: 'column', gap: 16 }}>
        {cani.map((c, i) =>
        <div key={c.id} style={{ border: '1px solid rgba(26,23,21,0.12)', borderRadius: 'var(--sd-r-md)', padding: 24 }}>
            <div style={{ display: 'flex', justifyContent: 'space-between', alignItems: 'center', marginBottom: 16 }}>
              <div style={{ fontFamily: 'var(--sd-font-serif)', fontSize: 24, fontStyle: 'italic' }}>
                {cani.length === 1 ? 'Il tuo cane' : `Il tuo ${['primo', 'secondo', 'terzo', 'quarto', 'quinto'][i]} cane`}
              </div>
              {cani.length > 1 &&
            <button onClick={() => removeCane(c.id)} style={{ ...sdGhostBtn, fontSize: 13, color: 'var(--sd-danger)' }}>Rimuovi</button>
            }
            </div>
            <Field label="Nome del cane" value={c.nome} onChange={(v) => updateCane(c.id, 'nome', v)} />

            <div style={{ marginTop: 16, marginBottom: 8, fontSize: 13, fontWeight: 600 }}>Colore della ciotolina</div>
            <div style={{ display: 'flex', gap: 10 }}>
              {['blue', 'pink', 'red', 'cream'].map((col) =>
            <button key={col} onClick={() => updateCane(c.id, 'bowl', col)} style={{
              width: 44, height: 44, borderRadius: '50%',
              background: bowlColor(col),
              border: c.bowl === col ? '3px solid var(--sd-ink)' : '3px solid transparent',
              boxShadow: c.bowl === col ? '0 0 0 2px var(--sd-paper), 0 0 0 4px var(--sd-ink)' : 'none',
              cursor: 'pointer', padding: 0, transition: 'all 0.2s'
            }} />
            )}
            </div>

            <div style={{ marginTop: 20, marginBottom: 8, fontSize: 13, fontWeight: 600 }}>Foto ({c.foto.length}/5) · viso, corpo, coda</div>
            <div style={{ display: 'grid', gridTemplateColumns: 'repeat(5,1fr)', gap: 8 }}>
              {c.foto.map((f, j) =>
            <div key={j} style={{ aspectRatio: '1/1', borderRadius: 'var(--sd-r-sm)', overflow: 'hidden', position: 'relative', background: 'var(--sd-bg)' }}>
                  <img src={f.url} style={{ width: '100%', height: '100%', objectFit: 'cover' }} />
                  <button onClick={() => updateCane(c.id, 'foto', c.foto.filter((_, k) => k !== j))} style={{
                position: 'absolute', top: 4, right: 4, width: 22, height: 22, borderRadius: '50%',
                background: 'rgba(26,23,21,0.8)', color: 'white', border: 'none', fontSize: 11, cursor: 'pointer'
              }}>×</button>
                </div>
            )}
              {c.foto.length < 5 &&
            <label style={{
              aspectRatio: '1/1', borderRadius: 'var(--sd-r-sm)',
              border: '1.5px dashed rgba(26,23,21,0.2)', display: 'flex',
              flexDirection: 'column', alignItems: 'center', justifyContent: 'center',
              cursor: 'pointer', fontSize: 11, color: 'var(--sd-ink-3)', background: 'var(--sd-bg-soft)'
            }}>
                  <div style={{ fontSize: 24, marginBottom: 4 }}>+</div>
                  Carica foto
                  <input type="file" multiple accept="image/*" onChange={(e) => handleFiles(c.id, e.target.files)} style={{ display: 'none' }} />
                </label>
            }
            </div>

            <div style={{ marginTop: 16 }}>
              <div style={{ fontSize: 13, fontWeight: 600, marginBottom: 6 }}>Note (opzionali)</div>
              <textarea value={c.note} onChange={(e) => updateCane(c.id, 'note', e.target.value)}
            style={{ width: '100%', minHeight: 80, padding: 12, borderRadius: 'var(--sd-r-sm)', border: '1px solid rgba(26,23,21,0.12)', fontSize: 14, fontFamily: 'inherit', resize: 'vertical', background: 'var(--sd-bg-soft)' }} />
            </div>
          </div>
        )}
      </div>

      {cani.length < 5 &&
      <button onClick={addCane} style={{ ...sdSecondaryBtn, marginTop: 16, width: '100%', border: '1px dashed rgba(26,23,21,0.2)', background: 'transparent' }}>
          + Aggiungi un altro cane (fino a 5)
        </button>
      }

      <div style={{ display: 'flex', justifyContent: 'flex-end', marginTop: 28 }}>
        <button disabled={!valid} onClick={onNext} style={{ ...sdPrimaryBtn, opacity: valid ? 1 : 0.4 }}>
          Continua → i tuoi dati
        </button>
      </div>
    </div>);

}

// ───── STEP 3: PAGAMENTO ─────
function StepPagamento({ pagamento, setPagamento, totale, onBack, onSubmit }) {
  const metodi = [
  { k: 'bonifico', label: 'Bonifico bancario', desc: 'Riceverai le coordinate via email' },
  { k: 'paypal', label: 'PayPal', desc: 'Accedi con il tuo account PayPal' }];

  return (
    <div>
      <h2 style={secTitle}>Come vuoi pagare?</h2>
      <p style={secDesc}>Dopo il pagamento riceverai le 3 anteprime entro 24 ore.</p>

      <div style={{ display: 'flex', flexDirection: 'column', gap: 10 }}>
        {metodi.map((m) =>
        <RadioCard key={m.k} checked={pagamento.metodo === m.k} onClick={() => setPagamento({ metodo: m.k })}
        title={m.label} desc={m.desc} full />
        )}
      </div>

      <div style={{ marginTop: 28, padding: 20, background: 'var(--sd-bg-soft)', borderRadius: 'var(--sd-r-md)', display: 'flex', gap: 14 }}>
        <div style={{ fontSize: 22 }}>✦</div>
        <div style={{ fontSize: 13, color: 'var(--sd-ink-2)', lineHeight: 1.6 }}>
          <strong style={{ color: 'var(--sd-ink)' }}>Nessun impegno prima dell'anteprima.</strong> Se nessuna delle 3 anteprime ti convince,
          possiamo rifarne altre 3 senza costi aggiuntivi, finché non troviamo quella giusta per il tuo cane.
        </div>
      </div>

      <div style={{ display: 'flex', justifyContent: 'space-between', marginTop: 28 }}>
        <button onClick={onBack} style={sdSecondaryBtn}>← Indietro</button>
        <button disabled={!pagamento.metodo} onClick={onSubmit} style={{ ...sdPrimaryBtn, opacity: pagamento.metodo ? 1 : 0.4 }}>
          Paga €{totale} e inizia →
        </button>
      </div>
    </div>);

}

// ───── RIEPILOGO (colonna destra) ─────
function RiepilogoConfig({ cani, totale, spedCost, cliente }) {
  return (
    <aside style={{ position: 'sticky', top: 100, height: 'fit-content', background: 'var(--sd-bg-deep)', color: 'var(--sd-paper-on-dark)', borderRadius: 'var(--sd-r-lg)', padding: 28 }}>
      <div className="sd-eyebrow" style={{ color: 'var(--sd-paper-on-dark-2)', marginBottom: 14 }}>RIEPILOGO ORDINE</div>
      <h3 style={{ fontFamily: 'var(--sd-font-serif)', fontSize: 28, margin: '0 0 20px', fontWeight: 400, color: 'var(--sd-paper)' }}>
        {cani.length} {cani.length === 1 ? 'miniatura' : 'miniature'}
      </h3>

      <div style={{ display: 'flex', flexDirection: 'column', gap: 12, marginBottom: 20 }}>
        {cani.map((c, i) =>
        <div key={c.id} style={{ display: 'flex', gap: 12, padding: 12, background: 'rgba(255,255,255,0.04)', borderRadius: 'var(--sd-r-sm)' }}>
            <div style={{ width: 48, height: 48, borderRadius: 'var(--sd-r-sm)', background: bowlColor(c.bowl), display: 'flex', alignItems: 'center', justifyContent: 'center', fontFamily: 'var(--sd-font-display)', fontSize: 11, color: c.bowl === 'cream' ? 'var(--sd-ink)' : '#fff' }}>
              {(c.nome || (cani.length === 1 ? 'CANE' : `#${i + 1}`)).slice(0, 6).toUpperCase()}
            </div>
            <div style={{ flex: 1, fontSize: 13 }}>
              <div style={{ color: 'var(--sd-paper)', fontWeight: 500 }}>{c.nome || (cani.length === 1 ? 'Il tuo cane' : `Cane #${i + 1}`)}</div>
              <div style={{ color: 'var(--sd-paper-on-dark-2)', fontSize: 11 }}>Miniatura 3D · ciotolina inclusa</div>
            </div>
            <div style={{ fontSize: 13, fontWeight: 600, color: 'var(--sd-paper)' }}>€70</div>
          </div>
        )}
      </div>

      <div style={{ borderTop: '1px solid rgba(255,255,255,0.1)', paddingTop: 16, display: 'flex', flexDirection: 'column', gap: 8, fontSize: 13 }}>
        <Row l="Subtotale" r={`€${cani.length * 70}`} />
        {cani.length > 1 && <Row l="Sconto multi" r={`–€${cani.length * 70 - totale}`} color="var(--sd-pink)" />}
        <Row l="Spedizione" r={`€${spedCost}`} />
      </div>

      <div style={{ marginTop: 14, paddingTop: 14, borderTop: '1px solid rgba(255,255,255,0.1)', display: 'flex', justifyContent: 'space-between', alignItems: 'baseline' }}>
        <span style={{ fontSize: 14, color: 'var(--sd-paper-on-dark-2)' }}>Totale</span>
        <span style={{ fontFamily: 'var(--sd-font-display)', fontSize: 40, color: 'var(--sd-paper)' }}>€{totale + spedCost}</span>
      </div>

      <div style={{ marginTop: 20, fontSize: 12, color: 'var(--sd-paper-on-dark-2)', lineHeight: 1.5 }}>
        ✦ 3 anteprime entro 24h<br />
        ✦ Produzione 15 giorni lavorativi<br />
        ✦ Ciotolina con nome inclusa
      </div>
    </aside>);

}

function Row({ l, r, color }) {
  return (
    <div style={{ display: 'flex', justifyContent: 'space-between' }}>
      <span style={{ color: 'var(--sd-paper-on-dark-2)' }}>{l}</span>
      <span style={{ color: color || 'var(--sd-paper)', fontWeight: 500 }}>{r}</span>
    </div>);

}

// ───── CONFERMA ─────
function Conferma({ onNavigate, order }) {
  return (
    <div style={{ padding: 'clamp(56px, 8vw, 80px) clamp(20px, 4vw, 40px)', maxWidth: 760, margin: '0 auto', textAlign: 'center' }}>
      <div style={{
        width: 80, height: 80, borderRadius: '50%', background: 'var(--sd-terracotta)', color: 'var(--sd-paper)',
        margin: '0 auto 28px', display: 'flex', alignItems: 'center', justifyContent: 'center',
        fontSize: 36, animation: 'sd-float-in 0.6s'
      }}>✓</div>
      <div className="sd-eyebrow" style={{ marginBottom: 14 }}>ORDINE RICEVUTO</div>
      <h1 style={{ margin: 0, fontFamily: 'var(--sd-font-serif)', fontSize: 'clamp(40px, 6.4vw, 64px)', fontWeight: 400, letterSpacing: '-0.02em', lineHeight: 1.05 }}>
        Grazie! A presto le anteprime.
      </h1>
      <p style={{ fontSize: 17, color: 'var(--sd-ink-2)', marginTop: 20, lineHeight: 1.6 }}>
        Entro 24 ore ti invieremo 3 anteprime 3D {order && order.cani.length > 1 ? 'dei tuoi cani' : 'del tuo cane'} via email.<br />
        Potrai sceglierne una o chiederne altre 3.
      </p>

      {/* Nota magic-link */}
      <div style={{
        background: 'var(--sd-pink)', borderRadius: 'var(--sd-r-md)',
        padding: '18px 22px', marginTop: 28, display: 'flex', gap: 14, alignItems: 'flex-start', textAlign: 'left'
      }}>
        <div style={{ fontSize: 22, lineHeight: 1 }}>🔗</div>
        <div style={{ fontSize: 14, color: 'var(--sd-ink)', lineHeight: 1.5 }}>
          <strong>Ti abbiamo inviato un link univoco via email</strong> — conservalo: è l'unico modo per seguire la tua miniatura. Nessuna password, nessun account da creare.
        </div>
      </div>
      {order &&
      <div style={{ background: 'var(--sd-paper)', padding: 24, borderRadius: 'var(--sd-r-lg)', marginTop: 40, boxShadow: 'var(--sd-shadow-soft)', textAlign: 'left' }}>
          <div style={{ display: 'flex', justifyContent: 'space-between', marginBottom: 14, fontSize: 13 }}>
            <span style={{ color: 'var(--sd-ink-3)' }}>Numero ordine</span>
            <span style={{ fontFamily: 'var(--sd-font-mono)' }}>SD-{String(Math.floor(Math.random() * 9000) + 1000)}</span>
          </div>
          <div style={{ display: 'flex', justifyContent: 'space-between', marginBottom: 14, fontSize: 13 }}>
            <span style={{ color: 'var(--sd-ink-3)' }}>Totale pagato</span>
            <span style={{ fontWeight: 600 }}>€{order.totale}</span>
          </div>
          <div style={{ display: 'flex', justifyContent: 'space-between', fontSize: 13 }}>
            <span style={{ color: 'var(--sd-ink-3)' }}>Consegna stimata</span>
            <span>{new Date(Date.now() + 20 * 24 * 60 * 60 * 1000).toLocaleDateString('it-IT', { day: 'numeric', month: 'long' })}</span>
          </div>
        </div>
      }
      <div style={{ display: 'flex', gap: 12, justifyContent: 'center', marginTop: 32 }}>
        <button onClick={() => onNavigate('traccia')} style={sdPrimaryBtn}>Traccia il mio ordine →</button>
        <button onClick={() => onNavigate('home')} style={sdSecondaryBtn}>Torna alla home</button>
      </div>
    </div>);

}

// ───── CHECKOUT (carrello veloce) ─────
function Checkout({ onNavigate, cart, setCart }) {
  if (cart.length === 0) {
    return (
      <div style={{ padding: 'clamp(72px, 11vw, 120px) clamp(20px, 4vw, 40px)', textAlign: 'center' }}>
        <div style={{ fontSize: 48, marginBottom: 20 }}>🛒</div>
        <h1 style={{ fontFamily: 'var(--sd-font-serif)', fontSize: 'clamp(32px, 5vw, 48px)', margin: 0, fontWeight: 400, lineHeight: 1.05 }}>Il carrello è vuoto.</h1>
        <p style={{ color: 'var(--sd-ink-2)', marginTop: 16 }}>Inizia dalla galleria o crea una miniatura su misura.</p>
        <button onClick={() => onNavigate('configura')} style={{ ...sdPrimaryBtn, marginTop: 28 }}>Crea la tua miniatura →</button>
      </div>);

  }
  const totale = cart.reduce((sum, item) => sum + item.price, 0);
  return (
    <div style={{ padding: 'clamp(20px, 4vw, 40px)', maxWidth: 1080, margin: '0 auto' }}>
      <h1 style={{ fontFamily: 'var(--sd-font-serif)', fontSize: 'clamp(36px, 5.6vw, 56px)', margin: '20px 0 32px', fontWeight: 400, lineHeight: 1.05 }}>
        Il tuo carrello
      </h1>
      <div className="sd-config-split" style={{ marginTop: 0 }}>
        <div style={{ display: 'flex', flexDirection: 'column', gap: 12 }}>
          {cart.map((item, i) =>
          <div key={i} style={{ background: 'var(--sd-paper)', borderRadius: 'var(--sd-r-lg)', padding: 16, display: 'grid', gridTemplateColumns: '96px 1fr auto', gap: 16, alignItems: 'center', boxShadow: 'var(--sd-shadow-soft)' }}>
              <div style={{ width: 96, height: 96, borderRadius: 'var(--sd-r-md)', overflow: 'hidden', background: 'var(--sd-bg-soft)' }}>
                <img src={item.img} style={{ width: '100%', height: '100%', objectFit: 'cover' }} />
              </div>
              <div>
                <div style={{ fontFamily: 'var(--sd-font-serif)', fontSize: 22, fontStyle: 'italic' }}>{item.name}</div>
                <div style={{ fontSize: 13, color: 'var(--sd-ink-3)' }}>{item.desc}</div>
              </div>
              <div style={{ display: 'flex', alignItems: 'center', gap: 14 }}>
                <div style={{ fontFamily: 'var(--sd-font-display)', fontSize: 24 }}>€{item.price}</div>
                <button onClick={() => setCart(cart.filter((_, j) => j !== i))} style={{ ...sdGhostBtn, fontSize: 13, color: 'var(--sd-danger)' }}>Rimuovi</button>
              </div>
            </div>
          )}
        </div>
        <aside style={{ background: 'var(--sd-bg-deep)', color: 'var(--sd-paper-on-dark)', borderRadius: 'var(--sd-r-lg)', padding: 28, height: 'fit-content' }}>
          <div className="sd-eyebrow" style={{ color: 'var(--sd-paper-on-dark-2)', marginBottom: 14 }}>RIEPILOGO</div>
          <Row l="Subtotale" r={`€${totale}`} />
          <Row l="Spedizione" r="€10" />
          <div style={{ paddingTop: 14, marginTop: 14, borderTop: '1px solid rgba(255,255,255,0.1)', display: 'flex', justifyContent: 'space-between', alignItems: 'baseline' }}>
            <span style={{ fontSize: 14, color: 'var(--sd-paper-on-dark-2)' }}>Totale</span>
            <span style={{ fontFamily: 'var(--sd-font-display)', fontSize: 36, color: 'var(--sd-paper)' }}>€{totale + 10}</span>
          </div>
          <button onClick={() => onNavigate('configura')} style={{ ...sdPrimaryBtn, background: 'var(--sd-paper)', color: 'var(--sd-ink)', width: '100%', marginTop: 20 }}>
            Procedi al checkout →
          </button>
        </aside>
      </div>
    </div>);

}

// ───── Field + RadioCard ─────
function Field({ label, value, onChange, placeholder, type = 'text' }) {
  return (
    <label style={{ display: 'block', marginBottom: 14 }}>
      <div style={{ fontSize: 12, fontWeight: 600, marginBottom: 6, color: 'var(--sd-ink-2)' }}>{label}</div>
      <input type={type} value={value} onChange={(e) => onChange(e.target.value)} placeholder={placeholder}
      style={{ width: '100%', padding: '12px 14px', borderRadius: 'var(--sd-r-sm)', border: '1px solid rgba(26,23,21,0.12)', fontSize: 14, background: 'var(--sd-bg-soft)', outline: 'none', transition: 'border-color 0.2s' }}
      onFocus={(e) => e.target.style.borderColor = 'var(--sd-ink)'}
      onBlur={(e) => e.target.style.borderColor = 'rgba(26,23,21,0.12)'} />
    </label>);

}
function RadioCard({ checked, onClick, title, price, desc, full }) {
  return (
    <button onClick={onClick} style={{
      display: 'flex', alignItems: 'center', gap: 14,
      padding: '16px 18px', borderRadius: 'var(--sd-r-md)',
      background: checked ? 'var(--sd-bg-deep)' : 'var(--sd-bg-soft)',
      color: checked ? 'var(--sd-paper-on-dark)' : 'var(--sd-ink)',
      border: '1px solid ' + (checked ? 'var(--sd-bg-deep)' : 'rgba(26,23,21,0.1)'),
      cursor: 'pointer', textAlign: 'left', width: full ? '100%' : 'auto',
      transition: 'all 0.2s'
    }}>
      <div style={{
        width: 20, height: 20, borderRadius: '50%',
        border: '2px solid ' + (checked ? 'var(--sd-paper)' : 'var(--sd-ink-3)'),
        display: 'flex', alignItems: 'center', justifyContent: 'center', flexShrink: 0
      }}>
        {checked && <div style={{ width: 10, height: 10, borderRadius: '50%', background: 'var(--sd-pink)' }} />}
      </div>
      <div style={{ flex: 1 }}>
        <div style={{ fontSize: 14, fontWeight: 600 }}>{title}</div>
        <div style={{ fontSize: 12, opacity: 0.7, marginTop: 2 }}>{desc}</div>
      </div>
      {price && <div style={{ fontFamily: 'var(--sd-font-display)', fontSize: 20 }}>{price}</div>}
    </button>);

}

const secTitle = { fontFamily: 'var(--sd-font-serif)', fontSize: 36, fontWeight: 400, margin: '0 0 6px', letterSpacing: '-0.01em' };
const secDesc = { fontSize: 14, color: 'var(--sd-ink-2)', marginTop: 0, marginBottom: 28 };
const grid2 = { display: 'grid', gridTemplateColumns: 'repeat(2,1fr)', gap: 12 };

Object.assign(window, { Configuratore, Checkout, Conferma });