// sw-stage2.jsx — stage 2 of the site-wide consistency work (6 Nov 2026): layouts for Coaching, Readings,
// Supervision, Soul Awakened Man and Work with me, drawn to the rules in "Site design rules (6 Nov 2026).md".
// Approved by Krish the same day. The copy is unchanged (pages-copy.js). Transmissions, the launch pages, About and
// the home page are untouched. Remove this file and its script tag in index.html to go back to the originals.

const S2_PAGES = ['coaching', 'readings', 'supervision', 'soul-awakened-man', 'work'];
const s2Cream = TOK.cream;
const s2Soft = TOK.creamSoft;
const KEY_PAD = TOK.padKey;

// Body paragraphs at the shared size and measure
function S2Paras({ s, paras, size = 18 }) {
  const g = GROUNDS[s.bg] || GROUNDS.black;
  const col = s.bg === 'parchment' ? C.ink : s2Cream;
  return paras.map((p, i) => <p key={i} style={{ fontSize: size, lineHeight: 1.8, color: col || g.body, fontFamily: T.font, marginBottom: 20, maxWidth: '33em' }}>{p}</p>);
}

// A short line of the page's own words, set large in serif beside the prose
function PullLine({ text, light }) {
  return (
    <figure style={{ margin: 0, borderLeft: `2px solid ${light ? C.emberDeep : C.ember}`, paddingLeft: 'clamp(20px,2.4vw,32px)' }}>
      <p style={{ fontFamily: T.serif, fontStyle: T.serifStyle, fontSize: 'clamp(26px, 2.6vw, 34px)', lineHeight: 1.3, color: light ? C.ink : C.white }}>{text}</p>
    </figure>
  );
}

// Words and a photo, as before, with the testimonial given more presence: larger, upright serif, gold rule
function TextPhotoQuote({ s }) {
  return (
    <Section s={s} style={{ padding: KEY_PAD }}>
      <div className="g2" style={{ display: 'grid', gridTemplateColumns: '7fr 5fr', gap: 'clamp(32px,5vw,80px)', alignItems: 'center' }}>
        <div>
          <Heading s={s}>{s.heading}</Heading>
          <S2Paras s={s} paras={s.paras} />
          {s.quote && (
            <figure style={{ margin: '32px 0 0', borderTop: `2px solid ${C.ember}`, paddingTop: 24, maxWidth: '34em' }}>
              <p style={{ fontFamily: T.serif, fontStyle: 'normal', fontSize: 'clamp(21px, 1.9vw, 24px)', lineHeight: 1.5, color: C.white, marginBottom: 14 }}>“{s.quote.q}”</p>
              <figcaption style={{ fontSize: 12, letterSpacing: '0.2em', textTransform: 'uppercase', color: C.ember, fontFamily: T.font }}>{s.quote.who}</figcaption>
            </figure>
          )}
        </div>
        <GreenPhoto warm src={s.image} style={{ height: 'clamp(340px, 40vw, 540px)' }} imgStyle={{ objectPosition: s.imagePos || 'center' }} />
      </div>
    </Section>
  );
}

// A cream opening section: prose on the left, one of its own lines set large on the right
function ProseAndPull({ s, pull, paras }) {
  return (
    <Section s={s} style={{ padding: KEY_PAD }}>
      <div className="g2" style={{ display: 'grid', gridTemplateColumns: '7fr 5fr', gap: 'clamp(40px,6vw,96px)', alignItems: 'center' }}>
        <div>
          <Heading s={s}>{s.heading}</Heading>
          <S2Paras s={s} paras={paras} />
        </div>
        <PullLine text={pull} light={s.bg === 'parchment'} />
      </div>
    </Section>
  );
}

// ── Soul Aligned Coaching ─────────────────────────────────────
const COACHING = {
  text: ({ s }) => {
    if (s.heading === 'Designed entirely around you') {
      const last = s.paras[1];
      const pull = last.slice(last.indexOf('Some sessions'));
      return <ProseAndPull s={s} paras={s.paras} pull={pull} />;
    }
    if (s.quote && s.image) return <TextPhotoQuote s={s} />;
    return KIT.text({ s });
  },
  // The four needs: two by two, so each explanation has room; title and icon on one line, text upright at full size
  four: ({ s }) => (
    <Section s={s} style={{ padding: KEY_PAD }}>
      <div style={{ maxWidth: 760 }}>
        <Heading s={s}>{s.heading}</Heading>
        <S2Paras s={s} paras={[s.intro]} />
      </div>
      <div className="g2" style={{ display: 'grid', gridTemplateColumns: '1fr 1fr', gap: 20, marginTop: 24 }}>
        {s.items.map(it => (
          <div key={it.title} style={{ background: C.ember, padding: 'clamp(28px,3vw,40px)', display: 'grid', gridTemplateColumns: '64px 1fr', gap: 20, alignItems: 'start' }}>
            <AlmanacShape kind={it.kind} color={C.ink} size={56} />
            <div>
              <h3 style={{ fontFamily: T.font, fontWeight: 400, fontSize: 26, color: C.ink, marginBottom: 10 }}>{it.title}</h3>
              <p style={{ fontFamily: T.font, fontSize: 18, lineHeight: 1.65, color: C.ink }}>{it.body}</p>
            </div>
          </div>
        ))}
      </div>
    </Section>
  ),
};

// ── Intuitive Readings ────────────────────────────────────────
const READINGS = {
  text: ({ s }) => {
    if (s.heading === 'You, me, and the Divine') return <ProseAndPull s={s} paras={s.paras.slice(0, -1)} pull={s.paras[s.paras.length - 1]} />;
    if (s.image) return KIT.text({ s: { ...s } });
    // Text-only sections at the shared measure and spacing
    return (
      <Section s={s} style={{ padding: KEY_PAD }}>
        <div style={{ maxWidth: 760 }}>
          <Heading s={s}>{s.heading}</Heading>
          <S2Paras s={s} paras={s.paras} />
        </div>
      </Section>
    );
  },
  // The investment and the booking in one block (Krish, 6 Nov 2026): the price on the left, the notes and the
  // button that opens the calendar on the right. The separate price section is folded in here.
  price: () => null,
  booking: ({ s }) => {
    const pr = window.PAGES.readings.sections.find(x => x.type === 'price');
    return (
      <Section s={s} style={{ padding: KEY_PAD }}>
        <div className="g2" style={{ display: 'grid', gridTemplateColumns: '5fr 7fr', gap: 'clamp(40px,6vw,96px)', alignItems: 'start' }}>
          <div className="price-col" style={{ borderRight: `1px solid ${C.line}`, paddingRight: 'clamp(24px,4vw,56px)' }}>
            <SectionLabel>{pr.label}</SectionLabel>
            <span style={{ display: 'block', fontFamily: T.font, fontWeight: 300, fontSize: 'clamp(56px, 7vw, 88px)', color: C.white, lineHeight: 1, marginBottom: 12 }}>{pr.amount}</span>
            <p style={{ fontFamily: T.serif, fontStyle: T.serifStyle, fontSize: 22, color: s2Cream }}>{pr.note}</p>
          </div>
          <div>
            <Heading s={s}>{s.heading}</Heading>
            <S2Paras s={s} paras={[s.body]} size={17} />
            <p style={{ fontSize: 17, lineHeight: 1.8, color: s2Cream, fontFamily: T.font, maxWidth: '33em', marginBottom: 28 }}>
              Booking means you’re agreeing to my <a href="/terms" style={{ color: C.ember }}>Terms</a>. A reading missed or cancelled with less than 72 hours’ notice can’t be moved or refunded.
            </p>
            <TidyCalModal path={s.path} label={s.button} />
          </div>
        </div>
      </Section>
    );
  },
};

// ── Supervision ───────────────────────────────────────────────
// Kept restrained: no new geometry, no pull lines. Panels and the quote get the shared spacing and type.
const SUPERVISION = {
  text: ({ s }) => {
    if (s.quote && s.image) return <TextPhotoQuote s={s} />;
    return (
      <Section s={s} style={{ padding: KEY_PAD }}>
        <div style={{ maxWidth: 760 }}>
          <Heading s={s}>{s.heading}</Heading>
          <S2Paras s={s} paras={s.paras} />
        </div>
      </Section>
    );
  },
  doors: ({ s }) => (
    <Section s={s} style={{ padding: KEY_PAD }}>
      <div style={{ maxWidth: 760 }}>
        <Heading s={s}>{s.heading}</Heading>
        <S2Paras s={s} paras={[s.intro]} />
      </div>
      <div className="g2" style={{ display: 'grid', gridTemplateColumns: '1fr 1fr', gap: 24, margin: '28px 0 36px' }}>
        {s.doors.map(d => (
          <div key={d.title} style={{ background: C.slate, border: `1px solid ${C.line}`, borderTop: `2px solid ${C.ember}`, padding: 'clamp(28px,3.4vw,48px)' }}>
            <SectionLabel>{d.label}</SectionLabel>
            <h3 style={{ fontFamily: T.font, fontWeight: 300, fontSize: 'clamp(25px,2.2vw,29px)', lineHeight: 1.2, color: C.white, marginBottom: 18 }}>{d.title}</h3>
            <p style={{ fontSize: 17, lineHeight: 1.8, color: s2Soft, fontFamily: T.font }}>{d.body}</p>
          </div>
        ))}
      </div>
      <div style={{ maxWidth: 760 }}><S2Paras s={s} paras={[s.outro]} /></div>
    </Section>
  ),
  details: ({ s }) => (
    <Section s={s} style={{ padding: KEY_PAD }}>
      <Heading s={s}>{s.heading}</Heading>
      <DetailRows rows={s.rows} />
    </Section>
  ),
};

// ── Soul Awakened Man ─────────────────────────────────────────
const SAM = {
  text: ({ s }) => {
    if (s.image) return KIT.text({ s });
    return (
      <Section s={s} style={{ padding: KEY_PAD }}>
        <div style={{ maxWidth: 760 }}>
          <Heading s={s}>{s.heading}</Heading>
          <S2Paras s={s} paras={s.paras} />
        </div>
      </Section>
    );
  },
  // Is this you? Two balanced panels; the "for you" side keeps its gold title, mark and top rule, the "not yet" side stays quiet
  fit: ({ s }) => {
    const col = (title, items, mark, yes) => (
      <div style={{ background: 'rgba(14,21,32,0.9)', border: `1px solid ${yes ? C.ember + '88' : C.line}`, borderTop: `2px solid ${yes ? C.ember : C.lineStrong}`, padding: 'clamp(28px,3.4vw,48px)' }}>
        <h3 style={{ fontFamily: T.serif, fontStyle: T.serifStyle, fontSize: 'clamp(24px,2.2vw,28px)', color: yes ? C.ember : C.grey4, marginBottom: 20 }}>{title}</h3>
        <ul style={{ listStyle: 'none' }}>
          {items.map(i => (
            <li key={i} style={{ display: 'grid', gridTemplateColumns: '24px 1fr', fontSize: 18, lineHeight: 1.6, color: yes ? s2Cream : C.grey4, fontFamily: T.font, padding: '14px 0', borderTop: `1px solid ${C.line}` }}>
              <span style={{ color: yes ? C.ember : C.grey3 }}>{mark}</span><span>{i}</span>
            </li>
          ))}
        </ul>
      </div>
    );
    return (
      <section className="pad" style={{ position: 'relative', overflow: 'hidden', background: C.black, padding: 'clamp(96px,10vw,136px) 0' }}>
        <div style={{ position: 'absolute', inset: 0, backgroundImage: `url('${s.backdrop}')`, backgroundSize: 'cover', backgroundPosition: 'center 55%' }} />
        <div style={{ position: 'absolute', inset: 0, background: 'linear-gradient(to bottom, rgba(14,21,32,0.72) 0%, rgba(14,21,32,0.42) 35%, rgba(14,21,32,0.42) 75%, rgba(14,21,32,0.66) 100%)' }} />
        <div style={{ ...maxW, position: 'relative' }}>
          <Heading s={s} center>{s.heading}</Heading>
          <div className="g2" style={{ display: 'grid', gridTemplateColumns: '1fr 1fr', gap: 24, alignItems: 'stretch' }}>
            {col(s.yesTitle, s.yes, '✦', true)}
            {col(s.noTitle, s.no, '·', false)}
          </div>
        </div>
      </section>
    );
  },
};

// ── Work with me ──────────────────────────────────────────────
// The offer cards as on the home page: same image height, label, title, body size and gold next step
const WORK = {
  cards: ({ s, navigate }) => (
    <Section s={s} style={{ padding: KEY_PAD }}>
      {s.heading && <Heading s={s}>{s.heading}</Heading>}
      <div className="g3" style={{ display: 'grid', gridTemplateColumns: `repeat(${Math.min(s.items.length, 3)}, 1fr)`, gap: 24 }}>
        {s.items.map(w => <AltWayCard key={w.to} navigate={navigate} way={{ id: w.to, tag: w.tag, title: w.title, body: w.body, cta: w.cta, image: w.image, imagePos: w.imagePos, zoom: w.zoom, zoomOrigin: w.zoomOrigin }} />)}
      </div>
    </Section>
  ),
};

const S2 = { coaching: COACHING, readings: READINGS, supervision: SUPERVISION, 'soul-awakened-man': SAM, work: WORK };

// These pages draw with the stage 2 layouts (approved by Krish, 6 Nov 2026); every other page passes straight through
const S2Prev = window.PageView;
function S2PageView({ id, navigate }) {
  if (!S2_PAGES.includes(id)) return <S2Prev id={id} navigate={navigate} />;
  const over = S2[id];
  return window.PAGES[id].sections.map((s, i) => {
    const Comp = over[s.type] || KIT[s.type];
    return Comp ? <Comp key={i} s={s} navigate={navigate} /> : null;
  });
}
window.PageView = S2PageView;
PageView = S2PageView;