// Services — editorial list with hover preview
// Fonte dos dados: Supabase (servicos_site, publicado=true) com fallback estático.

const { useState, useRef, useEffect } = React;

// No mobile não existe hover — então as descrições (que no layout "list" só
// apareceriam no hover) precisam ser renderizadas sempre. Detecta touch/estreito.
function useIsMobile(query = '(max-width: 768px)') {
  const [match, setMatch] = useState(false);
  useEffect(() => {
    const mq = window.matchMedia(query);
    const update = () => setMatch(mq.matches);
    update();
    mq.addEventListener('change', update);
    return () => mq.removeEventListener('change', update);
  }, []);
  return match;
}

// Espera o window._sb nascer (o <script> do client roda no parse, antes do Babel,
// mas mantemos retry defensivo p/ CDN lento/ausente). Resolve null se não vier.
function waitForSb(tries = 20) {
  return new Promise((resolve) => {
    let n = 0;
    (function check() {
      if (window._sb) return resolve(window._sb);
      if (n++ >= tries) return resolve(null);
      setTimeout(check, 100);
    })();
  });
}

const SERVICES = [
  { n: '01', name: 'Direção Criativa', desc: 'Direção criativa e conceitual para campanhas e projetos audiovisuais. Da ideia à execução com visão artística direcionada.', tag: 'CONCEITO' },
  { n: '02', name: 'Produção de Vídeo', desc: 'Produção audiovisual completa: roteiro, filmagem, edição e finalização. Vídeos institucionais, comerciais e conteúdo para redes sociais.', tag: 'FILME' },
  { n: '03', name: 'Edição Profissional', desc: 'Edição cinematográfica com color grading, motion graphics e trilha sonora. Pós-produção completa para qualquer formato.', tag: 'PÓS' },
  { n: '04', name: 'Gestão de Redes Sociais', desc: 'Criação e gestão estratégica de conteúdo para Instagram, TikTok e YouTube. Planejamento editorial, produção e análise de resultados.', tag: 'SOCIAL' },
  { n: '05', name: 'Cobertura Fotográfica', desc: 'Fotografia profissional para eventos, produtos e campanhas. Imagens de alta qualidade que comunicam a essência da sua marca.', tag: 'FOTO' },
  { n: '06', name: 'Criação de Persona', desc: 'Desenvolvimento de persona e estratégia de marketing para crescimento. Posicionamento de marca e identidade digital.', tag: 'PERSONA' },
  { n: '07', name: 'Logo & Identidade Visual', desc: 'Design de logos e sistemas de identidade visual completos. Marca consistente em todos os pontos de contato.', tag: 'BRAND' },
  { n: '08', name: 'Flyer & VideoFlyer', desc: 'Arte visual impactante para divulgação digital e impressa. Eventos e campanhas.', tag: 'KEY ART' },
  { n: '09', name: 'StoryMaker', desc: 'Vídeo realtime do evento com edição rápida e entrega imediata. Conteúdo dinâmico para stories e reels durante o rolê.', tag: 'REALTIME' },
];

// Procedural placeholder visual per service
function ServiceVisual({ idx }) {
  const hue = (idx * 36) % 360;
  return (
    <div style={{
      width: '100%', height: '100%',
      background: `linear-gradient(135deg, oklch(0.18 0.05 ${hue}) 0%, #0a0a0a 60%, oklch(0.22 0.12 ${hue}) 100%)`,
      position: 'relative', overflow: 'hidden',
    }}>
      <svg width="100%" height="100%" preserveAspectRatio="xMidYMid slice" style={{ position: 'absolute', inset: 0 }}>
        <defs>
          <pattern id={`p-${idx}`} patternUnits="userSpaceOnUse" width="40" height="40" patternTransform={`rotate(${(idx * 30) % 180})`}>
            <rect width="40" height="40" fill="transparent"/>
            <line x1="0" y1="20" x2="40" y2="20" stroke="rgba(240,85,3,0.15)" strokeWidth="1"/>
          </pattern>
        </defs>
        <rect width="100%" height="100%" fill={`url(#p-${idx})`}/>
        <circle cx="50%" cy="50%" r="80" fill="none" stroke="rgba(240,85,3,0.4)" strokeWidth="1"/>
        <circle cx="50%" cy="50%" r="40" fill="rgba(240,85,3,0.1)" stroke="var(--accent)" strokeWidth="1"/>
      </svg>
      <div style={{
        position: 'absolute', top: 16, left: 16,
        fontFamily: 'var(--mono)', fontSize: 10, color: 'var(--accent)',
        letterSpacing: '0.15em',
      }}>
        PREVIEW · 0{idx + 1}
      </div>
      <div style={{
        position: 'absolute', bottom: 16, right: 16,
        fontFamily: 'var(--mono)', fontSize: 10, color: 'rgba(255,255,255,0.5)',
        letterSpacing: '0.1em',
      }}>
        ▶ DEMO
      </div>
    </div>
  );
}

// Mídia real do serviço (banco). Sem mídia → cai no visual procedural (fallback).
function ServiceMedia({ item, idx, isHovered }) {
  const videoRef = useRef(null);
  useEffect(() => {
    const v = videoRef.current;
    if (!v) return;
    if (isHovered) { const p = v.play(); if (p && p.catch) p.catch(() => {}); }
    else { try { v.pause(); v.currentTime = 0; } catch (e) {} }
  }, [isHovered]);

  if (item && item.midia_url) {
    const fill = { width: '100%', height: '100%', objectFit: 'cover', display: 'block', background: '#0a0a0a' };
    if (item.midia_tipo === 'video') {
      return (
        <video ref={videoRef} src={item.midia_url}
               muted loop playsInline preload="metadata" style={fill} />
      );
    }
    return <img src={item.midia_url} alt={item.name || ''} loading="lazy" style={fill} />;
  }
  return <ServiceVisual idx={idx} />;
}

function ServiceRow({ s, idx, hovered, setHovered, layout }) {
  const isHovered = hovered === idx;
  const isMobile = useIsMobile();
  return (
    <div
      onMouseEnter={() => setHovered(idx)}
      onMouseLeave={() => setHovered(null)}
      data-cursor="link"
      className="service-row"
      style={{
        position: 'relative',
        padding: layout === 'grid' ? '24px' : '36px 0',
        borderBottom: layout === 'grid' ? 'none' : '1px solid var(--line)',
        border: layout === 'grid' ? '1px solid var(--line)' : undefined,
        display: 'flex',
        alignItems: layout === 'grid' ? 'flex-start' : 'center',
        flexDirection: layout === 'grid' ? 'column' : 'row',
        gap: layout === 'grid' ? 24 : 32,
        cursor: 'none',
        transition: 'background 0.4s, padding 0.4s',
        background: isHovered ? 'rgba(240,85,3,0.025)' : 'transparent',
      }}
    >
      <div className="num" style={{
        fontFamily: 'var(--mono)', fontSize: 12,
        color: isHovered ? 'var(--accent)' : 'var(--fg-dim)',
        letterSpacing: '0.1em',
        minWidth: layout === 'grid' ? 0 : 60,
        transition: 'color 0.3s',
      }}>
        {s.n}
      </div>

      <div style={{ flex: 1, minWidth: 0 }}>
        <div className="display name" style={{
          fontSize: layout === 'grid' ? 'clamp(28px, 2.6vw, 40px)' : `clamp(36px, ${isHovered ? 7.5 : 5.5}vw, ${isHovered ? 120 : 80}px)`,
          fontWeight: 500,
          letterSpacing: '-0.04em',
          lineHeight: 1,
          color: isHovered ? 'var(--fg)' : 'var(--fg)',
          transition: 'font-size 0.5s cubic-bezier(.2,.8,.2,1), color 0.3s',
          textShadow: isHovered ? '0 0 40px rgba(240,85,3,0.3)' : 'none',
        }}>
          {s.name}
        </div>
        {(layout === 'grid' || isHovered || isMobile) && s.desc && (
          <p className="desc" style={{
            marginTop: layout === 'grid' ? 16 : 14,
            fontSize: 14, lineHeight: 1.5,
            color: 'var(--fg-dim)',
            maxWidth: 540,
            opacity: (layout === 'grid' || isMobile) ? 1 : (isHovered ? 1 : 0),
            transition: 'opacity 0.4s',
          }}>
            {s.desc}
          </p>
        )}
      </div>

      <div className="meta" style={{
        display: 'flex', alignItems: 'center', gap: 16,
        marginLeft: layout === 'grid' ? 0 : 'auto',
      }}>
        <span className="mono uppercase tracked" style={{
          fontSize: 10,
          color: isHovered ? 'var(--accent)' : 'var(--fg-soft)',
          padding: '4px 10px',
          border: `1px solid ${isHovered ? 'var(--accent)' : 'var(--line)'}`,
          transition: 'all 0.3s',
        }}>
          {s.tag}
        </span>
        {layout !== 'grid' && (
          <span style={{
            fontSize: 24, color: 'var(--accent)',
            transform: isHovered ? 'rotate(0deg) translateX(0)' : 'rotate(-45deg) translateX(-8px)',
            opacity: isHovered ? 1 : 0.4,
            transition: 'all 0.4s cubic-bezier(.2,.8,.2,1)',
          }}>→</span>
        )}
      </div>

      {/* Floating preview for list layout */}
      {layout === 'list' && isHovered && (
        <div style={{
          position: 'absolute',
          right: '12vw',
          top: '50%',
          transform: 'translateY(-50%)',
          width: 320, height: 200,
          pointerEvents: 'none',
          zIndex: 5,
          animation: 'previewIn 0.5s cubic-bezier(.2,.8,.2,1)',
        }} className="service-preview-float">
          <ServiceMedia item={s} idx={idx} isHovered={isHovered} />
        </div>
      )}

      {layout === 'grid' && (
        <div style={{
          width: '100%', aspectRatio: '16/10',
          marginTop: 8,
          transform: isHovered ? 'scale(1.02)' : 'scale(1)',
          transition: 'transform 0.5s cubic-bezier(.2,.8,.2,1)',
        }}>
          <ServiceMedia item={s} idx={idx} isHovered={isHovered} />
        </div>
      )}
    </div>
  );
}

function Servicos({ layout }) {
  const [hovered, setHovered] = useState(null);
  // Estático = estado inicial (render instantâneo + rede de segurança). Troca p/ banco se houver publicados.
  const [services, setServices] = useState(SERVICES);

  useEffect(() => {
    let alive = true;
    (async () => {
      const sb = await waitForSb();
      if (!sb || !alive) return;
      try {
        const { data, error } = await sb
          .from('servicos_site')
          .select('titulo, descricao, midia_url, midia_tipo, ordem, tag')
          .eq('publicado', true)
          .order('ordem', { ascending: true });
        if (error) throw error;
        if (alive && data && data.length) {
          setServices(data.map((r, i) => ({
            n: String(i + 1).padStart(2, '0'),
            name: r.titulo,
            desc: r.descricao || '',
            tag: (r.tag && String(r.tag).trim()) ? r.tag : 'STUND',
            midia_url: r.midia_url || null,
            midia_tipo: r.midia_tipo || null,
          })));
        }
      } catch (e) {
        console.warn('[vitrine] servicos_site — mantendo fallback estático:', (e && e.message) || e);
      }
    })();
    return () => { alive = false; };
  }, []);

  return (
    <section id="servicos" className="section" style={{
      padding: '180px 6vw',
      position: 'relative',
      background: '#050505',
    }}>
      <div style={{
        display: 'flex', justifyContent: 'space-between', alignItems: 'flex-end',
        marginBottom: 80, flexWrap: 'wrap', gap: 24,
      }}>
        <div style={{ display: 'flex', alignItems: 'center', gap: 16 }}>
          <span className="mono" style={{ fontSize: 11, color: 'var(--accent)', letterSpacing: '0.1em' }}>
            01 / SERVIÇOS
          </span>
          <span style={{ width: 60, height: 1, background: 'var(--accent)' }} />
        </div>
        <div className="display" style={{
          fontSize: 'clamp(40px, 6vw, 88px)',
          fontWeight: 500,
          letterSpacing: '-0.04em',
          lineHeight: 0.95,
        }}>
          O que <em style={{ color: 'var(--accent)', fontStyle: 'normal' }}>fazemos</em>
        </div>
      </div>

      <div style={layout === 'grid' ? {
        display: 'grid',
        gridTemplateColumns: 'repeat(auto-fit, minmax(320px, 1fr))',
        gap: 16,
      } : { display: 'flex', flexDirection: 'column', borderTop: '1px solid var(--line)' }}>
        {services.map((s, i) => (
          <ServiceRow key={s.n} s={s} idx={i} hovered={hovered} setHovered={setHovered} layout={layout} />
        ))}
      </div>

      <style>{`
        @keyframes previewIn {
          from { opacity: 0; transform: translateY(-50%) scale(.9); }
          to { opacity: 1; transform: translateY(-50%) scale(1); }
        }
        @media (max-width: 900px) {
          .service-preview-float { display: none !important; }
        }
      `}</style>
    </section>
  );
}

Object.assign(window, { Servicos, SERVICES });