/* global React, RecruitButton, Kicker, TopoLines, useBreakpoint, BC_BOOKING_URL */

// Dropdown menu link — teal→lime hover shift with sliding arrow.
function MenuLink({ href, label, isLast, onClick }) {
  const [hover, setHover] = React.useState(false);
  return (
    <a
      href={href}
      onClick={onClick}
      onMouseEnter={() => setHover(true)}
      onMouseLeave={() => setHover(false)}
      style={{
        display: 'flex', alignItems: 'center', justifyContent: 'space-between',
        color: hover ? '#BADA55' : 'rgba(255,255,255,0.82)',
        textDecoration: 'none',
        padding: '14px 8px',
        paddingLeft: hover ? 20 : 8,
        borderBottom: isLast ? 'none' : '1px solid rgba(255,255,255,0.06)',
        fontSize: 13, fontWeight: 700, letterSpacing: '0.16em', textTransform: 'uppercase',
        transition: 'color 220ms ease, padding-left 220ms cubic-bezier(0.2,0.8,0.2,1)',
      }}
    >
      <span>{label}</span>
      <span style={{
        color: hover ? '#BADA55' : '#1495B9',
        transform: hover ? 'translateX(4px)' : 'translateX(0)',
        transition: 'transform 220ms cubic-bezier(0.2,0.8,0.2,1), color 220ms ease',
        fontSize: 14,
      }}>→</span>
    </a>
  );
}

// NAV — sticky navy, full-bleed. Collapses links into a hamburger below ~900px.
function Nav({ variant, seats }) {
  const isBold = variant === 'bold';
  const [menuOpen, setMenuOpen] = React.useState(false);
  const bp = useBreakpoint();
  const isNarrow = bp !== 'desktop';

  const linkStyle = { color: 'rgba(255,255,255,0.82)', textDecoration: 'none' };
  const links = [
    { href: '#trail', label: "The Trail" },
    { href: '#who',   label: "Who It's For" },
    { href: '#proof', label: "Proof" },
    { href: '#faq',   label: "FAQ" },
  ];

  return (
    <nav style={{
      position: 'sticky', top: 0, zIndex: 10,
      background: 'rgba(15, 35, 65, 0.92)',
      backdropFilter: 'saturate(140%) blur(8px)',
      WebkitBackdropFilter: 'saturate(140%) blur(8px)',
      borderBottom: '1px solid rgba(255,255,255,0.08)',
    }}>
      <div style={{ display: 'flex', alignItems: 'center', justifyContent: 'space-between', maxWidth: 1200, margin: '0 auto', padding: '14px 24px', gap: 12 }}>
        <a href="#" style={{ color: '#fff', fontWeight: 900, letterSpacing: '0.08em', fontSize: 13, textDecoration: 'none', display: 'flex', alignItems: 'center', gap: 8, flexShrink: 0 }}>
          {isBold && <span style={{ fontSize: 18 }}>🧭</span>}
          <span style={{ color: '#1495B9' }}>BASECAMP</span>
        </a>

        {/* Desktop inline links — hidden on tablet/mobile */}
        {!isNarrow && (
          <div style={{ display: 'flex', gap: 28, fontSize: 12, fontWeight: 700, letterSpacing: '0.16em', textTransform: 'uppercase' }}>
            {links.map(l => <a key={l.href} href={l.href} style={linkStyle}>{l.label}</a>)}
          </div>
        )}

        <div style={{ display: 'flex', alignItems: 'center', gap: 12, flexShrink: 0 }}>
          {/* Seats pill — visible everywhere but tucks down to fewer chars on mobile */}
          <div style={{
            fontSize: 11, letterSpacing: '0.14em', textTransform: 'uppercase', fontWeight: 800,
            color: '#BADA55', display: 'flex', alignItems: 'center', gap: 8,
            padding: '6px 12px', borderRadius: 9999,
            background: 'rgba(186, 218, 85, 0.10)',
            border: '1px solid rgba(186, 218, 85, 0.42)',
            animation: 'bc-seat-halo 2.8s ease-in-out infinite',
            whiteSpace: 'nowrap',
          }}>
            <span style={{ width: 7, height: 7, borderRadius: '50%', background: '#BADA55', boxShadow: '0 0 8px rgba(186,218,85,0.9)', animation: 'bc-pulse 1.8s ease-in-out infinite' }}/>
            <span key={seats} style={{ display: 'inline-block', animation: 'bc-seat-flash 700ms cubic-bezier(0.2,0.8,0.2,1)' }}>
              <strong style={{ fontSize: 13, fontWeight: 900 }}>{seats}</strong>{bp === 'mobile' ? ' left' : ' of 10 seats'}
            </span>
          </div>

          <RecruitButton variant="lime" size="sm" href="apply.html">Apply</RecruitButton>

          {/* Hamburger — shown on tablet/mobile */}
          {isNarrow && (
            <button onClick={() => setMenuOpen(o => !o)} aria-label="Menu" aria-expanded={menuOpen} style={{
              background: 'transparent', border: '1px solid rgba(255,255,255,0.3)',
              color: '#fff', padding: 8, borderRadius: 10, cursor: 'pointer',
              display: 'inline-flex', alignItems: 'center', justifyContent: 'center',
              width: 38, height: 38,
            }}>
              <svg width="18" height="14" viewBox="0 0 18 14" aria-hidden>
                {menuOpen
                  ? <g stroke="#fff" strokeWidth="2" strokeLinecap="round"><line x1="2" y1="2" x2="16" y2="12"/><line x1="16" y1="2" x2="2" y2="12"/></g>
                  : <g stroke="#fff" strokeWidth="2" strokeLinecap="round"><line x1="1" y1="2"  x2="17" y2="2"/><line x1="1" y1="7"  x2="17" y2="7"/><line x1="1" y1="12" x2="17" y2="12"/></g>}
              </svg>
            </button>
          )}
        </div>
      </div>

      {/* Mobile/tablet dropdown panel — frosted navy to match the nav bar */}
      {isNarrow && menuOpen && (
        <div style={{
          background: 'rgba(15, 35, 65, 0.96)',
          backdropFilter: 'saturate(140%) blur(8px)',
          WebkitBackdropFilter: 'saturate(140%) blur(8px)',
          borderTop: '1px solid rgba(186, 218, 85, 0.18)',
          padding: '4px 24px 12px',
          animation: 'bc-menu-drop 220ms cubic-bezier(0.2,0.8,0.2,1)',
        }}>
          <div style={{ display: 'flex', flexDirection: 'column', maxWidth: 1200, margin: '0 auto' }}>
            {links.map((l, i) => (
              <MenuLink key={l.href} href={l.href} label={l.label} isLast={i === links.length - 1} onClick={() => setMenuOpen(false)}/>
            ))}
          </div>
        </div>
      )}
      <style>{`
        @keyframes bc-menu-drop {
          from { opacity: 0; transform: translateY(-8px); }
          to   { opacity: 1; transform: translateY(0); }
        }
      `}</style>
    </nav>
  );
}

// AnimatedWords — splits a string on spaces, rises each word in sequence.
function AnimatedWords({ text, color, delayBase = 0, stagger = 80 }) {
  const words = String(text).split(' ');
  return words.map((w, i) => (
    <span key={`${i}-${w}`} style={{
      display: 'inline-block',
      opacity: 0,
      color,
      transform: 'translateY(18px)',
      animation: `bc-word-rise 760ms cubic-bezier(0.2,0.8,0.2,1) ${delayBase + i * stagger}ms forwards`,
    }}>
      {w}{'\u00A0'}
    </span>
  ));
}

// HERO
function Hero({ variant, headline, seats, imgBase = 'assets' }) {
  const isBold = variant === 'bold';
  return (
    <section style={{
      position: 'relative', overflow: 'hidden', color: '#fff',
      padding: '120px 24px 140px',
      background: `
        radial-gradient(70% 55% at 80% 0%, rgba(20,149,185,0.30), transparent 60%),
        linear-gradient(180deg, rgba(15,35,65,0.68) 0%, rgba(7,19,38,0.92) 100%),
        url("assets/basecamp-hero-mountains.jpg") center/cover no-repeat
      `,
    }}>
      {isBold && <TopoLines opacity={0.12} color="#BADA55"/>}
      <div style={{
        maxWidth: 1200, margin: '0 auto', position: 'relative',
        display: 'grid',
        gridTemplateColumns: isBold ? 'minmax(0, 1.1fr) minmax(0, 0.9fr)' : '1fr',
        gap: isBold ? 60 : 0, alignItems: 'center',
      }}>
        <div>
          <div style={{
            display: 'inline-flex', alignItems: 'center', gap: 10,
            padding: '6px 14px', borderRadius: 9999,
            background: isBold ? 'rgba(186, 218, 85, 0.14)' : 'rgba(20,149,185,0.16)',
            border: `1px solid ${isBold ? 'rgba(186, 218, 85, 0.35)' : 'rgba(20,149,185,0.35)'}`,
            fontSize: 12, fontWeight: 700, letterSpacing: '0.16em', textTransform: 'uppercase',
            color: isBold ? '#BADA55' : '#1495B9', marginBottom: 28,
          }}>
            <span style={{ width: 6, height: 6, borderRadius: '50%', background: isBold ? '#BADA55' : '#1495B9' }}/>
            {isBold ? 'Next expedition · 10 weeks · Online' : 'Next cohort · 10 weeks · Online'}
          </div>

          <h1 style={{
            fontFamily: '"Lato", Arial, sans-serif', fontWeight: 900,
            fontSize: isBold ? 'clamp(46px, 5.6vw, 84px)' : 'clamp(48px, 6.4vw, 92px)',
            lineHeight: 1.02, letterSpacing: '-0.01em',
            margin: '0 0 24px', maxWidth: '16ch', color: '#fff',
          }}>
            {headline ? (
              <AnimatedWords text={headline} color="#fff"/>
            ) : isBold ? (
              <>
                <AnimatedWords text="Pack your book." color="#fff"/>
                <AnimatedWords text="We head up Monday." color="#BADA55" delayBase={280}/>
              </>
            ) : (
              <>
                <AnimatedWords text="From Health to Wealth" color="#fff"/>
                <AnimatedWords text="in 10 weeks." color="#1495B9" delayBase={340}/>
              </>
            )}
          </h1>

          <p style={{
            fontSize: 'clamp(17px, 1.3vw, 20px)', maxWidth: '52ch',
            color: 'rgba(255,255,255,0.85)', margin: '0 0 32px', lineHeight: 1.55,
          }}>
            {isBold
              ? "You know Medicare. You've built the book. Now it's time to lead your clients up the mountain — to real retirement income, real annuity expertise, real career growth. BaseCamp is the expedition."
              : "A 10-week online program that teaches Medicare agents how to confidently cross-sell annuities to their existing book. Mentor-led. Cohort-based. 10 seats per class."
            }
          </p>

          <div style={{ display: 'flex', gap: 16, flexWrap: 'wrap', alignItems: 'center', marginBottom: 16 }}>
            <RecruitButton variant="lime" size="lg" href="apply.html">
              {isBold ? 'Reserve Your Seat' : 'Apply Now'}
            </RecruitButton>
            <RecruitButton variant="outline-light" href={BC_BOOKING_URL} target="_blank" rel="noopener noreferrer">Talk To Your Guide</RecruitButton>
          </div>
          <a href="#trail" style={{
            display: 'inline-flex', alignItems: 'center', gap: 6,
            color: 'rgba(255,255,255,0.72)', fontSize: 13, fontWeight: 700,
            letterSpacing: '0.14em', textTransform: 'uppercase',
            textDecoration: 'none', marginBottom: 40,
          }}>
            See the route <span aria-hidden>↓</span>
          </a>

          {/* Seats + cohort bar */}
          <div style={{
            display: 'grid', gridTemplateColumns: 'repeat(auto-fit, minmax(150px, 1fr))', gap: 0,
            border: '1px solid rgba(255,255,255,0.14)', borderRadius: 16,
            background: 'rgba(255,255,255,0.04)', backdropFilter: 'blur(6px)',
            maxWidth: 720,
          }}>
            {[
              { k: 'Format',   v: '10-week online' },
              { k: 'Cadence',  v: 'Weekly live + async' },
              { k: 'Cohort',   v: '10 agents, max' },
              { k: 'Seats',    v: (
                <span key={seats} style={{
                  display: 'inline-flex', alignItems: 'center', gap: 8,
                  padding: '4px 12px', borderRadius: 9999,
                  background: 'rgba(186, 218, 85, 0.12)',
                  border: '1px solid rgba(186, 218, 85, 0.42)',
                  color: '#BADA55', fontWeight: 900,
                  animation: 'bc-seat-halo 2.8s ease-in-out infinite, bc-seat-flash 700ms cubic-bezier(0.2,0.8,0.2,1)',
                }}>
                  <span style={{ width: 7, height: 7, borderRadius: '50%', background: '#BADA55', boxShadow: '0 0 8px rgba(186,218,85,0.9)', animation: 'bc-pulse 1.8s ease-in-out infinite' }}/>
                  {seats} remaining
                </span>
              ) },
            ].map((it, i, arr) => (
              <div key={it.k} style={{ padding: '14px 18px', borderRight: i < arr.length - 1 ? '1px solid rgba(255,255,255,0.08)' : 'none' }}>
                <div style={{ fontSize: 11, letterSpacing: '0.14em', textTransform: 'uppercase', color: 'rgba(255,255,255,0.55)', fontWeight: 700 }}>{it.k}</div>
                <div style={{ fontSize: 15, color: '#fff', fontWeight: 700, marginTop: 4 }}>{it.v}</div>
              </div>
            ))}
          </div>
        </div>

        {isBold && (
          <div style={{ position: 'relative', textAlign: 'center' }}>
            {/* Envelope with wax seal — centerpiece on right */}
            <div style={{ position: 'relative', display: 'inline-block', maxWidth: '100%' }}>
              <img
                src={`${imgBase}/basecamp-treasure-envelope.png`}
                alt="Sealed envelope — From Health to Wealth"
                style={{
                  width: '100%', maxWidth: 560, height: 'auto', display: 'block',
                  filter: 'drop-shadow(0 30px 60px rgba(0,0,0,0.5))',
                  animation: 'bc-envelope-float 5s ease-in-out infinite',
                  transformOrigin: 'center',
                }}
              />
              {/* "Your invitation" ribbon */}
              <div style={{
                position: 'absolute', top: -6, left: '50%',
                transform: 'translate(-50%, -100%) rotate(-3deg)',
                fontSize: 11, letterSpacing: '0.2em', textTransform: 'uppercase', fontWeight: 800,
                color: '#BADA55', whiteSpace: 'nowrap',
              }}>
                ✦ Your invitation ✦
              </div>
              {/* glow behind seal */}
              <div aria-hidden style={{
                position: 'absolute', inset: 0, pointerEvents: 'none',
                background: 'radial-gradient(circle at 50% 48%, rgba(186,218,85,0.22) 0%, transparent 40%)',
                filter: 'blur(8px)',
                animation: 'bc-glow 4s ease-in-out infinite',
              }}/>
            </div>
          </div>
        )}
      </div>
      <style>{`
        @keyframes bc-pulse { 0%,100% { opacity: 1 } 50% { opacity: 0.4 } }
        @keyframes bc-envelope-float {
          0%, 100% { transform: rotate(-1.5deg) translateY(0); }
          50%      { transform: rotate(1deg) translateY(-10px); }
        }
        @keyframes bc-glow {
          0%, 100% { opacity: 0.6; }
          50%      { opacity: 1; }
        }
        @keyframes bc-word-rise {
          0%   { opacity: 0; transform: translateY(18px); }
          100% { opacity: 1; transform: translateY(0); }
        }
        @keyframes bc-seat-halo {
          0%, 100% { box-shadow: 0 0 0 0 rgba(186, 218, 85, 0); }
          50%      { box-shadow: 0 0 0 6px rgba(186, 218, 85, 0.22); }
        }
        @keyframes bc-seat-flash {
          0%   { transform: scale(1.14); filter: drop-shadow(0 0 12px rgba(186,218,85,0.95)); }
          100% { transform: scale(1);    filter: drop-shadow(0 0 0 rgba(186,218,85,0)); }
        }
        @keyframes bc-text-glow {
          0%, 100% { text-shadow: 0 0 0 rgba(186,218,85,0); }
          50%      { text-shadow: 0 0 14px rgba(186,218,85,0.55); }
        }
      `}</style>
    </section>
  );
}

window.RecruitNav = Nav;
window.RecruitHero = Hero;