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

// FINAL CTA + FOOTER
function FinalCTA({ variant, seats }) {
  const isBold = variant === 'bold';
  return (
    <section id="apply" style={{
      padding: '120px 24px',
      background: isBold
        ? 'radial-gradient(60% 70% at 50% 30%, rgba(186,218,85,0.24), transparent 70%), linear-gradient(180deg, #0F2341 0%, #071326 100%)'
        : 'linear-gradient(180deg, #0F2341 0%, #071326 100%)',
      color: '#fff', position: 'relative', overflow: 'hidden', textAlign: 'center',
    }}>
      {isBold && <TopoLines opacity={0.12} color="#BADA55"/>}
      <div style={{ maxWidth: 820, margin: '0 auto', position: 'relative' }}>
        <Kicker color="#BADA55" style={{ textAlign: 'center' }}>
          {isBold ? '✦ Manifest closes soon' : `Only ${seats} seats remain`}
        </Kicker>
        <h2 style={{
          fontFamily: '"Lato", sans-serif',
          fontSize: 'clamp(38px, 4.8vw, 72px)', fontWeight: 900, color: '#fff',
          margin: '0 0 20px', lineHeight: 1.04, letterSpacing: '-0.01em',
        }}>
          {isBold ? <>Your crew leaves in <span style={{ color: '#BADA55' }}>10 weeks.</span><br/>Rope in now.</>
                  : <>Ready to move from Health<br/>to <span style={{ color: '#1495B9' }}>Wealth</span>?</>}
        </h2>
        <p style={{ fontSize: 20, color: 'rgba(255,255,255,0.8)', maxWidth: '56ch', margin: '0 auto 36px', lineHeight: 1.5 }}>
          Book a 15-minute call with a BaseCamp guide — or apply today. Either way, we reply within one business day.
        </p>
        <div style={{ display: 'flex', gap: 16, flexWrap: 'wrap', justifyContent: 'center' }}>
          <RecruitButton variant="lime" size="lg" href="apply.html">Apply Now</RecruitButton>
          <RecruitButton variant="outline-light" size="lg" href={BC_BOOKING_URL} target="_blank" rel="noopener noreferrer">Talk To Your Guide</RecruitButton>
        </div>
        <div style={{ marginTop: 20, fontSize: 13, color: 'rgba(255,255,255,0.6)' }}>
          Application: 2 minutes · Call: 15 min · No obligation · Google Meet
        </div>
      </div>
    </section>
  );
}

// Footer program link — no underline by default, teal→lime hover, optional external arrow.
function ProgramLink({ href, children, external }) {
  const [hover, setHover] = React.useState(false);
  return (
    <a
      href={href}
      target={external ? '_blank' : undefined}
      rel={external ? 'noopener noreferrer' : undefined}
      onMouseEnter={() => setHover(true)}
      onMouseLeave={() => setHover(false)}
      style={{
        display: 'inline-flex', alignItems: 'center', gap: 6,
        color: hover ? '#BADA55' : 'rgba(255,255,255,0.78)',
        textDecoration: 'none',
        padding: '2px 0',
        fontSize: 14,
        transition: 'color 200ms ease',
      }}
    >
      {children}
      {external && (
        <span aria-hidden style={{
          fontSize: 11,
          color: hover ? '#BADA55' : '#1495B9',
          transform: hover ? 'translate(2px, -2px)' : 'none',
          transition: 'transform 200ms cubic-bezier(0.2,0.8,0.2,1), color 200ms ease',
        }}>↗</span>
      )}
    </a>
  );
}

// Footer legal link — underlined, larger hit area, teal hover.
function FooterLink({ href, children }) {
  const [hover, setHover] = React.useState(false);
  return (
    <a
      href={href}
      onMouseEnter={() => setHover(true)}
      onMouseLeave={() => setHover(false)}
      style={{
        display: 'inline-block',
        color: hover ? '#BADA55' : 'rgba(255,255,255,0.78)',
        textDecoration: 'underline',
        textDecorationColor: hover ? '#BADA55' : 'rgba(255,255,255,0.35)',
        textUnderlineOffset: 3,
        padding: '8px 2px',
        fontSize: 13, fontWeight: 700,
        transition: 'color 200ms ease, text-decoration-color 200ms ease',
      }}
    >
      {children}
    </a>
  );
}

function Footer() {
  return (
    <footer style={{ background: '#071326', color: 'rgba(255,255,255,0.55)', padding: '56px 24px 32px', fontSize: 13, lineHeight: 1.6 }}>
      <div style={{ maxWidth: 1200, margin: '0 auto', display: 'grid', gridTemplateColumns: '2fr 1fr 1fr', gap: 40 }}>
        <div>
          <div style={{ color: '#fff', fontWeight: 900, letterSpacing: '0.08em', fontSize: 14, marginBottom: 10 }}>VERTICAL VISION™ · BASECAMP</div>
          <div style={{ maxWidth: 440 }}>
            Vertical Vision is an independent insurance marketing organization. BaseCamp is our 10-week onboarding program for licensed agents moving from Medicare into retirement income products.
          </div>
        </div>
        <div>
          <div style={{ color: '#fff', fontSize: 11, fontWeight: 700, letterSpacing: '0.16em', textTransform: 'uppercase', marginBottom: 10 }}>Programs</div>
          <div style={{ display: 'flex', flexDirection: 'column', gap: 4 }}>
            <ProgramLink href="https://www.v2fm.com/elevate" external>Elevate</ProgramLink>
            <ProgramLink href="https://www.v2fm.com/lead-generation" external>Marketing Support</ProgramLink>
            <div style={{ color: 'rgba(255,255,255,0.78)', fontSize: 14, padding: '2px 0' }}>Summit Community</div>
          </div>
        </div>
        <div>
          <div style={{ color: '#fff', fontSize: 11, fontWeight: 700, letterSpacing: '0.16em', textTransform: 'uppercase', marginBottom: 10 }}>Contact</div>
          <div style={{ display: 'flex', flexDirection: 'column', gap: 4 }}>
            <ProgramLink href="tel:+18669841585">Toll-Free: 866-984-1585</ProgramLink>
            <ProgramLink href="mailto:marketing@v2fm.com">marketing@v2fm.com</ProgramLink>
          </div>
        </div>
      </div>
      <div style={{ maxWidth: 1200, margin: '48px auto 0', paddingTop: 20, borderTop: '1px solid rgba(255,255,255,0.08)', fontSize: 12, color: 'rgba(255,255,255,0.4)', display: 'flex', flexWrap: 'wrap', gap: 16, alignItems: 'baseline', justifyContent: 'space-between' }}>
        <div style={{ flex: '1 1 560px', minWidth: 0 }}>
          For licensed insurance agent use only. Not intended for general public. BaseCamp is an educational program and not a guarantee of production, licensure, or earnings. Sample outcomes are self-reported by recent graduates; individual results vary. © 2026 Vertical Vision. All rights reserved. Design © 2026 Nathan Hockley.
        </div>
        <nav aria-label="Legal" style={{ display: 'flex', gap: 24, flexShrink: 0 }}>
          <FooterLink href="privacy.html">Privacy Policy</FooterLink>
          <FooterLink href="terms.html">Terms of Use</FooterLink>
        </nav>
      </div>
    </footer>
  );
}

window.RecruitFinalCTA = FinalCTA;
window.RecruitFooter = Footer;