/* global React, window */
const { Icon } = window;

const Differentiator = () => (
  <section id="method" data-theme="dark" className="section gem">
    <div className="painpoint-grid" />
    <div className="container" style={{ position: "relative" }}>
      <div className="gem-intro">
        <div className="reveal">
          <div className="eyebrow" style={{ color: "rgba(250,249,246,.55)", marginBottom: 24 }}>
            <span>02 · Método</span>
          </div>
          <h2 style={{ maxWidth: "14ch", textWrap: "balance" }}>
            Proceso <span style={{ fontFamily: "'Instrument Serif', serif", fontStyle: "italic", fontWeight: 400, color: "var(--accent)" }}>Gemstone</span>.
          </h2>
        </div>
        <div className="reveal reveal-d1">
          <p style={{ color: "rgba(250,249,246,.65)", fontSize: 19, lineHeight: 1.55, maxWidth: "48ch", marginBottom: 24 }}>
            Trabajamos como geólogos, encontrando la gema que te diferencia. Cuatro semanas, cuatro pilares, un resultado.
          </p>
          <div style={{ display: "flex", gap: 10, flexWrap: "wrap" }}>
            {["Diagnóstico", "Diferencial", "Estrategia", "Activación"].map((p, i) => (
              <div key={p} style={{ padding: "8px 14px", borderRadius: 999, border: "1px solid rgba(255,255,255,.15)", fontFamily: "var(--font-mono)", fontSize: 12, letterSpacing: ".14em", textTransform: "uppercase", color: "rgba(255,255,255,.8)" }}>
                <span style={{ color: "var(--accent)", marginRight: 8 }}>{`0${i+1}`}</span>{p}
              </div>
            ))}
          </div>
        </div>
      </div>

      <div className="gem-phases reveal">
        {window.DATA.GEMSTONE_PHASES.map((ph, i) => (
          <div key={ph.week} className="gem-phase">
            <div className="gem-phase-head">
              <span className="gem-phase-num">{`0${i+1} / 04`}</span>
              <span>{ph.week}</span>
            </div>
            <div style={{ width: 36, height: 36, borderRadius: 8, border: "1px solid rgba(255,255,255,.15)", display: "grid", placeItems: "center", color: "var(--accent)", marginBottom: 24 }}>
              <Icon name={ph.iconKey} size={18} />
            </div>
            <div className="gem-phase-title">{ph.title}</div>
            <div className="gem-phase-pillar">Pilar · {ph.pillar}</div>
            <div className="gem-phase-desc">{ph.description}</div>
            <ul className="gem-phase-bullets">
              {ph.bullets.map(b => <li key={b}>{b}</li>)}
            </ul>
            <div style={{ marginTop: 24, fontFamily: "var(--font-mono)", fontSize: 12, letterSpacing: ".12em", color: "rgba(255,255,255,.4)" }}>{ph.days}</div>
          </div>
        ))}
      </div>

      <div className="gem-deliverables reveal">
        <div>
          <div className="eyebrow" style={{ color: "rgba(250,249,246,.5)", marginBottom: 14 }}>Entregables</div>
          <div className="gem-deliv-headline">Al día 30 tenés todo en la mano.</div>
        </div>
        <div className="gem-deliv-list">
          {window.DATA.DELIVERABLES.map(d => <div key={d} className="gem-deliv-pill">{d}</div>)}
        </div>
      </div>

      <div className="reveal" style={{ marginTop: 40, textAlign: "center" }}>
        <a className="btn btn-lime" href={window.DATA.WHATSAPP_GEMSTONE} target="_blank" rel="noreferrer">Quiero empezar mi GEMSTONE <Icon name="arrow" size={14} /></a>
      </div>
    </div>
  </section>
);

window.Differentiator = Differentiator;