/* global React, Kicker, TopoLines */

const INSTRUCTOR = {
  name: 'Austin James',
  role: 'Sr. Sales Coach · V2 Financial Marketing',
  photo: 'assets/austin-james.jpeg',
  bio: [
    "Austin James has spent nearly eight years in the insurance and annuity space, working directly with agents, health shops, Medicare agencies, and independent producers to help them grow beyond their core business and create real wealth-side opportunities.",
    "His focus is helping health-based agencies take the trust they already have with their clients and turn it into deeper conversations around retirement income, annuities, legacy planning, and long-term financial protection. Austin understands that Medicare and health agents are sitting on relationships that can become much more valuable when they have the right process, the right language, and the right support behind them.",
    "Before entering the annuity and insurance world, Austin spent over a decade in marketing, building strategies that helped businesses grow, generate leads, and create stronger client engagement. Today, he brings that same strategy-first mindset to BaseCamp, helping agents identify opportunities inside their existing book, ask better questions, and confidently introduce annuities without overcomplicating the conversation.",
    "Inside BaseCamp, Austin's goal is simple: help agents stop leaving money, relationships, and opportunity on the table. He brings a practical, high-energy approach built around real conversations, real case design, and real growth for agents who are ready to take their business to the next level.",
    "Austin believes health agents don't need to become someone else to succeed in annuities — they just need the right trail, the right tools, and the right coach helping them connect the dots.",
  ],
};

function Bios({ variant }) {
  const isBold = variant === 'bold';
  return (
    <section style={{
      padding: '96px 24px',
      background: 'linear-gradient(180deg, #F5EFDC 0%, #EADFC2 100%)',
      position: 'relative', overflow: 'hidden',
    }}>
      <div style={{ maxWidth: 1100, margin: '0 auto', position: 'relative' }}>
        <Kicker color="#3D2A15">{isBold ? '✦ Your guide on the ridge' : 'Your Instructor'}</Kicker>
        <h2 style={{ fontFamily: '"Lato", sans-serif', fontSize: 'clamp(30px, 3vw, 44px)', fontWeight: 900, color: '#0F2341', margin: '0 0 48px', lineHeight: 1.12, maxWidth: '24ch', letterSpacing: '-0.01em' }}>
          {isBold ? <>The coach who's walked this trail <span style={{ color: '#1495B9' }}>hundreds of times.</span></> : <>Meet the coach who's done the work — and teaches it.</>}
        </h2>
        <div style={{ display: 'flex', flexWrap: 'wrap', gap: 40, alignItems: 'flex-start' }}>
          <div style={{ flex: '0 1 300px' }}>
            <div style={{
              borderRadius: 20, overflow: 'hidden',
              border: '1px solid rgba(61,42,21,0.18)',
              boxShadow: '0 16px 40px rgba(15,35,65,0.18)',
              aspectRatio: '4 / 5', background: '#0F2341',
            }}>
              <img src={INSTRUCTOR.photo} alt={INSTRUCTOR.name} style={{ width: '100%', height: '100%', objectFit: 'cover', display: 'block' }}/>
            </div>
            <div style={{ fontSize: 22, fontWeight: 700, color: '#0F2341', marginTop: 18 }}>{INSTRUCTOR.name}</div>
            <div style={{ fontSize: 12, fontWeight: 700, letterSpacing: '0.14em', textTransform: 'uppercase', color: '#1495B9', marginTop: 4 }}>{INSTRUCTOR.role}</div>
          </div>
          <div style={{ flex: '1 1 420px' }}>
            {INSTRUCTOR.bio.map((para, i) => (
              <p key={i} style={{ fontSize: 16, color: '#3D2A15', lineHeight: 1.65, margin: i === 0 ? '0 0 16px' : '0 0 16px' }}>{para}</p>
            ))}
          </div>
        </div>
      </div>
    </section>
  );
}

function Testimonials({ variant }) {
  const isBold = variant === 'bold';
  const quotes = [
    { q: "By week 6 I'd written my first MYGA with a client I'd had for four years. She literally said 'why didn't we do this sooner?' — that question is worth the program ten times over.", who: 'Angela R.', where: 'Louisville, KY · Class of Spring ‘25' },
    { q: "BaseCamp is the first program I've done that felt like a team expedition. The cohort texted daily. My back-office had my back on my first live case. It changed how I see my book.", who: 'Ken T.',    where: 'Phoenix, AZ · Class of Fall ‘24' },
  ];
  return (
    <section style={{
      padding: '96px 24px',
      background: '#071326',
      color: '#fff', position: 'relative', overflow: 'hidden',
    }}>
      <TopoLines opacity={0.08} color="#BADA55"/>
      <div style={{ maxWidth: 1200, margin: '0 auto', position: 'relative' }}>
        <Kicker color="#BADA55">{isBold ? '✦ From the trail' : 'What graduates say'}</Kicker>
        <h2 style={{ fontFamily: '"Lato", sans-serif', fontSize: 'clamp(28px, 2.6vw, 40px)', fontWeight: 900, color: '#fff', margin: '0 0 48px', lineHeight: 1.12, maxWidth: '22ch', letterSpacing: '-0.01em' }}>
          {isBold ? <>Dispatches from <span style={{ color: '#BADA55' }}>recent climbs.</span></> : <>Real words from recent graduates.</>}
        </h2>
        <div style={{ display: 'grid', gridTemplateColumns: '1fr 1fr', gap: 24 }}>
          {quotes.map(qu => (
            <div key={qu.who} style={{ background: 'rgba(255,255,255,0.04)', border: '1px solid rgba(255,255,255,0.12)', borderRadius: 20, padding: 32 }}>
              <div style={{ fontFamily: 'Georgia, serif', fontSize: 64, color: '#BADA55', lineHeight: 0.6, height: 22, marginBottom: 12 }}>“</div>
              <p style={{ fontSize: 18, color: '#fff', lineHeight: 1.55, margin: '0 0 20px' }}>{qu.q}</p>
              <div style={{ fontSize: 14, fontWeight: 700, color: '#fff' }}>{qu.who}</div>
              <div style={{ fontSize: 12, fontWeight: 700, letterSpacing: '0.14em', textTransform: 'uppercase', color: 'rgba(255,255,255,0.55)', marginTop: 2 }}>{qu.where}</div>
            </div>
          ))}
        </div>
      </div>
    </section>
  );
}

function FAQItem({ q, a, open, onToggle, variant }) {
  const isBold = variant === 'bold';
  return (
    <div style={{ borderBottom: '1px solid rgba(61,42,21,0.2)' }}>
      <button onClick={onToggle} style={{
        width: '100%', display: 'flex', alignItems: 'center', justifyContent: 'space-between', gap: 20,
        background: 'none', border: 'none', textAlign: 'left', cursor: 'pointer',
        padding: '22px 0', color: '#0F2341', fontSize: 18, fontWeight: 700, fontFamily: 'inherit',
      }}>
        <span>{q}</span>
        <span style={{
          width: 32, height: 32, borderRadius: '50%', background: open ? '#0F2341' : 'transparent',
          border: `2px solid ${open ? '#0F2341' : '#1495B9'}`,
          display: 'flex', alignItems: 'center', justifyContent: 'center',
          color: open ? '#BADA55' : '#1495B9', fontSize: 20, flexShrink: 0,
          transition: 'all 200ms ease',
        }}>{open ? '–' : '+'}</span>
      </button>
      <div style={{
        maxHeight: open ? 400 : 0, overflow: 'hidden',
        transition: 'max-height 320ms cubic-bezier(0.2, 0.8, 0.2, 1)',
      }}>
        <p style={{ padding: '0 0 24px', margin: 0, fontSize: 16, color: '#495057', lineHeight: 1.6, maxWidth: '70ch' }}>{a}</p>
      </div>
    </div>
  );
}

function FAQ({ variant }) {
  const [open, setOpen] = React.useState(0);
  const isBold = variant === 'bold';
  const qs = [
    { q: 'Do I need an annuity appointment to join?', a: 'No. We walk you through carrier appointments as part of the first two weeks. If you already have appointments, even better — we plug straight into the products you carry.' },
    { q: 'What if I can\'t make a weekly live session?',  a: 'Every live session is recorded. You\'ll also have async Q&A with your guides and cohort in between. The program is 10 weeks end to end, but your pace within a week is your own.' },
    { q: 'How much time per week?',              a: 'Plan on 3–5 hours. One live session (~75 min), one case study, and one practice rep with a peer. We protect your selling time — we don\'t replace it.' },
    { q: 'Is this lead-gen?',                    a: 'No. BaseCamp is product and process training for agents who already have a book. If you don\'t have clients yet, you\'ll get more from our foundations program.' },
    { q: 'What does it cost?',                   a: 'Tuition is covered for qualified agents who contract through V2. We\'ll walk the numbers with you on a 15-minute call — no surprises.' },
    { q: 'Can I bring a team member?',           a: 'Each seat is for one agent. If you\'d like to enroll your whole team, mention it on your call and we\'ll put together a team route.' },
  ];
  return (
    <section id="faq" style={{
      padding: '96px 24px',
      background: '#FAF6E8',
    }}>
      <div style={{ maxWidth: 880, margin: '0 auto' }}>
        <Kicker color="#3D2A15">{isBold ? '✦ Questions from the trailhead' : 'Frequently asked'}</Kicker>
        <h2 style={{ fontFamily: '"Lato", sans-serif', fontSize: 'clamp(28px, 2.6vw, 40px)', fontWeight: 900, color: '#0F2341', margin: '0 0 40px', lineHeight: 1.12, letterSpacing: '-0.01em' }}>
          Before you commit to the climb.
        </h2>
        <div>
          {qs.map((x, i) => (
            <FAQItem key={x.q} q={x.q} a={x.a} open={open === i} onToggle={() => setOpen(open === i ? -1 : i)} variant={variant}/>
          ))}
        </div>
      </div>
    </section>
  );
}

window.RecruitBios = Bios;
window.RecruitTestimonials = Testimonials;
window.RecruitFAQ = FAQ;