// Shared tokens, helpers, top nav and floating CTA
const { useState, useEffect, useRef } = React;

const C = {
  ink: '#0E3B3A',
  inkDeep: '#072A29',
  inkDark: '#050708',
  coral: '#E89A8E',
  coralDeep: '#C97B6E',
  neon: '#FF8B7A',
  cream: '#F4EDE3',
  paper: '#FAF6F0',
  bone: '#EDE4D6',
  white: '#FFFFFF',
};

const WA_NUMBER = '5571992628880';
const waLink = (msg) => `https://wa.me/${WA_NUMBER}?text=${encodeURIComponent(msg)}`;

// Eyebrow
function Eyebrow({ children, light }) {
  return (
    <div className="inline-flex items-center gap-2 text-[11px] uppercase font-semibold" style={{ letterSpacing: '0.3em', color: light ? C.neon : C.coralDeep, fontFamily: 'Inter, sans-serif' }}>
      <span className="w-1.5 h-1.5 rounded-full" style={{ background: light ? C.neon : C.coralDeep, boxShadow: light ? '0 0 8px ' + C.neon : 'none' }}></span>
      {children}
    </div>
  );
}

// Pill
function Pill({ children, dark }) {
  return (
    <span className="inline-flex items-center gap-2 px-3 py-1.5 rounded-full text-[10px] uppercase font-semibold" style={{
      letterSpacing: '0.3em',
      background: dark ? 'rgba(255,139,122,0.06)' : 'rgba(232,154,142,0.12)',
      color: dark ? C.neon : C.coralDeep,
      border: `1px solid ${dark ? 'rgba(255,139,122,0.3)' : 'rgba(232,154,142,0.3)'}`,
      fontFamily: 'Inter, sans-serif'
    }}>
      <span className="w-1.5 h-1.5 rounded-full" style={{ background: 'currentColor', boxShadow: '0 0 8px currentColor' }}></span>
      {children}
    </span>
  );
}

// Primary CTA — coral pill com seta
function PrimaryCTA({ href, children, sub, target }) {
  return (
    <a href={href} target={target} rel="noopener" className="group inline-flex items-center gap-4 pl-6 pr-3 py-3 rounded-full transition hover:scale-[1.03] neon-glow" style={{ background: C.neon, color: C.inkDeep }}>
      <div className="text-left">
        <div className="font-display tracking-tight" style={{ fontWeight: 700, fontSize: 15 }}>{children}</div>
        {sub && <div className="text-[11px] opacity-70 -mt-0.5">{sub}</div>}
      </div>
      <span className="w-9 h-9 rounded-full flex items-center justify-center transition group-hover:translate-x-1" style={{ background: C.inkDeep, color: C.neon }}>→</span>
    </a>
  );
}

function GhostCTA({ href, children, target }) {
  return (
    <a href={href} target={target} rel="noopener" className="inline-flex items-center justify-center gap-2 px-7 py-4 rounded-full transition hover:bg-white/5 font-display" style={{ border: '1px solid rgba(255,139,122,0.4)', color: C.cream, fontWeight: 700, fontSize: 15 }}>
      {children}
    </a>
  );
}

function LightCTA({ href, children }) {
  return (
    <a href={href} className="inline-flex items-center gap-2 px-6 py-3 rounded-full font-display transition hover:scale-[1.03]" style={{ background: C.ink, color: C.cream, fontWeight: 700, fontSize: 14, letterSpacing: '-0.01em' }}>
      {children}
    </a>
  );
}

// ===== Top Navigation =====
function TopNav() {
  const [scrolled, setScrolled] = useState(false);
  useEffect(() => {
    const onScroll = () => setScrolled(window.scrollY > 40);
    window.addEventListener('scroll', onScroll);
    return () => window.removeEventListener('scroll', onScroll);
  }, []);

  const links = [
    ['Consulta', '#consulta'],
    ['Tratamentos', '#areas'],
    ['Protocolos', '#protocolos'],
    ['Avaliações', '#avaliacoes'],
    ['FAQ', '#faq'],
  ];

  return (
    <div className={`fixed top-0 left-0 right-0 z-50 transition-all`} style={{
      background: scrolled ? 'rgba(5,7,8,0.78)' : 'transparent',
      backdropFilter: scrolled ? 'blur(20px) saturate(140%)' : 'none',
      borderBottom: scrolled ? '1px solid rgba(255,139,122,0.12)' : '1px solid transparent'
    }}>
      <div className="max-w-[1400px] mx-auto px-5 md:px-8 py-4 flex items-center justify-between">
        <a href="#top" className="flex items-center gap-3">
          <img src="assets/nubelle-logo-escrito-branco.png" alt="Nubelle Salvador" style={{ height: 26, width: 'auto' }} />
        </a>
        <nav className="hidden md:flex items-center gap-9">
          {links.map(([l, h]) => (
            <a key={l} href={h} className="nav-link text-sm font-display tracking-tight" style={{ fontWeight: 500 }}>{l}</a>
          ))}
        </nav>
        <a href={waLink('Olá! Quero agendar minha Consulta Estratégica na Nubelle.')} target="_blank" rel="noopener" className="inline-flex items-center gap-2 px-5 py-2.5 rounded-full text-xs uppercase tracking-[0.2em] font-display transition hover:scale-[1.03]" style={{ background: C.neon, color: C.inkDeep, fontWeight: 700, boxShadow: '0 8px 24px -6px rgba(255,139,122,0.5)' }}>
          Agendar consulta
        </a>
      </div>
    </div>
  );
}

// ===== Floating WhatsApp =====
function FloatingCTA() {
  const [shown, setShown] = useState(false);
  useEffect(() => {
    const onScroll = () => setShown(window.scrollY > 800);
    window.addEventListener('scroll', onScroll);
    return () => window.removeEventListener('scroll', onScroll);
  }, []);
  return (
    <a href={waLink('Olá! Vim do site da Nubelle Salvador e quero falar com a equipe.')} target="_blank" rel="noopener"
      className={`fixed bottom-6 right-6 z-50 transition-all duration-500 ${shown ? 'opacity-100 translate-y-0' : 'opacity-0 translate-y-8 pointer-events-none'}`}>
      <div className="flex items-center gap-3 px-5 py-4 rounded-full shadow-2xl hover:scale-105 transition-transform" style={{ background: C.coral, color: C.ink, boxShadow: '0 20px 50px -10px rgba(216,125,112,0.5)' }}>
        <svg width="22" height="22" viewBox="0 0 24 24" fill="currentColor"><path d="M17.6 6.32A7.85 7.85 0 0 0 12.05 4a7.94 7.94 0 0 0-6.88 11.9L4 20l4.2-1.1a7.93 7.93 0 0 0 3.84.98h.01a7.94 7.94 0 0 0 5.55-13.56zm-5.55 12.21h-.01a6.6 6.6 0 0 1-3.36-.92l-.24-.14-2.5.65.67-2.43-.16-.25a6.6 6.6 0 1 1 12.24-3.5 6.6 6.6 0 0 1-6.64 6.59zm3.61-4.93c-.2-.1-1.17-.58-1.35-.64-.18-.07-.31-.1-.45.1s-.51.64-.62.78c-.12.13-.23.15-.42.05-.2-.1-.84-.31-1.6-.99-.59-.52-.99-1.17-1.1-1.37-.12-.2-.01-.3.09-.4.09-.09.2-.23.3-.35.1-.12.13-.2.2-.33.06-.13.03-.25-.02-.35-.05-.1-.45-1.08-.62-1.48-.16-.39-.33-.34-.45-.34l-.38-.01a.74.74 0 0 0-.53.25c-.18.2-.7.69-.7 1.67 0 .98.71 1.93.81 2.07.1.13 1.4 2.13 3.4 2.99.47.2.84.33 1.13.42.48.15.91.13 1.25.08.38-.06 1.17-.48 1.34-.94.16-.46.16-.86.12-.94-.05-.09-.18-.14-.38-.24z"/></svg>
        <span className="font-medium tracking-tight">Falar no WhatsApp</span>
      </div>
    </a>
  );
}

// Image placeholder — striped, with monospace label
function ImgPlaceholder({ label, ratio = '4/5', className = '', tone = 'dark' }) {
  const isDark = tone === 'dark';
  return (
    <div className={`relative overflow-hidden ${className}`} style={{ aspectRatio: ratio,
      background: isDark
        ? `repeating-linear-gradient(135deg, rgba(244,237,227,0.04) 0 12px, rgba(244,237,227,0.07) 12px 24px)`
        : `repeating-linear-gradient(135deg, rgba(14,59,58,0.04) 0 12px, rgba(14,59,58,0.07) 12px 24px)`,
      border: isDark ? '1px solid rgba(255,139,122,0.18)' : '1px solid rgba(14,59,58,0.1)',
      borderRadius: 32
    }}>
      <div className="absolute inset-0 flex items-center justify-center">
        <div className="text-center" style={{ color: isDark ? 'rgba(244,237,227,0.55)' : 'rgba(14,59,58,0.55)' }}>
          <div className="text-[10px] uppercase tracking-[0.3em] mb-2" style={{ fontFamily: 'ui-monospace, SFMono-Regular, Menlo, monospace' }}>imagem</div>
          <div className="text-sm" style={{ fontFamily: 'ui-monospace, SFMono-Regular, Menlo, monospace' }}>{label}</div>
        </div>
      </div>
    </div>
  );
}

Object.assign(window, { C, waLink, Eyebrow, Pill, PrimaryCTA, GhostCTA, LightCTA, TopNav, FloatingCTA, ImgPlaceholder });
