// Manifesto, Marquee, Sobre, Footer

const { useEffect, useRef, useState } = React;

// Hook: in-view reveal
function useInView(opts = {}) {
  const ref = useRef(null);
  const [inView, setInView] = useState(false);
  useEffect(() => {
    if (!ref.current) return;
    const obs = new IntersectionObserver(([e]) => {
      if (e.isIntersecting) { setInView(true); obs.disconnect(); }
    }, { threshold: 0.2, ...opts });
    obs.observe(ref.current);
    return () => obs.disconnect();
  }, []);
  return [ref, inView];
}

// Letter-by-letter reveal heading
function LetterReveal({ text, className, style, delay = 0 }) {
  const [ref, inView] = useInView();
  return (
    <span ref={ref} className={className} style={style}>
      {text.split('').map((c, i) => (
        <span key={i}
              className={`letter ${inView ? 'in' : ''}`}
              style={{ transitionDelay: `${delay + i * 25}ms` }}>
          {c === ' ' ? '\u00A0' : c}
        </span>
      ))}
    </span>
  );
}

// ─────────────────────── Section heading ─────────────────────────────────
function SectionHead({ num, label, align = 'left' }) {
  return (
    <div style={{
      display: 'flex', justifyContent: align === 'left' ? 'flex-start' : 'flex-end',
      marginBottom: 80,
    }}>
      <div style={{
        display: 'flex', alignItems: 'center', gap: 16,
        textAlign: align,
      }}>
        <span className="mono" style={{ fontSize: 11, color: 'var(--accent)', letterSpacing: '0.1em' }}>
          {num}
        </span>
        <span style={{ width: 60, height: 1, background: 'var(--accent)' }} />
        <span className="mono uppercase tracked" style={{ fontSize: 11, color: 'var(--fg)' }}>
          {label}
        </span>
      </div>
    </div>
  );
}

// ─────────────────────── Manifesto ────────────────────────────────────────
function Manifesto() {
  const [ref, inView] = useInView();
  const [ref2, inView2] = useInView();
  const lines = [
    'Estética. Inteligência.',
    'Consistência.',
    'Construímos marcas que',
    'dominam atenção.',
  ];

  return (
    <section id="manifesto" className="section" style={{
      padding: '180px 6vw',
      background: '#050505',
      position: 'relative',
    }}>
      <SectionHead num="00" label="MANIFESTO" />
      <div ref={ref} className="display"
           style={{
             fontSize: 'clamp(40px, 6.5vw, 96px)',
             lineHeight: 1.02,
             letterSpacing: '-0.04em',
             color: 'var(--fg)',
             maxWidth: 1400,
           }}>
        {lines.map((line, li) => (
          <div key={li} style={{ overflow: 'hidden' }}>
            {line.split(' ').map((word, wi) => {
              const orange = (li === 1 && wi === 0) || (li === 3 && wi === 1);
              return (
                <span key={wi} style={{ display: 'inline-block', overflow: 'hidden' }}>
                  <span style={{
                    display: 'inline-block',
                    transform: inView ? 'translateY(0)' : 'translateY(110%)',
                    transition: `transform 1.1s cubic-bezier(.2,.85,.2,1) ${li * 200 + wi * 80}ms`,
                    color: orange ? 'var(--accent)' : 'inherit',
                  }}>
                    {word}{wi < line.split(' ').length - 1 ? '\u00A0' : ''}
                  </span>
                </span>
              );
            })}
          </div>
        ))}
      </div>

      <div ref={ref2} style={{
        marginTop: 100,
        display: 'grid', gridTemplateColumns: '1fr 1fr', gap: 80,
        maxWidth: 1100,
        opacity: inView2 ? 1 : 0,
        transform: inView2 ? 'translateY(0)' : 'translateY(40px)',
        transition: 'opacity 1s 0.4s, transform 1s 0.4s cubic-bezier(.2,.8,.2,1)',
      }} className="manifesto-grid">
        <div>
          <div className="mono uppercase tracked" style={{ fontSize: 10, color: 'var(--accent)', marginBottom: 16 }}>
            ↳ O QUE SOMOS
          </div>
          <p style={{ fontSize: 17, lineHeight: 1.5, color: 'var(--fg)' }}>
            A Stund é uma agência boutique que une <em style={{ color: 'var(--accent)', fontStyle: 'normal' }}>direção criativa</em>,
            estratégia e execução audiovisual em um único corpo de trabalho.
          </p>
        </div>
        <div>
          <div className="mono uppercase tracked" style={{ fontSize: 10, color: 'var(--accent)', marginBottom: 16 }}>
            ↳ COMO TRABALHAMOS
          </div>
          <p style={{ fontSize: 17, lineHeight: 1.5, color: 'var(--fg-dim)' }}>
            Pensamos a marca antes do post. A campanha antes do recorte. A linha editorial antes do feed.
            Cada peça nasce de um sistema — não de uma referência aleatória.
          </p>
        </div>
      </div>
      <style>{`
        @media (max-width: 768px) {
          .manifesto-grid { grid-template-columns: 1fr !important; gap: 40px !important; }
        }
      `}</style>
    </section>
  );
}

// ─────────────────────── Marquee clientes ─────────────────────────────────
function ClientesMarquee() {
  const setores = [
    'ARTISTAS', 'INFLUENCIADORES', 'EVENTOS', 'MARCAS', 'MODA',
    'GASTRONOMIA', 'LIFESTYLE', 'MÚSICA', 'TECNOLOGIA',
  ];
  const repeated = [...setores, ...setores, ...setores, ...setores];

  return (
    <section className="marquee" style={{
      padding: '140px 0',
      borderTop: '1px solid var(--line)',
      borderBottom: '1px solid var(--line)',
      background: '#050505',
    }}>
      <div className="marquee-track display" style={{
        fontSize: 'clamp(48px, 8vw, 120px)',
        fontWeight: 500,
        letterSpacing: '-0.04em',
        color: 'var(--fg)',
      }}>
        {repeated.map((s, i) => (
          <span key={i} style={{ display: 'inline-flex', alignItems: 'center', gap: '4rem' }}>
            <span>{s}</span>
            <span style={{
              width: 14, height: 14,
              background: 'var(--accent)',
              transform: 'rotate(45deg)',
              flexShrink: 0,
            }} />
          </span>
        ))}
      </div>
    </section>
  );
}

// ─────────────────────── Sobre fundador ──────────────────────────────────
function Sobre() {
  const [ref, inView] = useInView();
  return (
    <section id="sobre" className="section" style={{ padding: '180px 6vw', position: 'relative' }}>
      <SectionHead num="04" label="QUEM CONDUZ" />
      <div ref={ref} style={{
        display: 'grid', gridTemplateColumns: '380px 1fr', gap: 96,
        alignItems: 'center',
        maxWidth: 1280, marginLeft: 'auto', marginRight: 'auto',
      }} className="sobre-grid">
        {/* Photo — Victor */}
        <div data-cursor="link" className="vt-portrait" style={{
          aspectRatio: '4/5',
          maxWidth: 380,
          width: '100%',
          position: 'relative',
          overflow: 'hidden',
          background: '#0a0a0a',
          border: '1px solid var(--line)',
          opacity: inView ? 1 : 0,
          transform: inView ? 'translateY(0)' : 'translateY(40px)',
          transition: 'opacity 1.2s, transform 1.2s cubic-bezier(.2,.8,.2,1)',
        }}>
          {/* Base photo */}
          <img src="assets/victor-portrait.jpg" alt="Victor Temoteo"
               className="vt-img"
               style={{
                 position: 'absolute', inset: 0,
                 width: '100%', height: '100%',
                 objectFit: 'cover', objectPosition: 'center 20%',
                 filter: 'grayscale(0.85) contrast(1.05) brightness(0.92)',
                 transition: 'filter 0.6s cubic-bezier(.2,.8,.2,1), transform 0.9s cubic-bezier(.2,.8,.2,1)',
               }}/>

          {/* Orange duotone wash — fades on hover */}
          <div className="vt-wash" style={{
            position: 'absolute', inset: 0,
            background: 'linear-gradient(180deg, rgba(240,85,3,0.18) 0%, rgba(240,85,3,0.05) 40%, rgba(5,5,5,0.55) 100%)',
            mixBlendMode: 'multiply',
            transition: 'opacity 0.6s',
          }}/>

          {/* Scan lines */}
          <div style={{
            position: 'absolute', inset: 0,
            backgroundImage: 'repeating-linear-gradient(0deg, rgba(0,0,0,0.18) 0 1px, transparent 1px 3px)',
            mixBlendMode: 'multiply', pointerEvents: 'none',
          }}/>

          {/* Grain */}
          <div className="vt-grain" style={{
            position: 'absolute', inset: 0,
            opacity: 0.35, mixBlendMode: 'overlay', pointerEvents: 'none',
            backgroundImage: 'url("data:image/svg+xml;utf8,<svg xmlns=%22http://www.w3.org/2000/svg%22 width=%22120%22 height=%22120%22><filter id=%22n%22><feTurbulence baseFrequency=%220.9%22 numOctaves=%222%22 stitchTiles=%22stitch%22/></filter><rect width=%22120%22 height=%22120%22 filter=%22url(%23n)%22 opacity=%220.6%22/></svg>")',
          }}/>

          {/* Corner brackets — appear on hover */}
          <svg className="vt-frame" width="100%" height="100%"
               style={{ position: 'absolute', inset: 0, pointerEvents: 'none' }}
               preserveAspectRatio="none" viewBox="0 0 100 100">
            <path d="M2,12 L2,2 L12,2" stroke="var(--accent)" strokeWidth="0.4" fill="none"/>
            <path d="M88,2 L98,2 L98,12" stroke="var(--accent)" strokeWidth="0.4" fill="none"/>
            <path d="M2,88 L2,98 L12,98" stroke="var(--accent)" strokeWidth="0.4" fill="none"/>
            <path d="M88,98 L98,98 L98,88" stroke="var(--accent)" strokeWidth="0.4" fill="none"/>
          </svg>

          {/* REC dot + filename top-left */}
          <div style={{
            position: 'absolute', top: 20, left: 20,
            display: 'flex', alignItems: 'center', gap: 8, zIndex: 2,
          }}>
            <span className="vt-rec" style={{
              width: 7, height: 7, borderRadius: '50%',
              background: 'var(--accent)',
              boxShadow: '0 0 8px rgba(240,85,3,0.8)',
            }}/>
            <span className="mono uppercase tracked" style={{ fontSize: 10, color: 'var(--fg)' }}>
              PORTRAIT_VT_001.RAW
            </span>
          </div>

          {/* Crosshair top-right */}
          <div style={{
            position: 'absolute', top: 20, right: 20,
            fontFamily: 'var(--mono)', fontSize: 9, color: 'var(--fg-dim)',
            letterSpacing: '0.1em', textAlign: 'right', lineHeight: 1.4,
            zIndex: 2,
          }}>
            <div>2026 · SP</div>
            <div style={{ color: 'var(--accent)' }}>● LIVE</div>
          </div>

          {/* Camera meta bottom */}
          <div style={{
            position: 'absolute', bottom: 0, left: 0, right: 0,
            padding: '20px 20px 18px',
            background: 'linear-gradient(180deg, transparent 0%, rgba(5,5,5,0.85) 100%)',
            display: 'flex', justifyContent: 'space-between', alignItems: 'flex-end',
            zIndex: 2,
          }}>
            <div className="mono uppercase tracked" style={{ fontSize: 10, color: 'var(--fg-dim)' }}>
              ISO 400 · 50MM · F/1.8
            </div>
            <div className="mono uppercase tracked" style={{ fontSize: 10, color: 'var(--accent)' }}>
              ↳ FRAME 24/24
            </div>
          </div>
        </div>

        {/* Text */}
        <div style={{
          opacity: inView ? 1 : 0,
          transform: inView ? 'translateY(0)' : 'translateY(40px)',
          transition: 'opacity 1.2s 0.2s, transform 1.2s 0.2s cubic-bezier(.2,.8,.2,1)',
        }}>
          <div className="display" style={{
            fontSize: 'clamp(28px, 3.4vw, 48px)',
            lineHeight: 1.1,
            letterSpacing: '-0.03em',
            color: 'var(--fg)',
            marginBottom: 32,
          }}>
            Direção criativa, <br />
            <span style={{ color: 'var(--accent)' }}>estratégia</span> &amp; <br />
            execução.
          </div>
          <p style={{ fontSize: 17, lineHeight: 1.6, color: 'var(--fg)', marginBottom: 24 }}>
            Lidero a Stund construindo marcas que não apenas <span style={{ color: 'var(--fg-dim)' }}>aparecem</span> —
            dominam atenção e convertem. Trabalhamos com empresas, artistas e eventos que se recusam a ser só mais um.
          </p>
          <p style={{ fontSize: 15, lineHeight: 1.6, color: 'var(--fg-dim)', marginBottom: 48 }}>
            Cada projeto começa com uma pergunta: <em style={{ color: 'var(--fg)', fontStyle: 'normal' }}>o que essa marca quer que o mundo sinta?</em>
            Tudo depois disso é execução.
          </p>
          <div style={{
            paddingTop: 24, borderTop: '1px solid var(--line)',
            display: 'flex', alignItems: 'center', justifyContent: 'space-between',
          }}>
            <div>
              <div className="display" style={{ fontSize: 24, color: 'var(--fg)', letterSpacing: '-0.02em' }}>
                Victor Temoteo
              </div>
              <div className="mono uppercase tracked" style={{ fontSize: 10, color: 'var(--fg-dim)', marginTop: 4 }}>
                Fundador & Diretor Criativo
              </div>
            </div>
            <svg width="44" height="44" viewBox="0 0 44 44" fill="none">
              <path d="M10 10 Q22 14 34 22 Q22 30 14 34" stroke="var(--accent)" strokeWidth="1.2" fill="none" strokeLinecap="round"/>
            </svg>
          </div>
        </div>
      </div>
      <style>{`
        @media (max-width: 900px) {
          .sobre-grid { grid-template-columns: 1fr !important; gap: 40px !important; }
          .vt-portrait { max-width: 320px !important; }
        }
        .vt-portrait:hover .vt-img {
          filter: grayscale(0) contrast(1.08) brightness(1) !important;
          transform: scale(1.03);
        }
        .vt-portrait:hover .vt-wash { opacity: 0.35; }
        .vt-portrait .vt-wash { opacity: 1; }
        .vt-portrait:hover .vt-frame path { stroke-width: 0.7; }
        .vt-portrait .vt-frame path { transition: stroke-width 0.4s; }
        @keyframes vt-rec-pulse {
          0%, 100% { opacity: 1; transform: scale(1); }
          50% { opacity: 0.4; transform: scale(0.85); }
        }
        .vt-rec { animation: vt-rec-pulse 1.6s ease-in-out infinite; }
      `}</style>
    </section>
  );
}

// ─────────────────────── Footer ────────────────────────────────────────────
function Footer() {
  return (
    <footer style={{ padding: '80px 6vw 0', background: '#050505', borderTop: '1px solid var(--line)' }}>
      <div style={{
        display: 'grid', gridTemplateColumns: '1.4fr 1fr 1fr', gap: 60,
        marginBottom: 80,
      }} className="footer-grid">
        <div>
          <div style={{ display: 'flex', alignItems: 'center', gap: 14, marginBottom: 24 }}>
            <img src="assets/logo-stund.png" alt="Stund" style={{ width: 40, height: 40, objectFit: 'contain' }} />
            <span className="display" style={{ fontSize: 32, letterSpacing: '-0.04em' }}>STUND</span>
          </div>
          <p style={{ fontSize: 14, lineHeight: 1.5, color: 'var(--fg-dim)', maxWidth: 320 }}>
            Estúdio criativo de produção audiovisual e gestão de mídia social.
            Estética, inteligência, consistência.
          </p>
        </div>

        <div>
          <div className="mono uppercase tracked" style={{ fontSize: 10, color: 'var(--accent)', marginBottom: 20 }}>
            ↳ CONTATO
          </div>
          <div style={{ display: 'flex', flexDirection: 'column', gap: 10 }}>
            <a href="mailto:contato@stund.com.br" data-cursor="link" className="ulink" style={{ fontSize: 14, color: 'var(--fg)' }}>
              contato@stund.com.br
            </a>
            <a href="https://wa.me/5511915636178?text=Oi%20Stund!%20Cheguei%20pelo%20site%20e%20queria%20conversar%20sobre%20um%20projeto." target="_blank" rel="noreferrer" data-cursor="link" className="ulink" style={{ fontSize: 14, color: 'var(--fg)' }}>
              +55 11 91563-6178
            </a>
            <span style={{ fontSize: 13, color: 'var(--fg-dim)' }}>
              São Paulo · Brasil
            </span>
          </div>
        </div>

        <div>
          <div className="mono uppercase tracked" style={{ fontSize: 10, color: 'var(--accent)', marginBottom: 20 }}>
            ↳ REDES
          </div>
          <div style={{ display: 'flex', flexDirection: 'column', gap: 10 }}>
            {[
              { name: 'Instagram', href: 'https://www.instagram.com/stundagency/' },
              { name: 'YouTube',   href: '#' },
            ].map((s) => (
              <a key={s.name} href={s.href} target="_blank" rel="noreferrer" data-cursor="link" className="ulink" style={{
                fontSize: 14, color: 'var(--fg)',
                display: 'inline-flex', alignItems: 'center', gap: 8,
              }}>
                {s.name}
                <span style={{ fontSize: 10, color: 'var(--fg-soft)' }}>↗</span>
              </a>
            ))}
          </div>
        </div>
      </div>

      <div style={{ height: 1, background: 'var(--accent)', width: '100%' }} />

      <div style={{
        padding: '32px 0',
        display: 'flex', justifyContent: 'space-between', alignItems: 'center',
        flexWrap: 'wrap', gap: 16,
      }}>
        <div className="mono uppercase tracked" style={{ fontSize: 10, color: 'var(--fg-dim)' }}>
          © 2026 STUND. TODOS OS DIREITOS RESERVADOS.
        </div>
        <div className="mono uppercase tracked" style={{ fontSize: 10, color: 'var(--fg-dim)' }}>
          BUILT IN SP · 23°33′S 46°38′W
        </div>
      </div>

      {/* Outline STUND gigante */}
      <div style={{
        textAlign: 'center',
        overflow: 'hidden',
        margin: '0 -6vw',
        padding: '40px 0 0',
      }}>
        <div className="display" style={{
          fontSize: 'clamp(120px, 30vw, 540px)',
          lineHeight: 0.85,
          fontWeight: 700,
          letterSpacing: '-0.06em',
          color: 'transparent',
          WebkitTextStroke: '1.5px var(--accent)',
          textStroke: '1.5px var(--accent)',
          userSelect: 'none',
          marginBottom: -40,
        }}>
          STUND
        </div>
      </div>

      <style>{`
        @media (max-width: 900px) {
          .footer-grid { grid-template-columns: 1fr !important; gap: 40px !important; }
        }
      `}</style>
    </footer>
  );
}

// ─────────────────────── WhatsApp button ──────────────────────────────────
function WhatsappFab() {
  return (
    <a href="https://wa.me/5511915636178?text=Oi%20Stund!%20Cheguei%20pelo%20site%20e%20queria%20conversar%20sobre%20um%20projeto." target="_blank" rel="noreferrer" data-cursor="link"
       data-magnetic="true"
       style={{
         position: 'fixed', bottom: 28, right: 28,
         zIndex: 90,
         width: 56, height: 56, borderRadius: '50%',
         background: '#050505',
         border: '1px solid var(--accent)',
         display: 'flex', alignItems: 'center', justifyContent: 'center',
         boxShadow: '0 0 0 0 rgba(240,85,3,0.6)',
         animation: 'pulse 2.4s ease-in-out infinite',
         transition: 'transform .4s cubic-bezier(.2,.8,.2,1)',
       }}>
      <svg width="22" height="22" viewBox="0 0 24 24" fill="none" stroke="white" strokeWidth="1.6" strokeLinecap="round" strokeLinejoin="round">
        <path d="M21 11.5a8.38 8.38 0 0 1-.9 3.8 8.5 8.5 0 0 1-7.6 4.7 8.38 8.38 0 0 1-3.8-.9L3 21l1.9-5.7a8.38 8.38 0 0 1-.9-3.8 8.5 8.5 0 0 1 4.7-7.6 8.38 8.38 0 0 1 3.8-.9h.5a8.48 8.48 0 0 1 8 8v.5z"/>
      </svg>
      <style>{`
        @keyframes pulse {
          0%,100% { box-shadow: 0 0 0 0 rgba(240,85,3,0.5); }
          50% { box-shadow: 0 0 0 14px rgba(240,85,3,0); }
        }
      `}</style>
    </a>
  );
}

Object.assign(window, { Manifesto, ClientesMarquee, Sobre, Footer, WhatsappFab, SectionHead, useInView, LetterReveal });
