/* NAPKIN — "Del boceto al producto. Hasta una servilleta."
   Storyboard horizontal de 5 pasos: servilleta → boceto → CAD → fabricación → producto.
   Cada paso es una "tarjeta" con SVG ilustrativo + descripción. La servilleta es
   un SVG dibujado a mano con el sketch de un counter. El producto final es la foto real. */

const Napkin = ({ t, lang = 'es' }) => {
  const steps = [
    {
      n: '01',
      title: t('Tráenos lo que tengas', 'Bring whatever you have'),
      desc: t('Una foto de WhatsApp, una idea en una servilleta, un PDF, un croquis a mano. No necesitas plano CAD.', 'A WhatsApp photo, an idea on a napkin, a PDF, a hand sketch. No CAD plan needed.'),
      visual: 'napkin',
    },
    {
      n: '02',
      title: t('Boceto técnico gratuito', 'Free technical sketch'),
      desc: t('Convertimos tu idea en un boceto técnico con dimensiones, materiales y acabados. Sin costo, sin compromiso.', "We turn your idea into a technical sketch with dimensions, materials and finishes. No cost, no commitment."),
      visual: 'sketch',
    },
    {
      n: '03',
      title: t('Cotización formal en 12 horas', 'Formal quote in 12 hours'),
      desc: t('Precio directo de planta. Por escrito. Con tiempos de entrega comprometidos. Garantía 3 años.', 'Direct factory price. In writing. With committed delivery times. 3-year warranty.'),
      visual: 'quote',
    },
    {
      n: '04',
      title: t('Fabricación bajo techo', 'In-house fabrication'),
      desc: t('Cizalla, doblado, soldadura, pintura. Te avisamos en cada hito. Bienvenido a visitar la planta.', 'Shear, bend, weld, paint. We update you at each milestone. Welcome to visit the plant.'),
      visual: 'fab',
    },
    {
      n: '05',
      title: t('Entrega e instalación', 'Delivery & installation'),
      desc: t('Producto final, instalado donde lo necesites. Acompañamiento durante toda la fabricación.', 'Final product, installed where you need it. Hands-on through the whole build.'),
      visual: 'final',
    },
  ];

  return (
    <section id="servilleta" className="section" style={{ background: 'var(--bg)', borderTop: '1px solid var(--hairline)' }}>
      <div className="wrap">
        <div style={{ display: 'grid', gridTemplateColumns: 'auto 1fr', gap: 64, alignItems: 'baseline', marginBottom: 64 }}>
          <span className="eyebrow">— 05</span>
          <div>
            <h2 className="display display-lg" style={{ maxWidth: '14ch', textWrap: 'balance' }}>
              {t('Del boceto al producto. Hasta una servilleta.', 'From sketch to product. Even a napkin.')}
            </h2>
            <p style={{ fontSize: 18, color: 'var(--ink-2)', maxWidth: 640, marginTop: 24, lineHeight: 1.6 }}>
              {t(
                'No necesitas planos. Si lo puedes describir, lo fabricamos. Cinco pasos para llegar de tu idea al producto en tu sitio.',
                "You don't need blueprints. If you can describe it, we'll build it. Five steps from your idea to the product on site."
              )}
            </p>
          </div>
        </div>

        {/* Horizontal storyboard */}
        <div className="napkin-row" style={{
          display: 'grid',
          gridTemplateColumns: 'repeat(5, 1fr)',
          gap: 1,
          background: 'var(--hairline)',
          border: '1px solid var(--hairline)',
        }}>
          {steps.map((s, i) => (
            <div key={i} style={{ background: 'var(--bg-1)', padding: 24, display: 'flex', flexDirection: 'column' }}>
              <div style={{ display: 'flex', justifyContent: 'space-between', alignItems: 'flex-start', marginBottom: 24 }}>
                <span className="mono" style={{ color: 'var(--ink-3)', fontSize: 11 }}>{s.n}</span>
                {i < 4 && (
                  <svg width="24" height="12" viewBox="0 0 24 12" fill="none" stroke="var(--ink-4)" strokeWidth="1">
                    <line x1="0" y1="6" x2="22" y2="6" strokeDasharray="2 2"/>
                    <path d="M18 2 L22 6 L18 10" />
                  </svg>
                )}
              </div>
              <NapkinVisual kind={s.visual} t={t} />
              <h3 className="display" style={{ fontSize: 20, fontWeight: 500, marginBottom: 8, marginTop: 24, lineHeight: 1.15 }}>
                {s.title}
              </h3>
              <p style={{ fontSize: 13, color: 'var(--ink-3)', lineHeight: 1.55 }}>{s.desc}</p>
            </div>
          ))}
        </div>

        {/* "Servilleta real" callout */}
        <div className="napkin-cta" style={{
          marginTop: 64,
          padding: 'clamp(32px, 4vw, 56px)',
          border: '1px solid var(--hairline)',
          background: 'linear-gradient(135deg, var(--bg-1) 0%, var(--bg-2) 100%)',
          display: 'grid',
          gridTemplateColumns: '1fr auto',
          gap: 32,
          alignItems: 'center',
        }}>
          <div>
            <p className="mono" style={{ color: 'var(--ink-3)', marginBottom: 12, fontSize: 11 }}>
              {t('SÍ, INCLUSO ASÍ:', 'YES, EVEN LIKE THIS:')}
            </p>
            <p className="display" style={{ fontSize: 'clamp(20px, 2.2vw, 28px)', lineHeight: 1.3, fontWeight: 400, color: 'var(--ink-2)', maxWidth: 520, textWrap: 'pretty' }}>
              {t(
                '"Quiero un counter como ese de allá pero con dos puertas y que quepa en este rincón."',
                '"I want a counter like that one but with two doors and fitting this corner."'
              )}
            </p>
          </div>
          <a href="https://wa.me/525578680250" target="_blank" rel="noopener" className="btn btn-primary" style={{ whiteSpace: 'nowrap' }}>
            {t('Mándalo por WhatsApp', 'Send via WhatsApp')}
            <svg width="14" height="14" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2"><path d="M5 12h14M13 5l7 7-7 7"/></svg>
          </a>
        </div>
      </div>
      <style>{`
        @media (max-width: 1000px) {
          .napkin-row { grid-template-columns: repeat(2, 1fr) !important; }
        }
        @media (max-width: 600px) {
          .napkin-row { grid-template-columns: 1fr !important; }
          .napkin-cta { grid-template-columns: 1fr !important; }
        }
      `}</style>
    </section>
  );
};

const NapkinVisual = ({ kind, t = (es) => es }) => {
  const common = { width: '100%', height: 140, viewBox: '0 0 200 140', fill: 'none' };
  switch (kind) {
    case 'napkin':
      // Rough hand-drawn napkin with sketch of a counter
      return (
        <div style={{
          background: '#f3efe8',
          color: '#1a1a1a',
          padding: 12,
          height: 140,
          position: 'relative',
          boxShadow: 'inset 0 0 0 1px rgba(0,0,0,0.05)',
          backgroundImage: 'radial-gradient(circle at 20% 30%, rgba(160,140,80,0.08) 0%, transparent 30%), radial-gradient(circle at 80% 70%, rgba(120,80,40,0.05) 0%, transparent 25%)',
        }}>
          {/* Folded corner */}
          <div style={{
            position: 'absolute', top: 0, right: 0,
            width: 0, height: 0,
            borderTop: '14px solid #d8d0c0',
            borderLeft: '14px solid transparent',
          }} />
          <svg viewBox="0 0 180 110" fill="none" stroke="#1a1a1a" strokeWidth="1.2" strokeLinecap="round" style={{ width: '100%', height: '100%' }}>
            {/* Counter sketch */}
            <path d="M20 70 L20 90 L160 90 L160 70 Z" />
            <path d="M20 70 L160 70" />
            <path d="M50 70 L50 90 M80 70 L80 90 M110 70 L110 90 M130 70 L130 90" />
            <path d="M30 60 Q 90 40, 150 60" strokeDasharray="3 2"/>
            <text x="20" y="30" fontFamily="cursive" fontSize="11" fill="#1a1a1a" stroke="none">2.4 m</text>
            <path d="M20 35 L70 35" />
            <path d="M20 32 L20 38 M70 32 L70 38" />
            <text x="170" y="80" fontFamily="cursive" fontSize="11" fill="#1a1a1a" stroke="none" textAnchor="end" transform="rotate(-90, 170, 80)">90 cm</text>
          </svg>
        </div>
      );
    case 'sketch':
      return (
        <div style={{ background: 'var(--bg-2)', height: 140, padding: 12, position: 'relative' }}>
          <svg {...common} stroke="var(--ink-2)" strokeWidth="1">
            {/* Technical drawing */}
            <rect x="30" y="40" width="140" height="60" />
            <line x1="30" y1="40" x2="30" y2="100" strokeWidth="0.5"/>
            <line x1="170" y1="40" x2="170" y2="100" strokeWidth="0.5"/>
            <path d="M30 30 L170 30" stroke="var(--ink-3)" strokeWidth="0.5"/>
            <path d="M30 26 L30 34 M170 26 L170 34" stroke="var(--ink-3)" strokeWidth="0.5"/>
            <text x="100" y="24" fontSize="8" fill="var(--ink-3)" textAnchor="middle" fontFamily="monospace">2400 mm</text>
            <line x1="30" y1="70" x2="170" y2="70" strokeDasharray="2 2" strokeWidth="0.5"/>
            <line x1="60" y1="40" x2="60" y2="100" strokeWidth="0.5"/>
            <line x1="100" y1="40" x2="100" y2="100" strokeWidth="0.5"/>
            <line x1="140" y1="40" x2="140" y2="100" strokeWidth="0.5"/>
            <text x="180" y="44" fontSize="6" fill="var(--ink-3)" fontFamily="monospace">T304</text>
            <text x="180" y="54" fontSize="6" fill="var(--ink-3)" fontFamily="monospace">2.0mm</text>
            <text x="180" y="64" fontSize="6" fill="var(--ink-3)" fontFamily="monospace">SAT</text>
          </svg>
          <span className="mono" style={{ position: 'absolute', top: 8, right: 8, fontSize: 8, color: 'var(--ink-3)' }}>DWG-001</span>
        </div>
      );
    case 'quote':
      return (
        <div style={{ background: 'var(--bg-2)', height: 140, padding: 16 }}>
          <div className="mono" style={{ fontSize: 9, color: 'var(--ink-3)', marginBottom: 8 }}>{t('COTIZACIÓN', 'QUOTE')} #2026-0481</div>
          <div style={{ display: 'flex', flexDirection: 'column', gap: 6 }}>
            {[
              { l: 'Counter inox 2.4m', v: '$ — — —' },
              { l: 'Acabado satinado', v: '$ — — —' },
              { l: 'Instalación', v: '$ — — —' },
            ].map((it, i) => (
              <div key={i} style={{ display: 'flex', justifyContent: 'space-between', fontSize: 11, color: 'var(--ink-2)', borderBottom: '1px dashed var(--hairline)', paddingBottom: 3 }}>
                <span>{it.l}</span>
                <span className="mono">{it.v}</span>
              </div>
            ))}
            <div style={{ display: 'flex', justifyContent: 'space-between', fontSize: 12, color: 'var(--ink)', marginTop: 4, fontWeight: 500 }}>
              <span>TOTAL</span>
              <span className="mono" style={{ color: 'var(--ink-3)' }}>(confidencial)</span>
            </div>
          </div>
        </div>
      );
    case 'fab':
      return (
        <div style={{ background: 'var(--bg-2)', height: 140, position: 'relative', overflow: 'hidden' }}>
          <img src="assets/gabinetes-fila.jpeg" alt="" style={{ width: '100%', height: '100%', objectFit: 'cover', opacity: 0.75, filter: 'grayscale(0.2)' }}/>
          <div style={{ position: 'absolute', inset: 0, display: 'flex', alignItems: 'flex-end', padding: 12 }}>
            <span className="mono" style={{ fontSize: 9, color: '#fff', background: 'rgba(0,0,0,0.6)', padding: '3px 6px', letterSpacing: '0.1em' }}>{t('PLANTA · EN PROCESO', 'PLANT · IN PROCESS')}</span>
          </div>
        </div>
      );
    case 'final':
      return (
        <div style={{ background: 'var(--bg-2)', height: 140, position: 'relative', overflow: 'hidden' }}>
          <img src="assets/counter-7eleven.jpeg" alt="" style={{ width: '100%', height: '100%', objectFit: 'cover' }}/>
          <div style={{ position: 'absolute', top: 8, right: 8, background: 'rgba(0,0,0,0.7)', padding: '3px 6px' }}>
            <span className="mono" style={{ fontSize: 9, color: '#fff', letterSpacing: '0.1em' }}>ACEROLAB</span>
          </div>
        </div>
      );
    default: return null;
  }
};

window.Napkin = Napkin;