// Footer.jsx v23 — top clean, bottom with pattern, responsive
function ChFooter({ onNavigate }) {
  const isMobile = window.useIsMobile();

  const links = [
    { id: 'home',    label: 'Home' },
    { id: 'about',   label: 'About' },
    { id: 'books',   label: 'Books' },
    { id: 'blog',    label: 'Substack', href: 'https://clinicallyhappy.substack.com/', external: true },
    { id: 'contact', label: 'Contact' },
  ];

  return (
    <footer style={{ background: '#1B544F', color: '#fff', fontFamily: 'Montserrat, sans-serif' }}>

      {/* ── TOP: plain background, no pattern ── */}
      <div style={{
        maxWidth: 960, margin: '0 auto',
        padding: isMobile ? '56px 24px 40px' : '80px 40px 40px',
        display: 'flex', flexDirection: 'column', alignItems: 'center',
      }}>
        <a
          href="#home"
          onClick={(e) => { e.preventDefault(); onNavigate && onNavigate('home'); }}
          style={{
            display: 'flex', flexDirection: 'column', alignItems: 'center', gap: 14,
            textDecoration: 'none',
          }}
        >
          <img src="/assets/smile-mark.png" alt="Clinically Happy"
               style={{ width: 110, display: 'block' }} />
          <span style={{
            fontFamily: 'Montserrat, sans-serif', fontWeight: 700, fontSize: 12,
            letterSpacing: '5px', textTransform: 'uppercase', color: '#7FD6CF',
          }}>Clinically Happy</span>
        </a>
      </div>

      {/* ── DIVIDER + BOTTOM: pattern section ── */}
      <div style={{ position: 'relative', overflow: 'hidden' }}>

        {/* Pattern tile */}
        <div style={{
          position: 'absolute', inset: 0,
          backgroundImage: 'url(/assets/pattern-bg.png)',
          backgroundSize: isMobile ? '420px' : '600px',
          backgroundRepeat: 'repeat',
          backgroundPosition: 'center top',
          opacity: 0.18,
          mixBlendMode: 'soft-light',
          pointerEvents: 'none',
        }} />

        {/* Vignette: fades the edges so tiles disappear naturally */}
        <div style={{
          position: 'absolute', inset: 0,
          background: 'radial-gradient(ellipse 110% 100% at 50% 100%, transparent 35%, #1B544F 75%)',
          pointerEvents: 'none',
        }} />

        {/* Fade-in from top so pattern emerges from the solid section above */}
        <div style={{
          position: 'absolute', top: 0, left: 0, right: 0, height: 80,
          background: 'linear-gradient(to bottom, #1B544F, transparent)',
          pointerEvents: 'none',
        }} />

        <div style={{
          maxWidth: 960, margin: '0 auto',
          padding: isMobile ? '0 24px 40px' : '0 40px 56px',
          display: 'flex', flexDirection: 'column', alignItems: 'center',
          position: 'relative', zIndex: 1,
        }}>

          {/* Hairline / green divider */}
          <div style={{
            width: '100%', height: 1,
            background: 'rgba(127,214,207,0.30)',
            marginBottom: 36,
          }} />

          {/* Tagline */}
          <p style={{
            color: 'rgba(255,255,255,0.60)', fontSize: 14, lineHeight: 1.75,
            textAlign: 'center', margin: '0 0 32px', letterSpacing: '0.2px',
          }}>
            Real Psychologists. Real Science. Real Life.
          </p>

          {/* Nav links */}
          <nav style={{
            display: 'flex', flexWrap: 'wrap', justifyContent: 'center',
            gap: '8px 28px', marginBottom: 36,
          }}>
            {links.map((l) => <FooterLink key={l.id} item={l} onNavigate={onNavigate} />)}
          </nav>

          {/* Stan Store */}
          <StanStoreButton />
        </div>

        {/* Copyright bar */}
        <div style={{
          borderTop: '1px solid rgba(127,214,207,0.12)',
          padding: isMobile ? '16px 24px' : '18px 40px',
          position: 'relative', zIndex: 1,
          display: 'flex',
          flexDirection: isMobile ? 'column' : 'row',
          justifyContent: 'center', alignItems: 'center',
          gap: isMobile ? 6 : 28,
          color: 'rgba(255,255,255,0.32)', fontSize: 10,
          letterSpacing: '1.5px', textTransform: 'uppercase',
          fontFamily: 'Montserrat, sans-serif', textAlign: 'center',
        }}>
          <span>© 2013-2026 Clinically Happy</span>
          {!isMobile && <span style={{ color: 'rgba(255,255,255,0.15)' }}>·</span>}
          <a
            href="#privacy"
            onClick={(e) => { e.preventDefault(); onNavigate && onNavigate('privacy'); }}
            style={{ color: 'inherit', textDecoration: 'none', transition: 'color 200ms ease' }}
            onMouseEnter={(e) => { e.currentTarget.style.color = 'rgba(127,214,207,0.80)'; }}
            onMouseLeave={(e) => { e.currentTarget.style.color = ''; }}
          >Privacy &amp; Disclaimers</a>
        </div>
      </div>
    </footer>
  );
}

function FooterLink({ item, onNavigate }) {
  const [hover, setHover] = React.useState(false);
  const style = {
    color: hover ? '#7FD6CF' : 'rgba(255,255,255,0.68)',
    textDecoration: 'none',
    fontSize: 12, fontWeight: 600, letterSpacing: '2px', textTransform: 'uppercase',
    transition: 'color 200ms ease',
  };
  if (item.external) {
    return (
      <a href={item.href} target="_blank" rel="noopener noreferrer"
         onMouseEnter={() => setHover(true)} onMouseLeave={() => setHover(false)}
         style={style}>{item.label}</a>
    );
  }
  return (
    <a href={`#${item.id}`}
       onClick={(e) => { e.preventDefault(); onNavigate && onNavigate(item.id); }}
       onMouseEnter={() => setHover(true)} onMouseLeave={() => setHover(false)}
       style={style}>{item.label}</a>
  );
}

function StanStoreButton() {
  const [hover, setHover] = React.useState(false);
  return (
    <a href="https://stan.store/infoclinicallyhappyca" target="_blank" rel="noopener noreferrer"
       onMouseEnter={() => setHover(true)} onMouseLeave={() => setHover(false)}
       style={{
         display: 'inline-flex', alignItems: 'center', gap: 10,
         padding: '14px 32px', borderRadius: 999,
         background: hover ? '#fff' : '#7FD6CF',
         color: '#0E3B37', textDecoration: 'none',
         fontSize: 12, fontWeight: 700, letterSpacing: '1.5px', textTransform: 'uppercase',
         boxShadow: hover
           ? '0 16px 36px rgba(127,214,207,0.40), 0 0 0 4px rgba(127,214,207,0.18)'
           : '0 6px 20px rgba(127,214,207,0.22)',
         transform: hover ? 'translateY(-2px) scale(1.04)' : 'translateY(0) scale(1)',
         transition: 'all 240ms cubic-bezier(0.22, 0.61, 0.36, 1)',
       }}>
      <svg width="15" height="15" viewBox="0 0 24 24" fill="none"
           stroke="currentColor" strokeWidth="2.2" strokeLinecap="round" strokeLinejoin="round">
        <circle cx="12" cy="12" r="10" />
        <path d="M8 14s1.5 2 4 2 4-2 4-2" />
        <line x1="9" y1="9" x2="9.01" y2="9" />
        <line x1="15" y1="9" x2="15.01" y2="9" />
      </svg>
      Find us on Stan Store
      <svg width="12" height="12" viewBox="0 0 24 24" fill="none"
           stroke="currentColor" strokeWidth="2.5" strokeLinecap="round" strokeLinejoin="round">
        <path d="M7 17 17 7" /><path d="M8 7h9v9" />
      </svg>
    </a>
  );
}

window.ChFooter = ChFooter;