// ===== FILOSOFIA =====
function Filosofia() {
  const cards = [
  { title: 'Naturalidade como critério', body: 'Resultado proporcional, elegante e coerente com a sua expressão e identidade.' },
  { title: 'Especialista em você', body: 'Cada plano é único. Porque cada pessoa é única.' },
  { title: 'Experiência premium', body: 'Do primeiro contato ao resultado final, cada detalhe foi pensado para você se sentir cuidada.' }];

  return (
    <section className="relative overflow-hidden py-24 md:py-32" style={{ background: C.ink, color: C.cream }}>
      <div className="absolute inset-0 pointer-events-none" style={{
        backgroundImage: `radial-gradient(ellipse at 70% 30%, rgba(255,139,122,0.1) 0%, transparent 55%)`
      }}></div>

      <div className="relative max-w-[1200px] mx-auto px-5 md:px-8">
        <Pill dark>nossa filosofia</Pill>

        {/* layout duas colunas: texto à esquerda, vídeo story à direita */}
        <div className="filosofia-grid mt-8 md:mt-10 gap-10 md:gap-14 items-center">
          {/* coluna texto */}
          <div className="filosofia-text">
            <h2 className="font-display max-w-3xl" style={{ fontSize: 'clamp(30px, 4.4vw, 56px)', lineHeight: 1.05, fontWeight: 700, letterSpacing: '-0.025em' }}>
              Beleza não é um molde. <br /><em className="neon-text" style={{ fontStyle: 'italic', fontWeight: 900 }}>É identidade.</em>
            </h2>
            <p className="mt-7 text-lg max-w-2xl" style={{ color: 'rgba(244,237,227,0.78)', lineHeight: 1.6 }}>
              A maioria das clínicas começa pelo procedimento. Nós começamos por você. Antes de qualquer técnica, queremos entender sua história, seu momento, seus objetivos, e o que realmente faz sentido para o seu caso. Só então construímos um plano com propósito, coerência e naturalidade.
            </p>
          </div>

          {/* coluna vídeo story 9:16 */}
          <div className="filosofia-story-wrap mx-auto w-full">
            <FilosofiaStory />
          </div>
        </div>

        <div className="grid md:grid-cols-3 gap-5 mt-12 md:mt-16">
          {cards.map((c, i) =>
          <div key={i} className="p-6 rounded-2xl" style={{ background: 'rgba(255,139,122,0.04)', border: '1px solid rgba(255,139,122,0.15)' }}>
              <div className="font-display" style={{ fontSize: 17, fontWeight: 700, color: C.cream, letterSpacing: '-0.01em' }}>{c.title}</div>
              <p className="mt-3 text-sm" style={{ color: 'rgba(244,237,227,0.7)', lineHeight: 1.55 }}>{c.body}</p>
            </div>
          )}
        </div>

        <p className="mt-16 text-center font-display italic" style={{ fontSize: 'clamp(20px, 2.4vw, 30px)', color: C.coral, fontWeight: 500, letterSpacing: '-0.01em' }}>
          Não trabalhamos com soluções prontas. Trabalhamos com estratégia.
        </p>
      </div>

      {/* responsive: empilhar colunas em telas estreitas */}
      <style>{`
        .filosofia-grid {
          display: grid;
          grid-template-columns: minmax(0, 1.25fr) minmax(0, 1fr);
        }
        .filosofia-story-wrap { max-width: 380px; }
        @media (max-width: 880px) {
          .filosofia-grid {
            grid-template-columns: minmax(0, 1fr);
          }
          .filosofia-text { order: 2; }
          .filosofia-story-wrap { order: 1; max-width: 320px; }
        }
      `}</style>
    </section>);
}

// ===== FILOSOFIA · STORY VIDEO =====
function FilosofiaStory() {
  const videoRef = React.useRef(null);
  const [muted, setMuted] = React.useState(true);
  const [playing, setPlaying] = React.useState(true);

  React.useEffect(() => {
    const v = videoRef.current;
    if (!v) return;
    // garante autoplay em mobile
    const tryPlay = () => v.play().catch(() => {});
    tryPlay();
    const onVisibility = () => {
      if (document.hidden) v.pause();else tryPlay();
    };
    document.addEventListener('visibilitychange', onVisibility);
    return () => document.removeEventListener('visibilitychange', onVisibility);
  }, []);

  const toggleMute = () => {
    const v = videoRef.current;
    if (!v) return;
    v.muted = !v.muted;
    setMuted(v.muted);
  };

  const togglePlay = () => {
    const v = videoRef.current;
    if (!v) return;
    if (v.paused) {
      v.play();
      setPlaying(true);
    } else {
      v.pause();
      setPlaying(false);
    }
  };

  return (
    <div
      className="relative overflow-hidden neon-glow"
      style={{
        aspectRatio: '9 / 16',
        borderRadius: 28,
        background: C.inkDeep,
        border: '1px solid rgba(255,139,122,0.25)'
      }}>

      <video
        ref={videoRef}
        src="assets/filosofia-story.mp4"
        autoPlay
        loop
        muted
        playsInline
        preload="metadata"
        onClick={togglePlay}
        style={{
          width: '100%',
          height: '100%',
          objectFit: 'cover',
          display: 'block',
          cursor: 'pointer'
        }}>
      </video>

      {/* leve dim no topo para o pill respirar */}
      <div className="absolute inset-x-0 top-0 pointer-events-none" style={{
        height: '28%',
        background: 'linear-gradient(180deg, rgba(5,26,26,0.55) 0%, rgba(5,26,26,0.0) 100%)'
      }}></div>

      {/* pill no topo — referência ao bairro */}
      <div className="absolute top-4 left-4 right-4 flex items-center justify-between gap-3">
        <div
          className="inline-flex items-center gap-2 px-3 py-1.5 rounded-full"
          style={{
            background: 'rgba(5,26,26,0.55)',
            backdropFilter: 'blur(8px)',
            WebkitBackdropFilter: 'blur(8px)',
            border: '1px solid rgba(244,237,227,0.18)'
          }}>
          <span style={{
            width: 6, height: 6, borderRadius: 999,
            background: C.neon,
            boxShadow: '0 0 10px rgba(255,139,122,0.9)'
          }}></span>
          <span style={{
            fontFamily: 'ui-monospace, monospace',
            fontSize: 10,
            letterSpacing: '0.18em',
            textTransform: 'uppercase',
            color: 'rgba(244,237,227,0.92)'
          }}>
            Rio Vermelho · Salvador
          </span>
        </div>

        {/* botão de áudio */}
        <button
          type="button"
          onClick={toggleMute}
          aria-label={muted ? 'Ativar som' : 'Silenciar'}
          className="inline-flex items-center justify-center rounded-full transition"
          style={{
            width: 34, height: 34,
            background: 'rgba(5,26,26,0.55)',
            backdropFilter: 'blur(8px)',
            WebkitBackdropFilter: 'blur(8px)',
            border: '1px solid rgba(244,237,227,0.18)',
            color: C.cream
          }}>
          {muted ?
            <svg width="14" height="14" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2" strokeLinecap="round" strokeLinejoin="round"><path d="M11 5 6 9H2v6h4l5 4z"/><line x1="22" y1="9" x2="16" y2="15"/><line x1="16" y1="9" x2="22" y2="15"/></svg> :

            <svg width="14" height="14" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2" strokeLinecap="round" strokeLinejoin="round"><path d="M11 5 6 9H2v6h4l5 4z"/><path d="M15.54 8.46a5 5 0 0 1 0 7.07"/><path d="M19.07 4.93a10 10 0 0 1 0 14.14"/></svg>
          }
        </button>
      </div>

      {/* degradê inferior + legenda */}
      <div className="absolute inset-x-0 bottom-0 pointer-events-none" style={{
        height: '62%',
        background: 'linear-gradient(180deg, rgba(5,26,26,0) 0%, rgba(5,26,26,0.55) 45%, rgba(5,26,26,0.92) 100%)'
      }}></div>

      <div className="absolute inset-x-0 bottom-0 px-5 pb-6 pt-10">
        <div style={{
          fontFamily: 'ui-monospace, monospace',
          fontSize: 10,
          letterSpacing: '0.28em',
          textTransform: 'uppercase',
          color: 'rgba(255,139,122,0.95)'
        }}>
          bastidores · nubelle
        </div>
        <div className="font-display mt-2" style={{
          fontSize: 'clamp(20px, 2.4vw, 26px)',
          lineHeight: 1.1,
          fontWeight: 700,
          letterSpacing: '-0.02em',
          color: C.cream
        }}>
          Um endereço. <em className="neon-text" style={{ fontStyle: 'italic', fontWeight: 900 }}>Um cuidado.</em>
        </div>
        <div className="mt-2" style={{
          fontSize: 13,
          lineHeight: 1.5,
          color: 'rgba(244,237,227,0.78)',
          maxWidth: 320
        }}>
          Do bairro mais boêmio de Salvador ao detalhe de cada protocolo — você sente diferença antes mesmo do procedimento começar.
        </div>
      </div>

      {/* indicador de pause discreto */}
      {!playing &&
        <div className="absolute inset-0 flex items-center justify-center pointer-events-none">
          <div className="flex items-center justify-center rounded-full" style={{
            width: 64, height: 64,
            background: 'rgba(5,26,26,0.6)',
            backdropFilter: 'blur(8px)',
            WebkitBackdropFilter: 'blur(8px)',
            border: '1px solid rgba(244,237,227,0.2)'
          }}>
            <svg width="22" height="22" viewBox="0 0 24 24" fill={C.cream}><path d="M8 5v14l11-7z"/></svg>
          </div>
        </div>
      }
    </div>);
}

Object.assign(window, { Filosofia, FilosofiaStory });
