// ═══════════════════════════════════════════════════════════
// Leftshifted - Contact Page
// ═══════════════════════════════════════════════════════════

const ContactPage = () => {
  return (
    <PageShell current="/contact">
      {/* ── HERO ───────────────────────────────── */}
      <div className="contact-hero">
        <UnionOverlay opacity={0.06} />
        <div className="page-wrap contact-hero__grid">
          <div className="contact-hero__content">
            <Eyebrow variant="dark">Contact us</Eyebrow>
            <h1 style={{
              font: 'var(--type-display-2)', letterSpacing: 'var(--tracking-display)',
              color: '#fff', marginTop: 20, textWrap: 'balance',
            }}>
              Ready to see results fast? Let's&nbsp;chat.
            </h1>
            <p style={{
              font: 'var(--type-body-lg)', color: 'rgba(255,255,255,.85)',
              marginTop: 20,
            }}>
              Book a 15 min intro call with me.
            </p>
            <div style={{ marginTop: 32 }}>
              <Btn variant="primary" onClick={() => window.open('https://cal.com/leftshifted/15min', '_blank')}>Book a call today</Btn>
            </div>
            <p style={{
              font: 'var(--type-body-sm)', color: 'rgba(255,255,255,.65)',
              marginTop: 20,
            }}>
              Prefer to email? <a href="mailto:jack@leftshifted.com" style={{ color: '#fff', textDecoration: 'underline' }}>jack@leftshifted.com</a>
            </p>
          </div>
          <div className="contact-hero__portrait" style={{ position: 'relative' }}>
            <img src={res("assets/brand/founder-squares.png")} alt="" style={{
              position: 'absolute', top: 20, right: '40%', width: '50%', height: 'calc(100% + 20px)',
              objectFit: 'contain', objectPosition: 'center top', pointerEvents: 'none', zIndex: 2,
            }} />
            <img src={res("assets/imagery/founder-portrait-2-web.jpg")} alt="Jack, Founder & CEO" style={{ position: 'relative', zIndex: 1, width: '100%', display: 'block' }} />
          </div>
        </div>
      </div>

      {/* ── LOGO BAR ───────────────────────────── */}
      <div style={{ background: 'var(--ls-ultramarine-blue)' }}>
        <div className="page-wrap">
          <div style={{ borderBottom: '1px solid rgba(255,255,255,.12)' }}>
            <LogoBar />
          </div>
        </div>
      </div>

      {/* ── FAQ ────────────────────────────────── */}
      {/* ── FAQ ────────────────────────────────── */}
      <div className="home-faq-section">
        <img src={res("assets/brand/faq-squares.png")} alt="" style={{
          position: 'absolute', inset: 0, width: '100%', height: '100%',
          objectFit: 'contain', pointerEvents: 'none',
        }} />
        <div className="page-wrap" style={{ position: 'relative', zIndex: 1 }}>
          <div style={{ maxWidth: 780, margin: '0 auto' }}>
            <div style={{ textAlign: 'center', marginBottom: 40 }}>
              <Eyebrow>FAQs</Eyebrow>
              <h2 style={{ font: 'var(--type-h1)', letterSpacing: 'var(--tracking-h)', marginTop: 16 }}>
                Common questions, honest answers.
              </h2>
            </div>
            <HomeFAQ />
            <div style={{ textAlign: 'center', marginTop: 40 }}>
              <Btn href="/contact">I still have questions</Btn>
            </div>
          </div>
        </div>
      </div>
    </PageShell>
  );
};

Object.assign(window, { ContactPage });