// components/ContactPage.jsx

function ContactPage() {
  return (
    <div className="sb-page">
      <Section tone="linen" style={{ paddingBlock: 'clamp(56px, 8vw, 96px)' }}>
        <div style={{ marginBottom: 40 }}>
          <LogoBlock size={40} color="var(--sb-ink)" accent="var(--sb-amber)" />
          <div style={{ height: 1, background: 'var(--sb-stone)', marginTop: 22 }} />
        </div>
        <div style={{ display: 'grid', gridTemplateColumns: 'repeat(auto-fit, minmax(300px, 1fr))', gap: 56, alignItems: 'flex-start' }}>
          <div>
            <Eyebrow>Contact</Eyebrow>
            <h1 className="sb-h1" style={{ marginTop: 22 }}>
              Let's see if we're a fit.
            </h1>
            <p className="sb-body-lg" style={{ marginTop: 24, maxWidth: 460 }}>
              The fastest way to start is a 30-minute consultation. No prep, no slides, no obligation. We talk through your business, your books today, and what would have to be true for you to stop thinking about them.
            </p>
            <div style={{ marginTop: 36 }}>
              <a href={window.BOOKINGS_URL} target="_blank" rel="noopener noreferrer"
                 className="sb-btn sb-btn--primary"
                 style={{ padding: '16px 28px', fontSize: 16 }}>
                Schedule a 30-minute consultation
                <span style={{ marginLeft: 4 }}>→</span>
              </a>
              <p className="sb-small" style={{ marginTop: 14, color: 'var(--sb-taupe)' }}>
                30 min · phone or video · no obligation
              </p>
            </div>
          </div>

          {/* Side card with details */}
          <div style={{
            background: 'var(--sb-cream)',
            border: '1px solid var(--sb-stone)',
            padding: '32px 32px 28px',
            boxShadow: '0 1px 3px rgba(42, 39, 36, 0.10), 0 20px 48px -10px rgba(42, 39, 36, 0.16)',
          }}>
            <div className="sb-caption" style={{ marginBottom: 20 }}>What to expect</div>
            <ol style={{ listStyle: 'none', padding: 0, margin: 0, display: 'flex', flexDirection: 'column', gap: 22 }}>
              {[
                ['1', 'Pick a time on the calendar.'],
                ['2', '30-minute call — phone or video, your choice.'],
                ['3', 'If we\'re a fit, a written proposal within 48 hours.'],
                ['4', 'If we\'re not, an honest referral.'],
              ].map(([n, t]) => (
                <li key={n} style={{ display: 'grid', gridTemplateColumns: '36px 1fr', gap: 14, alignItems: 'baseline' }}>
                  <span style={{
                    fontFamily: 'var(--sb-font-mono)',
                    fontSize: 12,
                    color: 'var(--sb-amber)',
                    border: '1px solid var(--sb-stone)',
                    padding: '4px 0',
                    textAlign: 'center',
                    letterSpacing: '0.05em',
                  }}>0{n}</span>
                  <span style={{ fontSize: 15, color: 'var(--sb-ink)', lineHeight: 1.5 }}>{t}</span>
                </li>
              ))}
            </ol>
          </div>
        </div>
      </Section>

      {/* Service area */}
      <Section tone="cream">
        <div style={{ display: 'grid', gridTemplateColumns: 'repeat(auto-fit, minmax(260px, 1fr))', gap: 56 }}>
          <div>
            <Eyebrow>Where we work</Eyebrow>
            <h2 className="sb-h2" style={{ marginTop: 16, maxWidth: 460 }}>
              Remote-first, with the Houston metro at the center.
            </h2>
            <p className="sb-body" style={{ marginTop: 18, maxWidth: 480 }}>
              Most clients work with us entirely remotely — secure document sharing, scheduled calls, async email. If you'd rather meet in person, we do that case-by-case for clients in the immediate area.
            </p>
          </div>

          <div style={{
            display: 'grid',
            gridTemplateColumns: '1fr 1fr',
            gap: 0,
            border: '1px solid var(--sb-stone)',
          }}>
            {[
              { city: 'Houston', detail: 'Greater metro' },
              { city: 'The Woodlands', detail: 'In-person available' },
              { city: 'Conroe', detail: 'In-person available' },
              { city: 'Montgomery County', detail: 'Home base' },
            ].map((row, i, arr) => (
              <div key={row.city} style={{
                padding: '24px 24px',
                borderRight: i % 2 === 0 ? '1px solid var(--sb-stone)' : 'none',
                borderBottom: i < arr.length - 2 ? '1px solid var(--sb-stone)' : 'none',
                background: 'var(--sb-linen)',
              }}>
                <div style={{ fontFamily: 'var(--sb-font-sans)', fontWeight: 500, fontSize: 17, color: 'var(--sb-ink)', letterSpacing: '-0.015em' }}>
                  {row.city}
                </div>
                <div className="sb-mono" style={{ fontSize: 12, color: 'var(--sb-taupe)', marginTop: 4 }}>
                  {row.detail}
                </div>
              </div>
            ))}
          </div>
        </div>
      </Section>

      {/* Direct contact */}
      <Section tone="bone">
        <div style={{
          display: 'grid',
          gridTemplateColumns: 'repeat(auto-fit, minmax(240px, 1fr))',
          gap: 0,
          borderTop: '1px solid var(--sb-stone)',
          borderBottom: '1px solid var(--sb-stone)',
        }}>
          {[
            { k: 'Email', v: 'chris@settledbooks.com', sub: 'Replies within one business day' },
            { k: 'Phone', v: 'By appointment', sub: 'Schedule via consultation link' },
            { k: 'Hours', v: 'Mon–Thu · 9–5 CT', sub: 'Friday reserved for monthly closes' },
          ].map((row, i, arr) => (
            <div key={row.k} style={{
              padding: '32px 24px',
              borderRight: i < arr.length - 1 ? '1px solid var(--sb-stone)' : 'none',
            }}>
              <div className="sb-caption" style={{ marginBottom: 12 }}>{row.k}</div>
              <div style={{ fontFamily: 'var(--sb-font-sans)', fontSize: 18, fontWeight: 500, color: 'var(--sb-ink)', letterSpacing: '-0.015em', marginBottom: 6 }}>
                {row.v}
              </div>
              <div className="sb-small" style={{ color: 'var(--sb-taupe)' }}>{row.sub}</div>
            </div>
          ))}
        </div>
      </Section>
    </div>
  );
}

window.ContactPage = ContactPage;