// Interactive journaling mini-exercise

function JournalingInteractive(){
  const [text, setText] = React.useState('');
  const [stage, setStage] = React.useState(0); // 0: idle, 1: writing, 2: released
  const textareaRef = React.useRef(null);

  const prompts = [
    'Algo que llevas cargando y que no has podido soltar…',
    'Lo que no dijiste hoy y se quedó dando vueltas…',
    'Aquello que pesa, aunque nadie lo vea…',
  ];
  const [promptIdx] = React.useState(() => Math.floor(Math.random() * prompts.length));

  const onChange = (e)=> {
    setText(e.target.value);
    if (e.target.value.length > 0 && stage === 0) setStage(1);
  };

  const release = ()=>{
    if (!text.trim()) return;
    setStage(2);
    setTimeout(()=>{
      setStage(0);
      setText('');
      if (textareaRef.current) textareaRef.current.value = '';
    }, 2800);
  };

  const words = text.trim().split(/\s+/).filter(Boolean).length;

  return (
    <section className="sec-lg" style={{ padding: '140px 0', background:'var(--off-white)', position:'relative', overflow:'hidden' }}>
      <div className="container">
        <div className="two-col journal">
          <Reveal>
            <Eyebrow>Pruébalo aquí · ahora</Eyebrow>
            <h2 className="serif-it" style={{
              fontSize:'clamp(36px, 4.8vw, 64px)', lineHeight: 1.02, margin: '22px 0 20px',
            }}>
              Escribe una frase.<br/>
              <span style={{color:'var(--accent)'}}>Suéltala.</span>
            </h2>
            <p style={{ fontSize: 16, lineHeight: 1.6, color:'var(--muted)', margin: 0, maxWidth: 460 }}>
              Una pequeña muestra de lo que sucede cada mes dentro del Círculo.
              Escribe lo que llevas cargando —nadie lo va a leer— y deja que se vaya.
            </p>
            <div className="hand" style={{
              marginTop: 32, color:'var(--accent)', fontSize: 26, transform:'rotate(-2deg)', display:'inline-block'
            }}>
              ↓ úsalo ahora
            </div>
          </Reveal>

          <Reveal delay={200}>
            <div style={{ position:'relative' }}>
              {/* notebook */}
              <div style={{
                position:'relative',
                background: 'var(--cream)',
                borderRadius: 4,
                padding: '32px 36px 24px',
                boxShadow: '0 30px 60px -25px rgba(122,68,52,0.3)',
                border: '1px solid var(--line)',
              }}>
                <div style={{
                  display:'flex', alignItems:'center', justifyContent:'space-between',
                  paddingBottom: 16, borderBottom: '1px solid var(--line)'
                }}>
                  <div className="uppercase-track" style={{ fontSize: 10, color:'var(--muted)'}}>Tu cuaderno · sin guardar</div>
                  <div className="hand" style={{ fontSize: 18, color:'var(--accent)' }}>hoy</div>
                </div>

                <div className="serif-it" style={{ fontSize: 22, color:'var(--ink)', margin:'22px 0 14px', lineHeight: 1.3 }}>
                  {prompts[promptIdx]}
                </div>

                <textarea
                  ref={textareaRef}
                  onChange={onChange}
                  placeholder="Escribe aquí…"
                  style={{
                    width: '100%',
                    minHeight: 160,
                    border: 'none',
                    outline: 'none',
                    background: `repeating-linear-gradient(to bottom, transparent 0, transparent 27px, var(--line) 27px, var(--line) 28px)`,
                    fontFamily: "'Caveat', cursive",
                    fontSize: 22,
                    lineHeight: '28px',
                    color: 'var(--ink)',
                    resize: 'none',
                    padding: '2px 0',
                    opacity: stage === 2 ? 0 : 1,
                    transform: stage === 2 ? 'translateY(-40px)' : 'none',
                    filter: stage === 2 ? 'blur(3px)' : 'none',
                    transition: 'all 1.6s cubic-bezier(.4,.1,.2,1)',
                  }}
                />

                <div style={{
                  marginTop: 18, display:'flex', alignItems:'center', justifyContent:'space-between', gap: 14,
                }}>
                  <div style={{ fontSize: 12, color:'var(--muted)' }}>
                    {words} {words === 1 ? 'palabra' : 'palabras'} · {text.length} caracteres
                  </div>
                  <button onClick={release} disabled={!text.trim() || stage===2}
                    style={{
                      padding: '10px 20px',
                      background: text.trim() ? 'var(--accent)' : 'var(--taupe)',
                      color: '#fff', border: 'none', borderRadius: 999,
                      fontSize: 11, letterSpacing: '0.2em', textTransform:'uppercase',
                      fontWeight: 600,
                      cursor: text.trim() ? 'pointer':'not-allowed',
                      opacity: stage === 2 ? 0.5 : 1,
                      transition: 'all .25s ease',
                    }}>
                    Soltar →
                  </button>
                </div>

                {/* released confirmation */}
                {stage === 2 && (
                  <div style={{
                    position:'absolute', inset: 0,
                    display:'flex', flexDirection:'column',
                    alignItems:'center', justifyContent:'center',
                    background: 'rgba(253,235,221,0.95)',
                    borderRadius: 4,
                    animation: 'fadeIn .6s ease',
                  }}>
                    <LogoMark size={100} color="var(--terracotta)"/>
                    <div className="serif-it" style={{ fontSize: 32, marginTop: 12, color:'var(--terracotta-deep)' }}>
                      Soltado.
                    </div>
                    <div className="hand" style={{ fontSize: 22, color:'var(--muted)', marginTop: 4 }}>
                      imagina esto 30 días al mes ·
                    </div>
                  </div>
                )}
              </div>

              {/* floating notes around */}
              <div className="hand" style={{
                position:'absolute', left: -20, top: -30,
                background:'var(--sage)', padding: '8px 14px', borderRadius: 2,
                fontSize: 18, color:'var(--terracotta-deep)',
                transform:'rotate(-5deg)',
                boxShadow:'0 10px 20px -10px rgba(0,0,0,0.2)',
              }}>
                nadie lo leerá
              </div>
              <div className="hand" style={{
                position:'absolute', right: -10, bottom: -24,
                background:'var(--coral)', padding:'8px 14px', borderRadius: 2,
                fontSize: 18, color:'#fff',
                transform:'rotate(3deg)',
                boxShadow:'0 10px 20px -10px rgba(0,0,0,0.2)',
              }}>
                solo para ti ♡
              </div>
            </div>
          </Reveal>
        </div>
      </div>
      <style>{`
        @keyframes fadeIn { from { opacity:0 } to { opacity:1 } }
      `}</style>
    </section>
  );
}

window.JournalingInteractive = JournalingInteractive;