// sw-home.jsx — Homepage sections
// Copy lives here (since 6 Nov 2026). The home page itself is the block at the end of this file.

const go = (navigate, id) => () => { navigate(id); window.scrollTo(0, 0); };
const PAD = '96px 0';

// ── Draft marker: shows what's still waiting on a decision ────
function DraftNote({ children, style = {}, color = C.ember }) {
  return (
    <span style={{ display: 'inline-block', fontSize: 11, letterSpacing: '0.14em', textTransform: 'uppercase', color, border: `1px dashed ${color}`, padding: '5px 9px', borderRadius: 2, fontFamily: T.font, opacity: 0.85, lineHeight: 1.3, ...style }}>
      {children}
    </span>
  );
}

// ── Hero: one photo across the width, Krish on the right, the land fading into the blue behind the words ──
// Other portraits to compare: ?hero=forest or ?hero=path in the address
const HERO_PHOTOS = {
  forest: { src: 'uploads/krish-forest-right.jpg', pos: 'center 22%', alt: 'Krish Surroy in a woodland' },
  oak: { src: 'uploads/krish-oak-right.jpg', pos: 'center 20%', alt: 'Krish Surroy beneath an old oak' },
  path: { src: 'uploads/IMG_1500.jpeg', pos: 'center 35%', alt: 'Krish Surroy on a woodland path' },
};

function HomeHero() {
  const choice = new URLSearchParams(window.location.search).get('hero');
  const photo = HERO_PHOTOS[choice] || HERO_PHOTOS.oak;
  const toWays = () => {
    const el = document.getElementById('ways');
    if (el) window.scrollTo({ top: el.offsetTop - 68, behavior: 'smooth' });
  };
  return (
    <section className="home-hero" style={{ position: 'relative', overflow: 'hidden', background: C.black, paddingTop: 68, minHeight: '100vh', /* the full first screen, so the press logos sit just below the fold (5 Nov 2026) */ display: 'flex', alignItems: 'center' }}>
      <div className="hero-photo" style={{ position: 'absolute', top: 0, bottom: 0, right: 0, width: 'min(100%, 1800px)' }}>
        <img src={photo.src} alt={photo.alt} style={{ position: 'absolute', inset: 0, width: '100%', height: '100%', objectFit: 'cover', objectPosition: photo.pos, filter: 'grayscale(0.15) brightness(0.95)' }} />
        <div style={{ position: 'absolute', inset: 0, background: C.blueGrade, mixBlendMode: 'multiply', opacity: 0.22 }} />
        <div className="hero-fade" style={{ position: 'absolute', inset: 0, background: 'linear-gradient(90deg, rgba(14,21,32,1) 0%, rgba(14,21,32,0.95) 8%, rgba(14,21,32,0.84) 30%, rgba(14,21,32,0.4) 50%, rgba(14,21,32,0) 66%)' }} />
      </div>
      <div className="hero-wheel" style={{ position: 'absolute', top: '54%', left: '24%', transform: 'translate(-50%,-50%)', pointerEvents: 'none', zIndex: 1 }}>
        <Wheel size={600} opacity={0.16} />
      </div>
      <div className="hero-words" style={{ ...maxW, position: 'relative', zIndex: 2, width: '100%', padding: 'clamp(48px,8vh,104px) clamp(24px, 8vw, 120px)' }}>
        <div style={{ maxWidth: 580 }}>
          {/* Eyebrow: says what Krish is in the first screen (Krish, 6 Nov 2026) */}
          <div className="fade-up-1"><SectionLabel>Executive coach and spiritual teacher</SectionLabel></div>
          <h1 className="fade-up-2" style={{ fontSize: 'clamp(40px, 4.8vw, 78px)', letterSpacing: '-0.01em', color: C.white, lineHeight: 1.05, marginBottom: 28, fontFamily: T.font, fontWeight: 300 }}>
            Unearth Your True Nature
          </h1>
          <p className="fade-up-3" style={{ fontFamily: T.serif, fontStyle: T.serifStyle, fontSize: 'clamp(19px, 1.7vw, 25px)', lineHeight: 1.45, color: 'rgba(234,231,223,0.88)', marginBottom: 52 }}>
            I help you remember who you truly are, recognise what you're here for, and live from that knowing.
          </p>
          <div className="fade-up-4"><PillBtn onClick={() => { goPage('book'); }}>Book a free 30-minute call</PillBtn></div>
        </div>
      </div>
    </section>
  );
}

// ── Press logos (white, cut from the 2020 site's appearances strip) ──
function PressSection() {
  const logos = [
    { src: 'uploads/press/guardian.png', alt: 'The Guardian', h: 34 },
    { src: 'uploads/press/psychologies.png', alt: 'Psychologies', h: 25 },
    { src: 'uploads/press/inc.png', alt: 'Inc.', h: 25 },
    { src: 'uploads/press/entrepreneur.png', alt: 'Entrepreneur', h: 23 },
    { src: 'uploads/press/good-men-project.png', alt: 'The Good Men Project', h: 32 },
  ];
  return (
    <section style={{ background: C.slate, padding: '28px 0', borderBottom: `1px solid ${C.line}` }}>
      <div style={{ ...maxW }}>
        <div style={{ display: 'flex', justifyContent: 'center', alignItems: 'center', gap: 'clamp(22px,4.5vw,64px)', flexWrap: 'wrap' }}>
          <span style={{ fontSize: 12, letterSpacing: '0.24em', textTransform: 'uppercase', color: C.grey3, fontFamily: T.font }}>As seen in</span>
          {logos.map(l => (
            <img key={l.alt} src={l.src} alt={l.alt} style={{ height: l.h, width: 'auto', opacity: 0.85, display: 'block' }} />
          ))}
        </div>
      </div>
    </section>
  );
}

// ── Is this you? ──────────────────────────────────────────────
function IsThisYouSection() {
  const cols = [
    { title: 'Is this all there is?', body: "You've done everything you knew how to do to be successful. You've built the career and made some money, and you've got the house, the car and maybe the family. And yet something inside feels off. You know you've got more to give, and you sense you're here to do something, but you don't know what it is or how to find out." },
    { title: 'How do I actually live this?', body: "You've opened up. You're drawn to the spiritual and the intuitive, and you've done plenty of personal growth, but your life hasn't caught up. Between family, money, other people's expectations and that familiar imposter voice, you're stuck and smaller than you know you are, and you can't see how to make your purpose real in the world." },
  ];
  return (
    <section className="pad" style={{ position: 'relative', overflow: 'hidden', background: C.black, padding: PAD }}>
      <div style={{ position: 'absolute', inset: 0, backgroundImage: "url('uploads/forest-glow.jpg')", backgroundSize: 'cover', backgroundPosition: 'center 40%' }} />
      <div style={{ position: 'absolute', inset: 0, background: 'linear-gradient(90deg, rgba(14,21,32,0.9) 0%, rgba(14,21,32,0.72) 55%, rgba(14,21,32,0.55) 100%)' }} />
      <div style={{ ...maxW, position: 'relative' }}>
        <div className="g2" style={{ display: 'grid', gridTemplateColumns: '4fr 8fr', gap: 'clamp(32px,4vw,56px)', alignItems: 'start' }}>
          <div>
            <SectionLabel>Is this you?</SectionLabel>
            <SectionHeading style={{ marginBottom: 24 }}>You know there's more</SectionHeading>
            <p style={{ fontFamily: T.serif, fontStyle: T.serifStyle, fontSize: 'clamp(19px, 1.8vw, 23px)', lineHeight: 1.55, color: 'rgba(234,231,223,0.82)', marginBottom: 28 }}>
              Something in you has shifted, whether or not you'd call it an awakening, and you can't go back to how things were.
            </p>
            <BodyText style={{ color: C.white, fontSize: 17 }}>
              You're carrying it more alone than you'd like, because few people around you get it, and you don't want to look flaky by saying it out loud. It usually shows up in one of two ways.
            </BodyText>
          </div>
          <div className="g2" style={{ display: 'grid', gridTemplateColumns: '1fr 1fr', gap: 20 }}>
            {cols.map(c => (
              <div key={c.title} style={{ background: 'rgba(14,21,32,0.82)', backdropFilter: 'blur(4px)', border: `1px solid ${C.lineStrong}`, padding: 'clamp(24px,3vw,36px)' }}>
                <h3 className="card-q" style={{ fontFamily: T.font, fontWeight: 300, fontSize: 24, color: C.white, marginBottom: 14 }}>{c.title}</h3>
                <div style={{ width: 32, height: 1, background: C.ember, marginBottom: 18 }} />
                <BodyText style={{ fontSize: 16 }}>{c.body}</BodyText>
              </div>
            ))}
          </div>
        </div>
      </div>
    </section>
  );
}

// ── The passage (a light parchment section) ───────────────────
function PassageSection() {
  const text = { fontSize: 18, lineHeight: 1.7, color: C.ink, fontFamily: T.font, marginBottom: 20 };
  return (
    <section className="pad" style={{ position: 'relative', overflow: 'hidden', background: C.parchment, padding: PAD }}>
      <div style={{ position: 'absolute', top: '50%', right: '-6%', transform: 'translateY(-50%)', pointerEvents: 'none' }}>
        <Wheel size={620} opacity={0.14} color={C.ink} />
      </div>
      <div style={{ ...maxW, position: 'relative' }}>
        <div style={{ maxWidth: 580 }}>
          <SectionLabel color={C.emberDeep}>The passage</SectionLabel>
          <h2 style={{ fontFamily: T.font, fontWeight: 300, fontSize: 'clamp(32px, 4.4vw, 56px)', color: C.ink, lineHeight: 1.15, marginBottom: 32 }}>
            Soul Awakened <span style={{ color: C.emberDeep }}>→</span> Soul Aligned
          </h2>
          <p style={text}>
            Soul Awakened is when something stirs. It might be a restlessness you can't explain, a quiet knowing that you've got more to give, or something you'd call a calling. Soul Aligned is when you're living it from the inside out, in your work, your home and your ordinary Tuesday afternoon. The stretch between the two is where I walk with people.
          </p>
          {/* Krish's seed image, lifted out as the section's one IM Fell line (5 Nov 2026) */}
          <p style={{ fontFamily: T.serif, fontStyle: T.serifStyle, fontSize: 'clamp(23px, 2.3vw, 30px)', lineHeight: 1.35, color: C.emberDeep, margin: '36px 0 36px', maxWidth: 520 }}>
            Like a seed in dark soil, everything you need is already in there.
          </p>
        </div>
      </div>
    </section>
  );
}

// ── A wordless band of woodland, for breath ───────────────────
// The photo sits on its own layer inside the strip, so the "Photos drift" pick can slide it as you scroll
// (data-band tells sw-interactions.js to include it). `graded` pulls a bright daylight photo into the blue hour.
function NatureBand({ src = 'uploads/woodland-mist.jpg', pos = 'center 55%', label = 'Misty woodland in early light', graded }) {
  return (
    <div data-band="" role="img" aria-label={label} style={{ position: 'relative', overflow: 'hidden', height: 'clamp(200px, 26vw, 360px)', background: C.black }}>
      {/* The photo layer is taller than the strip (25% above and below), giving it room to slide */}
      <div style={{ position: 'absolute', top: '-25%', bottom: '-25%', left: 0, right: 0, backgroundImage: `url('${src}')`, backgroundSize: 'cover', backgroundPosition: pos, filter: graded ? 'grayscale(0.1) brightness(0.92)' : undefined }} />
      {graded && <div style={{ position: 'absolute', inset: 0, background: C.blueGrade, mixBlendMode: 'multiply', opacity: 0.3 }} />}
    </div>
  );
}

// ── Both worlds: one lead fact a side, three rows beneath, the two meeting at the logomark (6 Nov 2026) ──
// The wording lives in pages-copy.js (window.WORLDS), shared with the About page; earlier six-row lists are in the repo's history
function BothWorldsMeet({ sides = [window.WORLDS.boardroom, window.WORLDS.grove] }) {
  const side = (s, align) => (
    <div style={{ textAlign: align }}>
      <span style={{ display: 'block', fontFamily: T.serif, fontStyle: T.serifStyle, fontSize: 21, color: C.ember, marginBottom: 14 }}>{s.title}</span>
      <p style={{ fontSize: 'clamp(26px, 2.6vw, 36px)', fontWeight: 300, lineHeight: 1.12, color: C.white, fontFamily: T.font, letterSpacing: '-0.005em' }}>{s.lead}</p>
      <p style={{ fontSize: 16, color: C.grey4, fontFamily: T.font, marginTop: 8, marginBottom: 22 }}>{s.sub}</p>
      <ul style={{ listStyle: 'none' }}>
        {s.rows.map(r => (
          <li key={r} style={{ fontSize: 16, lineHeight: 1.5, color: C.grey4, fontFamily: T.font, padding: '10px 0', borderTop: `1px solid ${C.line}`, textWrap: 'balance' }}>{r}</li>
        ))}
      </ul>
    </div>
  );
  return (
    <div className="worlds" style={{ display: 'grid', gridTemplateColumns: '1fr auto 1fr', gap: 'clamp(28px,4vw,56px)', marginTop: 'clamp(64px,8vw,112px)', alignItems: 'stretch' }}>
      {side(sides[0], 'left')} {/* both sides left-aligned (Krish, 6 Nov 2026) */}
      <div className="worlds-meet" aria-hidden="true" style={{ display: 'flex', flexDirection: 'column', alignItems: 'center', gap: 16 }}>
        <div className="worlds-line" style={{ flex: 1, width: 1, background: C.line }} />
        <Logomark size={44} color={C.ember} />
        <div className="worlds-line" style={{ flex: 1, width: 1, background: C.line }} />
      </div>
      {side(sides[1], 'left')}
    </div>
  );
}

// ── Both worlds ───────────────────────────────────────────────
function BothWorldsSection({ navigate }) {
  return (
    <section className="pad" style={{ background: C.black, padding: PAD }}>
      <div style={{ ...maxW }}>
        <div className="g2" style={{ display: 'grid', gridTemplateColumns: '5fr 7fr', gap: 'clamp(40px,5vw,80px)', alignItems: 'start' }}>
          <GreenPhoto warm src="uploads/IMG_1509.jpeg" style={{ height: 'clamp(380px, 46vw, 600px)' }} imgStyle={{ objectPosition: '40% top' }} />
          <div>
            <SectionLabel>Who I am</SectionLabel>
            <SectionHeading style={{ marginBottom: 24 }}>A foot in both worlds</SectionHeading>
            {/* Two paragraphs instead of three (5 Nov 2026); the first two are joined, in Krish's words */}
            <BodyText style={{ marginBottom: 18 }}>
              I've followed a quieter voice than my training for as long as I can remember. It's been with me through 31 years of leadership, consulting and coaching, and over 25 years of training and practice in shamanism and Druidry. The people I work with, many of them executives and their teams, say the same few things: that I see the pattern in their life before they can name it, and that I'll challenge them with warmth, compassion and clarity.
            </BodyText>
            <BodyText style={{ marginBottom: 32 }}>
              David and I moved from the UK to Vernon, British Columbia, so we could spend more time in the wilderness. When I'm not up a mountain or in a forest, I'm probably watching a film, singing, playing electric guitar or obsessing over coffee.
            </BodyText>
            <div><OutlineBtn onClick={go(navigate, 'about')}>My story</OutlineBtn></div>
          </div>
        </div>
        <BothWorldsMeet />
      </div>
    </section>
  );
}

// ── Ways in ───────────────────────────────────────────────────
function WayCard({ way, navigate }) {
  const [hov, setHov] = React.useState(false);
  return (
    <a
      href={`/${way.id}`}
      onMouseEnter={() => setHov(true)} onMouseLeave={() => setHov(false)}
      onFocus={() => setHov(true)} onBlur={() => setHov(false)}
      onClick={linkTo(navigate, way.id)}
      style={{ background: C.black, border: `1px solid ${hov ? C.lineStrong : C.line}`, cursor: 'pointer', transition: 'border-color 300ms', display: 'flex', flexDirection: 'column', textDecoration: 'none' }}
    >
      <div style={{ position: 'relative', height: 190, overflow: 'hidden' }}>
        {way.note && (
          <span style={{ position: 'absolute', top: 14, left: 14, zIndex: 1, fontSize: 12, letterSpacing: '0.16em', textTransform: 'uppercase', color: C.black, background: C.ember, padding: '7px 11px', borderRadius: 2, fontFamily: T.font }}>{way.note}</span>
        )}
        <img src={way.image} alt="" style={{ width: '100%', height: '100%', objectFit: 'cover', objectPosition: way.imagePos || 'center', display: 'block', transformOrigin: way.zoomOrigin || 'center', transform: `scale(${(way.zoom || 1) * (hov ? 1.04 : 1)})`, transition: 'transform 700ms ease' }} />
      </div>
      <div style={{ padding: 'clamp(24px,2.6vw,36px)', display: 'flex', flexDirection: 'column', flex: 1 }}>
        <SectionLabel color={way.accent}>{way.tag}</SectionLabel>
        <h4 style={{ fontSize: 'clamp(24px, 2.2vw, 30px)', color: C.white, lineHeight: 1.15, marginBottom: 16, fontFamily: T.font, fontWeight: 300 }}>{way.title}</h4>
        <BodyText style={{ fontSize: 16, marginBottom: way.check ? 14 : 24, flex: 1 }}>{way.body}</BodyText>
        {way.check && <div style={{ marginBottom: 20 }}><DraftNote>{way.check}</DraftNote></div>}
        <span style={{ fontSize: 15, letterSpacing: '0.03em', fontFamily: T.font, color: hov ? C.white : 'rgba(234,231,223,0.7)', transition: 'color 300ms' }}>
          {way.cta} <span style={{ color: way.accent }} aria-hidden="true">→</span>
        </span>
      </div>
    </a>
  );
}

function WaysSection({ navigate, plain }) {
  const ways = [
    {
      id: 'coaching', tag: 'One-to-one', title: 'Soul Aligned Coaching', accent: C.greenForest, image: 'uploads/IMG_1527.jpeg', imagePos: 'center 30%',
      body: "We start with what you're here for and the gifts that are yours alone, then bring your work and your life into line with it, without blowing up what you've built. Usually six months, two sessions a month, with a Master Certified Coach.",
      cta: 'Explore private coaching',
    },
    {
      id: 'soul-compass', tag: 'Eight-week intuition course', title: "The Soul's Compass", accent: C.greenForest, image: 'uploads/souls-compass.jpg', zoom: 2.4, zoomOrigin: '100% 90%',
      body: "Learn to trust the quiet voice that's been guiding you all along. Eight live weeks of grounded, practical training in spiritual intuition, from asking a clear question to meeting your guides, starting on Wednesday 13 January 2027.",
      cta: 'Find out more',
    },
    {
      id: 'wheel', tag: 'A year-long council for men', title: 'The Wheel of Becoming', accent: C.ember, image: 'uploads/embers.jpg',
      body: "One year for the man people see and the man you are to become the same man. Up to 12 men, beginning at Imbolc 2027: eight gates, each marked online with ceremony and council, and a trio of men walking beside you in between.",
      cta: 'Read about the Wheel',
      note: 'Applications open',
    },
  ];
  const readings = {
    id: 'readings', tag: 'A limited number', title: 'Intuitive Readings', accent: C.greenForest, image: 'uploads/bc/lake-dock.jpg', imagePos: 'center 60%',
    body: "Find the next move for your soul, in one spiritual coaching session with me and your guides. Bring four to six questions, whatever's been pressing on you, and book a time that suits you.",
    cta: 'Book a reading',
  };
  const groups = [
    { label: 'One-to-one', cards: [ways[0], readings] },
    { label: 'Group', cards: [ways[1], ways[2]] },
  ];
  return (
    <section id="ways" className="pad" style={{ position: 'relative', overflow: 'hidden', background: C.black, padding: PAD }}>
      {!plain && <div style={{ position: 'absolute', inset: 0, backgroundImage: "url('uploads/bc/forest-path.jpg')", backgroundSize: 'cover', backgroundPosition: 'center 60%' }} />}
      {!plain && <div style={{ position: 'absolute', inset: 0, background: 'linear-gradient(to bottom, rgba(14,21,32,0.72) 0%, rgba(14,21,32,0.38) 30%, rgba(14,21,32,0.38) 75%, rgba(14,21,32,0.62) 100%)' }} />}
      <div style={{ ...maxW, position: 'relative' }}>
        <div style={{ textAlign: 'center', marginBottom: 48 }}>
          <SectionLabel>Ways in</SectionLabel>
          <SectionHeading>Where to begin</SectionHeading>
        </div>
        {groups.map(g => (
          <div key={g.label} style={{ marginBottom: 44 }}>
            <h3 style={{ fontFamily: T.serif, fontStyle: T.serifStyle, fontWeight: 400, fontSize: 'clamp(24px, 2.2vw, 30px)', color: C.white, paddingBottom: 12, marginBottom: 20, borderBottom: '1px solid rgba(234,231,223,0.55)', textShadow: '0 1px 12px rgba(14,21,32,0.7)' }}>{g.label}</h3>
            <div className="g2" style={{ display: 'grid', gridTemplateColumns: '1fr 1fr', gap: 20 }}>
              {g.cards.map(w => <WayCard key={w.id} way={w} navigate={navigate} />)}
            </div>
          </div>
        ))}
        <p style={{ textAlign: 'center', marginTop: 12 }}>
          <a href="/work" onClick={linkTo(navigate, 'work')} style={{ fontSize: 17, color: C.white, fontFamily: T.font, cursor: 'pointer', textDecoration: 'none', textShadow: '0 1px 12px rgba(14,21,32,0.8)' }}>See all the ways to work together <span style={{ color: C.ember }} aria-hidden="true">→</span></a>
        </p>
      </div>
    </section>
  );
}

// ── What I believe: taken off the home page (Krish, 4 Nov 2026); the About page carries it. Kept here for now. Ember cards against the blue ─────────────
function BeliefsSection() {
  const items = [
    { kind: 'seed', text: 'You arrived with a soul assignment, and gifts that are yours alone.' },
    { kind: 'sunrise', text: 'When we give our gifts to each other, everyone rises.' },
    { kind: 'flame', text: 'A candle lit from a candle loses none of its flame.' },
    { kind: 'sprout', text: "The answers you're looking for are already in you." },
    { kind: 'leaf', text: "Nature has been doing this for billions of years, and it's still the best teacher I know." },
    { kind: 'ripple', text: 'When one person owns who they are, it gives others permission to do the same.' },
  ];
  return (
    <section className="pad" style={{ background: C.black, padding: PAD }}>
      <div style={{ ...maxW }}>
        <div style={{ textAlign: 'center', marginBottom: 48 }}>
          <SectionHeading>What I believe</SectionHeading>
        </div>
        <div className="g3" style={{ display: 'grid', gridTemplateColumns: 'repeat(3, 1fr)', gap: 16 }}>
          {items.map((item, i) => (
            <div key={i} className="belief" style={{ background: C.ember, padding: 'clamp(28px,2.8vw,40px)', display: 'flex', flexDirection: 'column', gap: 18, alignItems: 'center', textAlign: 'center' }}>
              <div style={{ flexShrink: 0 }}><AlmanacShape kind={item.kind} color={C.ink} size={76} /></div>
              <p style={{ fontFamily: T.serif, fontStyle: T.serifStyle, fontSize: 'clamp(18px, 1.6vw, 21px)', lineHeight: 1.4, color: C.ink }}>
                {item.text}
              </p>
            </div>
          ))}
        </div>
      </div>
    </section>
  );
}

// ── Manifesto: the old site's idea, in today's words; set as lines, so it doesn't read as an oracle deck ──
const MANIFESTO = [
    'You are sacred in nature, born wild and whole.',
    'You arrived with a soul assignment, and gifts that are yours alone.',
    "The answers you're looking for are already in you.",
    'You are the change you (and we) have been waiting for.',
    'When one person owns who they are, it gives others permission to do the same.',
    'When we give our gifts to each other, everyone rises.',
  ];

// The numbered lines on their own, for the About page's What I believe block (light = parchment ground)
function ManifestoList({ light }) {
  return (
    <ol style={{ listStyle: 'none' }}>
      {MANIFESTO.map((l, i) => (
        // No rules or numbers: just the lines, so nothing cuts across the wheel behind (Krish, 6 Nov 2026)
        <li key={i} style={{ padding: '12px 0' }}>
          <span style={{ fontFamily: T.serif, fontStyle: T.serifStyle, fontSize: 'clamp(20px, 1.8vw, 24px)', lineHeight: 1.35, color: light ? C.ink : C.white }}>{l}</span>
        </li>
      ))}
    </ol>
  );
}

function ManifestoSection({ label = 'What I believe' }) {
  const lines = MANIFESTO;
  return (
    <section className="pad" style={{ background: C.slate, padding: PAD }}>
      <div style={{ ...maxW }}>
        <div className="g2" style={{ display: 'grid', gridTemplateColumns: '4fr 8fr', gap: 'clamp(32px,4vw,64px)', alignItems: 'start' }}>
          <div>
            {label && <SectionLabel>{label}</SectionLabel>}
            <SectionHeading>Manifesto</SectionHeading>
          </div>
          <ol style={{ listStyle: 'none' }}>
            {lines.map((l, i) => (
              <li key={i} style={{ display: 'flex', gap: 20, alignItems: 'baseline', padding: '18px 0', borderTop: i ? `1px solid ${C.line}` : 'none' }}>
                <span style={{ fontFamily: T.font, fontSize: 13, letterSpacing: '0.14em', color: C.ember, minWidth: 22 }}>{String(i + 1).padStart(2, '0')}</span>
                <span style={{ fontFamily: T.serif, fontStyle: T.serifStyle, fontSize: 'clamp(21px, 2vw, 27px)', lineHeight: 1.35, color: C.white }}>{l}</span>
              </li>
            ))}
          </ol>
        </div>
      </div>
    </section>
  );
}

// ── What people say ───────────────────────────────────────────
function TestimonialsSection() {
  const quotes = [
    { q: "Krish is not your average leadership coach. I had a feeling that this was the case after our first conversation and know it now after having worked with Krish for a few months. Krish will take you where you're willing to go (and perhaps a little beyond)… We've worked at the level of being, rather than at the level of doing. But the doing that's flowed naturally from this new state of being has been grounded, authentic and effective. If you're willing to commit, show up and move out of your zone of comfort, Krish is your guy.", name: 'Steve P.', context: '', wide: true },
    // Gemma's line read weak beside Steve's (Krish, 6 Nov 2026)
    false && { q: 'He has an uncanny ability to deliver what I need when I need it most.', name: 'Gemma P.', context: '' },
    { q: "When you work with Krish, you'll always find insights, angles or perspectives that you knew, but did not know that you knew. He's an exceptionally wise man, but humble, pointing you towards your own insights rather than giving them to you.", name: 'Sam G.', context: '' },
    // Karen Darby, Dec 2025, given as testimonial (Praise file). 'Kris' to 'Krish' and the dash to a comma: Krish OK'd both (6 Nov 2026)
    { q: 'From our very first meeting, we established a strong and genuine connection. Krish has a unique ability to “disturb my thinking” in the best possible way, pushing me to grow, rethink assumptions, and unlock new possibilities.', name: 'Karen D.', context: '' },
    // Andrew's and Evgeny's quotes are left out here to save space; both are still on the original preview
    false && { q: 'Before this course I was really just getting into spirituality. I spent many decades ignoring my internal life. It was great learning about how important my inner wisdom is and gaining tools to tap into that side of myself. It was a really refreshing alternative to the standard personal development narratives that never worked for me.', name: 'Andrew', context: '2025' },
    false && { q: "Krish's adeptness at integrating practical, theoretical, spiritual and emotional aspects into a single dialogue was extraordinarily useful. His insightful feedback has helped me to grow both personally and professionally.", name: 'Evgeny', context: '2024' },
  ];
  const card = { padding: 'clamp(24px,2.6vw,36px)', display: 'flex', flexDirection: 'column' };
  return (
    <section className="pad" style={{ background: C.black, padding: PAD }}>
      <div style={{ ...maxW }}>
        <div style={{ display: 'flex', alignItems: 'baseline', justifyContent: 'space-between', flexWrap: 'wrap', gap: 16, marginBottom: 36 }}>
          <SectionHeading>What people say</SectionHeading>
        </div>
        <div className="g3" style={{ display: 'grid', gridTemplateColumns: '1fr 1fr', gap: 20 }}>
          {quotes.filter(Boolean).map((q, i) => (
            <div key={i} className={q.wide ? 'quote-wide' : ''} style={{ ...card, background: C.ember, gridColumn: q.wide ? '1 / -1' : undefined }}>
              <p style={{ fontFamily: T.serif, fontStyle: 'normal', fontSize: 18, lineHeight: 1.6, color: C.ink, marginBottom: 20, flex: 1 }}>“{q.q}”</p>
              <span style={{ fontSize: 12, letterSpacing: '0.18em', textTransform: 'uppercase', color: C.ink, fontFamily: T.font }}>{q.context ? `${q.name}, ${q.context}` : q.name}{q.check && <DraftNote color={C.ink} style={{ marginLeft: 10, letterSpacing: '0.1em' }}>{q.check}</DraftNote>}</span>
            </div>
          ))}
        </div>
      </div>
    </section>
  );
}

// ── Latest transmission ───────────────────────────────────────
function TransmissionSection({ navigate }) {
  const videos = useVideos();
  return (
    <section className="pad" style={{ background: C.parchment, padding: PAD }}>
      <div style={{ ...maxW }}>
        <div className="g2" style={{ display: 'grid', gridTemplateColumns: '1fr 1fr', gap: 'clamp(40px,6vw,96px)', alignItems: 'center' }}>
          <div>
            <SectionLabel color={C.emberDeep}>Transmissions</SectionLabel>
            <SectionHeading color={C.ink} style={{ marginBottom: 24 }}>From the channel</SectionHeading>
            <BodyText style={{ marginBottom: 32, color: C.ink }}>
              I record transmissions on YouTube when something arises: what the seasons are teaching me, what I'm noticing in the work, and what I'm still learning myself. Pull up a chair.
            </BodyText>
            <OutlineBtn color={C.ink} hoverText={C.parchment} onClick={go(navigate, 'transmissions')}>More transmissions</OutlineBtn>
          </div>
          <div>
            <VideoPlayer video={videos[0]} />
            <p style={{ fontFamily: T.serif, fontStyle: T.serifStyle, fontSize: 19, color: C.ink, marginTop: 16 }}>{videos[0].title}</p>
          </div>
        </div>
      </div>
    </section>
  );
}

// ── Closing invitation ────────────────────────────────────────
function HomeCtaSection({ navigate }) {
  return (
    <section style={{ position: 'relative', overflow: 'hidden', padding: 'clamp(96px, 11vw, 140px) 0', textAlign: 'center', background: C.black }}>
      {/* Okanagan Lake at dusk (a stand-in, like the other BC photos); graded lighter than before so the land and the lit clouds read */}
      <div role="img" aria-label="Okanagan Lake at dusk" style={{ position: 'absolute', inset: 0, backgroundImage: "url('uploads/bc/okanagan-lake-dusk.jpg')", backgroundSize: 'cover', backgroundPosition: 'center 55%', filter: 'grayscale(0.2) brightness(0.85)' }} />
      <div style={{ position: 'absolute', inset: 0, background: C.blueGrade, mixBlendMode: 'multiply', opacity: 0.45 }} />
      <div style={{ position: 'absolute', inset: 0, background: 'radial-gradient(ellipse 60% 70% at 50% 50%, rgba(14,21,32,0.62) 0%, rgba(14,21,32,0.3) 100%)' }} />
      {/* The wheel sits off to the side, as in the hero, so its lines never cross the words */}
      <div className="hero-wheel" style={{ position: 'absolute', top: '50%', right: 'clamp(-320px, -14vw, -80px)', transform: 'translateY(-50%)', pointerEvents: 'none' }}>
        <Wheel size={600} opacity={0.22} />
      </div>
      <div style={{ position: 'relative', zIndex: 2, ...maxW }}>
        <SectionLabel>Begin</SectionLabel>
        <h2 style={{ fontSize: 'clamp(36px, 5vw, 68px)', letterSpacing: '-0.01em', color: C.white, lineHeight: 1.08, marginBottom: 24, fontFamily: T.font, fontWeight: 300 }}>
          Your soul didn’t come<br />this far to stay small
        </h2>
        <p style={{ fontFamily: T.serif, fontStyle: T.serifStyle, fontSize: 'clamp(19px, 2vw, 23px)', color: 'rgba(234,231,223,0.85)', marginBottom: 40, lineHeight: 1.55, maxWidth: 620, marginLeft: 'auto', marginRight: 'auto' }}>
          If something here has stirred, trust that. Book a free 30-minute call, and we'll see together whether this is the right next step for you.
        </p>
        <PillBtn onClick={go(navigate, 'book')}>Book a free 30-minute call</PillBtn>
        <p style={{ fontSize: 15, color: C.grey4, fontFamily: T.font, marginTop: 18, letterSpacing: '0.01em' }}>
          Or send me a note if you’d rather write. No obligation.
        </p>
      </div>
    </section>
  );
}

// ══ The home page as chosen on 6 Nov 2026: layout B, the same copy, refined presentation ══
// Worked out in Home Alternative Preview/ (A/B comparison). The earlier home sections above stay,
// as WayCard and WaysSection are used by inner pages; the version before this is in 99 Archive/Superseded drafts/.

const A_PAD = TOK.padFeature;
const cream = TOK.cream;
const creamSoft = TOK.creamSoft;

// ── Hero: same words, the supporting line set in plain cream type ──
function AltHero() {
  const photo = HERO_PHOTOS.oak;
  return (
    <section className="home-hero" style={{ position: 'relative', overflow: 'hidden', background: C.black, paddingTop: 68, minHeight: '100vh', display: 'flex', alignItems: 'center' }}>
      <div className="hero-photo" style={{ position: 'absolute', top: 0, bottom: 0, right: 0, width: 'min(100%, 1800px)' }}>
        <img src={photo.src} alt={photo.alt} style={{ position: 'absolute', inset: 0, width: '100%', height: '100%', objectFit: 'cover', objectPosition: photo.pos, filter: 'grayscale(0.15) brightness(0.95)' }} />
        <div style={{ position: 'absolute', inset: 0, background: C.blueGrade, mixBlendMode: 'multiply', opacity: 0.22 }} />
        <div className="hero-fade" style={{ position: 'absolute', inset: 0, background: 'linear-gradient(90deg, rgba(14,21,32,1) 0%, rgba(14,21,32,0.95) 8%, rgba(14,21,32,0.84) 30%, rgba(14,21,32,0.4) 50%, rgba(14,21,32,0) 66%)' }} />
      </div>
      <div className="hero-wheel" style={{ position: 'absolute', top: '54%', left: '24%', transform: 'translate(-50%,-50%)', pointerEvents: 'none', zIndex: 1 }}>
        <Wheel size={600} opacity={0.16} />
      </div>
      <div className="hero-words" style={{ ...maxW, position: 'relative', zIndex: 2, width: '100%', padding: 'clamp(48px,8vh,104px) clamp(24px, 8vw, 120px)' }}>
        <div style={{ maxWidth: 580 }}>
          <div className="fade-up-1"><SectionLabel>Executive coach and spiritual teacher</SectionLabel></div>
          <h1 className="fade-up-2" style={{ fontSize: 'clamp(44px, 6.2vw, 100px)', letterSpacing: '-0.01em', color: C.white, lineHeight: 1.02, marginBottom: 32, textWrap: 'balance', fontFamily: T.font, fontWeight: 300 }}>
            Unearth Your True Nature
          </h1>
          <p className="fade-up-3" style={{ fontFamily: T.serif, fontStyle: T.serifStyle, fontSize: 'clamp(19px, 1.5vw, 22px)', lineHeight: 1.75, color: cream, maxWidth: 440, marginBottom: 48 }}>
            I help you remember who you truly are, recognise what you're here for, and live from that knowing.
          </p>
          <div className="fade-up-4"><PillBtn onClick={() => { goPage('book'); }}>Book a free 30-minute call</PillBtn></div>
        </div>
      </div>
    </section>
  );
}

// ── You know there's more: the original copy ─────────────────
const RECOG_PANELS = [
  { title: 'Is this all there is?', body: "You've done everything you knew how to do to be successful. You've built the career and made some money, and you've got the house, the car and maybe the family. And yet something inside feels off. You know you've got more to give, and you sense you're here to do something, but you don't know what it is or how to find out." },
  { title: 'How do I actually live this?', body: "You've opened up. You're drawn to the spiritual and the intuitive, and you've done plenty of personal growth, but your life hasn't caught up. Between family, money, other people's expectations and that familiar imposter voice, you're stuck and smaller than you know you are, and you can't see how to make your purpose real in the world." },
];

function RecogIntro({ big }) {
  return (
    <div>
      <SectionLabel>Is this you?</SectionLabel>
      {big
        ? <h2 style={{ fontFamily: T.font, fontWeight: 300, fontSize: 'clamp(42px, 5.2vw, 72px)', lineHeight: 1.05, letterSpacing: '-0.01em', color: C.white, marginBottom: 'clamp(28px,3vw,40px)' }}>You know there's more</h2>
        : <SectionHeading style={{ marginBottom: 24 }}>You know there's more</SectionHeading>}
      <div style={{ maxWidth: big ? 480 : 'none' }}>
        <p style={{ fontFamily: T.serif, fontStyle: T.serifStyle, fontSize: big ? 'clamp(21px, 2vw, 26px)' : 'clamp(19px, 1.8vw, 23px)', lineHeight: 1.5, color: 'rgba(234,231,223,0.86)', marginBottom: 28 }}>
          Something in you has shifted, whether or not you'd call it an awakening, and you can't go back to how things were.
        </p>
        <BodyText style={{ color: cream, fontSize: big ? 18 : 17, lineHeight: 1.75 }}>
          You're carrying it more alone than you'd like, because few people around you get it, and you don't want to look flaky by saying it out loud. It usually shows up in one of two ways.
        </BodyText>
      </div>
    </div>
  );
}

function RecogPanel({ p, i }) {
  return (
    <div style={{ background: i ? 'rgba(10,16,25,0.9)' : 'rgba(23,32,45,0.88)', backdropFilter: 'blur(4px)', border: `1px solid ${i ? C.ember + '66' : C.lineStrong}`, padding: 'clamp(28px,2.8vw,40px)', height: '100%' }}>
      <h3 style={{ fontFamily: T.font, fontWeight: 300, fontSize: 'clamp(23px, 2vw, 27px)', lineHeight: 1.2, color: C.white, marginBottom: 16 }}>{p.title}</h3>
      <div style={{ width: 32, height: 1, background: C.ember, marginBottom: 18 }} />
      <BodyText style={{ fontSize: 17, lineHeight: 1.75, color: creamSoft, maxWidth: 'none' }}>{p.body}</BodyText>
    </div>
  );
}

function RecogGround({ children, pad }) {
  return (
    <section id="recog" className="pad" style={{ position: 'relative', overflow: 'hidden', background: C.black, padding: pad }}>
      <div style={{ position: 'absolute', inset: 0, backgroundImage: "url('uploads/forest-glow.jpg')", backgroundSize: 'cover', backgroundPosition: 'center 40%' }} />
      <div style={{ position: 'absolute', inset: 0, background: 'linear-gradient(90deg, rgba(14,21,32,0.92) 0%, rgba(14,21,32,0.76) 50%, rgba(14,21,32,0.58) 100%)' }} />
      <div style={{ ...maxW, position: 'relative' }}>{children}</div>
    </section>
  );
}

// Two columns, editorial (layout B, chosen by Krish 6 Nov 2026). A larger headline and the introduction on the left;
// the two panels stacked on the right, joined by a fine line that turns gold, with one ember point
function AltRecognitionB() {
  return (
    <RecogGround pad="clamp(96px, 11vw, 144px) 0">
      <div className="g2" style={{ display: 'grid', gridTemplateColumns: '5fr 6fr', gap: 'clamp(40px,6vw,96px)', alignItems: 'center' }}>
        <RecogIntro big />
        <div>
          <RecogPanel p={RECOG_PANELS[0]} i={0} />
          <div aria-hidden="true" style={{ position: 'relative', height: 'clamp(44px,4.5vw,60px)' }}>
            <div style={{ position: 'absolute', top: 0, bottom: 0, left: 'clamp(28px,2.8vw,40px)', width: 1, background: `linear-gradient(to bottom, ${C.lineStrong}, ${C.ember})` }} />
            <div style={{ position: 'absolute', top: '50%', left: 'clamp(28px,2.8vw,40px)', width: 7, height: 7, borderRadius: '50%', background: C.ember, transform: 'translate(-3px,-50%)' }} />
          </div>
          <RecogPanel p={RECOG_PANELS[1]} i={1} />
        </div>
      </div>
    </RecogGround>
  );
}

// ── The passage: the original words, with more room, and the seed line given its own space ──
function AltPassage() {
  return (
    <section className="pad" style={{ position: 'relative', overflow: 'hidden', background: C.parchment, padding: 'clamp(104px, 12vw, 152px) 0' }}>
      <div className="hero-wheel" style={{ position: 'absolute', top: '50%', right: '-6%', transform: 'translateY(-50%)', pointerEvents: 'none' }}>
        <Wheel size={640} opacity={0.14} color={C.ink} />
      </div>
      <div style={{ ...maxW, position: 'relative' }}>
        <div style={{ maxWidth: 600 }}>
          <SectionLabel color={C.emberDeep}>The passage</SectionLabel>
          <h2 style={{ fontFamily: T.font, fontWeight: 300, fontSize: 'clamp(32px, 4.4vw, 56px)', color: C.ink, lineHeight: 1.15, marginBottom: 40 }}>
            Soul Awakened <span style={{ color: C.emberDeep }}>→</span> Soul Aligned
          </h2>
          <p style={{ fontSize: 19, lineHeight: 1.8, color: C.ink, fontFamily: T.font, maxWidth: 560 }}>
            Soul Awakened is when something stirs. It might be a restlessness you can't explain, a quiet knowing that you've got more to give, or something you'd call a calling. Soul Aligned is when you're living it from the inside out, in your work, your home and your ordinary Tuesday afternoon. The stretch between the two is where I walk with people.
          </p>
          <div style={{ width: 48, height: 1, background: C.emberDeep, opacity: 0.6, margin: 'clamp(40px,5vw,56px) 0 28px' }} />
          <p style={{ fontFamily: T.serif, fontStyle: T.serifStyle, fontSize: 'clamp(26px, 2.8vw, 36px)', lineHeight: 1.3, color: C.emberDeep, maxWidth: 540 }}>
            Like a seed in dark soil, everything you need is already in there.
          </p>
        </div>
      </div>
    </section>
  );
}

// ── Both worlds: the same words; the opening sentence set as a lead, the rest in two easier paragraphs ──
function AltBothWorlds({ navigate }) {
  const body = { fontSize: 17, lineHeight: 1.8, color: creamSoft, maxWidth: 'none' };
  return (
    <section className="pad" style={{ background: C.black, padding: A_PAD }}>
      <div style={{ ...maxW }}>
        <div className="g2" style={{ display: 'grid', gridTemplateColumns: '5fr 7fr', gap: 'clamp(40px,5vw,80px)', alignItems: 'center' }}>
          <GreenPhoto warm src="uploads/IMG_1509.jpeg" style={{ height: 'clamp(380px, 46vw, 600px)' }} imgStyle={{ objectPosition: '40% top' }} />
          <div style={{ maxWidth: 580 }}>
            <SectionLabel>Who I am</SectionLabel>
            <SectionHeading style={{ marginBottom: 28 }}>A foot in both worlds</SectionHeading>
            <p style={{ fontFamily: T.serif, fontStyle: T.serifStyle, fontSize: 'clamp(22px, 2vw, 27px)', lineHeight: 1.4, color: C.white, marginBottom: 24 }}>
              I've followed a quieter voice than my training for as long as I can remember.
            </p>
            <BodyText style={{ ...body, marginBottom: 18 }}>
              It's been with me through 31 years of leadership, consulting and coaching, and over 25 years of training and practice in shamanism and Druidry. The people I work with, many of them executives and their teams, say the same few things: that I see the pattern in their life before they can name it, and that I'll challenge them with warmth, compassion and clarity.
            </BodyText>
            <BodyText style={{ ...body, marginBottom: 32 }}>
              David and I moved from the UK to Vernon, British Columbia, so we could spend more time in the wilderness. When I'm not up a mountain or in a forest, I'm probably watching a film, singing, playing electric guitar or obsessing over coffee.
            </BodyText>
            <div><OutlineBtn onClick={() => { navigate('about'); window.scrollTo(0, 0); }}>My story</OutlineBtn></div>
          </div>
        </div>
        <BothWorldsMeet />
      </div>
    </section>
  );
}

// ── Where to begin: the original cards and words; larger body text, every next step in gold ──
function AltWayCard({ way, navigate }) {
  const [hov, setHov] = React.useState(false);
  return (
    <a href={`/${way.id}`} onClick={linkTo(navigate, way.id)}
      onMouseEnter={() => setHov(true)} onMouseLeave={() => setHov(false)} onFocus={() => setHov(true)} onBlur={() => setHov(false)}
      style={{ background: C.black, border: `1px solid ${hov ? C.lineStrong : C.line}`, transition: 'border-color 300ms', display: 'flex', flexDirection: 'column', textDecoration: 'none' }}>
      <div style={{ position: 'relative', height: 'clamp(180px, 17vw, 210px)', overflow: 'hidden' }}>
        {way.note && <span style={{ position: 'absolute', top: 14, left: 14, zIndex: 1, fontSize: 12, letterSpacing: '0.16em', textTransform: 'uppercase', color: C.black, background: C.ember, padding: '7px 11px', borderRadius: 2, fontFamily: T.font }}>{way.note}</span>}
        <img src={way.image} alt="" style={{ width: '100%', height: '100%', objectFit: 'cover', objectPosition: way.imagePos || 'center', display: 'block', transformOrigin: way.zoomOrigin || 'center', transform: `scale(${(way.zoom || 1) * (hov ? 1.04 : 1)})`, transition: 'transform 700ms ease' }} />
      </div>
      <div style={{ padding: 'clamp(26px,2.6vw,36px)', display: 'flex', flexDirection: 'column', flex: 1 }}>
        <span style={{ fontSize: 12, letterSpacing: '0.2em', textTransform: 'uppercase', color: C.ember, fontFamily: T.font, marginBottom: 12 }}>{way.tag}</span>
        <h4 style={{ fontSize: 'clamp(25px, 2.2vw, 30px)', color: C.white, lineHeight: 1.15, marginBottom: 16, fontFamily: T.font, fontWeight: 300 }}>{way.title}</h4>
        <BodyText style={{ fontSize: 17, lineHeight: 1.75, color: creamSoft, marginBottom: 26, flex: 1, maxWidth: 'none' }}>{way.body}</BodyText>
        <span style={{ fontSize: 16, letterSpacing: '0.02em', fontFamily: T.font, color: hov ? C.white : C.ember, transition: 'color 300ms' }}>
          {way.cta} <span aria-hidden="true">→</span>
        </span>
      </div>
    </a>
  );
}

function AltWays({ navigate }) {
  const coaching = { id: 'coaching', tag: 'One-to-one', title: 'Soul Aligned Coaching', image: 'uploads/IMG_1527.jpeg', imagePos: 'center 30%',
    body: "We start with what you're here for and the gifts that are yours alone, then bring your work and your life into line with it, without blowing up what you've built. Usually six months, two sessions a month, with a Master Certified Coach.", cta: 'Explore private coaching' };
  const readings = { id: 'readings', tag: 'A limited number', title: 'Intuitive Readings', image: 'uploads/bc/lake-dock.jpg', imagePos: 'center 60%',
    body: "Find the next move for your soul, in one spiritual coaching session with me and your guides. Bring four to six questions, whatever's been pressing on you, and book a time that suits you.", cta: 'Book a reading' };
  const compass = { id: 'soul-compass', tag: 'Eight-week intuition course', title: "The Soul's Compass", image: 'uploads/souls-compass.jpg', zoom: 2.4, zoomOrigin: '100% 90%',
    body: "Learn to trust the quiet voice that's been guiding you all along. Eight live weeks of grounded, practical training in spiritual intuition, from asking a clear question to meeting your guides, starting on Wednesday 13 January 2027.", cta: 'Find out more' };
  const wheel = { id: 'wheel', tag: 'A year-long council for men', title: 'The Wheel of Becoming', image: 'uploads/embers.jpg', note: 'Applications open',
    body: "One year for the man people see and the man you are to become the same man. Up to 12 men, beginning at Imbolc 2027: eight gates, each marked online with ceremony and council, and a trio of men walking beside you in between.", cta: 'Read about the Wheel' };
  const groups = [{ label: 'One-to-one', cards: [coaching, readings] }, { label: 'Group', cards: [compass, wheel] }];
  return (
    <section id="ways" className="pad" style={{ position: 'relative', overflow: 'hidden', background: C.black, padding: A_PAD }}>
      <div style={{ position: 'absolute', inset: 0, backgroundImage: "url('uploads/bc/forest-path.jpg')", backgroundSize: 'cover', backgroundPosition: 'center 60%' }} />
      <div style={{ position: 'absolute', inset: 0, background: 'linear-gradient(to bottom, rgba(14,21,32,0.86) 0%, rgba(14,21,32,0.8) 12%, rgba(14,21,32,0.42) 32%, rgba(14,21,32,0.42) 75%, rgba(14,21,32,0.66) 100%)' }} />
      <div style={{ ...maxW, position: 'relative' }}>
        <div style={{ textAlign: 'center', marginBottom: 48 }}>
          <SectionLabel>Ways in</SectionLabel>
          <SectionHeading>Where to begin</SectionHeading>
        </div>
        {groups.map(g => (
          <div key={g.label} style={{ marginBottom: 48 }}>
            <h3 style={{ fontFamily: T.serif, fontStyle: T.serifStyle, fontWeight: 400, fontSize: 'clamp(24px, 2.2vw, 30px)', color: C.white, paddingBottom: 12, marginBottom: 22, borderBottom: '1px solid rgba(234,231,223,0.55)', textShadow: '0 1px 12px rgba(14,21,32,0.7)' }}>{g.label}</h3>
            <div className="g2" style={{ display: 'grid', gridTemplateColumns: '1fr 1fr', gap: 24 }}>
              {g.cards.map(w => <AltWayCard key={w.id} way={w} navigate={navigate} />)}
            </div>
          </div>
        ))}
        <p style={{ textAlign: 'center', marginTop: 8 }}>
          <a href="/work" onClick={linkTo(navigate, 'work')} style={{ fontSize: 17, color: C.white, fontFamily: T.font, textDecoration: 'none', textShadow: '0 1px 12px rgba(14,21,32,0.8)' }}>See all the ways to work together <span style={{ color: C.ember }} aria-hidden="true">→</span></a>
        </p>
      </div>
    </section>
  );
}

// ── What people say: one of each client's own sentences, large; the full quote, untouched, a click away (Krish, 6 Nov 2026) ──
function AltTestimonials() {
  const quotes = [
    { pull: "Krish will take you where you're willing to go (and perhaps a little beyond)…",
      full: "Krish is not your average leadership coach. I had a feeling that this was the case after our first conversation and know it now after having worked with Krish for a few months. Krish will take you where you're willing to go (and perhaps a little beyond)… We've worked at the level of being, rather than at the level of doing. But the doing that's flowed naturally from this new state of being has been grounded, authentic and effective. If you're willing to commit, show up and move out of your zone of comfort, Krish is your guy.", name: 'Steve P.' },
    { pull: "He's an exceptionally wise man, but humble, pointing you towards your own insights rather than giving them to you.",
      full: "When you work with Krish, you'll always find insights, angles or perspectives that you knew, but did not know that you knew. He's an exceptionally wise man, but humble, pointing you towards your own insights rather than giving them to you.", name: 'Sam G.' },
    { pull: 'Krish has a unique ability to “disturb my thinking” in the best possible way.',
      full: 'From our very first meeting, we established a strong and genuine connection. Krish has a unique ability to “disturb my thinking” in the best possible way, pushing me to grow, rethink assumptions, and unlock new possibilities.', name: 'Karen D.' },
  ];
  return (
    <section className="pad" style={{ background: C.slate, padding: A_PAD }}>
      <div style={{ ...maxW }}>
        <SectionHeading style={{ marginBottom: 56 }}>What people say</SectionHeading>
        <div className="g3" style={{ display: 'grid', gridTemplateColumns: 'repeat(3, 1fr)', gap: 'clamp(24px,2.8vw,40px)', alignItems: 'start' }}>
          {quotes.map(q => (
            <figure key={q.name} style={{ margin: 0, borderTop: `2px solid ${C.ember}`, paddingTop: 28 }}>
              <blockquote style={{ margin: 0, fontFamily: T.serif, fontStyle: 'normal', fontSize: 'clamp(22px, 1.9vw, 26px)', lineHeight: 1.4, color: C.white, marginBottom: 22 }}>
                “{q.pull}”
              </blockquote>
              <figcaption style={{ fontSize: 12, letterSpacing: '0.2em', textTransform: 'uppercase', color: C.ember, fontFamily: T.font, marginBottom: 16 }}>{q.name}</figcaption>
              <details className="alt-full">
                <summary style={{ fontFamily: T.font, fontSize: 15, color: creamSoft, cursor: 'pointer', minHeight: TOK.tap, display: 'flex', alignItems: 'center', gap: 6 }}>Read the full quote</summary>
                <p style={{ fontFamily: T.font, fontSize: 16, lineHeight: 1.75, color: creamSoft, marginTop: 12 }}>“{q.full}”</p>
              </details>
            </figure>
          ))}
        </div>
      </div>
    </section>
  );
}

// ── Home page ─────────────────────────────────────────────────
function HomePage({ navigate }) {
  return (
    <>
      <AltHero />
      <PressSection />
      <AltRecognitionB />
      <AltPassage />
      <NatureBand />
      <AltBothWorlds navigate={navigate} />
      <AltWays navigate={navigate} />
      <AltTestimonials />
      <TransmissionSection navigate={navigate} />
      <HomeCtaSection navigate={navigate} />
    </>
  );
}

Object.assign(window, { DraftNote, HomeHero, PressSection, IsThisYouSection, PassageSection, NatureBand, BothWorldsSection, WayCard, WaysSection, BeliefsSection, TestimonialsSection, ManifestoSection, ManifestoList, TransmissionSection, HomeCtaSection, HomePage });