/* global React, PageNav, PageFooter */

const STATES = [
  'AL','AK','AZ','AR','CA','CO','CT','DE','FL','GA','HI','ID','IL','IN','IA','KS','KY','LA','ME','MD',
  'MA','MI','MN','MS','MO','MT','NE','NV','NH','NJ','NM','NY','NC','ND','OH','OK','OR','PA','RI','SC',
  'SD','TN','TX','UT','VT','VA','WA','WV','WI','WY','DC'
];

function Field({ label, children, required, hint }) {
  return (
    <label style={{ display: 'block', marginBottom: 18 }}>
      <div style={{
        fontSize: 12, fontWeight: 800, letterSpacing: '0.14em', textTransform: 'uppercase',
        color: 'rgba(255,255,255,0.85)', marginBottom: 8,
      }}>
        {label} {required && <span style={{ color: '#BADA55' }}>*</span>}
      </div>
      {children}
      {hint && <div style={{ fontSize: 12, color: 'rgba(255,255,255,0.55)', marginTop: 6 }}>{hint}</div>}
    </label>
  );
}

const inputStyle = {
  width: '100%', padding: '12px 14px',
  background: 'rgba(255,255,255,0.06)',
  border: '1px solid rgba(255,255,255,0.18)',
  borderRadius: 10,
  color: '#fff', fontSize: 15,
  fontFamily: 'inherit',
  outline: 'none',
  transition: 'border-color 160ms ease, background 160ms ease',
};

function TextInput(props) {
  return <input {...props} style={inputStyle}
    onFocus={e => { e.target.style.borderColor = '#BADA55'; e.target.style.background = 'rgba(186,218,85,0.08)'; }}
    onBlur={e => { e.target.style.borderColor = 'rgba(255,255,255,0.18)'; e.target.style.background = 'rgba(255,255,255,0.06)'; }}
  />;
}

function TextArea(props) {
  return <textarea {...props} style={{ ...inputStyle, minHeight: 90, resize: 'vertical', fontFamily: 'inherit' }}
    onFocus={e => { e.target.style.borderColor = '#BADA55'; e.target.style.background = 'rgba(186,218,85,0.08)'; }}
    onBlur={e => { e.target.style.borderColor = 'rgba(255,255,255,0.18)'; e.target.style.background = 'rgba(255,255,255,0.06)'; }}
  />;
}

function Select(props) {
  return <select {...props} style={{ ...inputStyle, appearance: 'none', paddingRight: 34,
    backgroundImage: 'url("data:image/svg+xml;utf8,<svg xmlns=%27http://www.w3.org/2000/svg%27 width=%2712%27 height=%278%27><path fill=%27%23BADA55%27 d=%27M0 0l6 8 6-8z%27/></svg>")',
    backgroundRepeat: 'no-repeat', backgroundPosition: 'right 14px center'
  }}/>;
}

function RadioGroup({ name, options, value, onChange }) {
  return (
    <div style={{ display: 'flex', gap: 8, flexWrap: 'wrap' }}>
      {options.map(opt => {
        const selected = value === opt;
        return (
          <label key={opt} style={{
            display: 'inline-flex', alignItems: 'center', gap: 8,
            padding: '10px 16px',
            border: `1px solid ${selected ? '#BADA55' : 'rgba(255,255,255,0.18)'}`,
            background: selected ? 'rgba(186,218,85,0.14)' : 'rgba(255,255,255,0.04)',
            color: selected ? '#BADA55' : 'rgba(255,255,255,0.85)',
            borderRadius: 9999, cursor: 'pointer',
            fontSize: 13, fontWeight: 700, letterSpacing: '0.04em',
            transition: 'all 160ms ease',
          }}>
            <input type="radio" name={name} value={opt} checked={selected}
              onChange={() => onChange(opt)}
              style={{ appearance: 'none', width: 0, height: 0, margin: 0 }}/>
            {opt}
          </label>
        );
      })}
    </div>
  );
}

function ApplyPage() {
  const [form, setForm] = React.useState({
    name: '', agency: '', email: '', phone: '', state: '',
    yearsMedicare: '', bookSize: '', medicarePct: '', newMedicareAnnual: '',
    annuityExp: '', why: '',
    smsConsent: false,
  });
  const [submitted, setSubmitted] = React.useState(false);
  const set = (k) => (eOrVal) => {
    const v = (eOrVal && eOrVal.target) ? (eOrVal.target.type === 'checkbox' ? eOrVal.target.checked : eOrVal.target.value) : eOrVal;
    setForm(f => ({ ...f, [k]: v }));
  };
  const submit = (e) => {
    e.preventDefault();
    setSubmitted(true);
    window.scrollTo({ top: 0, behavior: 'smooth' });
  };

  return (
    <div style={{
      fontFamily: '"Lato", system-ui, -apple-system, Arial, sans-serif',
      color: '#212529',
      background: '#FAF6E8',
    }}>
      <PageNav/>

      {/* Hero — mountain photo + gradient overlay */}
      <section style={{
        position: 'relative', overflow: 'hidden', color: '#fff',
        padding: '80px 24px 64px',
        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
        `,
      }}>
        <div style={{ maxWidth: 820, margin: '0 auto', position: 'relative' }}>
          <div style={{
            display: 'inline-flex', alignItems: 'center', gap: 10,
            padding: '6px 14px', borderRadius: 9999,
            background: 'rgba(20,149,185,0.16)',
            border: '1px solid rgba(20,149,185,0.35)',
            fontSize: 12, fontWeight: 700, letterSpacing: '0.16em', textTransform: 'uppercase',
            color: '#1495B9', marginBottom: 20,
          }}>
            <span style={{ width: 6, height: 6, borderRadius: '50%', background: '#1495B9' }}/>
            Next cohort · 10 weeks · Online
          </div>
          <h1 style={{
            fontFamily: '"Lato", sans-serif', fontWeight: 900,
            fontSize: 'clamp(40px, 5vw, 68px)', lineHeight: 1.02,
            letterSpacing: '-0.01em', margin: '0 0 16px', color: '#fff',
          }}>
            Apply for the next cohort.
          </h1>
          <p style={{
            fontSize: 'clamp(16px, 1.25vw, 19px)', maxWidth: '58ch',
            color: 'rgba(255,255,255,0.85)', margin: 0, lineHeight: 1.55,
          }}>
            Takes 2 minutes. We review every application personally and reply within one business day. Only 10 seats per class — tell us a bit about your book and we'll pick up from there.
          </p>
        </div>
      </section>

      {/* Form card */}
      <section style={{
        padding: '48px 24px 96px',
        background: 'linear-gradient(180deg, #0F2341 0%, #071326 100%)',
      }}>
        <div style={{
          maxWidth: 820, margin: '-96px auto 0',
          background: 'rgba(15,35,65,0.94)',
          border: '1px solid rgba(186,218,85,0.22)',
          borderRadius: 20,
          padding: 'clamp(28px, 4vw, 48px)',
          color: '#fff',
          boxShadow: '0 30px 60px rgba(0,0,0,0.45)',
          position: 'relative',
        }}>
          {submitted ? (
            <div style={{ textAlign: 'center', padding: '40px 0' }}>
              <div style={{ fontSize: 48, marginBottom: 12 }}>🚩</div>
              <h2 style={{ fontFamily: '"Lato", sans-serif', fontSize: 32, fontWeight: 900, color: '#BADA55', margin: '0 0 12px' }}>
                You're on the list.
              </h2>
              <p style={{ fontSize: 17, color: 'rgba(255,255,255,0.85)', maxWidth: 520, margin: '0 auto', lineHeight: 1.55 }}>
                A BaseCamp guide will reach out within one business day to schedule a 15-minute intro call. Pack your book — we'll see you at the trailhead.
              </p>
              <a href="index.html" style={{
                display: 'inline-block', marginTop: 28,
                padding: '12px 24px', borderRadius: 9999,
                background: '#BADA55', color: '#0F2341',
                fontSize: 13, fontWeight: 800, letterSpacing: '0.14em', textTransform: 'uppercase',
                textDecoration: 'none',
              }}>← Back to basecamp</a>
            </div>
          ) : (
            <form onSubmit={submit} noValidate>
              <div style={{ fontSize: 12, fontWeight: 800, letterSpacing: '0.22em', textTransform: 'uppercase', color: '#BADA55', marginBottom: 8 }}>
                ✦ Your application
              </div>
              <h2 style={{ fontFamily: '"Lato", sans-serif', fontSize: 28, fontWeight: 900, margin: '0 0 28px', lineHeight: 1.15 }}>
                Tell us about you and your book.
              </h2>

              {/* About you */}
              <div style={{ display: 'grid', gridTemplateColumns: '1fr 1fr', gap: 20 }}>
                <Field label="Full name" required>
                  <TextInput type="text" value={form.name} onChange={set('name')} required autoComplete="name"/>
                </Field>
                <Field label="Agency name">
                  <TextInput type="text" value={form.agency} onChange={set('agency')} placeholder="Independent or agency" autoComplete="organization"/>
                </Field>
                <Field label="Email" required>
                  <TextInput type="email" value={form.email} onChange={set('email')} required autoComplete="email"/>
                </Field>
                <Field label="Phone" required>
                  <TextInput type="tel" value={form.phone} onChange={set('phone')} required autoComplete="tel"/>
                </Field>
                <Field label="State you sell in" required>
                  <Select value={form.state} onChange={set('state')} required>
                    <option value="">Select a state…</option>
                    {STATES.map(s => <option key={s} value={s}>{s}</option>)}
                  </Select>
                </Field>
                <Field label="Years selling Medicare" required>
                  <RadioGroup name="yearsMedicare" value={form.yearsMedicare} onChange={set('yearsMedicare')}
                    options={['< 1', '1–2', '3–5', '6–10', '10+']}/>
                </Field>
              </div>

              {/* Book & experience */}
              <div style={{ marginTop: 8, paddingTop: 28, borderTop: '1px solid rgba(255,255,255,0.1)' }}>
                <Field label="Approximate book size (active households)" required>
                  <RadioGroup name="bookSize" value={form.bookSize} onChange={set('bookSize')}
                    options={['< 100', '100–250', '250–500', '500–1,000', '1,000+']}/>
                </Field>
                <Field label="What % of your book is Medicare focused?" required>
                  <RadioGroup name="medicarePct" value={form.medicarePct} onChange={set('medicarePct')}
                    options={['25%', '50%', '75%', '100%']}/>
                </Field>
                <Field label="New Medicare clients added per year" required>
                  <RadioGroup name="newMedicareAnnual" value={form.newMedicareAnnual} onChange={set('newMedicareAnnual')}
                    options={['< 25', '25–50', '50–100', '100–250', '250+']}/>
                </Field>
                <Field label="Annuity experience today" required>
                  <RadioGroup name="annuityExp" value={form.annuityExp} onChange={set('annuityExp')}
                    options={['None yet', 'Some — a few cases', 'Writing regularly']}/>
                </Field>
                <Field label="What's pulling you up the mountain?" hint="Optional — a sentence or two. What makes now the right time?">
                  <TextArea value={form.why} onChange={set('why')} placeholder="E.g. clients asking about retirement income I can't answer yet, book is hitting a plateau, want a cross-sell system, etc."/>
                </Field>
              </div>

              {/* SMS opt-in */}
              <div style={{
                marginTop: 16, padding: 18,
                background: 'rgba(255,255,255,0.04)',
                border: '1px solid rgba(255,255,255,0.12)',
                borderRadius: 12,
              }}>
                <label style={{ display: 'flex', gap: 12, alignItems: 'flex-start', cursor: 'pointer' }}>
                  <input type="checkbox" checked={form.smsConsent} onChange={set('smsConsent')}
                    style={{ marginTop: 3, accentColor: '#BADA55', width: 18, height: 18, flexShrink: 0 }}/>
                  <span style={{ fontSize: 13, color: 'rgba(255,255,255,0.8)', lineHeight: 1.55 }}>
                    I consent to receive non-marketing text messages from Vertical Vision BaseCamp about my application, appointment reminders, and onboarding updates. Message frequency may vary. Message & data rates may apply. Reply <strong>HELP</strong> for help, <strong>STOP</strong> to opt out. See our <a href="privacy.html" style={{ color: '#BADA55' }}>Privacy Policy</a> and <a href="terms.html" style={{ color: '#BADA55' }}>Terms of Use</a>.
                  </span>
                </label>
                <div style={{ fontSize: 12, color: 'rgba(255,255,255,0.55)', marginTop: 10, paddingLeft: 30 }}>
                  Consent is not required as a condition of purchase or to receive services.
                </div>
              </div>

              <div style={{ display: 'flex', alignItems: 'center', gap: 20, marginTop: 28, flexWrap: 'wrap' }}>
                <button type="submit" style={{
                  display: 'inline-flex', alignItems: 'center', gap: 10,
                  padding: '16px 30px', borderRadius: 9999,
                  background: '#BADA55', color: '#0F2341',
                  fontFamily: '"Lato", sans-serif',
                  fontSize: 14, fontWeight: 800, letterSpacing: '0.14em', textTransform: 'uppercase',
                  border: 'none', cursor: 'pointer',
                  boxShadow: '0 10px 24px rgba(186,218,85,0.35)',
                  transition: 'transform 160ms ease',
                }}
                onMouseEnter={e => e.currentTarget.style.transform = 'translateY(-2px)'}
                onMouseLeave={e => e.currentTarget.style.transform = 'translateY(0)'}
                >
                  Submit application →
                </button>
                <div style={{ fontSize: 13, color: 'rgba(255,255,255,0.6)' }}>
                  We reply within one business day.
                </div>
              </div>
            </form>
          )}
        </div>
      </section>

      <PageFooter/>
    </div>
  );
}

window.ApplyPage = ApplyPage;