// The "pain" middle section + "Qué es" + Beneficios

function PainSection(){
  const lines = [
    'Conversaciones que no cerraste.',
    'Lo que no dijiste… y repites en tu mente.',
    'Emociones acumuladas: estrés, nostalgia, frustración, incertidumbre.',
    'Decisiones que todavía te pesan.',
    'Pensamientos que no paran ni cuando intentas dormir.',
  ];
  return (
    <section className="sec-lg" style={{ padding: '140px 0 120px', position:'relative' }}>
      <div className="container">
        <div className="two-col pain">
          <div className="sticky-col" style={{ position:'sticky', top: 120 }}>
            <Reveal>
              <Eyebrow>El peso invisible</Eyebrow>
            </Reveal>
            <Reveal delay={120}>
              <h2 className="serif-it" style={{
                fontSize: 'clamp(34px, 4.2vw, 60px)', lineHeight: 1.05, margin: '24px 0 0',
                color: 'var(--ink)',
              }}>
                Hay cosas que <br/>no dices…<br/>
                <span style={{ color:'var(--accent)' }}>pero que se quedan contigo.</span>
              </h2>
            </Reveal>
          </div>

          <div>
            <Reveal>
              <ul style={{ listStyle:'none', padding: 0, margin: 0 }}>
                {lines.map((t,i)=>(
                  <li key={i} style={{
                    display:'flex', gap: 18, padding: '22px 0',
                    borderTop: i===0 ? '1px solid var(--line)' : 'none',
                    borderBottom: '1px solid var(--line)',
                    alignItems:'flex-start',
                  }}>
                    <span className="serif-it" style={{
                      fontSize: 18, color:'var(--accent)', minWidth: 32, paddingTop: 2,
                    }}>{String(i+1).padStart(2,'0')}</span>
                    <span style={{
                      fontFamily:"'Cormorant Garamond', serif",
                      fontSize: 22, lineHeight: 1.35, color:'var(--ink)',
                    }}>{t}</span>
                  </li>
                ))}
              </ul>
            </Reveal>

            <Reveal delay={200}>
              <div style={{ marginTop: 56, paddingLeft: 0 }}>
                <p className="serif-it" style={{
                  fontSize: 26, lineHeight: 1.4, color: 'var(--muted)', margin: 0,
                }}>
                  Y como no sabes cómo sacarlo o con quién hablarlo…
                </p>
                <p className="serif" style={{
                  fontSize: 'clamp(36px, 4.5vw, 56px)', lineHeight: 1.05, margin: '14px 0 0',
                  color: 'var(--ink)', fontWeight: 500,
                }}>
                  te lo <span style={{
                    background: 'var(--sage)', padding: '2px 14px', borderRadius: 2,
                  }}>guardas</span>.
                </p>
                <div style={{ marginTop: 40, display:'flex', alignItems:'center', gap: 16 }}>
                  <svg width="50" height="20" viewBox="0 0 50 20" fill="none">
                    <path d="M 0 10 L 42 10 M 36 4 L 44 10 L 36 16" stroke="var(--accent)" strokeWidth="1.4" fill="none" strokeLinecap="round"/>
                  </svg>
                  <p style={{ margin: 0, fontFamily:"'Cormorant Garamond', serif", fontSize: 20, color:'var(--ink)' }}>
                    Lo que no se suelta, <em style={{color:'var(--accent)'}}>se acumula</em>. Y lo que se acumula… <em style={{color:'var(--accent)'}}>pesa</em>.
                  </p>
                </div>
              </div>
            </Reveal>
          </div>
        </div>

        <Reveal delay={200}>
          <div className="pain-card" style={{
            marginTop: 100, padding: '54px 56px',
            background: 'var(--terracotta)',
            color: 'var(--cream)',
            borderRadius: 4,
            display:'flex', alignItems:'center', justifyContent:'space-between', gap: 32, flexWrap:'wrap',
          }}>
            <p className="serif-it" style={{ margin: 0, fontSize: 'clamp(22px, 2.6vw, 32px)', lineHeight: 1.3, maxWidth: 720 }}>
              Por eso te sientes <em>agotada física y mentalmente</em> — porque las emociones que no gestionas se van al cuerpo.
            </p>
            <LogoMark size={80} color="var(--cream)"/>
          </div>
        </Reveal>
      </div>
    </section>
  );
}

function QueEsSection(){
  const bullets = [
    ['Ordenar', 'lo que sientes'],
    ['Liberar', 'lo que te pesa'],
    ['Decidir', 'con más claridad'],
    ['Reconectar', 'contigo misma'],
  ];
  return (
    <section id="que-es" className="sec-lg" style={{ padding: '140px 0', background:'var(--cream-soft)', position:'relative' }}>
      <div className="container">
        <div style={{ textAlign:'center', maxWidth: 760, margin:'0 auto' }}>
          <Reveal><Eyebrow>¿Qué es?</Eyebrow></Reveal>
          <Reveal delay={120}>
            <h2 style={{
              fontFamily: "'Cormorant Garamond', serif",
              fontSize: 'clamp(40px, 5.5vw, 80px)',
              lineHeight: 1.02, margin: '24px 0 20px',
              fontStyle:'italic', fontWeight: 400,
            }}>
              El <span style={{color:'var(--accent)'}}>Círculo</span> de<br/>
              Art Journaling
            </h2>
          </Reveal>
          <Reveal delay={200}>
            <p style={{
              margin: 0, fontSize: 18, lineHeight: 1.6, color:'var(--muted)',
            }}>
              Una <strong style={{color:'var(--ink)'}}>membresía íntima</strong> diseñada para ayudarte a salir del
              ruido mental, reconectar contigo y volver a sentirte capaz en esta nueva etapa.
            </p>
          </Reveal>
        </div>

        <div className="two-col quees" style={{
          marginTop: 90,
        }}>
          <Reveal>
            <div className="ebook-wrap" style={{ position:'relative' }}>
              {/* Mockup of the monthly eBook */}
              <EbookMockup/>
            </div>
          </Reveal>

          <Reveal delay={200}>
            <div>
              <div className="uppercase-track" style={{fontSize:11, color:'var(--accent)'}}>Cada mes</div>
              <h3 className="serif-it" style={{ fontSize: 38, margin:'14px 0 24px', lineHeight: 1.1 }}>
                Un eBook guiado con ejercicios<br/>de escritura y expresión visual.
              </h3>

              <ul style={{ listStyle:'none', padding:0, margin: '32px 0 0', display:'grid', gap: 18 }}>
                {bullets.map(([verb, rest], i)=>(
                  <li key={i} style={{ display:'flex', gap: 16, alignItems:'baseline',
                    paddingBottom: 16, borderBottom: '1px solid var(--line)' }}>
                    <LotusBullet/>
                    <div>
                      <span className="serif-it" style={{ fontSize: 24, color:'var(--accent)' }}>{verb}</span>
                      <span style={{ fontSize: 18, color:'var(--ink)', marginLeft: 8 }}>{rest}</span>
                    </div>
                  </li>
                ))}
              </ul>

              <div style={{
                marginTop: 36, padding: '18px 22px',
                background:'var(--off-white)', border:'1px solid var(--line)',
                borderRadius: 4, display:'flex', alignItems:'center', gap: 16,
              }}>
                <div style={{
                  width: 56, height: 56, borderRadius: '50%',
                  background: 'var(--sage)',
                  display:'grid', placeItems:'center',
                }}>
                  <span className="serif-it" style={{ fontSize: 22, color: 'var(--terracotta-deep)'}}>15'</span>
                </div>
                <div>
                  <div style={{ fontFamily:"'Cormorant Garamond', serif", fontSize: 20, color:'var(--ink)' }}>
                    En <em>15 minutos</em>… o el tiempo que necesites.
                  </div>
                  <div style={{ fontSize: 12, color:'var(--muted)', marginTop: 4 }}>
                    No es teoría. Es una herramienta práctica para cuando tu mente no para.
                  </div>
                </div>
              </div>
            </div>
          </Reveal>
        </div>
      </div>
    </section>
  );
}

function EbookMockup(){
  return (
    <div style={{ position:'relative', perspective: 1200 }}>
      {/* back book */}
      <div style={{
        position:'absolute', top: 40, left: 60, width: 300, height: 400,
        background:'var(--sage)',
        transform: 'rotate(-4deg)',
        borderRadius: 2,
        boxShadow:'0 20px 40px -20px rgba(0,0,0,0.2)',
      }}/>
      {/* front book */}
      <div style={{
        position:'relative', width: 300, height: 400, margin: '0 auto',
        background: 'var(--cream)',
        border: '1px solid var(--line)',
        borderRadius: 2,
        boxShadow:'0 40px 70px -30px rgba(122,68,52,0.4)',
        padding: '32px 28px',
        display:'flex', flexDirection:'column', justifyContent:'space-between',
        transform: 'rotate(2deg)',
      }}>
        <div>
          <div className="uppercase-track" style={{ fontSize:10, color:'var(--terracotta)' }}>Ejercicio · Mes 01</div>
          <div className="serif-it" style={{ fontSize: 28, lineHeight: 1.1, marginTop: 20, color:'var(--ink)' }}>
            Lo que llevas<br/>sin soltar.
          </div>
          <div style={{ marginTop: 24, height: 1, background:'var(--line)' }}/>
          <div style={{ marginTop: 24 }}>
            {[0,1,2,3,4].map(i=>(
              <div key={i} style={{
                height: 1, background: 'var(--line)', marginBottom: 14,
                width: `${[95,88,72,90,55][i]}%`,
              }}/>
            ))}
          </div>
        </div>
        <div style={{ display:'flex', alignItems:'flex-end', justifyContent:'space-between' }}>
          <div className="hand" style={{ fontSize: 22, color:'var(--accent)', transform:'rotate(-3deg)' }}>
            suelta…
          </div>
          <LogoMark size={44} color="var(--terracotta)"/>
        </div>
      </div>
      {/* small doodle */}
      <svg viewBox="0 0 60 60" style={{ position:'absolute', right: -30, top: -10, width: 70, opacity: 0.8 }}>
        <path d="M 10 30 Q 20 10 30 30 T 50 30" stroke="var(--accent)" strokeWidth="1.2" fill="none" strokeLinecap="round"/>
        <circle cx="30" cy="30" r="2" fill="var(--accent)"/>
      </svg>
    </div>
  );
}

function BenefitsSection(){
  const items = [
    { k:'01', t:'Tu mente deja de sentirse saturada', d:'Empiezas a vaciar lo que llevas acumulando.' },
    { k:'02', t:'Vuelves a confiar en ti', d:'Te vas sintiendo más segura de lo que decides.' },
    { k:'03', t:'Baja la ansiedad', d:'Menos pensamientos repetitivos, más calma.' },
    { k:'04', t:'Descansas mejor', d:'Tu mente se apaga… y tu cuerpo también.' },
    { k:'05', t:'Decides con claridad', d:'Menos duda, más dirección.' },
    { k:'06', t:'Te vuelves a elegir', d:'Empiezas a priorizarte sin culpa.' },
    { k:'07', t:'Reconstruyes tu autoestima', d:'Dejas de verte desde lo que perdiste y empiezas a verte desde lo que estás construyendo.' },
    { k:'08', t:'Entiendes lo que sientes', d:'Ya no es solo “me siento mal” — identificas qué hay detrás y cómo gestionarlo.' },
  ];
  return (
    <section id="beneficios" className="sec-lg" style={{ padding: '140px 0', position:'relative' }}>
      <div className="container">
        <div className="two-col benefits" style={{ marginBottom: 72 }}>
          <Reveal>
            <Eyebrow>Lo que vas a notar</Eyebrow>
            <h2 className="serif-it" style={{
              fontSize:'clamp(36px, 4.6vw, 64px)', lineHeight: 1.02, margin: '20px 0 0',
            }}>
              Dejas de estar <br/>en <span style={{color:'var(--accent)'}}>automático</span>.
            </h2>
          </Reveal>
          <Reveal delay={150}>
            <p style={{ fontSize: 17, lineHeight: 1.6, color:'var(--muted)', margin: 0, maxWidth: 520 }}>
              Estos no son slogans. Son los cambios que reportan las mujeres del Círculo
              después de un par de meses de práctica constante.
            </p>
          </Reveal>
        </div>

        <div style={{
          display:'grid',
          gridTemplateColumns:'repeat(auto-fill, minmax(280px, 1fr))',
          gap: 0,
          border: '1px solid var(--line)',
          borderRadius: 4,
          overflow: 'hidden',
          background: 'var(--off-white)',
        }}>
          {items.map((it, i)=>(
            <Reveal key={it.k} delay={i*60} style={{
              padding: '36px 28px',
              borderRight: '1px solid var(--line)',
              borderBottom: '1px solid var(--line)',
              background: 'var(--off-white)',
              transition:'background .3s ease',
            }}
              onMouseEnter={e=>{ e.currentTarget.style.background='var(--cream)'; }}
              onMouseLeave={e=>{ e.currentTarget.style.background='var(--off-white)'; }}
            >
              <div className="serif-it" style={{ fontSize: 20, color:'var(--accent)' }}>{it.k}</div>
              <h4 className="serif" style={{ fontSize: 22, margin: '10px 0 10px', lineHeight: 1.2, fontWeight: 500 }}>
                {it.t}
              </h4>
              <p style={{ margin: 0, fontSize: 14, lineHeight: 1.55, color:'var(--muted)' }}>{it.d}</p>
            </Reveal>
          ))}
        </div>
      </div>
    </section>
  );
}

window.PainSection = PainSection;
window.QueEsSection = QueEsSection;
window.BenefitsSection = BenefitsSection;