/* PROCESO — "Cómo funciona", las condiciones comerciales del proyecto.

   NO re-cuenta los cinco pasos: de eso ya se encarga `Napkin` (#servilleta, "Del boceto al
   producto"), que va justo antes. Repetirlos habría sido una segunda narrativa del mismo
   proceso en la misma página. Esta sección recoge lo que Napkin NO dice y que sí estaba
   dictado: cómo se paga (50/40/10), qué recibes en el anteproyecto —con las láminas reales,
   no una ilustración—, qué conviene traer antes de escribir, y que la visita a planta es
   con cita.

   Las dos láminas son de un anteproyecto real, anonimizadas: sin logo, sin cliente, sin
   folio y con el cajetín tapado. Los pies no nombran a nadie. */

const Proceso = ({ t, lang = 'es' }) => {
  const pagos = [
    { pct: 50, flex: 50, label: t('50% para arrancar', '50% to start'),
      desc: t('Con el anticipo fabricamos de inicio a fin. Lo ves terminado y das el visto bueno.',
              'With the deposit we build it end to end. You see it finished and sign off.'),
      bg: '#1a1a1a', fg: 'var(--bg)' },
    { pct: 40, flex: 40, label: t('40% para que salga de fábrica', '40% to leave the plant'),
      desc: t('La pieza sale de planta hacia tu sitio.', 'The piece leaves the plant for your site.'),
      bg: 'var(--ink-2)', fg: 'var(--bg)' },
    { pct: 10, flex: 10, label: t('10% al terminar la instalación', '10% when installation is done'),
      desc: t('Se liquida cuando está montada y funcionando.', 'Settled when it is installed and running.'),
      bg: 'var(--accent)', fg: '#fff' },
  ];

  const traer = [
    t('Medidas del espacio, aunque sean aproximadas.', 'Measurements of the space, even rough ones.'),
    t('Un croquis a mano. No tiene que estar bonito.', 'A hand sketch. It does not have to be pretty.'),
    t('Fotos de referencia de lo que te gusta.', 'Reference photos of what you like.'),
  ];

  return (
    <section id="proceso" className="section" style={{ background: 'var(--bg-1)', borderTop: '1px solid var(--hairline)' }}>
      <div className="wrap">

        <div style={{ display: 'grid', gridTemplateColumns: 'auto 1fr', gap: 64, alignItems: 'baseline', marginBottom: 64 }}>
          <span className="eyebrow">— 06</span>
          <div>
            <h2 className="display display-lg" style={{ maxWidth: '16ch', textWrap: 'balance' }}>
              {t('Cómo funciona, en dinero y en tiempos.', 'How it works, in money and timing.')}
            </h2>
            <p style={{ fontSize: 18, color: 'var(--ink-2)', maxWidth: 660, marginTop: 24, lineHeight: 1.6 }}>
              {t(
                'Ya viste los pasos. Esto es lo que te toca a ti: qué recibes antes de pagar nada, cómo se reparte el pago y qué conviene tener a la mano antes de escribirnos.',
                'You have seen the steps. This is your side of it: what you get before paying anything, how the payment is split, and what is worth having at hand before you write.'
              )}
            </p>
          </div>
        </div>

        {/* Lo que recibes: las láminas reales */}
        <div className="proceso-laminas" style={{ display: 'grid', gridTemplateColumns: '1fr 1fr', gap: 24, alignItems: 'start' }}>
          <div>
            <span className="eyebrow">{t('Antes de pagar nada', 'Before paying anything')}</span>
            <h3 className="display" style={{ fontSize: 'clamp(24px, 2.6vw, 32px)', fontWeight: 500, letterSpacing: '-.015em', margin: '14px 0 14px' }}>
              {t('Te entregamos el anteproyecto.', 'We hand you the preliminary project.')}
            </h3>
            <p style={{ fontSize: 17, color: 'var(--ink-2)', lineHeight: 1.65, margin: 0, maxWidth: 520 }}>
              {t(
                'Láminas técnicas con planta, alzados acotados e isométrico de tu pieza, para que veas exactamente qué se va a fabricar antes de que exista. El levantamiento y el dibujo son parte del proyecto, no un extra.',
                'Technical drawings with plan, dimensioned elevations and an isometric of your piece, so you see exactly what will be built before it exists. Survey and drafting are part of the project, not an add-on.'
              )}
            </p>
            <p className="mono" style={{ fontSize: 12, color: 'var(--ink-3)', marginTop: 22, lineHeight: 1.7 }}>
              {t('Láminas de un anteproyecto real', 'Drawings from a real preliminary project')}
            </p>
          </div>

          <div style={{ display: 'flex', flexDirection: 'column', gap: 14 }}>
            <figure style={{ margin: 0, background: 'var(--bg-2)', border: '1px solid var(--hairline)' }}>
              <picture>
                <source
                  type="image/webp"
                  sizes="(max-width: 900px) 92vw, 46vw"
                  srcSet="assets/proceso/lamina-isometrico-400.webp 400w, assets/proceso/lamina-isometrico-800.webp 800w, assets/proceso/lamina-isometrico.webp 1200w"
                />
                <img
                  src="assets/proceso/lamina-isometrico.jpg"
                  alt={t('Lámina técnica: isométrico de una cocina de acero inoxidable a la medida',
                         'Technical drawing: isometric of a custom stainless steel kitchen')}
                  loading="lazy" decoding="async"
                  style={{ display: 'block', width: '100%', height: 'auto' }}
                />
              </picture>
            </figure>
            <figure style={{ margin: 0, background: 'var(--bg-2)', border: '1px solid var(--hairline)' }}>
              <picture>
                <source
                  type="image/webp"
                  sizes="(max-width: 900px) 92vw, 46vw"
                  srcSet="assets/proceso/lamina-planta-400.webp 400w, assets/proceso/lamina-planta-800.webp 800w, assets/proceso/lamina-planta.webp 1200w"
                />
                <img
                  src="assets/proceso/lamina-planta.jpg"
                  alt={t('Lámina técnica: planta acotada de una cocina de acero inoxidable a la medida',
                         'Technical drawing: dimensioned plan of a custom stainless steel kitchen')}
                  loading="lazy" decoding="async"
                  style={{ display: 'block', width: '100%', height: 'auto' }}
                />
              </picture>
            </figure>
          </div>
        </div>

        {/* Cómo se paga */}
        <div style={{ marginTop: 88 }}>
          <span className="eyebrow">{t('Cómo se paga', 'How payment works')}</span>
          <div className="proceso-barra" style={{ display: 'flex', gap: 3, marginTop: 16, height: 56 }}>
            {pagos.map((p) => (
              <div key={p.pct} style={{
                flex: p.flex, background: p.bg, display: 'flex', alignItems: 'center',
                paddingLeft: 16, minWidth: 0,
              }}>
                <span className="mono" style={{ fontSize: 13, color: p.fg, whiteSpace: 'nowrap' }}>{p.pct}%</span>
              </div>
            ))}
          </div>
          <div className="proceso-pagos" style={{ display: 'grid', gridTemplateColumns: '1fr 1fr 1fr', gap: 24, marginTop: 22 }}>
            {pagos.map((p) => (
              <div key={p.pct} style={{ borderTop: '1px solid var(--hairline)', paddingTop: 16 }}>
                <h4 className="display" style={{ margin: '0 0 6px', fontSize: 18, fontWeight: 500, letterSpacing: '-.01em' }}>{p.label}</h4>
                <p style={{ margin: 0, fontSize: 16, color: 'var(--ink-2)', lineHeight: 1.55 }}>{p.desc}</p>
              </div>
            ))}
          </div>
        </div>

        {/* Entrega e instalación incluidas */}
        <div style={{
          marginTop: 64, background: 'var(--bg-2)', border: '1px solid var(--hairline)',
          padding: '32px 36px', display: 'grid', gridTemplateColumns: 'auto 1fr', gap: 26, alignItems: 'center',
        }}>
          <svg width="30" height="30" viewBox="0 0 24 24" fill="none" stroke="var(--accent)" strokeWidth="1.5" strokeLinecap="round" strokeLinejoin="round" aria-hidden="true">
            <path d="M3 7h11v9H3z"></path><path d="M14 10h4l3 3v3h-7z"></path>
            <circle cx="7" cy="18" r="2"></circle><circle cx="17" cy="18" r="2"></circle>
          </svg>
          <p className="display" style={{ margin: 0, fontSize: 'clamp(18px, 2vw, 22px)', lineHeight: 1.45, fontWeight: 500, letterSpacing: '-.01em' }}>
            {t('Entrega e instalación ', 'Delivery and installation ')}
            <strong style={{ color: 'var(--accent)', fontWeight: 600 }}>{t('incluidas', 'included')}</strong>
            {t(' en Ciudad de México, Valle de México y Estado de México.', ' in Mexico City, Valle de México and Estado de México.')}
          </p>
        </div>

        {/* Prepárate + visita */}
        <div className="proceso-cierre" style={{ marginTop: 64, display: 'grid', gridTemplateColumns: '1.15fr 1fr', gap: 56, alignItems: 'start' }}>
          <div>
            <h3 className="display" style={{ margin: '0 0 20px', fontSize: 'clamp(22px, 2.4vw, 28px)', fontWeight: 500, letterSpacing: '-.015em' }}>
              {t('Prepárate antes de escribirnos', 'Get ready before you write')}
            </h3>
            <div style={{ display: 'flex', flexDirection: 'column', gap: 14 }}>
              {traer.map((linea, i) => (
                <div key={i} style={{ display: 'grid', gridTemplateColumns: '22px 1fr', gap: 16, alignItems: 'start' }}>
                  <span className="mono" style={{ fontSize: 11, color: 'var(--accent)', marginTop: 4 }}>{String(i + 1).padStart(2, '0')}</span>
                  <p style={{ margin: 0, fontSize: 17, color: 'var(--ink-2)', lineHeight: 1.6 }}>{linea}</p>
                </div>
              ))}
            </div>
            <p style={{ margin: '24px 0 0', fontSize: 17, lineHeight: 1.6, color: 'var(--ink)', borderLeft: '3px solid var(--accent)', paddingLeft: 18 }}>
              {t('Después del anticipo vamos a tu sitio y medimos con láser.',
                 'After the deposit we come to your site and measure with a laser.')}
            </p>
          </div>

          <div style={{ background: 'var(--bg-2)', border: '1px solid var(--hairline)', padding: '28px 30px' }}>
            <span className="eyebrow">{t('Visita nuestra planta', 'Visit our plant')}</span>
            <h3 className="display" style={{ margin: '14px 0 12px', fontSize: 22, fontWeight: 500, letterSpacing: '-.01em' }}>
              {t('Siempre con cita', 'Always by appointment')}
            </h3>
            <p style={{ margin: 0, fontSize: 17, color: 'var(--ink-2)', lineHeight: 1.65 }}>
              {t(
                'No es un showroom con vendedores. Agendas y te recibe quien va a llevar tu proyecto, con tu pieza o con piezas parecidas en el piso de producción.',
                'It is not a showroom with salespeople. You book, and the person who will run your project receives you, with your piece or similar ones on the production floor.'
              )}
            </p>
            <a href="ir.php?c=home-proceso" target="_blank" rel="noopener" className="btn" style={{ marginTop: 22 }}>
              {t('Agendar visita', 'Book a visit')}
              <svg width="14" height="14" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2"><path d="M5 12h14M13 5l7 7-7 7"></path></svg>
            </a>
          </div>
        </div>

      </div>

      <style>{`
        @media (max-width: 900px) {
          .proceso-laminas { grid-template-columns: 1fr !important; gap: 32px !important; }
          .proceso-cierre  { grid-template-columns: 1fr !important; gap: 40px !important; }
          .proceso-pagos   { grid-template-columns: 1fr !important; gap: 18px !important; }
        }
        @media (max-width: 600px) {
          /* La barra de pagos a 390 px: 10% de 350 son 35 px y el rótulo no cabe.
             Se apila en tres bandas de alto fijo, que sigue leyéndose como reparto. */
          .proceso-barra { flex-direction: column; height: auto !important; }
          .proceso-barra > div { flex: none !important; height: 44px; }
        }
      `}</style>
    </section>
  );
};

window.Proceso = Proceso;