// sw-pages.jsx — Inner pages: Coaching, Soul Awakened Man, Intuitive Alchemy, Podcast, About, Contact

// ── Shared: page intro band ───────────────────────────────────
function PageIntro({ label, heading, body, dark }) {
  const bg = dark ? C.black : C.slate;
  return (
    <section style={{ background: bg, padding: '120px 0' }}>
      <div style={{ ...maxW }}>
        <div style={{ maxWidth: 760 }}>
          <SectionLabel>{label}</SectionLabel>
          <SectionHeading style={{ marginBottom: 28 }}>{heading}</SectionHeading>
          <GreenAccentLine />
          {Array.isArray(body) ? body.map((b, i) => <BodyText key={i} style={{ marginBottom: 18 }}>{b}</BodyText>) : <BodyText>{body}</BodyText>}
        </div>
      </div>
    </section>
  );
}

// ── Shared: two-col section ───────────────────────────────────
function TwoCol({ left, right, reverse, bg, py }) {
  return (
    <section style={{ background: bg || C.black, padding: `${py || 120}px 0` }}>
      <div style={{ ...maxW }}>
        <div style={{ display: 'grid', gridTemplateColumns: '1fr 1fr', gap: 'clamp(40px,6vw,96px)', alignItems: 'center', direction: reverse ? 'rtl' : 'ltr' }}>
          <div style={{ direction: 'ltr' }}>{left}</div>
          <div style={{ direction: 'ltr' }}>{right}</div>
        </div>
      </div>
    </section>
  );
}

// ── COACHING PAGE ─────────────────────────────────────────────
function CoachingPage({ navigate, tweaks }) {
  const dir = tweaks && tweaks.direction;
  return (
    <>
      <HeroSection
        image="uploads/IMG_1509.jpeg"
        eyebrow="Sacred Wild Coaching"
        title={<>Transformation at<br />the level of who,<br />not what</>}
        subtitle="Deep 1:1 coaching and mentoring for purpose-driven leaders, changemakers, and entrepreneurs."
        cta="Book a discovery call"
        onCta={() => { navigate('contact'); window.scrollTo(0,0); }}
        direction={dir}
      />

      {/* For who */}
      <TwoCol
        bg="#0d0d0d"
        left={
          <div>
            <SectionLabel>Who this is for</SectionLabel>
            <SectionHeading style={{ marginBottom: 28 }}>Surface-level<br />success no longer<br />feels like enough</SectionHeading>
            <GreenAccentLine />
            <BodyText style={{ marginBottom: 18 }}>
              You have built the career, the title, the income. And something is missing. Not a problem to be solved — a depth that hasn't been reached yet.
            </BodyText>
            <BodyText style={{ marginBottom: 18 }}>
              This work is for purpose-driven leaders, holistic changemakers, and entrepreneurs at an inflection point. Often post-exit founders, senior tech executives, coaches, or conscious business leaders. Men and women aged 35–55 who are high-achieving, financially successful — and deeply unfulfilled.
            </BodyText>
            <BodyText style={{ marginBottom: 40 }}>
              The promise: moving from what you do to who you are. From managing your life to living it.
            </BodyText>
            <OutlineBtn onClick={() => { navigate('contact'); window.scrollTo(0,0); }}>Work with Krish</OutlineBtn>
          </div>
        }
        right={
          <GreenPhoto src="uploads/IMG_1401.JPEG" style={{ height: 600 }} imgStyle={{ objectPosition: 'center top' }} direction={dir} />
        }
      />

      {/* Credentials */}
      <section style={{ background: C.black, padding: '120px 0', borderTop: '1px solid rgba(255,255,255,0.06)' }}>
        <div style={{ ...maxW }}>
          <div style={{ textAlign: 'center', marginBottom: 72 }}>
            <SectionLabel>Credentials</SectionLabel>
            <SectionHeading>A foot in both worlds</SectionHeading>
          </div>
          <div style={{ display: 'grid', gridTemplateColumns: 'repeat(2, 1fr)', gap: 1, background: 'rgba(255,255,255,0.06)' }}>
            {[
              { label: 'Professional', items: ['ICF Master Certified Coach (MCC)', '8,000+ coaching hours', 'Former Senior Consultant, PwC in Silicon Valley', 'Former Head of People & OD, British Medical Association', 'Coaching Supervisor & ICF Assessor', 'Clients include Google, Tesco, McKinsey, Ford, Hewlett Packard, Amnesty International'] },
              { label: 'Spiritual', items: ['Shamanic and Druidic Initiate', 'Meditation Teacher', 'Intuitive and Channel', 'Inner Guide & Soul Readings Practitioner', 'Nature-based & Earth-centred Practice', 'Featured in The Guardian, Psychologies, Inc., Entrepreneur'] },
            ].map(col => (
              <div key={col.label} style={{ padding: 'clamp(40px,5vw,64px)' }}>
                <SectionLabel>{col.label}</SectionLabel>
                <ul style={{ listStyle: 'none', padding: 0, margin: 0 }}>
                  {col.items.map(item => (
                    <li key={item} style={{ display: 'flex', gap: 16, marginBottom: 16, alignItems: 'flex-start' }}>
                      <span style={{ color: C.greenForest, fontSize: 10, marginTop: 5, flexShrink: 0 }}>◆</span>
                      <BodyText style={{ margin: 0 }}>{item}</BodyText>
                    </li>
                  ))}
                </ul>
              </div>
            ))}
          </div>
        </div>
      </section>

      {/* How it works */}
      <section style={{ background: C.slate, padding: '120px 0' }}>
        <div style={{ ...maxW }}>
          <div style={{ textAlign: 'center', marginBottom: 72 }}>
            <SectionLabel>The Work</SectionLabel>
            <SectionHeading>How we go deeper</SectionHeading>
          </div>
          <div style={{ display: 'grid', gridTemplateColumns: 'repeat(3, 1fr)', gap: 56 }}>
            {[
              { n: '01', title: 'Soul-Level Discovery', body: 'We begin where most coaching ends — at the level of who you are, not what you do. Exploring purpose, gifts, and the life that is calling you.' },
              { n: '02', title: 'Embodied Presence', body: 'Integrating the body as a source of wisdom. Learning to listen to what your nervous system, gut, and inner knowing are already telling you.' },
              { n: '03', title: 'Grounded Transformation', body: 'The inner work lands in the outer life. Leadership, relationships, decisions — all informed by a deeper sense of who you are becoming.' },
            ].map(step => (
              <div key={step.n}>
                <span style={{ display: 'block', fontSize: 13, letterSpacing: '0.28em', color: C.greenForest, fontFamily: T.font, marginBottom: 16 }}>{step.n}</span>
                <Hairline color="rgba(255,255,255,0.08)" style={{ marginBottom: 24 }} />
                <h4 style={{ fontSize: 15, letterSpacing: '0.14em', textTransform: 'uppercase', color: C.white, fontFamily: T.font, fontWeight: 300, marginBottom: 16, lineHeight: 1.4 }}>{step.title}</h4>
                <BodyText>{step.body}</BodyText>
              </div>
            ))}
          </div>
        </div>
      </section>

      {/* Testimonial */}
      <section style={{ background: C.black, padding: '120px 0', borderTop: '1px solid rgba(255,255,255,0.06)' }}>
        <div style={{ ...maxW }}>
          <div style={{ maxWidth: 720, margin: '0 auto', textAlign: 'center' }}>
            <p style={{ fontFamily: T.serif, fontStyle: 'italic', fontWeight: 300, fontSize: 'clamp(18px,2vw,24px)', lineHeight: 1.85, color: C.white, marginBottom: 28 }}>
              "Krish isn't your average leadership coach. We've worked at the level of doing... that work flowed naturally from a new core of being. If you're willing to commit, show up, and move more out of your place of comfort, Krish is your guy."
            </p>
            <span style={{ fontSize: 13, letterSpacing: '0.22em', textTransform: 'uppercase', color: 'rgba(255,255,255,0.38)', fontFamily: T.font }}>
              — Steve Peralta, Chief Content Officer, Unmind.com
            </span>
          </div>
        </div>
      </section>

      <ContactSection navigate={navigate} />
    </>
  );
}

// ── SOUL AWAKENED MAN PAGE ────────────────────────────────────
function SoulAwakenedManPage({ navigate, tweaks }) {
  const dir = tweaks && tweaks.direction;
  const accentAmber = dir === 'ember' ? '#d4a040' : C.amber;

  return (
    <>
      <HeroSection
        image="uploads/IMG_1535.jpeg"
        eyebrow="Soul Awakened Man"
        title={<>The man who<br />goes deeper</>}
        subtitle="For men who feel the call — to meaning, to brotherhood, to the life that is actually theirs."
        cta="Apply for mentoring"
        onCta={() => { navigate('contact'); window.scrollTo(0,0); }}
        direction={dir}
      />

      {/* What this is */}
      <section style={{ background: C.slate, padding: '140px 0' }}>
        <div style={{ ...maxW }}>
          <div style={{ display: 'grid', gridTemplateColumns: '1fr 1fr', gap: 'clamp(40px,6vw,96px)', alignItems: 'center' }}>
            <div>
              <SectionLabel color={`rgba(200,144,42,0.7)`}>What this is</SectionLabel>
              <SectionHeading style={{ marginBottom: 28 }}>Not toxic alpha.<br />Not passively spiritual.<br />Fully awake.</SectionHeading>
              <div style={{ width: 40, height: 1, background: accentAmber, marginBottom: 32 }} />
              <BodyText style={{ marginBottom: 18 }}>
                Soul Awakened Man is a dedicated mentoring and development programme for men who feel a calling to go deeper — spiritually, purposefully, relationally.
              </BodyText>
              <BodyText style={{ marginBottom: 18 }}>
                The work is mythopoetic and grounded. It draws on archetype, nature, and sacred masculine traditions — held with the rigour of an 8,000-hour ICF master coach.
              </BodyText>
              <BodyText style={{ marginBottom: 40 }}>
                Currently offered as 1:1 mentoring and coaching. A group programme is in development and coming soon.
              </BodyText>
              <OutlineBtn onClick={() => { navigate('contact'); window.scrollTo(0,0); }} color={accentAmber}>Apply for mentoring</OutlineBtn>
            </div>
            <GreenPhoto
              src="uploads/IMG_1500.jpeg"
              style={{ height: 600 }}
              imgStyle={{ objectPosition: 'center 20%' }}
              direction={dir}
            />
          </div>
        </div>
      </section>

      {/* Who the SAM is */}
      <section style={{ background: C.black, padding: '120px 0', borderTop: '1px solid rgba(255,255,255,0.06)' }}>
        <div style={{ ...maxW }}>
          <div style={{ textAlign: 'center', marginBottom: 72 }}>
            <SectionLabel color={`rgba(200,144,42,0.7)`}>Who this is for</SectionLabel>
            <SectionHeading>The Soul Awakened Man is…</SectionHeading>
          </div>
          <div style={{ display: 'grid', gridTemplateColumns: 'repeat(2, 1fr)', gap: 'clamp(32px,4vw,64px)' }}>
            {[
              'At a crossroads between conventional success and deeper meaning.',
              'Feeling isolated despite outward achievements — the high achiever who knows something is missing.',
              'Drawn to nature, personal growth, myth, and archetype — but grounded, never precious.',
              'Ready to "drop in" rather than just climb up. Depth over ascent.',
              'Seeking authentic masculinity — not the old dominance model, not its overcorrection.',
              'Men aged 35–65. Executives, entrepreneurs, high-achieving professionals. Spiritual but not religious.',
            ].map((text, i) => (
              <div key={i} style={{ display: 'flex', gap: 20, alignItems: 'flex-start' }}>
                <div style={{ width: 1, height: 'auto', background: accentAmber, flexShrink: 0, alignSelf: 'stretch', minHeight: 40, opacity: 0.5 }} />
                <BodyText style={{ margin: 0 }}>{text}</BodyText>
              </div>
            ))}
          </div>
        </div>
      </section>

      {/* What we explore */}
      <section style={{ background: C.slate, padding: '120px 0' }}>
        <div style={{ ...maxW }}>
          <div style={{ textAlign: 'center', marginBottom: 72 }}>
            <SectionLabel color={`rgba(200,144,42,0.7)`}>The Territory</SectionLabel>
            <SectionHeading>What we explore together</SectionHeading>
          </div>
          <div style={{ display: 'grid', gridTemplateColumns: 'repeat(3, 1fr)', gap: 1, background: 'rgba(255,255,255,0.06)' }}>
            {[
              { title: 'Purpose & Soul Gifts', body: 'Unearthing what you are here to do and be — not what the world has told you to be.' },
              { title: 'Sacred Masculine', body: 'Reclaiming the elder, the warrior, the sage — as lived archetypes, not mythology.' },
              { title: 'Inner Council', body: 'Learning to access the different wisdom sources within you — the intelligence that goes beyond the rational mind.' },
              { title: 'Brotherhood', body: 'Belonging, connection, and accountability in a culture that has lost its masculine initiation rites.' },
              { title: 'Nature as Teacher', body: 'The land as a living mirror. Wilderness, season, and elemental forces as teachers.' },
              { title: 'Leading from Soul', body: 'Bringing the inner realisation into outer life — relationships, leadership, and legacy.' },
            ].map(item => (
              <div key={item.title} style={{ padding: 'clamp(32px,4vw,52px)', background: C.black }}>
                <div style={{ width: 28, height: 1, background: accentAmber, marginBottom: 20, opacity: 0.7 }} />
                <h4 style={{ fontSize: 14, letterSpacing: '0.16em', textTransform: 'uppercase', color: C.white, fontFamily: T.font, fontWeight: 300, marginBottom: 16 }}>{item.title}</h4>
                <BodyText style={{ fontSize: 16 }}>{item.body}</BodyText>
              </div>
            ))}
          </div>
        </div>
      </section>

      {/* Coming soon group */}
      <section style={{ background: C.black, padding: '100px 0', borderTop: '1px solid rgba(255,255,255,0.06)' }}>
        <div style={{ ...maxW }}>
          <div style={{ maxWidth: 640, margin: '0 auto', textAlign: 'center' }}>
            <SectionLabel color={`rgba(200,144,42,0.6)`}>Coming Soon</SectionLabel>
            <SectionHeading style={{ marginBottom: 24 }}>The group programme</SectionHeading>
            <BodyText style={{ marginBottom: 40 }}>
              A dedicated group mentoring experience for soul-awakened men is in development. A council. A container. A brotherhood with structure and depth. Express your interest and be the first to hear.
            </BodyText>
            <OutlineBtn onClick={() => { navigate('contact'); window.scrollTo(0,0); }} color={accentAmber}>Register Interest</OutlineBtn>
          </div>
        </div>
      </section>

      <ContactSection navigate={navigate} />
    </>
  );
}

// ── INTUITIVE ALCHEMY PAGE ────────────────────────────────────
function IntuitiveAlchemyPage({ navigate, tweaks }) {
  const dir = tweaks && tweaks.direction;

  return (
    <>
      <HeroSection
        image="uploads/IMG_1449.jpeg"
        eyebrow="Intuitive Alchemy"
        title={<>The head was<br />never meant to<br />decide alone</>}
        subtitle="An 8-week immersion in accessing the inner wisdom that changes everything."
        cta="Join the waitlist"
        onCta={() => { navigate('contact'); window.scrollTo(0,0); }}
        direction={dir}
      />

      {/* What it is */}
      <section style={{ background: C.slate, padding: '140px 0' }}>
        <div style={{ ...maxW }}>
          <div style={{ display: 'grid', gridTemplateColumns: '1fr 1fr', gap: 'clamp(40px,6vw,96px)', alignItems: 'center' }}>
            <div>
              <SectionLabel>What this is</SectionLabel>
              <SectionHeading style={{ marginBottom: 28 }}>Your inner wisdom<br />is already here</SectionHeading>
              <GreenAccentLine />
              <BodyText style={{ marginBottom: 18 }}>
                We're taught that logic and reasoning are how we make decisions. But the head was never meant to make decisions alone. Something in you already knows this.
              </BodyText>
              <BodyText style={{ marginBottom: 18 }}>
                Intuitive Alchemy is about learning to consistently, accurately, and easily access your inner wisdom — not just for quick yes/no answers, but for the deeper perspective that changes everything.
              </BodyText>
              <BodyText style={{ marginBottom: 40 }}>
                8 weeks. 1 hour on Zoom per week. Small group of 8 maximum. An online portal with materials between sessions.
              </BodyText>
              <OutlineBtn onClick={() => { navigate('contact'); window.scrollTo(0,0); }}>Join the waitlist</OutlineBtn>
            </div>
            <GreenPhoto
              src="uploads/IMG_1458.jpeg"
              style={{ height: 560 }}
              imgStyle={{ objectPosition: 'center' }}
              direction={dir}
            />
          </div>
        </div>
      </section>

      {/* What's covered */}
      <section style={{ background: C.black, padding: '120px 0', borderTop: '1px solid rgba(255,255,255,0.06)' }}>
        <div style={{ ...maxW }}>
          <div style={{ textAlign: 'center', marginBottom: 72 }}>
            <SectionLabel>The Curriculum</SectionLabel>
            <SectionHeading>8 weeks of deep listening</SectionHeading>
          </div>
          <div style={{ display: 'grid', gridTemplateColumns: 'repeat(4, 1fr)', gap: 1, background: 'rgba(255,255,255,0.06)' }}>
            {[
              { wk: 'Week 1', title: 'What Intuition Actually Is', body: 'Distinguishing real inner knowing from noise, fear, and conditioning.' },
              { wk: 'Week 2', title: 'How We Block It', body: 'The patterns and beliefs that have kept your inner knowing quiet.' },
              { wk: 'Week 3', title: 'The Body as Antenna', body: 'How your physical body works as a receiver for wisdom and guidance.' },
              { wk: 'Week 4', title: 'Discerning Guidance', body: 'Separating real signal from ego distortion — reliably and consistently.' },
              { wk: 'Week 5', title: 'Your Inner Council', body: 'Accessing the different wisdom sources within you.' },
              { wk: 'Week 6', title: 'Different Flavours', body: 'Mapping your unique signature of guidance — visual, somatic, auditory, knowing.' },
              { wk: 'Week 7', title: 'Your Personal Toolkit', body: 'Building the practices that work for your specific way of receiving.' },
              { wk: 'Week 8', title: 'Living from Knowing', body: 'Integrating your inner wisdom into decisions, relationships, and leadership.' },
            ].map(item => (
              <div key={item.wk} style={{ padding: 'clamp(24px,3vw,40px)', background: C.black }}>
                <span style={{ display: 'block', fontSize: 8, letterSpacing: '0.28em', textTransform: 'uppercase', color: C.greenForest, fontFamily: T.font, marginBottom: 12 }}>{item.wk}</span>
                <h4 style={{ fontSize: 14, letterSpacing: '0.14em', textTransform: 'uppercase', color: C.white, fontFamily: T.font, fontWeight: 300, marginBottom: 12, lineHeight: 1.4 }}>{item.title}</h4>
                <BodyText style={{ fontSize: 16 }}>{item.body}</BodyText>
              </div>
            ))}
          </div>
        </div>
      </section>

      {/* Pricing + waitlist */}
      <section style={{ background: C.slate, padding: '120px 0' }}>
        <div style={{ ...maxW }}>
          <div style={{ display: 'grid', gridTemplateColumns: '1fr 1fr', gap: 'clamp(40px,6vw,96px)', alignItems: 'center' }}>
            <div>
              <SectionLabel>Investment</SectionLabel>
              <SectionHeading style={{ marginBottom: 24 }}>Pilot pricing</SectionHeading>
              <GreenAccentLine />
              <div style={{ marginBottom: 32 }}>
                <span style={{ display: 'block', fontSize: 'clamp(36px,4vw,52px)', letterSpacing: '0.12em', color: C.white, fontFamily: T.font, fontWeight: 300, marginBottom: 8 }}>£197</span>
                <span style={{ fontSize: 13, letterSpacing: '0.22em', textTransform: 'uppercase', color: 'rgba(255,255,255,0.35)', fontFamily: T.font }}>Introductory — Normally £597</span>
              </div>
              <BodyText style={{ marginBottom: 18 }}>
                This is the pilot cohort. Introductory pricing reflects that — and the group of 8 men who join will help shape the full curriculum going forward.
              </BodyText>
              <BodyText style={{ marginBottom: 40 }}>
                Next cohort dates are to be confirmed. Join the waitlist to be first in line and to receive early-bird access.
              </BodyText>
              <PillBtn onClick={() => { navigate('contact'); window.scrollTo(0,0); }}>Join the waitlist</PillBtn>
            </div>
            <div style={{ padding: 'clamp(32px,4vw,52px)', border: '1px solid rgba(255,255,255,0.08)' }}>
              <SectionLabel>Format</SectionLabel>
              {[
                ['Duration', '8 weeks'],
                ['Sessions', '1 hour on Zoom per week'],
                ['Group size', 'Maximum 8 men'],
                ['Materials', 'Online portal between sessions'],
                ['Next cohort', 'Dates TBC — join waitlist'],
                ['What follows', 'Energy Alchemy (the next course in the series)'],
              ].map(([label, val]) => (
                <div key={label} style={{ display: 'flex', justifyContent: 'space-between', borderBottom: '1px solid rgba(255,255,255,0.06)', padding: '16px 0', gap: 16 }}>
                  <span style={{ fontSize: 13, letterSpacing: '0.2em', textTransform: 'uppercase', color: 'rgba(255,255,255,0.38)', fontFamily: T.font }}>{label}</span>
                  <BodyText style={{ margin: 0, textAlign: 'right', fontSize: 14 }}>{val}</BodyText>
                </div>
              ))}
            </div>
          </div>
        </div>
      </section>

      <ContactSection navigate={navigate} />
    </>
  );
}

// ── PODCAST PAGE ──────────────────────────────────────────────
function PodcastPage({ navigate, tweaks }) {
  const dir = tweaks && tweaks.direction;
  return (
    <>
      <HeroSection
        image="uploads/IMG_1466.jpeg"
        eyebrow="The Sacred Wild Podcast"
        title={<>Ancient knowing,<br />modern conversation</>}
        subtitle="Spirituality, ecology, leadership, and social justice — in conversation with the people and ideas that matter."
        direction={dir}
      />
      <section style={{ background: C.slate, padding: '120px 0' }}>
        <div style={{ ...maxW }}>
          <div style={{ maxWidth: 760 }}>
            <SectionLabel>The Podcast</SectionLabel>
            <SectionHeading style={{ marginBottom: 28 }}>Conversations at the<br />edge of what’s possible</SectionHeading>
            <GreenAccentLine />
            <BodyText style={{ marginBottom: 18 }}>
              The Sacred Wild Podcast is hosted by Krish Surroy. Each episode moves between the inner and the outer — personal development, earth-centred spirituality, ecological awareness, leadership, and social justice.
            </BodyText>
            <BodyText style={{ marginBottom: 48 }}>
              The tone is grounded, paradox-embracing, direct. If you've found your way here, you'll recognise what we're reaching for.
            </BodyText>
            {/* Embed placeholder */}
            <div style={{ background: 'rgba(255,255,255,0.03)', border: '1px solid rgba(255,255,255,0.08)', padding: 40, textAlign: 'center', marginBottom: 48 }}>
              <ShapeNested color={C.greenForest} />
              <p style={{ fontFamily: T.serif, fontStyle: 'italic', color: 'rgba(255,255,255,0.45)', fontSize: 16, marginTop: 20, lineHeight: 1.7 }}>
                Podcast embed — Spotify / Apple Podcasts player appears here
              </p>
            </div>
            <div style={{ display: 'flex', gap: 16, flexWrap: 'wrap' }}>
              <OutlineBtn onClick={() => {}}>Listen on Spotify</OutlineBtn>
              <OutlineBtn onClick={() => {}}>Apple Podcasts</OutlineBtn>
            </div>
          </div>
        </div>
      </section>
      <ContactSection navigate={navigate} />
    </>
  );
}

// ── ABOUT PAGE ────────────────────────────────────────────────
function AboutPage({ navigate, tweaks }) {
  const dir = tweaks && tweaks.direction;
  return (
    <>
      <HeroSection
        image="uploads/IMG_1527.jpeg"
        eyebrow="About Krish"
        title={<>Inner guide.<br />Master coach.<br />Sacred Wild.</>}
        subtitle="A life lived at the intersection of boardroom and sacred grove."
        direction={dir}
        minH="85vh"
      />
      <section style={{ background: C.slate, padding: '140px 0' }}>
        <div style={{ ...maxW }}>
          <div style={{ display: 'grid', gridTemplateColumns: '1fr 1fr', gap: 'clamp(40px,6vw,96px)', alignItems: 'start' }}>
            <div>
              <SectionLabel>The Story</SectionLabel>
              <SectionHeading style={{ marginBottom: 28 }}>Merlin to the<br />King Arthurs</SectionHeading>
              <GreenAccentLine />
              <BodyText style={{ marginBottom: 18 }}>
                Krish Surroy, 54, is an ICF Master Certified Coach (MCC) with 8,000+ coaching hours. He has lived across the UK and North America, and is based in British Columbia, Canada with his husband David.
              </BodyText>
              <BodyText style={{ marginBottom: 18 }}>
                He holds a foot in both worlds. By day, he is a former Senior Consultant at PwC in Silicon Valley and former Head of People & OD at the British Medical Association. He has coached C-suite leaders at Google, Tesco, McKinsey, Ford, Hewlett Packard, and dozens more. He is a Coaching Supervisor and ICF Assessor.
              </BodyText>
              <BodyText style={{ marginBottom: 18 }}>
                By night — and by deeper calling — he is a Shamanic and Druidic initiate, a meditation teacher, an intuitive and channel, and a spiritual teacher with deep roots in nature-based, earth-centred practice.
              </BodyText>
              <BodyText style={{ marginBottom: 40 }}>
                He thinks of himself as Merlin to the King Arthurs. The wise counsel behind the great leaders, not the leader himself. His power is in the depth of his presence — not the performance of expertise.
              </BodyText>
              <p style={{ fontFamily: T.serif, fontStyle: 'italic', fontWeight: 300, fontSize: 19, color: 'rgba(245,243,239,0.6)', lineHeight: 1.75 }}>
                "Transformation happens at the level of who, not what."
              </p>
            </div>
            <div>
              <GreenPhoto
                src="uploads/IMG_1549.jpeg"
                style={{ height: 560, marginBottom: 32 }}
                imgStyle={{ objectPosition: 'center 20%' }}
                direction={dir}
              />
              <GreenPhoto
                src="uploads/IMG_1511.jpeg"
                style={{ height: 300 }}
                imgStyle={{ objectPosition: 'center' }}
                direction={dir}
              />
            </div>
          </div>
        </div>
      </section>

      {/* Coming soon */}
      <section style={{ background: C.black, padding: '100px 0', borderTop: '1px solid rgba(255,255,255,0.06)' }}>
        <div style={{ ...maxW }}>
          <div style={{ textAlign: 'center' }}>
            <SectionLabel>Coming</SectionLabel>
            <SectionHeading style={{ marginBottom: 24 }}>What’s on the horizon</SectionHeading>
            <div style={{ display: 'flex', justifyContent: 'center', gap: 'clamp(32px,5vw,80px)', flexWrap: 'wrap', marginTop: 52 }}>
              {[
                { title: 'Wilderness Retreats', body: '4–5 day immersive experiences in British Columbia\'s natural landscape. Coming soon.' },
                { title: 'Energy Alchemy', body: 'The follow-on to Intuitive Alchemy — the next course in the series.' },
                { title: 'Unearth Your True Nature', body: 'A book. In development. The full expression of this work in written form.' },
              ].map(item => (
                <div key={item.title} style={{ maxWidth: 240, textAlign: 'center' }}>
                  <Logomark size={24} color="rgba(79,122,82,0.5)" />
                  <h4 style={{ fontSize: 14, letterSpacing: '0.16em', textTransform: 'uppercase', color: C.white, fontFamily: T.font, fontWeight: 300, margin: '20px 0 12px' }}>{item.title}</h4>
                  <BodyText style={{ fontSize: 16 }}>{item.body}</BodyText>
                </div>
              ))}
            </div>
          </div>
        </div>
      </section>
      <ContactSection navigate={navigate} />
    </>
  );
}

// ── CONTACT PAGE ──────────────────────────────────────────────
function ContactPage({ navigate, tweaks }) {
  return (
    <>
      <div style={{ height: 68, background: C.black }} />
      <ContactSection navigate={navigate} />
    </>
  );
}

Object.assign(window, { PageIntro, TwoCol, CoachingPage, SoulAwakenedManPage, IntuitiveAlchemyPage, PodcastPage, AboutPage, ContactPage });