// OMetodo.jsx — "O que é o Conectadas Fitness"
const { useRef: useOMRef, useEffect: useOMEff, useState: useOMSt } = React;

/* ── Pilares SVG map ── */
function PilaresMap({ animate }) {
  const cx = 170, cy = 170, R = 95, rc = 44, cc = 52;
  const pilares = ['Disciplina','Constância','Saúde','Identidade','Espiritualidade'];
  const angles = pilares.map((_, i) => (i * 2 * Math.PI / 5) - Math.PI / 2);
  const pts = angles.map(a => ({ x: cx + R * Math.cos(a), y: cy + R * Math.sin(a) }));
  const totalLines = pts.reduce((acc, p) => {
    const dx = p.x - cx, dy = p.y - cy;
    const dist = Math.sqrt(dx*dx + dy*dy);
    return acc + dist;
  }, 0) / pts.length;

  return (
    <svg viewBox="0 0 340 340" style={{ width: '100%', maxWidth: 340, display: 'block', margin: '0 auto' }}>
      <defs>
        <linearGradient id="lineGrad" x1="0" y1="0" x2="1" y2="1">
          <stop offset="0%" stopColor="#D97B96"/>
          <stop offset="100%" stopColor="#F4A7B9"/>
        </linearGradient>
        <filter id="glow">
          <feGaussianBlur stdDeviation="3" result="blur"/>
          <feMerge><feMergeNode in="blur"/><feMergeNode in="SourceGraphic"/></feMerge>
        </filter>
      </defs>

      {/* Decorative background circle */}
      <circle cx={cx} cy={cy} r={150} fill="rgba(217,123,150,0.04)"/>
      <circle cx={cx} cy={cy} r={R} fill="none" stroke="rgba(217,123,150,0.1)" strokeWidth="1" strokeDasharray="4,6"/>

      {/* Connection lines */}
      {pts.map((p, i) => {
        const dx = p.x - cx, dy = p.y - cy;
        const dist = Math.sqrt(dx*dx + dy*dy);
        return (
          <line key={i}
            x1={cx} y1={cy} x2={p.x} y2={p.y}
            stroke="url(#lineGrad)" strokeWidth="1.8"
            strokeDasharray={dist} strokeDashoffset={animate ? 0 : dist}
            style={{ transition: `stroke-dashoffset 0.7s cubic-bezier(.16,1,.3,1) ${i * 0.12}s` }}
          />
        );
      })}

      {/* Outer circles */}
      {pts.map((p, i) => (
        <g key={i}
          style={{
            opacity: animate ? 1 : 0,
            transform: animate ? 'none' : `translate(${(cx - p.x) * 0.3}px, ${(cy - p.y) * 0.3}px)`,
            transition: `opacity 0.5s ease ${0.3 + i * 0.1}s, transform 0.5s ease ${0.3 + i * 0.1}s`,
          }}
        >
          <circle cx={p.x} cy={p.y} r={rc} fill="var(--blush)" stroke="var(--rose-mid)" strokeWidth="1.5"/>
          <text x={p.x} y={p.y - 2} textAnchor="middle"
            fontSize="10" fontWeight="600" fill="var(--rose-dark)"
            fontFamily="var(--font-body)">
            {pilares[i].split(' ').map((word, wi) => (
              <tspan key={wi} x={p.x} dy={wi === 0 ? (pilares[i].includes(' ') ? -6 : 0) : 14}>{word}</tspan>
            ))}
          </text>
        </g>
      ))}

      {/* Center circle */}
      <circle cx={cx} cy={cy} r={cc}
        fill="var(--rose-dark)"
        style={{
          opacity: animate ? 1 : 0,
          transition: 'opacity 0.5s ease 0.1s',
          filter: 'drop-shadow(0 4px 12px rgba(217,123,150,0.4))',
        }}
      />
      <text x={cx} y={cy - 6} textAnchor="middle"
        fontSize="9" fontWeight="700" fill="white" fontFamily="var(--font-body)" letterSpacing=".05em">
        CONECTADAS
      </text>
      <text x={cx} y={cy + 8} textAnchor="middle"
        fontSize="9" fontWeight="700" fill="rgba(255,255,255,0.8)" fontFamily="var(--font-body)" letterSpacing=".05em">
        FITNESS
      </text>
    </svg>
  );
}

/* ── Main component ── */
function OMetodo() {
  const ref = useOMRef();
  const [mapAnim, setMapAnim] = useOMSt(false);
  const [pillarAnim, setPillarAnim] = useOMSt(false);
  useReveal(ref);

  useOMEff(() => {
    const el = ref.current;
    if (!el) return;
    const obs = new IntersectionObserver(([e]) => {
      if (e.isIntersecting) { setMapAnim(true); setPillarAnim(true); obs.disconnect(); }
    }, { threshold: 0.2 });
    obs.observe(el);
    return () => obs.disconnect();
  }, []);

  const pilares = [
    { label: 'Disciplina', desc: 'A base de tudo. Sem ela, nenhum método funciona.' },
    { label: 'Constância', desc: 'Resultados vêm do que você faz todo dia, não uma vez.' },
    { label: 'Saúde', desc: 'Corpo forte come do lado de dentro pra fora.' },
    { label: 'Identidade', desc: 'Saber quem você é transforma o que você sustenta.' },
    { label: 'Espiritualidade', desc: 'Fé e propósito como combustível da transformação.' },
  ];

  function scrollTo(id) {
    const el = document.getElementById(id);
    if (!el) return;
    const top = el.getBoundingClientRect().top + window.scrollY - 80;
    window.scrollTo({ top, behavior: 'smooth' });
  }

  return (
    <section className="ometodo-section" ref={ref} id="metodo">

      {/* Decorative bg elements */}
      <div style={{
        position: 'absolute', top: -80, right: -80, width: 500, height: 500,
        borderRadius: '50%', background: 'var(--rose-light)', opacity: .13,
        pointerEvents: 'none',
      }}/>
      {/* 10+ bg number */}
      <div style={{
        position: 'absolute', top: '10%', right: '5%',
        fontFamily: 'var(--font-display)', fontSize: 200, fontWeight: 800,
        color: 'var(--rose-light)', opacity: .07, lineHeight: 1,
        pointerEvents: 'none', userSelect: 'none',
        letterSpacing: '-0.05em',
      }}>10+</div>

      <div className="container" style={{ position: 'relative' }}>

        {/* ── Header ── */}
        <div style={{ textAlign: 'center', marginBottom: 'clamp(48px,6vw,80px)' }}>
          <p className="eyebrow reveal">O método</p>
          <h2 className="section-title reveal rev-d1">
            Não é apenas um treino.
          </h2>
          <p className="reveal rev-d2" style={{
            fontSize: 'clamp(16px,1.6vw,19px)', color: '#6a5060',
            maxWidth: 560, margin: '16px auto 0', lineHeight: 1.75,
          }}>
            É um método de transformação que une <em style={{ fontFamily: 'var(--font-serif)', fontStyle: 'italic', color: 'var(--accent)' }}>disciplina, constância, saúde, identidade</em> e espiritualidade.
          </p>
        </div>

        {/* ── Bloco 1: Pilares ── */}
        <div className="ometodo-pilares-grid">
          {/* Left */}
          <div>
            <p className="reveal" style={{
              fontSize: 17, lineHeight: 1.8, color: 'var(--charcoal)',
              marginBottom: 36,
            }}>
              Aqui, nós não tratamos só o corpo.<br />
              Nós ajudamos mulheres a se reconectarem<br />
              com quem elas realmente são.
            </p>
            <div>
              {pilares.map((p, i) => (
                <div key={i}
                  className="ometodo-pilar-item"
                  style={{
                    opacity: pillarAnim ? 1 : 0,
                    transform: pillarAnim ? 'none' : 'translateX(-20px)',
                    transition: `opacity 0.5s ease ${i * 0.1}s, transform 0.5s ease ${i * 0.1}s`,
                  }}
                >
                  <div className="ometodo-pilar-icon">
                    <svg width="14" height="14" viewBox="0 0 14 14" fill="none">
                      <path d="M7 1l1.8 3.8L13 5.9l-3 3 .7 4.1L7 11l-3.7 2 .7-4.1-3-3 4.2-.9z"
                        fill="var(--accent)"/>
                    </svg>
                  </div>
                  <div>
                    <div style={{ fontWeight: 700, fontSize: 16, color: 'var(--charcoal)' }}>{p.label}</div>
                    <div style={{ fontSize: 13, color: '#8a6070', marginTop: 2 }}>{p.desc}</div>
                  </div>
                </div>
              ))}
            </div>
          </div>

          {/* Right — SVG visual */}
          <div className="reveal rev-d2" style={{ display: 'flex', alignItems: 'center', justifyContent: 'center' }}>
            <PilaresMap animate={mapAnim} />
          </div>
        </div>

        {/* ── Bloco 2: Frase de impacto ── */}
        <div className="ometodo-impact reveal" style={{ margin: 'clamp(56px,7vw,88px) 0' }}>
          <div className="ometodo-impact-lines" />
          <p style={{
            fontFamily: 'var(--font-serif)', fontStyle: 'italic', fontWeight: 300,
            fontSize: 'clamp(18px,2.2vw,26px)', color: 'var(--rose-dark)',
            lineHeight: 1.65, textAlign: 'center', maxWidth: 680, margin: '0 auto',
          }}>
            "Através do cuidado com o corpo, da organização da rotina e de princípios que
            fortalecem a mente e o espírito, você aprende a viver uma vida saudável de verdade."
          </p>
          <div className="ometodo-impact-lines" style={{ transform: 'rotate(180deg)' }} />
        </div>

        {/* ── Bloco 3: Dupla promessa ── */}
        <div className="ometodo-cards-grid">
          {/* Card 1 */}
          <div className={`ometodo-card reveal rev-d1`} style={{
            background: '#fff', border: '1px solid var(--rose-light)',
            borderRadius: 20, overflow: 'hidden',
            boxShadow: '0 4px 24px rgba(217,123,150,0.10)',
          }}>
            <div style={{ height: 4, background: 'linear-gradient(90deg, var(--rose-dark), var(--rose-mid))' }}/>
            <div style={{ padding: 'clamp(28px,3vw,40px)' }}>
              <div style={{ marginBottom: 20 }}>
                <svg width="40" height="40" viewBox="0 0 40 40" fill="none">
                  <ellipse cx="20" cy="13" rx="7" ry="9" stroke="var(--rose-dark)" strokeWidth="1.8"/>
                  <path d="M8 35c0-6.627 5.373-12 12-12s12 5.373 12 12" stroke="var(--rose-dark)" strokeWidth="1.8" strokeLinecap="round"/>
                  <path d="M20 4v3M20 22v3" stroke="var(--rose-mid)" strokeWidth="1.5" strokeLinecap="round"/>
                </svg>
              </div>
              <h3 style={{
                fontFamily: 'var(--font-display)', fontWeight: 800,
                fontSize: 'clamp(19px,2vw,24px)', letterSpacing: '-0.015em',
                marginBottom: 14,
              }}>É sobre emagrecer, sim.</h3>
              <p style={{ fontSize: 15, color: '#6a5060', lineHeight: 1.75 }}>
                Resultados físicos reais, com método, estratégia e acompanhamento de quem viveu o esporte nos maiores palcos do mundo.
              </p>
            </div>
          </div>

          {/* Card 2 */}
          <div className={`ometodo-card reveal rev-d2`} style={{
            background: 'var(--charcoal)', borderRadius: 20, overflow: 'hidden',
            boxShadow: '0 4px 32px rgba(44,44,44,0.2)',
          }}>
            <div style={{ height: 4, background: 'linear-gradient(90deg, var(--gold), #E8B88A)' }}/>
            <div style={{ padding: 'clamp(28px,3vw,40px)' }}>
              <div style={{ marginBottom: 20 }}>
                <svg width="40" height="40" viewBox="0 0 40 40" fill="none">
                  <path d="M20 34C20 34 6 24.5 6 16a7 7 0 0 1 14-1.5A7 7 0 0 1 34 16c0 8.5-14 18-14 18z" stroke="var(--gold)" strokeWidth="1.8"/>
                  <path d="M20 12l1.5 4h4l-3.5 2.5 1.5 4-3.5-2.5-3.5 2.5 1.5-4L15 16h4z" fill="var(--gold)" opacity=".7"/>
                </svg>
              </div>
              <h3 style={{
                fontFamily: 'var(--font-display)', fontWeight: 800,
                fontSize: 'clamp(19px,2vw,24px)', letterSpacing: '-0.015em',
                marginBottom: 14, color: 'var(--cream)',
              }}>Mas também é sobre se encontrar.</h3>
              <p style={{ fontSize: 15, color: 'rgba(255,247,249,0.72)', lineHeight: 1.75 }}>
                Identidade, propósito e espiritualidade como base da transformação. Porque quando você muda quem você é, o resultado vem como consequência.
              </p>
            </div>
          </div>
        </div>

        {/* ── Bloco 4: Frase final + CTA ── */}
        <div className="reveal" style={{
          textAlign: 'center',
          margin: 'clamp(56px,7vw,88px) 0 0',
        }}>
          <p style={{
            fontFamily: 'var(--font-serif)', fontStyle: 'italic', fontWeight: 300,
            fontSize: 'clamp(18px,2vw,22px)', color: 'var(--rose-dark)', lineHeight: 1.6,
            marginBottom: 12,
          }}>
            "Você não precisa tentar mais uma vez.<br />Você precisa fazer diferente."
          </p>
          <p style={{
            fontSize: 11, fontWeight: 600, letterSpacing: '.14em',
            textTransform: 'uppercase', color: '#9a8a8e', marginBottom: 28,
          }}>— Taty Vaillant · Conectadas Fitness</p>
          <div style={{
            width: 60, height: 2, margin: '0 auto 32px',
            background: 'linear-gradient(90deg, transparent, var(--rose-dark), transparent)',
          }}/>
          <button className="btn-s" onClick={() => scrollTo('servicos')}
            style={{ fontSize: 15, padding: '13px 32px' }}>
            Conheça o método completo
          </button>
        </div>

      </div>
    </section>
  );
}

Object.assign(window, { OMetodo });
