// Hero: dark teal full-bleed, two columns. Left = copy + CTAs + trust strip. Right = founder headshot card.
function Hero({ calendlyUrl }) {
  const trustChips = [
    { icon: '⭐', label: '5 Star Google Reviews' },
    { icon: '✓', label: 'QBO Certified' },
    { icon: null, label: '100% service businesses' },
  ];
  const fuds = ['No contracts', '24hr Replies', 'Free intro call', 'U.S. Based 🇺🇸'];
  const pains = [
    'Tax season is stressful every single year',
    "You're not sure if your books are actually right",
    "You don't really understand your own financials",
    'Your bookkeeper is slow or hard to reach',
  ];

  return (
    <section id="top" style={{
      background: '#163F34', color: '#faf9f6', position: 'relative',
      padding: '64px 32px 72px', overflow: 'hidden',
    }}>
      {/* subtle highlight */}
      <div style={{
        position: 'absolute', top: -100, right: -100, width: 600, height: 600,
        background: 'radial-gradient(circle, rgba(56,111,102,0.18), transparent 70%)',
        pointerEvents: 'none',
      }}/>
      <div className="ck-hero-grid" style={{
        maxWidth: 1080, margin: '0 auto', display: 'grid',
        gridTemplateColumns: '1.1fr 0.9fr', gap: 44, alignItems: 'flex-end', position: 'relative',
      }}>
        {/* LEFT */}
        <div style={{ alignSelf: 'center' }}>
          <div style={{ display: 'flex', gap: 10, flexWrap: 'wrap', marginBottom: 28 }}>
            {trustChips.map(c => (
              <span key={c.label} style={{
                display: 'inline-flex', alignItems: 'center', gap: 5,
                background: 'rgba(255,255,255,0.09)',
                border: '1px solid rgba(255,255,255,0.15)',
                borderRadius: 100, padding: '5px 11px',
                fontSize: 9.6, color: 'rgba(255,255,255,0.78)', fontWeight: 500,
              }}>
                {c.icon && <span>{c.icon}</span>}{c.label}
              </span>
            ))}
          </div>
          <h1 style={{
            fontSize: 'clamp(1.9rem, 1rem + 2.7vw, 2.5rem)', fontWeight: 800,
            letterSpacing: '-0.03em', lineHeight: 1.12, margin: 0, color: '#faf9f6',
            textWrap: 'balance', maxWidth: '15em',
          }}>
            Clean books, clear financials, and reliable communication.{' '}
            <em style={{ color: '#ddb06e', fontStyle: 'italic', fontWeight: 800, whiteSpace: 'nowrap', display: 'block' }}>Every month.</em>
          </h1>
          <p style={{
            color: '#ffffff', fontSize: 17, lineHeight: 1.65,
            maxWidth: 540, marginTop: 24,
          }}>
            You shouldn't have to chase your bookkeeper or wait until tax season for clarity. Get reliable monthly financials and responses within one business day so you can make better decisions, grow with confidence, and stress less about your books.
          </p>

          <div style={{ display: 'flex', gap: 12, marginTop: 32, flexWrap: 'wrap' }}>
            <a href="contact.html" className="ck-btn-primary" style={{
              background: '#C4924A',
              color: '#fff', textDecoration: 'none',
              padding: '17px 48px', borderRadius: 10, fontWeight: 700, fontSize: 17.4,
              border: '1.5px solid #C4924A',
              transition: 'background .2s, color .2s, border-color .2s',
              display: 'inline-block',
            }}
              onMouseEnter={e => { e.currentTarget.style.background = '#fff'; e.currentTarget.style.color = '#3F8074'; e.currentTarget.style.borderColor = '#fff'; }}
              onMouseLeave={e => { e.currentTarget.style.background = '#C4924A'; e.currentTarget.style.color = '#fff'; e.currentTarget.style.borderColor = '#C4924A'; }}
            >Book A Free Call</a>
          </div>

          <div style={{ display: 'flex', gap: 20, flexWrap: 'wrap', marginTop: 32 }}>
            {fuds.map(f => (
              <span key={f} style={{
                fontSize: 12.5, color: 'rgba(255,255,255,0.5)', fontWeight: 500,
                display: 'flex', alignItems: 'center', gap: 6,
              }}>
                <span style={{ color: '#cce0de' }}>✓</span> {f}
              </span>
            ))}
          </div>
        </div>

        {/* RIGHT: founder headshot on white rounded card */}
        <div style={{
          display: 'flex', justifyContent: 'center', alignItems: 'center',
          alignSelf: 'center',
        }}>
          <div style={{
            background: '#fff', borderRadius: 26, overflow: 'hidden',
            boxShadow: '0 30px 60px rgba(0,0,0,0.3)', width: '100%', maxWidth: 380,
          }}>
            <img
              src={(window.__resources && window.__resources.heroPhoto) || 'assets/Headshot copy.jpg'}
              alt="Macen Krauter, founder of Chekbooks"
              style={{ width: '100%', height: 'auto', display: 'block' }}
            />
          </div>
        </div>
      </div>
    </section>
  );
}

function HeroForm({ calendlyUrl = 'https://calendly.com/macen-chekbooks/discovery-call' }) {
  const [submitted, setSubmitted] = React.useState(false);
  const [form, setForm] = React.useState({ first: '', last: '', business: '', revenue: '', email: '', phone: '' });
  const upd = k => e => setForm({ ...form, [k]: e.target.value });

  const buildCalendlyUrl = () => {
    const params = new URLSearchParams();
    const name = [form.first, form.last].filter(Boolean).join(' ').trim();
    if (name) params.set('name', name);
    if (form.email) params.set('email', form.email);
    if (form.business) params.set('a1', form.business);
    if (form.revenue)  params.set('a2', form.revenue);
    if (form.phone)    params.set('a3', form.phone);
    const sep = calendlyUrl.includes('?') ? '&' : '?';
    return params.toString() ? calendlyUrl + sep + params.toString() : calendlyUrl;
  };

  const onSubmit = e => {
    e.preventDefault();
    window.open(buildCalendlyUrl(), '_blank', 'noopener');
    setSubmitted(true);
  };

  const labelStyle = {
    fontSize: 11, fontWeight: 600, letterSpacing: '0.08em',
    color: '#6e8a86', textTransform: 'uppercase', marginBottom: 6, display: 'block',
  };
  const inputStyle = {
    width: '100%', boxSizing: 'border-box',
    background: '#fff', border: '1px solid #d5e7e4', borderRadius: 10,
    padding: '11px 13px', color: '#163F34',
    fontFamily: 'Inter', fontSize: 14, outline: 'none',
    transition: 'border-color .15s, box-shadow .15s',
  };
  const focusIn = e => { e.target.style.borderColor = '#3F8074'; e.target.style.boxShadow = '0 0 0 3px rgba(63,128,116,0.12)'; };
  const focusOut = e => { e.target.style.borderColor = '#d5e7e4'; e.target.style.boxShadow = 'none'; };

  return (
    <div style={{
      background: '#fff', borderRadius: 22, padding: 26,
      boxShadow: '0 30px 60px rgba(0,0,0,0.3)',
    }}>
      {submitted ? (
        <div style={{ textAlign: 'center', padding: '12px 4px' }}>
          <div style={{ width: 52, height: 52, margin: '0 auto', borderRadius: '50%', background: '#3F8074', color: '#fff', fontSize: 26, fontWeight: 700, display: 'flex', alignItems: 'center', justifyContent: 'center' }}>✓</div>
          <h3 style={{ fontSize: 22, fontWeight: 800, color: '#163F34', margin: '18px 0 8px', letterSpacing: '-0.02em' }}>
            Pick a time, {form.first || 'there'}.
          </h3>
          <p style={{ fontSize: 14, color: '#345048', margin: 0, lineHeight: 1.6 }}>
            My Calendly opened in a new tab. Pick a slot that works and you're booked.
          </p>
          <a href={buildCalendlyUrl()} target="_blank" rel="noopener" style={{
            display: 'inline-block', marginTop: 14, fontSize: 13, fontWeight: 600, color: '#3F8074', textDecoration: 'underline',
          }}>Didn't open? Click here</a>
          <div>
            <button onClick={() => { setSubmitted(false); }} style={{
              marginTop: 16, background: 'transparent', border: '1.5px solid #163F34', color: '#163F34',
              borderRadius: 10, padding: '9px 20px', fontSize: 13, fontWeight: 600, cursor: 'pointer', fontFamily: 'Inter',
            }}>Back to form</button>
          </div>
        </div>
      ) : (
        <form onSubmit={onSubmit}>
          {/* Founder portrait */}
          <div style={{ display: 'flex', justifyContent: 'center', paddingBottom: 14 }}>
            <div style={{
              width: 168, height: 168, borderRadius: '50%', overflow: 'hidden',
              border: '4px solid #fff',
              boxShadow: '0 12px 28px rgba(22,63,52,.25)',
              background: '#ecf4f2',
            }}>
              <img src={(window.__resources && window.__resources.headshot) || 'assets/macen-headshot.jpeg'} alt="Macen Krauter, founder of Chekbooks"
                style={{
                  width: '100%', height: '100%', objectFit: 'cover',
                  objectPosition: '50% 5%',
                  transform: 'scale(1.4)',
                  transformOrigin: '50% 8%',
                  display: 'block',
                }} />
            </div>
          </div>

          <h3 style={{ fontSize: 21, fontWeight: 800, color: '#163F34', margin: 0, letterSpacing: '-0.02em', textAlign: 'center' }}>
            Book a free call with me
          </h3>
          <p style={{ fontSize: 13.5, color: '#345048', margin: '6px 0 16px', lineHeight: 1.55, textAlign: 'center' }}>
            I'll take a look at your current system and see where I can help.
          </p>

          <div style={{ display: 'grid', gridTemplateColumns: '1fr 1fr', gap: 10, marginBottom: 10 }}>
            <label>
              <span style={labelStyle}>First name</span>
              <input required value={form.first} onChange={upd('first')} onFocus={focusIn} onBlur={focusOut} style={inputStyle} />
            </label>
            <label>
              <span style={labelStyle}>Last name</span>
              <input required value={form.last} onChange={upd('last')} onFocus={focusIn} onBlur={focusOut} style={inputStyle} />
            </label>
          </div>

          <label style={{ display: 'block', marginBottom: 10 }}>
            <span style={labelStyle}>Business name</span>
            <input value={form.business} onChange={upd('business')} onFocus={focusIn} onBlur={focusOut} style={inputStyle} />
          </label>

          <label style={{ display: 'block', marginBottom: 10 }}>
            <span style={labelStyle}>Monthly revenue</span>
            <div style={{ position: 'relative' }}>
              <select required value={form.revenue} onChange={upd('revenue')} onFocus={focusIn} onBlur={focusOut} style={{
                ...inputStyle, appearance: 'none', WebkitAppearance: 'none', paddingRight: 40, cursor: 'pointer',
                color: form.revenue ? '#163F34' : '#8aa19c',
              }}>
                <option value="">Select range</option>
                <option>Under $10k/mo</option>
                <option>$10k – $25k/mo</option>
                <option>$25k – $50k/mo</option>
                <option>$50k – $100k/mo</option>
                <option>$100k – $250k/mo</option>
                <option>$250k+/mo</option>
              </select>
              <svg width="14" height="14" viewBox="0 0 12 12" fill="none" style={{
                position: 'absolute', right: 14, top: '50%', transform: 'translateY(-50%)', pointerEvents: 'none',
              }}>
                <path d="M2 4l4 4 4-4" stroke="#3F8074" strokeWidth="1.6" strokeLinecap="round" strokeLinejoin="round"/>
              </svg>
            </div>
          </label>

          <div style={{ display: 'grid', gridTemplateColumns: '1fr 1fr', gap: 10, marginBottom: 16 }}>
            <label>
              <span style={labelStyle}>Email</span>
              <input required type="email" value={form.email} onChange={upd('email')} onFocus={focusIn} onBlur={focusOut} style={inputStyle} />
            </label>
            <label>
              <span style={labelStyle}>Phone</span>
              <input type="tel" value={form.phone} onChange={upd('phone')} onFocus={focusIn} onBlur={focusOut} placeholder="(555) 555-5555" style={inputStyle} />
            </label>
          </div>

          <button type="submit" style={{
            width: '100%', background: '#C4924A', color: '#fff',
            border: 'none', borderRadius: 12, padding: '13px 22px',
            fontFamily: 'Inter', fontWeight: 700, fontSize: 14.5, cursor: 'pointer',
            display: 'flex', alignItems: 'center', justifyContent: 'center', gap: 10,
            transition: 'background .2s, transform .15s',
          }}
            onMouseEnter={e => { e.currentTarget.style.background = '#ddb06e'; }}
            onMouseLeave={e => { e.currentTarget.style.background = '#C4924A'; }}
            onMouseDown={e => { e.currentTarget.style.transform = 'translateY(1px)'; }}
            onMouseUp={e => { e.currentTarget.style.transform = 'none'; }}
          >
            Book My Free Call <span style={{ fontSize: 16, lineHeight: 1 }}>→</span>
          </button>
        </form>
      )}
    </div>
  );
}
Object.assign(window, { Hero, HeroForm });